IDBRequest: error イベント - Web API

IDBRequest: error イベント
======================

`error` ハンドラーは、エラーによって要求が失敗したとき実行されます。

このイベントはキャンセルできず、バブリングしません。

構文
--

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

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

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

イベント型
-----

汎用の `Event` です。

例
-

この例では、データベースを開き、`add()` 操作での `error` イベントを監視しながら、レコードを追加しようとします。(例えば、指定の `taskTitle` を持つレコードが既に存在する場合エラーが発生します)

```js
// データベースを開きます
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

DBOpenRequest.addEventListener("upgradeneeded", (event) => {
  const db = event.target.result;

  db.onerror = () => {
    console.log("データベースの作成中にエラーが発生しました");
  };

  // このデータベース用の objectStore を作成します
  const objectStore = db.createObjectStore("toDoList", {
    keyPath: "taskTitle",
  });

  // objectStore に保存するデータアイテムを定義します
  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });
});

DBOpenRequest.addEventListener("success", (event) => {
  const db = DBOpenRequest.result;

  // 読み書き用のデータベーストランザクションを開き、データを追加する準備をします
  const transaction = db.transaction(["toDoList"], "readwrite");
  const objectStore = transaction.objectStore("toDoList");
  const newItem = {
    taskTitle: "my task",
    hours: 10,
    minutes: 10,
    day: 10,
    month: "January",
    year: 2020,
  };

  const objectStoreRequest = objectStore.add(newItem);
  objectStoreRequest.addEventListener("error", () => {
    console.log(
      `新規アイテムの追加中にエラーが発生しました: ${newItem.taskTitle}`,
    );
  });
});
```

同じ例で、`addEventListener()` のかわりに `onerror` プロパティを使用します。

```js
// データベースを開きます
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

DBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;

  db.onerror = () => {
    console.log("データベースの作成中にエラーが発生しました");
  };

  // このデータベース用の objectStore を作成します
  const objectStore = db.createObjectStore("toDoList", {
    keyPath: "taskTitle",
  });

  // objectStore に保存するデータアイテムを定義します
  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });
};

DBOpenRequest.onsuccess = (event) => {
  const db = DBOpenRequest.result;

  // 読み書き用のデータベーストランザクションを開き､データを追加する準備をします
  const transaction = db.transaction(["toDoList"], "readwrite");
  const objectStore = transaction.objectStore("toDoList");
  const newItem = {
    taskTitle: "my task",
    hours: 10,
    minutes: 10,
    day: 10,
    month: "January",
    year: 2020,
  };

  const objectStoreRequest = objectStore.add(newItem);
  objectStoreRequest.onerror = () => {
    console.log(
      `新規アイテムの追加中にエラーが発生しました: ${newItem.taskTitle}`,
    );
  };
};
```

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

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

関連情報
----

* IndexedDB の使用


IDBRequest.error - Web API

IDBRequest.error
================

`IDBRequest` インターフェイスの読み取り専用プロパティ **`error`** は、要求が失敗したときエラーを返します。

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

値
-

`DOMException`、もしくはエラーがないときは `null` です。例外オブジェクトでは、以下のエラー名が返されます。

`AbortError`

トランザクションをアボートすると、進行中の全ての要求がこのエラーとなります。

`ConstraintError`

制約を満たさないデータを追加しようとしたことを示します。これはデータストアやインデックスの作成用の例外タイプです。例えば、既に存在するキーを追加しようとすると、このエラーになります。

`QuotaExceededError`

割り当てられたディスク領域を使い切り、ユーザーが容量の追加を拒否したことを示します。

`UnknownError`

データベース自体とは関係ない理由により操作が失敗したことを示します。たとえば、ディスクの I/O エラーによる失敗が該当します。

`VersionError`

データベースの現在のバージョンより低いバージョンでデータベースを開こうとしたことを示します。

`IDBRequest` オブジェクトに送られるエラーコードに加え、非同期の操作も例外を発生させる可能性があります。この表は要求の実行中に起こりうる問題を説明していますが、要求を生成するときに他の問題が発生する可能性もあります。たとえば、要求がまだ完了していないときに結果にアクセスすると、`InvalidStateError` 例外が投げられます。

例
-

以下の例では、レコードのタイトルを指定して要求し、`onsuccess` で `IDBObjectStore` から (`objectStoreTitleRequest.result` で参照できるようになった) 対応するレコードを取得し、レコードのプロパティ 1 個を更新し、更新したレコードをオブジェクトストアに書き戻します。また、最後には要求が失敗した場合に発生したエラーを報告する `onerror` 関数もあります。動く例全体は、To-do Notifications アプリケーションを参照してください。(動く例を見る)

```js
const title = "Walk dog";

// 通常通りトランザクションを開始します
const objectStore = db
  .transaction(["toDoList"], "readwrite")
  .objectStore("toDoList");

// 指定したタイトルの TO-DO リストを取得します
const objectStoreTitleRequest = objectStore.get(title);

objectStoreTitleRequest.onsuccess = () => {
  // result として返されたデータオブジェクトを取得します
  const data = objectStoreTitleRequest.result;

  // オブジェクトの notified の値を "yes" に更新します
  data.notified = "yes";

  // アイテムをデータベースに書き戻すための新たな要求を生成します
  const updateTitleRequest = objectStore.put(data);

  // この新たな要求が成功したら、再び displayData() 関数を
  // 実行し、表示を更新します
  updateTitleRequest.onsuccess = () => {
    displayData();
  };
};

objectStoreTitleRequest.onerror = () => {
  // 要求でエラーが発生したら、発生したエラーを記録します
  console.log(
    `データの取得中にエラーが発生しました: ${objectStoreTitleRequest.error}`,
  );
};
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbrequest-error① |

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

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

関連情報
----

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


IDBRequest.readyState - Web API

IDBRequest.readyState
=====================

`IDBRequest` インターフェイスの読み取り専用プロパティ **`readyState`** は、要求の状態を返します。

すべての要求は、最初は `pending` 状態です。要求が正常に完了するか、エラーが発生すると、状態が `done` に変わります。

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

値
-

以下の文字列のいずれかです。

`pending`

要求がまだ実行中のとき返ります。

`done`

要求が完了済のとき返ります。

例
-

以下の例では、タイトルを指定してレコードを要求します。`onsuccess` で、`IDBObjectStore` から (`objectStoreTitleRequest.result` として参照できるようになった) 対応するレコードを取得し、レコードのプロパティ 1 個を更新し、更新したレコードを別の要求でオブジェクトストアに書き戻します。2 番目の要求の `readyState` を開発者コンソールに記録します。動く例全体は、To-do Notifications アプリケーションを参照してください。(動く例を見る)

```js
const title = "Walk dog";

// 通常通りトランザクションを開始します
const objectStore = db
  .transaction(["toDoList"], "readwrite")
  .objectStore("toDoList");

// 指定の title をタイトルとして持つ TO-DO リストのオブジェクトを取得します
const objectStoreTitleRequest = objectStore.get(title);

objectStoreTitleRequest.onsuccess = () => {
  // result として返されたデータオブジェクトを取得します
  const data = objectStoreTitleRequest.result;

  // オブジェクトの notified の値を "yes" に更新します
  data.notified = "yes";

  // アイテムをデータベースに書き戻す別の要求を生成します
  const updateTitleRequest = objectStore.put(data);

  // 要求の readyState を記録します
  console.log(`この要求の readyState は ${updateTitleRequest.readyState} です`);

  // 新しい要求が成功したら、また displayData() 関数を
  // 実行し、表示を更新します
  updateTitleRequest.onsuccess = () => {
    displayData();
  };
};
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbrequest-readystate① |

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

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

関連情報
----

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


IDBRequest.source - Web API

IDBRequest.source
=================

`IDBRequest` インターフェイスの読み取り専用プロパティ **`source`** は、要求元 (インデックスやオブジェクトストアなど) を返します。(`IDBFactory.open` を呼んだときなど) 要求元が存在しない場合、`null` を返します。

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

値
-

`IDBIndex`、`IDBObjectStore`、`IDBCursor` などの、要求元を表すオブジェクトです。

例
-

以下の例では、タイトルを指定してレコードを要求し、`onsuccess` で `IDBObjectStore` から (`objectStoreTitleRequest.result` として参照できるようになった) 対応するレコードを取得し、レコードのプロパティ 1 個を更新し、更新したレコードを別の要求でオブジェクトストアに書き戻します。2 番目の要求の要求元が、開発者コンソールに記録されます。動く例全体は、To-do Notifications アプリケーションを参照してください。(動く例を見る)

```js
const title = "Walk dog";

// 通常通りトランザクションを開始します
const objectStore = db
  .transaction(["toDoList"], "readwrite")
  .objectStore("toDoList");

// 指定した title をタイトルとして持つ TO-DO リストのオブジェクトを取得します
const objectStoreTitleRequest = objectStore.get(title);

objectStoreTitleRequest.onsuccess = () => {
  // result として返されたデータオブジェクトを取得します
  const data = objectStoreTitleRequest.result;

  // オブジェクトの notified の値を "yes" に更新します
  data.notified = "yes";

  // アイテムをデータベースに書き戻す別の要求を生成します
  const updateTitleRequest = objectStore.put(data);

  // この要求の要求元を記録します
  console.log(`この要求の要求元は ${updateTitleRequest.source} です`);
  // 新しい要求が成功したら、また displayData() 関数を
  // 実行し、表示を更新します
  updateTitleRequest.onsuccess = () => {
    displayData();
  };
};
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbrequest-source① |

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

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

関連情報
----

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


IDBRequest: success イベント - Web API

IDBRequest: success イベント
========================

`success` イベントは `IDBRequest` が成功すると発生します。

|  |  |
| --- | --- |
| バブリングする | いいえ |
| キャンセル可能 | いいえ |
| インターフェイス | `Event` |
| イベントハンドラープロパティ | `onsuccess` |

例
-

この例では、データベースをオープンします。その `success` イベントを `addEventListener()` でリッスンします。

```js
// データベースをオープンする
const openRequest = window.indexedDB.open("toDoList", 4);

openRequest.onupgradeneeded = (event) => {
  const db = event.target.result;

  db.onerror = () => {
    console.log("データベースの作成中にエラー発生");
  };

  // オブジェクトストアを作成する
  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });

  // オブジェクトストアが保有するデータを定義する
  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });
};

openRequest.addEventListener("success", (event) => {
  console.log("データベースを正常に開きました！");
});
```

下記は同じことを `onsuccess` イベントハンドラープロパティを使用した例です。

```js
// データベースをオープンする
const openRequest = window.indexedDB.open("toDoList", 4);

openRequest.onupgradeneeded = (event) => {
  const db = event.target.result;

  db.onerror = () => {
    console.log("データベースの作成中にエラー発生");
  };

  // オブジェクトストアを作成する
  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });

  // オブジェクトストアが保有するデータを定義する
  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });
};

openRequest.onsuccess = (event) => {
  console.log("データベースを正常に開きました!");
};
```

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

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

関連情報
----

* IndexedDB の使用
* `onsuccess` イベントハンドラープロパティ


MediaElementAudioSourceNode: MediaElementAudioSourceNode() コンストラクター - Web API

MediaElementAudioSourceNode: MediaElementAudioSourceNode() コンストラクター
===================================================================

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

構文
--

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

### 引数

`context`

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

`options`

`MediaElementAudioSourceNode` が持つ性質を定義するオブジェクトです。

`mediaElement`

音声の音源として用いる `HTMLMediaElement` です。

`channelCount`

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

`channelCountMode`

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

`channelInterpretation`

チャンネルの意味を表す文字列です。この解釈は、アップミキシングとダウンミキシングを行う方法を決めます。取りうる値は `"speakers"` および `"discrete"` です。(デフォルト値を含む詳細は `AudioNode.channelInterpretation` を参照してください)

### 返値

新しい `MediaElementAudioSourceNode` オブジェクトのインスタンスです。

例
-

```js
const ac = new AudioContext();
const mediaElement = document.createElement("audio");

const myAudioSource = new MediaElementAudioSourceNode(ac, {
  mediaElement,
});
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-mediaelementaudiosourcenode-mediaelementaudiosourcenode |

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

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


MediaElementAudioSourceNode: mediaElement プロパティ - Web API

MediaElementAudioSourceNode: mediaElement プロパティ
===============================================

`MediaElementAudioSourceNode` インターフェイスの読み取り専用プロパティ **`mediaElement`** は、このノードが音声を受け取る元の音声トラックを持つ `HTMLMediaElement` を示します。

このストリームは、`MediaElementAudioSourceNode()` コンストラクターまたは `AudioContext.createMediaElementSource()` メソッドのいずれかによりこのノードが最初に生成された時に指定されました。

値
-

このノードの音声の音源を持つ要素を表す `HTMLMediaElement` です。

例
-

```js
const audioCtx = new window.AudioContext();
const audioElem = document.querySelector("audio");

let options = {
  mediaElement: audioElem,
};

let source = new MediaElementAudioSourceNode(audioCtx, options);
console.log(source.mediaElement);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-mediaelementaudiosourcenode-mediaelement |

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

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


ProcessingInstruction: target プロパティ - Web API

ProcessingInstruction: target プロパティ
===================================

**`target`** は `ProcessingInstruction` インターフェイスの読み取り専用プロパティで、 `ProcessingInstruction` が対象とするアプリケーションを表します。

例えば次のようなものです。

```html
<?xml version="1.0"?>
```

この場合、処理命令の `target` は `xml` です。

値
-

アプリケーションの名前が入った文字列です。

例
-

### XML 文書内で
```

