このページは Cloud Translation API によって翻訳されました。

全画面表示にする

全画面表示のウェブサイトやアプリケーションも簡単に作成できますが、通常のウェブと同様に、作成方法は 2 つあります。全画面表示を起動する「インストール済みウェブアプリ」エクスペリエンスをサポートするブラウザが増えているため、このことは特に重要です。

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

ウェブアプリを全画面表示する方法はいくつかあります。

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

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

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

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

アプリが全画面表示されると、ブラウザの UI コントロールは使用できなくなります。これにより、ユーザーがウェブサイトエクスペリエンスとやり取りする方法が変わります。「進む」や「戻る」などの標準のナビゲーションコントロールはありません。また、更新ボタンのような簡単な方法はありません。このシナリオに対応することが重要です。一部の CSS セレクタを使用すると、ブラウザが全画面モードになったときにサイトのスタイルと表示形式を変更できます。

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

上記の例では、ベンダープレフィックスの使用に関する複雑さがすべて隠されています。

実際のコードはもっと複雑です。Mozilla が作成した非常に便利なスクリプトで、これを使用して全画面表示を切り替えることができます。このように、ベンダープレフィックスを使用する場合、指定された API に比べて複雑で面倒です。以下のコードを少し単純化しても、まだ複雑です。

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 に統合したものです。

Fullscreen API のヒント

ドキュメントを全画面表示にする

本文要素を全画面表示していると思うのは自然なことですが、WebKit または Blink ベースのレンダリングエンジンを使用している場合、すべてのコンテンツを含む可能な限り小さなサイズに本文の幅が縮小されるという不思議な効果があります。（Mozilla Gecko で問題ありません）。

ドキュメント要素を全画面表示しています — 図 2: ドキュメント要素上での全画面表示。

これを解決するには、本文要素ではなくドキュメント要素を使用します。

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> 要素に controls 属性が定義されていない場合、動画が全画面表示されると、ユーザーが動画を制御することはできません。そのためには、動画とユーザーに表示するコントロールをラップする基本的なコンテナを用意することをおすすめします。

<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 プロパティである window.navigator.simple を使用して判断できます。
Apple

Chrome for Android

Chrome チームでは先ごろ、ユーザーがホーム画面にページを追加したときに全画面で起動するようブラウザに指示する機能を実装しました。iOS Safari モデルに似ています。

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

デバイスのホーム画面にアプリのショートカットアイコンを追加してウェブアプリを設定し、Chrome for Android の [ホーム画面に追加] メニュー項目を使用して全画面の「アプリモード」でアプリを起動することができます。
Google Chrome

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

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

ウェブアプリのマニフェストはシンプルな JSON ファイルであり、デベロッパーはこれを使用して、アプリが想定される領域（モバイルのホーム画面など）でユーザーにアプリをどのように表示するかを制御し、ユーザーが起動できる対象、さらに重要な起動方法を制御できます。将来的には、マニフェストによってアプリをさらに詳細に制御できるようになりますが、現時点では、アプリの起動方法のみに絞っています。以下にご紹介します。

マニフェストについてブラウザに伝える
開始方法の説明

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

<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"

ニュースサイトにおいて、そのエクスペリエンスをアプリとして扱い、ウェブに似た Chrome を UI からすべて取り除き、ニュース中心のアプリの大多数のようにニュースサイトが表示されるようにするには、display を standalone に設定します。

    "display": "standalone"

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

次のようにアドレスバーを自動的に非表示にすることで、「架空の全画面表示」にできます。

window.scrollTo(0, 1);

これは非常にシンプルな方法で、ページが読み込まれ、ブラウザバーを表示しないように指示されます。残念ながら、これは標準化されておらず、十分にサポートされていません。また、さまざまな動作に対処する必要もあります。

たとえば、ユーザーがそのページに戻ると、そのページの位置がブラウザによって復元されることがよくあります。window.scrollTo を使用するとこれをオーバーライドし、ユーザーを不快にさせます。これを回避するには、最後の位置を localStorage に保存し、エッジケース（ユーザーがページを複数のウィンドウで開いている場合など）に対処する必要があります。

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

ユーザーがサイト経由で全画面モードをリクエストした場合、またはユーザーが全画面モードでアプリを起動した場合は、CSS 疑似セレクタを含むすべての標準全画面 API が使用可能になります。これにより、次のように全画面状態に対応するように UI を調整できます。

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 つの方法があります。

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

#syntax を使用して URL を更新し (window.location = "#somestate") 、window.onhashchange イベントをリッスンすることで、ブラウザ独自の履歴スタックを使用してアプリケーション状態の変化を管理したり、ユーザーがハードウェアの [戻る] ボタンを使用したり、履歴 API を使用してプログラムによるシンプルな [戻る] ボタンエクスペリエンスを提供したりできます。手順は次のとおりです。

window.history.go(-1);