2012年12月4日火曜日

iPhoneのWebアプリ


とりあえず外から制御するためにhttpsでアクセスされた時にsocketでコマンドを投げるcgiを作って運用しています。
アクセスはSafariでcgiを呼び出した状態を『ホーム画面に追加』でアイコン化して使っていました。
ところがこの方法だとSafariの中にページが開いている状態で残っており、うっかりそのページを開いてしまうとreloadしてしまいます。状態を取る系のコマンドの場合は問題ないのですが、実行系のコマンドの場合は再度コマンドを発行してしまいます。
エアコンをつけるコマンドを発行した後ページを閉じずに置いておいて、リモコンでエアコンを消して出かけた後にうっかりSafariを開いてしまうとエアコンがついてしまいます。

これに対応するにはiPhoneのアプリを作るしか無いかと考えていましたが、ググるともっと簡単な方法があるのが判りました。
CGIで返すhtmlの<head>タグの中に
<meta name="apple-mobile-web-app-capable" content="yes">
の記述を追加してSafariから開き『ホーム画面に追加』でアイコン化することで、アイコンを開いた時の挙動が変わります。
これまではSafariの1ページとして開いていたのが独立したアプリとして開いてくれます。

この設定だけだと上部のステータスバーが出てしまいますが、
<meta name="apple-mobile-web-app-status-bar-style" content="black">
を追加することで消すことができます。
さらにiPhoneで見るのにちょうどいいように画面の幅に合わせます。
<meta name="viewport" content="width=1024">
を追加して適当な画面幅になるように横幅を設定します。(1024pixelにしているのはグラフの横幅です)


アプリとしてのアイコンをapple-touch-icon-precomposed.pngの名前でサーバーのDocumentRootに置いておくとアイコン化する時に使ってくれます。





ホームボタンをダブルクリックして出てくる動作中のアプリの一覧にもSafariとは別に出てくるようになり別のアプリとして扱われます。当然ながらSafariのページには出てきていません。



これで一見するとiPhoneのアプリに見えるようになりました。


0 件のコメント:

コメントを投稿