なんでもフルスクリーンにする FullScreen API

HTML5 Advent Calendarの2日目です。
本当は3日目の担当だったけど、代打(?)で2日目も書いている。もちろん3日目の記事も書く。
HTML5 Advent Calendar」はこんな感じの取り組み。まだ空きがあるので、よかったらどうぞ。

今年は、HTML5もAdvent Calendarやります!
本来のAdvent Calendarとは、12月1日からクリスマスの25日まで、カードに作られた窓を1日に1つずつ開けていくというものです。一方、技術系のAdvent Calendarは、12月1日から25日までの間、毎日違う人が特定のテーマに沿ってブログ記事を書くというものです。もちろん、ここでのテーマは「HTML5」になります。HTML5に関することならなんでもOKです!
このイベントに参加した順番が、そのままブログを公開する日付とします。
是非、みなさん一緒にわいわい楽しんでやりましょう!

HTML5 Advent Calendar 2011 : ATND


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 APIChrome 15 から使えて、Firefox はもうちょっと先みたい。

<追記>
コメントをいただいたのですが、FullScreen APIFirefox 10 からサポートされるとのこと。うれしい。


リファレンスはMozillaのものが詳しくて、仕様はまだエディターズドラフトの状態。

まとめ

ちょっとマイナーなFullScreen APIを紹介してみた。まだ新しいAPIなのでこれから変更が発生すると思うけど、とても簡単に使えるしなかなか面白いと思う。

11月のHTML5とか勉強会ではアンカンファレンスがあって、そこで Full Screen API についていろいろなひとと話ができて楽しかった。