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

Fullscreen API は、簡単に Web コンテンツをユーザの画面全体へ表示させる手段を提供します。この 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(); 
    }
  }
}

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

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

接頭辞

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

仕様

ブラウザ実装状況

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

関連情報

• Element.requestFullscreen()
• Document.exitFullscreen()
• Document.fullscreen
• Document.fullscreenElement
• :fullscreen, ::backdrop
• allowfullscreen