Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

フルスクリーンモードを使用する

Fullscreen API は、簡単に Web コンテンツをユーザの画面全体へ表示させる手段を提供します。この API により特定の期間、ブラウザのユーザインタフェースや他のアプリケーションのすべてを画面から排除して、ある要素およびその子要素が全画面を占有するようにブラウザへ命令することができます。

現在、すべてのブラウザが接頭辞なしの API を使用しているわけではありません。接頭辞や名称をまとめた表で差異を確認してください。

フルスクリーンモードに移行する

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

以下の <video> 要素について考えてみましょう:

<video controls id="myvideo">
  <source src="somevideo.webm"></source>
  <source src="somevideo.mp4"></source>
</video>

以下のようなスクリプトで、ビデオをフルスクリーンモードにすることができます:

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
}

表示の違い

現時点での Gecko と WebKit の実装の違いで特に注意すべき点は、Gecko では要素を画面に合わせて引き伸ばすために、"width: 100%; height: 100%" という CSS 規則を自動的に追加することです。WebKit ではこのようなことを行いません。代わりに、フルスクリーンにする要素は同じサイズのまま画面の中央に置かれ、他の領域は黒色になります。WebKit で Gecko と同様のフルスクリーン動作にするには、要素に対して "width: 100%; height: 100%;" という CSS 規則を追加することが必要です。

#myvideo:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

これに対して Gecko で WebKit の動作を再現したい場合は、フルスクリーン表示したい要素を別の要素の内部に置き、別の要素を本来の要素の代わりにフルスクリーン化します。そして、内部の要素が希望する外観になるように調整するための CSS 規則を適用します。

通知

正常にフルスクリーンモードへ移行したとき、フルスクリーンの要素を含むドキュメントは fullscreenchange イベントを受け取ります。フルスクリーンモードから抜けたときは、ドキュメントは再び fullscreenchange イベントを受け取ります。fullscreenchange イベント自体はドキュメントがフルスクリーンモードになっているか否かの情報を提供しませんが、ドキュメントが Null 値でない fullscreenElement を持つ場合はフルスクリーンモードであることがわかります。

フルスクリーンの要求が失敗する場合

フルスクリーンモードに移行できることは保証されていません。例えば <iframe> 要素は、その内容物がフルスクリーンモードで表示されるのを許可することをオプトインするための allowfullscreen 属性を持っています。加えて windowed モードのプラグインなど、一部のコンテンツはフルスクリーンモードで表示することができません。フルスクリーンモードで表示できない要素 (またはそのような要素の親・子孫要素) はフルスクリーン化しようとしても動作しません。その代わりに、フルスクリーン化を要求された要素は fullscreenerror イベントを受け取ります。フルスクリーンの要求が失敗した場合に Firefox は、なぜ失敗したかを示すエラーメッセージを Web コンソールに記録します。一方 Chrome や新しい Opera は、そのような警告を生成しません。

注記: フルスクリーンの要求はイベントハンドラの内部から呼び出さなければならず、そうでない場合は要求を拒否します。

フルスクリーンモードから抜ける

ユーザは、自発的にフルスクリーンモードから抜けることができます。ユーザが知りたいこと をご覧ください。また document.exitFullscreen() メソッドを呼び出すと、プログラムから同様のことができます。

その他の情報

document はフルスクリーンの Web アプリケーションを開発する際に役立つ、追加の情報を提供します:

fullscreenElement
fullscreenElement 属性は、現在フルスクリーンで表示されている element を表します。これが Null 値でない場合、ドキュメントはフルスクリーンモードです。Null 値である場合は、ドキュメントがフルスクリーンモードではありません。
fullscreenEnabled
fullscreenEnabled 属性は、ドキュメントがフルスクリーンモードの要求を許可されているか表します。

ユーザが知りたいこと

ESC または F11 キーを押すとフルスクリーンモードを解除できることを、ユーザが知っているようにしたいでしょう。

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

この例では、Web ページ内に動画が表示されています。Return または Enter キーを押すと、動画をウィンドウ内表示とフルスクリーン表示とで切り替えることができます。

実際の表示を確認

Enter キーを監視する

ページが読み込まれると、Enter キーを監視するイベントリスナを設定するコードが実行されます。

document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    toggleFullScreen();
  }
}, false);

フルスクリーンモードを切り替える

以下のコードは、前出のとおりユーザが Enter キーを押したときに呼び出されます。

function toggleFullScreen() {
  if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen();
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen(); 
    }
  }
}

これは documentfullscreenElement 属性の値を確認することから始まります。その属性が null である場合はドキュメントが windowed モードであるので、フルスクリーンモードへ切り替えることが必要です。element.requestFullscreen() を呼び出して、フルスクリーンモードへ切り替えます。

すでにフルスクリーンモードがアクティブである (fullscreenElementnull ではない) 場合は、document.exitFullscreen() を呼び出します。

接頭辞

現在、すべてのブラウザが接頭辞なしの API を使用しているわけではありません。接頭辞や名称の差異ををまとめた表を以下に掲載します:

標準仕様 Blink (Chrome & Opera) Gecko (Firefox) Edge Safari (WebKit)
Document.fullscreen 未サポート mozFullScreen webkitIsFullScreen webkitIsFullScreen
Document.fullscreenEnabled 接頭辞なし mozFullScreenEnabled 接頭辞なし webkitFullscreenEnabled
Document.fullscreenElement 接頭辞なし mozFullScreenElement 接頭辞なし webkitFullscreenElement
Document.onfullscreenchange 接頭辞なし onmozfullscreenchange 接頭辞なし onwebkitfullscreenchange
Document.onfullscreenerror 接頭辞なし onmozfullscreenerror 接頭辞なし onwebkitfullscreenerror
Document.exitFullscreen() 接頭辞なし mozCancelFullScreen() 接頭辞なし webkitExitFullscreen()
Element.requestFullscreen() 接頭辞なし mozRequestFullScreen() 接頭辞なし webkitRequestFullscreen()

仕様

仕様書 策定状況 コメント
Fullscreen API 現行の標準 Initial version.

ブラウザ実装状況

すべてのブラウザがこの API を実装しています。ただし、接頭辞付きの名称を若干異なるつづりにしている実装があります。例えば、requestFullscreen() ではなく MozRequestFullScreen() にしています。

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 15 -webkit 9.0 (9.0) -moz
47 (47) (full-screen-api.unprefix.enabled で制御)
11 -ms 12.10 5.0 -webkit
fullscreenEnabled 20 -webkit 10.0 (10.0) -moz
47 (47) (full-screen-api.unprefix.enabled で制御)
11 -ms 12.10 5.1 -webkit
機能 Android Chrome Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? 28 -webkit 9.0 (9.0)-moz
47.0 (47) (full-screen-api.unprefix.enabled で制御)
? ? ?
fullscreenEnabled ? 28 -webkit 10.0 (10.0) moz
47.0 (47) (full-screen-api.unprefix.enabled で制御)
? ? ?

関連情報

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

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