recursal/MDN huggingface dataset:
ContactsManager.select()
========================

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

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

**`select()`** は `ContactsManager` インターフェイスのメソッドで、プロミス (`Promise`) を返し、解決されると、共有したい連絡先を選択できる連絡先ピッカーがユーザーに表示されます。このメソッドでは、 `Promise` が解決するためにユーザーのジェスチャーが必要です。

構文
--


```js
select(properties)
select(properties, options)
```

### 引数

`properties`

文字列の配列で、連絡先からどの情報を受け取るかを定義します。許可されている値は次の通りです。

* `'name'`: 連絡先の名前。
* `'tel'`: 連絡先の電話番号。
* `'email'`: 連絡先のメールアドレス。
* `'address'`: 連絡先の住所。
* `'icon'`: 連絡先のアバター。

`options` 省略可

オプションは以下のとおりです。

`multiple`

複数の連絡先を選択できるようにするかどうかの論理値。既定値では `false` です。


### 返値

連絡先情報を格納したオブジェクトの配列で解決する `Promise` を返します。各オブジェクトは、それぞれ単一の連絡先を表し、以下のプロパティを格納する可能性があります。

`address`

それぞれ固有の物理的な住所の詳細を格納した `ContactAddress` オブジェクトの `Array` です。

`email`

メールアドレスを格納した文字列の配列です。

`icon`

個人の画像を格納した `Blob` オブジェクトの配列です。

`name`

文字列の配列で、それぞれが固有の個人名です。

`tel`

文字列の配列で、それぞれが個人の固有の電話番号です。

### 例外

`InvalidStateError` `DOMException`

閲覧コンテキストが最上位でない場合、または連絡先ピッカーがフラグを表示している場合に返されます。フラグは既に存在する連絡先ピッカーを表します。ピッカーは常に 1 つだけ存在できます。

`SecurityError` `DOMException`

このメソッドがユーザーの操作によって起動していない場合に返されます。

`TypeError`

`properties` が空の場合、または指定されたプロパティのいずれかが対応していない場合に返されます。

例
-

### 基本的な例

以下の例では、それぞれの連絡先に対して取得するプロパティの配列を設定し、また、複数の連絡先を選択できるようにオプションオブジェクトを設定しています。

次に、`select()` メソッドを使用して、ユーザーに連絡先ピッカーインターフェイスを表示し、選択された結果を処理する非同期関数を定義しています。 `handleResults()` は開発者が定義する関数です。


```js
const props = ["name", "email", "tel", "address", "icon"];
const opts = { multiple: true };

async function getContacts() {
  try {
    const contacts = await navigator.contacts.select(props, opts);
    handleResults(contacts);
  } catch (ex) {
    // Handle any errors here.
  }
}
```

### 対応しているプロパティのみを使用して選択

以下の例では `getProperties()` を使用し、対応しているプロパティのみが渡されるようにしています。そうしないと、 `select()` で `TypeError` が発生する可能性があるからです。 `handleResults()` は開発者が定義した関数です。


```js
const supportedProperties = await navigator.contacts.getProperties();

async function getContacts() {
  try {
    const contacts = await navigator.contacts.select(supportedProperties);
    handleResults(contacts);
  } catch (ex) {
    // Handle any errors here.
  }
}
```

仕様書
---

| Specification |
| --- |
| Contact Picker API # contacts-manager-select |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ContactsManager.getProperties()
===============================

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

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

**`getProperties()`** は `ContactsManager` インターフェイスのメソッドで、プロミス (`Promise`) を返します。これは、どの連絡先プロパティが利用できるかを示す文字列の配列 (`Array`) で解決します。

構文
--


```js
getProperties()
```

### 引数

このメソッドは引数を受け取りません。

### 返値

プロミス (`Promise`) を返します。これは、どの連絡先プロパティが利用できるかを示す文字列の配列 (`Array`) で解決します。

プロパティには、以下のものを含めることができます。

