path: root/files/ja/web/api/fullscreen_api/index.html

---
title: Fullscreen API
slug: Web/API/Fullscreen_API
tags:
  - API
  - DOM
  - Fullscreen API
  - Intermediate
  - Reference
  - Tutorial
  - 全画面
  - 全画面モード
  - 概要
translation_of: Web/API/Fullscreen_API
---
<div>{{DefaultAPISidebar("Fullscreen API")}}</div>

<p><strong>Fullscreen API</strong> は、特定の {{DOMxRef("Element")}} (およびその子孫) を全画面モードで表示したり、必要なくなったときに全画面モードを抜けたりする方法を追加します。これによって、要求されたコンテンツ — オンラインゲームなど — がユーザーの画面全体で表示され、全画面モードが終了するまで、ブラウザーのユーザーインターフェイス要素や他のアプリケーションをすべて画面から排除することができます。</p>

<p>API の使い方についての詳細は、 <a href="/ja/docs/Web/API/Fullscreen_API/Guide">Fullscreen API ガイド</a>をご覧ください。</p>

<div class="blockIndicator note">
<p><strong>メモ:</strong> この API の対応はブラウザーによって、ベンダー接頭辞が必要かどうか、最新の仕様を実装しているかどうかがいくらか異なっています。この API の実装状況の詳細は、 {{anch("Browser compatibility")}} の節を参照してください。ベンダーに依存せずに Fullscreen API にアクセスできる <a href="https://github.com/rafrex/fscreen">Fscreen</a> のようなライブラリの使用を検討したほうが良いかもしれません。</p>
</div>

<h2 id="Interfaces" name="Interfaces">インターフェイス</h2>

<p><em>Fullscreen API 自体に独自のインターフェイスはありません。その代わりに、全画面機能を提供するために必要なメソッド、プロパティ、イベントハンドラーを数多くの他のインターフェイスに追加しています。これらは以下の節に挙げています。</em></p>

<h2 id="Methods" name="Methods">メソッド</h2>

<p>Fullscreen API は {{DOMxRef("Document")}} および {{DOMxRef("Element")}} インターフェイスにメソッドを追加して、全画面モードを起動したり終了したりすることができるようにしています。</p>

<h3 id="Methods_on_the_Document_interface" name="Methods_on_the_Document_interface">Document インターフェイスのメソッド</h3>

<dl>
 <dt>{{DOMxRef("Document.exitFullscreen()")}}</dt>
 <dd>{{Glossary("user agent", "ユーザーエージェント")}}が全画面モードからウィンドウモードに切り替えることをリクエストします。返される {{jsxref("Promise")}} は、全画面モードが完全に終了するときに解決します。</dd>
</dl>

<h3 id="Methods_on_the_Element_interface" name="Methods_on_the_Element_interface">Element インターフェイスのメソッド</h3>

<dl>
 <dt>{{DOMxRef("Element.requestFullscreen()")}}</dt>
 <dd>ユーザーエージェントに対して、指定された要素 (および、子孫まで) を全画面モードに配置し、ブラウザーのユーザーインターフェイス要素や他のアプリケーションをすべて画面から排除します。返される {{jsxref("Promise")}} は、全画面モードが起動したときに解決します。</dd>
</dl>

<h2 id="Properties" name="Properties">プロパティ</h2>

<p>全画面モードで表示したい要素 (例えば {{HTMLElement("video")}} 要素) があるときに、その要素で <code>requestFullscreen()</code> メソッドを呼び出すと全画面で表示できます。</p>

<dl>
 <dt>{{DOMxRef("DocumentOrShadowRoot.fullscreenElement")}}</dt>
 <dd><code>fullscreenElement</code> プロパティで、現在全画面モードで表示されている DOM (またはシャドウ DOM) 上の {{DOMxRef("Element")}} が分かります。これが <code>null</code> の場合、文書は全画面モードになっていません。</dd>
 <dt>{{DOMxRef("Document.fullscreenEnabled")}}</dt>
 <dd><code>fullscreenEnabled</code> プロパティで、全画面モードになることができるかどうかが分かります。全画面モードが何らかの理由で利用できない場合 (<code>"fullscreen"</code> 機能が許可されていない場合や、全画面モードに対応していない場合など) は <code>false</code> になります。</dd>
</dl>

<h3 id="Event_handlers" name="Event_handlers">イベントハンドラー</h3>

