JavaScriptで全画面表示を実現する7つの方法

はじめに
●全画面表示とは
- ○ブラウザの全画面表示
- ○HTML要素の全画面表示
●全画面表示の実現方法
●注意点
●対処法
- ○サンプルコード4：全画面表示の解除
●カスタマイズ方法
●応用例
- ○サンプルコード8：全画面表示のスライドショー
- ○サンプルコード9：全画面表示のゲーム画面
まとめ

はじめに

この記事を読めば、JavaScriptで全画面表示を実現する方法が身に付きます。

全画面表示はウェブサイトやアプリケーションのデザインや機能性を向上させることができるため、ウェブ開発者にとって重要なスキルです。

ここでは、初心者向けにJavaScriptを使って全画面表示を実現する方法を7つ紹介します。

サンプルコードや注意点、カスタマイズ方法も解説しているので、ぜひ参考にしてください。

●全画面表示とは

全画面表示とは、ウェブページやアプリケーションをブラウザの表示領域全体に広げることです。

この表示方法は、ユーザーがコンテンツに集中できるようになり、また、デザインや機能性が向上します。

全画面表示には、ブラウザの全画面表示とHTML要素の全画面表示の2種類があります。

○ブラウザの全画面表示

ブラウザの全画面表示は、ウェブページ全体をブラウザウィンドウ全体に広げる表示方法です。

通常、F11キーを押すことで全画面表示に切り替えることができます。

この表示方法では、タブやアドレスバーなどのブラウザ要素が隠れるため、ユーザーはコンテンツに集中できます。

○HTML要素の全画面表示

HTML要素の全画面表示は、特定のHTML要素（画像や動画など）をブラウザウィンドウ全体に広げる表示方法です。

この表示方法では、他の要素はそのまま表示されるため、ユーザーが特定のコンテンツに注目することができます。

●全画面表示の実現方法

JavaScriptを使用して全画面表示を実現する方法を、サンプルコードとともに解説します。

○サンプルコード1：HTML要素を全画面表示にする

HTML要素を全画面表示にするには、次のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>全画面表示サンプル</title>
  <style>
    #fullScreenButton {
      display: inline-block;
      padding: 10px;
      background-color: #4CAF50;
      color: white;
      cursor: pointer;
    }
  </style>
  <script>
    function requestFullscreen(elem) {
      // 全画面表示をリクエストするメソッドを取得
      const method = elem.requestFullscreen || elem.webkitRequestFullscreen || elem.mozRequestFullScreen || elem.msRequestFullscreen;
      if (method) {
        method.call(elem); // 全画面表示をリクエスト
      }
    }

    function openFullscreen() {
      const elem = document.documentElement;
      requestFullscreen(elem);
    }
  </script>
</head>
<body>
  <div id="fullScreenButton" onclick="openFullscreen();">全画面表示にする</div>
</body>
</html>

上記のコードでは、ボタンをクリックすると、ウェブページ全体が全画面表示になります。

requestFullscreen関数は、指定された要素を全画面表示にするためのものです。

また、各ブラウザに対応するために、requestFullscreen, webkitRequestFullscreen, mozRequestFullScreen, msRequestFullscreen のいずれかが利用可能かどうかをチェックしています。

○サンプルコード2：画像を全画面表示にする

画像を全画面表示にするには、次のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>画像全画面表示サンプル</title>
  <style>
    #fullScreenButton {
      display: inline-block;
      padding: 10px;
      background-color: #4CAF50;
      color: white;
      cursor: pointer;
    }
  </style>
  <script>
    function requestFullscreen(elem) {
      const method = elem.requestFullscreen || elem.webkitRequestFullscreen || elem.mozRequestFullScreen || elem.msRequestFullscreen;
      if (method) {
        method.call(elem);
      }
    }

    function openFullscreen() {
      const elem = document.getElementById("targetImage");
      requestFullscreen(elem);
    }
  </script>
</head>
<body>
  <img id="targetImage" src="sample.jpg" alt="サンプル画像">
  <div id="fullScreenButton" onclick="openFullscreen();">画像を全画面表示にする</div>
</body>
</html>

このコードでは、ボタンをクリックすると、指定された画像が全画面表示になります。

openFullscreen関数内で、画像要素を取得してrequestFullscreen関数に渡しています。

○サンプルコード3：動画を全画面表示にする