* `'name'`: 連絡先の名前。
* `'tel'`: 連絡先の電話番号。
* `'email'`: 連絡先のメールアドレス。
* `'address'`: 連絡先の住所。
* `'icon'`: 連絡先のアバター。
### 例外

発生する例外はありません。

例
-

### プロパティの対応を確認

以下の非同期関数は `getProperties()` メソッドを使用して、現在のシステムが `icon` プロパティに対応しているかどうかを調べています。


```js
async function checkProperties() {
  const supportedProperties = await navigator.contacts.getProperties();
  if (!supportedProperties.includes("icon")) {
    console.log("Your system does not support getting icons.");
  }
}
```

### 対応しているプロパティのみを使用して選択

以下の例は `select()` メソッドと似ています。 `select()` に渡されるプロパティをハードコーディングする代わりに、 `getProperties()` を使用して、対応しているプロパティのみが渡されるようにします。そうでない場合、 `select()` は `TypeError` を発生させるかもしれません。 `handleResults()` は開発者が定義した関数です。


```js
const supportedProperties = await navigator.contacts.getProperties();

async function getContacts() {
  try {
    const contacts = await navigator.contacts.select(supportedProperties);
    handleResults(contacts);
  } catch (ex) {
    // Handle any errors here.
  }
}
```

仕様書
---

| Specification |
| --- |
| Contact Picker API # contacts-manager-getproperties |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
移譲可能オブジェクト
==========

**移譲可能オブジェクト** (Transferable objects) は、あるコンテキストから別のコンテキストへ *移譲* することができるリソースを自分自身で所有するオブジェクトで、そのリソースが一度に 1 つのコンテキストでのみ利用できることを保証するものです。
 移譲が終わると、元のオブジェクトは使えなくなります。移譲されたリソースをもう指しておらず、オブジェクトの読み書きをしようとすると例外が発生します。

 移譲可能なオブジェクトは一般的に、一度に単一のJavaScriptスレッドにしか安全に公開されないリソースを共有するために使用されます。
 例えば、`ArrayBuffer` はメモリーブロックを自分自身で所有する移譲可能なオブジェクトです。
 このようなバッファーがスレッド間で移譲されるとき、関連するメモリーリソースは元のバッファーから切り離され、新しいスレッドで作成されたバッファーオブジェクトに装着されます。
 元のスレッドのバッファーオブジェクトは、もはやメモリリソースを所有していないため、使用できなくなります。

 移譲は `structuredClone()` でオブジェクトのディープコピーを作成するときにも使用されるかもしれません。
 複製操作の後に、移譲されたリソースは、コピーされたオブジェクトにコピーされるのではなく、移動されます。

 オブジェクトのリソースを移譲するために使用されるメカニズムは、オブジェクトに依存します。
 例えば、 `ArrayBuffer` がスレッド間で移譲されるとき、それが指すメモリーリソースは高速で効率の良いゼロコピー操作により、文字通りコンテキスト間で移動されます。
 他にも、関連するリソースをコピーして、古いコンテキストから削除することで、オブジェクトを移譲することができる場合もあります。

 すべてのオブジェクトが移譲可能なわけではありません。
 移譲可能なオブジェクトの一覧は下記の通りです。

オブジェクトのスレッド間の移譲
---------------

 以下のコードは、メインスレッドからウェブワーカースレッドにメッセージを送信する際に、移譲がどのように動作するのかを示しています。
 `Uint8Array` は、バッファーが移譲されている間、ワーカー内でコピーされます（複製されます）。
 移譲後、メインスレッドから `uInt8Array` を読み書きしようとするとエラーが発生しますが、`byteLength` を調べるとゼロになったことが確認できます。


```js
// 8MB の "file" を作成して中身を埋めます。 8MB = 1024 \* 1024 \* 8 B
const uInt8Array = new Uint8Array(1024 \* 1024 \* 8).map((v, i) => i);
console.log(uInt8Array.byteLength); // 8388608

// 下層のバッファーからワーカーに移譲する
worker.postMessage(uInt8Array, [uInt8Array.buffer]);
console.log(uInt8Array.byteLength); // 0
```