<p><em>Fullscreen API は二つのイベントを定義しており、全画面モードに移行したときと終了したとき、また全画面モードとウィンドウモードを切り替える途中でエラーが発生したことを検出するために利用することができます。これらのイベントのイベントハンドラーは {{DOMxRef("Document")}} および {{DOMxRef("Element")}} インターフェイスで利用できます。</em></p>

<div class="blockIndicator note">
<p><strong>メモ:</strong> これらのイベントハンドラープロパティは、 HTML の content 属性として利用することは<em>できません</em>。言い換えれば、 {{Event("fullscreenchange")}} および {{Event("fullscreenerror")}} のためのイベントハンドラーを HTML コンテンツから指定することができません。 JavaScript コードによって追加する必要があります。</p>
</div>

<h4 id="Event_handlers_on_documents" name="Event_handlers_on_documents">文書のイベントハンドラー</h4>

<dl>
 <dt>{{DOMxRef("Document.onfullscreenchange")}}</dt>
 <dd>文書が全画面モードに配置されたとき、または全画面モードを終了したときに {{DOMxRef("Document")}} に対して送信される {{Event("fullscreenchange")}} イベントのイベントハンドラーです。このハンドラーは文書全体が全画面モードで表示された時のみ呼び出されます。</dd>
 <dt>{{DOMxRef("Document.onfullscreenerror")}}</dt>
 <dd>文書全体に対して全画面モードを有効または無効にしようとした際にエラーが発生したとき、 {{DOMxRef("Document")}} に対して送信される {{Event("fullscreenerror")}} イベントのイベントハンドラーです。</dd>
</dl>

<h4 id="Event_handlers_on_elements" name="Event_handlers_on_elements">要素のイベントハンドラー</h4>

<dl>
 <dt>{{DOMxRef("Element.onfullscreenchange")}}</dt>
 <dd>要素が全画面モードに配置されたとき、または全画面モードを終了したときに要素に対して送信される {{Event("fullscreenchange")}} イベントのイベントハンドラーです。</dd>
 <dt>{{DOMxRef("Element.onfullscreenerror")}}</dt>
 <dd>要素が全画面モードに移行または終了しようとした際にエラーが発生したとき、要素に対して送信される {{Event("fullscreenerror")}} イベントのイベントハンドラーです。</dd>
</dl>

<h3 id="Obsolete_properties" name="Obsolete_properties">廃止されたプロパティ</h3>

<dl>
 <dt>{{DOMxRef("Document.fullscreen")}} {{Deprecated_Inline}}</dt>
 <dd>真偽値で、文書に現在全画面モードで表示されている要素があるのであれば <code>true</code>、 それ以外は <code>false</code> を返します。
 <div class="note"><strong>メモ:</strong> 代わりに {{DOMxRef("Document")}} または {{DOMxRef("ShadowRoot")}} の {{DOMxRef("Document.fullscreenElement", "fullscreenElement")}} プロパティを使用してください。これが <code>null</code> ではない場合、現在全画面モードで表示されている {{DOMxRef("Element")}} を表します。</div>
 </dd>
</dl>

<h2 id="Events" name="Events">イベント</h2>

<p><em>Fullscreen API は二つのイベントを定義しており、全画面モードに移行したときと終了したとき、また全画面モードとウィンドウモードを切り替える途中でエラーが発生したことを検出するために利用することができます。</em></p>

<dl>
 <dt>{{Event("fullscreenchange")}}</dt>
 <dd>全画面モードに移行したり、終了したりした時に、 {{DOMxRef("Document")}} または {{DOMxRef("Element")}} に対して送られます。</dd>
 <dt>{{Event("fullscreenerror")}}</dt>
 <dd>全画面モードに切り替えたり、終了したりした際にエラーが発生した時に、その <code>Document</code> または <code>Element</code> に対して送られます。</dd>
</dl>

<h2 id="Dictionaries" name="Dictionaries">Dictionary</h2>

<dl>
 <dt>{{DOMxRef("FullscreenOptions")}}</dt>
 <dd>{{DOMxRef("Element.requestFullscreen", "requestFullscreen()")}} を呼び出す時に指定することができる任意の設定を提供します。</dd>
</dl>

<h2 id="Controlling_access" name="Controlling_access">アクセス制御</h2>

