MENU
初心者、未経験でもわかりやすいWebフロントエンド技術の解説ブログです。
  1. ホーム
  2. プログラミング
  3. JavaScript
  4. JavaScriptでブラウザをフルスクリーンにする方法

JavaScriptでブラウザをフルスクリーンにする方法

プログラミング JavaScript

こんにちは！今回は、JavaScriptを使ってブラウザをフルスクリーンにする方法を解説します。

フルスクリーン表示は、プレゼンテーションやゲームなどで集中して画面を見せたいときに便利ですよね。

しかし、JavaScriptでどうやって実装するのか分からない方も多いのではないでしょうか？

この記事では、フルスクリーン表示を実現するための方法をわかりやすく紹介していきます。

サンプルコードも交えながら、どのように実装できるかを一緒に見ていきましょう！

目次

フルスクリーンを実現するための「Fullscreen API」とは？

JavaScriptでフルスクリーン表示を実現するには、「Fullscreen API」を使います。

Fullscreen APIは、特定の要素をフルスクリーン表示にするためのAPIで、

主に以下のようなシチュエーションで役立ちます。

  • ウェブ上でプレゼンテーションを表示する際
  • ゲームやビデオコンテンツで集中して表示させたい場合
  • 画像やグラフィックデザインをフルスクリーンで見せたい場合

Fullscreen APIを使うと、通常のブラウザ表示から離れて、画面いっぱいにコンテンツを見せることができます。

実装方法：基本のコード

Fullscreen APIを利用して、フルスクリーンを実現する基本的なコードを紹介します。

実装はシンプルですが、ブラウザによってAPI名が異なる場合があるため、条件分岐で対応します。

1. フルスクリーンにしたい要素を指定する

まずは、フルスクリーンにしたい要素を取得します。

画面全体をフルスクリーンにしたい場合は、

document.documentElementを使って、HTML全体を選択します。

const elem = document.documentElement; // 画面全体をフルスクリーンにする場合
JavaScript

2. フルスクリーンにする関数を作成

次に、実際にフルスクリーンにするための関数を作成します。

requestFullscreen()メソッドを使って、指定した要素をフルスクリーンにします。

ただし、各ブラウザで異なるメソッド名が存在するため、条件分岐を使って対応します。

function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { // Firefox
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { // Chrome, Safari, Opera
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { // IE/Edge
    elem.msRequestFullscreen();
  }
}
JavaScript

3. フルスクリーンを解除する関数

フルスクリーン表示を解除したい場合も考慮しておきましょう。

exitFullscreen()メソッドでフルスクリーンを解除できますが、

こちらもブラウザによって異なるメソッド名があるため、条件分岐で対応します。

function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) { // Firefox
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) { // Chrome, Safari, Opera
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { // IE/Edge
    document.msExitFullscreen();
  }
}
JavaScript

4. ボタンを使った実装例

フルスクリーンのオン・オフを簡単に切り替えられるように、ボタンを用意してみましょう。

<button onclick="openFullscreen()">フルスクリーンにする</button>
<button onclick="closeFullscreen()">フルスクリーンを解除</button>
JavaScript

上記のコードをHTMLに追加することで、ボタンをクリックするだけでフルスクリーン表示の切り替えができます。これで、必要な場面で簡単にフルスクリーンにする機能が実現できます！

フルスクリーンの状態を確認する方法

フルスクリーンの状態かどうかを確認したいときは、document.fullscreenElementを利用します。

このプロパティは、現在フルスクリーン状態の要素を返すため、これを使って状態を判別できます。

if (document.fullscreenElement) {
  console.log("フルスクリーンモードです！");
} else {
  console.log("通常モードです。");
}
JavaScript

このようにして、現在の画面がフルスクリーンかどうかをチェックすることができます。

注意点：ユーザー操作が必要

Fullscreen APIを利用する際の重要な注意点として、

「ユーザーの操作（クリックやキーボード操作）によってのみフルスクリーン化が可能」という制約があります。

たとえば、ページ読み込み時に自動でフルスクリーンにすることはできません。

これは、ユーザーの意図しない操作を防ぐためのセキュリティ機能です。

そのため、ボタンやリンクをクリックしたときにフルスクリーン化するなど、

ユーザーが積極的に操作するタイミングで呼び出すようにしましょう。

各ブラウザでの対応状況

Fullscreen APIは、主要なブラウザでサポートされていますが、

古いバージョンや特定のブラウザではサポートされていない場合もあります。

以下は、対応している主なブラウザです。

  • Chrome: 対応
  • Firefox: 対応
  • Safari: 対応（ただし、一部のメソッド名が異なる場合あり）
  • Edge: 対応
  • Internet Explorer: 対応（ただし、限定的）

実際の開発では、各ブラウザでのテストを行い、メソッドが正しく機能しているかを確認すると安心です。

フルスクリーンを活用したアプリケーションの例

フルスクリーン機能は、さまざまなウェブアプリケーションで活用できます。

以下に、代表的な利用例を挙げてみます。

  1. プレゼンテーションビューア
    フルスクリーンでスライドを表示し、閲覧者が集中できる環境を提供します。
  2. ゲーム
    ブラウザゲームでは、フルスクリーンで表示することで、没入感を高めることができます。
  3. 写真や動画のビューア
    画像や動画の表示にフルスクリーンを使うことで、よりインパクトのある見せ方が可能になります。