<output></output>
```

```js
let parser = new DOMParser();
const doc = parser.parseFromString(
  '<?xml version="1.0"?><test/>',
  "application/xml",
);
const pi = doc.createProcessingInstruction(
  "xml-stylesheet",
  'href="mycss.css" type="text/css"',
);
doc.insertBefore(pi, doc.firstChild);

const output = document.querySelector("output");
output.textContent = `この処理命令のターゲット: ${doc.firstChild.target}`;
```

### HTML 文書内で

処理命令の行は `Comment` オブジェクトと見なされ、表現されます。

```html
<?xml version="1.0"?>
<pre></pre>
```

```js
const node = document.querySelector("pre").previousSibling.previousSibling;
const result = `この処理命令のノード: ${node.nodeName}: ${node.nodeValue}\n`;
document.querySelector("pre").textContent = result;
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-processinginstruction-target |

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

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

関連情報
----

* DOM API


ProcessingInstruction: sheet プロパティ - Web API

ProcessingInstruction: sheet プロパティ
==================================

**`sheet`** は `ProcessingInstruction` インターフェイスの読み取り専用プロパティで、 `ProcessingInstruction` に関連付けられたスタイルシートを保持します。

処理命令 `xml-stylesheet` は XML ファイル内でスタイルシートを関連付けるために使用されます。

値
-

関連する `Stylesheet` オブジェクト、または存在しない場合は `null` です。

例
-

```html
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="rule.css"?>
<!-- … -->
```

この処理命令の `sheet` プロパティは `StyleSheet` オブジェクトで、`rule.css` を示します。

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-linkstyle-sheet |

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

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

関連情報
----

* DOM API


SourceBuffer.updating - Web API

SourceBuffer.updating
=====================

**`updating`** は `SourceBuffer` インターフェイスの読み取り専用プロパティで、`SourceBuffer` が現在更新されているかどうか、つまり `SourceBuffer.appendBuffer()`、`SourceBuffer.appendStream()`、または `SourceBuffer.remove()` の操作が現在進行中かどうかを示します。

値
-

論理値です。

例
-

TBD

仕様書
---

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-updating |

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

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

関連情報
----

* `MediaSource`
* `SourceBufferList`


SourceBuffer.appendBufferAsync() - Web API

SourceBuffer.appendBufferAsync()
================================

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

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

**`appendBufferAsync()`** は `SourceBuffer` インターフェイスのメソッドで、`ArrayBuffer`、`TypedArray`、`DataView` のいずれかのオブジェクトから `SourceBuffer` にメディアセグメントデータを非同期的に追加するプロセスを開始します。 バッファーが追加されると履行される `Promise` を返します。

構文
--

```js
appendBufferAsync(source)
```

### 引数

`source`

`ArrayBuffer`、`TypedArray`、`DataView` のいずれかのオブジェクトで、 `SourceBuffer` に追加するメディアセグメントデータが入ったもの。

### 返値

バッファーが `SourceBuffer` に正常に追加されたときに履行される `Promise`、または要求を開始できなかった場合は `null`。

例
-

この単純化された非同期関数の例 `fillSourceBuffer()` は、入力引数 `buffer` として`ArrayBuffer`、`TypedArray`、`DataView` のいずれかのオブジェクトと、そのバッファーからソースメディアを追加する `SourceBuffer` を受け取ります。

```js
async function fillSourceBuffer(buffer, msBuffer) {
  try {
    while (true) {
      await msBuffer.appendBufferAsync(buffer);
    }
  } catch (e) {
    handleException(e);
  }
}
```

仕様書
---

この機能は、どの仕様にも属しません。標準化の予定もありません。

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

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

関連情報
----

* メディアソース拡張 API
* `SourceBuffer.appendBuffer()`
* `MediaSource`
* `SourceBufferList`


SourceBuffer.appendWindowEnd - Web API

SourceBuffer.appendWindowEnd
============================

**`appendWindowEnd`** は `SourceBuffer` インターフェイスのプロパティで、追加ウィンドウ（append window）の終わりのタイムスタンプを制御します。 タイムスタンプの範囲は、`SourceBuffer` に追加されるメディアデータをフィルターするために使用できます。 この範囲内のタイムスタンプを持つコード化されたメディアフレームは追加されますが、範囲外のものは除外されます。

`appendWindowEnd` の既定値は正の無限大です。

値
-

double 型で、追加ウィンドウの終了時間を秒単位で示します。

### 例外

このプロパティに新しい値を設定すると、次の例外が発生する場合があります。

`InvalidAccessError` `DOMException`

値を `SourceBuffer.appendWindowStart` 以下、または `NaN` に設定しようとした場合に発生します。

`InvalidStateError` `DOMException`

この `SourceBuffer` オブジェクトが更新中（つまり、その `SourceBuffer.updating` プロパティが現在 `true`）であるか、この `SourceBuffer` が `MediaSource` から取り除かれていた場合に発生します。

例
-

TBD

仕様書
---

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-appendwindowend |

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

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

関連情報
----

* `MediaSource`
* `SourceBufferList`


SourceBuffer.timestampOffset - Web API

SourceBuffer.timestampOffset
============================

**`timestampOffset`** は `SourceBuffer` インターフェイスのプロパティで、`SourceBuffer` に追加されるメディアセグメント内のタイムスタンプに適用されるオフセットを制御します。

`timestampOffset` の初期値は 0 です。

値
-

double 型で、秒単位のオフセット量です。

### 例外

このプロパティに新しい値を設定すると、次の例外が発生する場合があります。

`InvalidStateError` `DOMException`

`MediaSource.sourceBuffers` に含まれる `SourceBuffer` オブジェクトの 1 つ以上が更新中（つまり、`SourceBuffer.updating` プロパティが現在 `true`）、`SourceBuffer` 内のメディアセグメントが現在解析中、またはこの `SourceBuffer` が `MediaSource` から取り除かれていた場合に発生します。

例
-

TBD

仕様書
---

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-timestampoffset |

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

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

関連情報
----

* `MediaSource`
* `SourceBufferList`


SourceBuffer.removeAsync() - Web API

SourceBuffer.removeAsync()
==========================

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

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

**`removeAsync()`** は `SourceBuffer` インターフェイスのメソッドで、特定の時間範囲内で見つかった `SourceBuffer` のメディアセグメントから非同期的に削除するプロセスを開始します。 指定された時間範囲のバッファーが削除されたときに履行される `Promise` が返されます。

このメソッドは、`updating` が `false` の場合にのみ呼び出すことができます。そうでない場合は、代わりに `abort()` を呼び出します。

構文
--

```js
removeAsync(start, end)
```

### 引数

`start`

double 型で、時間範囲の始まりを秒単位で表します。

`end`

double 型で、時間範囲の終わりを秒単位で表します。

### 返値

`Promise` で、指定された時間範囲のバッファーが `SourceBuffer` から削除されると、履行ハンドラーが実行されます。

例
-

この例では、非同期関数 `emptySourceBuffer()` を定義します。これは指定された `SourceBuffer` の内容を単純にクリアします。

```js
async function emptySourceBuffer(msBuffer) {
  await msBuffer.removeAsync(0, Infinity).catch((e) => {
    handleException(e);
  });
}
```

仕様書
---

この機能は、どの仕様にも属しません。標準化の予定もありません。

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

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

関連情報
----

* メディアソース拡張 API
* `SourceBuffer.remove()`
* `MediaSource`
* `SourceBufferList`


SourceBuffer.changeType() - Web API

SourceBuffer.changeType()
=========================

**`changeType()`** は `SourceBuffer` インターフェイスのメソッドで、今後 `appendBuffer()` を呼び出すときに新しいメディアデータが準拠することを期待する MIME タイプを設定します。 これにより、コーデックまたはコンテナー型を途中で変更できます。

これが役立つ 1 つのシナリオは、リソース制約の変化に応じて 1 つのコーデックから別のコーデックに移行することにより、帯域幅の可用性の変化にメディアソースを適応させることです。

構文
--

```js
changeType(type)
```

### 引数

`type`

文字列で、将来のバッファが準拠する MIME タイプを指定します。

### 返値

なし (`undefined`)。

### 例外

`TypeError`

指定された文字列は、有効な MIME タイプではなく、空です。

`InvalidStateError` `DOMException`

`SourceBuffer` は、親メディアソースの `sourceBuffers` リストのメンバーではありません。 または、バッファーの `updating` プロパティは、以前にキューに入れられた `appendBuffer()` または `remove()` がまだ処理中であることを示しています。

`NotSupportedError` `DOMException`

指定された MIME タイプに対応していないか、`MediaSource.sourceBuffers` リストにある `SourceBuffer` オブジェクトの種類には対応していません。

使用上の注意
------

親 `MediaSource` が `"ended"` `readyState` にある場合に、`changeType()` を呼び出すと、 `readyState` プロパティが `"open"` に遷移し、親メディアソースで `sourceopen` という名前の単純なイベントが発生します。

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

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

関連情報
----

* `MediaSource`
* `SourceBufferList`


SourceBuffer.abort() - Web API

SourceBuffer.abort()
====================

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

`SourceBuffer` インターフェイスの **`abort()`** メソッドは、現在のセグメントを打ち切り、セグメントパーサーをリセットします。

構文
--
```

sourceBuffer.abort();
```

### パラメーター

なし。

### 戻り値

`undefined`。

### 例外

| 例外 | 説明 |
| --- | --- |
| `InvalidStateError` | 親メディアソースの `MediaSource.readyState` プロパティが `open` と等しくないか、この `SourceBuffer` が `MediaSource` から取り除かれています。 |

例
-

`abort()` の仕様の説明はやや混乱します。 例えば、パーサーの状態のリセット（reset parser state）のステップ 1 を検討してください。 MSE API は完全に非同期ですが、この手順は同期（ブロッキング）操作を示唆しているように見えますが、これは意味がありません。

つまり、現在の実装は、ソースバッファで発生している現在の追加（またはその他）操作を停止し、すぐに操作を再開したい特定の状況で役立ちます。 例えば、次のコードを検討してください。

```js
sourceBuffer.addEventListener('updateend', function (\_) {
  ...
});

sourceBuffer.appendBuffer(buf);
```

`appendBuffer` の呼び出し後、`updateend` イベントが発生する前（つまり、バッファは追加されているが、操作はまだ完了していない）に、ユーザーが新しいポイントを探して動画を「スクラブ」するとします。 この場合、ソースバッファで `abort()` を手動で呼び出して現在のバッファのデコードを停止し、動画の現在の新しい位置に関連する新しく要求されたセグメントを取得して追加します。

Nick Desaulnier の bufferWhenNeeded デモで同様の動作を確認できます。 48 行目では、イベントリスナーが再生中の動画に追加され、`seek()` という関数が `seeking` イベントが発生したときに実行されます。 行 92〜101 では、seek() 関数が定義されています。 ここで、`MediaSource.readyState` が `open` に設定されている場合、`abort()` が呼び出されることに注意してください。 つまり、新しいソースバッファを受信する準備ができていることを意味します。 この時点で、現在のセグメントを打ち切り、新しいシーク位置のセグメントを取得するだけの価値があります（`checkBuffer()` および `getCurrentSegment()` を参照）。

仕様
--

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-abort |

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

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

関連情報
----

* `MediaSource`
* `SourceBufferList`


SourceBuffer.mode - Web API

SourceBuffer.mode
=================

**`mode`** は `SourceBuffer` インターフェイスのプロパティで、メディアセグメントを `SourceBuffer` に任意の順序で追加できるか、厳密な順序で追加できるかを制御します。

使用可能な 2 つの値は次のとおりです。

* `segments`: メディアセグメントのタイムスタンプが、セグメントの再生順序を決定します。 セグメントは、任意の順序で `SourceBuffer` に追加できます。
* `sequence`: セグメントが `SourceBuffer` に追加される順序により、セグメントの再生順序を決定します。 セグメントのタイムスタンプは、この順序に従ってセグメントに対して自動的に生成されます。

`mode` 値は、`MediaSource.addSourceBuffer()` を使用して `SourceBuffer` が作成されるときに最初に設定されます。 メディアセグメントにタイムスタンプが既に存在する場合、値は `segments` に設定されます。 そうでない場合、値は `sequence` に設定されます。

初期値が `sequence` のときに `mode` プロパティ値を `segments` に設定しようとすると、例外がスローされます。 `sequence` モードでは、既存のセグメントの順序を維持する必要があります。 ただし、値を `segments` から `sequence` に変更することはできます。 これは、再生順序が固定され、これを反映するために新しいタイムスタンプが生成されることを意味します。

このプロパティは、`SourceBuffer` が `appendBuffer()` または `remove()` の呼び出しを処理している間は変更できません。

値
-

文字列です。

### 例外

このプロパティに新しい値を設定すると、次の例外がスローされる場合があります。

`InvalidAccessError` `DOMException`

初期値が `sequence` の場合に、値を `segments` に設定しようとした場合に発生します。

`InvalidStateError` `DOMException`

`SourceBuffer` オブジェクトが更新中（つまり、その `SourceBuffer.updating` プロパティが現在 `true`）、この `SourceBuffer` に追加された最後のメディアセグメントが不完全、またはこの `SourceBuffer` が `MediaSource` から取り除かれていた場合に発生します。

例
-

このスニペットは、`sourceBuffer` のモードが、 現在 `'segments'` に設定されている場合、`'sequence'` に設定します。 したがって、再生順序は、メディアセグメントを追加した順に設定されます。

