iPhone向けフルスクリーンwebアプリとその他もろもろ備忘録

web iPhone gadget-MIKU

safariで閲覧する場合には画面内にステータスバー(画面上部の電波強度とかバッテリー残量が表示されてるやつ)と戻るとかブックマークとかのバー(名前分からない)が必ず表示されます。これはiPhoneでこの画面下のバーを表示しないようなフルスクリーンのwebアプリを作るためのメモです。
ちなみにsafariの画面をフルスクリーン表示するにはホーム画面にブックマーク登録し、そこから表示する必要があります。普通にsafariから開いたらいつも通りに表示されるだけです。


ソースコード(テスト用なので必要最低限な要素のみ)

<html>
  <head>
    <meta name="viewport" content="width=320, initial-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <link rel="apple-touch-icon" href="iconPicture.png">
  </head>
  <body style="margin:0px;">
    <img src="picture.png" height="460" width="320">
  </body>
</html>


各構文について

<meta name="viewport" content="width=320, initial-scale=1.0, user-scalable=no">

viewportの設定で、描画のサイズや拡大縮小の禁止をしています。user-scalable=yes, maximum-scale=2.0, minimum-scale=1.0のようにすると拡大縮小を許可し、その最大最小値を決められます。

<meta name="apple-mobile-web-app-capable" content="yes">  
<meta name="apple-mobile-web-app-status-bar-style" content="default">

ここでフルスクリーン表示用の設定。content="default"を変更するとステータスバーのスタイルを変更できるようです。

<link rel="apple-touch-icon" href="iconPicture.png">

こうするとホーム画面にブックマークを登録する時のアイコンを指定できます。確かデフォルトではfaviconが表示されたような記憶がありますが、このように指定することもできるようです。
アイコンは57x57(iPhone3GSの場合。iPhone4では114x114(実機で未確認))なので57pxちょうどかその倍数の画像を用意します。中途半端な画像だと縮小で劣化するかもしれません。


bodyタグ内に画像を配置したらデフォルトでは左と上に余白が入るのでstyle="margin:0px;"として余白なしとしています。
画面上部のステータスバー(20px)は消せないので画像サイズ(表示範囲)は460x320(iPhone3GSの場合。iPhone4ではメニューバーが40pxで920x640(実機で未確認))です。


これで表示するとこんな感じになります。下のバーが消えてネイティブアプリのように表示されています。

※ニコニコ動画の画面のように見えますがキャプチャして加工した460x320の画像です。


ホーム画面ではこんな感じ。ネイティブアプリと同様にアイコンに影が付いています。というか動作の見た目で言えばホーム画面から起動するフルスクリーンのwebアプリはほとんどネイティブアプリとの差が分かりません。


ブラウザから加速度センサの値を取るようなこともできるようですし、webアプリでもいろいろ面白そうなものが作れそうです。


参考 : iPhone対応Webサイト構築入門（前編）(http://sourceforge.jp/magazine/08/10/30/1051230)