フルスクリーンAPIの使用

この記事では、フルスクリーンAPI について、十分な量のコードスニペットとインタラクティブなデモを使用して説明します。 驚くほど簡単に操作できるAPIです。

フルスクリーンAPIは2013年に導入され、ブラウザーがフルスクリーンモードを開始/終了するためのネイティブな方法を提供します。 この仕様により、この没入型ユーザーエクスペリエンスを洗練するために使用できる多数のJavaScriptAPIとCSSセレクターがもたらされました。

フルスクリーンAPIの基本

Webでフルスクリーンモードをアクティブにするのは本当に簡単です！ 現在、一部のブラウザでは、requestFullscreenメソッドのプレフィックスが必要です。

使用可能なフルスクリーンAPIメソッドを確認するには、次のようなヘルパー関数を作成します。

function activateFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();        // W3C spec
  }
  else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();     // Firefox
  }
  else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();  // Safari
  }
  else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();      // IE/Edge
  }
};

フルスクリーンを終了するのは非常に簡単ですが、ブラウザで少し検出する必要もあります。

function deactivateFullscreen() {
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
};

上記の関数を使用して、フルスクリーンをアクティブにするには、 documentHTMLElementを渡すだけです。

<button
  onclick="activateFullscreen(document.documentElement);"
>
  Go fullscreen!
</button>

<button
  onclick="deactivateFullscreen();"
>
  Leave fullscreen
</button>

CodePenのwle8300（ @ wle8300 ）によるペンalligatorio-fullscreen-api-1を参照してください。

型破りなHTMLElementsでのフルスクリーンAPIの使用

ご想像のとおり、ドキュメントだけでなく、他のHTMLファイルもフルスクリーンモードに入る可能性があります。

以下のデモでは、ボタンをクリックして作成してみてください <h1>, <img>、 と <video> フルスクリーンモードに入る：

<button
  onclick="activateFullscreen(document.getElementById('my-image'));"
>
  Fullscreen #my-text!
</button>
<button
  onclick="activateFullscreen(document.getElementById('my-image'))"
>
  Fullscreen #my-image
</button>
<button
  onclick="activateFullscreen(document.getElementById('my-video'))"
>
  Fullscreen #my-video
</button>

<h1 id="my-text">Hello world</h1>
<img id="my-image" src="alligatorio-logo.svg" width="200"/>
<video id="my-video" controls src="big-buck-bunny.mp4" />

CodePenのwle8300（ @ wle8300 ）によるペンalligatorio-fullscreen-api-2を参照してください。

プロパティとイベント

FullscreenAPIがもたらす追加のプロパティがあります。

• document.fullScreenEnabled ：Webページにフルスクリーンモードに入る権限があるかどうかを示すブール値を返します
• document.fullScreenElement ：HTMLElementノードを返します（フルスクリーンがアクティブ化されている場合のみ）

また、ブラウザを検出する必要があります。

const fullscreenEnabled = document.fullscreenEnabled
  || document.mozFullScreenEnable
  || document.webkitFullscreenEnabled;
const fullscreenElement = document.fullscreenElement
  || document.mozFullScreenElemen
  || document.webkitFullscreenElement;

また、ユーザーがフルスクリーンモードを開始/終了すると、fullscreenchangeというイベントが発生します。このモードを聞くことができます。

const fullscreenElement = document.fullscreenElement
  || document.mozFullScreenElement
  || document.webkitFullscreenElement;

document.addEventListener('fullscreenchange', (event) => {
  if (fullscreenElement) {
    console.log('Entered fullscreen:', document.fullscreenElement);
  } else {
    console.log('Exited fullscreen.');
  }
});

フルスクリーン要素のスタイリング

利用可能なJavaScriptAPIに加えて、使用できるCSS疑似クラスもいくつかあります。

/* Targets the
  HTML element that's
  in fullscreen mode */
:fullscreen,
:-webkit-full-screen,
:-moz-full-screen,
:-ms-fullscreen {
  /* ... */
}


/* Styling the
  backdrop */
::backdrop {
  /* ... */
}

これは、背景にグルーヴィーなbackground-colorとopacityのルールを追加する例です。

::backdrop {
  opacity: 0.8;
  background: #DFA612;
}

CodePenのwle8300（ @ wle8300 ）によるペンalligatorio-fullscreen-api-3を参照してください。

ボタンをクリックしてみてください！ ：fullscreen および：backdrop について詳しくは、MozillaDeveloperNetworkをご覧ください。

---

フルスクリーンを使用できますか？ caniuse.comの主要なブラウザーでのフルスクリーン機能のサポートに関するデータ。