<p>全画面モードが利用可能であるかは、<a href="/ja/docs/Web/HTTP/Feature_Policy">機能ポリシー</a>を使用して制御することができます。全画面モードの機能は <code>"fullscreen"</code> の文字列によって識別され、既定の許可リストの値は <code>"self"</code> であり、最上位の文書コンテキストでは全画面モードが許可されており、最上位文書と同じオリジンから読み込まれた内側の閲覧コンテキストも同様です。</p>

<p>機能ポリシーを使用して API へのアクセスを制御することについて、詳しくは<a href="/ja/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">機能ポリシーの使用</a>を参照してください。</p>

<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2>

<p>ユーザーは全画面モードを解除するのを、サイトやアプリがプログラム的に行うのを待つのではなく、 <kbd>ESC</kbd> または <kbd>F11</kbd> キーを押すことで抜けることを選択することができます。ユーザーインターフェイスの中で、これができることをユーザーに知らせるための適切なユーザーインターフェイス要素を、ユーザーインターフェイスのどこかで提供することを忘れないでください。</p>

<div class="note">
<p><strong>メモ:</strong> 全画面モードであるときに別のページへ移動する、タブを切り替える、あるいは別のアプリケーションに切り替える (例えば <kbd>Alt</kbd>-<kbd>Tab</kbd> を使用) と、同様に全画面モードを解除します。</p>
</div>

<h2 id="Example" name="Example">例</h2>

<p>この例では、ウェブページ内に動画が表示されます。 <kbd>Return</kbd> または <kbd>Enter</kbd> キーを押すと、動画をウィンドウ内表示と全画面表示とで切り替えることができます。</p>

<p><a href="/samples/domref/fullscreen.html">ライブデモを確認</a></p>

<h3 id="Watching_for_the_Enter_key" name="Watching_for_the_Enter_key">Enter キーの監視</h3>

<p>ページが読み込まれると、 <kbd>Enter</kbd> キーを監視するイベントリスナーを設定するコードが実行されます。</p>

<pre class="brush: js">document.addEventListener("keypress", function(e) {
  if (e.keyCode === 13) {
    toggleFullScreen();
  }
}, false);
</pre>

<h3 id="Toggling_full-screen_mode" name="Toggling_full-screen_mode">全画面モードの切り替え</h3>

<p>このコードは、ユーザーが <kbd>Enter</kbd> キーを押したときに呼び出されます。</p>

<pre class="brush: js">function toggleFullScreen() {
  if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen();
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
  }
}</pre>

<p>これは {{DOMxRef("Document", "document")}} の <code>fullscreenElement</code> 属性の値を確認することから始まります。現実の配信では現時点で、接頭辞付きのバージョン (例えば <code>mozFullscreenElement</code>, <code>msFullscreenElement</code>, <code>webkitFullscreenElement</code>) をチェックしたほうがいいでしょう。値が <code>null</code> である場合は、文書がウィンドウモードであるので、全画面モードへ切り替えることが必要です。 {{DOMxRef("Element.requestFullscreen()")}} を呼び出して、全画面モードへ切り替えます。</p>

<p>すでに全画面モードが有効である (<code>fullscreenElement</code> が <code>null</code> ではない) 場合は、 <code>document</code> の {{DOMxRef("Document.exitFullscreen()")}} を呼び出すことで、全画面モードを終了します。</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("Fullscreen")}}</td>
   <td>{{Spec2("Fullscreen")}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>

<h3 id="Document.fullscreen"><code>Document.fullscreen</code></h3>

<div>
<p>{{Compat("api.Document.fullscreen")}}</p>
</div>

<h3 id="Document.fullscreenEnabled"><code>Document.fullscreenEnabled</code></h3>

<div>
<p>{{Compat("api.Document.fullscreenEnabled")}}</p>
</div>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/Web/API/Fullscreen_API">全画面モードの使用</a></li>
 <li>{{DOMxRef("Element.requestFullscreen()")}}</li>
 <li>{{DOMxRef("Document.exitFullscreen()")}}</li>
 <li>{{DOMxRef("Document.fullscreen")}}</li>
 <li>{{DOMxRef("Document.fullscreenElement")}}</li>
 <li>{{CSSxRef(":fullscreen")}}, {{CSSxRef("::backdrop")}}</li>
 <li>{{HTMLAttrXRef("allowfullscreen", "iframe")}}</li>
</ul>