[JavaScript]あるボタンを押したら、いま見ているブラウザをフルスクリーン表示にする方法[Fullscreen API]

Web制作を日々行なっていると、案件により
いろいろなご要望をいただくものです。

場合によっては
Webサイト内で提供しているコンテンツの中で、
「ユーザーが閲覧しているその対象に、より没頭できるように」といった理由でフルスクリーン機能を提供したい、そんなご要望をいただく場合もあったりすることでしょう。

今回ご紹介するのは、そんなケースで使うことができる、
いま表示されているブラウザ画面を
フルスクリーン表示して提供することができる Fullscreen API というものについての記事になります。

Fullscreen APIを使ってみる

それでは早速、サンプルコードです。対象のボタンを押したらフルスクリーン機能を提供するという内容です。

[JavaScript側]

<script>
const fullscreenTrigger = document.querySelector('.fullscreen-trigger');
fullscreenTrigger.addEventListener('click', ()=>{
  const isFullscreen = document.fullscreenElement;
  if( isFullscreen ) {
    document.exitFullscreen();
  } else {
    document.documentElement.requestFullscreen();
  }
});
</script>

まず、最初の2行目では
querySelector() を使用して、ページ内にある fullscreen-trigger というclass名の要素を取得。変数に格納しています。
3行目は、その要素に対して clickイベントが起きたことを検知するために addEventListener を設定しています。
4行目は、現在フルスクリーン機能が提供されている要素があるかを判定するため、document.fullscreenElement を使用しています(あればその要素が、なければnullが返ってきます)。
5、6行目は、もしフルスクリーン機能が提供されている要素があればフルスクリーン状態を解除するという記述です。
7、8行目は、そうでない場合はフルスクリーン機能を提供する、という内容になっています。

上記に対応するhtmlを最低限用意するとすれば、単純に次の1行があれば機能します。
(もちろんbuttonタグでなくても動作します)

[html側]

<button class="fullscreen-trigger">これを押したらFullScreen</button>

ブラウザ全体ではなく、特定の要素をフルスクリーンにする場合

上記の例は、フルスクリーン対象がブラウザ全体の場合になります。
もし、特定のコンテンツだけをフルスクリーンにしたい場合は、次のように書きます。

<script>
const fullscreenTrigger = document.querySelector('.fullscreen-trigger');
fullscreenTrigger.addEventListener('click', ()=>{
  const isFullscreen = document.fullscreenElement;
  const fullscreenTarget = document.querySelector('.fullscreen-target');
  if( isFullscreen ) {
    document.exitFullscreen();
  } else {
    fullscreenTarget.requestFullscreen();
  }
});
</script>

↑先ほどの例との変更点は、5行目と9行目です。
トリガーとなる要素をクリックした際に、
5行目でフルスクリーン対象とする要素を取得、変数fullscreenTargetに格納。
それを9行目で fullscreenTarget.requestFullscreen(); として、
フルスクリーンの対象としているというわけです。