全画面表示にする

没入型の全画面ウェブサイトを簡単に作成し ですが、ウェブ上のあらゆるコンテンツと同様に、方法はいくつかあります。 「インストールされたブラウザ」をサポートするブラウザが増えているため、これは特に重要です。 クリックします。全画面表示にできます

アプリまたはサイトを全画面表示にする

ユーザーまたはデベロッパーがウェブアプリを全画面表示にする方法はいくつかあります。

  • ユーザー操作に応じてブラウザに全画面表示するようリクエストします。
  • ホーム画面にアプリをインストールします。
  • 偽装: アドレスバーを自動的に非表示にする。

ユーザー操作に応じてブラウザに全画面表示するようリクエストする

すべてのプラットフォームが同じというわけではありません。 iOS Safari には全画面 API がありませんが、Android の Chrome では全画面 API が用意されています。 Firefox、IE 11 以降。作成するほとんどのアプリケーションでは、 JS API と、全画面仕様で提供される CSS セレクタです。主な 全画面表示エクスペリエンスを構築する際に注意する必要がある JS API は次のとおりです。

  • element.requestFullscreen()（現在、Chrome、Firefox、IE では接頭辞付き） 要素が全画面モードで表示されます。
  • document.exitFullscreen()（現在、Chrome、Firefox、IE では先頭に付加されています。 Firefox では代わりに cancelFullScreen() が使用されます）により、全画面モードがキャンセルされます。
  • document.fullscreenElement（現在、Chrome、Firefox、IE では接頭辞付き） いずれかの要素が全画面モードの場合に true を返します。
で確認できます。

アプリが全画面表示になると、ブラウザの UI コントロールが表示されなくなります 説明します。これにより、ユーザーがニュース メディアと 体験できます「転送」などの標準のナビゲーション コントロールがない Backwards、更新ボタンはありませんです。 このシナリオには対応することが重要ですいくつかの CSS セレクタを使用すると、 ブラウザがサイトにアクセスしたときに、サイトのスタイルと表示形式を変更する クリックします。

<button id="goFS">Go fullscreen</button>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      document.body.requestFullscreen();
    },
    false,
  );
</script>

上記の例はやや不自然です。セキュリティの複雑さをすべて隠し、 使用しないでください。

実際のコードはもっと複雑です。Mozilla により、全画面表示の切り替えに使用できる非常に便利なスクリプトが作成されました。として ベンダー プレフィックスの状況は複雑で、 面倒な作業になります。少し単純にしたコードで 非常に複雑です。

function toggleFullScreen() {
  var doc = window.document;
  var docEl = doc.documentElement;

  var requestFullScreen =
    docEl.requestFullscreen ||
    docEl.mozRequestFullScreen ||
    docEl.webkitRequestFullScreen ||
    docEl.msRequestFullscreen;
  var cancelFullScreen =
    doc.exitFullscreen ||
    doc.mozCancelFullScreen ||
    doc.webkitExitFullscreen ||
    doc.msExitFullscreen;

  if (
    !doc.fullscreenElement &&
    !doc.mozFullScreenElement &&
    !doc.webkitFullscreenElement &&
    !doc.msFullscreenElement
  ) {
    requestFullScreen.call(docEl);
  } else {
    cancelFullScreen.call(doc);
  }
}

私たちウェブ デベロッパーは複雑さを嫌います。高度な抽象化 API として使用できる Sindre Sorhus の Screenfull.js モジュールです。 これにより、2 つのわずかに異なる JS API とベンダー プレフィックスが 1 つに統合されます。 一貫した API を提供します。

全画面表示 API のヒント

ドキュメントを全画面表示にする
<ph type="x-smartling-placeholder">
</ph> body 要素の全画面表示
図 1: body 要素の全画面表示

body 要素を全画面表示にすることを考えるのは自然なことですが、 WebKit や Blink ベースのレンダリングエンジンでは body 要素の幅を最小のサイズに縮小して 説明します。（Mozilla Gecko では問題ありません）。

<ph type="x-smartling-placeholder">
</ph> ドキュメント要素の全画面表示
図 2: ドキュメント要素の全画面表示