```js
const curMode = sourceBuffer.mode;
if (curMode === "segments") {
  sourceBuffer.mode = "sequence";
}
```

仕様書
---

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-mode |

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

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

関連情報
----

* `MediaSource`
* `SourceBufferList`


SourceBuffer.videoTracks - Web API

SourceBuffer.videoTracks
========================

**`videoTracks`** は `SourceBuffer` インターフェイスの読み取り専用プロパティで、現在 `SourceBuffer` 内に含まれている動画トラックのリストを返します。

値
-

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

例
-

TBD

仕様書
---

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-videotracks |

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

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

関連情報
----

* `MediaSource`
* `SourceBufferList`


SourceBuffer.appendBuffer() - Web API

SourceBuffer.appendBuffer()
===========================

**`appendBuffer()`** は `SourceBuffer` インターフェイスのメソッドで、`ArrayBuffer`、`TypedArray`、`DataView` のいずれかのオブジェクトからのメディアセグメントデータを `SourceBuffer` に追加します。

構文
--

```js
appendBuffer(source)
```

### 引数

`source`

`ArrayBuffer`、`TypedArray`、`DataView` のいずれかのオブジェクトで、 `SourceBuffer` に追加するメディアセグメントデータが入ったもの。

### 返値

なし (`undefined`)。

### 例外

なし。

例
-

TBD.

仕様書
---

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-appendbuffer |

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

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

関連情報
----

* `MediaSource`
* `SourceBufferList`


SourceBuffer.audioTracks - Web API

SourceBuffer.audioTracks
========================

**`audioTracks`** は `SourceBuffer` インターフェイスの読み取り専用プロパティで、この `SourceBuffer` 内に現在含まれている音声トラックのリストを返します。

値
-

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

例
-

TBD

仕様書
---

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-audiotracks |

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

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

関連情報
----

* `MediaSource`
* `SourceBufferList`


SourceBuffer.buffered - Web API

SourceBuffer.buffered
=====================

**`buffered`** は `SourceBuffer` インターフェイスの読み取り専用プロパティで、`SourceBuffer` に現在バッファーされている時間範囲を正規化された `TimeRanges` オブジェクトとして返します。

値
-

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

例
-

TBD

仕様書
---

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-buffered |

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

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

関連情報
----

* `MediaSource`
* `SourceBufferList`


SourceBuffer.textTracks - Web API

SourceBuffer.textTracks
=======================

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

**`textTracks`** は `SourceBuffer` インターフェイスの読み取り専用プロパティで、`SourceBuffer` 内に現在含まれているテキストトラックのリストを返します。

値
-

`TextTrackList` (en-US) オブジェクトです。

例
-

TBD

仕様書
---

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-texttracks |

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

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

関連情報
----

* `MediaSource`
* `SourceBufferList`


SourceBuffer.appendWindowStart - Web API

SourceBuffer.appendWindowStart
==============================

**`appendWindowStart`** は `SourceBuffer` インターフェイスのプロパティで、追加ウィンドウ（append window）の始まりのタイムスタンプを制御します。 タイムスタンプの範囲は、`SourceBuffer` に追加されるメディアデータをフィルターするために使用できます。 この範囲内のタイムスタンプを持つコード化されたメディアフレームは追加されますが、範囲外のものは除外されます。

`appendWindowStart` のデフォルト値はプレゼンテーションの開始時間であり、これは再生可能なメディアの開始時間です。

値
-

double 型で、追加ウィンドウの開始時間を秒単位で示します。

### 例外

このプロパティに新しい値を設定すると、次の例外がスローされる場合があります。

`InvalidAccessError` `DOMException`

値を 0 未満、または `SourceBuffer.appendWindowEnd` 以上の値に設定しようとした場合に発生します。

`InvalidStateError` `DOMException`

この `SourceBuffer` オブジェクトが更新中（つまり、その `SourceBuffer.updating` プロパティが現在 `true`）であるか、この `SourceBuffer` が `MediaSource` から取り除かれている場合に発生します。

例
-

TBD

仕様書
---

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-appendwindowstart |

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

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

関連情報
----

* `MediaSource`
* `SourceBufferList`


SourceBuffer.remove() - Web API

SourceBuffer.remove()
=====================

**`remove()`** は `SourceBuffer` インターフェイスのメソッドで、特定の時間範囲内のメディアセグメントを `SourceBuffer` から削除します。 このメソッドは、`SourceBuffer.updating` が `false` の場合にのみ呼び出すことができます。 `SourceBuffer.updating` が `false` に等しくない場合、`SourceBuffer.abort()` を呼び出します。

構文
--

```js
remove(start, end)
```

### 引数

`start`

double 型で、時間範囲の始まりを秒単位で表します。

`end`

double 型で、時間範囲の終わりを秒単位で表します。

### 返値

なし (`undefined`)。

### 例外

`InvalidAccessError` `DOMException`

`MediaSource.duration` プロパティが `NaN` に等しいか、`start` 引数が負であるか `MediaSource.duration` より大きいか、`end` 引数が `start` 以下または `NaN` に等しい場合に発生します。

`InvalidStateError` `DOMException`

`SourceBuffer.updating` プロパティが `true` に等しいか、この `SourceBuffer` が `MediaSource` から取り除かれている場合に発生します。

例
-

TBD.

仕様書
---

| Specification |
| --- |
| Media Source Extensions™ # dom-sourcebuffer-remove |

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

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

関連情報
----

* `MediaSource`
* `SourceBufferList`


Comment: Comment() コンストラクター - Web API

Comment: Comment() コンストラクター
===========================

**`Comment()`** コンストラクターは、引数に指定された文字列を内容とする `Comment` オブジェクトを返します。

構文
--

```js
new Comment()
new Comment(aString)
```

### 引数

* `aString` 省略可
### 返値

新しい `Comment` です。中には `aString` が入るか、引数が与えられなかった場合は空文字列が入ります。

例
-

```js
let comment = new Comment("Test");
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-comment-comment① |

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

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

関連情報
----

* DOM インターフェイスの索引
* `Document.createComment()` はこのコンストラクターの古い代替形式です。


AnimationPlaybackEvent: AnimationPlaybackEvent() コンストラクター - Web API

AnimationPlaybackEvent: AnimationPlaybackEvent() コンストラクター
=========================================================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`AnimationPlaybackEvent()`** はウェブアニメーション API のコンストラクターで、新しい `AnimationPlaybackEvent` オブジェクトインスタンスを返します。

構文
--

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

### 引数

`type`

 イベントの名前を表す文字列です。
 大文字と小文字を区別し、ブラウザーは `cancel`, `finish`, `remove` のいずれかに設定します。

`options` 省略可

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

`detail` 省略可

イベントに関連付けられたイベント依存の値です。既定値は `null` です。

### 返値

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

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animationplaybackevent-animationplaybackevent |

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

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

関連情報
----

* ウェブアニメーション API
* `AnimationPlayBackEvent`
* `Animation.playState`
* `CustomEvent()`
* `Event()`


AnimationPlaybackEvent: currentTime プロパティ - Web API

AnimationPlaybackEvent: currentTime プロパティ
=========================================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`currentTime`** は `AnimationPlaybackEvent` インターフェイスの読み取り専用プロパティで、イベントがキューに入った瞬間の、イベントを生成したアニメーションの現在時刻を表します。イベントが生成された時刻にアニメーションが `idle` であった場合、これは未解決になります。

値
-

ミリ秒単位の現在時刻を表す数値、または `null` です。

時間精度の低下
-------

 タイミング攻撃やフィンガープリンティングから保護するために、 `animation.currentTime` の精度はブラウザー設定によっては丸められている可能性があります。
 Firefox では、 `privacy.reduceTimerPrecision` 環境設定が既定で有効になっており、 Firefox 59 では 20 マイクロ秒が既定値です。

```js
// Firefox 60 における 時間制度の低下 (2ms)
animation.currentTime;
// 23.404
// 24.192
// 25.514
// …

// `privacy.resistFingerprinting` が有効な場合の時間制度の低下
animation.currentTime;
// 49.8
// 50.6
// 51.7
// …
```

Firefox では、 `privacy.resistFingerprinting` を有効にすると、精度を 100ms または `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` の値のどちらか大きい方にすることができます。

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animationplaybackevent-currenttime |

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

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

関連情報
----

* ウェブアニメーション API
* `AnimationPlayBackEvent`


AnimationPlaybackEvent: timelineTime プロパティ - Web API

AnimationPlaybackEvent: timelineTime プロパティ
==========================================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`timelineTime`** は `AnimationPlaybackEvent` インターフェイスの読み取り専用プロパティで、イベントがキューに入った瞬間のアニメーションの `timeline` (en-US) の時刻値を表します。イベントが生成された時刻にアニメーションがタイムラインに関連付けられていなかったり、関連付けられていたタイムラインが非アクティブだった場合、これは未解決になります。

値
-

現在の時刻をミリ秒単位で表す数値、または `null` です。

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animationplaybackevent-timelinetime |

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

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

関連情報
----

* ウェブアニメーション API
* `AnimationPlayBackEvent`
* `AnimationTimeline` (en-US)


HTMLTrackElement: src プロパティ - Web API

HTMLTrackElement: src プロパティ
===========================

**`HTMLTrackElement.src`** プロパティは、テキストトラックのデータの URL を示す `<track>` 要素の `src` 属性の値を反映したものです。

値
-

テキストトラックデータの URL を含む文字列オブジェクト。

例
-

```js
// coming soon
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-track-src |

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

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

関連情報
----

* `HTMLTrackElement.src` プロパティの定義に使われるインターフェイスである `HTMLTrackElement`
* `<track>`


HTMLTrackElement: cuechange イベント - Web API

HTMLTrackElement: cuechange イベント
================================

**`cuechange`** イベントは `TextTrack` が現在表示しているキューを変更した際に発生します。このイベントは `TextTrack` と、それが表示されている `HTMLTrackElement` があれば、その両方で発生します。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用したり、イベントハンドラープロパティを設定したりしてください。

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

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

イベント型
-----

一般的な `Event` で、追加のプロパティはありません。

例
-

`track` プロパティで示される基礎となる `TextTrack` は、現在表示されているキューが変更される度に `cuechange` イベントを受信します。これは、そのトラックがメディア要素に関連付けられていない場合でも発生します。

そのトラックがメディア要素に関連付けられている場合、 `<track>` を `<audio>` または `<video>` 要素の子として使用すると、 `cuechange` イベントは `HTMLTrackElement` にも送信されます。

```js
let textTrackElem = document.getElementById("texttrack");

textTrackElem.addEventListener("cuechange", (event) => {
  let cues = event.target.track.activeCues;
});
```

あるいは、 `oncuechange` イベントハンドラーを使用することもできます。

