recursal/MDN huggingface dataset:
IDBIndex: openCursor() メソッド
===========================

`IDBIndex` インターフェイスの **`openCursor()`** メソッドは、`IDBRequest` オブジェクトを返し、別スレッドで、指定のキー範囲を走査するカーソルを生成します。

このメソッドは、指定された方向に基づいて、カーソルの位置を適切なレコードに設定します。

キー範囲が指定されないか `null` の場合は、範囲は全レコードを含みます。

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

構文
--


```js
openCursor()
openCursor(range)
openCursor(range, direction)
```

### 引数

`range` 省略可

カーソルの範囲として使用するキーまたは `IDBKeyRange` です。省略した場合は、このオブジェクトストア内の全レコードを選択するキー範囲になります。

`direction` 省略可

カーソルの方向です。取りうる値は、IDBCursor の定数を参照してください。

### 返値

この操作に関係する今後のイベントが発火する `IDBRequest` オブジェクトです。

操作に成功した場合は、この要求の `result` プロパティの値は以下になります。

* 与えられたクエリーにマッチする最初のレコードを指す `IDBCursorWithValue` オブジェクト
* マッチするレコードが見つからない場合は `null`
### 例外

このメソッドは、以下の種類のいずれかの `DOMException` を投げる可能性があります。

`TransactionInactiveError` `DOMException`

この `IDBIndex` のトランザクションが実行中でないとき投げられます。

`TypeError`

引数 `direction` の値が無効であるとき投げられます。

`DataError` `DOMException`

与えられたキーまたはキー範囲が無効なキーを含むとき投げられます。

`InvalidStateError` `DOMException`

この `IDBIndex` が削除されたか取り除かれたとき投げられます。

例
-

以下の例では、トランザクションとオブジェクトストアを開き、シンプルな連絡先データベースからインデックス `lName` を取得します。そして、このインデックスで `openCursor()` により基本的なカーソルを開きます。これは、返されるレコードが主キーではなくこのインデックスに基づいてソートされる以外、`ObjectStore` で直接 `IDBObjectStore.openCursor` を用いてカーソルを開くのと同じように動きます。

最後に、各レコードを走査し、データを HTML テーブルに挿入します。動く例全体は、IndexedDB-examples デモレポジトリーを参照してください。(動く例を見る)


```js
function displayDataByIndex() {
  tableEntry.innerHTML = "";
  const transaction = db.transaction(["contactsList"], "readonly");
  const objectStore = transaction.objectStore("contactsList");

  const myIndex = objectStore.index("lName");

  myIndex.openCursor().onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const tableRow = document.createElement("tr");
      tableRow.innerHTML =
        `<td>${cursor.value.id}</td>` +
        `<td>${cursor.value.lName}</td>` +
        `<td>${cursor.value.fName}</td>` +
        `<td>${cursor.value.jTitle}</td>` +
        `<td>${cursor.value.company}</td>` +
        `<td>${cursor.value.eMail}</td>` +
        `<td>${cursor.value.phone}</td>` +
        `<td>${cursor.value.age}</td>`;
      tableEntry.appendChild(tableRow);

      cursor.continue();
    } else {
      console.log("全エントリーを表示しました。");
    }
  };
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbindex-opencursor② |

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

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

関連情報
----

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

`IDBIndex` インターフェイスの **`getAllKeys()`** メソッドは、非同期でインデックス内の全オブジェクトの主キーを取得し、要求オブジェクトの `result` に設定します。

構文
--


```js
getAllKeys()
getAllKeys(query)
getAllKeys(query, count)
```

### 引数

`query` 省略可

取得するキーを特定するキーもしくは `IDBKeyRange` です。この値が `null` または省略された場合は、ブラウザーは無限のキー範囲を用います。

`count` 省略可

返すレコードの数です。この値が問い合わせ結果のレコード数を超える場合は、ブラウザーは最初のアイテムのみを取得します。この値が `0` 未満や `2^32 - 1` 超の場合は、`TypeError` 例外が投げられます。

### 返値

この操作に関係する今後のイベントが発火する `IDBRequest` オブジェクトです。

操作に成功した場合は、この要求の `result` プロパティの値は与えられたクエリーにマッチする全レコード (`count` が指定された場合は `count` の値まで) のキーの `Array` になります。

### 例外

このメソッドは、以下の種類のいずれかの `DOMException` を投げる可能性があります。

`TransactionInactiveError` `DOMException`

この `IDBIndex` のトランザクションが実行中でないとき投げられます。

`InvalidStateError` `DOMException`

この `IDBIndex` が削除されたか取り除かれたとき投げられます。

引数 `count` が `0` から `2^32 - 1` の範囲 (両端を含む) 外のときは、`TypeError` 例外が投げられます。

例
-


```js
const myIndex = objectStore.index("index");
const getAllKeysRequest = myIndex.getAllKeys();
getAllKeysRequest.onsuccess = () => {
  console.log(getAllKeysRequest.result);
};
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbindex-getallkeys① |

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

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

