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

Pocket
80 interests

iOSでウェブサイトをフルスクリーン表示させる方法をメモしておきます。言葉で説明するより、画面を見てもらうのが早いと思います。

web-apps-like-native-apps-01

iPhoneのSafariで、ウェブサイトを閲覧すると、通常は、上図左のような画面になりますが、上図右のような画面表示にするための方法です。Safariのアドレスバーや、ナビゲーションバーが表示されませんので、使える場面は限られますが、以下のような使い方ができるのではないでしょうか。

  1. Google Maps等のFull JavaScriptのWebアプリを広いスクリーンで表示する
  2. いわゆるハイブリッドアプリ(ネイティブアプリ中身がHTML)を作る過程での簡易確認
  3. 制御ボタンもHTMLで作って、Webアプリだけど、ネイティブアプリっぽく見せる

1. と 3. は、ほぼ同義ですね。既に存在しているWebアプリを広い画面で使うか、自分で作るかの違いです。
Google Mapsをフルスクリーン表示させるのは、iPhone5が発売されて、Google Mapsのアプリが削除されたときに流行ったりしました。現在は、Google Mapsのネイティブアプリが存在していますが、当時はなかったので、重宝した方もいらっしゃるのではないでしょうか。
リンク:iOS6でGoogleMapsをフルスクリーン表示にしてみました – W&R : Jazzと読書の日々

そんな少し古いネタを今更取り上げるのは、2. 3. あたりを、最近、頻繁に作っていたからです。

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

では、早速見ていきましょう。
iOSでウェブサイトをフルスクリーン表示させるには、以下の手順が必要です。

  1. フルスクリーン表示用のHTMLファイルを作成、サーバに設置
  2. そのファイルに、Safariでアクセスした上で、「ホーム画面に追加」を行う
  3. ホームに追加されたアイコンをタップすると、フルスクリーンモードで指定ページが表示される

フルスクリーン表示用のHTML

以下は、フルスクリーン表示用のHTMLファイルのサンプルです。

フルスクリーンモードの指定とステータスバーの設定

6行目 apple-mobile-web-app-capableyesにすることで、フルスクリーン表示となります。7行目の apple-mobile-web-app-status-bar-styleを指定することで、ステータスバーの色を制御することができます。 blacknativeは不透過黒、 black-translucentは透過黒になります。
この辺りのメタタグについては、以下のサイトに詳しいです。
リンク:iPhone向けSafari、HTML拡張属性を使いこなす – 株式会社シンメトリック公式ブログ

web-apps-like-native-apps-02
上図左: <meta name="apple-mobile-web-app-status-bar-style" content="black">

上図右: <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

ご覧の通り、 black-translucentを指定すると、ステータスバーが透過黒になるだけでなく、ステータスバーとWeb領域が別のレイヤーになります。Web領域の高さ(height)が、ステータスバーの20px分だけ広くなります。スクロールすると、以下のような感じです。

web-apps-like-native-apps-03

指定ページをフルスクリーンモードで表示

続いて、10行目〜16行目。 window.navigator.standaloneオブジェクトで、iPhoneのスクリーンモードを調べて、フルスクリーンであった場合は、指定したページへリダイレクトさせます。そう出なかった場合は、ホーム画面への追加を指示するメッセージを表示します。

必須ではないが、指定しておくと良いこと

地味だけど重要なのが、8行目。
このメタタグ viewportはなくてもよいですが、記述しておくと、iPhoneにあったサイズになるので、メッセージが読みやすくなりますね。で、やってはならないのが、 viewportwidth=device-widthを記述してしまうこと。これを付けてしまうと、下図のように、フルスクリーンモードが、iPhone4sまでのサイズになってしまいます。

web-apps-like-native-apps-04

9行目のメタタグ apple-touch-iconも、なくても良いですが、記述しておくことで、ホーム画面に追加される際の画像を指定することができます。以下のようなイメージです。

web-apps-like-native-apps-05

メタタグを apple-touch-icon-precomposedに変更すると、光沢処理が施されていないアイコンを表示することができます。以下の通りです。

web-apps-like-native-apps-06

アイコンが表示されることによって、ネイティブアプリっぽさが表現できますね。

Bookmarkletを使う

必ずしもHTMLファイルを作る必要がある訳ではありません。以下のブックマークレットを用意しておけば、任意のページをフルスクリーン表示させることができます。リダイレクト先のURLと、ホームアイコンの指定は、適宜編集してください。

デメリット、注意点等

広いスクリーンで閲覧することができるようになりましたが、意外な落とし穴があります。一般的なウェブサイトをそのままフルスクリーン表示すると、アンカータグを押したタイミングでSafariが起動し、画面が切り替わってしまうのです。
これでは、せっかくフルスクリーン表示にしても、意味がなくなってしまいます。ただし、JavaScriptでの画面遷移は、有効ですので、一括で書き換えてしまいましょう。HTMLに手を加えずにやるのであれば、以下のようなやり方が良いのではないでしょうか。
リンク:Webアプリモードで意外と書かれていない落とし穴 – Kaleidoscope

あと、分かりきったことですが、ナビゲーションバーがありませんので、「戻る」「進む」「更新」等が、できません。導線が確保されていれば問題ありませんが、ご留意ください。

HTMLの知識だけで、ネイティブアプリっぽい何かを作る

僕は職業柄、モックアップを作っては壊し、作っては壊しを行うことが多いです。最終的にハイブリッドアプリを作る企画であった場合等、ワイヤーフレームを書くような感覚で、HTMLでモックアップを作って、お客さんの反応を貰いながら、レスポンシブに変更していくというスタイルを取っています。これには、いくつかのメリットがあって、例えば、以下のようなものです。

  • 遠隔地にいるお客さんにも手軽に届けることができること
  • Ad Hocをインストールしてもらう必要がないこと
  • 何ならPCでの確認でも問題ないこと

これは、Webアプリならではのことだと思います。

全国に散らばる複数の方に見ていただかないといけないような業務なので、色々模索した結果、今は、このスタイルに落ち着きました。HTML + CSS + JS であれば、僕一人で作業が完結できるので、コストもスピードも良いです。もちろん、(予算次第で)最終的にはデザイナーを起用して作り直しますよ。

例えば、以下のようなイメージです。最上部20pxのステータスバーは、ネイティブのものですが、それ以外は全てHTMLです。ウェブフォントを使って、アイコンを表示させる等して、極力、コストを下げるようにしています。色の修正等が発生しても簡単に変更できますからね。

web-apps-like-native-apps-07

コンテンツや制御ボタンのイベントは無い状態なので、1日前後で追加する感じです。
デモやソースコードは、以下のリンクからどうぞ。

Pocket
80 interests