```js
let textTrackElem = document.getElementById("texttrack");

textTrackElem.oncuechange = (event) => {
  let cues = event.target.track.activeCues;
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-cuechange |
| HTML Standard # handler-oncuechange |

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

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

関連情報
----

* WebVTT
* `TextTrack` での同じイベント: `cuechange`


HID: disconnect イベント - Web API

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

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

`HID` インターフェイスの **`disconnect`** イベントは、ユーザーエージェントが HID デバイスを切断した時発火します。

構文
--

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

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

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

イベント型
-----

`HIDConnectionEvent` です。 `Event` を継承しています。

Event

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

*以下のプロパティに加え、親の `Event` インターフェイスから継承したプロパティが使用可能です。*

`device` 読取専用

イベントが発火した原因の `HIDDevice` です。

例
-

この例では、デバイスの切断を監視するためにイベントリスナーを登録します。切断時、デバイス名が `HIDDevice.productName` を用いてコンソールに出力されます。

```js
navigator.hid.addEventListener("disconnect", ({ device }) => {
  console.log(`HID disconnected: ${device.productName}`);
});
```

仕様書
---

| Specification |
| --- |
| WebHID API # dom-hid-ondisconnect |

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

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


HID.getDevices() - Web API

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

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

`HID` インターフェイスの **`getDevices()`** メソッドは、ユーザーがこれまでに `requestDevice()` の呼び出しに応じてアクセスを許可した接続中の HID デバイスのリストを取得します。

構文
--

```js
getDevices()
```

### 引数

なし。

### 返値

`HIDDevice` オブジェクトのリストで解決する `Promise` を返します。

例
-

この例では、デバイスのリストを取得し、デバイス名をコンソールに出力します。

```js
document.addEventListener("DOMContentLoaded", async () => {
  let devices = await navigator.hid.getDevices();
  devices.forEach((device) => {
    console.log(`HID: ${device.productName}`);
  });
});
```

仕様書
---

| Specification |
| --- |
| WebHID API # dom-hid-getdevices |

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

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


HID: connect イベント - Web API

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

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

`HID` インターフェイスの **`connect`** イベントは、ユーザーエージェントが HID デバイスに接続した時発火します。

構文
--

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

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

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

イベント型
-----

`HIDConnectionEvent` です。 `Event` を継承しています。

Event

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

*以下のプロパティに加え、親の `Event` インターフェイスから継承したプロパティが使用可能です。*

`device` 読取専用

イベントが発火した原因の `HIDDevice` です。

例
-

この例では、デバイスの接続を監視するためにイベントリスナーを登録します。接続時、デバイス名が `HIDDevice.productName` を用いてコンソールに出力されます。

```js
navigator.hid.addEventListener("connect", ({ device }) => {
  console.log(`HID connected: ${device.productName}`);
});
```

仕様書
---

| Specification |
| --- |
| WebHID API # dom-hid-onconnect |

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

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


HID.requestDevice() - Web API

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

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

`HID` インターフェイスの **`requestDevice()`** メソッドは、HID デバイスへのアクセスを要求します。

ユーザーエージェントは接続されたデバイスのリストを含む許可ダイアログを表示し、ユーザーにそれらのデバイスから 1 個を選んで許可するように要求するでしょう。

構文
--

```js
requestDevice(options)
```

### 引数

`options`

ペアリング可能なデバイスを抽出する用のフィルターオブジェクトの配列を含むオブジェクトです。それぞれのフィルターオブジェクトは以下のプロパティを持つことができます。

`vendorId` 省略可

要求する HID デバイスのベンダー ID を表す整数です。

`productId` 省略可

要求する HID デバイスのプロダクト ID を表す整数です。

`usagePage` 省略可

要求するデバイスの HID 使用法の Usage Page 部分を表す整数です。トップレベルのコレクションの使用法は、デバイスの種類を特定するために使用されます。

標準の HID 使用法の値は、HID Usage Tables に載っています。

`usage` 省略可

要求するデバイスの HID 使用法の Usage ID 部分を表す整数です。

**メモ:** デバイスフィルターは、ユーザーに提示するデバイスリストを絞り込むために使われます。フィルターが無い場合、接続された全てのデバイスが表示されます。1 個以上のフィルターが含まれている場合、デバイスはいずれかのフィルターに当てはまればリストに入ります。フィルターに当てはまるには、そのフィルターに含まれるルール全てに当てはまる必要があります。

### 返値

指定されたフィルターに当てはまり接続された `HIDDevice` オブジェクトの配列で解決する `Promise` を返します。

### 例外

`SecurityError` `DOMException`

ページが HID 機能へのアクセスを許可しないとき投げられます。

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

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

例
-

### 4 種類全てのフィルタールールによってデバイスを特定する

この例では、HID デバイスはベンダー ID `0xABCD`、プロダクト ID `0x1234`、Usage Page `0x0C`、Usage ID `0x01` を持つことを要求されます。これらのルール全てを満たすデバイスのみが表示されます。

```js
let requestButton = document.getElementById("request-hid-device");
requestButton.addEventListener("click", async () => {
  let device;
  try {
    const devices = await navigator.hid.requestDevice({
      filters: [
        {
          vendorId: 0xabcd,
          productId: 0x1234,
          usagePage: 0x0c,
          usage: 0x01,
        },
      ],
    });
    device = devices[0];
  } catch (error) {
    console.log("エラーが発生しました。");
  }

  if (!device) {
    console.log("デバイスが選択されませんでした。");
  } else {
    console.log(`HID: ${device.productName}`);
  }
});
```

### 2 種類のフィルターを用いる例

次の例は 2 種類のフィルターを用いています。これらのフィルターのいずれかに当てはまるデバイスが表示されます。

```js
// Nintendo Switch Joy-Con の USB ベンダー / プロダクト ID を持つデバイスを抽出します。
const filters = [
  {
    vendorId: 0x057e, // Nintendo Co., Ltd
    productId: 0x2006, // Joy-Con Left
  },
  {
    vendorId: 0x057e, // Nintendo Co., Ltd
    productId: 0x2007, // Joy-Con Right
  },
];

// ユーザーに Joy-Con デバイスを選択するよう指示します。
const [device] = await navigator.hid.requestDevice({ filters });
```

仕様書
---

| Specification |
| --- |
| WebHID API # dom-hid-requestdevice |

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

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


CanvasCaptureMediaStreamTrack.requestFrame() - Web API

CanvasCaptureMediaStreamTrack.requestFrame()
============================================

`CanvasCaptureMediaStreamTrack` (en-US) のメソッド **`requestFrame()`** はフレームをキャンバスから取り込んでストリームに送信することを依頼します。描画やフレームの取り込みのタイミングを慎重に制御する必要のあるアプリケーションは、フレームを取り込む時を直接指定するのに `requestFrame()` を使用することができます。

フレームの自動取り込みを避け、フレームが `requestFrame()` が呼ばれた時だけ取り込まれるようにするには、ストリームを生成する時に `captureStream()` メソッドに 0 の値を指定します。

構文
--
```

stream.requestFrame();
```

### 戻り値

`undefined`

使用上の注意
------

今のところ、キャンバスのオリジンが明確でなくても例外を投げないことが、仕様でフラグ付けされた問題点です。将来は変わるでしょうが、事前に計画をし `SecurityError` のような例外(投げられる特定のエラーが仕様書では言及されていませんが、これが有力な候補です) を監視することが賢明です。

例
-

```js
// 取り込むキャンバス要素を探す
var canvasElt = document.getElementsByTagName("canvas")[0];

// ストリームを取得する
var stream = canvasElt.captureStream(25); // 25 FPS

// キャンバスの現在の状態をフレームとしてストリームに送信する
stream.getVideoTracks()[0].requestFrame();
```

仕様
--

| Specification |
| --- |
| Media Capture from DOM Elements # dom-canvascapturemediastreamtrack-requestframe |

ブラウザー実装状況
---------

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

関連情報
----

* `CanvasCaptureMediaStream` (en-US) 、属するインターフェース。
* `<canvas>`


ウェブストレージ API の使用 - Web API

ウェブストレージ API の使用
================

ウェブストレージ API は、ブラウザーがキーと値のペアを安全に保存できる仕組みを提供します。

この記事では、この技術を使用する方法を手順を追って説明します。

基本概念
----

ストレージオブジェクトは、シンプルなキーと値の組み合わせを保存しており、オブジェクトに似ていますが、これらは何度ページを読み込んでも存在し続けます。キーは常に文字列です（なお、オブジェクトと同様、整数のキーは自動的に文字列に変換されます）。これらの値にアクセスするにはオブジェクトと同様に、または `Storage.getItem()` と `Storage.setItem()` メソッドを使用して行います。以下の 3 行はすべて、（同じ） colorSetting という項目を設定します。

```js
localStorage.colorSetting = "#a4509b";
localStorage["colorSetting"] = "#a4509b";
localStorage.setItem("colorSetting", "#a4509b");
```

**メモ:** ウェブストレージ API (`setItem`, `getItem`, `removeItem`, `key`, `length`) の使用が推奨されているのは、単純なオブジェクトをキーと値の格納崎として使うという落とし穴を防ぐためです。

Web Storage には、以下の 2 種類の仕組みがあります。

* セッションストレージ (**`sessionStorage`**) は、オリジン毎に分割された保存領域を管理し、これはページセッションの間 (ブラウザーを開いている間、ページの再読み込みや復元を含む) 使用可能です。
* ローカルストレージ (**`localStorage`**) も同様ですが、こちらはブラウザーを閉じたり再び開いたりしても持続します。

これらの仕組みは `Window.sessionStorage` および `Window.localStorage` プロパティ (正確には、対応しているブラウザーは `Window` オブジェクトが `WindowLocalStorage` および `WindowSessionStorage` オブジェクトを実装しており、これらに `localStorage` および `sessionStorage` プロパティがあります) を通して使用でき、いずれかのプロパティを使用すると `Storage` オブジェクトのインスタンスを生成して、データアイテムの保存、取り出し、削除ができます。同じ生成元に対して `sessionStorage` と `localStorage` は、別の `Storage` オブジェクトを使用します。これらは別々に制御されて機能します。

よって例えば、始めに文書上で `localStorage` を呼び出すと `Storage` オブジェクトが返ります。その後に文書上で `sessionStorage` を呼び出すと、別の `Storage` オブジェクトが返ります。どちらも同じ方法で操作することができますが、操作は個別に行われます。

localStorage の機能検出
------------------

ローカルストレージを利用できるようにするには、まず対応済みであり、現在のブラウザーセッションで利用可能であるかを確かめるべきです。

### 利用可能かどうかの検証

**メモ:** この API は、すべての主要なブラウザーで利用可能です。利用できるかどうかのテストが必要なのは、とても古いブラウザーに対応しなければならない場合か、下記に記述する限られた状況においてのみです。

ローカルストレージに対応しているブラウザーは、 `window` オブジェクトに `localStorage` という名称のプロパティを持っています。しかし、単にプロパティが存在すると仮定してしまうと例外が発生する可能性があります。`localStorage` オブジェクトが存在していたとしても、さまざまなブラウザーがローカルストレージを無効化する設定を設けていますので、ローカルストレージが利用できる保証はありません。よってブラウザーがローカルストレージに対応していても、ページ上のスクリプトでは利用できる状態ではない場合があります。

例えば、ブラウザー内のプライベートブラウジングモードで表示された文書に対して、ブラウザーによっては空の `localStorage` オブジェクトを返すかもしれません。逆に、正規の `QuotaExceededError` が発生することもあります。これは利用できるストレージ空間をすべて使用してしまったことを意味していますが、実際にはストレージは利用可能です。機能検出はこのようなシナリオを考慮に入れるべきです。

ローカルストレージに対応済みで、かつ使用可能であるかどうかを検出する関数を、以下に示します。

```js
function storageAvailable(type) {
  let storage;
  try {
    storage = window[type];
    const x = "\_\_storage\_test\_\_";
    storage.setItem(x, x);
    storage.removeItem(x);
    return true;
  } catch (e) {
    return (
      e instanceof DOMException &&
      // everything except Firefox
      (e.code === 22 ||
        // Firefox
        e.code === 1014 ||
        // test name field too, because code might not be present
        // everything except Firefox
        e.name === "QuotaExceededError" ||
        // Firefox
        e.name === "NS\_ERROR\_DOM\_QUOTA\_REACHED") &&
      // acknowledge QuotaExceededError only if there's something already stored
      storage &&
      storage.length !== 0
    );
  }
}
```

また、この関数の使い方は以下のとおりです。

```js
if (storageAvailable("localStorage")) {
  // やったあ! ローカルストレージをちゃんと利用できます
} else {
  // 残念、ローカルストレージは利用できません
}
```

`storageAvailable('sessionStorage')` を呼び出すと、代わりにセッションストレージを確認できます。

ローカルストレージの機能を検出する方法の略歴をご覧ください。

例
-

ウェブストレージの典型的な使用法を示すため、想像力豊かに **Web Storage Demo** と名づけたシンプルな例を作成しました。このランディングページ には、色、フォント、装飾画像をカスタマイズするためのコントロールがあります。

![16 進数値を入力して色を選択するテキストボックスと、フォントスタイルと装飾画像を選ぶ 2 つのドロップダウンメニューを備えたウェブストレージの例。](/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API/landing.png)別の選択肢を選ぶと、即座にページが更新されます。さらに、選択内容を `localStorage` に保存しますので、別のページに移動した後に再びこのページを読み込むと、選択内容が維持されています。

また、 event output ページも提供します。このページを別のタブで開くと、ランディングページで選択肢を変更したときに `StorageEvent` が発生するのに応じて、更新されたストレージの情報が出力されるのを確認できます。

![Event output ページ](/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API/event-output.png)

**メモ:** 上記のリンクから実際のページを参照することができます。また、ソースコードも確認できます。

### ストレージが存在しているかを確認する

始めに main.js で、ストレージオブジェクトがすでに存在しているか (すなわち、過去にページへアクセスしていたか) を確認します。

```js
if (!localStorage.getItem("bgcolor")) {
  populateStorage();
} else {
  setStyles();
}
```

`Storage.getItem()` メソッドは、ストレージからデータアイテムを取得するために使用します。この例では、 `bgcolor` アイテムが存在するかを確認しています。アイテムが存在しなければ、既存のカスタマイズ値をストレージへ追加するために `populateStorage()` を実行します。すでに値が存在する場合は、ページのスタイルを保存済みの値で更新するために `setStyles()` を実行します。

**メモ:** `Storage.length` を使用して、ストレージオブジェクトが空であるかを確認することもできます。

### ストレージから値を取得する

前述のとおり `Storage.getItem()` を使用して、ストレージから値を取り出すことができます。これはデータアイテムのキーが引数であり、またデータの値を返します。例えば以下のようにします。

```js
function setStyles() {
  const currentColor = localStorage.getItem("bgcolor");
  const currentFont = localStorage.getItem("font");
  const currentImage = localStorage.getItem("image");

  document.getElementById("bgcolor").value = currentColor;
  document.getElementById("font").value = currentFont;
  document.getElementById("image").value = currentImage;

  htmlElem.style.backgroundColor = `#${currentColor}`;
  pElem.style.fontFamily = currentFont;
  imgElem.setAttribute("src", currentImage);
}
```

 この例で、最初の 3 行はローカルストレージから値を取得しています。
 次に、フォーム要素で表示する値をこれらの値に更新して、ページを再読み込みしたときに同期するようにします。
 最後に、ページのスタイルや装飾画像を更新して、再読み込み時にカスタマイズ設定を復元します。

### ストレージに値を設定する

`Storage.setItem()` は新たなデータアイテムを作成するため、および (データアイテムがすでに存在していれば) 既存の値を更新するために使用します。これは引数が 2 つあり、ひとつは作成または変更するデータアイテムのキー、もうひとつはデータアイテムに保存する値です。

```js
function populateStorage() {
  localStorage.setItem("bgcolor", document.getElementById("bgcolor").value);
  localStorage.setItem("font", document.getElementById("font").value);
  localStorage.setItem("image", document.getElementById("image").value);

  setStyles();
}
```

`populateStorage()` 関数は、背景色、フォント、画像のパスの 3 つのアイテムをローカルストレージに保存します。そして、ページのスタイルなどを更新するために `setStyles()` 関数を実行します。

また、それぞれのフォーム要素に `onchange` ハンドラーを含めておき、フォームの値が変更されるたびにデータやスタイルを更新します。

```js
bgcolorForm.onchange = populateStorage;
fontForm.onchange = populateStorage;
imageForm.onchange = populateStorage;
```

`Storage` は、文字列の格納と取り出しにのみ対応しています。他のデータ型を保存したい場合は、文字列に変換する必要があります。プレーンなオブジェクトや配列の場合は `JSON.stringify()` を使用します。

```js
const person = { name: "Alex" };
localStorage.setItem("user", person);
console.log(localStorage.getItem("user")); // "[object Object]" 役に立ちません
localStorage.setItem("user", JSON.stringify(person));
console.log(JSON.parse(localStorage.getItem("user"))); // { name: "Alex" }
```

しかし、任意のデータ型を格納するために汎用的な方法はありません。さらに、取得されたオブジェクトは元オブジェクトのディープコピーであり、それに対して変更しても、元オブジェクトには影響しません。

### StorageEvent を使用してストレージの変更に反応する

`StorageEvent` は、`Storage` オブジェクトが変更されるたびに発生します (sessionStorage の変更では発生しません) 。これは、変更を行ったページ上では効果がないでしょう。実際は、ストレージを使用するドメイン上の別のページで、ストレージの変更に同期するための手段です。別のドメイン上のページは、前述のストレージオブジェクトにアクセスできません。

イベントページ (events.js をご覧ください) の JavaScript はこれだけです。

```js
window.addEventListener("storage", (e) => {
  document.querySelector(".my-key").textContent = e.key;
  document.querySelector(".my-old").textContent = e.oldValue;
  document.querySelector(".my-new").textContent = e.newValue;
  document.querySelector(".my-url").textContent = e.url;
  document.querySelector(".my-storage").textContent = JSON.stringify(
    e.storageArea,
  );
});
```

ここでは `window` オブジェクトに、現在のオリジンに関連付けられた `Storage` オブジェクトが変更されたときに発生するイベントリスナを追加しています。上記の例でわかるとおり、このイベントに関連付けられたイベントオブジェクトは、変更されたデータのキー、変更前の古い値、変更後の新しい値、ストレージを変更した文書の URL、ストレージオブジェクト自体 (その中身を見えるように文字化しています) といった、役に立つ情報を含んでいるいくつものプロパティを持っています。

### データレコードの削除

ウェブストレージには、データを削除するためのシンプルなメソッドが 2 つあります。このデモでは使用していませんが、プロジェクトへとても簡単に追加できます:

* `Storage.removeItem()` は引数が 1 つあり、削除したいデータアイテムのキーです。これは、当該ドメインのストレージオブジェクトからデータアイテムを削除します。
* `Storage.clear()` は引数がなく、当該ドメインのストレージオブジェクト全体を空にします。
仕様書
---

| Specification |
| --- |
| HTML Standard # dom-localstorage-dev |
| HTML Standard # dom-sessionstorage-dev |

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

### api.Window.localStorage

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

### api.Window.sessionStorage

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

関連情報
----

* ウェブストレージ API のランディングページ


MediaStreamAudioDestinationNode: MediaStreamAudioDestinationNode() コンストラクター - Web API

MediaStreamAudioDestinationNode: MediaStreamAudioDestinationNode() コンストラクター
===========================================================================

Web Audio API の **`MediaStreamAudioDestinationNode()`** コンストラクターは、新しい `MediaStreamAudioDestinationNode` オブジェクトのインスタンスを生成します。

構文
--

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

### 引数

`context`

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

`options` 省略可

`MediaStreamAudioDestinationNode` に持たせる性質を定義するオブジェクトです。

`channelCount`

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

`channelCountMode`

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

`channelInterpretation`

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

例
-

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

const myDestination = new MediaStreamAudioDestinationNode(ac);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-mediastreamaudiodestinationnode-mediastreamaudiodestinationnode |

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

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


MediaStreamAudioDestinationNode: stream プロパティ - Web API

MediaStreamAudioDestinationNode: stream プロパティ
=============================================

`AudioContext` インターフェイスの `stream` プロパティは、ノード自身と同じ数のチャンネルを持つ単一の音声 `MediaStreamTrack` を持った `MediaStream` を表します。

このプロパティを用いて、ストリームを音声グラフから取り出し、Media Recorder などの他の構築に供給できます。

値
-

単一の音声トラックを持った `MediaStream` です。この音声トラックは、`kind` が `audio` である `MediaStreamTrack` です。

例
-

`AudioContext.createMediaStreamDestination()` に、`MediaStreamAudioDestinationNode` を生成し、その `stream` プロパティを録音する音声の音源として用いるサンプルコードがあります。

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-mediastreamaudiodestinationnode-stream |

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

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

関連情報
----

* Web Audio API の使用


SharedWorker() - Web API

SharedWorker()
==============

**`SharedWorker()`** コンストラクターは、指定された URL でスクリプトを実行する `SharedWorker` オブジェクトを作成します。このスクリプトは同一オリジンポリシーに従わなければなりません。

**メモ:** ブラウザーメーカー間で、 data URL が同じ元であるかどうかについての見解の相違があります。 Firefox 10.0 以降では data URL を受け入れることができますが、他のすべてのブラウザーではその限りではありません。

構文
--

```js
new SharedWorker(aURL)
new SharedWorker(aURL, name)
new SharedWorker(aURL, options)
```

### 引数

`aURL`

文字列で、ワーカーが実行するスクリプトの URL を表します。これは同一オリジンポリシーに従わなければなりません。

`name` 省略可

ワーカーのスコープを表す `SharedWorkerGlobalScope` の識別名を指定する文字列で、主にデバッグのために使用されます。

`options` 省略可

オブジェクトのインスタンスを作成する際に設定することができる、オプションプロパティを格納したオブジェクト。利用できるプロパティは以下のとおりです。

`type`

作成するワーカーの種類を指定する文字列です。この値には `classic` または `module` を指定することができます。指定しない場合、既定では `classic` が使用されます。

`credentials`

ワーカーに使用する資格情報の種類を指定する文字列です。値は `omit`、`same-origin`、`include` のいずれかです。指定しなかった場合、または type が `classic` の場合、既定では `omit` （資格情報は必要なし） が使用されます。

`name`

ワーカーのスコープを表す `SharedWorkerGlobalScope` の識別名を指定する文字列で、主にデバッグのために使用されます。

### 例外

`SecurityError` `DOMException`

ドキュメントがワーカーの開始を許可されていない場合、例えば URL が無効な構文であったり、同一オリジンポリシーに違反していたりする場合に発生します。

`NetworkError` `DOMException`

ワーカースクリプトの MIME 型が正しくない場合に発生します。常に `text/javascript` であるべきです（歴史的な理由から他の JavaScript MIME タイプも受け入れられるかもしれません）。

`SyntaxError` `DOMException`

`aURL` が解釈できない場合に発生します。

例
-

以下のコードでは、`SharedWorker()` コンストラクターを使用して `SharedWorker` オブジェクトを作成し、その後にそのオブジェクトを使用している様子を示しています。

```js
const myWorker = new SharedWorker("worker.js");

