続けて以下のコマンドを実行して「rasrobo.html」というファイルを新規作成します。

$ sudo nano rasrobo.html 

 編集エディタであるnanoが起動したら先ほどのHTMLを入力して保存し、下記のURLにアクセスしてみましょう。

$ http://rasrobo.local:8000/rasrobo.html 

 図55のように表示されれば成功です!

 「/usr/share/webiopi/htdocs」というディレクトリー(フォルダー)の下に「rasrobo.html」というファイルを保存しましたが、このディレクトリーに置いたHTMLファイルはすべて、「http://rasrobol.local:8000/」に続けてそのファイル名を記述すればブラウザーに表示されます。

RasRoboコントローラーの作成

 続いてブラウザー上にボタンを表示して、それを使ってロボットをコントロールできるようにしましょう。ここではまず、「前進」ボタンが一つだけあるRasRoboコントローラーを作成しましょう(図56)。なお、これから作っていくRasRoboコントローラーの完成形は最後に出てきます。先に完成形を入手したい方は、ここをスキップして「RasRoboコントローラーの完成形(押したボタンを赤くする)」のところまで進んでください。HTMLファイル全体をコピペまたはダウンロードで入手できます。

図56●1ボタンのコントロール画面を開いたところ

 最初にやりたいことはボタンを押したときに、特定のGPIOピンをON/OFFすることです。まずは、先ほど作成した「rasrobo.html」の<body>タグの部分を、次に示す内容とまるごと入れ替えて保存してください。ここでも「nano」を利用して「rasrobo.html」ファイルを編集します。

<body>
    <p>ボタンを押すとRasRoboが動くよ!</p>
    <button type="button" onClick="forward()">前進</button>
    <script type="text/javascript" src="/webiopi.js"></script>
    <script type="text/javascript">
        var webiopi = webiopi();
        webiopi.ready(function() {
           webiopi.refreshGPIO(true);
           webiopi.setFunction(8, "OUT");
           webiopi.setFunction(7, "OUT");
           webiopi.setFunction(23, "OUT");
           webiopi.setFunction(24, "OUT");
        });
        function forward() {
                webiopi.digitalWrite(8, 1);
                webiopi.digitalWrite(7, 0);
                webiopi.digitalWrite(23, 1);
                webiopi.digitalWrite(24, 0);
        }
    </script>
    <style type="text/css">
        button {
            display: inline;
            margin: 5px 5px 5px 5px;
            width: 80px;
            height: 45px;
            border-radius: 10px;
            font-size: 12pt;
            font-weight: bold;
            color: white;
            background-color:#808080
        }
        body {
            background-color:#C0C0C0
        }
    </style>
</body>