JavaScript

レシピ

ページをフルスクリーンで表示／解除する

  1. 最終更新日：
  2. 公開日：

ページをフルスクリーンで表示したり解除する方法について解説します。

この記事のポイント

  • ページを全画面表示する
  • 全画面表示を解除する
  • ブラウザによって使用するメソッドが異なる

ページを全画面で表示／解除する

elementオブジェクトのrequestFullscreenメソッドを使用すると、ページを全画面で表示することができます。
全画面表示の解除はキーボードのescキーかdocumentオブジェクトのexitFullscreenメソッドを使用します。

以下の例では「フルスクリーン表示」ボタンを押すとrequestFullscreenメソッドを実行して全画面表示になり、「解除」ボタンを押すとexitFullscreenメソッドを実行して通常の表示に戻ります。

通常表示
フルスクリーン表示

コードは次のようになります。

JavaScript コード例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>GRAYCODE JavaScript</title>
  <script>
    window.addEventListener('load', function(){
      
      // フルスクリーン表示
      document.getElementById('button1').addEventListener('click', function(){
        document.body.requestFullscreen();        
      });

      // フルスクリーン解除
      document.getElementById('button2').addEventListener('click', function(){
        document.exitFullscreen();
      });
    });
  </script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<button id="button1">フルスクリーン表示</button>
<button id="button2">解除</button>
</body>
</html>

id属性「button1」の「フルスクリーン表示」ボタンはイベントリスナーでクリックするとdocument.body.requestFullscreen()を実行するようにし、id属性「button2」の「解除」ボタンはクリックするとdocument.exitFullscreen()を実行するように設定しています。

各ブラウザに対応する

requestFullscreenメソッドとexitFullscreenメソッドは2020年4月時点では全てのブラウザでサポートされていません。
そこで、各ブラウザに対応するためには次のようにif文でメソッドの対応を確認し、それぞれのブラウザに対応したメソッドを実行する必要があります。

JavaScript コード例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>GRAYCODE JavaScript</title>
  <script>
    window.addEventListener('load', function(){

      // フルスクリーン表示
      document.getElementById('button1').addEventListener('click', function(){

        // Chrome & Firefox v64以降
        if( document.body.requestFullscreen ) {
                 document.body.requestFullscreen();
          
        // Firefox v63以前
        } else if( document.body.mozRequestFullScreen ) {
          document.body.mozRequestFullScreen();

        // Safari & Edge & Chrome v68以前
        } else if( document.body.webkitRequestFullscreen ) {
          document.body.webkitRequestFullscreen();
          
        // IE11
        } else if( document.body.msRequestFullscreen ) {
          document.body.msRequestFullscreen();
        }        
      });

      // フルスクリーン解除
      document.getElementById('button2').addEventListener('click', function(){
        
        // Chrome & Firefox v64以降
        if( document.exitFullscreen ) {
          document.exitFullscreen();

        // Firefox v63以前
        } else if( document.mozCancelFullScreen ) {
          document.mozCancelFullScreen();

        // Safari & Edge & Chrome v44以前
        } else if( document.webkitCancelFullScreen ) {
          document.webkitCancelFullScreen();

        // IE11
        } else if( document.msExitFullscreen ) {
          document.msExitFullscreen();
        }
      });
    });
  </script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<button id="button1">フルスクリーン表示</button>
<button id="button2">解除</button>
</body>
</html>

主要ブラウザに対応すると分岐が多くなってしまいますが、まとめると次のようになります。

Chrome（v69以降）、Firefox（v64以降）

  • 全画面表示ON - document.body.requestFullscreenメソッド
  • 全画面表示OFF - document.body.exitFullscreenメソッド

Firefox（v63以前）

  • 全画面表示ON - document.body.mozRequestFullScreenメソッド
  • 全画面表示OFF - document.body.mozCancelFullScreenメソッド

Safari、Edge、Chrome（v44以前）

  • 全画面表示ON - document.body.webkitRequestFullscreenメソッド
  • 全画面表示OFF - document.body.webkitCancelFullScreenメソッド

IE11

  • 全画面表示ON - document.body.msRequestFullscreenメソッド
  • 全画面表示OFF - document.body.msExitFullscreenメソッド

Chrome（v68〜v45）

  • 全画面表示ON - document.body.webkitRequestFullscreenメソッド
  • 全画面表示OFF - document.body.exitFullscreenメソッド

Edgeはwebkit系メソッドになる点と、ChromeとFirefoxはバージョンによって使用するメソッドが異なる点に注意してください。

キーボード入力でフルスクリーンの表示／解除する

最後に応用編として、キーボードでfキーを押したらフルスクリーン表示／解除を切り替えられるようにしていきます。
fキーを押したときに通常表示ならフルスクリーン表示、フルスクリーン表示なら通常表示に戻るようなON／OFFスイッチです。

やや長いですが、次のようなコードになります。

