recursal/MDN huggingface dataset:
USBConfiguration
================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

WebUSB API の `USBConfiguration` インターフェイスは、USB デバイスの特定のコンフィギュレーションおよびそれがサポートするインターフェイスの情報を提供します。

コンストラクター
--------

`USBConfiguration()` 
Experimental

渡された `USBDevice` の指定のコンフィギュレーション番号のコンフィギュレーションの情報が格納された新しい `USBConfiguration` オブジェクトを生成します。

インスタンスプロパティ
-----------

`USBConfiguration.configurationValue` 読取専用  
Experimental

このコンフィギュレーションのコンフィギュレーション番号を返します。これはデバイスによって提供されたこのコンフィギュレーションを定義しているコンフィギュレーションディスクリプターの `bConfigurationValue` フィールドと一致します。

`USBConfiguration.configurationName` 読取専用  
Experimental

デバイスによって提供されたこのコンフィギュレーションを説明する名前を返します。これはこのコンフィギュレーションを定義しているコンフィギュレーションディスクリプターの `iConfiguration` フィールドで提供されるインデックスのストリングディスクリプターの値と一致します。

`USBConfiguration.interfaces` 読取専用  
Experimental

このコンフィギュレーションが対応しているそれぞれのインターフェイスを表す `USBInterface` のインスタンスが格納された配列を返します。

仕様書
---

| Specification |
| --- |
| WebUSB API # usbconfiguration-interface |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
RadioNodeList
=============

**`RadioNodeList`** インターフェイスは、`<form>` または `<fieldset>` 要素内にあるラジオボタン要素の集合を表します。

NodeList

RadioNodeListインスタンスプロパティ
-----------

*`RadioNodeList` インターフェイスには `NodeList` から継承したプロパティがあります。*

`RadioNodeList.value`

基盤となる要素の集合にラジオボタンが含まれている場合、`value` プロパティはチェック状態のラジオボタンを表します。`value` プロパティを取得すると、現在 `checked` 状態になっているラジオボタンの `value` が文字列として返されます。集合内にラジオボタンが含まれていなかったり、集合内のラジオボタンに `checked` 状態のものがなかったりした場合は、空文字列が返されます。`value` プロパティを設定すると、`value` プロパティが新しい値と等しい最初のラジオボタン入力要素が `checked` 状態に設定されます。

インスタンスメソッド
----------

*`RadioNodeList` インターフェイスには `NodeList` から継承したメソッドがあります。*

仕様書
---

| Specification |
| --- |
| HTML Standard # radionodelist |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<form>`、`<fieldset>`、`<input>` 要素
FileSystemWritableFileStream
============================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`File System Access API` の **`FileSystemWritableFileStream`** インターフェイスは、便利なメソッドが追加された `WritableStream` オブジェクトで、ディスク上の単一のファイルを扱います。このインターフェイスには `FileSystemFileHandle.createWritable()` メソッドを通じてアクセスします。

WritableStream

FileSystemWritableFileStreamインスタンスプロパティ
-----------

*親の `WritableStream` からプロパティを継承します。*

インスタンスメソッド
----------

*親の `WritableStream` からメソッドを継承します。*

`FileSystemWritableFileStream.write`

メソッドが呼ばれたファイルの現在のファイルカーソルオフセットにデータを書き込みます。

`FileSystemWritableFileStream.seek`

現在のファイルカーソルオフセットを指定の位置 (バイト単位) に移動します。

`FileSystemWritableFileStream.truncate`

ストリームに対応するファイルのサイズを指定のバイト数にします。

例
-

この非同期関数は「Save File」ピッカーを開き、このピッカーはファイルが選択されると `FileSystemFileHandle` を返します。そして、`FileSystemFileHandle.createWritable()` メソッドを用いて、このハンドルから書き込み可能なストリームを作成します。

その後、ユーザーが指定した `Blob` をストリームに書き込み、ストリームを閉じます。


