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

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 と同じ扱いになっているようだ。

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

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

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

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