動画を全画面表示にするには、次のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>動画全画面表示サンプル</title>
  <style>
    #fullScreenButton {
      display: inline-block;
      padding: 10px;
      background-color: #4CAF50;
      color: white;
      cursor: pointer;
    }
  </style>
  <script>
    function requestFullscreen(elem) {
      const method = elem.requestFullscreen || elem.webkitRequestFullscreen || elem.mozRequestFullScreen || elem.msRequestFullscreen;
      if (method) {
        method.call(elem);
      }
    }

    function openFullscreen() {
      const elem = document.getElementById("targetVideo");
      requestFullscreen(elem);
    }
  </script>
</head>
<body>
  <video id="targetVideo" src="sample.mp4" controls></video>
  <div id="fullScreenButton" onclick="openFullscreen();">動画を全画面表示にする</div>
</body>
</html>

このコードでは、ボタンをクリックすると、指定された動画が全画面表示になります。

openFullscreen関数内で、動画要素を取得してrequestFullscreen関数に渡しています。

●注意点

全画面表示は、ユーザーがコンテンツに集中できる一方で、ブラウザのナビゲーション機能が隠れるため、操作が難しくなることがあります。

また、全画面表示に対応していないブラウザやバージョンでは、正しく動作しないことがあります。

そのため、全画面表示の機能を実装する際は、ユーザビリティやブラウザの互換性にも注意してください。

●対処法

全画面表示を解除する方法を提供することで、ユーザーが自由に表示モードを切り替えられるようにします。

○サンプルコード4：全画面表示の解除

全画面表示を解除するには、次のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>全画面表示解除サンプル</title>
  <style>
    #exitFullScreenButton {
      display: inline-block;
      padding: 10px;
      background-color: #f44336;
      color: white;
      cursor: pointer;
    }
  </style>
  <script>
    function exitFullscreen() {
      const method = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen;
      if (method) {
        method.call(document); // 全画面表示を解除
      }
    }
  </script>
</head>
<body>
  <div id="exitFullScreenButton" onclick="exitFullscreen();">全画面表示を解除する</div>
</body>
</html>

上記のコードでは、ボタンをクリックすると、全画面表示が解除されます。

exitFullscreen関数は、各ブラウザに対応した全画面表示解除のメソッドを呼び出すためのものです。

●カスタマイズ方法

全画面表示のカスタマイズ方法を、サンプルコードとともに紹介します。

○サンプルコード5：全画面表示時のスタイル変更

全画面表示時にスタイルを変更するには、次のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>全画面表示時のスタイル変更サンプル</title>
  <style>
    .full-screen {
      background-color: black;
      color: white;
      font-size: 2rem;
    }
  </style>
  <script>
    function requestFullscreen(elem) {
      const method = elem.requestFullscreen || elem.webkitRequestFullscreen || elem.mozRequestFullScreen || elem.msRequestFullscreen;
      if (method) {
        method.call(elem);
      }
    }

    function openFullscreen() {
      const elem = document.getElementById("target");
      requestFullscreen(elem);
      elem.classList.add("full-screen");
    }
  </script>
</head>
<body>
  <div id="target">コンテンツ</div>
  <button onclick="openFullscreen();">全画面表示にする</button>
</body>
</html>

上記のコードでは、全画面表示時にfull-screenクラスが追加され、スタイルが変更されます。

openFullscreen関数内で、要素にfull-screenクラスを追加しています。

○サンプルコード6：全画面表示のトグルボタン

全画面表示と通常表示を切り替えるトグルボタンを作成するには、次のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>全画面表示トグルボタンサンプル</title>
  <script>
    function requestFullscreen(elem) {
      const method = elem.requestFullscreen || elem.webkitRequestFullscreen || elem.mozRequestFullScreen || elem.msRequestFullscreen;
      if (method) {
        method.call(elem);
      }
    }

    function exitFullscreen() {
      const method = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen;
      if (method) {
        method.call(document);
      }
    }

    function toggleFullscreen() {
      const elem = document.getElementById("target");
      const isFullscreen = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;

      if (isFullscreen) {
        exitFullscreen();
      } else {
        requestFullscreen(elem);
      }
    }
  </script>
</head>
<body>
  <div id="target">コンテンツ</div>
  <button onclick="toggleFullscreen();">全画面表示切り替え</button>
</body>
</html>