関連情報
----

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

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

`MIDIConnectionEvent` インターフェイスの読み取り専用プロパティ **`port`** は、切断または接続されたポートを返します。

値
-

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

例
-

`Navigator.requestMIDIAccess()` メソッドは、`MIDIAccess` オブジェクトで解決する `Promise` を返します。ポートの状態が変わると、`MIDIConnectionEvent` が `statechange` イベントに渡されます。これにより、ポートの情報をコンソールに出力できます。


```js
navigator.requestMIDIAccess().then((access) => {
  access.onstatechange = (event) => {
    console.log(event.port.name, event.port.manufacturer, event.port.state);
  };
});
```

仕様書
---

| Specification |
| --- |
| Web MIDI API # dom-midiconnectionevent-port |

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

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

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

**`MIDIConnectionEvent()`** コンストラクターは、新しい `MIDIConnectionEvent` オブジェクトを生成します。イベントは新しいポートが利用可能になった時に生成され、オブジェクトが `statechange` イベントに渡されるので、通常このコンストラクターは使用されません。

構文
--


```js
new MIDIConnectionEvent(type)
new MIDIConnectionEvent(type, midiConnectionEventInit)
```

### 引数

`type`

`"connect"` または `"disconnect"` のいずれかの文字列です。

`midiConnectionEventInit` 省略可

以下のフィールドを含む辞書です。

`port`

接続または切断されたポートを表す `MIDIPort` のインスタンスです。

`bubbles` 省略可

イベントがバブリングするかを表す論理値です。デフォルトは `false` です。

`cancelable` 省略可

イベントがキャンセル可能かを表す論理値です。デフォルトは `false` です。

`composed` 省略可

イベントがシャドールートより外側のリスナーで発火するかを表す論理値です。(詳細は `Event.composed` を参照してください) デフォルトは `false` です。


仕様書
---

| Specification |
| --- |
| Web MIDI API # dom-midiconnectionevent-constructor |

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

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

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

メイン画面の左端から現在の画面の左端までの距離をピクセル単位で返します。

値
-

数値です。

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

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

関連情報
----

* `screen.top`
Screen.top
==========

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

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

現在の画面の上端からの距離をピクセル単位で返します。

値
-

数値です。

仕様書
---

仕様書の一部ではありません。

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

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

関連情報
----

* `Screen.left`
Screen.availLeft
================

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

画面の左端から利用できる最初の有効ピクセルを返します。

値
-

数値です。

例
-


```js
let setX = window.screen.width - window.screen.availLeft;
let setY = window.screen.height - window.screen.availTop;
window.moveTo(setX, setY);
```

メモ
--

ほとんどの場合においてこのプロパティは、 0 を返します。

このプロパティを 2 画面で使用した場合、右側の画面については左側の画面の幅のピクセル数の値（したがって、右側の画面の左端の X 座標を示す）として評価されます。

Windows では、このプロパティはどの画面が主画面として設定されているかによって異なり、主画面に対して左端の利用可能なピクセルのX座標を返します。つまり、主画面の左端は、左端の画面でなくても常に X 座標が 0 になります。副画面が主画面の左側にある場合は、補正するために負の X 座標になります。

[1] [2] - 左の画面では *availLeft* は **0** を返し、右の画面では左の画面の **width** を返す

[2] [1] - 左の画面では *availLeft* は右画面の **-width** を返し、右の画面では **0** を返す

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

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

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

固定あるいは半固定されているユーザーインターフェイス部分を含まない、最初のピクセルの Y 座標を示します。

値
-

数値です。

例
-


```js
let setX = window.screen.width - window.screen.availLeft;
let setY = window.screen.height - window.screen.availTop;
window.moveTo(setX, setY);
```