**メモ:** 型付き配列 `Int32Array` や `Uint8Array` はシリアライズ可能ですが、移譲は行えません。
 しかし、その下にあるバッファーは `ArrayBuffer` であり、これは移譲可能なオブジェクトです。
 data 引数に `uInt8Array.buffer` を設定すれば、移譲する配列に `uInt8Array` がなくても、送ることができます。


### 複製操作中の移譲について

以下のコードは、 `structuredClone()` 操作で、基礎となるバッファーが元のオブジェクトから複製にコピーされる様子を示しています。


```js
const original = new Uint8Array(1024);
const clone = structuredClone(original);
console.log(original.byteLength); // 1024
console.log(clone.byteLength); // 1024

original[0] = 1;
console.log(clone[0]); // 0

// Uint8Array を移譲すると、移譲可能なオブジェクトではないため、例外が発生します。
// const transferred = structuredClone(original, {transfer: [original]});

// Uint8Array.buffer ならば移譲できます。
const transferred = structuredClone(original, { transfer: [original.buffer] });
console.log(transferred.byteLength); // 1024
console.log(transferred[0]); // 1

// Uint8Array.buffer は移譲した後は使用することができません。
console.log(original.byteLength); // 0
```

対応しているオブジェクト
------------

各種仕様書が示す移譲可能な項目は以下の通りです。

* `ArrayBuffer`
* `MessagePort`
* `ReadableStream`
* `WritableStream`
* `TransformStream`
* `AudioData` (en-US)
* `ImageBitmap`
* `VideoFrame` (en-US)
* `OffscreenCanvas` (en-US)
* `RTCDataChannel`

 ブラウザーの対応は、それぞれのオブジェクトの互換性情報の `transferable` サブ機能で示す必要があります（例として `RTCDataChannel` を参照してください）。
 この記事を書いている時点では、すべての移譲可能なオブジェクトでこの情報が更新されているわけではありません。

**メモ:** 移譲可能なオブジェクトは Web IDL ファイル の中で `[Transferable]` という属性でマークアップされています。

関連情報
----

* Transferable Objects: Lightning Fast!
* ウェブワーカーの使用
* Transferable objects in the HTML specification
* `DedicatedWorkerGlobalScope.postMessage()`
ウェブワーカーが使用できる関数やクラス
===================

標準的な JavaScript の関数群（`String`、`Array`、`Object`、`JSON` など）に加えて、DOM からワーカーに利用できる様々な関数があります。この記事ではそれらの機能のリストを提供します。

ワーカーのコンテキストと関数
--------------

**ワーカーは、現在のウィンドウとは異なるグローバルコンテキストで実行されます。** `Window` はワーカーでは直接使用することができませんが、共通のミックスイン (`WindowOrWorkerGlobalScope`) で定義されている同じメソッドの多くが利用でき、 `WorkerGlobalScope` から派生した以下のようなコンテキストからワーカーが利用できます。

* `DedicatedWorkerGlobalScope` （専用ワーカー向け）
* `SharedWorkerGlobalScope` （共有ワーカー向け）
* `ServiceWorkerGlobalScope` （サービスワーカー向け）

すべてのワーカーとメインスレッドで共通の関数には（`WindowOrWorkerGlobalScope` にあるもの）には、 `atob()`, `btoa()`, `clearInterval()`, `clearTimeout()`, `dump()` 
Non-standard
, `setInterval()`, `setTimeout()` などがあります。

以下の機能は、ワーカーで**のみ**使用することができます。

* `WorkerGlobalScope.importScripts()` （すべてのワーカー）
* `DedicatedWorkerGlobalScope.postMessage` （専用ワーカーのみ）
ワーカーで使用できる API
--------------

**メモ:** 掲載されている API に特定のバージョンのプラットフォームが対応している場合、一般にウェブワーカーで動作するとみなすことができます。

