Webアプリを創る 😊クリエイティブWeb

Web アプリをスマフォのホーム画面に登録してもらうためのメモ 1

2014年2月6日

Web アプリでもネイティブアプリのように iPhone や Android のホーム画面に登録できるし、オフラインで動作させることもできるということなので、実際にやってみて、まとめてみました。

まず、一番最初に準備するのがホーム画面に登録するためのアイコンで、そのサイズは以下のとおりです。

iPhone (iOS7) 120px × 120px
iPhone（iPhone 4以降でiOS6まで）114px × 114px
iPhone（iPhone 3 まで）57px × 57px
iPad （iOS7）152px × 152px
iPad （iOS6までのRetina）144px × 144px
iPad （iOS6までの普通）72px × 72px
Android 48dp × 48dp

Android の場合は、Developers の Iconography をみると1x、1.5x、2x、3x、4x の機種があるので、48px, 72px, 96px, 144px, 192px のものになりますが、4x の XXXHDPi の機種は現実にはまだ殆ど存在しないはずで、3x と 2x が主流です。

これだけたくさんの解像度のアイコンを作るのは大変なので、取りあえずは152pxのアイコンを作っておけば、スマートフォン側で自動的に縮小、拡大してくれるので、それで対応することにしました。

作成したアイコンを表示させるためには、iPhone の場合は、それをPNG画像にして apple-touch-icon.png というファイル名でサイトのルートディレクトリに置いておけばいいだけです。apple-touch-icon-precomposed.png という名前で保存してもいいのですが、この場合は iPhone が自動でハイライト/シャドウを付けなくなります。iOS7からはフラットデザインになってiOS6以前のようなハイライト/シャドウはなくなったので、apple-touch-icon-precomposed.png を使う意味はあまりないと思います。

サイズを複数設置する場合は以下のようにアイコンのサイズを指定して設置すると、iPhone側で自動的に適当なサイズのものを選択してくれます。

apple-touch-icon-120x120.png

Android の場合は、ファイルを設置しただけでは認識してくれないので、以下のように link ダグで指定してやります。この指定の方法は、iOSの場合と同じです。

アイコンのサイズを指定したい場合は、以下のように sizes プロパティで指定することができます。この指定の方法も、iOSの場合と同じです。

以上で、スマートフォンのホーム画面にアイコンを貼り付けることができるようになります。スマートフォン側でホーム画面にアイコンを貼り付ける操作をどうするかについては省略します。

Safari のスタンドアローンモード（フルスクリーンモード）について

Safari では、スタンドアローンモード（フルスクリーンモード、Webアプリモード）と呼ばれているモードがあります。このモードに設定して、ホーム画面から起動するとURLバーが無くなってネイティブアプリに近くなります。

設定は、metaタグを使って以下のようにします。

また、以下の設定をすると下側にある Safari のステイタスバーの色を自分のアプリの色に合わせて変更することができます。

しかし、このモードを実際に使ってみて、注意が必要だと思われる点がありました。具体的には以下のとおりです。

1. localStorage が mobile Safari とは別になってしまう。

mobile Safari で設定した内容が使えなくなるので、結構不便だと思いました。

2. 普通のリンクだと mobile Safari が起動してしまう

普通にリンクすると mobile Safari が起動して、mobile Safari の該当のページが表示されます。だから、最早スタンドアローンモードはなくなってしまって、簡単に戻ることもできなくなります。これを防ぐためには、リンクをページ内リンクにするか、JavaScript での移動にします。

下の参考に記載した stackoverflow の Q&A によると下のようなスクリプトを書いてやればいいようです。

var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++)
{
  a[i].onclick=function()
  {
    window.location='this.getAttribute("href");
    return false
  }
}

http://d.hatena.ne.jp/izit_kosuke/20110219/1298073430

http://stackoverflow.com/questions/2898740/iphone-safari-web-app-opens-links-in-new-window

3. 処理速度が遅くなる

スタンドアローンモードにすると、どうも起動時間が遅くなるように感じます。stackoverflow の Q&A にもあって、セキュリティの関係で Nitro という高速のJavaScriptエンジンが使えなくなるためのようです。

http://stackoverflow.com/questions/13413984/slow-initial-loadingscreen-ios-web-app

Android の場合にどうなるかを Nexus 5 で試してみました。Nexus 5 の場合は、localStorage は同じものを使います。普通のリンクにしておいてもモードが変わることはありません。その代わり、普通のリンクでは外部リンクであっても全画面表示のままになってしまいます。そして、ホーム画面のアイコンから立ち上げた場合、登録したページが表示されるのではなく、直近に表示されていたページがそのまま表示されます。

スタンドアローンモードを使うと見かけはアプリらしくなるのですが、採用するのがいいのかどうかは結構微妙です。localStorage が mobile Safari とは別になってしまうというのは、利用者にとっては結構戸惑うと思います。自分の場合は、アプリとしての完成度が低いので、当面はスタンドアローンモードを使わないことにしました。

次回は、Web アプリをオフラインで動作させることに挑戦したいと思っています。

Categories: Web アプリ
comment

Webアプリを創る 😊クリエイティブWeb

Web アプリをスマフォのホーム画面に登録してもらうためのメモ 1

Safari のスタンドアローンモード（フルスクリーンモード）について

カテゴリー

最近の投稿