登山部部長の菊池です。
今日は小ネタをいくつか紹介したいと思います。
Mobile Safari には表示しているWEBサイトをネイティブアプリのように、ホーム画面に追加する機能がついています。画面下部にあるステータスバーから、真ん中のアイコンをタップすると表示される「ホーム画面に追加」ですね。Web Clip なんても呼ばれるアレです。
Web Clip したら 4 インチの画面なのに 3.5 インチで表示されてしまう
iPhone 5 で動作確認したところ上下に黒い余白が出来てしまったことありませんか？あるいは、余白が出てしまって困っている人いませんか！？
これ、viewport の設定で解決出来るんですよね。
余白が出ちゃう場合は、きっとこんな感じで width 指定が入っていると思います。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />width を外してみると
<meta name="viewport" content="initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />フルスクリーンで表示されるようになります。
以上、終了！となると短すぎですかね。
こんな感じの小ネタを少々追加してみたいと思います。
Web Clip アイコンの指定
みなさんご存知だと思いますが、「ホーム画面に追加」ボタンのアイコンを指定することが出来ます。サーバーのドキュメントルートに、アイコンのファイルを置くだけなのでやっておいた方がお得ですよね。ちなみに、ファイル名で光沢あり/無しを選べたりします。
光沢あり： apple-touch-icon.png
光沢なし： apple-touch-icon-precomposed.png
別のファイル名で指定したり、デバイスによってアイコンサイズを変えたりも出来るのですが、詳しくは公式ドキュメントの「Specifying a Webpage Icon for Web Clip」を参照ください。
スタートアップ画像の指定
Web Clipでホーム画面に追加したアイコンをタップしたときに、ネイティブアプリっぽくスプラッシュ画像を表示することが出来ます。これも簡単で HTML の HEAD タグの中に LINK タグでファイル名を指定するだけです。こんな感じ。
<link rel="apple-touch-startup-image" href="/Default@2x.png">
なのですが、このままでは3.5インチ、4インチの画面で画像が拡大縮小されてしまう！
タグの media 属性を指定することで画面サイズによって画像を切り替えることが出来ます。こんな感じ。
画面の向きによって画像を変えたりも出来るのですが、詳しくは StackOverflow の「Mulitple “apple-touch-startup-image” resolutions for iOS web app (esp. for iPad)?」が参考になるかと思います。
フルスクリーンモードの指定
さて、Web Clipでホーム画面に追加したアイコンをタップして起動したときに、上下のアドレスバーやナビゲーションバーが気になりませんか？これ、出ないようにすることが出来ます。HTML の HEAD タグ中の META タグでコントロールできます。こんな感じ。
<meta name="apple-mobile-web-app-capable" content="yes">
ぐっとネイティブアプリっぽくなりましたね。
でも、リンクをクリックして他のページに遷移すると、Mobile Safari が別に起動してそっちに移動してしまいます。ブラウザに行ってしまうのですね。
Web Clip した HTML 内で、動的にコンテンツを更新するようにすると回避出来そうです。これは後ほど検証してみたいと思います。お楽しみに。
長くなってしまったので、今回はここまでにしたいと思います。
みなさん良い週末を！
菊池でした。
