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

---
title: WebVR API
slug: Web/API/WebVR_API
tags:
  - API
  - Deprecated
  - Experimental
  - Landing
  - Obsolete
  - Reference
  - VR
  - Virtual Reality
  - WebVR
translation_of: Web/API/WebVR_API
---
<p>{{DefaultAPISidebar("WebVR API")}}{{Deprecated_Header}}</p>

<div class="blockIndicator note"><strong>注:</strong> WebVR API は <a href="/ja/docs/Web/API/WebXR_API">WebXR API</a> に置き換えられました。 WebVR は標準として批准されることはなく、ごく少数のブラウザでしか既定で実装・有効化されず、少数の端末しか対応していませんでした。</div>

<p class="summary">WebVR は，バーチャルリアリティデバイス — 例えば Oculus Rift のようなヘッドマウントディスプレイ — をウェブアプリへ公開し，ヘッドマウントディスプレイの位置や動きを3D空間上の動きへと変換する手助けを行います．これによって，バーチャルな製品紹介やインタラクティブな訓練アプリといったものから超臨場感のファーストパーソン・シューティングゲームといったものまで，非常に面白い様々なアプリケーションをつくることができます．</p>

<h2 id="Concepts_and_usage" name="Concepts_and_usage">概念と利用方法</h2>

<p>コンピュータに接続されている VR 装置は {{DOMxRef("Navigator.getVRDisplays()")}} メソッドによって返されます。それぞれの装置は {{DOMxRef("VRDisplay")}} オブジェクトで表されます。</p>

<p><img alt='Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labelled "Position sensor"' src="https://mdn.mozillademos.org/files/11035/hw-setup.png" style="display: block; height: 78px; margin: 0px auto; width: 60%;"></p>

<p>{{DOMxRef("VRDisplay")}} VRDisplay は WebVR API の中心的なインターフェイスであり、そのプロパティとメソッドを介して、以下の機能にアクセスすることができます。</p>

<ul>
 <li>ディスプレイを識別するための有用な情報を取得し、ディスプレイにどのような機能があるのか、ディスプレイに関連付けられたコントローラなどを確認することができます。</li>
 <li>ディスプレイに表示したいコンテンツの各フレームの {{DOMxRef("VRFrameData", "frame data")}} を取得し、一貫したレートで表示するためにそれらのフレームを送信します。</li>
 <li>ディスプレイへの表示の開始と停止。</li>
</ul>

<p>典型的な (シンプルな) WebVR アプリは次のように動作します。</p>

<ol>
 <li>{{DOMxRef("Navigator.getVRDisplays()")}} を使用して VR ディスプレイの参照を取得します。</li>
 <li>{{DOMxRef("VRDisplay.requestPresent()")}} を使用して VR ディスプレイの表示を開始します。</li>
 <li>WebVR 専用の {{DOMxRef("VRDisplay.requestAnimationFrame()")}} メソッドを使用して、ディスプレイの正しいリフレッシュレートでアプリのレンダリングループを実行します。</li>
 <li>レンダリングループ内では、現在のフレームを表示するために必要なデータを取得し ({{DOMxRef("VRDisplay.getFrameData()")}})、表示されたシーンを 2 回 — それぞれの目の画像を1回ずつ描画し、レンダリングされたビューをディスプレイに送信してユーザーに表示します ({{DOMxRef("VRDisplay.submitFrame()")}})。</li>
</ol>

<p>また WebVR 1.1 では、 {{DOMxRef("Window")}} オブジェクトに多数のイベントが追加され、 JavaScript が表示状態の変化に対応できるようになっています。</p>

<div class="note">
<p><strong>Note</strong>: <a href="/ja/docs/Web/API/WebVR_API/Using_the_WebVR_API">WebVR API の使用</a>と <a href="/ja/docs/Web/API/WebVR_API/Concepts">WebVR の概念</a>の記事で、この API の使用方法がもっとわかります。</p>
</div>

<h3 id="API_availability" name="API_availability">API の可用性</h3>

<p>Web 標準として承認されることのなかった WebVR API は、標準化プロセスの終了に向けて順調に進んでいる <a href="/ja/docs/Web/API/WebXR_Device_API">WebXR API</a> に取って代わられて非推奨となりました。そのため、既存のコードを更新して、代わりに新しい API を使用するようにしてください。一般的には、移行はかなり苦痛のないものになるはずです。</p>

<p>さらに、端末やブラウザーによっては、 WebVR は HTTPS 接続を介して安全なコンテキストを使用してページをロードする必要があります。ページが完全に安全でない場合、 WebVR のメソッドや機能は利用できません。これは、 {{DOMxRef("Navigator")}} の {{DOMxRef("Navigator.getVRDisplays", "getVRDisplays()")}} メソッドが <code>NULL</code> であるかどうかを確認することで簡単にテストできます。</p>

