ちょっと前、先月の話題になってしまうのですが、Web ページ内の任意の要素をフルスクリーン表示可能にする Fullscreen API に関連して、Mozilla が公開している Gecko:FullScreenAPI が更新されて Firefox Nightly で使えるようになったり、W3C からも Fullscreen （Editor's Draft） が公開されたりと色々動きが活発になってきましたので、いい機会ということで、お勉強ついでに簡単に試してみました。
例えば HTML5 で追加された video 要素は、今まで Flash などのアドオンに頼ってきた動画の Web ページへの埋め込み、再生を HTML 側で対応することを可能にしましたが、フルスクリーン （全画面） 表示に関しては機能として含まれていませんでした。Fullscreen API は、JavaScript を使用して、video 要素や、canvas をはじめ、任意の要素内をフルスクリーン表示することを可能にしてくれます。
さて、ブラウザごとの対応状況ですが、Fullscreen API に関して、元々は Safari が 5.0 （+ iOS 4.2） で webkitEnterFullscreen() メソッドとして実装していましたが、その後、5.1 からは Mozilla の Gecko:FullScreenAPI をベースにした実装に変更されています。よって、Safari 5.1 以降では利用可能。
また、Firefox と Chrome に関しても対応が進んでいて、Chrome 15 以降ではすでに使用可能、Firefox は正式版ではまだ未対応ですが、先に書いたとおり Nightly 版の方では対応しているそうです（full-screen-api.enabled を true にする必要あり / 正式版での対応は Firefox 10 を予定）。
ただし、後述しますが、現時点では利用可能となっているブラウザでも、ベンダプレフィックスが必要な先行実装状態です。
で、この流れの中で、W3C からも Fullscreen API の仕様が ドラフトとして公開されましたが、W3C から公開された Fullscreen （Editor's Draft） は、Gecko:FullScreenAPI とは少し内容が異なっているようで、例えばフルスクリーン解除時に使用するメソッドが違ったりします。
Fullscreen の基本的な仕様
今回は W3C の Fullscreen ドラフト仕様をベースに話を進めますが、仕様ではフルスクリーン表示のための API と、フルスクリーン時のスタイルを指定するための CSS セレクタがセットで用意されています。
まず API の方ですが、下記の 4つが。
- requestFullscreen()
- fullscreenEnabled
- fullscreenElement
- exitFullscreen()
CSS セレクタとしては下記の 2つの疑似クラスが用意されています。
- :fullscreen
- :fullscreen-ancestor
順に説明しますが、まずは基本的なフルスクリーン切り替えを行うための 2つの API と CSS セレクタから。
requestFullscreen()
フルスクリーン表示への切り替えを行います。現状では対応ブラウザで動作させる場合でもベンダプレフィックスが必要ですので Firefox は mozRequestFullScreen() 。Safari、Chrome は webkitRequestFullScreen() と記述する必要があります。
exitFullscreen()
フルスクリーン表示を終了します。現状ではベンダプレフィックスが必要な点は requestFullscreen() と同様ですが、Gecko:FullScreenAPI ではメソッド名が異なる cancelFullScreen() を使用しますので、Firefox の場合は mozRequestFullScreen() 。Safari、Chrome は webkitCancelFullScreen() と記述する必要があります。
この2つの API で、フルスクリーンの表示、解除の切り替えは可能です。最も単純に書くなら、下記のようになります。まず、HTML5 のサンプルソースを。
<div id="content"> <video controls> <source src="sample.webm"></source> <source src="sample.mp4"></source> </video> <p> <button id="enterFullscreen" onclick="enterFullscreen()">フルスクリーンで見る</button> <button id="exitFullscreen" onclick="exitFullscreen()">フルスクリーンを解除</button> </p> </div>
今回は video 要素の下部に配置されたボタンを押したときに、それらを包含する div#content をフルスクリーン表示、さらにフルスクリーン解除を操作するというのを考えてみますが、JavaScript の記述は例えばこんな感じになります。
<script>
//フルスクリーンに切り替え
function enterFullscreen() {
var x = document.getElementById("content");
if (x.webkitRequestFullScreen) {
x.webkitRequestFullScreen();
} else if (x.mozRequestFullScreen) {
x.mozRequestFullScreen();
} else {
x.requestFullScreen();
}
}
//フルスクリーンを解除
function exitFullscreen() {
if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else {
document.exitFullscreen();
}
}
</script>
また、CSS セレクタでフルスクリーン時のみ、異なるスタイルを適用することもできます。
:fullscreen
:fullscreen 疑似クラスを使うことで、フルスクリーン状態にした最も上位の要素にマッチします。上のサンプルなら div#content ですね。
なので、フルスクリーン時、div#content 内の video 要素の width も 100% にしたければ、下記のように記述しますが、これも Gecko:FullScreenAPI と W3C の仕様では名前が異なる （Gecko:FullScreenAPI では :full-screen 疑似クラス） のと、ベンダプレフィックスも必要ですので、全部書くと下記のような記述になります。
/* -webkit- */
:-webkit-full-screen video {
width: 100%;
}
/* -moz- */
:-moz-full-screen video {
width: 100%;
}
/* Mozilla Proposal (-)がつきます */
:full-screen video {
width: 100%;
}
/* W3C Proposal (-)がつきません */
:fullscreen video {
width: 100%;
}
:fullscreen-ancestor
:fullscreen 疑似クラスはフルスクリーン状態にした最も上位の要素 （つまり今回のサンプルだと div#content） の先祖となる要素にマッチします。例えば、通常時にはフルスクリーン対象となる要素の外側にあるメニューに、フルスクリーン時だけ特別なスタイルを適用して表示させたいなんて時には使えると思います。
ちなみに、フルスクリーン時のブラウザデフォルトスタイルとしては下記の内容が適用されるように、仕様内ではルール決めされています。
/* A full-screen element that is not the root element should be stretched
to cover the viewport. */
:full-screen:not(:root) {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
z-index:2147483647;
background:black;
/* override mapped width and height attributes */
width:100% !important;
height:100% !important;
}
/* W3C Fullscreen Editor's Draft 17 November 2011 */
:fullscreen {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
z-index:2147483647;
box-sizing:border-box;
margin:0;
width:100%;
height:100%;
}
/* If there is a full-screen element that is not the root then
we should hide the viewport scrollbar. */
:root:full-screen-ancestor {
overflow:hidden;
}
:full-screen-ancestor {
/* Ancestors of a full-screen element should not induce stacking contexts
that would prevent the full-screen element from being on top. */
z-index:auto;
/* Ancestors of a full-screen element should not be partially transparent,
since that would apply to the full-screen element and make the page visible
behind it. It would also create a pseudo-stacking-context that would let content
draw on top of the full-screen element. */
opacity:1;
/* Ancestors of a full-screen element should not apply SVG masking, clipping, or
filtering, since that would affect the full-screen element and create a pseudo-
stacking context. */
mask:none;
clip:auto;
filter:none;
/* W3C Fullscreen Editor's Draft 17 November 2011 */
transform:none;
transition:none;
}
あと、上で説明していなかった 2つの API ですが
fullscreenEnabled
ブラウザが Fullscreen API に対応しているかを調べます。
fullscreen Element
フルスクリーン化されている要素を返します。
Gecko:FullScreenAPI では上記以外にも API が用意されています。詳しくは Gecko:FullScreenAPI のページを見てください。
セキュリティ関連
8 Security and Privacy Considerations
User agents should ensure, e.g. by means of an overlay, that the end user is aware something is displayed fullscreen. User agents should provide a means of exiting fullscreen that always works and advertise this to the user. This is to prevent a site from spoofing the end user by recreating the user agent or even operating system environment when fullscreen. See also the definition of requestFullscreen().
To prevent embedded content from going fullscreen only embedded content specifically allowed via the allowfullscreen attribute of the HTML iframe element will be able to go fullscreen. This prevents untrusted content from going fullscreen.
Fullscreen から引用
悪用されないようにということで、そのサイトでフルスクリーンモードに最初にした場合は下記のように 「フルスクリーンになってるけどいいの？」 という確認が出るようになっています （Chrome の表示例）。また、フルスクリーン解除メニューは、制作者側で用意しなくても、ブラウザの UI として提供されるように推奨されています。
あと、iflame のフルスクリーン表示に関しては、allowfullscreen 属性 （この属性も現在策定中なので、現状ではベンダプレフィックス付きの webkitallowfullscreen, mozallowfullscreen を使用） がないと有効になりません。
ということで、最後に上記サンプルをベースにしたデモを下記に置いておきますので、Chrome か Safari の最新版あたりで試してみてください。サンプルは本当に簡単に書いているので、あまり参考にならないかもしれませんが。
Web サイト側での実装例だと試用版として提供されている YouTube の HTML5 版は、対応しているブラウザに関してフルスクリーン表示をこれでやっているようなので、見てみるといいかもしれません。ちなみに、YouTube の iframe 版埋め込みコードにはすでに allowfullscreen 属性が含まれていたりしますが、これは上で書いたセキュリティ面の仕様に従ったものですね。