JavaScript コード例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>GRAYCODE JavaScript</title>
  <script>
    window.addEventListener('load', function(){
      
      // ボタンクリックによる受付
      document.getElementById('button1').addEventListener('click', switchFullScreen);

      // キーボード入力の受付
      window.addEventListener('keydown', switchFullScreen);
    });

    // 表示を切り替える
    function switchFullScreen(event) {

      if( event.key === "f" || event.type === "click" ) {
        
        // フルスクリーン表示なら解除する
        if( checkFullScreen() ) {

          if( document.exitFullscreen ) {
            document.exitFullscreen();
          } else if( document.mozCancelFullScreen ) {
            document.mozCancelFullScreen();
          } else if( document.webkitCancelFullScreen ) {
            document.webkitCancelFullScreen();
          } else if( document.msExitFullscreen ) {
            document.msExitFullscreen();
          }

        // 通常表示ならフルスクリーン表示位にする
        } else {

          if( document.body.requestFullscreen ) {
            document.body.requestFullscreen();
          } else if( document.body.mozRequestFullScreen ) {
            document.body.mozRequestFullScreen();
          } else if( document.body.webkitRequestFullscreen ) {
            document.body.webkitRequestFullscreen();
          } else if( document.body.msRequestFullscreen ) {
            document.body.msRequestFullscreen();
          }
        }
      }
    }

    // フルスクリーン表示しているか確認
    function checkFullScreen() {

      let fullscreen_flag = false;

      if( document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement ) {
        fullscreen_flag = true;
      }

      return fullscreen_flag;
    }
  </script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<button id="button1">表示切替</button>
</body>
</html>

ポイントは以下の3つです。

  • 現在フルスクリーン表示しているか確認するcheckFullScreenメソッド
  • 表示の切り替えを行うswitchFullScreenメソッド
  • 表示切替ボタンとキーボードにイベントリスナーを設定

上から1つずつ解説していきます。

checkFullScreenメソッド

このメソッドは現在フルスクリーン表示しているかを確認するためのメソッドです。
このメソッドの返り値によって、フルスクリーン表示にするか、または解除するかを判断します。

checkFullScreenメソッドのコード

// フルスクリーン表示しているか確認
function checkFullScreen() {

  let fullscreen_flag = false;

  if( document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement ) {
    fullscreen_flag = true;
  }

  return fullscreen_flag;
}

fullscreenElementプロパティはフルスクリーン表示のときはtrue、そうでなければfalseを返します。
他にも3つプロパティがありますが、これは上記のrequestFullscreenメソッドと同様にブラウザによって参照できるプロパティ名がそれぞれ異なるため併記しており、1つでもtrueがあれば「現在フルスクリーン表示である」と判定します。

switchFullScreenメソッド

このメソッドは実際にフルスクリーン表示／解除を切り替えているメソッドです。
先ほどのcheckFullScreenメソッドの返り値からどちらを実行するか判断しています。
表示の切り替え部分は先述の「フルスクリーン表示」ボタンと「解除」ボタンと同様ですが、その前にあるif文に注目してください。

switchFullScreenメソッドのコード

// 表示を切り替える
function switchFullScreen(event) {

  if( event.key === "f" || event.type === "click" ) {
    
    // フルスクリーン表示なら解除する
    if( checkFullScreen() ) {

      if( document.exitFullscreen ) {
        document.exitFullscreen();
      } else if( document.mozCancelFullScreen ) {
        document.mozCancelFullScreen();
      } else if( document.webkitCancelFullScreen ) {
        document.webkitCancelFullScreen();
      } else if( document.msExitFullscreen ) {
        document.msExitFullscreen();
      }

    // 通常表示ならフルスクリーン表示位にする
    } else {

      if( document.body.requestFullscreen ) {
        document.body.requestFullscreen();
      } else if( document.body.mozRequestFullScreen ) {
        document.body.mozRequestFullScreen();
      } else if( document.body.webkitRequestFullscreen ) {
        document.body.webkitRequestFullscreen();
      } else if( document.body.msRequestFullscreen ) {
        document.body.msRequestFullscreen();
      }
    }
  }
}

このif文ではevent.keyプロパティを参照してfキーが押されたか、またはevent.typeプロパティでボタンがクリックされたかを確認しています。
今回はfキーによる表示切り替えが肝となるため「f」としていますが、「t」や「a」など他のキーに変更するこも可能です。

表示切替ボタンとキーボードにイベントリスナーを設定

最後に、先ほど作成したswitchFullScreenメソッドを起動するためにイベントリスナーを設定すれば完了です。

イベントリスナーの設定

// ボタンクリックによる受付
document.getElementById('button1').addEventListener('click', switchFullScreen);

// キーボード入力の受付
window.addEventListener('keydown', switchFullScreen);

以上が全体の流れとなります。

なお、IE11はブラウザの仕様でキー入力によるフルスクリーン表示の実行ができません。（解除はキー入力で可能です）
そのため、今回のようにボタンとの併用をお勧めします。

記事一覧

関連記事

  1. トップ
  2. JavaScript
  3. ページをフルスクリーンで表示／解除する