Web ページで任意の部分を全画面表示する 実践 Fullscreen API
この記事は2025/04/21に作成されました。
誰が決めた訳でもないはずなのですが、 大抵のWebブラウザはアドレスバーとタブが画面端にあって、それ以外はWebサイトを表示する部分になっています。
表示デバイスにもよりますが、大体 画面の80%以上はWebサイトを表示する部分に使われていると思います。
多くのWebサイトはそれで問題ありませんが、 ゲームや動画などのコンテンツを表示する場合、 なるべく余計なものは表示せずに、画面全体をサイトの表示に割きたいケースもあるでしょう。
具体的な例として、ブログ記事などに埋め込まれているYouTubeを見る場合に、全画面表示をして見たことがある人も多いのではないでしょうか。
あの全画面表示は動画やベームなどのメディアだけに許されているわけではありません。原則、WebページにHTML + CSSで表示できるものは全て全画面表示にできます。
実際に全画面表示を行うためにJavaScriptから用いるAPIがFullscreen APIです。
この記事では全画面Fullscreen APIを用いて開発をするときの注意点や、実際に全画面表示を行うためのコードを紹介します。
実際に試してみる
以下は実際にFullscreen APIを用いて全画面表示を行うためのボタンです。
ボタンを押してみると記事部分だけが全画面になったのではないでしょうか？
ボタン周りのコードは以下のようになっています。
<style>
#request-fullscreen-button {
display: block;
margin: 10px;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#exit-fullscreen-button {
display: none;
margin: 10px;
padding: 10px;
background-color: #dc3545;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
html:fullscreen #request-fullscreen-button {
display: none;
}
html:fullscreen #exit-fullscreen-button {
display: block;
}
</style>
<button id="request-fullscreen-button">全画面表示を開始する</button>
<button id="exit-fullscreen-button">全画面表示を終了する</button>
<script>
document.addEventListener('DOMContentLoaded', () => {
// 全画面表示を開始する
document.getElementById('request-fullscreen-button').addEventListener('click', () => {
// 全画面表示に対応しているかチェック
if (!document.documentElement.requestFullscreen) {
alert('全画面表示に対応していません。');
return;
}
// 全画面表示を開始する
document.documentElement.requestFullscreen().catch(error => {
alert(`全画面表示に失敗しました: ${error.message}`);
});
});
// 全画面表示を終了する
document.getElementById('exit-fullscreen-button').addEventListener('click', () => {
// 全画面表示に対応しているかチェック
if (!document.exitFullscreen) {
alert('全画面表示を終了する要素が見つかりませんでした。');
return;
}
// 全画面表示を終了する
document.exitFullscreen().catch(error => {
alert(`全画面表示を終了するのに失敗しました: ${error.message}`);
});
});
});
// 全画面表示の状態を監視し、ログとして出力
document.addEventListener('fullscreenchange', () => {
console.log(`全画面モードを: ${document.fullscreenElement ? '開始しました' : '終了しました'}`);
});
</script>この記事で解説したいことはだいたい上記のコードに含まれています。
全画面表示を開始する
全画面表示を開始するためには、Element.requestFullscreen()メソッドを呼び出します。
document.documentElement.requestFullscreen();このメソッドはElementインターフェースに定義されているメソッドです。つまり、document.documentElementだけでなく、任意の要素に対して呼び出すことができます。より平たく言えばdocument.getElementById()やdocument.querySelector()で取得した要素に対しても呼び出すことができます。
ちなみに、ユーザー設定などによっては全画面表示を開始することができない場合があります。この場合はErrorがthrowされるので、丁寧にcatchしておく必要があるでしょう。
document.documentElement.requestFullscreen().catch(error => { alert(`全画面表示に失敗しました: ${error.message}`); });
特に複雑な処理が必要ない場合は上記のように直接.catch()を使用すれば良いのですが、実はElement.requestFullscreen()メソッドは Promise を返すので、以下のようにthen()メソッドを使用すれば、フルスクリーン開始成功時の処理も書けます。
document.documentElement.requestFullscreen().then(() => { console.log('全画面表示を開始しました'); }).catch(error => { alert(`全画面表示に失敗しました: ${error.message}`); });
Promiseなので、async / awaitを使用して書くこともできます。
(async () => { try { await document.documentElement.requestFullscreen(); console.log('全画面表示を開始しました'); } catch (error) { alert(`全画面表示に失敗しました: ${error.message}`); } })();
全画面表示に対応しているかチェックする
大体のブラウザでサポートされているFullscreen APIですが、全てのブラウザでサポートされているわけではありません。動作しない環境として最も代表的なのはiPhone上で動作するSafariやChrome, Firefoxなどのブラウザです(macOSやiPadのSafariでは対応しているようです)。
事前にFullscreen APIが使用できるかチェックしておいた方が良いでしょう。仮にFullscreen API未対応のブラウザでrequestFullscreen();を呼び出そうとした場合はErrorがthrowされるので、後続のJavaScriptコードに悪影響を及ぼす可能性があります。
if (!document.documentElement.requestFullscreen) { alert('全画面表示に対応していません。'); return; }
上記のコードは、requestFullscreenメソッドが存在しない場合にアラートを表示して処理を中断するコードです。Fullscreen APIに対応していないブラウザの場合、document.documentElement.requestFullscreenはundefinedになるので、if (!document.documentElement.requestFullscreen)の条件式が真になり、アラートが表示されます。
以下に、実際にFullscreen APIの対応可否を判定・表示する機能を用意しました。
あなたのブラウザは Fullscreen API に対応していま
<p style="color:orange;font-size:18px;">あなたのブラウザは Fullscreen API に対応していま<span id="check-fullscreen-result"></span></p>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('check-fullscreen-result').textContent = document.documentElement.requestFullscreen ? 'す' : 'せん';
});
</script>
ある特定の要素を全画面表示する
先述のコードはdocument.documentElementに対してrequestFullscreen()メソッドを呼び出しているので、document.documentElementが指す HTML 要素が全画面表示されます。
他方、requestFullscreen()メソッドはdocument.documentElementだけではなくElementインターフェースに定義されているメソッドなので、任意の要素に対して呼び出すことができます。
以下の赤いボックスをクリックすると、赤いボックスだけが全画面表示されます。
クリックすると全画面表示をトグルします
<style>
#fullscreen-target {
width: 250px;
height: 100px;
background-color: red;
}
</style>
<div id="fullscreen-target">
<p>クリックすると全画面表示をトグルします</p>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// 全画面表示の対象
const target = document.getElementById('fullscreen-target');
target.addEventListener('click', () => {
// 全画面表示に対応しているかチェック
if (!target.requestFullscreen) {
alert('全画面表示に対応していません。');
return;
}
// 全画面表示を終了する
if (document.fullscreenElement) {
document.exitFullscreen().catch(error => {
alert(`全画面表示を終了するのに失敗しました: ${error.message}`);
});
}
// 全画面表示を開始する
else {
target.requestFullscreen().catch(error => {
alert(`全画面表示に失敗しました: ${error.message}`);
});
}
});
});
</script>おそらく、赤いボックスをクリックすると、赤いボックスが画面いっぱいに表示されたかと思います。
ここで注目すべきは、赤いボックスは全画面表示状態になる前はwidth: 250px; height: 100px;のサイズで表示されていたのに、全画面表示状態になると画面いっぱいに表示されることです。
これは、全画面表示状態になると、全画面表示を開始した要素のCSSスタイルがブラウザによって上書きされるためです。
実際にChromeのDevToolsで確認してみると以下のスタイルシートで上書きされていることが確認できると思います。
:not(:root):fullscreen {
object-fit: contain;
user-select: text;
position: fixed !important;
box-sizing: border-box !important;
min-width: 0px !important;
max-width: none !important;
min-height: 0px !important;
max-height: none !important;
width: 100% !important;
height: 100% !important;
transform: none !important;
inset: 0px !important;
margin: 0px !important;
}
筆者が確認した限りでは、少なくともWindowsのChrome, Firefox, Edge, macOSのSafariではwidthとheightが画面いっぱいに表示されるように上書きされていました。
しかしブラウザによっては、全画面表示を開始した要素のCSSスタイルが上書きされない場合もあるようです。
そのようなブラウザをサポートする場合は、表示を統一するため、後述の:fullscreen擬似クラスを使用して、全画面表示時のCSSスタイルを上書きする必要があります。
また全画面表示時は、指定した要素に含まれていない要素は表示されません。例えposition: fixed;で固定表示されている要素でも、全画面表示を開始した要素に含まれていない場合は表示されません。
全画面表示を終了する
全画面表示を終了するためには、document.exitFullscreen()メソッドを呼び出します。
document.exitFullscreen();このメソッドはdocumentオブジェクトに定義されているメソッドです。つまり、全画面表示を開始した要素に対して呼び出すことはできません。現在なにが全画面表示されているのかを知らなくても使えると考えれば都合の良い仕様かもしれません。
requestFullscreen()メソッドと同様に事前にFullscreen APIが使用できるかチェックしておいた方が良いでしょう。仮にFullscreen API未対応のブラウザでexitFullscreen();を呼び出そうとした場合はErrorがthrowされるので、後続のJavaScriptコードに悪影響を及ぼす可能性があります。
if (!document.exitFullscreen) { alert('全画面表示を終了する要素が見つかりませんでした。'); return; }
同様に、全画面表示を終了することができない場合はErrorがthrowされるので、丁寧にcatchしておく必要があります。
document.exitFullscreen().catch(error => {
alert(`全画面表示を終了するのに失敗しました: ${error.message}`);
});プログラムに頼らず全画面を終了する
JavaScriptによって全画面表示を終了するためには、document.exitFullscreen()メソッドを呼び出す必要がありますが、ユーザーがブラウザのUIを操作して全画面表示を終了することもできます。
逆に言えば、ユーザーが全画面表示を終了することをJavaScriptから阻止することは不可能です。
大抵のブラウザでは全画面表示が開始された場合、ブラウザから全画面表示を終了するための方法を説明するメッセージが表示されます。 このメッセージもJavaScriptやCSSを使用して非表示にすることはできません(ユーザーが自身でブラウザの設定を変更orユーザー定義スタイルシートを変更するなどすれば可能です)。
PCブラウザであれば、EscキーやF11キーを押すことで全画面表示を終了することができます。
全画面表示の状態を監視する
全画面表示の状態を監視するためには、fullscreenchangeイベントを使用します。
document.addEventListener('fullscreenchange', () => { console.log(`全画面モードを: ${document.fullscreenElement ? '開始しました' : '終了しました'}`); });
fullscreenchangeイベントは実際に全画面表示の対象になっているElementではなく、documentオブジェクトに対して発火します。全画面表示を開始した or 終了したタイミングで何かしたい場合はこのイベントを使用すると良いでしょう。
他方、document.fullscreenElementを調べれば全画面表示の対象となっている要素を取得することができます。 全画面表示状態でない場合はnullが返ってくるので、現在全画面状態になっているかの判定にも使用できます。
自前のフラグで全画面状態を管理しないほうが良い
document.fullscreenElementを使用すれば、全画面表示の状態を取得することができるので、全画面表示の状態を自前のフラグで管理する必要はありません。
フルスクリーンの開始処理 & 終了処理に自前のフラグの on/off を追加すればフラグを管理することができそうですが、先述したように、ユーザーがブラウザの UI を操作して全画面表示を終了することもできるので、フラグの状態が実際の全画面表示の状態とズレる可能性があります。
全画面表示の状態に応じて CSS を分岐させる
全画面表示の状態に応じて CSS を分岐させるためには、:fullscreen擬似クラスを使用します。
html:fullscreen { background-color: black; }
上記のCSSはhtml要素が全画面表示の対象となっているときに背景色を黒にするCSSです。
通常表示の場合は上記の CSS は適用されませんが、全画面表示状態になると html:fullscreen セレクタにマッチするので、背景色が黒になります。
document.documentElement.requestFullscreen()のように呼び出している場合はhtml要素が全画面表示の対象となるので、上記のCSS効きますが、もし他の要素に対して全画面表示をしている場合は:fullscreenの前にあたるセレクタを変更しましょう。
これを利用して、全画面表示時に特定の要素を非表示にしたり、全画面表示時に特定の要素を表示することができます。以下は先述したボタンのCSSです。:fullscreen擬似クラスによってdisplayプロパティを変更するようにすることで、全画面表示時にボタンの表示を切り替えています。
#request-fullscreen-button { display: block; margin: 10px; padding: 10px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; } #exit-fullscreen-button { display: none; margin: 10px; padding: 10px; background-color: #dc3545; color: white; border: none; border-radius: 5px; cursor: pointer; } html:fullscreen #request-fullscreen-button { display: none; } html:fullscreen #exit-fullscreen-button { display: block; }
まとめ
通常のWebサイトではなかなか使用することのないFullscreen APIですが、ゲームや動画などのコンテンツを表示する場合は全画面表示を行うことで、より快適にコンテンツを楽しむことができるでしょう。 Webページ以外の余計な UI を極力非表示にできるので、Webサイトでありながら、アプリケーションのような体験を提供することができます。
Fullscreen APIは比較的簡単に実装できるので、コンテンツが主力のWebサイトを開発する場合は、実装するとユーザに喜ばれるかもしれません。
プログラマー / N.Go
CodeIgniterやLaravel、Vue.jsといったフレームワークを用い、ECシステム、リアルタイム課金制生配信、掲示板ライクなSNSシステムなどのWebシステム制作に携わる。 プロジェクトによってはフロントエンドも一貫して請け負う。