```js
async function saveFile() {
  // 新しいハンドルを作成する
  const newHandle = await window.showSaveFilePicker();

  // 書き込み先の FileSystemWritableFileStream を作成する
  const writableStream = await newHandle.createWritable();

  // ファイルに書き込む
  await writableStream.write(imgBlob);

  // ファイルを閉じ、データをディスクに書き込む
  await writableStream.close();
}
```


以下では、`write()` メソッドに渡すことができる異なるオプションの例を示しています。


```js
// データだけを渡す (オプションなし)
writableStream.write(data);

// ストリームに指定の位置からデータを書き込む
writableStream.write({ type: "write", position, data });

// 現在のファイルカーソルオフセットを指定の位置に移動する
writableStream.write({ type: "seek", position });

// ファイルを size バイトにする
writableStream.write({ type: "truncate", size });
```

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemwritablefilestream |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files
IDBVersionChangeEvent
=====================

IndexedDB API の **`IDBVersionChangeEvent`** インターフェイスは、`onupgradeneeded` イベントハンドラー関数の結果として、データベースのバージョンが変更されたことを表します。

**注:** この機能は Web Worker 内で利用可能です

Event

IDBVersionChangeEventコンストラクター
--------

`IDBVersionChangeEvent()`

データベースのバージョンが変更されたことを表す新しい `IDBVersionChangeEvent` オブジェクトを作成して返します。

インスタンスプロパティ
-----------

*親の `Event` インターフェイスからもプロパティを継承します。*

`IDBVersionChangeEvent.oldVersion` 読取専用 

データベースの古いバージョンを返します。

`IDBVersionChangeEvent.newVersion` 読取専用 

データベースの新しいバージョンを返します。

インスタンスメソッド
----------

*固有のメソッドはありませんが、親の `Event` インターフェイスからメソッドを継承します。*

例
-

以下のコードスニペットでは、データベースを開く要求をし、成功した場合と失敗した場合用のハンドラーを用意します。バージョンが変更された時 (`upgradeneeded` イベントの後)、`success` イベントは `IDBVersionChangeEvent` インターフェイスを実装します。動く例全体は、To-do Notifications アプリケーションを参照してください。(動く例を見る)


