いろいろなご要望をいただくものです。
場合によっては
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デザインに関する様々な記事を書いていく予定です。
※この記事は内容の品質向上を目的に、随時更新を行う場合があります。