以下の Web API はワーカーで利用することができます。 `Broadcast Channel API`, `Cache API`, `Channel Messaging API`, `Console API`, `Crypto`, `CustomEvent`, `DOMRequest` と `DOMCursor`, `Fetch`, `FileReader`, `FileReaderSync` (only works in workers!), `FormData`, `ImageData`, `IndexedDB`, ネットワーク情報 API, 通知, `Performance`, `PerformanceEntry`, `PerformanceMeasure`, `PerformanceMark`, `PerformanceObserver`, `PerformanceResourceTiming`, `Promise`, サーバー送信イベント, `ServiceWorkerRegistration`, `TextEncoder` と `TextDecoder`, `URL`, WebGL と `OffscreenCanvas` (en-US), `WebSocket`, `XMLHttpRequest` （ただし `responseXML` および `channel` 属性は常に null）。

ワーカーは他のワーカーを起動することもできるため、 `Worker`, `WorkerGlobalScope`, `WorkerLocation`, `WorkerNavigator` の各 API も利用することができます。

関連情報
----

* ウェブワーカーの使用
* `Worker`
構造化複製アルゴリズム
===========

**構造化複製アルゴリズム** は複雑な JavaScript オブジェクトをコピーするためのアルゴリズムです。これは `postMessage()` を介してワーカーと送受信するとき、 IndexedDB にオブジェクトを格納するとき、他の API のためにオブジェクトをコピーするときなど、データ転送時に内部で用いられています。

無限ループを避けるため、以前にアクセスした参照のマップを保持しながら、入力オブジェクトを再帰処理することで複製していきます。

構造化複製で動作しないもの
-------------

* `Function` オブジェクトは構造化複製アルゴリズムでは複製されません。複製しようとすると `DataCloneError` 例外が発生します。
* DOM ノードを複製するときも同様に `DataCloneError` 例外発生します。
* 一部のオブジェクトのプロパティは保持されません。
    + `RegExp` オブジェクトの `lastIndex` フィールドは保持されません。
    + プロパティ記述子、セッター、ゲッター（もしくは同様のメタデータ系機能）は複製されません。
     たとえば、あるオブジェクトがプロパティ記述子によって読み取り専用になっている場合でも、複製したものでは既定の条件である読み取り/書き込みに変わります。
    + プロトタイプチェーンは探索、複製されません。
対応済みの型
------

| オブジェクト型 | 備考 |
| --- | --- |
| すべてのプリミティブ型 | ただし、シンボルを除く |
| `Boolean` オブジェクト |  |
| `String` オブジェクト |  |
| `Date` |  |
| `RegExp` | `lastIndex` は保持されません。 |
| `Blob` |  |
| `File` |  |
| `FileList` |  |
| `ArrayBuffer` |  |
| `TypedArray` |  |
| `DataView` |  |
| `ImageBitmap` |  |
| `ImageData` |  |
| `Array` |  |
| `Object` | プレーンなオブジェクト（オブジェクトリテラルなど）**のみ**です。 |
| `Map` |  |
| `Set` |  |
| `DOMException` | 
 ブラウザーは、プロパティ `name` と `message` をシリアライズしなければなりません。
 他の属性もシリアライズ/複製することができます。
  |
| ネイティブの `Error` 型 | エラー名は、 `Error`, `EvalError`, `RangeError`, `ReferenceError`, `SyntaxError`, `TypeError`, `URIError` （または "Error" に設定）の何れかでなければなりません。
ブラウザーは `name` および `message` プロパティをシリアライズしなければならず、 `stack`, `cause` などのエラーの他の「興味深い」プロパティをシリアライズすることが期待されています。
`AggregateError` の対応が whatwg/html#5749 で仕様書に追加される予定です（そして、既に一部のブラウザーが対応しています）。 |

関連情報
----

* HTML Specification: Safe passing of structured data
* Transferable objects
* `structuredClone()`
* `window.history`
* `window.postMessage()`
* ウェブワーカー
* IndexedDB
MediaCapabilitiesInfo
=====================