```js
const note = document.querySelector("ul");

// 我々のデータベースのバージョン 4 を開きましょう
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

// これらの 2 個のイベントハンドラーは、データベースが正常に開かれた時と、そうでない時に動きます
DBOpenRequest.onerror = (event) => {
  note.innerHTML += "<li>データベースの読み込み中にエラーが発生しました。</li>";
};

DBOpenRequest.onsuccess = (event) => {
  note.innerHTML += "<li>データベースの初期化が完了しました。</li>";

  // データベースを開いた結果を変数 db に格納します。これは後で、トランザクションの開始などたくさん使います。
  const db = DBOpenRequest.result;
};
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # events |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* IndexedDB の使用
* トランザクションの開始: `IDBDatabase`
* トランザクションの使用: `IDBTransaction`
* キーの範囲の設定: `IDBKeyRange`
* データの取得と変更: `IDBObjectStore`
* カーソルの使用: `IDBCursor`
* リファレンス例: To-do Notifications (動く例を見る)
Permissions API
===============

**Permissions API** は、現在のコンテキストに起因する API のパーミッションの状態を照会するための一貫したプログラム方法を提供します。 例えば、Permissions API を使用して、特定の API にアクセスするためのパーミッションが付与（granted）または拒否（denied）されているかどうかを確認できます。

概念と使い方
------

歴史的に異なる API は独自のパーミッションを一貫性のない方法で扱います。 例えば、Notifications API はパーミッションの状態の明示的なチェックとパーミッションの要求を許可しますが、Geolocation API はできません（ユーザーが最初のパーミッションの要求を拒否すると問題を引き起こします）。 Permissions API は、パーミッションに関する限り、開発者がより良いユーザーエクスペリエンスを実装できるようにするためのツールを提供します。

`permissions` プロパティが `Navigator` オブジェクトで利用可能になり、標準の閲覧コンテキストとワーカーコンテキスト（`WorkerNavigator` — したがって、ワーカー内でパーミッションの確認が可能）の両方で、Permissions API 機能へのアクセスを提供する `Permissions` オブジェクトを返します。

このオブジェクトを取得した後は、`Permissions.query()` メソッドを使用して特定の API の `PermissionStatus` で解決される Promise を返すなど、パーミッション関連のタスクを実行できます。

Permissions API を使用してすべての API のパーミッションの状態を照会できるわけではありません。 Permissions に対応している注目すべき API は次のとおりです。

* Clipboard API
* Notifications API
* Push API
* Web MIDI API

今後、より多くの API が Permissions API のサポートを取得する予定です。

例
-

Location Finder という簡単な例を用意しました。 例をライブで実行するか、Github でソースコードを見ることができます。

それがどのように機能するかについてもっと読むには Permissions API の使用を見てください。

インターフェイス
--------

`Navigator.permissions` と `WorkerNavigator.permissions` 読取専用 

それぞれメインコンテキストとワーカーコンテキストから `Permissions` オブジェクトへのアクセスを提供します。

`Permissions`

パーミッションの照会や取り消しのためのメソッドなど、コアとなる Permission API 機能を提供します。

`PermissionStatus`

パーミッションの現在の状態、およびパーミッションの状態の変更に応答するためのイベントハンドラーへのアクセスを提供します。

仕様書
---

| Specification |
| --- |
| Permissions  |

ブラウザーの互換性
---------

### Permissions インターフェイス

### api.Permissions

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### api.Navigator.permissions

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### api.WorkerNavigator.permissions

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* Permissions API の使用
* Permissions API を使用して、ユーザーがカメラへのアクセスを許可または拒否する頻度を検出する（英語）
* `Notification.permission`
* プライバシー、パーミッション、そして情報セキュリティ
Clients
=======

**`Clients`** インターフェイスは、`Client` オブジェクトへのアクセスを提供します。 これは、サービスワーカー内で `self``.clients` を介してアクセスします。

メソッド
----

`Clients.get()`

指定された `id` に一致する `Client` の `Promise` を返します。

`Clients.matchAll()`

`Client` オブジェクトの配列の `Promise` を返します。 options 引数を使用すると、返されるクライアントの種類を制御できます。

`Clients.openWindow()`

指定された URL で新しいブラウザーウィンドウを開き、新しい `WindowClient` の `Promise` を返します。

`Clients.claim()`

アクティブなサービスワーカーが自身の `scope` 内のすべてのクライアントの `controller` として自分自身を設定できるようにします。

例
-

次の例は、ユーザーが通知をクリックしたときに既存のチャットウィンドウを表示するか、新しいチャットウィンドウを作成します。


```js
addEventListener("notificationclick", (event) => {
  event.waitUntil(
    (async () => {
      const allClients = await clients.matchAll({
        includeUncontrolled: true,
      });

      let chatClient;

      // チャットウィンドウが既に開いているかどうかを確認します。
      for (const client of allClients) {
        const url = new URL(client.url);

        if (url.pathname == "/chat/") {
          // よし、使ってみよう！
          client.focus();
          chatClient = client;
          break;
        }
      }

      // 既存のチャットウィンドウが見つからなかった場合、
      // 新しいウィンドウを開きます。
      if (!chatClient) {
        chatClient = await clients.openWindow("/chat/");
      }

      // クライアントにメッセージを送ります。
      chatClient.postMessage("新しいチャットメッセージ！");
    })(),
  );
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # clients-interface |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* サービスワーカーの使用
* サービスワーカーは利用できますか？（英語）
* `Promise`
VRDisplayCapabilities
=====================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`VRDisplayCapabilities`** は WebVR API のインターフェイスで、 `VRDisplay` の利用可能な機能を示しています。この機能は，例えば位置情報を返すことが可能か、といった VR 機器の動作可能テストに使うことができます。

**メモ:** このインターフェイスは古い WebVR API の一部でした。これは WebXR 機器 API に置き換えられました。

このインターフェイスには `VRDisplay.capabilities` プロパティを通じてアクセスできます．

プロパティ
-----

`VRDisplayCapabilities.canPresent` 
非推奨
 読取専用  
Non-standard

論理値で、VR ディスプレイが（例えば HMD を通じて）コンテンツを表示可能かどうかの状態を返します。

`VRDisplayCapabilities.hasExternalDisplay` 
非推奨
 読取専用  
Non-standard

論理値で、VR ディスプレイが端末の主ディスプレイから分離されているかどうかを返します。

`VRDisplayCapabilities.hasOrientation` 
非推奨
 読取専用  
Non-standard

論理値で、VR ディスプレイがトラッキング可能で向き情報を返すことができるかを返します。

`VRDisplayCapabilities.hasPosition` 
非推奨
 読取専用  
Non-standard

論理値で、VR ディスプレイがトラッキング可能で位置情報を返すことができるかどうかを返します。

`VRDisplayCapabilities.maxLayers` 
非推奨
 読取専用  
Non-standard

数値で、VR ディスプレイが同時に表示できる `VRLayerInit` の最大値を示す値を返します（例えば `VRDisplay.requestPresent()` が受け取ることのできる配列の最大長です。）

例
-


```js
function reportDisplays() {
  navigator.getVRDisplays().then((displays) => {
    displays.forEach((display, i) => {
      const cap = display.capabilities;
      // cap is a VRDisplayCapabilities object
      const listItem = document.createElement("li");
      listItem.innerHTML =
        `<strong>Display ${i + 1}</strong><br>` +
        `VR Display ID: ${display.displayId}<br>` +
        `VR Display Name: ${display.displayName}<br>` +
        `Display can present content: ${cap.canPresent}<br>` +
        `Display is separate from the computer's main display: ${cap.hasExternalDisplay}<br>` +
        `Display can return position info: ${cap.hasPosition}<br>` +
        `Display can return orientation info: ${cap.hasOrientation}<br>` +
        `Display max layers: ${cap.maxLayers}`;
      list.appendChild(listItem);
    });
  });
}
```

仕様書
---

このインターフェイスは古い WebVR API の一部であり、これは WebXR 機器 API で置き枯れられました。標準規格になる見込みはありません。

すべてのブラウザーが新しい WebXR API を実装するまで、 A-Frame、Babylon.js、Three.js などのフレームワークを使用するか、ポリフィルを使用することが、すべてのブラウザーで動作する WebXR アプリを開発する上で推奨されます。[1]

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* WebVR API
DedicatedWorkerGlobalScope
==========================

**`DedicatedWorkerGlobalScope`** オブジェクト（`Worker` グローバルスコープ）は、 `self` キーワードでアクセスできます。一部の追加のグローバル関数、名前空間オブジェクト、コンストラクターは、通常はワーカーのグローバルスコープに関連付けられていませんが、利用することができ、 JavaScript リファレンスに列挙されています。ワーカーで利用できる機能も参照してください。

EventTarget

WorkerGlobalScope

DedicatedWorkerGlobalScopeインスタンスプロパティ
-----------

*このインターフェイスは `WorkerGlobalScope`、またその親の `EventTarget` インターフェイスからプロパティを継承しています。*

`DedicatedWorkerGlobalScope.name` 読取専用 

`Worker` が `Worker()` コンストラクターを使用して作成されたときに、（オプションで）指定された名前です。これは主にデバッグのために使用されます。

### WorkerGlobalScope から継承したプロパティ

`WorkerGlobalScope.self`

`DedicatedWorkerGlobalScope` オブジェクト自身のオブジェクト参照を返します。

`WorkerGlobalScope.console` 読取専用 

このワーカーに関連付けられた `console` を返します。

`WorkerGlobalScope.location` 読取専用 

このワーカーに関連付けられた `WorkerLocation` を返します。 `WorkerLocation` は特化された location オブジェクトであり、閲覧スコープの `Location` のほぼサブセットですが、ワーカーに適合したものです。

`WorkerGlobalScope.navigator` 読取専用 

このワーカーに関連付けられた `WorkerNavigator` を返します。 `WorkerNavigator` は特化された navigator オブジェクトであり、閲覧スコープの `Navigator` のほぼサブセットですが、ワーカーに適合したものです。

`WorkerGlobalScope.performance` (en-US) 読取専用  
Non-standard

このワーカーに関連付けられた `Performance` オブジェクトを返します。これは通常の performance オブジェクトですが、利用できるプロパティやメソッドはサブセットです。

インスタンスメソッド
----------

*このインターフェイスは `WorkerGlobalScope`、またその親の `EventTarget` インターフェイスからメソッドを継承しています。*

`DedicatedWorkerGlobalScope.close()`

`WorkerGlobalScope` のイベントループでキューに入れられたタスクを破棄し、この特定のスコープを具体的に閉じます。

### WorkerGlobalScope から継承したもの

`WorkerGlobalScope.dump()` 
Non-standard

メッセージをコンソールに書き込みます。

`WorkerGlobalScope.importScripts()`

1 つ以上のスクリプトをワーカーのスコープにインポートします。カンマで区切っていくつでも指定することができます。例えば `importScripts('foo.js', 'bar.js');` のようにします。

### 他の場所から実装したもの

`atob()`

base-64 エンコードを使用してエンコードされている文字列をデコードします。

`btoa()`

バイナリーデータの文字列から、 base-64 でエンコードされた ASCII 文字列を作成します。

`clearInterval()`

`setInterval()` を使用して設定された繰り返し実行を取り消します。

`clearTimeout()`

`setTimeout()` を使用して設定された繰り返し実行を取り消します。

`setInterval()`

X ミリ秒ごとに関数を実行するようスケジューリングします。

`setTimeout()`

関数の実行の遅延を設定します。

イベント
----

`message`

ワーカーが親からメッセージを受け取ったときに発行されます。

`messageerror`

ワーカーがデシリアライズできないメッセージを受け取ったときに発行されます。

仕様書
---

| Specification |
| --- |
| HTML Standard # dedicated-workers-and-the-dedicatedworkerglobalscope-interface |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連項目
----

* `Worker`
* `WorkerGlobalScope`
* ウェブワーカーの使用
* ワーカーで使用できる関数
caches
======

 グローバルの **`caches`** 読み取り専用プロパティは、現在のコンテキストに関連付けられた `CacheStorage` オブジェクトを返します。
 このオブジェクトにより、オフライン利用のために資産 (assets) を保存したり、リクエストに対するカスタムレスポンスを生成したりするなどの機能を使用できます。

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

値
-

`CacheStorage` オブジェクト。

例
-

次の例では、資産をオフラインで利用できるようにするために、サービスワーカーのコンテキストでキャッシュを使う方法を示しています。


```js
this.addEventListener("install", (event) => {
  event.waitUntil(
    caches
      .open("v1")
      .then((cache) =>
        cache.addAll([
          "/",
          "/index.html",
          "/style.css",
          "/app.js",
          "/image-list.js",
          "/star-wars-logo.jpg",
          "/gallery/",
          "/gallery/bountyHunters.jpg",
          "/gallery/myLittleVader.jpg",
          "/gallery/snowTroopers.jpg",
        ]),
      ),
  );
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # self-caches |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* サービスワーカー
* ウェブワーカー
* `CacheStorage`
* `Cache`
ウェブ NFC API
===========

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

ウェブ NFC API では、 NFC によるデータ交換を軽量な NFC Data Exchange Format (NDEF) メッセージにて行うことができます。

**メモ:** デバイスやタグは、ウェブ NFC で使用するために NDEF レコード形式に対応するよう に特別にフォーマットし記録する必要があります。低レベルの操作は現在 API で対応していませんが、そのような機能を追加する API についての公開討論が行われています。

インターフェイス
--------

`NDEFMessage`

NDEF メッセージを表すインターフェイスであり、 `NDEFReader` オブジェクトを介して互換性のあるタグから受信したり、タグに送信したりすることができます。メッセージはメタデータと NDEF レコードから構成されます。

`NDEFReader`

互換性のある NFC タグからメッセージを読み書きできるようにするインターフェイスです。メッセージは `NDEFMessage` オブジェクトとして表現されます。

`NDEFRecord`

NDEF レコードを表すインターフェイスであり、 NDEF メッセージに含めることができます。

仕様書
---

| 仕様書 | 状態 | 備考 |
| --- | --- | --- |
| Web NFC | 草稿 |  |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
VRLayerInit
===========

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`VRLayerInit`** 辞書は WebVR API の辞書で、 VR ディスプレイに表示したいコンテンツレイヤー （`HTMLCanvasElement` または `OffscreenCanvas` (en-US)） を表します。

**メモ:** このインターフェイスは、古い WebVR API の一部でした。 WebXR Device APIに置き換えられました。

`VRLayerInit` オブジェクトは `VRDisplay.getLayers()` メソッドを使用して受ける取り、 `VRDisplay.requestPresent()` メソッドを使用して表示することができます。

プロパティ
-----

`VRLayerInit.leftBounds` 
非推奨

`VRDisplay` によって内容が表示されるキャンバスの左側のテクスチャ境界を定義します。

`VRLayerInit.rightBounds` 
非推奨

`VRDisplay` によって内容が表示されるキャンバスの右側のテクスチャ境界を定義します。

`VRLayerInit.source` 
非推奨

`VRDisplay.submitFrame()` が呼び出されたときに、 `VRDisplay` が表示するコンテンツを持つキャンバスを定義します。

例
-


```js
// currently returns an empty array
var layers = vrDisplay.getLayers();

if(navigator.getVRDisplays) {
  console.log('WebVR 1.1 supported');
  // Then get the displays attached to the computer
  navigator.getVRDisplays().then(function(displays) {
    // If a display is available, use it to present the scene
    if(displays.length > 0) {
      vrDisplay = displays[0];
      console.log('Display found');
      // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
      btn.addEventListener('click', function() {
        vrDisplay.requestPresent([{ source: canvas }]).then(function() {
          console.log('Presenting to WebVR display');

          // Here it returns an array of VRLayerInit objects
          var layers = vrDisplay.getLayers();

          ...
        });
      });
    }
  });
}
```


`VRLayerInit` オブジェクトは下記のように見えます。


```js
{
  leftBounds : [ ... ],
  rightBounds: [ ... ],
  source: canvasReference
}
```


**メモ:** `canvasReference` は `<canvas>` 要素そのものを指すものであり、キャンバスに関連付けられた WebGL コンテキストを指すわけではありません。他の 2 つのメンバーは配列です。

仕様書
---

このインターフェイスは、古い WebVR API の一部でしたが、 WebXR Device API に置き換えられました。標準化される予定はありません。

すべてのブラウザーが新しい WebXR API を実装するまで、すべてのブラウザーで動作する WebXR アプリケーションを開発するには、A-Frame や Babylon.js や Three.js などのフレームワークを利用したり、ポリフィルを利用したりすると良いでしょう [1]。

関連情報
----

* WebVR API
MIDIInput
=========

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

Web MIDI API の **`MIDIInput`** インターフェイスは、MIDI 入力ポートからメッセージを受信します。

EventTarget

MIDIPort

MIDIInputインスタンスプロパティ
-----------

*このインターフェイスは固有のプロパティを実装していませんが、`MIDIPort` からプロパティを継承しています。*

インスタンスメソッド
----------

*このインターフェイスは固有のメソッドを実装していませんが、`MIDIPort` からメソッドを継承しています。*

### イベント

`midimessage`

現在のポートが MIDI メッセージを受信した時発火します。

例
-

以下の例では、それぞれの `MIDIInput` の名前をコンソールに出力します。そして、すべての入力ポートで `midimessage` イベントを監視します。メッセージを受信したら、`MIDIMessageEvent.data` プロパティをコンソールに出力します。


```js
inputs.forEach((input) => {
  console.log(input.name); /\* MIDIPort から継承したプロパティ \*/
  input.onmidimessage = (message) => {
    console.log(message.data);
  };
});
```

仕様書
---

| Specification |
| --- |
| Web MIDI API # midiinput-interface |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Touch
=====

**`Touch`** インターフェイスは、タッチ感応面へのひとつの接触点を表します。接触点とは一般的に指やスタイラスと、タッチ画面やトラックパッドのような機器が触れた位置です。

`Touch.radiusX`、`Touch.radiusY`、`Touch.rotationAngle` により、ユーザーと画面が接触した*タッチ領域 (touch area)* を表します。これは指を使うような、精度が低いポインティングデバイスを扱う場合に役立ちます。これらの値は、接触した領域全体（ユーザの指先など）に可能な限り合う楕円を表すように設定されます

**メモ:** プロパティの値の多くは、ハードウェア依存です。例えば、表面を押さえる力を検出する手段を持たない機器では、`force` の値が常に 0 になるでしょう。これは `radiusX` や `radiusY` にもあてはまります。ハードウェアがひとつの点しか通知できない場合は、これらの値が 1 になるでしょう。

コンストラクター
--------

`Touch()`

Touch オブジェクトを作成します。

インスタンスプロパティ
-----------

*このインターフェイスには親がなく、ほかのプロパティを継承または実装していません。*

### 基本プロパティ

`Touch.identifier` 読取専用 

`Touch` オブジェクトの一意な識別子を返します。あるタッチ点（指などによる）は表面を移動している間、同じ識別子を持ち続けます。これにより、同一のタッチを確実に終始追跡することができます。

`Touch.screenX` 読取専用 

画面の左端に対する、タッチ点の X 座標を返します。

`Touch.screenY` 読取専用 

画面の上端に対する、タッチ点の Y 座標を返します。

`Touch.clientX` 読取専用 

スクロールによるオフセットを含まない、ブラウザのビューポートの左端に対する、タッチ点の X 座標を返します。

`Touch.clientY` 読取専用 

スクロールによるオフセットを含まない、ブラウザのビューポートの上端に対する、タッチ点の Y 座標を返します。

`Touch.pageX` 読取専用 

文書の左端に対する、タッチ点の X 座標を返します。水平スクロールによるオフセットがある場合は、それを含むことが `clientX` と異なります。

`Touch.pageY` 読取専用 

文書の上端に対する、タッチ点の Y 座標を返します。垂直スクロールによるオフセットがある場合は、それを含むことが `clientY` と異なります。

`Touch.target` 読取専用 

タッチ点がタッチ面で最初に触れた位置にある `Element` を返します。タッチ点が要素の対話エリアの外に移動したり、文書上に存在しなくなっても同様です。

### タッチ領域

`Touch.radiusX` 読取専用 

画面に触れた領域にもっとも接近して囲むような、楕円の X 方向の半径を返します。この値は、`screenX` と同じ尺度のピクセル数で表します。

`Touch.radiusY` 読取専用 

画面に触れた領域にもっとも接近して囲むような、楕円の Y 方向の半径を返します。この値は、`screenY` と同じ尺度のピクセル数で表します。

`Touch.rotationAngle` 読取専用 

ユーザがタッチ面に触れた領域をもっとも正確に覆うために、radiusX および radiusY で表す楕円を時計回りに回転すべき角度（単位は度 (degree)）を返します。

`Touch.force` 読取専用 

ユーザがタッチ面に与えた圧力を、`0.0` (最小圧力) から `1.0` (最大圧力) の間の `float` で返します。

インスタンスメソッド
----------

*このインターフェイスにはメソッドがなく、親もないのでメソッドを継承または実装していません。*

仕様書
---

| Specification |
| --- |
| Touch Events # touch-interface |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* タッチイベント
* `Document.createTouch()`
MutationObserver
================

`MutationObserver` インターフェイスは、 DOM ツリーへ変更が加えられたことを監視することができる機能を提供します。これは DOM3 Events の仕様で定義されていた Mutation Events 機能の置き換えとして設計されたものです。

コンストラクター
--------

`MutationObserver()`

DOM の変更が行われたときに指定されたコールバック関数を呼び出す新しい `MutationObserver` を生成して返します。

メソッド
----

`disconnect()`

`MutationObserver` のインスタンスが今後の通知を受け取ることを、 `observe()` が再び呼び出されるまで停止します。

`observe()`

指定したオプションに合う DOM の変更が発生したときに、コールバック関数を介して通知を受信し始めるように `MutationObserver` を構成します。

`takeRecords()`

`MutationObserver` の通知キューから保留中の通知をすべて削除し、 `MutationRecord` の新しい配列 (`Array`) で返します。

Mutation Observer と resize イベントリスナーのカスタマイズとデモ
---------------------------------------------

https://codepen.io/webgeeker/full/YjrZgg/

例
-

以下の例は このブログ記事 を参考にしたものです。


```js
// 変更を監視するノードを選択
const targetNode = document.getElementById("some-id");

// (変更を監視する) オブザーバーのオプション
const config = { attributes: true, childList: true, subtree: true };

// 変更が発見されたときに実行されるコールバック関数
const callback = function (mutationsList, observer) {
  // Use traditional 'for loops' for IE 11
  for (const mutation of mutationsList) {
    if (mutation.type === "childList") {
      console.log("A child node has been added or removed.");
    } else if (mutation.type === "attributes") {
      console.log("The " + mutation.attributeName + " attribute was modified.");
    }
  }
};

// コールバック関数に結びつけられたオブザーバーのインスタンスを生成
const observer = new MutationObserver(callback);

// 対象ノードの設定された変更の監視を開始
observer.observe(targetNode, config);

// その後で、監視を停止することができる
observer.disconnect();
```

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-mutationobserver |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `PerformanceObserver`
* `ResizeObserver`
* `IntersectionObserver`
* A brief overview
* A more in-depth discussion
* A screencast by Chromium developer Rafael Weinstein
GPUAdapterInfo
==============

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

WebGPU API の **`GPUAdapterInfo`** インターフェイスには、`GPUAdapter` に関する特定用の情報が格納されています。

`GPUAdapterInfo` オブジェクトのインスタンスは、`GPUAdapter.requestAdapterInfo()` メソッドを用いて要求できます。

インスタンスプロパティ
-----------

`architecture` 
Experimental
 読取専用 

アダプターが属している GPU のファミリーまたはクラスの名前です。取得できない場合は空文字列を返します。

`description` 
Experimental
 読取専用 

アダプターを表現する人間に読める文字列です。取得できない場合は空文字列を返します。

`device` 
Experimental
 読取専用 

アダプターのベンダー固有の識別子です。取得できない場合は空文字列を返します。

`vendor` 
Experimental
 読取専用 

アダプターのベンダーの名前です。取得できない場合は空文字列を返します。

例
-


```js
async function init() {
  if (!navigator.gpu) {
    throw Error("WebGPU に対応していません。");
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error("WebGPU アダプターを要求できませんでした。");
  }

  const adapterInfo = await adapter.requestAdapterInfo();
  console.log(adapterInfo.architecture);
  console.log(adapterInfo.vendor);

  // ...
}
```

仕様書
---

| Specification |
| --- |
| WebGPU # gpu-adapterinfo |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* WebGPU API