はじめに
動画サイトなどで「全画面にする」ボタンってありますよね。普通のWEBサイトでも使えないかと調べてみると便利な機能がありました。
この記事ではJavaScriptのFullscreen APIを使って、ブラウザの画面をフルスクリーン（全画面表示）にする方法を紹介します。
この記事でわかること
- 画面をフルスクリーンにする方法
- フルスクリーンを元に戻す（解除する）方法
- ボタン1つで切り替える方法
- 実装時の注意点
1.フルスクリーンにする方法
特定の要素をフルスクリーンにするには、requestFullscreen() というメソッドを使います。
画面全体（ページ全体）をフルスクリーンにしたい場合は、document.documentElement（タグのこと）に対して実行します。
// 画面全体をフルスクリーンにする
const elem = document.documentElement;
elem.requestFullscreen();
特定のdivや画像だけを全画面にすることも可能です！その場合は document.getElementById('target') などで要素を取得して実行します。
2. フルスクリーンを解除する方法
元に戻すときは、要素に対してではなく document に対して exitFullscreen() メソッドを実行します。
// フルスクリーンを解除する
document.exitFullscreen();
3. 切り替え（トグル）ボタンの実装
実際のWebサイトでは「フルスクリーンにする」「元に戻す」を1つのボタンで切り替えることが多いですよね。
現在の状態をチェックして、処理を分ける実装例がこちらです。
<button id="fullscreen-btn">フルスクリーン切り替え</button>
<script>
const btn = document.getElementById('fullscreen-btn');
const elem = document.documentElement;
btn.addEventListener('click', () => {
// document.fullscreenElement に値があればフルスクリーン状態
if (!document.fullscreenElement) {
// 通常画面ならフルスクリーンにする
elem.requestFullscreen();
} else {
// フルスクリーン状態なら解除する
document.exitFullscreen();
}
});
</script>
4. 使う際の重要な注意点
簡単に使えるFullscreen APIですが、注意点が2つあります。
ユーザーの操作（クリックなど）がないと動かない
悪質なサイトが勝手に全画面になるのを防ぐため、「ページを開いた瞬間にフルスクリーン」といったことはできません。必ずボタンのクリックなどのイベントの中で実行する必要があります。この辺は音声の再生と同じ事情を感じますね。
iOS（iPhone）のSafariでは動かない要素がある
iPhoneのSafariでは、現時点で タグ以外の普通の要素（<div>など）のフルスクリーン化をサポートしていません（iPadやMacなら動きます）。スマホ対応する際はご注意ください！
おわりに
Fullscreen APIのご紹介でした。
短いコードで簡単に実装できるので、ぜひ自分のサイトやアプリに組み込んでみてください！