iPad用のサイトを作りたい
iPad用のWebアプリが作りたいので、色々調べてみました
Web Clip
Web ClipとはホームスクリーンにWebサイトのショートカットをおける機能のこと。登録されるショートカットのアイコンは任意に設定できる。
To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png or apple-touch-icon-precomposed.png. If you use apple-touch-icon-precomposed.png as the filename, Safari on iPhone OS won’t add any effects to the icon.
To specify an icon for a single webpage or replace the website icon with a webpage-specific icon, add a link element to the webpage, as in:
In the above example, replace custom_icon.png with your icon filename. If you don’t want Safari on iPhone OS to add any effects to the icon, replace apple-touch-icon with apple-touch-icon-precomposed.
とあるので、サーバーのルートフォルダに"apple-touch-icon.png"か"apple-touch-icon-precomposed.png"というファイル名の画像を用意するか
<link rel="apple-touch-icon" href="/custom_icon.png"/>
と適当なファイル名でアイコンを指定すれば、設定できるようだ。
また、デフォルトでアイコンを角丸にしたりしてくるのだが、"apple-touch-icon-precomposed.png"というファイル名にしておくと、フィルタがかからない。
Safari Developer Libraryより
アイコンサイズは57ピクセル四方だとそのまま反映されるようだ。
Safari Developer Libraryより
起動画面の設定(Startup Image)*1
<link rel="apple-touch-startup-image" href="/任意のファイル名.png">
とすると"startup.png"がネイティブアプリのようの表示される。
画像サイズは320 x 460で縦向き画像でないといけない。
フルスクリーンモード
<meta name="apple-mobile-web-app-capable" content="yes" />
とするとフルスクリーンモードで表示され、ステータスバーだけになる。
window.navigator.standaloneプロパティを参照することでJavascriptからフルスクリーンモードか確認できる
ステータスバーの見た目を変更
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
とすると、ステータスバーが黒くなる。また"black-translucent"と設定すると、黒半透明になる
制限事項
簡単に公式ページを見る感じでは以下の通り。
- 扱える画像は「GIF, PNG,TIFF」のどれかで、3Mピクセルまでです(例えば、1024 * 1024)、また「JPEG」なら32Mピクセルまでです
- Canvasタグの最大は３Mピクセルまでです(150 x 300のCanvasオブジェクトの場合はその限りではない)
- HTML, CSS, JavaScript, ストリーミングでないデータの合計は10M以内でないといけません
- Javascriptの実行は10秒以内でないといけません
- 最大で8タブしか開けません
参考資料
- 英語だけど、公式ドキュメントがすごく参考になるSafari Developer Library
- iPhone向け、UIのテンプレートiui - Web UI Framework for mobile devices - iOS, Android, Palm, and others - Google Project Hosting
今日はここまで。
*1:iOS3.0からの機能
