ボタンには「<button>タグ」を使っています。このタグの中で「onClick」を使えば、ボタンがクリックされたときに呼び出す関数(function)を指定できます。関数とは特定の処理をするプログラムで、同じ処理をあちこちで繰り返し行うような場合は、その処理を関数として定義しておくと便利です。

 「<script>タグ」はJavaScriptと呼ばれるプログラムを記述する部分です。ボタンが押されたときに実行すべきプログラム(関数)もこのタグの中で定義します。

 「<style>タグ」はHTMLの各要素を視覚的にどのように表示するかを指定する部分です。例えば、ボタンの大きさや背景色、文字の色、バックグランドカラーなどをここで指定します。

「関数」でGPIOを制御する

 実際にGPIOピンをON/OFFしているのは次の関数です。

webiopi.digitalWrite()
 この関数を使って右側のモーターと左側のモーターをそれぞれコントロールするピンをON/OFFするには以下のようにします。
GPIOの24番ピン:「GPIO8」を1にする:
    webiopi.digitalWrite(8, 1)

GPIOの26番ピン:「GPIO7」を0にする:
    webiopi.digitalWrite(7, 0)

GPIOの16番ピン:「GPIO23」を1にする:
    webiopi.digitalWrite(23, 1)

GPIOの18番ピン:「GPIO24」を0にする:
    webiopi.digitalWrite(24, 0)

 ここではGPIOのピンヘッダーの番号ではなく、図57に示すピンの名前で指定していることに注意してください。

図57●GPIOのピン番号と名前の対応

 「前進」というボタンを押して、二つのモーターが同時に回りロボットが前進すれば成功です!