<pre class="brush: js notranslate">if (!navigator.getVRDisplays) {
  console.error("WebVR is not available");
} else {
  /* WebVR を使用する */
}
</pre>

<h3 id="Using_controllers_Combining_WebVR_with_the_Gamepad_API" name="Using_controllers_Combining_WebVR_with_the_Gamepad_API">コントローラーの使用: WebVR と Gamepad API の組み合わせ</h3>

<p>多くの WebVR ハードウェアは、ヘッドセットと一緒に使用するコントローラーをセットアップします。これらは <a href="/ja/docs/Web/API/Gamepad_API">Gamepad API</a> を介して WebVR アプリで使用することができ、特に <a href="/ja/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">Gamepad Extensions API</a> は、コントローラーの<a href="/ja/docs/Web/API/GamepadPose">コントローラーのポーズ</a>や<a href="/ja/docs/Web/API/GamepadHapticActuator">触覚アクチュエーター</a>などにアクセスするための API 機能を追加します。</p>

<div class="note">
<p><strong>Note</strong>: <a href="/ja/docs/Web/API/WebVR_API/Using_the_WebVR_API">WebVR API の使用</a>の記事では、 WebVR アプリでの VR コントローラーの使い方の基本を解説しています。</p>
</div>

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

<dl>
 <dt>{{DOMxRef("VRDisplay")}}</dt>
 <dd>このAPIでサポートされているVRデバイスを表します．デバイスIDや説明など汎用的な情報や，VRシーンの表示を開始するためのメソッドや，両目のパラメータやディスプレイの対応機能を受け取るメソッド，その他の重要な機能のためのメソッドを含んでいます．</dd>
 <dt>{{DOMxRef("VRDisplayCapabilities")}}</dt>
 <dd>{{DOMxRef("VRDisplay")}} の利用可能な機能を示しています — この機能はVRデバイスで使える機能テストを実行するために使うことができ，例えば位置情報を返すことが可能かに使えます．</dd>
 <dt>{{DOMxRef("VRDisplayEvent")}}</dt>
 <dd>WebVR 関連イベントのイベントオブジェクトを表します (下記の {{anch("Window", "window オブジェクト拡張")}}を参照)。</dd>
 <dt>{{DOMxRef("VRFrameData")}}</dt>
 <dd>VR シーンの 1 フレームをレンダリングするために必要なすべての情報を表します。 {{DOMxRef("VRDisplay.getFrameData()")}} から構築されます。</dd>
 <dt>{{DOMxRef("VRPose")}}</dt>
 <dd>指定した時刻における位置の状態を表します（これには向き，位置，速度，加速度を含んでいます）．</dd>
 <dt>{{DOMxRef("VREyeParameters")}}</dt>
 <dd>指定した目に対応するシーンを正しくレンダリングするために必要となるすべての情報へのアクセスを提供します．これにはFOV情報を含まれています．</dd>
 <dt>{{DOMxRef("VRFieldOfView")}}</dt>
 <dd>中心点からの視界を記述する4つの異なる角度値で定義されるFOVを表します．</dd>
 <dt>{{DOMxRef("VRLayerInit")}}</dt>
 <dd> {{DOMxRef("VRDisplay")}} 内に表示されるレイヤを表します.</dd>
 <dt>{{DOMxRef("VRStageParameters")}}</dt>
 <dd>ルームスケール体験をサポートしているデバイスで，ステージエリアを示す値を表します．</dd>
</dl>

<h3 id="Extensions_to_other_interfaces" name="Extensions_to_other_interfaces">その他のインターフェイスの拡張</h3>

<p>The WebVR API extends the following APIs, adding the listed features.</p>

<h4 id="Gamepad">Gamepad</h4>

<dl>
 <dt>{{DOMxRef("Gamepad.displayId")}} {{readonlyInline}}</dt>
 <dd><dfn>関連付いている {{DOMxRef("VRDisplay")}} の {{DOMxRef("VRDisplay.displayId")}} を返します — その <code>VRDisplay</code> はゲームパッドが表示シーンのコントロールします．</dfn></dd>
</dl>

<h4 id="Navigator">Navigator</h4>

<dl>
 <dt>{{DOMxRef("Navigator.activeVRDisplays")}} {{readonlyInline}}</dt>
 <dd>現在表示されている（{{DOMxRef("VRDisplay.ispresenting")}} が <code>true の</code>）すべての {{DOMxRef("VRDisplay")}} オブジェクトを持つ配列を返します．</dd>
 <dt>{{DOMxRef("Navigator.getVRDisplays()")}}</dt>
 <dd>コンピュータに接続されている利用可能なVRデバイスを表す {{DOMxRef("VRDisplay")}} オブジェクトの配列へ解決する promiseを返します．</dd>
</dl>

<h4 id="Window_events" name="Window_events">Window イベント</h4>

