インターネットブラウザは無敵アプリです。
HTML5の普及により、できる事がかなり増えて、スマートフォンのネイティブアプリを凌駕するほどになっています。
GoogleがChromeOSをまだまだPUSHしている理由はそれほどまでに高機能なインターネットブラウザで、世の中のPC作業はほとんど完了してしまうというコンセプトですが、十分理解できますね。
今回は、そんなWEBブラウザの全画面表示機能をとあるサービスに導入してみたときの、対応方法や、特性についてまとめてみました。
WEBブラウザの全画面対応について
一番よく使われている場面は、Youtubeなどの動画サイトで、PC画面全体に表示する機能として使われているのを見かけますが、
実は、この機能、動画表示だけで使うものではなく、特定のエレメントに対して全画面表示することが可能です。
スマホでは、動画を再生すると、自動的に全画面表示されてしまうので、動画専用機能だと勘違いしている人も多いようですが、任意エレメントで柔軟に使用できることを知っていれば、いろいろな場面での用途がありそうです。
ゲームサイトなどであれば、ページ内のゲームの部分だけを表示したりすることが可能です。
slideshareなどでは、プレゼンテーションをする際に拡大表示することで効果的に使えているようです。
現在ではベンダープレフィックスが必要
https://developer.mozilla.org/ja/docs/Web/Guide/DOM/Using_full_screen_mode
MDNサイトによると、
// 全画面表示
element. requestFullscreen();
// 全画面から通常表示に戻す
document.exitFullscreen();
と解説されていますが、今現在このまま動作できるブラウザはありません。
ブラウザごとにベンダープレフィックスを先頭につけなければいけません。
そして、ブラウザ毎の対応は以下のとおりです。
https://caniuse.com/#search=requestFullscreen
| ブラウザ名 | プログラム |
|---|
| GoogleChrome | webkitRequestFullscreen() |
|---|
| Safari | webkitRequestFullscreen() |
|---|
| Firefox | mozRequestFullScreen() |
|---|
| IE11 | msRequestFullscreen() |
|---|
| Opera | webkitRequestFullscreen() |
|---|
マルチブラウザ対応プログラム
下記のファンクションに対して、エレメントをしていしてあげると、大体のブラウザでフルスクリーンが実行されます。
// Full Screen
function fullScreen(target){
//Chrome15+, Safari5.1+, Opera15+
if (target.webkitRequestFullscreen) {
target.webkitRequestFullscreen();
}
//FF10+
else if (target.mozRequestFullScreen) {
target.mozRequestFullScreen();
}
//IE11+
else if (target.msRequestFullscreen) {
target.msRequestFullscreen();
}
// HTML5 Fullscreen API仕様
else if (target.requestFullscreen) {
target.requestFullscreen();
}
// 未対応
else {
alert('ご利用のブラウザはフルスクリーン操作に対応していません');
}
}
// Cancel Full Screen
function cancelFullScreen(target){
//Chrome15+, Safari5.1+, Opera15+
if (document.webkitRequestFullscreen) {
document.webkitCancelFullScreen();
}
//FF10+
else if (document.mozRequestFullScreen) {
document.mozCancelFullScreen();
}
//IE11+
else if (document.msRequestFullscreen) {
document.msExitFullscreen();
}
// HTML5 Fullscreen API仕様
else if (document.requestFullscreen) {
document.cancelFullScreen();
}
}
全画面を元に戻す時は、ターゲットエレメントは不要で、documentに対してキャンセルする点を間違えないようにしましょう。
ちなみに、「etc」ボタンを押すことで、キャンセルする場合は以下のように書いておけばいいです。
window.addEventListener("keyup", function(event){
if(event.keyCode == 27){
cancelFullScreen();
}
}, false);
etcキーコードは「27」番なんですね。
残念ながらiOSでは対応していないようなので、今後の対応を期待しましょう。
0 件のコメント:
コメントを投稿