iPad SafariでフルスクリーンAPIを使う

3563 ワード
iOS fullscreen MobileSafari iPad iPad テキストリンク

iPadのSafariでフルスクリーン表示したい

とある案件ではAndroidにおいてChromeのFullScreen APIを利用すれば、完全なフルスクリーン表示になり、疑似アプリとしてHTML表示ができたのだが、iOSだとそのままでは動かなかった。APIをサポートしてないのか？と思い、iPad(iOS)でも動くフルスクリーンの方法を調べました。

アクセスガイドを用いた方法

展示用にiPhone/iPadでWebページをフルスクリーン表示したままにする方法（アクセスガイド）にある、アクセスガイドを用いた方法だと、単にフロントで表示するアプリをロックできるだけで、いわゆる「フルスクリーン」表示にはなりません。

前提として、私が求めているフルスクリーンとは、

  • ブラウザからの表示(HTML)が対象（JSのsetTimeout系もちゃんと動く）
  • アドレスバーを表示しない
  • ナビゲーションバー（画面下）を表示しない
  • その状態でHTML表示/操作ができる
  • すぐに解除されない
  • クローズボタンが表示されっぱなしにならない

アクセスガイドを用いた方法は、アドレスバーが消えないため、フルスクリーンとはいえません。（もしかしたら、iPad(iOS)のバージョンによって、挙動が違ったのかも）

ホームに追加+metaを用いた方法

もう一つ、iOSには、開いているページを「ホームに追加」することで、疑似アプリっぽく表示することができます。そのとき、html中のmetaを適切に記述することで、アドレスバーを非表示にすることができます。

iOSでウェブサイトをフルスクリーン表示させる

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

ただし、これには欠点があり、JavaScriptの動きにかなり制限が入るということです。詳しく検証はしていませんが、setTimeout(),setInterverl()などは動きません。つまり、アプリっぽく動かすことができず、ただそう見えるだけの状態です。リンクなどもタップするとsafariが起動するなど、リンクの工夫も必要です。

検証環境

今回検証した環境は以下の通りです。

  • iPad mini 第五世代 (iOS 12.4)
  • Mobile Safari 12.1.2

次に参考にしたのが、Going Fullscreen On iPad Safari

こちらを見ると、比較的新しいiPad+Safariであれば、FullScreen APIが実装されているようです。上記ページのコードを元に、必要最低限の実装をしてみました。

サンプルコード

See the Pen iPadでFullScreen のテスト by annnews (@annnews) on CodePen.

上記CodePenを実行すると、PCでもフルスクリーンになり、iPadでも下記画像のように、フルスクリーン表示できました。ただし・・・

見ての通り、左上に大きく、フルスクリーンを解除するボタンがけっこう大きめに表示されます。これを消す方法が分かりません。たぶん、Appleの考えからすると、任意にフルスクリーンを解除できないUIは認められないため、強制的に解除ボタンが付くのだと思います。

さらに、ページを少しでもスクロールされたり、スワイプしようものなら、フルスクリーンが即座に解除されます。

つまり、フルスクリーン状態は、あくまで動画などを前面に見せる手段でしかなく、疑似アプリとしてHTMLコンテンツを表示するための手段としては提供してないように思えます。

もしかしたらそのあたりを設定するオプションがあるかもしれませんが・・

Android/Chromeだと、FullScreen APIにて、フルスクリーン化、状態の取得、解除などJSで出来たのですが、iPadだと、ネイティブアプリ化するしかなさそうです。

引き続き調査中。