前回はbusyboxのhttpd上でCGIを実装し、CGIからの操作でGPIOポートを操作してLEDを点灯/消灯できるところまで製作しました。今回はいよいよ最終回で、HTMLの見栄え改良とリレー基盤の製作などを行います。

ユーザーインタフェースの改良

　iPhoneのディスプレーの物理解像度は3G以前のモデルが320×480、いわゆるRetina液晶になってからは640×960（iPhone4）または640x1136（iPhone5）です。しかし通常のWebサイトはPC用にデザインされているため幅320や640の液晶でははみ出してしまい、これを防ぐためiPhoneのブラウザー（Safari）はデフォルトで画面幅が約1024ピクセル相当になるよう縮小して表示する仕様になっています。以前のHTMLやCGIのテストでやたら小さく表示されたのはこのためです。今回は電球の画像を240×320で作り、これを480×640に拡大したものを「現在の状態」に使用、ON/OFFボタンには「iPhone風」の画像を240×240で作って原画サイズで使うことにしました。

　前回は＜input type="submit"＞を用いてボタンを実装しましたが、今回は画像ボタンを使います。フォームの発行を画像ボタンで行うのは＜input type=”image” src=URL＞で実現できますが、このタイプのボタンは単に「押された」だけでなく「何処が押された」という情報がパラメーターX、Yで付加されます。QUERY_STRINGが「SW=ON&X=145&Y=137」のようになるわけです。なので前回のスクリプトのように、環境変数QUERY_STRING に対する単純な文字列一致比較でON/OFFを判定できなくなります。