myWorker.port.start();

first.onchange = () => {
  myWorker.port.postMessage([first.value, second.value]);
  console.log("Message posted to worker");
};

second.onchange = () => {
  myWorker.port.postMessage([first.value, second.value]);
  console.log("Message posted to worker");
};

myWorker.port.onmessage = (e) => {
  result1.textContent = e.data;
  console.log("Message received from worker");
};
```

完全な例は、基本的な共有ワーカーの例（共有ワーカーを実行）を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-sharedworker-dev |

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

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

関連情報
----

* 所属先の `SharedWorker` インターフェイス。


SharedWorker: error イベント - Web API

SharedWorker: error イベント
========================

**`error`** は `SharedWorker` インターフェイスのイベントで、ワーカーでエラーが発生したときに発行されます。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

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

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

イベント型
-----

一般的な `Event` です。

例
-

以下のコードでは `SharedWorker` コンストラクターを使用して `SharedWorker()` オブジェクトを作成し、結果オブジェクトに `onerror` ハンドラーを設定しています。

```js
const mySharedWorker = new SharedWorker("shared-worker.js");

mySharedWorker.onerror = (event) => {
  console.error("ワーカーでエラーが発生しました。");
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # handler-abstractworker-onerror |

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

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


SharedWorker.port - Web API

SharedWorker.port
=================

**`port`** は `SharedWorker` インターフェイスのプロパティで、共有ワーカーを制御したり通信したりするために使用する `MessagePort` オブジェクトを返します。

### 値

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

例
-

次のコードスニペットでは、 `SharedWorker` オブジェクトを `SharedWorker()` コンストラクターを使用して生成しています。 `MessagePort` オブジェクトを`SharedWorker.port` プロパティ経由で使用することで、複数のスクリプトからワーカーにアクセスできます。 port は `start()` メソッドを使用して開始します。

```js
const myWorker = new SharedWorker("worker.js");
myWorker.port.start();
```

完全な例は、基本的な共有ワーカーの例（共有ワーカーを実行）を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-sharedworker-port-dev |

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

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

関連情報
----

* `SharedWorker`


GainNode: gain プロパティ - Web API

GainNode: gain プロパティ
====================

`GainNode` インターフェイスの `gain` プロパティは、適用するゲインを表す a-rate の `AudioParam` です。

値
-

`AudioParam` です。

**メモ:** 返される `AudioParam` は読み取り専用ですが、それが表す値は読み取り専用ではありません。

例
-

`BaseAudioContext.createGain()` に、`AudioContext` を用いて `GainNode` を作成し、その `gain` プロパティの値を変えることで音声を消音したり消音解除したりするサンプルコードがあります。

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-gainnode-gain |

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

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

関連情報
----

* Web Audio API の使用


GainNode: GainNode() コンストラクター - Web API

GainNode: GainNode() コンストラクター
=============================

Web Audio API の **`GainNode()`** コンストラクターは、新しい `GainNode` オブジェクトを作成します。これは音量の変更を表す `AudioNode` です。

構文
--

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

### 引数

`context`

`BaseAudioContext` (たとえば `AudioContext`) への参照です。

`options` 省略可

以下のオプションが指定できます。

`gain`

適用するゲインです。このパラメーターは a-rate で、公称の範囲は (-∞,+∞) です。デフォルト値は `1` です。

`channelCount`

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

`channelCountMode`

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

`channelInterpretation`

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

### 返値

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

仕様書
---

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

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

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


MediaTrackSupportedConstraints.volume - Web API

MediaTrackSupportedConstraints.volume
=====================================

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

`MediaTrackSupportedConstraints` 辞書の **`volume`** プロパティは読み取り専用の論理値で、 `MediaDevices.getSupportedConstraints()` が返すオブジェクトに存在（`true` に設定）するならば、ユーザーエージェントが `volume` 制約に対応しています。制約に対応していない場合、リストには含まれなくなりますので、この値が `false` になることはありません。

対応している制約の辞書は `navigator.mediaDevices.getSupportedConstraints()` を呼び出すことで取得できます。

### 値

ユーザーエージェントが `volume` 制約に対応している場合、このプロパティが辞書に現れます（値は常に `true`です）。このプロパティがない場合は、対応している制約の辞書から欠落しており、その値を見ようとすると `undefined` が返されます。

例
-
```

<div id="result"></div>
```

```
#result {
  font:
    14px "Arial",
    sans-serif;
}
```

```js
let result = document.getElementById("result");

if (navigator.mediaDevices.getSupportedConstraints().volume) {
  result.textContent = "Supported!";
} else {
  result.textContent = "Not supported!";
}
```

### 結果

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

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

関連情報
----

* メディアキャプチャとストリーム API
* `MediaDevices.getSupportedConstraints()`
* `MediaTrackSupportedConstraints`
* `MediaStreamTrack`


MediaTrackSupportedConstraints.height - Web API

MediaTrackSupportedConstraints.height
=====================================

`MediaTrackSupportedConstraints` 辞書の **`height`** プロパティは読み取り専用の論理値で、 `MediaDevices.getSupportedConstraints()` が返すオブジェクトに存在（`true` に設定）するならば、ユーザーエージェントが `height` 制約に対応しています。制約に対応していない場合、リストには含まれなくなりますので、この値が `false` になることはありません。

対応している制約の辞書は `navigator.mediaDevices.getSupportedConstraints()` を呼び出すことで取得できます。

### 値

ユーザーエージェントが `height` 制約に対応している場合、このプロパティが辞書に現れます（値は常に `true`です）。このプロパティがない場合は、対応している制約の辞書から欠落しており、その値を見ようとすると `undefined` が返されます。

例
-
```

<div id="result"></div>
```

```
#result {
  font:
    14px "Arial",
    sans-serif;
}
```

```js
let result = document.getElementById("result");

if (navigator.mediaDevices.getSupportedConstraints().height) {
  result.textContent = "Supported!";
} else {
  result.textContent = "Not supported!";
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediatracksupportedconstraints-height |

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

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

関連情報
----

* メディアキャプチャとストリーム API
* `MediaDevices.getSupportedConstraints()`
* `MediaTrackSupportedConstraints`
* `MediaStreamTrack`


MediaTrackSupportedConstraints.sampleRate - Web API

MediaTrackSupportedConstraints.sampleRate
=========================================

`MediaTrackSupportedConstraints` 辞書の **`sampleRate`** プロパティは読み取り専用の論理値で、 `MediaDevices.getSupportedConstraints()` が返すオブジェクトに存在（`true` に設定）するならば、ユーザーエージェントが `sampleRate` 制約に対応しています。制約に対応していない場合、リストには含まれなくなりますので、この値が `false` になることはありません。

対応している制約の辞書は `navigator.mediaDevices.getSupportedConstraints()` を呼び出すことで取得できます。

### 値

ユーザーエージェントが `sampleRate` 制約に対応している場合、このプロパティが辞書に現れます（値は常に `true`です）。このプロパティがない場合は、対応している制約の辞書から欠落しており、その値を見ようとすると `undefined` が返されます。

例
-
```

<div id="result"></div>
```

```
#result {
  font:
    14px "Arial",
    sans-serif;
}
```

```js
let result = document.getElementById("result");

