Fullscreen API は、特定の Element (およびその子孫) を全画面モードで表示したり、必要なくなったときに全画面モードを抜けたりする方法を追加します。これによって、要求されたコンテンツ — オンラインゲームなど — がユーザーの画面全体で表示され、全画面モードが終了するまで、ブラウザーのユーザーインターフェイス要素や他のアプリケーションをすべて画面から排除することができます。

API の使い方についての詳細は、 Fullscreen API ガイドをご覧ください。

メモ: この API の対応はブラウザーによって、ベンダー接頭辞が必要かどうか、最新の仕様を実装しているかどうかがいくらか異なっています。この API の実装状況の詳細は、 Browser compatibility の節を参照してください。ベンダーに依存せずに Fullscreen API にアクセスできる Fscreen のようなライブラリの使用を検討したほうが良いかもしれません。

インターフェイス

Fullscreen API 自体に独自のインターフェイスはありません。その代わりに、全画面機能を提供するために必要なメソッド、プロパティ、イベントハンドラーを数多くの他のインターフェイスに追加しています。これらは以下の節に挙げています。

メソッド

Fullscreen API は Document および Element インターフェイスにメソッドを追加して、全画面モードを起動したり終了したりすることができるようにしています。

Document インターフェイスのメソッド

Document.exitFullscreen()
ユーザーエージェントが全画面モードからウィンドウモードに切り替えることをリクエストします。返される Promise は、全画面モードが完全に終了するときに解決します。

Element インターフェイスのメソッド

Element.requestFullscreen()
ユーザーエージェントに対して、指定された要素 (および、子孫まで) を全画面モードに配置し、ブラウザーのユーザーインターフェイス要素や他のアプリケーションをすべて画面から排除します。返される Promise は、全画面モードが起動したときに解決します。

プロパティ

全画面モードで表示したい要素 (例えば <video> 要素) があるときに、その要素で requestFullscreen() メソッドを呼び出すと全画面で表示できます。

DocumentOrShadowRoot.fullscreenElement
fullscreenElement プロパティで、現在全画面モードで表示されている DOM (またはシャドウ DOM) 上の Element が分かります。これが null の場合、文書は全画面モードになっていません。
Document.fullscreenEnabled
fullscreenEnabled プロパティで、全画面モードになることができるかどうかが分かります。全画面モードが何らかの理由で利用できない場合 ("fullscreen" 機能が許可されていない場合や、全画面モードに対応していない場合など) は false になります。

イベントハンドラー

Fullscreen API は二つのイベントを定義しており、全画面モードに移行したときと終了したとき、また全画面モードとウィンドウモードを切り替える途中でエラーが発生したことを検出するために利用することができます。これらのイベントのイベントハンドラーは Document および Element インターフェイスで利用できます。

メモ: これらのイベントハンドラープロパティは、 HTML の content 属性として利用することはできません。言い換えれば、 fullscreenchange および fullscreenerror のためのイベントハンドラーを HTML コンテンツから指定することができません。 JavaScript コードによって追加する必要があります。

文書のイベントハンドラー

Document.onfullscreenchange
文書が全画面モードに配置されたとき、または全画面モードを終了したときに Document に対して送信される fullscreenchange イベントのイベントハンドラーです。このハンドラーは文書全体が全画面モードで表示された時のみ呼び出されます。
Document.onfullscreenerror
文書全体に対して全画面モードを有効または無効にしようとした際にエラーが発生したとき、 Document に対して送信される fullscreenerror イベントのイベントハンドラーです。

要素のイベントハンドラー

Element.onfullscreenchange
要素が全画面モードに配置されたとき、または全画面モードを終了したときに要素に対して送信される fullscreenchange イベントのイベントハンドラーです。
Element.onfullscreenerror
要素が全画面モードに移行または終了しようとした際にエラーが発生したとき、要素に対して送信される fullscreenerror イベントのイベントハンドラーです。

廃止されたプロパティ

Document.fullscreen 
真偽値で、文書に現在全画面モードで表示されている要素があるのであれば true、 それ以外は false を返します。
メモ: 代わりに Document または ShadowRootfullscreenElement プロパティを使用してください。これが null ではない場合、現在全画面モードで表示されている Element を表します。

イベント

Fullscreen API は二つのイベントを定義しており、全画面モードに移行したときと終了したとき、また全画面モードとウィンドウモードを切り替える途中でエラーが発生したことを検出するために利用することができます。

