Corredor

ウェブ、プログラミングの勉強メモ。

iOS Safari で Web ページを「ホームに追加」した時にフルスクリーン表示にする

Safari(サファリ) 2017年 11 月号

Safari(サファリ) 2017年 11 月号

iPhone などの Safari で任意の Web ページを開いている時に、下部のメニューから「ホームに追加」という項目を選択できる。コレを選択すると、そのページのブックマークがホーム画面に配置できるのだ。アイコンは適当に Favicon を拾ってきてくれて (なければページのサムネがアイコンになる)、パッと見は普通のアプリアイコンみたいにホーム画面に鎮座して面白い。

この「ホームに追加」だが、Web ページ側の HTML である指定をしておくと、ホーム画面のアイコンからページを開いた時にフルスクリーン表示にできるのだ。

試してみたい方は…

何のことを言っているのか分からない方、実際に試してみたい方は、iOS Safari で以下のページを開いてほしい。

ページを開いたら、メニューから「ホームに追加」を選択する。ホームに追加されたアイコンをタップしてページを開くと、Safari の URL バーやメニューなどが表示されず、フルスクリーンで Web ページが表示されていることが分かるだろう。

試しに、以下のトップページを「ホームに追加」してみて、その挙動の違いを確認してほしい。トップページはフルスクリーンモード設定をしていない普通のページなので、ホーム画面からアイコンを選んでも Safari の1タブで開く。

「ホームに追加」したページをフルスクリーンで表示させる

「ホームに追加」したページをフルスクリーンで表示させるには、当該ページの head 要素内に以下を追加する。

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

この apple-mobile-web-app-capable という指定で、ホーム画面から起動した時にフルスクリーン表示になる。ちなみにこの meta 要素を指定していない場合は no もしくは default と同じ扱いになっているようだ。

フルスクリーン表示の場合の仕様色々

このフルスクリーンモード、面白い動きをしているのでいくつか確認した仕様・挙動を記しておく。

  • フルスクリーンモードで起動されたページは Safari アプリとは別のプロセスで起動する。
    • アプリスイッチャーで独立したアプリのように振る舞う。この meta 要素を指定しない場合は単純に Safari の1タブとして開く。
  • ページ内のリンクを踏むと Safari に移動してしまう。
    • これは JavaScript で遷移を制御することで回避できるようだ。やり方は別途解説する。
  • 「Safari」アプリで履歴を消したり、「設定」アプリでキャッシュをクリアしても、フルスクリーンモードで表示するページのキャッシュが強く残る。
    • 設定アプリで Safari のキャッシュをクリアしても、直後だとキャッシュが残っていて、そのページが更新されていても反映されないことがある。
    • Web ページのアプリアイコンをホーム画面から削除してみたり、何度か開き直したりしているうちに再読込してくれるが、イマイチキャッシュのタイミングが分からない。
    • とりあえず Safari とは少し独立して動いているようなので、開いた時に必ず再読込させるような仕組みをページ側で用意してやらないといけなさそう。

今まであまり使ったことのなかった「フルスクリーンモード」だが、「ニコニコチャンネル」アプリがこのやり方で任意のチャンネルのアプリアイコンをホーム画面に追加できる作りになっていて知った。

作り方によっては、App Store でアプリを配布したりせず、本当に Web ページだけでハイブリッドアプリを作ったりできるかもしれない。iOS ネイティブとの連携がそこまで必要なければ Cordova 要らずだろうか。