メモ
--

ほとんどの場合において、このプロパティは、 `0` を返します。

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CookieStore: set() メソッド
=======================

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

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

**`set()`** は `CookieStore` インターフェイスのメソッドで、渡された名前またはオプションオブジェクトに一致する Cookie のリストを返します。

構文
--


```js
set(name, value)
set(options)
```

### 引数

このメソッドは、以下のいずれかが必要です。

`name`

Cookie の名前の文字列です。

`value`

Cookie の値の文字列です。

または

`options`

オブジェクトは次のものを含みます。

`domain` 省略可

Cookie のドメインが入った文字列です。

`expires` 省略可

ミリ秒単位の Unix 時間によるタイムスタンプで、Cookie の有効期限が入ります。

`name`

Cookie の名前が入った文字列です。

`partitioned` 省略可

論理値で、既定値は `false` です。`true` に設定すると、設定された Cookie はパーティション化された Cookie になります。詳しくは Cookies Having Independent Partitioned State (CHIPS) (en-US) を参照してください。

`path` 省略可

Cookie のパスの入った文字列です。

`sameSite` 省略可

以下の `SameSite` のいずれかの値です。

`"strict"`

Cookie は、ファーストパーティのコンテキストでのみ送信され、サードパーティのウェブサイトによるリクエストと一緒に送信されることはありません

`"lax"`

Cookie は、通常のクロスサイトサブクエスト（例えば、画像やフレームをサードパーティのサイトにロードするため）には送信されません。しかし、ユーザーが元のサイト内を移動しているとき（すなわち、リンクをたどっているとき）には送信されます。

`"none"`

Cookie は、すべてのコンテキストで送信されます。


`value`

Cookie の値が入った文字列です。


### 返値

Cookie の設定が完了すると `Undefined` に解決される `Promise` です。

### 例外

`TypeError`

与えられた値での Cookie の設定に失敗した場合に発生します。

`SecurityError` の `DOMException`

オリジンが URL に serialize (en-US) されない場合に発生します。

例
-

次の例では `name`、`value`、`expires`、`domain` を持つオブジェクトを渡して Cookie を設定します。


```js
const day = 24 \* 60 \* 60 \* 1000;
cookieStore.set({
  name: "cookie1",
  value: "cookie1-value",
  expires: Date.now() + day,
  domain: "example.com",
});
```

仕様書
---

| Specification |
| --- |
| Cookie Store API # dom-cookiestore-set |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CookieStore: delete() メソッド
==========================

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

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

**`delete()`** は `CookieStore` インターフェイスのメソッドで、与えられた名前またはオプションオブジェクトを持つ Cookie を削除します（下記参照）。`delete()` メソッドは日付を過去のものに変更することで Cookie を失効させます。

構文
--


```js
delete(name)
delete(options)
```

### 引数

このメソッドは、以下のいずれかが必要です。

`name`

Cookie の名前が入っている文字列です。

または

`options`

オブジェクトは以下のプロパティを含みます。

`name`

Cookie の名前が入っている文字列です。

`partitioned` 省略可

論理値で、既定値は `false` です。`true` に設定すると、削除するクッキーがパーティション化 Cookie であることを表します。詳しくは Cookies Having Independent Partitioned State (CHIPS) (en-US) を参照してください。

`path`省略可

パスを含む文字列です。

`url`省略可

Cookie の URL が入っている文字列です。


**メモ:** `url` オプションは、特定の URL をスコープとした Cookie の変更を可能にします。サービスワーカーは、自分のスコープ下にある任意の URL に送信される Cookie を取得できます。ドキュメントからは現在の URL の Cookie しか取得できないので、ドキュメントコンテキストで有効な URL はドキュメントの URL のみとなります。

### 返値

削除が完了すると `undefined` に解決される `Promise` です。

### 例外

`TypeError`

与えられた `name` や `options` で表される Cookie の削除に失敗した場合に発生します。

例
-

この例では、`delete()` メソッドに名前を渡すことで、Cookie を削除しています。


```js
let result = cookieStore.delete("cookie1");
console.log(result);
```

仕様書
---

| Specification |
| --- |
| Cookie Store API # dom-cookiestore-delete |

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

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

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

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

`change` イベントは、任意の Cookie に変更が加えられると、`CookieStore` オブジェクトで発生します。