fullscreenchange
全画面モードに移行したり、終了したりした時に、 Document または Element に対して送られます。
fullscreenerror
全画面モードに切り替えたり、終了したりした際にエラーが発生した時に、その Document または Element に対して送られます。

Dictionary

FullscreenOptions
requestFullscreen() を呼び出す時に指定することができる任意の設定を提供します。

アクセス制御

全画面モードが利用可能であるかは、機能ポリシーを使用して制御することができます。全画面モードの機能は "fullscreen" の文字列によって識別され、既定の許可リストの値は "self" であり、最上位の文書コンテキストでは全画面モードが許可されており、最上位文書と同じオリジンから読み込まれた内側の閲覧コンテキストも同様です。

機能ポリシーを使用して API へのアクセスを制御することについて、詳しくは機能ポリシーの使用を参照してください。

使用上のメモ

ユーザーは全画面モードを解除するのを、サイトやアプリがプログラム的に行うのを待つのではなく、 ESC または F11 キーを押すことで抜けることを選択することができます。ユーザーインターフェイスの中で、これができることをユーザーに知らせるための適切なユーザーインターフェイス要素を、ユーザーインターフェイスのどこかで提供することを忘れないでください。

メモ: 全画面モードであるときに別のページへ移動する、タブを切り替える、あるいは別のアプリケーションに切り替える (例えば Alt-Tab を使用) と、同様に全画面モードを解除します。

この例では、ウェブページ内に動画が表示されます。 Return または Enter キーを押すと、動画をウィンドウ内表示と全画面表示とで切り替えることができます。

ライブデモを確認

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(); 
    }
  }
}

これは documentfullscreenElement 属性の値を確認することから始まります。現実の配信では現時点で、接頭辞付きのバージョン (例えば mozFullscreenElement, msFullscreenElement, webkitFullscreenElement) をチェックしたほうがいいでしょう。値が null である場合は、文書がウィンドウモードであるので、全画面モードへ切り替えることが必要です。 Element.requestFullscreen() を呼び出して、全画面モードへ切り替えます。

すでに全画面モードが有効である (fullscreenElementnull ではない) 場合は、 documentDocument.exitFullscreen() を呼び出すことで、全画面モードを終了します。

仕様書

仕様書 状態 備考
Fullscreen API 現行の標準 初回定義

ブラウザーの対応

Document.fullscreen

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応
非推奨
Chrome 完全対応 あり
代替名
完全対応 あり
代替名
代替名 非標準の名前 webkitIsFullScreen を使用しています。
Edge ? Firefox 完全対応 64
完全対応 64
完全対応 49
無効
無効 From version 49: this feature is behind the full-screen-api.unprefix.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
完全対応 9
代替名
代替名 非標準の名前 mozFullScreen を使用しています。
IE ? Opera ? Safari 完全対応 あり
代替名
完全対応 あり
代替名
代替名 非標準の名前 webkitIsFullScreen を使用しています。
WebView Android ? Chrome Android 完全対応 あり
代替名
完全対応 あり
代替名
代替名 非標準の名前 webkitIsFullScreen を使用しています。
Edge Mobile ? Firefox Android 完全対応 64
完全対応 64
完全対応 49
無効
無効 From version 49: this feature is behind the full-screen-api.unprefix.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
完全対応 9
代替名
代替名 非標準の名前 mozFullScreen を使用しています。
Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
非標準の名前を使用しています。
非標準の名前を使用しています。

Document.fullscreenEnabled

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 45
完全対応 45
完全対応 あり
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Edge ? Firefox 完全対応 64
完全対応 64
完全対応 47
無効
無効 From version 47: this feature is behind the full-screen-api.unprefix.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
完全対応 10
代替名
代替名 非標準の名前 mozFullScreenEnabled を使用しています。
IE 完全対応 11
代替名
完全対応 11
代替名
代替名 非標準の名前 msFullScreenEnabled を使用しています。
Opera ? Safari ? WebView Android 完全対応 45
完全対応 45
完全対応 あり
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Chrome Android 完全対応 45
完全対応 45
完全対応 あり
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Edge Mobile ? Firefox Android 完全対応 64
完全対応 64
完全対応 47
無効
無効 From version 47: this feature is behind the full-screen-api.unprefix.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
完全対応 10
代替名
代替名 非標準の名前 mozFullScreenEnabled を使用しています。
Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
非標準の名前を使用しています。
非標準の名前を使用しています。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, wbamberg, yyss, ethertank
最終更新者: mfuji09,