「WebIOPi」が用意してくれているGUIを使えば、GPIOピンの一つひとつを簡単にコントロールできます。しかし、私たちが本当にやりたいことは、ロボットを「前」「後」「右前」「左前」「右後」「左後」に動かし「停止」させることです。

図50●ブラウザー上でロボットのコントロール画面を作る
図50●ブラウザー上でロボットのコントロール画面を作る
[画像のクリックで拡大表示]

 つまり図50のようなブラウザー上のコントロール画面を使ってロボットをコントロールできれば理想的です。

 ブラウザー上に情報を表示するには、HTMLの書き方のルールに従う必要があります。ルールそのものは決して難しいものではありません。ここでは、ロボットのコントローラーを作るために必要最低限のルールだけを説明します。

HTML初体験!

図51●HTMLのタグの構造
図51●HTMLのタグの構造

 HTMLは文書の中身(内容)だけではなく、文書の構造(骨格)や表示方法(見せ方)も記述できる言語です。ここでいう文書の構造とは、「この部分が見出しで、この部分は段落」といったような、文書の構造を明確に示す情報のことです。HTMLでは、この情報を「タグ」と呼ばれる目印を使って記述します。

 「<ooo>タグ」は「<ooo>」という形式で始まり「</ooo>」で終わるのが基本です(図51)。また、<ooo>を開きタグ、</ooo>を閉じタグと呼びます(この二つがペアなところがポイントです)。このように記述することで、「この部分は<ooo>タグに含まれているから、こういう意味だ」といった具合に文書の構造が明確になるわけです。

 またタグの中に別のタグを含むといった入れ子構造になることもよくあります。例えば図52のように「<ooo>タグ」の中に別の「<xxx>タグ」が含まれるようなケースです。

 このような書き方では、タグの入れ子構造が深くなると、視覚的にだんだん文書の構造が把握しにくくなってきます。そこで、新しいタグの前にはいくつかスペースを挿入して右横にズラし、どのタグとどのタグがペアなのかを見やすく記述するのが一般的です*4図53)。

図52●入れ子になったHTMLタグ
図52●入れ子になったHTMLタグ
図53●タグを視覚的に見やすくする
図53●タグを視覚的に見やすくする
*4 コンピュータはスペースを無視します。つまりコンピュータにとってスペースはあってもなくても同じです。スペースは人間が視覚的に見やすくするための工夫にすぎません。