if (navigator.mediaDevices.getSupportedConstraints().sampleRate) {
  result.textContent = "Supported!";
} else {
  result.textContent = "Not supported!";
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediatracksupportedconstraints-samplerate |

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

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

関連情報
----

* メディアキャプチャとストリーム API
* `MediaDevices.getSupportedConstraints()`
* `MediaTrackSupportedConstraints`
* `MediaStreamTrack`


MediaTrackSupportedConstraints.channelCount - Web API

MediaTrackSupportedConstraints.channelCount
===========================================

`MediaTrackSupportedConstraints` 辞書の **`channelCount`** プロパティは読み取り専用の論理値で、 `MediaDevices.getSupportedConstraints()` が返すオブジェクトに存在（`true` に設定）するならば、ユーザーエージェントが `channelCount` 制約に対応しています。制約に対応していない場合、リストには含まれなくなりますので、この値が `false` になることはありません。

対応している制約の辞書は `navigator.mediaDevices.getSupportedConstraints()` を呼び出すことで取得できます。

### 値

ユーザーエージェントが `channelCount` 制約に対応している場合、このプロパティが辞書に現れます（値は常に `true`です）。このプロパティがない場合は、対応している制約の辞書から欠落しており、その値を見ようとすると `undefined` が返されます。

例
-
```

<div id="result"></div>
```

```
#result {
  font:
    14px "Arial",
    sans-serif;
}
```

```js
let result = document.getElementById("result");

if (navigator.mediaDevices.getSupportedConstraints().channelCount) {
  result.textContent = "Supported!";
} else {
  result.textContent = "Not supported!";
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediatracksupportedconstraints-channelcount |

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

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

関連情報
----

* メディアキャプチャとストリーム API
* `MediaDevices.getSupportedConstraints()`
* `MediaTrackSupportedConstraints`
* `MediaStreamTrack`


MediaTrackSupportedConstraints.latency - Web API

MediaTrackSupportedConstraints.latency
======================================

`MediaTrackSupportedConstraints` 辞書の **`latency`** プロパティは読み取り専用の論理値で、 `MediaDevices.getSupportedConstraints()` が返すオブジェクトに存在（`true` に設定）するならば、ユーザーエージェントが `latency` 制約に対応しています。制約に対応していない場合、リストには含まれなくなりますので、この値が `false` になることはありません。

対応している制約の辞書は `navigator.mediaDevices.getSupportedConstraints()` を呼び出すことで取得できます。

### 値

ユーザーエージェントが `latency` 制約に対応している場合、このプロパティが辞書に現れます（値は常に `true`です）。このプロパティがない場合は、対応している制約の辞書から欠落しており、その値を見ようとすると `undefined` が返されます。

例
-
```

<div id="result"></div>
```

```
#result {
  font:
    14px "Arial",
    sans-serif;
}
```

```js
let result = document.getElementById("result");

if (navigator.mediaDevices.getSupportedConstraints().latency) {
  result.textContent = "Supported!";
} else {
  result.textContent = "Not supported!";
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediatracksupportedconstraints-latency |

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

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

関連情報
----

* メディアキャプチャとストリーム API
* `MediaDevices.getSupportedConstraints()`
* `MediaTrackSupportedConstraints`
* `MediaStreamTrack`


MediaTrackSupportedConstraints.deviceId - Web API

MediaTrackSupportedConstraints.deviceId
=======================================

`MediaTrackSupportedConstraints` 辞書の **`deviceId`** プロパティは読み取り専用の論理値で、 `MediaDevices.getSupportedConstraints()` が返すオブジェクトに存在（`true` に設定）するならば、ユーザーエージェントが `deviceId` 制約に対応しています。制約に対応していない場合、リストには含まれなくなりますので、この値が `false` になることはありません。

対応している制約の辞書は `navigator.mediaDevices.getSupportedConstraints()` を呼び出すことで取得できます。

### 値

ユーザーエージェントが `deviceId` 制約に対応している場合、このプロパティが辞書に現れます（値は常に `true`です）。このプロパティがない場合は、対応している制約の辞書から欠落しており、その値を見ようとすると `undefined` が返されます。

例
-
```

<div id="result"></div>
```

```
#result {
  font:
    14px "Arial",
    sans-serif;
}
```

```js
let result = document.getElementById("result");

if (navigator.mediaDevices.getSupportedConstraints().deviceId) {
  result.textContent = "Supported!";
} else {
  result.textContent = "Not supported!";
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediatracksupportedconstraints-deviceid |

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

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

関連情報
----

* メディアキャプチャとストリーム API
* `MediaDevices.getSupportedConstraints()`
* `MediaTrackSupportedConstraints`
* `MediaStreamTrack`


MediaTrackSupportedConstraints.noiseSuppression - Web API

MediaTrackSupportedConstraints.noiseSuppression
===============================================

`MediaTrackSupportedConstraints` 辞書の **`noiseSuppression`** プロパティは読み取り専用の論理値で、 `MediaDevices.getSupportedConstraints()` が返すオブジェクトに存在（`true` に設定）するならば、ユーザーエージェントが **`noiseSuppression`** 制約に対応しています。制約に対応していない場合、リストには含まれなくなりますので、この値が `false` になることはありません。

対応している制約の辞書は `navigator.mediaDevices.getSupportedConstraints()` を呼び出すことで取得できます。

`noiseSuppression` 制約は、ブラウザーがメディアトラックのゲイン（音量）を自動的に制御する機能を提供しているかどうかを示します。これは明らかに、個々の機器が同様に自動ゲインコントロールに対応しているかどうかに依存しています。

### 値

ユーザーエージェントが `noiseSuppression` 制約に対応している（すなわち、音声トラックのノイズ抑制に対応している）場合、このプロパティが辞書に現れます（値は常に `true`です）。このプロパティがない場合は、対応している制約の辞書から欠落しており、その値を見ようとすると `undefined` が返されます。

例
-

この例では、ブラウザーが `noiseSuppression` 制約に対応しているかどうかを表示します。
```

<div id="result"></div>
```

```
#result {
  font:
    14px "Arial",
    sans-serif;
}
```

```js
let result = document.getElementById("result");

if (navigator.mediaDevices.getSupportedConstraints().noiseSuppression) {
  result.textContent = "Supported!";
} else {
  result.textContent = "Not supported!";
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediatracksupportedconstraints-noisesuppression |

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

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

関連情報
----

* メディアキャプチャとストリーム API
* `MediaDevices.getSupportedConstraints()`
* `MediaTrackSupportedConstraints`
* `MediaStreamTrack`


MediaTrackSupportedConstraints.groupId - Web API

MediaTrackSupportedConstraints.groupId
======================================

`MediaTrackSupportedConstraints` 辞書の **`groupId`** プロパティは読み取り専用の論理値で、 `MediaDevices.getSupportedConstraints()` が返すオブジェクトに存在（`true` に設定）するならば、ユーザーエージェントが `groupId` 制約に対応しています。制約に対応していない場合、リストには含まれなくなりますので、この値が `false` になることはありません。

対応している制約の辞書は `navigator.mediaDevices.getSupportedConstraints()` を呼び出すことで取得できます。

### 値

ユーザーエージェントが `groupId` 制約に対応している場合、このプロパティが辞書に現れます（値は常に `true`です）。このプロパティがない場合は、対応している制約の辞書から欠落しており、その値を見ようとすると `undefined` が返されます。

例
-
```

<div id="result"></div>
```

```
#result {
  font:
    14px "Arial",
    sans-serif;
}
```

```js
let result = document.getElementById("result");

if (navigator.mediaDevices.getSupportedConstraints().groupId) {
  result.textContent = "Supported!";
} else {
  result.textContent = "Not supported!";
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediatracksupportedconstraints-groupid |

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

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

関連情報
----

* メディアキャプチャとストリーム API
* `MediaDevices.getSupportedConstraints()`
* `MediaTrackSupportedConstraints`
* `MediaStreamTrack`


MediaTrackSupportedConstraints.aspectRatio - Web API

MediaTrackSupportedConstraints.aspectRatio
==========================================

`MediaTrackSupportedConstraints` 辞書の **`aspectRatio`** プロパティは読み取り専用の論理値で、 `MediaDevices.getSupportedConstraints()` が返すオブジェクトに存在（`true` に設定）するならば、ユーザーエージェントが `aspectRatio` 制約に対応しています。制約に対応していない場合、リストには含まれなくなりますので、この値が `false` になることはありません。

対応している制約の辞書は `navigator.mediaDevices.getSupportedConstraints()` を呼び出すことで取得できます。

### 値

ユーザーエージェントが `aspectRatio` 制約に対応している場合、このプロパティが辞書に現れます（値は常に `true`です）。このプロパティがない場合は、対応している制約の辞書から欠落しており、その値を見ようとすると `undefined` が返されます。

例
-
```

<div id="result"></div>
```

```
#result {
  font:
    14px "Arial",
    sans-serif;
}
```

```js
let result = document.getElementById("result");

if (navigator.mediaDevices.getSupportedConstraints().aspectRatio) {
  result.textContent = "Supported!";
} else {
  result.textContent = "Not supported!";
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediatracksupportedconstraints-aspectratio |

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

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

関連情報
----

* メディアキャプチャとストリーム API
* `MediaDevices.getSupportedConstraints()`
* `MediaTrackSupportedConstraints`
* `MediaStreamTrack`


MediaTrackSupportedConstraints.frameRate - Web API

MediaTrackSupportedConstraints.frameRate
========================================

`MediaTrackSupportedConstraints` 辞書の **`frameRate`** プロパティは読み取り専用の論理値で、 `MediaDevices.getSupportedConstraints()` が返すオブジェクトに存在（`true` に設定）するならば、ユーザーエージェントが `frameRate` (en-US) 制約に対応しています。

制約に対応していない場合、リストには含まれなくなりますので、この値が `false` になることはありません。

`frameRate` 制約は、新しい映像トラックの映像フレームレートの許容上限と下限を設定したり、リクエストが成功するために提供されなければならない正確なフレームレートを指定するために使用することができます。このプロパティの値を確認することで、ユーザーエージェントがフレームレートによる映像トラック構成の制約を許可しているかどうかを判断できます。このプロパティがどのように使用できるかは、例を参照してください。

### 値

このプロパティは、ユーザーエージェントが `frameRate` 制約に対応している場合に、辞書に現れます。このプロパティが現れない場合、ユーザーエージェントはビデオトラックのフレームレートの制限を指定することを許可していません。

**メモ:** このプロパティが存在する場合は、常に `true` になります。

例
-

この簡単な例では、映像トラックを要求する際に、ブラウザがフレームレートの制約に対応しているかどうかを調べます。

### JavaScript

```js
let result = document.getElementById("result");

if (navigator.mediaDevices.getSupportedConstraints().frameRate) {
  result.textContent = "Supported!";
} else {
  result.textContent = "Not supported!";
}
```

### HTML

```html
<div id="result"></div>
```

### CSS

```css
#result {
  font:
    14px "Arial",
    sans-serif;
}
```

### 結果

ブラウザーが `frameRate` 制約に対応しているかどうかを示す出力は、次のとおりです。

この例は些細なものですが、「対応している」対「対応していない」という単純な出力をコードに置き換えることで、ユーザーと共有したい、あるいは一緒に作業したい視聴覚情報を表示するための代替方法を提供することができます。

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediatracksupportedconstraints-framerate |

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

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

関連情報
----

* メディアキャプチャとストリーム API
* `MediaDevices.getSupportedConstraints()`
* `MediaTrackSupportedConstraints`
* `MediaStreamTrack`


MediaTrackSupportedConstraints.sampleSize - Web API

MediaTrackSupportedConstraints.sampleSize
=========================================

`MediaTrackSupportedConstraints` 辞書の **`sampleSize`** プロパティは読み取り専用の論理値で、 `MediaDevices.getSupportedConstraints()` が返すオブジェクトに存在（`true` に設定）するならば、ユーザーエージェントが `sampleSize` 制約に対応しています。制約に対応していない場合、リストには含まれなくなりますので、この値が `false` になることはありません。

対応している制約の辞書は `navigator.mediaDevices.getSupportedConstraints()` を呼び出すことで取得できます。

### 値

ユーザーエージェントが `sampleSize` 制約に対応している場合、このプロパティが辞書に現れます（値は常に `true`です）。このプロパティがない場合は、対応している制約の辞書から欠落しており、その値を見ようとすると `undefined` が返されます。

例
-
```

<div id="result"></div>
```

```
#result {
  font:
    14px "Arial",
    sans-serif;
}
```

```js
let result = document.getElementById("result");

if (navigator.mediaDevices.getSupportedConstraints().sampleSize) {
  result.textContent = "Supported!";
} else {
  result.textContent = "Not supported!";
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediatracksupportedconstraints-samplesize |

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

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

関連情報
----

* メディアキャプチャとストリーム API
* `MediaDevices.getSupportedConstraints()`
* `MediaTrackSupportedConstraints`
* `MediaStreamTrack`


MediaTrackSupportedConstraints.facingMode - Web API

MediaTrackSupportedConstraints.facingMode
=========================================

`MediaTrackSupportedConstraints` 辞書の **`facingMode`** プロパティは読み取り専用の論理値で、 `MediaDevices.getSupportedConstraints()` が返すオブジェクトに存在（`true` に設定）するならば、ユーザーエージェントが `facingMode` 制約に対応しています。制約に対応していない場合、リストには含まれなくなりますので、この値が `false` になることはありません。

対応している制約の辞書は `navigator.mediaDevices.getSupportedConstraints()` を呼び出すことで取得できます。

### 値

ユーザーエージェントが `facingMode` 制約に対応している場合、このプロパティが辞書に現れます（値は常に `true`です）。このプロパティがない場合は、対応している制約の辞書から欠落しており、その値を見ようとすると `undefined` が返されます。

例
-
```

<div id="result"></div>
```

```
#result {
  font:
    14px "Arial",
    sans-serif;
}
```

```js
let result = document.getElementById("result");