<dl>
 <dt>{{DOMxRef("Window.onvrdisplaypresentchange")}}</dt>
 <dd>VRデバイスの表示状態が変更されたとき — すなわち，表示状態から非表示状態へ変化したときあるいはその逆（ {{event("onvrdisplaypresentchange")}} イベントが発行されたとき）に実行されるイベントハンドラを表します．</dd>
 <dt>{{DOMxRef("Window.onvrdisplayconnect")}}</dt>
 <dd>互換性のあるVRデバイスがコンピュータに接続されたとき（ {{event("vrdisplayconnect")}} イベントが発行されたとき）に実行されるイベントハンドラを表します．</dd>
 <dt>{{DOMxRef("Window.onvrdisplaydisconnect")}}</dt>
 <dd>互換性のあるVRデバイスがコンピュータから接続解除されたとき（ {{event("vrdisplaydisconnect")}} イベントが発行されたとき）に実行されるイベントハンドラを表します．</dd>
 <dt>{{DOMxRef("Window.onvrdisplayactivate")}}</dt>
 <dd>ディスプレイが表示できるようになったとき ({{event("vrdisplayactivate")}} イベントが発生したとき) に実行されるイベントハンドラーを表します。例えば、HMD を移動させて待機状態を解除した場合や、電源を入れたことで起動した場合などです。</dd>
 <dt>{{DOMxRef("Window.onvrdisplaydeactivate")}}</dt>
 <dd>ディスプレイが表示できなくなったとき ({{event("vrdisplaydeactivate")}} イベントが発生したとき) に実行されるイベントハンドラーを表します。例えば、HMD が一定期間使用されていなかったためにスタンバイモードやスリープモードになった場合などです。</dd>
 <dt>{{DOMxRef("Window.onvrdisplayblur")}}</dt>
 <dd>ブラウザ、OS、または VR ハードウェアによってディスプレイへの表示が何らかの理由で一時停止された場合 ({{event("vrdisplayblur")}} イベントが発生した場合) に実行されるイベントハンドラーを表します。例えば、ユーザーがシステムメニューやブラウザーと対話している間などに、トラッキングや体験の喪失を防ぐためです。</dd>
 <dt>{{DOMxRef("Window.onvrdisplayfocus")}}</dt>
 <dd>一時停止後に ({{event("vrdisplayfocus")}} イベントが発生したときに) ディスプレイへの提示が再開されたときに実行されるイベントハンドラーを表します。</dd>
</dl>

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

<p>次の Github リポジトリでいくつかの例を見つけられます。</p>

<ul>
 <li><a href="https://github.com/mdn/webvr-tests">webvr-tests</a>: 基本的な機能の使い方を示すためのシンプルなデモ。</li>
 <li><a href="https://github.com/facebook/Carmel-Starter-Kit">Carmel starter kit</a> — nice simple, well-commented examples that go along with Carmel, Facebook's WebVR browser.</li>
 <li><a href="https://webvr.info/samples/">WebVR.info samples</a> — slightly more in-depth examples plus source code</li>
 <li><a href="https://webvr.rocks/firefox#demos">WebVR.rocks Firefox demos</a> — showcase examples</li>
 <li><a href="https://aframe.io/">A-Frame homepage</a> — examples showing A-Frame usage</li>
</ul>

<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("GamepadExtensions")}}</td>
   <td>{{Spec2("GamepadExtensions")}}</td>
   <td><a href="/ja/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">Experimental Gamepad extensions</a> を定義。</td>
  </tr>
  <tr>
   <td>{{SpecName("WebVR 1.1")}}</td>
   <td>{{Spec2("WebVR 1.1")}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<h3 id="Navigator.getVRDisplays"><code>Navigator.getVRDisplays</code></h3>

<div>
<p>{{Compat("api.Navigator.getVRDisplays")}}</p>
</div>

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

<ul>
 <li><a href="https://vr.mozilla.org">vr.mozilla.org</a> — Mozilla VR team から提供されるデモ，ダウンロード，その他のリソース．</li>
 <li><a href="https://aframe.io/">A-Frame</a> — Open source web framework for building VR experiences.</li>
 <li><a href="https://webvr.info">webvr.info</a> — Up-to-date information about WebVR, browser setup, and community.</li>
 <li><a href="https://github.com/MozVR/vr-web-examples/tree/master/threejs-vr-boilerplate">threejs-vr-boilerplate</a> — A useful starter template for writing WebVR apps into.</li>
 <li><a href="https://github.com/googlevr/webvr-polyfill/">Web VR polyfill</a> — JavaScript implementation of WebVR.</li>
 <li><a href="https://www.supermedium.com">Supermedium</a> — A pure WebVR browser to easily access the best WebVR content.</li>
 <li><a href="http://webvr.directory/">WebVR Directory</a> — List of quality WebVR sites.</li>
</ul>