😩 🏑 📘 フルスクリーンAPIの使用方法 😢 🕴🏿 🖋️

多数の新しいAPIであるHTML5を使用してください。そのうちの1つはFullscreen APIです。これは、ブラウザがユーザーにWebページを全画面表示するネイティブな方法を提供します。

そして良いことは、Fullscreen APIが非常に使いやすいことです。

方法

Fullscreen APIに含まれるメソッド

W3C標準によれば、一部のメソッドの名前は変更されていますが、古い名前は引き続き機能します。

Element.requestFullscreen()

この方法では、1つのアイテムを全画面モードにできます。

 Document.getElementById("myCanvas").requestFullscreen()

このコードを実行すると、ID「myCanvas」のキャンバスが全画面モードになります。

 Document.cancelFullScreen()

新しい属性名：

 Document.exitFullscreen

全画面モードをキャンセルします。

 Document.fullScreen

新しい属性名：

 Document.fullscreenEnabled

ユーザーが全画面モードの場合、trueを返します。

 Document.fullScreenElement

現在全画面表示されているアイテムを返します。

これらは標準的な方法であることに注意してください。それらがすべてのブラウザで機能するためには、プレフィックスを使用する必要があります。

サポートされているブラウザ

クロム
Firefox
サファリ
オペラネクスト
Opera（バージョン12.10以降）
Internet Explorer（バージョン11以降）

最新のブラウザによるFullscreen APIのサポートの詳細については、こちらをご覧ください。

フルスクリーンAPIのブラウザサポートを自動的に検出し、必要に応じて、フルスクリーンAPIメソッドに必要なプレフィックスを追加するスクリプトが役立ちます。

全画面起動

まず、ブラウザが認識するメソッドを把握する必要があります。これを行うには、メソッドのサポートを確認し、作業中のメソッドを呼び出す関数を作成します。

 function fullScreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } else if(element.webkitrequestFullscreen) { element.webkitRequestFullscreen(); } else if(element.mozRequestFullscreen) { element.mozRequestFullScreen(); } }

requestFullscreenメソッドのいずれかがtrueを返す場合、特定のブラウザーでサポートされ、プレフィックス付きの擬似クラスを使用するメソッドが呼び出されます。

その後、フルスクリーンモードの関数を呼び出す必要があります。

 //   var html = document.documentElement; fullScreen(html);

 //      var canvas = document.getElementById('mycanvas'); fullScreen(canvas);

結果は、フルスクリーンモードへの移行を許可するリクエストを含むユーザーへのリクエストになります。ユーザーが移行を許可すると、ブラウザーのすべてのツールバーが消え、ページ全体にWebページまたは1つの要素が含まれます。

全画面をキャンセル

このメソッドにはプレフィックスも必要なので、メソッドに対するブラウザーサポートをテストするために同じ考え方を使用します。ユーザーのブラウザに応じて、使用するプレフィックスを決定する関数を作成しましょう。

このメソッドは、requestFullscreenメソッドとは異なり、常にドキュメント全体に適用されるため、パラメーターを必要としません。

 function fullScreenCancel() { if(document.requestFullscreen) { document.requestFullscreen(); } else if(document.webkitRequestFullscreen ) { document.webkitRequestFullscreen(); } else if(document.mozRequestFullscreen) { document.mozRequestFullScreen(); } }

 //   fullScreenCancel();

CSS擬似クラス

CSS擬似クラスには、このJavaScript APIが付属しています。

 :full-screen

ページまたは要素が全画面モードのときに、Webページ上の要素をスタイルするために使用できます。この擬似クラスは、全画面モードではブラウザの作業スペースも増加するため、ページ要素のサイズを設定するのに役立ちます。

 :-webkit-full-screen {/*WebKit, Opera 15+*/ font-size: 16px; } :-moz-full-screen {/*FireFox*/ font-size: 16px; } :full-screen {/*Opera 12.15-, Blink, w3c standard*/ font-size: 16px; } /*   img*/ :-webkit-full-screen img { width: 100%; height: 100%; } :-moz-full-screen img { width: 100%; height: 100%; }

ブラウザはプレフィックスを認識できないため、プレフィックスをカンマで区切ることはできません。

 /*     */ :-webkit-full-screen img,:-moz-full-screen img { width: 100%; height: 100%; }

スタイルが正しく適用されるようにするには、ブラウザのプレフィックスを持つ各擬似クラスを独自のブロックに配置する必要があります。

おわりに

このJavaScript APIは、HTML5に付属するものとしてはあまり知られていないものの1つですが、ユーザーの注意を1つの要素に集中させることができる効果的で実装が簡単な方法であり、動画、画像、ゲームに特に役立ちます。

フルスクリーンAPIの使用方法

方法