if (navigator.mediaDevices.getSupportedConstraints().facingMode) {
  result.textContent = "Supported!";
} else {
  result.textContent = "Not supported!";
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediatracksupportedconstraints-facingmode |

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

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

関連情報
----

* メディアキャプチャとストリーム API
* `MediaDevices.getSupportedConstraints()`
* `MediaTrackSupportedConstraints`
* `MediaStreamTrack`


MediaTrackSupportedConstraints.autoGainControl - Web API

MediaTrackSupportedConstraints.autoGainControl
==============================================

`MediaTrackSupportedConstraints` 辞書の **`autoGainControl`** プロパティは読み取り専用の論理値で、 `MediaDevices.getSupportedConstraints()` が返すオブジェクトに存在（`true` に設定）するならば、ユーザーエージェントが **`autoGainControl`** 制約に対応しています。制約に対応していない場合、リストには含まれなくなりますので、この値が `false` になることはありません。

対応している制約の辞書は `navigator.mediaDevices.getSupportedConstraints()` を呼び出すことで取得できます。

`autoGainControl` 制約は、ブラウザーがメディアトラックのゲイン（音量）を自動的にコントロールする機能を提供しているかどうかを示します。これは明らかに、個々の機器が自動ゲインコントロールにも対応しているかどうかが条件となり、通常、マイクによって提供される機能です。

### 値

ユーザーエージェントが `aspectRatio` 制約に対応している場合、このプロパティが辞書に現れます（値は常に `true`です）。このプロパティがない場合は、対応している制約の辞書から欠落しており、その値を見ようとすると `undefined` が返されます。

例
-

この例では、ブラウザーが `autoGainControl` 制約に対応しているかどうかを表示します。
```

<div id="result"></div>
```

```
#result {
  font:
    14px "Arial",
    sans-serif;
}
```

```js
let result = document.getElementById("result");

if (navigator.mediaDevices.getSupportedConstraints().autoGainControl) {
  result.textContent = "Supported!";
} else {
  result.textContent = "Not supported!";
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediatracksupportedconstraints-autogaincontrol |

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

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

関連情報
----

* メディアキャプチャとストリーム API
* `MediaDevices.getSupportedConstraints()`
* `MediaTrackSupportedConstraints`
* `MediaStreamTrack`


MediaTrackSupportedConstraints.echoCancellation - Web API

MediaTrackSupportedConstraints.echoCancellation
===============================================

`MediaTrackSupportedConstraints` 辞書の **`echoCancellation`** プロパティは読み取り専用の論理値で、 `MediaDevices.getSupportedConstraints()` が返すオブジェクトに存在（`true` に設定）するならば、ユーザーエージェントが `echoCancellation` 制約に対応しています。制約に対応していない場合、リストには含まれなくなりますので、この値が `false` になることはありません。

対応している制約の辞書は `navigator.mediaDevices.getSupportedConstraints()` を呼び出すことで取得できます。

### 値

ユーザーエージェントが `echoCancellation` 制約に対応している場合、このプロパティが辞書に現れます（値は常に `true`です）。このプロパティがない場合は、対応している制約の辞書から欠落しており、その値を見ようとすると `undefined` が返されます。

例
-
```

<div id="result"></div>
```

```
#result {
  font:
    14px "Arial",
    sans-serif;
}
```

```js
let result = document.getElementById("result");