構文
--

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


```js
cookieStore.addEventListener("change", (event) => { })

cookieStore.onchange = (event) => { }
```

例
-

次のように `cookieStore` インスタンスに対して `addEventListener()` を使ってハンドラーを追加すると、Cookie が変更されたときに通知を受けることができます。


```js
cookieStore.addEventListener("change", (event) => {
  console.log("1 change event");
});
```


あるいは、`CookieStore.onchange` イベントハンドラープロパティを使用して、`change` イベントのハンドラーを確立することができます。


```js
cookieStore.onchange = (event) => {
  console.log("1 change event");
};
```

仕様書
---

| Specification |
| --- |
| Cookie Store API # intro-monitor |
| Cookie Store API # dom-cookiestore-onchange |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CookieStore: getAll() メソッド
==========================

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

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

**`getAll()`** は `CookieStore` インターフェイスのメソッドで、渡された名前またはオプションに一致する Cookie のリストを返します。何も引数を渡さなければ、現在のコンテキストのすべての Cookie を返します。

構文
--


```js
getAll(name)
getAll(options)
```

### 引数

`name` 省略可

Cookie の名前が入っている文字列です。

または

`options` 省略可

以下のプロパティを持つ文字列です。

`name`

Cookie の名前が入っている文字列です。

`url`

Cookie の URL が入っている文字列です。


**メモ:** `url` オプションは、特定の URL をスコープとした Cookie の変更を可能にします。サービスワーカーは、自分のスコープ下にある任意の URL に送信される Cookie を取得できます。文書からは現在の URL の Cookie しか取得できないので、文書コンテキストで有効な URL は文書の URL のみとなります。

### 返値

指定された名前またはオプションに一致するクッキーを表すオブジェクトの配列で解決する `Promise` です。

各オブジェクトは、以下のプロパティを持ちます。

`domain`

クッキーのドメインを持つ文字列です。

`expires`

クッキーの期限が入ったタイムスタンプで、ミリ秒単位の Unix 時刻です。

`name`

クッキーの名前が入った文字列です。

`partitioned`

論理値で、クッキーがパーティション化クッキーであるか (`true`) そうでないか (`false`) を表します。詳しくは Cookies Having Independent Partitioned State (CHIPS) (en-US) を参照してください。

`path`

クッキーのパスが入った文字列です。

`sameSite`

以下の `SameSite` 値のうちの何れかです。

`"strict"`

クッキーはファーストパーティのコンテキストにのみ送られ、サードパーティのウェブサイトに対するリクエストには送られません。

`"lax"`

クッキーは、通常のサイト間サブリクエスト（例えば、サードパーティーのサイトに画像やフレームを読み込むためのもの）には送信されませんが、ユーザーがオリジン間サイト内を移動しているとき（リンクを追跡するとき）には送信されます。

`"none"`

クッキーはすべてのコンテキストで、送信されます。


`secure`

論理値で、このクッキーが安全なコンテキストでのみ使用されるか (`true`) またはそうではないか (`false`) を示します。

`value`

このクッキーの値が入った文字列です。

### 例外

`TypeError`

与えられた `name` や `options` で表される Cookie の取得に失敗した場合にスローされます。

例
-

この例では、引数なしで `getAll()` を使用しています。このコンテキストのすべての Cookie をオブジェクトの配列として返します。


```js
let cookies = await cookieStore.getAll();
if (cookies) {
  console.log(cookies);
} else {
  console.log("Cookie not found");
}
```

仕様書
---

| Specification |
| --- |
| Cookie Store API # dom-cookiestore-getall |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CookieStore: get() メソッド
=======================

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

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

**`get()`** は `CookieStore` インターフェイスのメソッドは、与えられた名前またはオプションオブジェクトを持つ 1 つの Cookie を返します（下記参照）。このメソッドは渡された引数に最初に一致する Cookie を返します。

構文
--


```js
get(name)
get(options)
```

### 引数

このメソッドは、以下のいずれかが必要です。

`name`

Cookie の名前が入っている文字列です。

または

`options`

オブジェクトは以下のプロパティを含みます。

`name`

Cookie の名前が入っている文字列です。

`url`

Cookie の URL が入っている文字列です。