【実践編】スクリーンセーバーを作ってみよう

ここからは実践編です。

実際にフルスクリーンの機能を活用して、簡単なスクリーンセーバーを作成してみましょう。

今回は、3枚の画像を4秒ごとにフェードで切り替えながら表示し、ループする仕組みです。

フルスクリーンボタンも追加して、ワンクリックで画面いっぱいに画像が表示されるようにします。

必要なファイルと準備

まず、img01.jpg, img02.jpg, img03.jpg の3枚の画像を用意するとします。

これらの画像をループ表示し、

フルスクリーンボタンを押すと画面いっぱいに広がるスクリーンセーバー風のアプリを作成します。

HTMLコード

HTMLでは、3枚の画像を表示するための要素と、フルスクリーンボタンを用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>スクリーンセーバー</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="wrapper">
    <div class="slideshow-container">
      <img src="img01.jpg" class="slideshow-image" id="image1">
      <img src="img02.jpg" class="slideshow-image" id="image2">
      <img src="img03.jpg" class="slideshow-image" id="image3">
    </div>
    <button onclick="openFullscreen()">フルスクリーンにする</button>
  </div>

  <script src="script.js"></script>
</body>
</html>
JavaScript

CSSコード

CSSでは、画像をフェードしながら切り替えるアニメーションを設定します。

また、画像を重ねて配置し、表示する画像のみが前面に来るようにします。

/* style.css */
body {
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #000;
}

.slideshow-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slideshow-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像をコンテナ内に収めて調整 */
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.active {
  opacity: 1;
}

.fullscreen-btn {
  position: relative;
  z-index: 1; /* 画像の上にボタンを表示 */
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: #333;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 20px; /* 画像との間隔を空ける */
}

.fullscreen-btn:hover {
  background-color: #555;
}
CSS

JavaScriptコード

JavaScriptでは、画像を4秒ごとにフェードで切り替える処理と、フルスクリーンボタンの機能を実装します。

画像のリストをループし、フェードしながら次の画像を表示します。

// script.js

// 画像のスライドショーの設定
let currentIndex = 0;
const images = document.querySelectorAll(".slideshow-image");
const imageCount = images.length;
const slideshowContainer = document.querySelector(".slideshow-container");

// 4秒ごとに画像を切り替える関数
function showNextImage() {
  images[currentIndex].classList.remove("active");
  currentIndex = (currentIndex + 1) % imageCount; // 次の画像に切り替え
  images[currentIndex].classList.add("active");
}

// 4秒ごとに画像を切り替えるタイマー
setInterval(showNextImage, 4000);

// 最初の画像を表示状態にする
images[currentIndex].classList.add("active");

// フルスクリーン機能
function openFullscreen() {
  if (slideshowContainer.requestFullscreen) {
    slideshowContainer.requestFullscreen();
  } else if (slideshowContainer.mozRequestFullScreen) {
    // Firefox
    slideshowContainer.mozRequestFullScreen();
  } else if (slideshowContainer.webkitRequestFullscreen) {
    // Chrome, Safari, Opera
    slideshowContainer.webkitRequestFullscreen();
  } else if (slideshowContainer.msRequestFullscreen) {
    // IE/Edge
    slideshowContainer.msRequestFullscreen();
  }
}
JavaScript

解説

  1. HTML部分
    • .slideshow-containerの中に、3つの画像を配置しています。class="slideshow-image"でそれぞれの画像を指定し、JavaScriptで表示・非表示を管理します。
    • フルスクリーンにするボタンも追加しています。
  2. CSS部分
    • .slideshow-imageはopacity: 0;で非表示の状態を基本とし、activeクラスが付いた画像のみopacity: 1;で表示されます。
    • transition: opacity 1s ease-in-out;でフェードのアニメーションを設定しています。
  3. JavaScript部分
    • showNextImage関数で、現在表示されている画像のactiveクラスを外し、次の画像にactiveクラスを追加することで切り替えを実現しています。
    • setIntervalで4秒ごとにshowNextImageを呼び出すようにし、画像がループで切り替わるようにしています。
    • openFullscreen関数で、ブラウザの画面全体をフルスクリーンにする機能を実装しています。

これで、4秒ごとにフェードで画像が切り替わり、

フルスクリーンに切り替えられる簡単なスクリーンセーバーのようなアプリが完成です！

完成したサンプルはこちら

See the Pen fullscreen by WEB-DEN (@Yukiwebcreate) on CodePen.

まとめ

JavaScriptでブラウザをフルスクリーンにする方法について解説しました。

Fullscreen APIを使うと、シンプルなコードで特定の要素をフルスクリーンにできるため、

プレゼンやゲーム、メディアビューアなどで便利に利用できます。

ただし、ユーザー操作が必要であったり、ブラウザ間の互換性に注意が必要です。

ぜひ、フルスクリーン機能を活用して、アプリケーションの魅力をさらに高めてみてください！

ブラウザを通じて、より多くのユーザーに使いやすく、

楽しんでいただけるような仕組みが実現できるはずです。

あざした

プログラミング JavaScript
JavaScript プログラミング
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

目次