この問題を解決するには、body 要素ではなく document 要素を使用します。

document.documentElement.requestFullscreen();
動画要素を全画面表示にする

動画要素を全画面表示する方法は、他の動画要素の場合とまったく同じです。 全画面表示されます。動画で requestFullscreen メソッドを呼び出す 要素です。

<video id="videoElement"></video>
<button id="goFS">Go Fullscreen</button>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      var videoElement = document.getElementById('videoElement');
      videoElement.requestFullscreen();
    },
    false,
  );
</script>

<video> 要素にコントロール属性が定義されていない場合は、次のようにします。 一度全画面表示にすると、ユーザーが動画を操作することはできません。「 そのためには、動画をラップする基本的なコンテナを用意し、 表示したいコントロールを選択します。

<div id="container">
  <video></video>
  <div>
    <button>Play</button>
    <button>Stop</button>
    <button id="goFS">Go fullscreen</button>
  </div>
</div>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      var container = document.getElementById('container');
      container.requestFullscreen();
    },
    false,
  );
</script>

この方法では、複数のコンテナを組み合わせて CSS 疑似セレクタを含むオブジェクト（たとえば、[goFS] ボタンを非表示にするため）

<style>
  #goFS:-webkit-full-screen #goFS {
    display: none;
  }
  #goFS:-moz-full-screen #goFS {
    display: none;
  }
  #goFS:-ms-fullscreen #goFS {
    display: none;
  }
  #goFS:fullscreen #goFS {
    display: none;
  }
</style>

これらのパターンを使用すると、全画面表示が実行中であることを検出して、 表示する必要があります。

  • スタートページに戻るリンクを提供する
  • ダイアログを閉じる、または前の状態に戻るメカニズムを提供する

ホーム画面から全画面でページを起動する

全画面表示のウェブページに移動できない。 ブラウザ ベンダーは、ページが読み込まれるたびに全画面表示されることを熟知しています。 全画面表示にするにはユーザーの操作が必要になります。 ベンダーはユーザーに「インストール」を許可しているとはいえ、インストールすると オペレーティング システムに、ユーザーが 説明します。

主要なモバイル プラットフォームはどれでも簡単に実装できます。 メタタグ、マニフェスト ファイルを次のように指定します。

iOS

iPhone が発売されて以来、ユーザーはウェブアプリを 全画面表示のウェブアプリとして起動できます。

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

content が yes に設定されている場合、ウェブ アプリケーションは全画面モードで実行されます。 そうでない場合は表示されません。デフォルトの動作では、Safari を使用してウェブ 説明します。ウェブページを全画面モードで表示するかどうかを指定できます 読み取り専用のブール値の JavaScript プロパティを使用します

<ph type="x-smartling-placeholder"></ph> Apple をご覧ください。

Chrome for Android

Chrome チームは最近、ブラウザに次の指示を出す機能を実装しました。 ユーザーがホーム画面に追加したときにページを全画面表示で表示する。内容 iOS Safari モデルと類似しています。

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

ウェブアプリでアプリケーションのショートカット アイコンを デバイスのホーム画面を表示し、アプリを全画面の「アプリモード」で起動する Chrome for Android の「ホーム画面に追加」選択します。

<ph type="x-smartling-placeholder"></ph> Google Chrome をご覧ください。

より適切な方法は、ウェブアプリ マニフェストを使用することです。

ウェブアプリ マニフェスト（Chrome、Opera、Firefox、Samsung）

ウェブ アプリケーションのマニフェスト 単純な JSON ファイルで、 特定のエリアでのユーザーへのアプリの表示方法を制御できる機能 ユーザーが期待するアプリ（モバイルのホーム画面など）や、 さらに重要なこととして ユーザーが起動する方法を考えます 将来的にはマニフェストを使用してアプリをさらに細かく制御できるようになりますが、現時点では アプリのリリース方法に着目します詳細は以下のとおりです。

  1. マニフェストについてブラウザに伝える
  2. 起動方法の説明

マニフェストを作成してサイトにホストしたら、あとは 次のように、アプリを含むすべてのページからリンクタグを追加します。

<link rel="manifest" href="/manifest.json" />