Media Capabilities API (en-US) の **`MediaCapabilitiesInfo`** インターフェイスは、`MediaCapabilities` (en-US) インターフェイスの `MediaCapabilities.encodingInfo()` メソッドまたは `MediaCapabilities.decodingInfo()` (en-US) メソッドによって返される promise が満たされると使用可能になり、メディアタイプがサポートされているかどうかや、そのようなメディアのエンコードまたはデコードがスムーズで電力効率が良いかどうかに関する情報を提供します。

プロパティ
-----

`MediaCapabilitiesInfo` インターフェイスには、次の 3 つの Boolean 属性が含まれています。

* `supported`: `MediaConfiguration` で定義されたプロパティを指定すると、指定されたメディアコンテンツをエンコード（`MediaEncodingConfiguration` (en-US) が設定されている場合）またはデコード（`MediaDecodingConfiguration` (en-US) が設定されている場合）できますか？ はいの場合、`supported` は *true* になり、そうでない場合、*false* になります。
* `smooth`: `MediaConfiguration` で定義されたプロパティを指定すると、指定されたメディアの再生は高品質になりますか？ スムーズになりますか？ `supported` が `true` で、再生がスムーズになる場合、`smooth` は *true* になり、そうでない場合、*false* になります。
* `powerEfficient`: `MediaConfiguration` で定義されたプロパティを指定すると、指定されたメディアの再生は電力効率が良くなりますか？ `supported` が `true` で、再生の電力効率が良い場合、`powerEfficient` は *true* になり、そうでない場合、*false* になります。

ブラウザーは、このデバイスの統計情報が記録されるまで、サポートしているメディア構成を `smooth` で `powerEfficient` として報告します。 サポートしているすべての音声コーデックは、電力効率が良いと報告されます。

例
-


```js
// テストする MediaConfiguration
const mediaConfig = {
    type : 'file',
    audio : {
        contentType : "audio/ogg",
        channels : 2,
        bitrate : 132700,
        samplerate : 5200
     },
};

// サポートとパフォーマンスを確認する
navigator.mediaCapabilities.decodingInfo(mediaConfig).then(result => { // result にはメディア能力情報が含まれます
    console.log('この構成は、サポート' +
        (result.supported ? 'され' : 'されておらず') + 、スムーズ' +   // 構成されたメディアは、ユーザーエージェントによってデコードできますか
        (result.smooth ? 'であり' : 'でなく') + '、電力効率' +         // スムーズですか？
        (result.powerEfficient ? 'に優れています' : 'が良くありません') + '。') // 電力効率は良いですか？
});
```

仕様
--

| Specification |
| --- |
| Media Capabilities # ref-for-dom-mediacapabilities-encodinginfo |

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

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

関連情報
----

* `MediaConfiguration`
* `MediaCapabilities.encodingInfo()`
* `MediaCapabilities.decodingInfo()` (en-US)
CSSRule: type プロパティ
===================

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

**`type`** は `CSSRule` インターフェイスの読み取り専用プロパティで、非推奨です。この `CSSRule` が表すルールの型を示す整数を返します。

様々な CSS ルールの型を見分ける必要がある場合は、 `constructor.name` を使用するのが良い代替手段です。


```js
const sheets = Array.from(document.styleSheets);
const rules = sheets.map((sheet) => Array.from(sheet.cssRules)).flat();

for (const rule of rules) {
  console.log(rule.constructor.name);
}
```

値
-

`CSSRule.STYLE_RULE` (`1`)

このルールは `CSSStyleRule` で、 `selector { prop1: val1; prop2: val2; }` のような最も一般的な種類のルールです。

`CSSRule.IMPORT_RULE` (`3`)

このルールは `CSSImportRule` で、 `@import` ルールを表します。

`CSSRule.MEDIA_RULE` (`4`)

このルールは `CSSMediaRule` です。

`CSSRule.FONT_FACE_RULE` (`5`)

このルールは `CSSFontFaceRule` です。

`CSSRule.PAGE_RULE` (`6`)

このルールは `CSSPageRule` です。

