なんでもフルスクリーンにする FullScreen API
HTML5 Advent Calendarの2日目です。
本当は3日目の担当だったけど、代打(?)で2日目も書いている。もちろん3日目の記事も書く。
「HTML5 Advent Calendar」はこんな感じの取り組み。まだ空きがあるので、よかったらどうぞ。
今年は、HTML5もAdvent Calendarやります!
HTML5 Advent Calendar 2011 : ATND
本来のAdvent Calendarとは、12月1日からクリスマスの25日まで、カードに作られた窓を1日に1つずつ開けていくというものです。一方、技術系のAdvent Calendarは、12月1日から25日までの間、毎日違う人が特定のテーマに沿ってブログ記事を書くというものです。もちろん、ここでのテーマは「HTML5」になります。HTML5に関することならなんでもOKです!
このイベントに参加した順番が、そのままブログを公開する日付とします。
是非、みなさん一緒にわいわい楽しんでやりましょう!
FullScreen API を使うと、いろんな要素をフルスクリーンにできる。まずはちょっとしたサンプルを。Chrome 15で動作確認をした。
フルスクリーンの解除は Esc か Cmd+ Shift + F(Macの場合) でできる。Windowsはよくわからない…。
<!DOCTYPE HTML> <html lang="ja_JP"> <head> <meta charset="UTF-8"> <title>Full Screen Sample</title> <script> function init(){ document.getElementById("start").addEventListener('click', function(){ document.getElementById("contents").webkitRequestFullScreen(); } ); } window.onload = init; </script> </head> <body> <div id="contents"> <div id="start" style="border:1px solid #000"> Full Screnn (click me) </div> </div> </body> </html>
ポイントは、ここだけ。
document.getElementById("contents").webkitRequestFullScreen();
ベンダープリフィクスが付いているけど requestFullScreen を呼ぶだけで、フルスクリーンにできる。
このAPIが面白いのは、いろいろな要素をフルスクリーンにできることだと思う。Video だけじゃなく、Canvas や div や iframe もフルスクリーンにできる。
フルスクリーンにしたときの擬似クラス :full-screen ( :-webkit-full-screen )があるので、これでスタイルを設定できる。
こちらではいろいろなサンプルが公開されていて、いろいろ楽しい。
FullScreen API が話題になったのは、HTML5Rocksで紹介されたのがきっかけだと思う。少なくとも僕はこの記事で知った。
FullScreen APIは Chrome 15 から使えて、Firefox はもうちょっと先みたい。
<追記>
コメントをいただいたのですが、FullScreen API は Firefox 10 からサポートされるとのこと。うれしい。
- https://developer.mozilla.org/en/DOM/Using_full-screen_mode
- https://developer.mozilla.org/en/DOM/document.mozFullScreenEnabled
リファレンスはMozillaのものが詳しくて、仕様はまだエディターズドラフトの状態。