フルスクリーン API の利用

by 2 contributors:

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

フルスクリーン API は、簡単に Web コンテンツをユーザの画面全体へ表示させる手段を提供します。この記事では、この API の利用に関する情報を提供します。

注: この API は、標準化作業の初期段階にあります。Gecko および Google Chrome が API を実装していますが、現在それらは相互に互換性がなく、またどちらも現行のドラフト仕様を実装したものではありません。そのため少なくとも Firefox では、Firefox 9 ではデフォルトで API が無効にされていますが、Firefox 10 では有効です。現在は 仕様 が実験的な初期ドラフト段階であるため、この文書は全体的に誤りとなる可能性があり、また非常に先行的なものです。仕様がより安定的になれば、この文書はよりブラウザ依存がない形に整理されるでしょう。

API により特定の期間、ブラウザのユーザインタフェースや他のアプリケーションのすべてを画面から排除して、ある要素およびその子要素が全画面を占有するようにブラウザへ命令することができます。

フルスクリーンモードのアクティブ化

フルスクリーンモードで表示したい要素 (例えば <video>) があるときは、その要素の requestFullScreen() メソッドを呼び出します。なお、このメソッドは Gecko では element.mozRequestFullScreen()、WebKit では element.webkitRequestFullScreen() として実装されています。

以下の <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();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullScreen) {
  elem.webkitRequestFullScreen();
}

表示の違い

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

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

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

通知

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

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

フルスクリーンモードに移行できることは保証されていません。例えば <iframe> 要素は、その内容物がフルスクリーンモードで表示されるのを許可することをオプトインするための mozallowfullscreen 属性 (あるいは webkitallowfullscreen) を持っています。加えて、ウインドウ化されたプラグインなど一部のコンテンツはフルスクリーンモードで表示することができません。フルスクリーンモードで表示できない要素 (またはそのような要素の親・子孫要素) はフルスクリーン化しようとしても動作しません。その代わりに、フルスクリーン化を要求された要素は mozfullscreenerror イベントを受け取ります。

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

ユーザには、自発的にフルスクリーンモードを抜ける方法があります。Things your users want to know をご覧ください。また cancelFullScreen() メソッドを呼び出すことにより、プログラムで同様のことができます。このメソッドは Gecko では mozCancelFullScreen()、WebKit では webkitCancelFullScreen() として実装されています。

その他の情報

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

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

ユーザが知りたいこと

あなたは、ESC または F11 キーを押すとフルスクリーンモードを解除できることをユーザに必ず知らせたいでしょう。

また、フルスクリーンモードであるときにキーボードで任意の英数字入力があると、警告メッセージが表示されます。これはフィッシング攻撃対策の支援として行われます。以下のキーのみ、警告メッセージが表示されません:

  • 左矢印
  • 右矢印
  • 上矢印
  • 下矢印
  • スペース
  • shift
  • control
  • alt
  • page up
  • page down
  • home
  • end
  • tab
  • meta

加えてフルスクリーンモードであるときに、他のページへの移動、タブの切り替え、(例えば 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.fullScreenElement !== null) ||    // alternative standard method
      (!document.mozFullScreen && !document.webkitIsFullScreen)) {              // current working methods
    if (document.documentElement.requestFullScreen) {
      document.documentElement.requestFullScreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullScreen) {
      document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.cancelFullScreen) {
      document.cancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }
  }
}

これは documentfullScreen 属性 (-moz- および -webkit- 接頭辞が付加されていることを確認) の値を参照することから始まります。その属性が false である場合はドキュメントがウィンドウモードであるので、フルスクリーンモードへ切り替えることが必要です。なおドラフト仕様には、要素がフルスクリーンモードであるかを確認するため別に fullScreenElement メソッドがあります。これが null である場合はウィンドウモードです。Gecko および WebKit はこれまで、非標準の fullScreen メソッドを実装してきました。フルスクリーンモードへの切り替えは、どちらのメソッドが利用可能かに応じて element.mozRequestFullScreen() または webkitRequestFullScreen() を呼び出すことで行われます。

すでにフルスクリーンモードがアクティブである場合は、同様に使用しているブラウザに応じて document.mozCancelFullScreen() または webkitCancelFullScreen() を呼び出します。

ブラウザ実装状況

Gecko および WebKit は API のドラフト版を実装していますが、両実装には若干の違いがあります。本ドキュメントは、必ずしもその違いのすべてに言及してはいません。仕様と実装とが整合していくことに従い、記事の内容は改訂される予定です。

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 15 -webkit 9.0 (9.0) -moz ? ? ?
fullScreenEnabled 20 -webkit 10.0 (10.0) -moz ? ? ?
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? 9.0 (9.0) -moz ? ? ?
fullScreenEnabled ? 10.0 (10.0) moz ? ? ?

Gecko における注記

この API は Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) から導入されましたが、既定では有効にされていません。API を有効にするには、設定項目 full-screen-api.enabledtrue に設定してください。Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7) では、既定で API が有効にされています。

仕様書

Fullscreen API

非標準のメソッド

一部のメソッドは、標準化の立案前にブラウザへ実装されました。前出のとおり標準化されたメソッドがありますので、以下のメソッドを使用することは避ける方がよいでしょう:

  • window.fullScreen (Firefox)
  • HTMLMediaElement.webkitDisplayingFullscreen
  • HTMLMediaElement.webkitEnterFullscreen
  • HTMLMediaElement.webkitExitFullscreen
  • HTMLMediaElement.webkitSupportsFullscreen

関連情報

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

Contributors to this page: ethertank, yyss
最終更新者: ethertank,