`CSSRule.KEYFRAMES_RULE` (`7`)

このルールは `CSSKeyframesRule` です。

`CSSRule.KEYFRAME_RULE` (`8`)

このルールは `CSSKeyframeRule` です。

`CSSRule.NAMESPACE_RULE` (`10`)

このルールは `CSSNamespaceRule` です。

`CSSRule.COUNTER_STYLE_RULE` (`11`)

このルールは `CSSCounterStyleRule` (en-US) です。

`CSSRule.SUPPORTS_RULE` (`12`)

このルールは `CSSSupportsRule` です。

`CSSRule.DOCUMENT_RULE` (`13`)

このルールは `CSSDocumentRule` です。

`CSSRule.FONT_FEATURE_VALUES_RULE` (`14`)

このルールは `CSSFontFeatureValuesRule` (en-US) です。

`CSSRule.VIEWPORT_RULE` (`15`)

このルールは `CSSViewportRule` です。

`CSSRule.REGION_STYLE_RULE` (`16`)

このルールは `CSSRegionStyleRule` です。

`CSSRule.UNKNOWN_RULE` (`0`) と `CSSRule.CHARSET_RULE` (`2`) は非推奨であり、受け取ることはできません。

例
-


```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].type);
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # concept-css-rule-type |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSRule: parentStyleSheet プロパティ
===============================

**`parentStyleSheet`** は `CSSRule` インターフェイスのプロパティで、現在のルールを定義している `StyleSheet` オブジェクトを返します。

値
-

`StyleSheet` オブジェクトです。

例
-


```js
const docRules = document.styleSheets[0].cssRules;
console.log(docRules[0].parentStyleSheet == document.styleSheets[0]); // returns true
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssrule-parentstylesheet |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSRule: cssText プロパティ
======================

**`cssText`** は `CSSRule` インターフェイスのプロパティで、 `CSSStyleSheet` スタイルルールの実際のテキストを返します。

**メモ:** このプロパティを要素のスタイルの `CSSStyleDeclaration.cssText` と混同しないでください。

このプロパティは、仕様化されたとおり、*機能的に*変更のみで、かつ、暗黙的であることが指定されているため、直接設定することができなくなったことに注意してください。言い換えると、設定しようとしても警告もエラーもなく、*絶対に何も起こりません*。さらに、設定可能なサブプロパティもありません。従って、これを変更するには、スタイルシートの `cssRules``[index]` プロパティおよび `.selectorText`、`.style` （または、そのサブプロパティ）を使用してください。詳細は、動的なスタイル情報の使用を参照してください。

値
-

この `CSSStyleSheet` ルールの実際のテキストを含む文字列です。

例
-


```css
body {
  background-color: darkblue;
}
```



```js
let stylesheet = document.styleSheets[0];
console.log(stylesheet.cssRules[0].cssText); // body { background-color: darkblue; }
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssrule-csstext |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSRule: parentRule プロパティ
=========================

**`parentRule`** は `CSSRule` インターフェイスのプロパティで、現在のルールを内包するルールがあれば、それを返します。なければ null を返します。

値
-

包含するルールの型の `CSSRule` を返します。現在のルールがメディアクエリーの中にある場合は、 `CSSMediaRule` になります。包含するルールがない場合は null を返します。

例
-


```css
@media (min-width: 500px) {
  .box {
    width: 100px;
    height: 200px;
    background-color: red;
  }

  body {
    color: blue;
  }
}
```



```js
let myRules = document.styleSheets[0].cssRules;
let childRules = myRules[0].cssRules;
console.log(childRules[0].parentRule); // a CSSMediaRule
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssrule-parentrule |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ChannelSplitterNode: ChannelSplitterNode() コンストラクター
===================================================

ウェブオーディオ API の **`ChannelSplitterNode()`** コンストラクターは、新しい `ChannelSplitterNode` オブジェクトのインスタンスを作成します。これは、入力の音声チャンネルそれぞれを別々の出力に分離するノードを表します。