**メモ:** `url` オプションは、特定の URL をスコープとした Cookie の変更を可能にします。サービスワーカーは、自分のスコープ下にある任意の URL に送信される Cookie を取得できます。文書からは現在の URL の Cookie しか取得できないので、文書コンテキストで有効な URL は文書の URL のみとなります。

### 返値

与えられた名前またはオプションに一致する最初の Cookie を含むオブジェクトに解決される `Promise` です。このオブジェクトは以下のプロパティを含んでいます。

`domain`

Cookie のドメインを含む文字列です。

`expires`

Cookie の期限が入ったタイムスタンプで、ミリ秒単位の Unix 時刻です。

`name`

Cookie の名前を含む文字列です。

`partitioned`

論理値で、Cookie がパーティション化 Cookie であるか (`true`) そうでないか (`false`) を表します。詳しくは Cookies Having Independent Partitioned State (CHIPS) (en-US) を参照してください。

`path`

Cookie のパスを含む文字列です。

`sameSite`

以下の `SameSite` 値のうちの何れかです。

`"strict"`

Cookie はファーストパーティのコンテキストにのみ送られ、サードパーティのウェブサイトに対するリクエストには送られません。

`"lax"`

Cookie は、通常のサイト間サブリクエスト（例えば、サードパーティーのサイトに画像やフレームを読み込むためのもの）には送信されませんが、ユーザーがオリジン間サイト内を移動しているとき（リンクを追跡するとき）には送信されます。

`"none"`

Cookie はすべてのコンテキストで、送信されます。


`secure`

論理値で、この Cookie が安全なコンテキストでのみ使用されるか (`true`) またはそうではないか (`false`) を示します。

`value`

この Cookie の値が入った文字列です。

### 例外

`TypeError`

与えられた `name` や `options` で表される Cookie の取得に失敗した場合に発生します。

例
-

この例では、"cookie1" という名前の Cookie を返します。もし Cookie が見つかれば、プロミスの結果は 1 つの Cookie の詳細を含むオブジェクトになります。


```js
let cookie = cookieStore.get("cookie1");
if (cookie) {
  console.log(cookie);
} else {
  console.log("Cookie not found");
}
```

仕様書
---

| Specification |
| --- |
| Cookie Store API # dom-cookiestore-get |

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

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

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

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

`error` は **`MediaRecorderErrorEvent`** インタフェースの読み取り専用のプロパティで、`MediaRecorder` インスタンスによって発生した例外に関する詳細を提供する `DOMException` オブジェクトです。

`MediaRecorderErrorEvent` が発生した場合、`MediaRecorder` の `error` イベントハンドラーである `onerror` によって受けた `MediaRecorderErrorEvent` 内の `error` プロパティを調べることによって、何が問題であるかをある程度判断できます。

### 値

イベントによって表されるエラーを記述する `DOMException`。 エラーの `name` プロパティの値は、仕様で明確に識別されているものも含め、メディア収録の処理中に意味をなすものであればどんな例外でもかまいません。 ここでの説明は一般的なものです。 あなたはそれらが対応するメソッドのリファレンスで起こるかもしれない様々なシナリオにもっと具体的なものを見つけるでしょう。

`InvalidStateError`

操作が許可されていないコンテキストで操作が試行されたか、削除されたか取り除かれたオブジェクトに対して要求が行われました。

`NotSupportedError`

指定されたオプションが無効なため、`MediaRecorder` を作成できませんでした。 `message` 属性は、もしあれば追加情報を提供するべきです。

`SecurityError`

`MediaStream` は収録を禁止するように設定されています。 これは、例えば、ユーザーが入力デバイスを使用するパーミッションを拒否したときに `getUserMedia()` を使用して取得されたソースの場合などです。

`InvalidModificationError`

収録中のストリームのトラック数が変更されました。メディアの収録中にトラックを追加したり削除したりすることはできません。

`UnknownError`

 セキュリティに関連しない、他に分類できないエラーが発生しました。
 収録が停止し、`MediaRecorder` の `state` は `inactive` となり、最後に残りの受信データで `dataavailable` イベントが `MediaRecorder` に送られ、最後に `stop` イベントが送出されました。


例
-

### 基本的なエラー処理の例

この関数は、与えられた `MediaStream` の `MediaRecorder` を作成して、データを配列にバッファし、エラーを監視するように構成して、返します。