if (navigator.mediaDevices.getSupportedConstraints().echoCancellation) {
  result.textContent = "Supported!";
} else {
  result.textContent = "Not supported!";
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediatracksupportedconstraints-echocancellation |

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

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

関連情報
----

* メディアキャプチャとストリーム API
* `MediaDevices.getSupportedConstraints()`
* `MediaTrackSupportedConstraints`
* `MediaStreamTrack`


MediaTrackSupportedConstraints.width - Web API

MediaTrackSupportedConstraints.width
====================================

`MediaTrackSupportedConstraints` 辞書の **`width`** プロパティは読み取り専用の論理値で、 `MediaDevices.getSupportedConstraints()` が返すオブジェクトに存在（`true` に設定）するならば、ユーザーエージェントが `width` 制約に対応しています。制約に対応していない場合、リストには含まれなくなりますので、この値が `false` になることはありません。

対応している制約の辞書は `navigator.mediaDevices.getSupportedConstraints()` を呼び出すことで取得できます。

構文
--

```js
widthConstraintSupported = supportedConstraintsDictionary.width;
```

### 値

ユーザーエージェントが `width` 制約に対応している場合、このプロパティが辞書に現れます（値は常に `true`です）。このプロパティがない場合は、対応している制約の辞書から欠落しており、その値を見ようとすると `undefined` が返されます。

例
-
```

<div id="result"></div>
```

```
#result {
  font:
    14px "Arial",
    sans-serif;
}
```

```js
let result = document.getElementById("result");

if (navigator.mediaDevices.getSupportedConstraints().width) {
  result.textContent = "Supported!";
} else {
  result.textContent = "Not supported!";
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # dom-mediatracksupportedconstraints-width |

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

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

関連情報
----

* メディアキャプチャとストリーム API
* `MediaDevices.getSupportedConstraints()`
* `MediaTrackSupportedConstraints`
* `MediaStreamTrack`


GamepadPose.hasOrientation - Web API

GamepadPose.hasOrientation
==========================

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

`GamepadPose` (en-US) インターフェイスの **`hasOrientation`** 読み取り専用プロパティは、 `Gamepad` が方向情報を返すことができるかどうかを示す `Boolean` を返します。

構文
--

```js
var hasItGotOrientation = gamepadPoseInstance.hasOrientation;
```

### 値

`Boolean` 。

例
-

TBD

仕様書
---

| Specification |
| --- |
| Gamepad Extensions # dom-gamepadpose-hasorientation |

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

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

関連情報
----

* WebVR API
* Gamepad API


HTMLIFrameElement: referrerPolicy プロパティ - Web API

HTMLIFrameElement: referrerPolicy プロパティ
=======================================

**`HTMLIFrameElement.referrerPolicy`** プロパティは HTML の
 `<iframe>` 要素の `referrerpolicy` 属性を反映し、リソースの取得時にどのリファラーを送信するかを定義します。

値
-

* `no-referrer`
    + : `Referer` ヘッダーは完全に省略されます。リクエストと共に送信されるリファラー情報はありません。
* `no-referrer-when-downgrade`
    + : プロトコルのセキュリティレベルが変わらない場合（例: HTTP→HTTP、HTTPS→HTTPS）にはリファラーとして URL を送信し、セキュリティレベルの低い宛先（例: HTTPS→HTTP）には送信しません。
* `origin`
    + : どのような場合でも、この文書のオリジンだけをリファラーとして送信します。
     文書 `https://example.com/page.html` はリファラーとして `https://example.com/` を送ります。
* `origin-when-cross-origin`
    + : 同一オリジンリクエストを行う場合は完全な URL を送信し、それ以外の場合は文書のオリジンのみを送信します。
* `same-origin`
    + : リファラーは同一サイトオリジンには送信されますが、オリジン間リクエストではリファラー情報が送信されません。
* `strict-origin`
    + : プロトコルのセキュリティレベルが変わらない場合（例: HTTPS→HTTPS）だけ、文書のオリジンをリファラーとして送信し、セキュリティレベルの低い宛先（例: HTTPS→HTTP）には送信しないようにします。
* `strict-origin-when-cross-origin` (default)
    + : これは、ポリシーが指定されていない場合のユーザーエージェントの既定の動作です。同一オリジンリクエストを行う場合は完全な URL を送信し、プロトコルのセキュリティレベルが変わらない場合はオリジンのみを送信し（例: HTTPS→HTTPS）、セキュリティレベルの低い宛先にはヘッダーを送信しません（例: HTTPS→HTTP）。
* `unsafe-url`
    + : 同一オリジンまたはオリジン間リクエストを実行するときに、完全な URL を送信します。

**メモ:** このポリシーは、 TLS で保護されたリソースから安全でないオリジンへのオリジンとパスを漏洩します
 この設定の影響を慎重に検討してください。
例
-

```js
const iframe = document.createElement("iframe");
iframe.src = "/";
iframe.referrerPolicy = "unsafe-url";
const body = document.querySelector("body");
body.appendChild(iframe); // 完全な URL をリファラーとして使用して画像を取得
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-iframe-referrerpolicy |

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

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

関連情報
----

* `HTMLAnchorElement.referrerPolicy`,
 `HTMLAreaElement.referrerPolicy`,
 `HTMLAreaElement.referrerPolicy`


HTMLIFrameElement: contentWindow プロパティ - Web API

HTMLIFrameElement: contentWindow プロパティ
======================================

**`contentWindow`** プロパティは、HTMLIFrameElement が所属する Window オブジェクトを返します。この `Window` オブジェクトを使用して、iframe の文書や内部 DOM にアクセスすることができます。この属性は読み取り専用ですが、グローバルの `Window` オブジェクトのように操作することができます。

値
-

Window オブジェクト。

例
-

```js
const x = document.querySelector("iframe").contentWindow;
//x = window.frames[0];

x.document.querySelector("body").style.backgroundColor = "blue";
// 文書内の最初の iframe が青くなる
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-iframe-contentwindow |

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

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


HTMLIFrameElement: srcdoc プロパティ - Web API

HTMLIFrameElement: srcdoc プロパティ
===============================

**`srcdoc`** は `HTMLIFrameElement` インターフェイスのプロパティで、このページの内容を指定します。

例
-

```js
const iframe = document.createElement("iframe");
iframe.srcdoc = `<!DOCTYPE html><p>Hello World!</p>`;
document.body.appendChild(iframe);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-iframe-srcdoc |

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

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


HTMLIFrameElement: allowPaymentRequest プロパティ - Web API

HTMLIFrameElement: allowPaymentRequest プロパティ
============================================

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

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

**`allowPaymentRequest`** は `HTMLIFrameElement` インターフェイスのプロパティで、決済リクエスト API がクロスオリジンの iframe 内で起動できるかどうかを示す論理値を返します。

値
-

論理値です。

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

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

関連情報
----

* 決済リクエスト API


HTMLIFrameElement: csp プロパティ - Web API

HTMLIFrameElement: csp プロパティ
============================

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

**`csp`** は `HTMLIFrameElement` インターフェイスのプロパティで、埋め込まれる文書が従い支配を受けるコンテンツセキュリティポリシーを返します。

値
-

コンテンツセキュリティポリシーです。

仕様書
---

| Specification |
| --- |
| Content Security Policy: Embedded Enforcement # ref-for-dom-htmliframeelement-csp |

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

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


HTMLIFrameElement: credentialless プロパティ - Web API

HTMLIFrameElement: credentialless プロパティ
=======================================

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

**`credentialless`** は `HTMLIFrameElement` インターフェイスのプロパティで、この `<iframe>` が無信頼であるどうか、すなわち内部の文書が新しい、一時的なコンテキストで読み込まれることを意味します。

これらのコンテキストは、そのオリジンに関連付けられたネットワーク、クッキー、ストレージデータにアクセスすることはできません。最上位の文書が変わるごとに新しくなります。つまり、格納されたデータは、ユーザーがページから離れたり、再読み込みしたりすると、アクセスできなくなります。

その代わりに `Cross-Origin-Embedder-Policy` (COEP) の埋め込みルールを解除することができ、COEP を設定した文書でも、そうでないサードパーティの文書を埋め込むことができます。

値
-

論理値です。既定値は `false` です。`<iframe>` を信用させないようにするには `true` に設定してください。

例
-

### 取得

次のようにして視覚情報のない `<iframe>` を指定します。

```html
<iframe
 src="https://en.wikipedia.org/wiki/Spectre\_(security\_vulnerability)"
 title="Spectre vulnerability Wikipedia page"
 width="960"
 height="600"
 credentialless></iframe>
```

`credentialless` プロパティの値を返します。

```js
const iframeElem = document.querySelector("iframe");
console.log(iframeElem.credentialless); // 対応しているブラウザーでは true が返る
```

### 設定

こちらでは、HTML では詳細を最小限に設定します。

```html
<iframe width="960" height="600"> </iframe>
```

`<iframe>` の中身を読み込む際に、スクリプトから `credentialless` を `true` に設定します。

```js
const iframeElem = document.querySelector("iframe");

iframeElem.credentialless = true;
iframeElem.title = "Spectre vulnerability Wikipedia page";
iframeElem.src =
  "https://en.wikipedia.org/wiki/Spectre\_(security\_vulnerability)";
```

仕様書
---

| Specification |
| --- |
| Iframe credentialless # dom-htmliframeelement-credentialless |

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

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

関連情報
----

* 視覚情報のない iframe
* `<iframe>`


HTMLIFrameElement: contentDocument プロパティ - Web API

HTMLIFrameElement: contentDocument プロパティ
========================================

iframe とその iframe の親文書が同一オリジンであった場合、`Document`（すなわち、インラインフレーム内の閲覧コンテキスト内にあるアクティブな文書）を返します。そうでなければ `null` を返します。

contentDocument の例
------------------

```js
const iframeDocument = document.querySelector("iframe").contentDocument;

iframeDocument.body.style.backgroundColor = "blue";
// これにより iframe が青くなる
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-iframe-contentdocument |

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

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


HTMLIFrameElement: src プロパティ - Web API

HTMLIFrameElement: src プロパティ
============================

**`HTMLIFrameElement.src`** プロパティは、この `<iframe>` 要素の HTML の `referrerpolicy` 属性を反映し、リソースを読み取る際にどのリファラーを送信するかを定義します。

構文
--

```js
refStr = iframeElt.src
iframeElt.src= refStr
```

例
-

```js
const iframe = document.createElement("iframe");
iframe.src = "/";
const body = document.querySelector("body");
body.appendChild(iframe); // 完全な URL をリファラーとして使用して画像を読み取り
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-iframe-src |

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

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

関連情報
----

* `HTMLAnchorElement.src`
* `HTMLAreaElement.src`
* `HTMLAreaElement.src`.


HTMLIFrameElement: featurePolicy プロパティ - Web API

HTMLIFrameElement: featurePolicy プロパティ
======================================

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

**`featurePolicy`** は `HTMLIFrameElement` インターフェイスの読み取り専用プロパティで、特定のフレームに適用される権限ポリシーをイントロスペクトするための単純な API を提供する `FeaturePolicy` (en-US) インターフェイスを返します。

値
-

子のフレームに適用される権限ポリシーを調べるために使用できる `FeaturePolicy` (en-US) オブジェクトです。

仕様書
---

#### No specification found

No specification data found for `api.HTMLIFrameElement.featurePolicy`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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


ClipboardEvent: clipboardData プロパティ - Web API

ClipboardEvent: clipboardData プロパティ
===================================

**`ClipboardEvent.clipboardData`** プロパティは、`DataTransfer` オブジェクトを保持し、次のように使用します。

* クリップボードに置かれるデータを `cut` および `copy` のイベントハンドラーから指定するため。ふつう、`setData(format, data)` の呼び出しで行います。
* 貼り付けられるデータを `paste` イベントハンドラーから取得するため。ふつう、`getData(format)` の呼び出しで行います。

詳しい情報は、`cut`、`copy`、`paste` イベントのドキュメントを参照してください。

値
-

`DataTransfer` オブジェクト。

仕様書
---

| Specification |
| --- |
| Clipboard API and events # clipboardevent-clipboarddata |

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

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

関連情報
----

* Copy 関連イベント： `copy`, `cut`, `paste`
* 所属先の `ClipboardEvent` インターフェイス
* クリップボード API


ClipboardEvent: ClipboardEvent() コンストラクター - Web API

ClipboardEvent: ClipboardEvent() コンストラクター
=========================================

**`ClipboardEvent()`** コンストラクターは、新たに生成された `ClipboardEvent` を返します。これは、`cut` や `copy`、`paste` イベントで変更されたクリップボード関連の情報を提供するイベントを表します。

構文
--

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

### 引数

`type`

文字列で、`ClipboardEvent` の型を表します。これは `copy`, `cut`, `paste` の何れかで、大文字小文字を区別します。

`options` 省略可

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

`clipboardData` 省略可

`DataTransfer` で、このクリックボードイベントに関連付けられたものです。既定値は `null` です。

`dataType`
Non-standard
 省略可

文字列で、`data` 引数に含まれるデータの MIME タイプを指定します。既定値は `""` です。

`data`
Non-standard
 省略可

文字列で、このクリップボードイベントに関連付けられたデータです。既定値は `""` です。

### 返値

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

仕様書
---

| Specification |
| --- |
| Clipboard API and events # dom-clipboardevent-clipboardevent |

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

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

関連情報
----

* Copy 関連イベント： `copy`, `cut`, `paste`
* 所属先の `ClipboardEvent` インターフェイス
* クリップボード API


WorkerLocation: search プロパティ - Web API

WorkerLocation: search プロパティ
============================

**`search`** は `WorkerLocation` オブジェクトのプロパティで、このワーカーの位置の検索文字列 (`search`) 部分を返します。

値
-

文字列です。

例
-

```js
// https://developer.mozilla.org/ja/docs/Web?t=67 のページにあるウェブワーカーにて
const result = location.search; // Returns:'?t=67'
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-workerlocation-search |

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

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

関連情報
----

* 所属先の `WorkerLocation`


WorkerLocation: protocol プロパティ - Web API

WorkerLocation: protocol プロパティ
==============================

**`protocol`** は `WorkerLocation` オブジェクトのプロパティで、このワーカーの位置のプロトコル (`protocol`) 部分を返します。

値
-

文字列です。

例
-

```js
// https://developer.mozilla.org/ja/docs/Web のページにあるウェブワーカーにて
const result = location.protocol; // 'https:' を返す
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-workerlocation-protocol |

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

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

関連情報
----

* 所属先の `WorkerLocation`


WorkerLocation: toString() メソッド - Web API

WorkerLocation: toString() メソッド
===============================

**`toString()`** は `WorkerLocation` オブジェクトの文字列化メソッドで、このワーカーの位置のシリアライズされた `URL` の入った文字列を返します。これは `WorkerLocation.href` と同等のものです。

構文
--

```js
toString()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

```js
// https://developer.mozilla.org/ja/docs/Web のページにあるウェブワーカーにて
const result = location.toString(); // 'https://developer.mozilla.org/ja/docs/Web' を返す
```

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

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

関連情報
----

* 所属先の `WorkerLocation`


WorkerLocation: pathname プロパティ - Web API

WorkerLocation: pathname プロパティ
==============================

**`pathname`** は `WorkerLocation` オブジェクトのプロパティで、このワーカーの場所のパス名 (`pathname`) 部分を返します。

値
-

文字列です。

例
-

```js
// https://developer.mozilla.org/ja/docs/Web のページにあるウェブワーカーにて
const result = location.pathname; // '/ja/docs/Web' を返す
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-workerlocation-pathname |

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

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

関連情報
----

* 所属先の `WorkerLocation`


WorkerLocation: hash プロパティ - Web API

WorkerLocation: hash プロパティ
==========================

**`hash`** は `WorkerLocation` オブジェクトのプロパティで、ワーカーの位置のハッシュ部分 (`hash`) を返します。

値
-

文字列です。

例
-

```js
// https://developer.mozilla.org/ja/docs/Web/API/WorkerLocation/hash#examples のページにあるウェブワーカーにて
const result = location.hash; // '#examples' を返す
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-workerlocation-hash |

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

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

関連情報
----

* 所属先の `WorkerLocation`


WorkerLocation: href プロパティ - Web API

WorkerLocation: href プロパティ
==========================

**`href`** は `WorkerLocation` オブジェクトのプロパティで、ワーカーの位置のシリアライズされた `URL` の入った文字列を返します。

値
-

文字列です。

例
-

```js
// https://developer.mozilla.org/ja/docs/Web のページにあるウェブワーカーにて
const result = location.href; // 'https://developer.mozilla.org/ja/docs/Web' を返す
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-workerlocation-href |

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

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

関連情報
----

* 所属先の `WorkerLocation`


WorkerLocation: origin プロパティ - Web API

WorkerLocation: origin プロパティ
============================

**`origin`** は `WorkerLocation` オブジェクトのプロパティで、このワーカーのオリジン (`origin`) を返します。

値
-

文字列です。

例
-

```js
// On this page, returns the origin
const result = self.location.origin; // 'https://developer.mozilla.org:443' を返す
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-workerlocation-origin |

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

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

関連情報
----

* 所属先の `WorkerLocation`


WorkerLocation: port プロパティ - Web API

WorkerLocation: port プロパティ
==========================

**`port`** は `WorkerLocation` オブジェクトのプロパティで、このワーカーの位置のポート番号 (`port`) 部分を返します。

値
-

文字列です。

例
-

```js
// http://localhost:8080/ のページにあるウェブワーカーにて
const result = location.port; // '8080' を返す
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-workerlocation-port |

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

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

関連情報
----

* 所属先の `WorkerLocation`


WorkerLocation: hostname プロパティ - Web API

WorkerLocation: hostname プロパティ
==============================

**`hostname`** は `WorkerLocation` オブジェクトのプロパティで、ワーカーの位置のホスト名 (`hostname`) の部分を返します。

値
-

文字列です。

例
-

```js
// http://localhost:8080/ のページにあるウェブワーカーにて
const result = location.hostname; // 'localhost' を返す
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-workerlocation-hostname |

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

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

関連情報
----

* 所属先の `WorkerLocation`


WorkerLocation: host プロパティ - Web API

WorkerLocation: host プロパティ
==========================

**`host`** は `WorkerLocation` オブジェクトのプロパティで、ワーカーの位置のホスト部分 (`host`) を返します。

値
-

文字列です。

例
-

```js
// http://localhost:8080/ のページにあるウェブワーカーにて
const result = location.host; // 'localhost:8080' を返す
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-workerlocation-host |

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

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

関連情報
----

* 所属先の `WorkerLocation`


HTMLButtonElement: labels プロパティ - Web API

HTMLButtonElement: labels プロパティ
===============================

**`HTMLButtonElement.labels`** は読み取り専用プロパティで、この
 `<button>` 要素に関連付けられた `<label>` 要素を `NodeList` で返します。

値
-

`NodeList` で、この `<button>` 要素に関連付けられた `<label>` 要素を返します。

例
-

### HTML

```html
<label id="label1" for="test">Label 1</label>
<button id="test">Button</button>
<label id="label2" for="test">Label 2</label>
```

### JavaScript

```js
window.addEventListener("DOMContentLoaded", () => {
  const button = document.getElementById("test");
  for (const label of button.labels) {
    console.log(label.textContent); // "Label 1" and "Label 2"
  }
});
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-lfe-labels-dev |

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

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


HTMLButtonElement: popoverTargetElement プロパティ - Web API

HTMLButtonElement: popoverTargetElement プロパティ
=============================================

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

**`popoverTargetElement`** は `HTMLButtonElement` インターフェイスのプロパティで、制御ボタンで制御されるポップオーバー要素を取得および設定します。

これは JavaScript において HTML の `popovertarget` 属性に相当するものです。

値
-

DOM 内でのポップオーバー要素への参照です。

例
-

```js
function supportsPopover() {
  return HTMLElement.prototype.hasOwnProperty("popover");
}

const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");

const popoverSupported = supportsPopover();

if (popoverSupported) {
  popover.popover = "auto";
  toggleBtn.popoverTargetElement = popover;
  toggleBtn.popoverTargetAction = "toggle";
} else {
  console.log("Popover API not supported.");
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-popovertargetelement |

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

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

関連情報
----

* ポップオーバー API


HTMLButtonElement: popoverTargetAction プロパティ - Web API

HTMLButtonElement: popoverTargetAction プロパティ
============================================

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

**`popoverTargetAction`** は `HTMLButtonElement` インターフェイスのプロパティで、この制御ボタンで制御されるポップオーバー要素で実行されるアクション（`"hide"`、`"show"`、`"toggle"` の何れか）を取得および設定します。

これは HTML の `popovertargetaction` 属性の値を反映します。

値
-

列挙値です。取りうる値は次の通りです。

`"hide"`

このボタンは表示中のポップオーバーを非表示にします。すでに非表示のポップオーバーを非表示にしようとした場合は、何も行われません。

`"show"`

このボタンは非表示のポップオーバーを表示します。すでに表示中のポップオーバーを表示させようとした場合は、何も行われません。

`"toggle"`

このボタンはポップオーバーを表示と非表示の間でトグル切り替えします。ポップオーバーが非表示の場合は、表示されます。ポップオーバーが表示中の場合は、非表示になります。`popoverTargetAction` が設定されていない場合、`"toggle"` がこの制御ボタンで行われる既定のアクションになります。

例
-

```js
function supportsPopover() {
  return HTMLElement.prototype.hasOwnProperty("popover");
}

const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");

const popoverSupported = supportsPopover();

if (popoverSupported) {
  popover.popover = "auto";
  toggleBtn.popoverTargetElement = popover;
  toggleBtn.popoverTargetAction = "toggle";
} else {
  console.log("Popover API not supported.");
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-popovertargetaction |

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

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

関連情報
----

* ポップオーバー API


HTMLButtonElement: disabled プロパティ - Web API

HTMLButtonElement: disabled プロパティ
=================================

**`HTMLButtonElement.disabled`** プロパティはこのコントロールが無効であるかどうか、すなわちクリックを受け付けない状態であるかどうかを示します。

値
-

論理値です。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-fe-disabled |

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

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