マイナーAPIの実は使える(面白い)利用例を考える。

(FullScreen API編)

モデレーター：IIJ 大津繁樹

2011年11月16日

Chrome 15以上の動作限定です。

矢印カーソル(←→)でスライドが動きます。

FullScreen APIとは、

・全画面表示をするAPIのこと

・Chrome15から標準 (webkit付API)

・FireFox9から（要設定),FireFox10から標準 (moz付API)

・多分にFlashを意識？

・ちょうど今WHATWGで rev I を議論中

使うのはとっても簡単

webkitRequestFullScreen()を呼ぶだけ

   <h1 id="text"
     onclick="event.target.webkitRequestFullScreen()">
     ここをクリック
   </h1>

ここをクリック

//止めるんだったら、
document.webkitCancelFullScreen();
//もちろんブラウザーのキーコマンドもOK

Canvasデモ

キャンバスも背景色をCSSで変えられます。

(円をクリック、リターンで戻る)

#canvas {
    background: yellow;
}
#canvas:-webkit-full-screen {
    background: cyan;
}

本命はビデオ

(ビデオをクリックするとフルスクリーン。リターンで戻る。)

話し合って出た利用例

・映像を見る

・ゲームの効果

・学校の講義で生徒にフル画面強制

・テキスト入力時に強調効果を狙う。

・拡大してアクセスビリティ向上

・タブレットなど並べて遊ぼう

・デジタル美術館・博物館

・どのデバイスでもフルスクリーンで便利だぁ。

・クローム拡張にして見たいものだけ出す。(広告排除）