Chrome は Android 向けバージョン 38 以降でマニフェストをサポート（2014 年 10 月） インストール時のウェブアプリの表示方法を （short_name、name、icons プロパティを介して）ホーム画面に追加する方法と、 ユーザーが起動アイコンをクリックしたときに（start_url 経由、 display、orientation）。

マニフェストの例を以下に示します。必ずしもすべてを網羅しているわけではありません 使用します。

{
  "short_name": "Kinlan's Amaze App",
  "name": "Kinlan's Amazing Application ++",
  "icons": [
    {
      "src": "launcher-icon-4x.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "landscape"
}

この機能は常に進化しており、 この機能をサポートするブラウザのユーザーに対して 統合されたエクスペリエンスが提供されます

ユーザーがサイトやアプリをホーム画面に追加すると、 アプリのように扱うことができます。つまり ユーザーを アプリの機能ではなく、商品のランディング ページ。たとえば ユーザーがアプリにログインする必要がある場合は、 説明します。

ユーティリティ アプリ

大部分のユーティリティ アプリでは、すぐにメリットを得ることができます。対象者 他のアプリと同じように スタンドアロンでリリースしてほしい サポートしています。アプリにスタンドアロンで起動するよう指示するには、これをウェブに追加します アプリ マニフェスト:

    "display": "standalone"
ゲーム

大半のゲームは、マニフェストによるメリットをすぐに実現できます。巨大な 多くのゲームは全画面表示でリリースし、特定のゲームを強制的に 方向です。

垂直スクローラーや Flappy Birds のようなゲームを開発しているなら、 ポートレート モードで表示したいと思うでしょう。

    "display": "fullscreen",
    "orientation": "portrait"

一方、X-Com のようなパズルやゲームを制作する場合、 常に横向きを使用する必要があります。

    "display": "fullscreen",
    "orientation": "landscape"
ニュースサイト

ほとんどの場合、ニュースサイトは純粋なコンテンツ ベースのサービスです。ほとんどのデベロッパー ニュースサイトにマニフェストを追加するなんて考えもしないでしょう。マニフェスト ニュースサイトのトップページに表示する内容と 起動する方法（全画面表示または通常のブラウザタブ）で表示されます。

どちらを使用するかは、ユーザーがニュース メディアに 体験できます想定されるすべての Chrome ブラウザをサイトに 表示を browser に設定できます。

    "display": "browser"

ニュースサイトがニュース中心のアプリと同じように UI からウェブライクな Chrome をすべて削除する場合は、 これを行うには、display を standalone に設定します。

    "display": "standalone"

偽装: アドレスバーを自動的に非表示にする

「偽の全画面表示」が可能次のようにアドレスバーを自動的に非表示にします。

window.scrollTo(0, 1);

これは非常にシンプルな方法で、ページが読み込まれ、ブラウザバーに 邪魔にならないようにします残念ながら標準化されておらず、 サポートされません。また、多くの特徴を回避する必要もあります。

たとえばブラウザでは多くの場合、ユーザーが 戻ります。window.scrollTo を使用するとこれがオーバーライドされるため、煩わしくなります。 できます。この問題を回避するには、最後のポジションを ローカル ストレージに保存して、エッジケース（たとえば、ユーザーが ページが複数のウィンドウで開きます）。

UX ガイドライン

全画面を活用したサイトを作成する場合 知っておくべきユーザー エクスペリエンスの潜在的な変化の数 ユーザーに愛される サービスを構築できるようになります

ナビゲーション コントロールに依存しない

iOS には、ハードウェアの戻るボタンや更新ジェスチャーはありません。そのため、 ロックされることなく、ユーザーがアプリ全体を移動できるようにします。

実行モードが全画面モードかインストール モードかを検出可能 簡単に利用できます

iOS

iOS では、navigator.standalone ブール値を使用して、ユーザーが次の操作を行ったかどうかを確認できます。 起動するかどうかを設定します。

if (navigator.standalone == true) {
  // My app is installed and therefore fullscreen
}

ウェブアプリ マニフェスト（Chrome、Opera、Samsung）

インストール済みのアプリとして起動したときに、Chrome が真の全画面表示にならない document.fullscreenElement は null を返し、CSS セレクタは 動作しません。

ユーザーがサイト上で操作によって全画面表示をリクエストすると、標準の 全画面表示 API を使用できます。たとえば、CSS 疑似セレクタでは、 次のように、全画面表示の状態に反応するように UI を調整します。

selector:-webkit-full-screen {
  display: block; // displays the element only when in fullscreen
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

ユーザーがホーム画面からサイトを起動した場合、display-mode メディア ウェブアプリ マニフェストで定義したクエリに設定されます。ケースが 全画面表示では次のようになります。

@media (display-mode: fullscreen) {
}

ユーザーがスタンドアロン モードでアプリを起動した場合、display-mode メディアクエリは standalone になります。

@media (display-mode: standalone) {
}

Firefox

ユーザーがサイト経由での全画面表示をリクエストした場合、またはユーザーが 全画面モードでは、標準の全画面 API のすべてを使用できます。 全画面表示の状態に UI を適応させることができる CSS 疑似セレクタです 次のようになります。

selector:-moz-full-screen {
  display: block; // hides the element when not in fullscreen mode
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

Internet Explorer

IE の CSS 疑似クラスにはハイフンがありませんが、それ以外は同様に機能します。 Chrome と Firefox です。

selector:-ms-fullscreen {
  display: block;
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

仕様

仕様のスペルは、IE で使用される構文と一致します。

selector:fullscreen {
  display: block;
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

ユーザーを全画面表示のままにする

全画面 API は動作が少し複雑になることがあります。ブラウザ ベンダーは、 全画面表示でロックしてもらうために できる限り早く 全画面表示から終了できるようつまり、インフラストラクチャを 複数のページにまたがって全画面表示されるウェブサイトには、次のような理由があります。

  • window.location = "http://example.com" を使用してプログラムで URL を変更すると、全画面表示が終了します。
  • ユーザーがページ内の外部リンクをクリックすると、全画面表示が終了します。
  • navigator.pushState API を使用して URL を変更すると、 役立ちます

ユーザーを全画面表示にするには、次の 2 つの方法があります。

  1. インストール可能なウェブアプリのメカニズムを使用して、全画面表示にすることができます。
  2. # フラグメントを使用して、UI とアプリの状態を管理します。

#syntax を使用して URL を更新する（window.location = "#somestate"） window.onhashchange イベントをリッスンしています。ブラウザの独自の関数を使用して、 履歴スタックを使用してアプリケーション状態の変更を管理し、ユーザーが ハードウェアの「戻る」ボタンを 履歴 API を次のように使用して、新しいダッシュボードを作成できます。

window.history.go(-1);

全画面表示に移行するタイミングをユーザーが選択できるようにする

ウェブサイトが何かをしている場合ほどユーザーが不快に感じるものはない 想定外の結果です。ユーザーがサイトにアクセスするときに、ユーザーをだまして誘導してはいけません クリックします。

最初のタッチイベントをインターセプトして requestFullscreen() を呼び出さないでください。

  1. イライラします。
  2. ブラウザでは将来的に、メッセージを表示するかどうかを アプリが全画面表示になります

アプリを全画面で起動する場合は、インストールの使用を検討してください。 提供できます

ホーム画面にアプリをインストールするようユーザーに促さない

インストール用アプリのメカニズムによって全画面表示を提供する場合 ユーザーに配慮する必要があります

  • 控えめにすること。バナーまたはフッターを使用して、 。
  • ユーザーがプロンプトを閉じた場合は、次回から表示しない。
  • 初回アクセス時にアプリをインストールする可能性は低い（ただし、そうでない場合は除く） 顧客に満足しているかを把握できます次の時間が経過したらインストールするよう促すことを検討します。 サイト上でポジティブなやり取りをします
  • 定期的にサイトを訪問するユーザーがアプリをインストールしていない場合、 インストールする可能性は低くなります。スパム行為はしないでください。

まとめ

完全に標準化および実装された API はありませんが、いくつかの この記事で紹介したガイダンスを参考にすれば、 クライアントに関係なく、ユーザーの画面全体の利点を活かすことができます。

フィードバック