構文
--


```js
new ChannelSplitterNode(context)
new ChannelSplitterNode(context, options)
```

### 引数

`context`

このノードを関連付ける音声コンテキストを表す `BaseAudioContext` です。

`options` 省略可

`ChannelSplitterNode` に持たせるプロパティを定義するオブジェクトです。

`numberOfOutputs` 省略可

`ChannelSplitterNode` の出力の数を決める数値です。指定しない場合の既定の値は 6 です。

`channelCount` 省略可

 このノードの入力についてアップミキシングとダウンミキシングを行う際に用いるチャンネル数を決める整数です。
 (詳しくは `AudioNode.channelCount` を参照してください)
 使用法と正確な定義は `channelCountMode` の値によります。


`channelCountMode` 省略可

 ノードの入力と出力でチャンネルを対応付ける方法を表す文字列です。
 (デフォルト値など詳しくは `AudioNode.channelCountMode` を参照してください)


`channelInterpretation` 省略可

 チャンネルの意味を表す文字列です。
 この意味により、音声のアップミキシングとダウンミキシングを行う方法が決まります。
 取りうる値は `"speakers"` と `"discrete"` です。
 (デフォルト値など詳しくは `AudioNode.channelCountMode` を参照してください)



### 返値

新しい `ChannelSplitterNode` オブジェクトのインスタンスを返します。

例
-


```js
const ac = new AudioContext();

const options = {
  numberOfOutputs: 2,
};

const mySplitter = new ChannelSplitterNode(ac, options);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-channelsplitternode-constructor-channelsplitternode |

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

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

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

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

**`InstallEvent()`** コンストラクターは、新しい `InstallEvent` オブジェクトを生成します。

構文
--


```js
new InstallEvent(type, options)
```

### 引数

`type`

 文字列で、イベントの名前です。
 大文字小文字の区別があり、ブラウザーは常に `install` に設定します。


`options`

オブジェクトで、*`Event()` で定義されているプロパティに加え*、以下のプロパティを持つことができます。

`activeWorker`

現在ページをアクティブに制御している `ServiceWorker` です。


返値
--

新しい `InstallEvent` オブジェクトです。

仕様書
---

*この機能は標準化路線にはありません。*

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

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

関連情報
----

* `Promise`
* フェッチ API
USB.getDevices()
================

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

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

`USB` インターフェイスの **`getDevices`** メソッドは、接続されたペア設定済みのデバイスを表す `USBDevice` の配列で解決する `Promise` を返します｡デバイスのペア設定については、`USB.requestDevice()` を参照してください。

構文
--


```js
getDevices()
```

### 引数

なし

### 返値

`USBDevice` オブジェクトの配列で解決する `Promise` です。

例
-

以下の例では、ペア設定済みのデバイスの製品名とシリアル番号をコンソールに出力します。デバイスのペア設定については、`USB.requestDevice()` を参照してください。


```js
navigator.usb.getDevices().then((devices) => {
  console.log(`デバイス数: ${devices.length}`);
  devices.forEach((device) => {
    console.log(
      `製品名: ${device.productName} シリアル番号 ${device.serialNumber}`,
    );
  });
});
```

仕様書
---

| Specification |
| --- |
| WebUSB API # ref-for-dom-usb-getdevices② |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
USB: disconnect イベント
====================

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

`USB` インターフェイスの **`disconnect`** イベントは、ペア設定済みのデバイスが切断された時発火します。

構文
--

`addEventListener()` のようなメソッドでイベント名を使うか､イベントハンドラープロパティを設定します｡


```js
addEventListener("disconnect", (event) => {});

