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

ボタンを押したら、いま見ているブラウザをフルスクリーン表示にする方法[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(); として、
フルスクリーンの対象としているというわけです。

この記事のまとめ

今回は、WebサイトやWebアプリ上でフルスクリーン表示を提供することができる
Fullscreen API について書きました。

想定される使用ケースとしては、たとえば
地図を使ったWebアプリなどを制作している場合で、
ブラウザ内の全画面で地図画面を提供していて、そこにフルスクリーン機能を付けたい場合。

なんらかのキャンペーン企画のサイト制作案件で
ブラウザゲームコンテンツなどを提供している時。

または、単純に動画コンテンツを自前でサイトに用意している時など(もちろん、Youtubeの動画プレイヤー埋込が許されている案件であれば、自前でこの機能を用意する必要はありませんが)。

上記のようなケースでの使用が想定できるかと思います。

冒頭にも書きましたが、日々Web制作を行なっていると、案件により
さまざまなご要望をいただくものです。
今回ご紹介した Fullscreen API も、自身の引き出しの一つとして持っておくと
もしかしたら役に立つ機会もあるかもしれません。

当サイトでは、今後もWeb制作、Webデザインに関する様々な記事を書いていく予定です。

※この記事は内容の品質向上を目的に、随時更新を行う場合があります。