```js
function recordStream(stream) {
  let recorder = null;
  let bufferList = [];

  try {
    recorder = new MediaRecorder(stream);
  } catch (err) {
    /\* レコーダーを作成しようとしたときの例外。 それを扱う \*/
  }

  recorder.ondataavailable = (event) => {
    bufferList.push(event.data);
  };

  recorder.onerror = (event) => {
    console.error(`Error: ${event.error}`);
  };

  recorder.start(100); /\* バッファあたり 100ms のタイムスライス \*/
  return recorder;
}
```

仕様
--

#### No specification found

No specification data found for `api.MediaRecorderErrorEvent.error`.  
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.

関連情報
----

* MediaStream 収録 API
* MediaStream 収録 API の使用
MediaRecorderErrorEvent()
=========================

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

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

**`MediaRecorderErrorEvent()`** コンストラクターは、新しい `MediaRecorderErrorEvent` オブジェクトを作成します。これは、MediaStream 収録 API によるメディアの記録中に発生したエラーを表します。

**メモ:** 一般に、これらを自分で作成することはありません。 メディアの記録中にエラーが発生すると、 `onerror` の実装に配信されます。

構文
--


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

### 引数

`type`

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


`options`

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

`error`

発生したエラーを説明する `DOMException`。 このオブジェクトの `name` プロパティは、発生したエラーの名前を示すべきです。 他のフィールドは存在する場合と存在しない場合があります。


**メモ:** 一部のユーザーエージェントは、スタックダンプ、JavaScript ファイルの名前、エラーが発生した行番号、その他のデバッグツールなどの情報を提供するその他のプロパティを `error` オブジェクトに追加しますが、本番環境ではこの情報に頼るべきではありません。

### 返値

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

仕様
--

#### No specification found

No specification data found for `api.MediaRecorderErrorEvent.MediaRecorderErrorEvent`.  
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.
ウェブプッシュ API 通知のベストプラクティス
========================

この記事では、ユーザーエンゲージメントのためにプッシュ通知を使用するウェブサイトやアプリケーションを開発する際に留意すべき最善の手法について有益な概要を提供します。

> 
> 「うまくやれば、あるに越したことはないが、うまくやらないと実に迷惑だ。」 — ブラウザー開発者2人がプッシュ通知の倫理について議論しているときの会話。
> 
> 
> 

ウェブプッシュ通知の概要
------------

ウェブプッシュ通知（通知、プッシュ、サービスワーカー APIの組み合わせを使用して作成される）は、製品開発者やマーケティング担当者が自分のサイトの注目を取得するために使用しているノイズの一部です。「ウェブプッシュ通知」でウェブを検索すると、プッシュ通知を使用して、ウェブサイトから離脱した人々が購入を完了したり、最新のニュースを送ったり、おすすめの商品へのリンクを受け取ったりできるように再エンゲージするべきだと考えるマーケティングの専門家の記事を見つけることができます。

### 暗黒面

その斬新さは、進取の気性に富むサイトが潜在顧客にリーチするための新しい未開拓の機会を提供します。顧客はメールの返信のためにタブを切り替えていませんか？期限つきの送料無料キャンペーンで顧客を取り戻しましょう！

しかし実に、これがプッシュ通知の最良の使用方法なのでしょうか？それとも、古くて使い古されたポップアップ広告の新しい反復なのでしょうか？

> 
> 「ウェブプッシュはスパムフォルダー内に終わる心配がありません。広告ブロッカーにブロックされることもありません。ウェブサイトを閉じていてもデスクトップに正しく表示されます。モバイルでは、ブラウザーが実行されていなくても、アプリのプッシュ通知のように通知トレイに表示させます。" - 無名のマーケティングサイト
> 
> 
> 

### プッシュ通知の正の利用方法

しかし、プッシュ通知には明るく有益な面もあります。例えば、あなたのチームで通常チャットプログラムを使用してコミュニケーションをとっているとします。プロジェクトマネージャーが承認に問題を見つけ、作業を進める前にあなたの意見が聞きたいとします。

あなたに注意を促すために色々やってみた後、彼らがあなたにメールを送ると、使っているウェブメールアプリが開いていなくても、メールアプリがプッシュ通知を生成すれば、ウェブのメールアプリが開いていなくても注意を引くことに成功します。

この文書では、ウェブプッシュ通知の倫理的使用について説明します。プッシュ通知は、イライラや煩わしさを解消してくれることもあれば、発生させてしまうこともあります。プッシュ通知を使用する際に賢明な提案（と判断）をできるかどうかは、開発者であるあなた次第です。