上記のコードでは、トグルボタンをクリックすると、全画面表示と通常表示が切り替わります。

toggleFullscreen関数内で、現在の表示状態をチェックし、全画面表示または全画面解除の関数を呼び出しています。

○サンプルコード7：全画面表示時のイベントハンドリング

全画面表示時にイベントハンドリングを行うには、次のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>全画面表示時のイベントハンドリングサンプル</title>
  <script>
    function requestFullscreen(elem) {
      const method = elem.requestFullscreen || elem.webkitRequestFullscreen || elem.mozRequestFullScreen || elem.msRequestFullscreen;
      if (method) {
        method.call(elem);
      }
    }

    function fullscreenChangeHandler() {
      const isFullscreen = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
      if (isFullscreen) {
        console.log("全画面表示になりました。");
      } else {
        console.log("全画面表示が解除されました。");
      }
    }

    function init() {
      const elem = document.getElementById("target");
      requestFullscreen(elem);

      // 全画面表示状態の変化を検出するイベントリスナーを設定
      document.addEventListener("fullscreenchange", fullscreenChangeHandler);
      document.addEventListener("webkitfullscreenchange", fullscreenChangeHandler);
      document.addEventListener("mozfullscreenchange", fullscreenChangeHandler);
      document.addEventListener("MSFullscreenChange", fullscreenChangeHandler);
    }
  </script>
</head>
<body onload="init();">
  <div id="target">コンテンツ</div>
</body>
</html>

上記のコードでは、全画面表示時にイベントハンドリングが行われます。

全画面表示状態が変化するたびに、fullscreenChangeHandler関数が呼び出されます。

この関数内で、現在の表示状態をチェックし、メッセージをコンソールに出力しています。

●応用例

全画面表示を活用した応用例を、サンプルコードとともに紹介します。

○サンプルコード8：全画面表示のスライドショー

全画面表示でスライドショーを実現するには、次のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>全画面表示スライドショーサンプル</title>
  <style>
    .slide {
      display: none;
    }

    .full-screen {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
  </style>
  <script>
    let currentSlide = 0;
    let slides;

    function requestFullscreen(elem) {
      const method = elem.requestFullscreen || elem.webkitRequestFullscreen || elem.mozRequestFullScreen || elem.msRequestFullscreen;
      if (method) {
        method.call(elem);
      }
    }

    function changeSlide(offset) {
      slides[currentSlide].classList.remove("full-screen");
      currentSlide = (currentSlide + offset + slides.length) % slides.length;
      slides[currentSlide].classList.add("full-screen");
    }

    function init() {
      slides = document.getElementsByClassName("slide");
      changeSlide(0);

      document.getElementById("prev").addEventListener("click", () => changeSlide(-1));
      document.getElementById("next").addEventListener("click", () => changeSlide(1));

      requestFullscreen(document.documentElement);
    }
  </script>
</head>
<body onload="init();">
  <div id="prev">前へ</div>
  <div id="next">次へ</div>
  <div class="slide" style="background-image: url('画像1.jpg');"></div>
  <div class="slide" style="background-image: url('画像2.jpg');"></div>
  <div class="slide" style="background-image: url('画像3.jpg');"></div>
</body>
</html>

上記のサンプルコードでは、全画面表示のスライドショーが実現されます。

画像を表示するために、<div>要素にスタイルで背景画像を設定しています。

JavaScriptでスライドの切り替え処理と全画面表示を行います。

○サンプルコード9：全画面表示のゲーム画面

全画面表示でゲーム画面を実現するには、次のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>全画面表示ゲーム画面サンプル</title>
  <style>
    canvas {
      display: block;
      background-color: #000;
    }
  </style>
  <script>
    // 全画面表示をリクエストする関数
    function requestFullscreen(elem) {
      const method = elem.requestFullscreen || elem.webkitRequestFullscreen || elem.mozRequestFullScreen || elem.msRequestFullscreen;
      if (method) {
        method.call(elem);
      }
    }

    // ゲーム画面の初期化
    function init() {
      const canvas = document.getElementById("game");
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      requestFullscreen(canvas);
    }
  </script>
</head>
<body onload="init();">
  <canvas id="game"></canvas>
</body>
</html>

上記のサンプルコードでは、全画面表示のゲーム画面が実現されます。

<canvas>要素を使用してゲーム画面を作成し、JavaScriptで全画面表示をリクエストしています。