読者です 読者をやめる 読者になる 読者になる

Life, Education, Death

プログラミング以外でも思ったことをつらつらと書きたい

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で縦向き画像でないといけない。

Safari Developer Libraryより

フルスクリーンモード

<meta name="apple-mobile-web-app-capable" content="yes" />

とするとフルスクリーンモードで表示され、ステータスバーだけになる。
window.navigator.standaloneプロパティを参照することでJavascriptからフルスクリーンモードか確認できる

Safari Developer Libraryより

ステータスバーの見た目を変更

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

とすると、ステータスバーが黒くなる。また"black-translucent"と設定すると、黒半透明になる

Safari Developer Libraryより

制限事項

簡単に公式ページを見る感じでは以下の通り。

  • 扱える画像は「GIF, PNG,TIFF」のどれかで、3Mピクセルまでです(例えば、1024 * 1024)、また「JPEG」なら32Mピクセルまでです
  • Canvasタグの最大は3Mピクセルまでです(150 x 300のCanvasオブジェクトの場合はその限りではない)
  • HTML, CSS, JavaScript, ストリーミングでないデータの合計は10M以内でないといけません
  • Javascriptの実行は10秒以内でないといけません
  • 最大で8タブしか開けません

Safari Developer Libraryより

参考資料


今日はここまで。

*1:iOS3.0からの機能