Fullscreen APIを使ってビューワーを全画面表示に対応しました

上部ビューワーにフルスクリーン機能

フルスクリーン機能を、お勉強も兼ねて作りました。

仕組み

Fullscreen APIを使用してます。（参考：https://developer.mozilla.org/ja/docs/Web/Guide/DOM/Using_full_screen_mode）

細かなところで挙動が違うので、これを同じにするのが非常に辛かったです。

やりかた

現段階では、ブラウザごとによって指定するメソッドが異なるので、分岐をつくってあげないといけません。

• https://developer.mozilla.org/ja/docs/Web/Guide/DOM/Using_full_screen_mode?redirectlocale=ja&redirectslug=DOM%2FUsing_full-screen_mode
• Internet Explorerでは、11からサポート。

フルスクリーンになったことを通知するイベント

fullscreenchangeというイベントが通知されるのですが、これもベンダーによって異なります。参考：http://stackoverflow.com/questions/9621499/fullscreen-api-which-events-are-fired

jQueryでは、以下のようにすると良いかと思われます。

$(document).bind('fullscreenchange mozfullscreenchange webkitfullscreenchange', on_change_function);

fullscreenchangeは、フルスクリーンになった時はもちろん、フルスクリーンから解除されるときにも呼び出されます。document.fullscreenで調べるのですが、これもベンダーによって実装が違います。以下を参考にしてください。

https://developer.mozilla.org/ja/docs/Web/API/document.mozFullScreen

フルスクリーンになった時のCSSの指定

https://developer.mozilla.org/ja/docs/Web/CSS/:fullscreenを参考に設定しました。

フルスクリーンになった時の挙動の違い

Webkitでは要素は真ん中に寄せられるようなのですが、Geckoでは上にピッタリへばりつきます。Webkitの動作のほうが自然に感じたので、Webkit側に合わせようとしました。

MDNにこのことが書いてありました。

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

<div id="hoge">
    <canvas id="canvas"></canvas>
</div>

上の図で言えば、#hogeを全画面表示させることで、#canvasにwidth: 100%; height: 100%がかかるのを回避しています。

とはいえ、その後の処理が、margin-leftとmargin-topを要素のサイズ÷2としてJavaScriptで計算させたので、結構力技です。

くぅ～、疲れました

動作はFirefoxとChromeのみで確認しています。それ以外のデバイス・ブラウザでは全く確認していないのでご了承ください。

Fullscreen APIは、いきなり仕様が変わる可能性があるので、十分お気をつけてお使いください。

このサイト向けにFullscreen APIのjQueryプラグインを作りました。jQueryが1.4.4というちょっと古いのですが、参考程度にしてもらえるのなら、どうぞ。

jquery.fullscreenapi.js

僕は疲れました。旅にでたいですね。明日に備えてもう寝ます。

2013/09/02 15:57