1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
---
title: XRSystem
slug: Web/API/XRSystem
tags:
- API
- AR
- Augmented Reality
- Experimental
- Interface
- Reference
- VR
- Virtual Reality
- WebXR
- WebXR Device API
- XR
- XRSystem
translation_of: Web/API/XRSystem
---
<p>{{APIRef("WebXR Device API")}}{{SecureContext_Header}}</p>
<p class="summary"><span class="seoSummary"><a href="/ja/docs/Web/API/WebXR_Device_API">WebXR Device API</a> の <strong><code>XRSystem</code></strong> インターフェイスは、WebXR セッションを表す {{domxref("XRSession")}} オブジェクトにアクセスできるようにするメソッドを提供します。 その <code>XRSession</code> が手元にあれば、それを使用して拡張現実（AR）または仮想現実（VR）デバイスと対話できます。</span></p>
<h2 id="Properties" name="Properties">プロパティ</h2>
<p><em><code>XRSystem</code> はプロパティを直接提供しませんが、親インターフェイスである {{domxref("EventTarget")}} からプロパティを継承します。</em></p>
<h2 id="Methods" name="Methods">メソッド</h2>
<p><em><code>XRSystem</code> インターフェイスには、親インターフェイスである {{domxref("EventTarget")}} からメソッドを継承することに加えて、次のメソッドが含まれています。</em></p>
<dl>
<dt>{{DOMxRef("XRSystem.isSessionSupported", "isSessionSupported()")}} {{Experimental_Inline}}</dt>
<dd>ブラウザーが指定された {{domxref("XRSessionMode")}} をサポートしている場合、<code>true</code> に解決される promise を返します。 指定されたモードをサポートしていない場合、<code>false</code> に解決されます。</dd>
<dt>{{DOMxRef("XRSystem.requestSession", "requestSession()")}} {{Experimental_Inline}}</dt>
<dd>指定された {{DOMxRef("XRSessionMode")}} を持つ新しい {{DOMxRef("XRSession")}} に解決される promise を返します。</dd>
</dl>
<h2 id="Events" name="Events">イベント</h2>
<dl>
<dt>{{domxref("XRSystem.devicechange_event", "devicechange")}} {{experimental_inline}}</dt>
<dd>使用可能な XR デバイスのセットが変更されたときに送信されます。<br>
{{domxref("XRSystem.ondevicechange", "ondevicechange")}} イベントハンドラーを使用することもできます。</dd>
</dl>
<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
<p>このインターフェイスは、以前のバージョンの仕様では単に <code>XR</code> と呼ばれていました。 コードや文書に <code>XR</code> への参照がある場合は、それを <code>XRSystem</code> に置き換えてください。</p>
<h2 id="Examples" name="Examples">例</h2>
<p>次の例は、{{domxref("XRSystem.isSessionSupported", "isSessionSupported()")}} と {{domxref("XRSystem.requestSession", "requestSession()")}} の両方を使用する方法を示しています。</p>
<pre class="brush: js; notranslate">if (navigator.xr) {
immersiveButton.addEventListener("click", onButtonClicked);
navigator.xr.isSessionSupported('immersive-vr')
.then((isSupported) => {
if (isSupported) {
immersiveButton.disabled = false;
} else {
immersiveButton.disabled = true;
}
});
}
function onButtonClicked() {
if (!xrSession) {
navigator.xr.requestSession('immersive-vr')
.then((session) => {
// onSessionStarted() not shown for reasons of brevity and clarity.
onSessionStarted(session);
});
} else {
// Shut down the already running XRSession
xrSession.end()
.then(() => {
// Since there are cases where the end event is not sent, call the handler here as well.
onSessionEnded();
});
}
}</pre>
<p>このコードは、{{domxref("navigator.xr")}} プロパティを探して、WebXR が使用可能かどうかを確認することから始まります。 見つかった場合は、WebXR が存在することがわかっているので、ユーザーがクリックして没入型 VR モードのオンとオフを切り替えることができるボタンのハンドラーを確立します。</p>
<p>ただし、目的の没入型モードが利用可能かどうかはまだわかりません。 これを決定するために、ボタン <code>immersiveButton</code> を有効にする前に、必要なセッションオプションを渡して <code>isSessionSupported()</code> を呼び出します。 これにより、ユーザーは、没入型 VR モードが使用可能な場合にのみ没入型モードに切り替えることができます。 没入型 VR が利用できない場合、ボタンを使用できないように無効しています。</p>
<p><code>onButtonClicked()</code> 関数は、実行中のセッションがすでに存在するかどうかを確認します。 存在しない場合は、<code>requestSession()</code> を使用して開始し、返された promise が解決したら、関数 <code>onSessionStarted()</code> を呼び出して、レンダリングなどのためにセッションを設定します。</p>
<p>一方、進行中の XR セッションがすでに存在する場合は、代わりに {{domxref("XRSession.end", "end()")}} を呼び出して現在のセッションを終了します。 現在のセッションが終了すると、{{domxref("XRSession.end_event", "end")}} イベントが送信されるので、そのハンドラーで <code>xrSession</code> を <code>null</code> に設定して、進行中のセッションがなくなったことを記録します。 そうすれば、ユーザーがボタンをもう一度クリックすることで、新しいセッションが開始されます。</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("WebXR", "#xrsystem-interface", "XRSystem")}}</td>
<td>{{Spec2("WebXR")}}</td>
<td>初期定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div>{{Compat("api.XRSystem")}}</div>
|
