PR

 前回は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を判定できなくなります。

この記事は会員登録で続きをご覧いただけます

日経クロステック登録会員になると…

新着が分かるメールマガジンが届く
キーワード登録、連載フォローが便利

さらに、有料会員に申し込むとすべての記事が読み放題に!
日経電子版セット今なら2カ月無料