--- title: Fullscreen API slug: Web/API/Fullscreen_API tags: - API - DOM - Fullscreen API - Intermediate - Reference - Tutorial - 全画面 - 全画面モード - 概要 translation_of: Web/API/Fullscreen_API ---
Fullscreen API は、特定の {{DOMxRef("Element")}} (およびその子孫) を全画面モードで表示したり、必要なくなったときに全画面モードを抜けたりする方法を追加します。これによって、要求されたコンテンツ — オンラインゲームなど — がユーザーの画面全体で表示され、全画面モードが終了するまで、ブラウザーのユーザーインターフェイス要素や他のアプリケーションをすべて画面から排除することができます。
API の使い方についての詳細は、 Fullscreen API ガイドをご覧ください。
メモ: この API の対応はブラウザーによって、ベンダー接頭辞が必要かどうか、最新の仕様を実装しているかどうかがいくらか異なっています。この API の実装状況の詳細は、 {{anch("Browser compatibility")}} の節を参照してください。ベンダーに依存せずに Fullscreen API にアクセスできる Fscreen のようなライブラリの使用を検討したほうが良いかもしれません。
Fullscreen API 自体に独自のインターフェイスはありません。その代わりに、全画面機能を提供するために必要なメソッド、プロパティ、イベントハンドラーを数多くの他のインターフェイスに追加しています。これらは以下の節に挙げています。
Fullscreen API は {{DOMxRef("Document")}} および {{DOMxRef("Element")}} インターフェイスにメソッドを追加して、全画面モードを起動したり終了したりすることができるようにしています。
全画面モードで表示したい要素 (例えば {{HTMLElement("video")}} 要素) があるときに、その要素で requestFullscreen()
メソッドを呼び出すと全画面で表示できます。
fullscreenElement
プロパティで、現在全画面モードで表示されている DOM (またはシャドウ DOM) 上の {{DOMxRef("Element")}} が分かります。これが null
の場合、文書は全画面モードになっていません。fullscreenEnabled
プロパティで、全画面モードになることができるかどうかが分かります。全画面モードが何らかの理由で利用できない場合 ("fullscreen"
機能が許可されていない場合や、全画面モードに対応していない場合など) は false
になります。Fullscreen API は二つのイベントを定義しており、全画面モードに移行したときと終了したとき、また全画面モードとウィンドウモードを切り替える途中でエラーが発生したことを検出するために利用することができます。これらのイベントのイベントハンドラーは {{DOMxRef("Document")}} および {{DOMxRef("Element")}} インターフェイスで利用できます。
メモ: これらのイベントハンドラープロパティは、 HTML の content 属性として利用することはできません。言い換えれば、 {{Event("fullscreenchange")}} および {{Event("fullscreenerror")}} のためのイベントハンドラーを HTML コンテンツから指定することができません。 JavaScript コードによって追加する必要があります。
true
、 それ以外は false
を返します。
null
ではない場合、現在全画面モードで表示されている {{DOMxRef("Element")}} を表します。Fullscreen API は二つのイベントを定義しており、全画面モードに移行したときと終了したとき、また全画面モードとウィンドウモードを切り替える途中でエラーが発生したことを検出するために利用することができます。
Document
または Element
に対して送られます。全画面モードが利用可能であるかは、機能ポリシーを使用して制御することができます。全画面モードの機能は "fullscreen"
の文字列によって識別され、既定の許可リストの値は "self"
であり、最上位の文書コンテキストでは全画面モードが許可されており、最上位文書と同じオリジンから読み込まれた内側の閲覧コンテキストも同様です。
機能ポリシーを使用して API へのアクセスを制御することについて、詳しくは機能ポリシーの使用を参照してください。
ユーザーは全画面モードを解除するのを、サイトやアプリがプログラム的に行うのを待つのではなく、 ESC または F11 キーを押すことで抜けることを選択することができます。ユーザーインターフェイスの中で、これができることをユーザーに知らせるための適切なユーザーインターフェイス要素を、ユーザーインターフェイスのどこかで提供することを忘れないでください。
メモ: 全画面モードであるときに別のページへ移動する、タブを切り替える、あるいは別のアプリケーションに切り替える (例えば Alt-Tab を使用) と、同様に全画面モードを解除します。
この例では、ウェブページ内に動画が表示されます。 Return または Enter キーを押すと、動画をウィンドウ内表示と全画面表示とで切り替えることができます。
ページが読み込まれると、 Enter キーを監視するイベントリスナーを設定するコードが実行されます。
document.addEventListener("keypress", function(e) { if (e.keyCode === 13) { toggleFullScreen(); } }, false);
このコードは、ユーザーが Enter キーを押したときに呼び出されます。
function toggleFullScreen() { if (!document.fullscreenElement) { document.documentElement.requestFullscreen(); } else { if (document.exitFullscreen) { document.exitFullscreen(); } } }
これは {{DOMxRef("Document", "document")}} の fullscreenElement
属性の値を確認することから始まります。現実の配信では現時点で、接頭辞付きのバージョン (例えば mozFullscreenElement
, msFullscreenElement
, webkitFullscreenElement
) をチェックしたほうがいいでしょう。値が null
である場合は、文書がウィンドウモードであるので、全画面モードへ切り替えることが必要です。 {{DOMxRef("Element.requestFullscreen()")}} を呼び出して、全画面モードへ切り替えます。
すでに全画面モードが有効である (fullscreenElement
が null
ではない) 場合は、 document
の {{DOMxRef("Document.exitFullscreen()")}} を呼び出すことで、全画面モードを終了します。
仕様書 | 状態 | 備考 |
---|---|---|
{{SpecName("Fullscreen")}} | {{Spec2("Fullscreen")}} | 初回定義 |
Document.fullscreen
{{Compat("api.Document.fullscreen")}}
Document.fullscreenEnabled
{{Compat("api.Document.fullscreenEnabled")}}