ondisconnect = (event) => {};
```

イベント型
-----

`USBConnectionEvent` です｡`Event` を継承します｡

Event

USBConnectionEventイベントプロパティ
---------

*以下に挙げるプロパティに加え､親インターフェイス `Event` のプロパティも利用できます。*

`device` 読取専用 

イベントが発火した対象の `USBDevice` です｡

例
-

USB デバイスが切断された時､UI を更新したいかもしれません｡


```js
navigator.usb.addEventListener("disconnect", (event) => {
  // UI から event.device を取り除く
});
```


別の方法として､`USB.ondiscconnect` イベントハンドラープロパティを使用して `disconnect` イベント用のハンドラーを設定できます｡


```js
navigator.usb.ondisconnect = (event) => {
  // UI から event.device を取り除く
};
```

仕様書
---

| Specification |
| --- |
| WebUSB API # disconnect |
| WebUSB API # ref-for-dom-usb-ondisconnect |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
USB: connect イベント
=================

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

`USB` インターフェイスの **`connect`** イベントは、ペア設定済みのデバイスが接続された時発火します。

構文
--

`addEventListener()` のようなメソッドでイベント名を使うか、イベントハンドラープロパティを設定します。


```js
addEventListener("connect", (event) => {});

onconnect = (event) => {};
```

イベント型
-----

`USBConnectionEvent` です。`Event` を継承します。

Event

USBConnectionEventイベントプロパティ
---------

*以下に挙げるプロパティに加え、親インターフェイス `Event` のプロパティも利用できます。*

`device` 読取専用 

イベントが発火した対象の `USBDevice` です。

例
-

USB デバイスが接続された時、UI を更新したいかもしれません。


```js
navigator.usb.addEventListener("connect", (event) => {
  // event.device を UI に追加する
});
```


別の方法として、`USB.onconnect` イベントハンドラープロパティを使用して `connect` イベント用のハンドラーを設定できます。


```js
navigator.usb.onconnect = (event) => {
  // event.device を UI に追加する
};
```

仕様書
---

| Specification |
| --- |
| WebUSB API # connect |
| WebUSB API # ref-for-dom-usb-onconnect |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
USB.requestDevice()
===================

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

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

`USB` インターフェイスの **`requestDevice()`** メソッドは、指定のデバイスが見つかった場合は `USBDevice` のインスタンスで解決する `Promise` を返します｡このメソッドを呼ぶと､ユーザーエージェントのペア設定手続きを開始します｡

構文
--


```js
requestDevice(filters)
```

### 引数

`filters`

ペア設定をしたいデバイスの候補を決めるフィルターオブジェクトの配列です。それぞれのフィルターオブジェクトは、以下のプロパティーを持つことができます。

* `vendorId`
* `productId`
* `classCode`
* `subclassCode`
* `protocolCode`
* `serialNumber`

### 返値

`USBDevice` のインスタンスで解決する `Promise` です。

セキュリティ
------

ユーザーによる一時的な有効化が必要です。この機能が動作するためには、ユーザーがページまたは UI 要素を操作する必要があります。

例
-

以下の例では、2 個の USB デバイスのうちの一つを検索します。2 個のプロダクト ID が指定されていることに注目してください。両方が `requestDevice()` に渡されています。これにより、ユーザーにペア設定するデバイスを選択してもらうユーザーエージェントの手続きを開始します。選択されたデバイスのみが `then()` に渡されます。

フィルターの数は、ユーザーエージェントが提示するデバイスの数を指定するわけではありません。例えば、プロダクト ID `0xa800` を持つ USB デバイス 1 個だけが検出された場合は、ユーザーエージェントはデバイスを 1 個だけ挙げるでしょう。一方、ユーザーエージェントがリストにあるデバイスのうち最初のものを 2 個、2 番目のものを 1 個検出した場合は、3 個全てのデバイスが挙げられるでしょう。


```js
const filters = [
  { vendorId: 0x1209, productId: 0xa800 },
  { vendorId: 0x1209, productId: 0xa850 },
];
navigator.usb
  .requestDevice({ filters })
  .then((usbDevice) => {
    console.log(`製品名: ${usbDevice.productName}`);
  })
  .catch((e) => {
    console.error(`デバイスがありません。${e}`);
  });
```

仕様書
---

| Specification |
| --- |
| WebUSB API # ref-for-dom-usb-requestdevice④ |

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

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