このプッシュ通知で何を期待しますか？
------------------

何事もそうですが、大きな力には大きな責任が伴います。すべてのプッシュ通知は有益で時刻に敏感なものであるべきであり、ユーザーには最初のプッシュ通知を送信する前に必ずその許可を求め、今後プッシュ通知を取得しないようにする簡単な方法を提供する必要があります。

プッシュ通知が必要かどうかを判断するには、基本的な質問に答える必要があります。

* リアルタイムでレスポンスを待っている人がいますか？上記の例では、プログラムマネージャーがあなたのレスポンスを待っているので、プッシュ通知が適切です。
* 最新情報の更新は必要でしょうか？私は様々なソーシャルメディアのニュースソースを集約するサービスワーカースクリプトを使用しています。興味深いストーリーがトレンドになったら、通知を取得したいです！
* タイムリーな新しいニュースはありますか？ここが少し難しいところです。新しいニュースサイトが「見て見て！」とばかりにプッシュ通知をリクエストすることがあります。すべてはユーザーが何を望んでいるかで決まりますが、行動を用いて意図を判断することができます。例えば、ユーザーが複数の記事を閲覧していたり、ページに数分間滞在している場合、更新情報を受け取ることに関心がある可能性があります。

プッシュ通知がすべて必要かどうかという問題に加えて、プッシュ通知には、さりげなく消えるものから持続的に対話を求めるものまで、さまざまな種類があります。

対話を必要とするものは、とても迷惑になる可能性があるため、控えめに使用するように注意してください。通知は邪魔なものではなく、支援するものであるべきです。

信頼の構築
-----

ある調査によると、プッシュ通知の60％がブロックされていることが示されています。リアルタイムでプッシュ通知を許可するには、信頼が必要です。ユーザーへの敬意を示す良いコンテンツを提供し、プッシュ通知を受け入れることに明確な値を示す、優れたデザインのウェブサイトを持つことで信頼を築くことができます。

ブラウザーによる対策
----------

過去にプッシュ通知の悪用があったため、ウェブブラウザー開発者はこの問題を改善するための戦略を実装し始めています。例えば、 Safari 12.1 では、ページがプッシュ通知の実行権限をリクエストする前に、ユーザーが何らかの方法でページを操作することが要求されるようになっています。これにより、少なくとも、ユーザーは繰り返しになりますが、ほとんど見ていないウェブページで、自発的にこの質問をされることを防ぐことができます。

Firefox の場合、 Firefox バグ 1524619 を参照してください。 Firefox 68 では、環境設定 `dom.webnotifications.requireuserinteraction` に隠され、既定では無効ですが実装していることがわかります。

関連情報
----

* 通知 API
* 通知 API の使用
* プッシュ API
MessageEvent: MessageEvent() コンストラクター
=====================================

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

構文
--


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

### 引数

`type`

 文字列で、このイベントの名前を示します。
 大文字と小文字を区別し、ブラウザーは常に `message` を設定します。


`options` 省略可

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

`data` 省略可

 MessageEvent に含めたいデータ。
 これは任意のデータ型であり、指定しない場合は既定で `null` になります。


`origin` 省略可

 文字列で、メッセージの発信元を表します。
 指定しなかった場合の既定値は空文字列 ("") です。


`lastEventId` 省略可

 文字列で、このイベントの一意な ID を表します。
 指定しなかった場合の既定値は空文字列 ("") です。


`source` 省略可

メッセージの送信元を表す `MessageEventSource` （`Window`、`MessagePort`、`ServiceWorker` の何れかのオブジェクト）を指定します。設定されていない場合の既定値は `null` です。

`ports` 省略可

`MessagePort` オブジェクトの配列で、メッセージが（チャンネルメッセージングや共有ワーカーにメッセージを送信する場合など、適切な場合に）送信されるチャンネルに関連するポートを表します。
 指定しない場合の既定値は空の配列 (`[]`) になります。



返値
--

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

例
-


```js
const myMessage = new MessageEvent("message", {
  data: "hello",
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # the-messageevent-interface:dom-event-constructor |

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

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

関連情報
----

* `ExtendableMessageEvent` — このインターフェイスに似ていますが、もっと柔軟性が必要なインターフェイスで使用されます。