StorageEvent - Web API

StorageEvent
============

**`StorageEvent`** インターフェイスは `storage` イベントによって実装され、ウィンドウがアクセスするストレージ領域が他の文書のコンテキスト内で変更されたときにウィンドウに送られます。

Event

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

`StorageEvent()` (en-US)

新しく構築された `StorageEvent` オブジェクトを返します。

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

*以下の挙げたプロパティに加え、このインターフェイスは親インターフェイスである `Event` から継承したプロパティがあります。*

`key` (en-US) 読取専用

 変更されたキーを表す文字列を返します。
 `key` 属性は、ストレージの`clear()` メソッドで変更された場合は `null` になります。

`newValue` (en-US) 読取専用

`key` の新しい値を文字列で返します。
 ストレージの `clear()` メソッドによって変更された場合、または `key` がストレージから除去された場合、この値は `null` となります。

`oldValue` (en-US) 読取専用

`key` の元の値を文字列で返します。
 この値は `key` が新しく追加された場合で、前回の値がない場合は `null` となります。

`storageArea` (en-US) 読取専用

影響を受けたストレージを表す `Storage` オブジェクトを返します。

`url` (en-US) 読取専用

`key` が変更された文書の URL を文字列で返します。

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

*以下の挙げたメソッドに加え、このインターフェイスは親インターフェイスである `Event` から継承したメソッドがあります。*

`initStorageEvent()`
非推奨

DOM の Event インターフェイスにおける同様の名前の `initEvent()` メソッドに類似した方法でイベントを初期化します。代わりにコンストラクターを使用してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # the-storageevent-interface |

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

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


HTMLTableElement - Web API

HTMLTableElement
================

**`HTMLTableElement`** インターフェイスは、（継承元でもある通常の `HTMLElement` オブジェクトのインターフェイスのほかに） HTML 文書内の表のレイアウトと表現を操作するための特別なプロパティやメソッドを提供します。

EventTarget

Node

Element

HTMLElement

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

*親である `HTMLElement` から継承したプロパティがあります。*

`HTMLTableElement.caption`

`HTMLTableCaptionElement` で、この要素の子要素のうち最初の `<caption>` を表します。見つからなければ `null` になります。設定する場合は、そのオブジェクトが `<caption>` ではなかった場合、 `DOMException` が `HierarchyRequestError` の名前で発生します。正しいオブジェクトが与えられた場合は、この要素の最初の子要素として挿入され、この要素の子要素に `<caption>` があれば、最初のものがツリーから取り除かれます。

`HTMLTableElement.tHead`

`HTMLTableSectionElement` で、この要素の子要素のうち最初の `<thead>` を表します。見つからなければ `null` になります。設定する場合は、そのオブジェクトが `<thead>` ではなかった場合、 `DOMException` が `HierarchyRequestError` の名前で発生します。正しいオブジェクトが与えられた場合は、この要素の `<caption>` や `<colgroup>` を除いた最初の子要素の前に、または該当する要素がなければ最後の子要素として挿入され、この要素の子要素に `<thead>` があれば、最初のものがツリーから取り除かれます。

`HTMLTableElement.tFoot`

`HTMLTableSectionElement` で、この要素の子要素のうち最初の `<tfoot>` を表します。見つからなければ `null` になります。設定する場合は、そのオブジェクトが `<tfoot>` ではなかった場合、 `DOMException` が `HierarchyRequestError` の名前で発生します。正しいオブジェクトが与えられた場合は、この要素の `<caption>`, `<colgroup>`, `<thead>` を除いた最初の子要素の前に、または該当する要素がなければ最後の子要素として挿入され、この要素の子要素に `<tfoot>` があれば、最初のものがツリーから取り除かれます。

`HTMLTableElement.rows` 読取専用

生きた `HTMLCollection` で、この要素のすべての行を含みます。すなわち、この要素の子であるすべての `<tr>` 、またはこの要素の子要素である `<thead>`, `<tbody>`, `<tfoot>` の何れかの子要素です。 `<thead>` のメンバーの行が最初に、ツリー順に現れ、 `<tbody>` のメンバーがその後に、やはりツリー順に現れます。 `HTMLCollection` は生きており、 `HTMLTableElement` が変化するたびに自動的に更新されます。

`HTMLTableElement.tBodies` 読取専用

生きた `HTMLCollection` で、この要素のすべての `<tbody>` を含みます。 `HTMLCollection` は生きており、 `HTMLTableElement` が変化するたびに自動的に更新されます。

### 廃止されたプロパティ

**警告:** 以下のプロパティは廃止されました。使用は避けてください。

`HTMLTableElement.align`
非推奨

文字列で、 `align` 属性を反映した列挙型の値が入ります。これは、周囲のコンテキストに対する要素の内容物の配置を示します。利用可能な値は `"left"`, `"right"`, `"center"` です。

`HTMLTableElement.bgColor`
非推奨

文字列で、セルの背景色が入ります。これは廃止された `bgColor` 属性を反映します。

`HTMLTableElement.border`
非推奨

文字列で、表の境界の幅がピクセル数で入ります。これは廃止された `border` 属性を反映します。

`HTMLTableElement.cellPadding`
非推奨

文字列で、セルの内容とセルの境界の間の水平・垂直空間の幅がピクセル数で入ります。これは廃止された `cellpadding` 属性を反映します。

`HTMLTableElement.cellSpacing`
非推奨

文字列で、セル間の水平・垂直の距離がピクセル数で入ります。これは廃止された `cellspacing` 属性を反映します。

`HTMLTableElement.frame`
非推奨

文字列で、表の外部境界の種類が入ります。これは廃止された `frame` 属性を反映し、 `"void"`, `"above"`, `"below"`, `"hsides"`, `"vsides"`, `"lhs"`, `"rhs"`, `"box"`, `"border"` のうちの何れかを取ります。

`HTMLTableElement.rules`
非推奨

文字列で、表の内部の境界の種類が入ります。これは廃止された `rules` 属性を反映し、 `"none"`, `"groups"`, `"rows"`, `"cols"`, `"all"` のうちのいずれかを取ります。

`HTMLTableElement.summary`
非推奨

文字列で、目的の説明や表の構造が入ります。これは廃止された `summary` 属性を反映します。

`HTMLTableElement.width`
非推奨

文字列で、表全体の推奨される幅を表すピクセル数またはパーセント値が入ります。これは廃止された `width` 属性を反映します。

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

*親である `HTMLElement` から継承したプロパティがあります。*

`HTMLTableElement.createTHead()`

`HTMLTableSectionElement` で、この要素の子要素のうち最初の `<thead>` を返します。見つからなかった場合は、新しいものを作成し、 `<caption>` や `<colgroup>` を除く最初の要素の直前、そのような要素がなければ最後の要素として挿入します。

`HTMLTableElement.deleteTHead()`

この要素の子要素のうち、最初の `<thead>` を取り除きます。

`HTMLTableElement.createTFoot()`

`HTMLTableSectionElement` で、この要素の子要素のうち最初の `<tfoot>` を返します。見つからなかった場合は、新しいものを作成し、最後の要素として挿入します。

`HTMLTableElement.deleteTFoot()`

この要素の子要素のうち最初の `<tfoot>` を取り除きます。

`HTMLTableElement.createTBody()`

`HTMLTableSectionElement` で、この要素の子要素である新しい `<tbody>` を返します。これはツリー内で最後の `<tbody>` 要素の直後に挿入しますが、そのような要素が存在しない場合は最後の要素として挿入します。

`HTMLTableElement.createCaption()`

`HTMLElement` で、この要素の子要素のうち最初の `<caption>` を返します。存在しない場合は、新しく作成してこの `<table>` 要素の最初の子としてツリーに挿入します。

`HTMLTableElement.deleteCaption()`

この要素の子要素のうち最初の `<caption>` を返します。

`HTMLTableElement.insertRow()`

`HTMLTableRowElement` でこの表の新しい行を返します。この行を行の集合の中で、 `<tr>` 要素のうち、指定された `index` の位置のものの直前に挿入されます。必要に応じて `<tbody>` を生成します。 `index` が `-1` であった場合、新しい行が行の集合に追加されます。 `index` が `-1` よりも小さかったり、行の集合に含まれる行数よりも大きかったりした場合は、 `DOMException` が `IndexSizeError` の値で発生します。

`HTMLTableElement.deleteRow()`

引数で指定された `index` に対応する行を取り除きます。 `index` の値が `-1` であった場合は、最後の行を取り除きます。 `-1` より小さかったり、行の集合に含まれる行数よりも大きかったりした場合は、 `DOMException` が `IndexSizeError` の値で発生します。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmltableelement |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: `<table>`


ウェブ共有 API - Web API

ウェブ共有 API
=========

**ウェブ共有 API** は、テキスト、リンク、ファイル、その他のコンテンツを、ユーザーが選択した任意の *共有ターゲット* に共有する仕組みを提供します。

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

**メモ:** この API は ウェブワーカー では利用できません（`WorkerNavigator` からは公開されていません）。

**メモ:** この API をウェブ共有ターゲット API と混同しないでください。こちらはウェブサイトに自分自身が共有ターゲットであることを示させるものです。

概念と用途
-----

**ウェブ共有 API** は、サイトがテキスト、リンク、ファイル、その他のコンテンツを、基盤となるオペレーティングシステムの共有メカニズムを利用して、ユーザーが選択した共有ターゲットに共有することを可能にします。
 これらの共有対象には、通常、システムのクリップボード、電子メール、連絡先やメッセージングアプリケーション、 Bluetooth や Wi-Fi チャネルが含まれます。

 この API には、2 つのメソッドのみがあります。
 `navigator.canShare()` メソッドは、送信のために `navigator.share()` にデータを渡す前に、最初にデータが「共有可能」であるかどうかを検証するために使用することができます。

`navigator.share()` メソッドは、基礎となるオペレーティングシステムのネイティブの共有メカニズムを呼び出して、指定されたデータを渡します。
 これは一時的な有効化を必要とします。したがって、ボタンクリックのような UI イベントから発生させる必要があります。
 さらに、このメソッドでは、ネイティブ実装で共有するために対応している有効なデータを指定する必要があります。

 ウェブ共有 API は web-share 権限ポリシーによって制限されています。
 ポリシーに対応しているが許可されていない場合、どちらのメソッドもデータの共有ができないことを示します。

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

`navigator.canShare()`

論理値で、指定したデータが共有可能であるかどうかを返します。

`navigator.share()`

 渡されたデータが共有対象に正常に送信されたら解決する `Promise` を返します。
 このメソッドはボタンクリックやその他のユーザーによる有効化で呼び出す必要があります（一時的な有効化が必要です）。

例
-

下記のコードは、ボタンのクリックを発生させ、 `navigator.share()` を使用してリンクを共有する方法を示しています。

```js
const shareData = {
  title: "MDN",
  text: "Learn web development on MDN!",
  url: "https://developer.mozilla.org",
};

const btn = document.querySelector("button");
const resultPara = document.querySelector(".result");

// シェアは「ユーザーによる有効化」により起動させる必要があります
btn.addEventListener("click", async () => {
  try {
    await navigator.share(shareData);
    resultPara.textContent = "MDN shared successfully";
  } catch (err) {
    resultPara.textContent = `Error: ${err}`;
  }
});
```

上記の例はウェブシェアのテスト （ソースコードを参照）から取ったものです。 `navigator.share()` でこれをライブ例として見ることができます。

仕様書
---

| Specification |
| --- |
| Web Share API # share-method |
| Web Share API # canshare-data-method |

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

### api.Navigator.share

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

### api.Navigator.canShare

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

関連情報
----

* ウェブ共有ターゲット API


SourceBufferList - Web API

SourceBufferList
================

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

**`SourceBufferList`** インターフェイスは、複数の `SourceBuffer` オブジェクトの単純なコンテナリストを表します。

特定の `MediaSource` に追加された `SourceBuffer` を含むソースバッファのリストは、`MediaSource.sourceBuffers` プロパティを使用して取得できます。 個々のソースバッファは、配列演算子（つまり `[]`）または `forEach()` などの関数を使用してアクセスできます。

EventTarget

SourceBufferListプロパティ
-----

`SourceBufferList.length` 読取専用

リスト内の `SourceBuffer` オブジェクトの数を返します。

### イベントハンドラ

`SourceBufferList.onaddsourcebuffer`

`addsourcebuffer` イベントのイベントハンドラ。

`SourceBufferList.onremovesourcebuffer`

`removesourcebuffer` イベントのイベントハンドラ。

メソッド
----

*親インターフェイスである `EventTarget` からメソッドを継承します。*

`SourceBufferList`: indexed property getter (en-US)

このゲッターにより、リスト内の `SourceBuffer` オブジェクトに配列演算子（つまり `[]`）でアクセスできます。

例
-

未定

仕様
--

| Specification |
| --- |
| Media Source Extensions™ # sourcebufferlist |

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

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

関連情報
----

* `MediaSource`
* `SourceBuffer`


DataTransfer - Web API

DataTransfer
============

**`DataTransfer`** オブジェクトは、ドラッグ＆ドロップ操作中にドラッグされているデータを保持するために使用されます。これは、1 つ以上のデータ項目を保持することができ、それぞれが 1 つ以上のデータ型を持ちます。ドラッグ＆ドロップの詳細については、HTML ドラッグ＆ドロップ API を参照してください。

このオブジェクトはすべての `ドラッグイベント` の `dataTransfer` プロパティからアクセスすることができます。

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

`DataTransfer()`

新しい `DataTransfer` オブジェクトを作成して返す。

プロパティ
-----

### 標準プロパティ

`DataTransfer.dropEffect`

現在選択されているドラッグ&ドロップ操作の種類を取得したり、新しい操作の種類をセットしたりします。値は `none`, `copy`, `link`, `move` のいずれかです。

`DataTransfer.effectAllowed`

とりうるすべての操作の種類を与えます。`none`, `copy`, `copyLink`, `copyMove`, `link`, `linkMove`, `move`, `all`, `uninitialized` のいずれかです。

`DataTransfer.files`

データトランスファーが保持していて利用可能なすべてのローカルファイルのリストを保持します。ドラッグ操作がファイルのドラッグによるものではない場合、このプロパティは空のリストになります。

`DataTransfer.items` 読取専用

全てのドラッグデータのリストである `DataTransferItemList` オブジェクトを返します。

`DataTransfer.types` 読取専用

文字列の配列で、 `dragstart` イベントで設定されたフォーマットを示します。

### Gecko プロパティ

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

**メモ:** この節のすべてのプロパティは Gecko 固有のものです。

`DataTransfer.mozCursor`

ドラッグカーソルの状態を返します。主にタブドラッグの際のカーソルを制御するのに使います。

`DataTransfer.mozSourceNode` 読取専用

ドラッグ操作を開始するためにボタンを押下したときにマウスカーソルのあった`Node`を返します。外部アプリケーションからのドラッグの場合や、ドラッグを開始したノードが呼び出し元からアクセスできない物であった場合は、値は `null` となります。

`DataTransfer.mozUserCancelled` 読取専用

このプロパティは `dragend` イベントに対してのみ適用され、ユーザーが Esc キーを押下してドラッグ操作を取り消した場合は値が `true` となります。不正な場所でドロップした場合など、その他の理由でドラッグ操作に失敗した場合には、値は `false` となります。

### 非推奨のプロパティ

`DataTransfer.mozItemCount` 読取専用
非推奨

ドラッグされている項目の個数を返します。Firefox 71 で削除されました。

メソッド
----

### 標準メソッド

`DataTransfer.clearData()`

指定された型のデータを削除します。型の指定は省略可能です。型として空の文字列を指定した場合、もしくは型を指定しなかった場合、すべての型のデータが削除されます。指定された型のデータが存在しない場合、またはデータトランスファーが何もデータを持っていない場合、このメソッドは何もしません。

`DataTransfer.getData()`

指定された型のデータを取得します。指定された型のデータが存在しない場合、またはデータトランスファーが何もデータを保持していない場合、空文字を返します。

`DataTransfer.setData()`

指定された型のデータを設定します。その型のデータが存在しない場合、データはリストの最後に追加されるため、データ型のリストの最後の項目は、最後に追加された新しいデータ型となります。その型のデータがすでに存在している場合、データ型のリストにおける元と同じ位置で、古いデータが新しいデータと置き換わります。

`DataTransfer.setDragImage()`

独自のものが求められる場合、ドラッグ中に使われる画像を設定します。

### Gecko メソッド

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

**メモ:** この節のすべてのメソッドは Gecko 固有のものです。

`DataTransfer.addElement()`

ドラッグ元の要素を指定します。

### 非推奨のメソッド

`DataTransfer.mozClearDataAt()`
非推奨

指定されたインデックスの項目について、指定された形式に関連付けられたデータを削除します。インデックスは 0 〜 (項目の数 - 1）の範囲です。Firefox 71 で削除されました。

`DataTransfer.mozGetDataAt()`
非推奨

指定されたインデックスの項目の、指定された形式のデータを取得します。存在しない項目またはデータ形式を指定した場合は null を返します。インデックスは 0〜(項目の数-1）の範囲です。Firefox 71 で削除されました。

`DataTransfer.mozSetDataAt()`
非推奨

データトランスファーは複数の項目を保持する事ができ、それぞれの項目には 0 から始まるインデックスが付けられます。`mozSetDataAt()` は、すでに存在する項目を変更する場合には `mozItemCount` より小さい値をインデックスとして指定し、新しい項目を追加する場合は `mozItemCount` に等しい値をインデックスとして指定します。また、`mozItemCount` は項目を追加する度に増加します。Firefox 71 で削除されました。

`DataTransfer.mozTypesAt()`
非推奨

指定されたインデックスの項目が保持しているデータの形式のリスト（文字列の配列）を返します。0〜(項目の数-1）の範囲外のインデックスを指定した場合は、空のリストを返します。Firefox 71 で削除されました。

例
-

この記事に記載されているすべてのメソッドとプロパティには、それぞれリファレンスページがあり、それぞれのリファレンスページには、インターフェイスの例が直接記載されているか、例へのリンクが張られています。

仕様書
---

| Specification |
| --- |
| HTML Standard # the-datatransfer-interface |

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

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

関連情報
----

* ドラッグ＆ドロップ
* ドラッグ操作
* 推奨されるドラッグ型
* 複数の項目のドラッグ＆ドロップ
* DataTransfer test - Paste or Drag


HTMLOListElement - Web API

HTMLOListElement
================

**`HTMLOListElement`** インターフェイスは、（継承によって使用できる通常の `HTMLElement` インターフェイスのものに加えて）順序付きリスト要素を操作するための特別なプロパティを提供します。

EventTarget

Node

Element

HTMLElement

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

*親である `HTMLElement` から継承したプロパティがあります。*

`HTMLOListElement.reversed`

論理値で `reversed` を反映しており、番号が降順なるのであれば値が `true` を、昇順になるのであれば `false` を定義します。

`HTMLOListElement.start`

`long` 型の値で `start` を反映しており、リストの最初の要素の最初の番号の値を定義します。

`HTMLOListElement.type`

文字列で `type` を反映しており、表示に使用するマーカーの種類を定義します。以下の値を取ることができます。

* `'1'` は数字が使用されることを意味します。例: `1`, `2`, `3`, `4`, `5`, …
* `'a'` は小文字のラテンアルファベットが使用されることを意味します。例: `a`, `b`, `c`, `d`, `e`, …
* `'A'` は大文字のラテンアルファベットが使用されることを意味します。例: `A`, `B`, `C`, `D`, `E`, …
* `'i'` は小文字のラテン数字が使用されることを意味します。例: `i`, `ii`, `iii`, `iv`, `v`, …
* `'I'` は大文字のラテン数字が使用されることを意味します。例: `I`, `II`, `III`, `IV`, `V`, …

`HTMLOListElement.compact`
非推奨

論理値で、リスト項目間の間隔を縮小すべきであることを示します。このプロパティは `compact` 属性を反映するのみで、最近のページでは、その動作に使用される CSS の `line-height` プロパティは考慮されません。

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

*固有のメソッドはありません。親である `HTMLElement` から継承したメソッドがあります。*

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlolistelement |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: `<ol>`


SerialPort - Web API

SerialPort
==========

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

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

`Web Serial API` の `SerialPort` インターフェイスは、ホストデバイスのシリアルポートへのアクセスを提供します。

EventTarget

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

このインターフェイスのインスタンスは `Serial` インターフェイスのメソッドを呼ぶことにより得られるので、このインターフェイス自身のコンストラクターはありません。

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

`SerialPort.readable` 読取専用
Experimental

ポートに接続されたデバイスからデータを受信する用の `ReadableStream` を返します。

`SerialPort.writable` 読取専用
Experimental

ポートに接続されたデバイスにデータを送信する用の `WritableStream` を返します。

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

`SerialPort.forget()`
Experimental

ポートを閉じ、忘れる処理が完了したら解決する `Promise` を返します。

`SerialPort.getInfo()`
Experimental

ポートの情報が入ったオブジェクトを返します。

`SerialPort.open()`
Experimental

ポートを開く処理が完了したら解決する `Promise` を返します。デフォルトでは、ポートは 8 ビットのデータ、1 ビットのストップビット、パリティチェックなしで開かれます。

`SerialPort.setSignals()`
Experimental

ポートの制御信号を設定し、完了したら解決する `Promise` を返します。

`SerialPort.getSignals()`
Experimental

ポートの制御信号の現在の状態が入ったオブジェクトで解決する `Promise` を返します。

`SerialPort.close()`
Experimental

ポートを閉じる処理が完了したら解決する `Promise` を返します。

イベント
----

`connect`
Experimental

ポートがデバイスに接続された時、発火するイベントです。

`disconnect`
Experimental

ポートがデバイスから切断された時、発火するイベントです。

例
-

### ポートを開く

シリアルポートで通信を行う前に、ポートを開く必要があります。ポートを開くことで、サイトはデータがどのように送受信されるかを決めるために必要なパラメータを設定できます。開発者は、適切なパラメータを決めるために接続するデバイスのドキュメントを参照するべきです。

```js
await port.open({ baudRate: 9600 /\* ボーレートを決める \*/ });
```

`open()` が返した `Promise` が解決したら、`readable` および `writable` プロパティにアクセスすることで、デバイスからデータを受信したり接続されたデバイスにデータを送信したりする用の `ReadableStream` および `WritableStream` を得ることができます。

### ポートからデータを受信する

この例は、ポートからデータを受信する方法を示します。外側のループは致命的なエラーが発生して `readable` が `null` になるまで新しい `reader` を生成し続けることで、致命的でないエラーを処理します。

```js
while (port.readable) {
  const reader = port.readable.getReader();
  try {
    while (true) {
      const { value, done } = await reader.read();
      if (done) {
        // |reader| がキャンセルされました。
        break;
      }
      // |value| について何かをする
    }
  } catch (error) {
    // |error| を処理する
  } finally {
    reader.releaseLock();
  }
}
```

### ポートにデータを送信する

この例では、ポートに文字列を送信する方法を示します。送信前に、`TextEncoder` により文字列を `Uint8Array` に変換します。

```js
const encoder = new TextEncoder();
const writer = port.writable.getWriter();
await writer.write(encoder.encode("PING"));
writer.releaseLock();
```

仕様書
---

| Specification |
| --- |
| Web Serial API # dom-serialport |

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

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


DataTransferItemList - Web API

DataTransferItemList
====================

**`DataTransferItemList`** オブジェクトは `DataTransferItem` オブジェクトのリストで、ドラッグされているアイテムを表します。 *ドラッグ操作* の間、それぞれの `DragEvent` は `dataTransfer` プロパティを持ち、そのプロパティが `DataTransferItemList` となります。

それぞれのアイテムは、配列演算子 `[]` を使用してアクセスできます。

このインターフェイスにはコンストラクターがありません。

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

`DataTransferItemList.length` 読取専用

`unsigned long` で、リスト内のドラッグアイテムの数を表します。

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

`DataTransferItemList.add()`

ドラッグアイテムのリストにアイテム（`File` オブジェクトまたは文字列）を追加し、新しいアイテムの `DataTransferItem` オブジェクトを返します。

`DataTransferItemList.remove()`

指定された位置のリストからドラッグアイテムを削除します。

`DataTransferItemList.clear()`

リストからすべてのドラッグ項目を削除します。

**`DataTransferItemList.DataTransferItem()`**

指定された位置の `DataTransferItem` を返すゲッターです。

例
-

この例は、ドラッグ & ドロップの使い方を表します。

### JavaScript

```js
function dragstartHandler(ev) {
  console.log("dragStart");

  // Add this element's id to the drag payload so the drop handler will
  // know which element to add to its tree
  const dataList = ev.dataTransfer.items;
  dataList.add(ev.target.id, "text/plain");

  // Add some other items to the drag payload
  dataList.add("<p>Paragraph…</p>", "text/html");
  dataList.add("http://www.example.org", "text/uri-list");
}

function dropHandler(ev) {
  console.log("Drop");
  ev.preventDefault();

  // Loop through the dropped items and log their data
  for (const item of ev.dataTransfer.items) {
    if (item.kind === "string" && item.type.match(/^text\/plain/)) {
      // This item is the target node
      item.getAsString((s) => {
        ev.target.appendChild(document.getElementById(s));
      });
    } else if (item.kind === "string" && item.type.match(/^text\/html/)) {
      // Drag data item is HTML
      item.getAsString((s) => {
        console.log(`… Drop: HTML = ${s}`);
      });
    } else if (item.kind === "string" && item.type.match(/^text\/uri-list/)) {
      // Drag data item is URI
      item.getAsString((s) => {
        console.log(`… Drop: URI = ${s}`);
      });
    }
  }
}

function dragoverHandler(ev) {
  console.log("dragOver");
  ev.preventDefault();

  // Set the dropEffect to move
  ev.dataTransfer.dropEffect = "move";
}

function dragendHandler(ev) {
  console.log("dragEnd");
  const dataList = ev.dataTransfer.items;

  // Clear any remaining drag data
  dataList.clear();
}
```

### HTML

```html
<div>
  <p
 id="source"
 ondragstart="dragstartHandler(event);"
 ondragend="dragendHandler(event);"
 draggable="true">
    Select this element, drag it to the Drop Zone and then release the selection
    to move the element.
  </p>
</div>
<div
 id="target"
 ondrop="dropHandler(event);"
 ondragover="dragoverHandler(event);">
  Drop Zone
</div>
```

### CSS

```css
div {
  margin: 0em;
  padding: 2em;
}

#source {
  color: blue;
  border: 1px solid black;
}

#target {
  border: 1px solid black;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # the-datatransferitemlist-interface |

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

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


DocumentType - Web API

DocumentType
============

**`DocumentType`** インターフェイスは、 doctype を包含する `Node` を表します。

EventTarget

Node

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

*親インターフェイスである `Node` からプロパティを継承しています。*

`DocumentType.name` 読取専用

文書の型です。HTML 文書では常に `"html"` ですが、XML 文書では様々です。

`DocumentType.publicId` 読取専用

文字列で、文書型の識別子です。HTML では常に空文字列 (`""`) ですが、例えば SVG 文書では `"-//W3C//DTD SVG 1.1//EN"` です。

`DocumentType.systemId` 読取専用

文字列で、DTD に関連付けられた URL が入ります。HTML では常に空文字列 (`""`) ですが、例えば SVG 文書では `"http://www.w3.org/2000/svg"` です。

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

*親インターフェイスである `Node` からメソッドを継承しています。*

`DocumentType.after()`

一連の `Node` オブジェクトまたは文字列を、この `DocumentType` の親の子リストの中、この `DocumentType` オブジェクトの直後に挿入します。

`DocumentType.before()`

一連の `Node` オブジェクトまたは文字列を、この `DocumentType` の親の子リストの中、この `DocumentType` オブジェクトの直前に挿入します。

`DocumentType.remove()`

オブジェクトをその親の子リストから削除します。

`DocumentType.replaceWith()`

文書型を指定されたノードの集合に置き換えます。

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-documenttype |

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

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

関連情報
----

* DOM インターフェイスの索引
* `DOMImplementation.createDocumentType()`: 新しい `DocumentType` ノードの作成


FormDataEvent - Web API

FormDataEvent
=============

**`FormDataEvent`** インターフェイスは `formdata` イベントを表します。 — このようなイベントは `HTMLFormElement` オブジェクトで、フォームデータを表すエントリーリストが構築された後に発行されます。これはフォームが送信されようとするときに発行されますが、 `FormData()` コンストラクターの呼び出しでも発行させることができます。

これにより、 `XMLHttpRequest` などのメソッドでフォームデータを送信する際に、自分で用意しなくても、 `formdata` イベントの発行に応じて、 `FormData` オブジェクトをすばやく取得することができます（FormData オブジェクトの使用を参照）。

Event

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

`FormDataEvent()`

新しい `FormDataEvent` オブジェクトインスタンスを生成します。

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

*親インターフェイスである `Event` から継承したプロパティがあります。*

`FormDataEvent.formData`

イベントが発行された時点のフォーム内に含まれるデータを表す `FormData` オブジェクトです。

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

*親インターフェイスである `Event` から継承したメソッドがあります。*

例
-

```js
// フォームの参照を得る

const formElem = document.querySelector("form");

// submit ハンドラー

formElem.addEventListener("submit", (e) => {
  // フォーム送信時に、既定の動作を抑止
  e.preventDefault();

  console.log(form.querySelector('input[name="field1"]')); // FOO
  console.log(form.querySelector('input[name="field2"]')); // BAR

  // FormData オブジェクトを構築し、 formdata イベントを発行させる
  const formData = new FormData(formElem);
  // フォームデータがが formdata イベントによって変更される
  console.log(formData.get("field1")); // foo
  console.log(formData.get("field2")); // bar
});

// データを受け取るための formdata ハンドラー

formElem.addEventListener("formdata", (e) => {
  console.log("formdata fired");

  // フォームデータを変更
  const formData = e.formData;
  formData.set("field1", formData.get("field1").toLowerCase());
  formData.set("field2", formData.get("field2").toLowerCase());
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # the-formdataevent-interface |

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

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

関連情報
----

* `XMLHTTPRequest`
* `FormData`
* FormData オブジェクトの使用
* `<form>`


AudioParamMap - Web API

AudioParamMap
=============

ウェブオーディオ API の **`AudioParamMap`** インターフェイスは、複数の音声パラメーターのセットを表します。それぞれの音声パラメーターは、パラメーターを識別する文字列から値を表す `AudioParam` オブジェクトへのマップとして表されます。

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

`AudioParamMap` オブジェクトは、`Map` のようにアクセスできます。それぞれのパラメーターは名前の文字列によって識別され、そのパラメーターの値を持つ `AudioParam` にマップされます。加えて、以下のプロパティが利用可能です。

`size`

?

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

`entries()`

?

`forEach()`

?

`has()`

?

`keys()`

?

`values()`

?

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

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


HID - Web API

HID
===

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`** インターフェイスは、 *HID デバイス* への接続およびアタッチした HID デバイスのリストアップを行うメソッドと、HID デバイスの接続を扱うイベントハンドラーを提供します。

EventTarget

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

*このインターフェイスは、親の `EventTarget` から継承したプロパティも持ちます。*

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

*このインターフェイスは、親の `EventTarget` から継承したメソッドも持ちます。*

`getDevices()`
Experimental

接続中の `HIDDevice` オブジェクトの配列で解決する `Promise` を返します。

`requestDevice()`
Experimental

接続中の `HIDDevice` オブジェクトの配列で解決する `Promise` を返します。この関数を呼ぶことで、返されたデバイスのリストから選ばれた 1 個のデバイスにアクセスする許可を得るための、ユーザーエージェントの許可手続きを開始できます。

### イベント

`connect`
Experimental

HID デバイスが接続された時に発火します。

`disconnect`
Experimental

HID デバイスが切断された時に発火します。

仕様書
---

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

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

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

関連情報
----

* `WebHID API`


WorkerNavigator - Web API

WorkerNavigator
===============

**`WorkerNavigator`** インターフェイスは `Navigator` インターフェイスのサブセットで、ワーカー (`Worker`) からアクセスできるものです。このようなオブジェクトはワーカーごとに初期化され、 `self.navigator` プロパティを介して利用できます。

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

*`WorkerNavigator` インターフェイスは何もプロパティを継承していません。*

`WorkerNavigator.appCodeName`
非推奨
 読取専用

どのブラウザーでも常に `'Mozilla'` を返します。このプロパティは互換性のためだけに残されています。

`WorkerNavigator.appName`
非推奨
 読取専用

ブラウザーの正式名称を返します。このプロパティが正しい値を返すことに頼らないでください。

`WorkerNavigator.appVersion`
非推奨
 読取専用

ブラウザー のバージョンを文字列で返します。このプロパティが正しい値を返すことに頼らないでください。

`WorkerNavigator.connection` 読取専用

端末のネットワーク接続に関する情報を格納した `NetworkInformation` オブジェクトを提供します。

`WorkerNavigator.globalPrivacyControl` 読取専用
Experimental

ユーザーの情報の共有や販売への同意状況を表す論理値を返します。

`WorkerNavigator.gpu` 読取専用
Experimental

現在のワーカーコンテキスト用の `GPU` オブジェクトを返します。WebGPU API のエントリーポイントです。

`WorkerNavigator.hardwareConcurrency` 読取専用

利用可能な論理プロセッサーコアの数を返します。

`WorkerNavigator.language` 読取専用

ユーザーの環境設定言語（通常はブラウザー UI の言語）を表す文字列を返します。不明な場合は `null` 値を返します。

`WorkerNavigator.languages` 読取専用

ユーザーが知っている言語を、環境設定の順に文字列の配列で返します。

`WorkerNavigator.locks` 読取専用

新しい `LockManager` オブジェクトをリクエストしたり、既存の `Lock` オブジェクトを問い合わせるためのメソッドを提供する `Lock` オブジェクトを返します。

`WorkerNavigator.mediaCapabilities` 読取専用

指定の形式のデコードおよびエンコードの能力と、出力の能力に関する情報を参照可能にする `MediaCapabilities` (en-US) オブジェクトを返します。

`WorkerNavigator.onLine` 読取専用

ブラウザーがオンラインであるかどうかを示す論理値を返します。

`WorkerNavigator.permissions`
Experimental
 読取専用

`Permissions` オブジェクトを返します。これは、権限 API が定める API の権限状態を問い合わせたり更新したりするために使用できます。

`WorkerNavigator.platform`
非推奨
 読取専用

ブラウザーのプラットフォームを表す文字列を返します。このプロパティが正しい値を返すことに頼らないでください。

`WorkerNavigator.product`
非推奨
 読取専用

どのブラウザーでも常に `'Gecko'` を返します。このプロパティは互換性のためにのみ残されています。

`WorkerNavigator.serial` 読取専用
Experimental

シリアルポートを制御するためのウェブシリアル API へのエントリーポイントを表す `Serial` オブジェクトを返します。

`WorkerNavigator.storage` 読取専用

永続化の権限を管理し、利用できるストレージを推定するための `StorageManager` インターフェイスを返します。

`WorkerNavigator.userAgent` 読取専用

現在のブラウザーのユーザーエージェント文字列を返します。

`WorkerNavigator.userAgentData` 読取専用
Experimental

ユーザーのブラウザーとオペレーティングシステムに関する情報にアクセスするための `NavigatorUAData` オブジェクトを返します。

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

*`WorkerNavigator` インターフェイスは何もメソッドを継承または実装していません。*

仕様書
---

| Specification |
| --- |
| HTML Standard # the-workernavigator-object |

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

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

関連情報
----

* その他のワーカーに関するインターフェイス: `Worker`, `WorkerLocation`, `WorkerGlobalScope`
* ウェブワーカーの使用


HTMLTableRowElement - Web API

HTMLTableRowElement
===================

**`HTMLTableRowElement`** インターフェイスは、（継承によって利用できる通常の `HTMLElement` インターフェイスに加えて）HTML の表の行のレイアウトを操作したり行を表したりするための特別なプロパティとメソッドを提供します。

EventTarget

Node

Element

HTMLElement

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

*親である `HTMLElement` から継承したプロパティがあります。*

`HTMLTableRowElement.cells` 読取専用

行のセルを表す生きた `HTMLCollection` を返します。 `HTMLCollection` は生きており、セルが追加・削除された際に自動的に更新されます。

`HTMLTableRowElement.rowIndex` 読取専用

表全体におけるこの行の論理的な位置を表す `long` 値を返します。この行が表の中になかった場合は、 `-1` を返します。

`HTMLTableRowElement.sectionRowIndex` 読取専用

所属する表の区間におけるこの行の論理的な位置を表す `long` 値を返します。この行が区間の中になかった場合は、 `-1` を返します。

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

*親である `HTMLElement` から継承したメソッドがあります。*

`deleteCell(index)`

`index` の位置に対応するセルを取り除きます。 `index` が `-1` であった場合、末尾のセルを取り除きます。 `index` が `-1` より小さいか、このコレクションにあるセルの数より大きい場合、 `DOMException` が `IndexSizeError` の値で発生します。

`insertCell(index)`

`HTMLTableCellElement` でこの行の新しいセルを表します。セルはこのセルのコレクションの中で、行の中の `index` の位置の直前に挿入されます。 `index` が `-1` の場合、新しいセルはコレクションの末尾に追加されます。 `index` が `-1` より小さいか、このコレクションにあるセルの数より大きい場合、 `DOMException` が `IndexSizeError` の値で発生します。

非推奨のプロパティ
---------

**警告:** これらのプロパティは非推奨になっており、もう使用するべきではありません。これらは主に古いコードベースを理解しやすくすることを目的に文書化されています。

`HTMLTableRowElement.align`
非推奨

文字列で、 `align` 属性を反映した列挙値です。これは、周囲のコンテキストに対する要素の内容の整列を示す。指定できる値は `"left"`, `"right"`, `"center"` です。

`HTMLTableRowElement.bgColor`
非推奨

文字列で、セルの背景色です。これは、廃止された `bgColor` 属性を反映したものです。

`HTMLTableRowElement.ch`
非推奨

文字列で、 1 つの文字を含みます。この文字は、列の全てのセルを揃えるための文字です。これは `char` を反映し、既定では言語に関連付けられた小数点の値、例えば英語なら `'.'`、フランス語なら `','` となります。このプロパティはオプションであり、あまり対応されていませんでした。

`HTMLTableRowElement.chOff`
非推奨

文字列で、 `HTMLTableRowElement.ch` で定義された文字の右側（左書きの場合。右書きの場合は左側）に何文字残さなければならないかを示す整数です。このプロパティはオプションであり、あまり対応されていませんでした。

`HTMLTableRowElement.vAlign`
非推奨

文字列で、セルの内容がどのように垂直方向に配置されるかを示す列挙値です。これは `valign` 属性を反映しており、 `"top"`, `"middle"`, `"bottom"`, `"baseline"` のいずれかになります。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmltablerowelement |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: `<tr>`


GPUAdapter - Web API

GPUAdapter
==========

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

WebGPU API の **`GPUAdapter`** インターフェイスは、GPU アダプターを表します。これを用いて `GPUDevice` (en-US)、アダプターの情報、機能、制限を要求できます。

`GPUAdapter` オブジェクトは `GPU.requestAdapter()` メソッドを用いて要求できます。

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

`features`
Experimental
 読取専用

アダプターが対応している追加の機能を表現する `GPUSupportedFeatures` オブジェクトです。

`isFallbackAdapter`
Experimental
 読取専用

論理値です。アダプターがフォールバックアダプターである場合は `true` を返し、そうでない場合は `false` を返します。

`limits`
Experimental
 読取専用

アダプターが対応している制限を表現する `GPUSupportedLimits` オブジェクトです。

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

`requestAdapterInfo()`
Experimental

アダプターに関する特定用の情報が格納された `GPUAdapterInfo` オブジェクトで解決する `Promise` を返します。

`requestDevice()`
Experimental

GPU とのやりとり用の第一インターフェイスである `GPUDevice` (en-US) オブジェクトで解決する `Promise` を返します。

例
-

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

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

  const device = await adapter.requestDevice();

  //...
}
```

仕様書
---

| Specification |
| --- |
| WebGPU # gpu-adapter |

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

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

関連情報
----

* WebGPU API


CanvasPattern - Web API

CanvasPattern
=============

**`CanvasPattern`** インターフェイスは、画像、キャンバス、動画をもとに生成される不透明オブジェクトを表し、`CanvasRenderingContext2D.createPattern()` (en-US) メソッドによって作成されます。

`fillStyle` または `strokeStyle` として使用することができます。

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

*不透明なオブジェクトを表し、公開されているプロパティはありません。*

メソッド
----

*継承されたメソッドはありません。*

`CanvasPattern.setTransform()`

パターンに線形の座標変換を表す `DOMMatrix` を適用します。

仕様書
---

| Specification |
| --- |
| HTML Standard # canvaspattern |

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

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

関連情報
----

* `CanvasRenderingContext2D.createPattern()` (en-US)
* The `<canvas>` 要素と関連するインターフェイスである `HTMLCanvasElement`


端末メモリー API - Web API

端末メモリー API
==========

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

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

クライアント端末の能力は、使用可能な RAM の量に大きく依存します。 従来、開発者は経験則を使用し、端末のベンチマークを行うか、端末の製造元やユーザーエージェント文字列などの他の要因に基づいて端末の能力を推測する必要がありました。

端末のメモリー容量へのアクセス
---------------

RAM 端末の概算量にアクセスするには、 JavaScript API を使用する方法と、クライアントヒント HTTP ヘッダーを使用する方法の 2 つがあります。

### JavaScript API

`Navigator.deviceMemory` を取得することで、概算の RAM 容量を照会することができます。

```js
var RAM = navigator.deviceMemory;
```

### クライアントヒント

クライアントヒント ヘッダーの `Device-Memory` ディレクティブを使用して、同じく概算の RAM 容量を取得することもできます。

仕様書
---

| Specification |
| --- |
| Device Memory  |

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

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

### api.Navigator.deviceMemory

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

### api.WorkerNavigator.deviceMemory

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

### http.headers.Device-Memory

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

### クライアントヒント拡張機能

### api.Navigator.deviceMemory

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

### api.WorkerNavigator.deviceMemory

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

### http.headers.Device-Memory

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

関連情報
----

* `Navigator.deviceMemory`
* `Device-Memory` ヘッダー


幾何インターフェイス - Web API

幾何インターフェイス
==========

**幾何インターフェイス** は、 3D および 2D グラフィックを操作するためのインターフェイスを提供する CSS モジュールです。特に、点、長方形、四角形、座標変換行列 （グラフィックを移動、拡大縮小、回転、歪め/傾け、反転、乗算/連鎖させ、逆演算/元に戻す処理）を演算するためのインターフェイスを提供します。

ウェブ開発者であれば、常に幾何インターフェイスを直接使用するわけではありませんが、その代わりに裏で幾何インターフェイスに頼っている他の機能、たとえば CSS 座標変換、キャンバス API 、WebXR 機器 API の一部、そして（より直接的に）`VideoFrame.visibleRect` (en-US)、`Element.getClientRects()`、`Element.getBoundingClientRect()` などを使用しています。

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

`DOMMatrix`

座標変換行列を表します。グラフィックの平行移動、拡大縮小、回転、歪め/せん断/傾け、反転、乗算/連結、逆演算/取り消しなどの演算を行います。

`DOMMatrixReadOnly`

`DOMMatrix` の読み取り専用版です。

`DOMPoint`

座標系内の 2D または 3D の点を表します。 3D までの座標の値と、オプションの視点位置を含みます。

`DOMPointReadOnly`

`DOMPoint` の読み取り専用版です。

`DOMQuad`

四辺形 の角を定義する 4 つの `DOMPoint` オブジェクトの集合を表します。

`DOMRect`

長方形の大きさと位置を表します。

`DOMRectReadOnly`

`DOMRect` の読み取り専用版です。

例
-

`Path2D.addPath()` と `CanvasPattern.setTransform()` の記事に、幾何インターフェイスを使用する例があります。

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # DOMMatrix |
| Geometry Interfaces Module Level 1 # DOMPoint |
| Geometry Interfaces Module Level 1 # DOMQuad |
| Geometry Interfaces Module Level 1 # DOMRect |

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

### api.DOMMatrix

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

### api.DOMMatrixReadOnly

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

### api.DOMPoint

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

### api.DOMPointReadOnly

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

### api.DOMQuad

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

### api.DOMRect

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

### api.DOMRectReadOnly

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

関連情報
----

* `Path2D.addPath()`
* `CanvasPattern.setTransform()`
* `CanvasRenderingContext2D.getTransform()` (en-US)
* `CanvasRenderingContext2D.setTransform()` (en-US)
* `CSSTransformValue.toMatrix()`
* `CSSTransformComponent.toMatrix()`
* `Element.getBoundingClientRect()`
* `Element.getClientRects()`
* `VideoFrame.visibleRect` (en-US)
* `XRLightEstimate` (en-US)
* `XRRigidTransform`


StereoPannerNode - Web API

StereoPannerNode
================

`StereoPannerNode` はウェブオーディオ API のインターフェイスで、音声ストリームを左右にパンすることができる、シンプルなステレオのパンニングを行うノードを表します。これは `AudioNode` の一種で、コストが低くパワーの変わらない アルゴリズムを用います。

`pan` (en-US) 属性には -1 （完全に左へパンニング）から 1（完全に右へパンニング）までの実数値を単位をつけずに指定します。このインターフェイスにより、`PannerNode` よりシンプルにパンを指定できます。

![](/ja/docs/Web/API/StereoPannerNode/stereopannernode.png)

EventTarget

AudioNode

StereoPannerNode

|  |  |
| --- | --- |
| 入力数 | `1` |
| 出力数 | `1` |
| チャンネルカウントモード | `"clamped-max"` |
| チャンネル数 | `2` |
| チャンネルの意味 | `"speakers"` |

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

`StereoPannerNode()` (en-US)

`StereoPannerNode` オブジェクトの新しいインスタンスを作成します。

プロパティ
-----

*親である `AudioNode` からプロパティを継承しています*。

`StereoPannerNode.pan` (en-US) 読取専用

a-rate の `AudioParam` で、パンニングの量を指定できます。

メソッド
----

*固有のメソッドはありません。親である `AudioNode` からメソッドを継承しています*。

例
-

コード例については `BaseAudioContext.createStereoPanner()` を参照してください。

仕様書
---

| Specification |
| --- |
| Web Audio API # stereopannernode |

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

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

関連情報
----

* ウェブオーディオ API の使用


Compression Streams API - Web API

Compression Streams API
=======================

**Compression Streams API** は、gzip 形式や deflate 形式によるデータのストリームの圧縮や展開を行う JavaScript の API を提供します。

ビルトインの圧縮機能を使うことで、JavaScript のアプリケーションに圧縮ライブラリーを含める必要がなくなり、アプリケーションのダウンロードサイズをより小さくできます。

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

`CompressionStream`

データのストリームを圧縮します。

`DecompressionStream`

データのストリームを展開します。

例
-

この例では、ストリームを gzip 圧縮により圧縮します。

```js
const compressedReadableStream = inputReadableStream.pipeThrough(
  new CompressionStream("gzip"),
);
```

この例は、blob を gzip により展開する関数です。

```js
async function DecompressBlob(blob) {
  const ds = new DecompressionStream("gzip");
  const decompressedStream = blob.stream().pipeThrough(ds);
  return await new Response(decompressedStream).blob();
}
```

仕様書
---

| Specification |
| --- |
| Compression Streams # compression-stream |

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

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


HTMLOptionElement - Web API

HTMLOptionElement
=================

**`HTMLOptionElement`** インターフェイスは `<option>` 要素を表し、 `HTMLElement` インターフェイスのすべてのクラスとメソッドを継承しています。

EventTarget

Node

Element

HTMLElement

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

`Option()`

新しく作成された `HTMLOptionElement` オブジェクトを返します。引数は、表示するテキストである `text`、関連付けられる値である `value`、`defaultSelected` の値、`selected` の値の 4 つです。後 3 者は省略可能です。

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

*親である `HTMLElement` から継承されたプロパティがあります。*

`HTMLOptionElement.defaultSelected`

`true` または `false` の値を取り、選択肢が既定で選択されているかどうかを示す HTML の `selected` 属性の初期値を表します。

`HTMLOptionElement.disabled`

`true` または `false` の値を取り、その選択肢が選択できないことを示す HTML の `disabled` 属性の値を表します。選択肢は無効状態の `<optgroup>` 要素の子である場合も無効になります。

`HTMLOptionElement.form` 読取専用

`HTMLFormElement` で、この選択肢が `<select>` 要素の子孫であった場合は、対応する `<select>` 要素の `form` と同じ値を表します。見つからない場合は null になります。

`HTMLOptionElement.index` 読取専用

`long` 値で、所属する選択肢のリスト内におけるツリー順の位置を表します。その選択肢がリストに含まれていない場合、例えば `<datalist>` 要素の一部である場合などは、値は `0` になります。

`HTMLOptionElement.label` 読取専用

文字列で、この選択肢のラベルを提供する HTML の `label` 属性の値を反映します。この属性が特に設定されていない場合は、この値を読み取ると要素のテキストコンテンツが返されます。

`HTMLOptionElement.selected`

`true` または `false` の値を取り、この選択肢が現在選択されているかどうかを示します。

`HTMLOptionElement.text`

文字列で、この要素のテキストコンテンツが入ります。

`HTMLOptionElement.value`

文字列で、 HTML の `value` 属性が存在する場合は、その値を反映します。存在しない場合は `Node.textContent` プロパティの値を反映します。

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

*固有のメソッドは実装していませんが、親である `HTMLElement` から継承したメソッドがあります。*

仕様書
---

| Specification |
| --- |
| HTML Standard # htmloptionelement |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: `<option>`
* `HTMLOptionsCollection` インターフェイス


ToggleEvent - Web API

ToggleEvent
===========

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

**`ToggleEvent`** インターフェイスは、ポップオーバー要素の状態が表示と非表示の間で切り替わるときにユーザーに通知するイベントを表します。

これは `HTMLElement` の `beforetoggle` および `toggle` イベントのためのイベントオブジェクトであり、表示中と非表示の間で遷移したときに（それぞれ前と後に）ポップオーバーで発行されます。

Event

ToggleEvent

**メモ:** `ToggleEvent` は `HTMLDetailsElement` の `toggle` イベントとは関係ありません。こちらは `<details>` において、`open`/`closed` の状態が変化したときに発生します。こちらのイベントオブジェクトは一般的な `Event` です。

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

`ToggleEvent()`
Experimental

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

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

*このインターフェイスは、親である `Event` からプロパティを継承しています。*

`ToggleEvent.newState` 読取専用
Experimental

（`"open"` または `"closed"`の）文字列で、要素が遷移した後の状態を表します。

`ToggleEvent.oldState` 読取専用
Experimental

（`"open"` または `"closed"`の）文字列で、要素が遷移する前の状態を表します。

例
-

### 基本的な例

```js
const popover = document.getElementById("mypopover");

// ...

popover.addEventListener("beforetoggle", (event) => {
  if (event.newState === "open") {
    console.log("Popover is being shown");
  } else {
    console.log("Popover is being hidden");
  }
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # toggleevent |

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

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

関連情報
----

* ポップオーバー API
* `beforetoggle` イベント
* `toggle` イベント


EyeDropper - Web API

EyeDropper
==========

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

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

**`EyeDropper`** インターフェイスは、ユーザーが開いて画面から色を選択できるスポイトツールのインスタンスを表します。

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

`EyeDropper()`
Experimental

新しい `EyeDropper` のインスタンスを返します。

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

*`EyeDropper` インターフェイスは、メソッドを継承しません。*

`EyeDropper.open()`
Experimental

選択された色へのアクセスを提供するオブジェクトで解決するプロミスを返します。

例
-

### スポイトツールを開いて色を取得する

この例では、スポイトツールを開き、ユーザーが画面からピクセルを選択するか `Escape` を押してスポイトモードをキャンセルするのを待つ方法を示します。

#### HTML

```html
<button id="start-button">スポイトを開く</button> <span id="result"></span>
```

#### JavaScript

```js
document.getElementById("start-button").addEventListener("click", () => {
  const resultElement = document.getElementById("result");

  if (!window.EyeDropper) {
    resultElement.textContent =
      "このブラウザーは EyeDropper API に対応していません";
    return;
  }

  const eyeDropper = new EyeDropper();

  eyeDropper
    .open()
    .then((result) => {
      resultElement.textContent = result.sRGBHex;
      resultElement.style.backgroundColor = result.sRGBHex;
    })
    .catch((e) => {
      resultElement.textContent = e;
    });
});
```

#### 結果

### スポイトツールを終了する

この例では、スポイトモードはユーザーが色を選択したり `Escape` を押したりする前に終了させることもできることを示します。

#### HTML

```html
<button id="start-button">スポイトを開く</button> <span id="result"></span>
```

#### JavaScript

```js
document.getElementById("start-button").addEventListener("click", () => {
  const resultElement = document.getElementById("result");

  if (!window.EyeDropper) {
    resultElement.textContent =
      "このブラウザーは EyeDropper API に対応していません";
    return;
  }

  const eyeDropper = new EyeDropper();
  const abortController = new AbortController();

  eyeDropper
    .open({ signal: abortController.signal })
    .then((result) => {
      resultElement.textContent = result.sRGBHex;
      resultElement.style.backgroundColor = result.sRGBHex;
    })
    .catch((e) => {
      resultElement.textContent = e;
    });

  setTimeout(() => {
    abortController.abort();
  }, 2000);
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| EyeDropper API # eyedropper-interface |

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

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


Badging API - Web API

Badging API
===========

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

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

**Badging API** は、文書またはアプリケーションにバッジを設定する方法をウェブ開発者に提供します。バッジは、より邪魔になる通知を表示することなく、状態が変化したことを通知する役割を果たします。よくある使用法としては、メッセージ機能を持つアプリケーションが、新着メッセージがあることを示すためにアプリケーションのアイコンにバッジを表示することがあるでしょう。

概念と使用法
------

ウェブ開発者は、よく状態を表すために文書のファビコンやタイトルを更新します。Badging API は、ユーザーエージェントが解釈でき、UI の他の部分に合う形で表示できる方法を提供することで、状態を表示するためのより上品な方法を提供します。

### バッジの種類

バッジには 2 種類あります。

* 文書バッジ: 通常、ブラウザーのタブ上で、ページアイコンの近くまたは上に表示されます。
* アプリケーションバッジ: インストールされたウェブアプリケーションのアイコンと関連付けられます。使用中のデバイスに応じて、ドック、シェルフ、ホームスクリーンにあるアプリケーションのアイコン上に表示される可能性があります。
### バッジの状態

バッジは、内部で設定される 3 種類の値のうち 1 つをとることができます。

`nothing`

現在、バッジが何も設定されていないことを示します。バッジがアプリケーションによってクリアされたり、ユーザーエージェントによってリセットされることにより、この状態になる可能性があります。

`flag`

バッジが設定されているが、表示する特定のデータが無いことを示します。バッジがアプリケーションによって設定されたが、メソッドに値が渡されなかったとき、この状態になります。

`整数`

バッジの設定時に値が渡されました。この値は `0` にはなりません。バッジを設定する際に値 `0` を渡すと、ユーザーエージェントは `nothing` に設定してバッジをクリアします。

### バッジの設定

バッジは、(インストールされたアプリケーションでは) `setAppBadge()` メソッドで設定できます。このメソッドに引数を渡さない場合、バッジの値は `flag` です。ユーザーエージェントは通知バッジ (たとえばアイコンの上の色付きの丸) を表示するでしょう。

このメソッドは、数値の引数 `contents` をとることもできます。この引数を渡すと、これがバッジの中に表示されます。ユーザーエージェントは、この値を何らかの形で変える可能性があります。たとえば、4000 などの非常に大きい値を渡すと、ユーザーエージェントはこれをバッジに 99+ として表示する可能性があります。ユーザーエージェントは、このデータを無視してかわりにマーカーを表示する可能性もあります。

### バッジのクリア

バッジは、`clearAppBadge()` メソッドでクリアできます。このメソッドは引数をとらず、バッジを値 `nothing` に設定します。また、`setAppBadge()` に値 `0` を渡すと、バッジを `nothing` に設定してクリアします。

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

なし

### Navigator インターフェイスの拡張

`Navigator.setAppBadge()`

アプリケーションに関連付けられたアイコンにバッジを設定します。

`Navigator.clearAppBadge()`

アプリケーションに関連付けられたアイコンのバッジをクリアします。

### WorkerNavigator インターフェイスの拡張

`WorkerNavigator.setAppBadge()`

アプリケーションに関連付けられたアイコンにバッジを設定します。

`WorkerNavigator.clearAppBadge()`

アプリケーションに関連付けられたアイコンのバッジをクリアします。

例
-

以下のようにすると、現在のアプリケーションに値 12 の通知バッジを設定できます。

```js
navigator.setAppBadge(12);
```

以下のようにすると、現在のアプリケーションの通知バッジをクリアできます。

```js
navigator.clearAppBadge();
```

仕様書
---

| Specification |
| --- |
| Badging API # setappbadge-method |

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

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

関連情報
----

* Badging for app icons
* Badging API Explainer


USBConfiguration - Web API

USBConfiguration
================

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

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

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

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

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

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

`USBConfiguration()`
Experimental

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

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

`USBConfiguration.configurationValue` 読取専用
Experimental

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

`USBConfiguration.configurationName` 読取専用
Experimental

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

`USBConfiguration.interfaces` 読取専用
Experimental

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

仕様書
---

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

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

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


RadioNodeList - Web API

RadioNodeList
=============

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

NodeList

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

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

`RadioNodeList.value`

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

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

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

仕様書
---

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

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

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

関連情報
----

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


FileSystemWritableFileStream - Web API

FileSystemWritableFileStream
============================

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

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

WritableStream

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

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

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

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

`FileSystemWritableFileStream.write`

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

`FileSystemWritableFileStream.seek`

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

`FileSystemWritableFileStream.truncate`

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

例
-

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

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

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

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

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

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

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

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

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

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

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

仕様書
---

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

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

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

関連情報
----

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


IDBVersionChangeEvent - Web API

IDBVersionChangeEvent
=====================

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

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

Event

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

`IDBVersionChangeEvent()`

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

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

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

`IDBVersionChangeEvent.oldVersion` 読取専用

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

`IDBVersionChangeEvent.newVersion` 読取専用

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

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

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

例
-

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

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

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

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

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

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

仕様書
---

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

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

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

関連情報
----

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


Permissions API - Web API

Permissions API
===============

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

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

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

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

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

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

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

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

例
-

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

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

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

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

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

`Permissions`

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

`PermissionStatus`

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

仕様書
---

| Specification |
| --- |
| Permissions  |

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

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

### api.Permissions

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

### api.Navigator.permissions

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

### api.WorkerNavigator.permissions

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

関連情報
----

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


Clients - Web API

Clients
=======

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

メソッド
----

`Clients.get()`

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

`Clients.matchAll()`

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

`Clients.openWindow()`

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

`Clients.claim()`

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

例
-

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

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

      let chatClient;

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

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

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

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

仕様書
---

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

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

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

関連情報
----

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


VRDisplayCapabilities - Web API

VRDisplayCapabilities
=====================

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

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

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

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

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

プロパティ
-----

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

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

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

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

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

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

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

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

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

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

例
-

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

仕様書
---

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

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

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

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

関連情報
----

* WebVR API


DedicatedWorkerGlobalScope - Web API

DedicatedWorkerGlobalScope
==========================

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

EventTarget

WorkerGlobalScope

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

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

`DedicatedWorkerGlobalScope.name` 読取専用

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

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

`WorkerGlobalScope.self`

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

`WorkerGlobalScope.console` 読取専用

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

`WorkerGlobalScope.location` 読取専用

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

`WorkerGlobalScope.navigator` 読取専用

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

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

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

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

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

`DedicatedWorkerGlobalScope.close()`

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

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

`WorkerGlobalScope.dump()`
Non-standard

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

`WorkerGlobalScope.importScripts()`

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

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

`atob()`

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

`btoa()`

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

`clearInterval()`

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

`clearTimeout()`

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

`setInterval()`

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

`setTimeout()`

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

イベント
----

`message`

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

`messageerror`

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

仕様書
---

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

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

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

関連項目
----

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


AbortSignal - Web API

AbortSignal
===========

**`AbortSignal`** インターフェイスは DOM リクエスト（フェッチなど）と通信し、必要に応じて `AbortController` オブジェクトを介して中止することを可能にするシグナルオブジェクトを表します。

EventTarget

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

*AbortSignal インターフェイスには、親インターフェイスである `EventTarget` から継承しているプロパティもあります。*

`AbortSignal.aborted` 読取専用

論理値で、シグナルが通信しているリクエスト（または複数のリクエスト）が中止されているか (`true`)、中止されていないか (`false`) を表します。

`AbortSignal.reason` 読取専用

シグナルが中止されると、中止の理由を提供する JavaScript の値です。

静的メソッド
------

`AbortSignal.abort()`

既に中止と設定された **`AbortSignal`** を返します。

`AbortSignal.timeout()`

指定された時間の後で自動的に中止となる **`AbortSignal`** インターフェイスを返します。

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

***`AbortSignal`** インターフェイスには、親インターフェイスである `EventTarget` から継承しているメソッドもあります。*

`AbortSignal.throwIfAborted()`

シグナルが中止された場合、シグナルの中止理由 (`reason`) で例外を発生させ、それ以外の場合は何もしません。

イベント
----

`addEventListener()` を使うか、このインターフェイスの `onイベント名` プロパティにイベントリスナーを割り当てるかして、このイベントを待ち受けしてください。

`abort`

 このシグナルが通信している DOM リクエストが中断されたとき、呼び出されます。
 `onabort` プロパティを介しても利用可能です。

例
-

### 明示的なシグナルを使用したフェッチ操作の中止

次のコードでは、フェッチ API を使用して動画をダウンロードします。

まず `AbortController()` コンストラクターを使ってコントローラーを生成し、`AbortController.signal` プロパティを使用して関連する `AbortSignal` オブジェクトへの参照を取得します。

読み込みリクエスト が初期化すると、 `AbortSignal` をリクエストのオプションオブジェクト（下記 `{signal}` を参照）の内部のオプションとして渡します。これによりシグナルと読み込みリクエストのコントローラーが関連付き、`AbortController.abort()` を呼び出すことで下記の 2 つ目のイベントリスナーに見られるように中断が許可されます。
 下記では、フェッチ処理が 2 つ目のイベントリスナーで中止されていることがわかります。このイベントリスナーは、中止ボタン (`abortBtn`) がクリックされたときに起動します。

```js
const controller = new AbortController();
const signal = controller.signal;

const url = "video.mp4";
const downloadBtn = document.querySelector(".download");
const abortBtn = document.querySelector(".abort");

downloadBtn.addEventListener("click", fetchVideo);

abortBtn.addEventListener("click", () => {
  controller.abort();
  console.log("Download aborted");
});

function fetchVideo() {
  fetch(url, { signal })
    .then((response) => {
      console.log("Download complete", response);
    })
    .catch((err) => {
      console.error(`Download error: ${err.message}`);
    });
}
```

**メモ:** `abort()` が呼び出されると、`fetch()` のプロミスは `AbortError` で失敗します。

You can find a full working example on GitHub; you can also see it running live.

### タイムアウトによるフェッチ操作の中止

 もしタイムアウトで処理を中断する必要がある場合は、静的な `AbortSignal.timeout()` メソッドを使用することができます。
 これは、指定のミリ秒後に自動的にタイムアウトする `AbortSignal` を返すものです。

 下記のコードでは、ファイルのダウンロードに成功するか、 5 秒後にタイムアウトエラーが発生した場合にどのように処理するかを示しています。
 タイムアウトが発生した場合、`fetch()` のプロミスは "`TimeoutError`" `DOMException` で拒否されることに注意してください。
 これにより、タイムアウト(おそらくユーザーへの通知が必要)とユーザーによる中止をコードで区別することができます。

```js
const url = "video.mp4";

try {
  const res = await fetch(url, { signal: AbortSignal.timeout(5000) });
  const result = await res.blob();
  // …
} catch (err) {
  if (err.name === "TimeoutError") {
    console.error("Timeout: It took more than 5 seconds to get the result!");
  } else if (err.name === "AbortError") {
    console.error(
      "Fetch aborted by user action (browser stop button, closing tab, etc.",
    );
  } else if (err.name === "TypeError") {
    console.error("AbortSignal.timeout() method is not supported");
  } else {
    // A network error, or some other problem.
    console.error(`Error: type: ${err.name}, message: ${err.message}`);
  }
}
```

### タイムアウトまたは明示的な中止を伴うフェッチの中止

`fetch()` は複数のシグナルを組み合わせられるようには設計されていないので、 `AbortController.abort()` の呼び出しまたは `AbortSignal` のタイムアウトのどちらかでダウンロードを中止することは「直接」はできません（ただし、前の例のように、停止ボタンなどのブラウザー内蔵の仕組みからタイムアウトシグナルを中止することができます）。

 複数のシグナルに対してトリガーを発生させるには、デイジーチェーン接続する必要があります。
 次のコードは、別個のタイマーのハンドラーで `AbortController.abort()` を呼び出す方法を示しています。

```js
try {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), 5000);
  const res = await fetch(url, { signal: controller.signal });
  const body = await res.json();
} catch (e) {
  if (e.name === "AbortError") {
    // Notify the user of abort.
    // Note this will never be a timeout error!
  } else {
    // A network error, or some other problem.
    console.log(`Type: ${e.name}, Message: ${e.message}`);
  }
} finally {
  clearTimeout(timeoutId);
}
```

**メモ:** `AbortSignal.timeout()` を使用したときとは異なり、最終的な中止がタイムアウトによって発生したのかどうかを判断する方法はありません。

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-AbortSignal |

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

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

関連情報
----

* フェッチ API
* Abortable Fetch (Jake Archibald) （英語）


caches - Web API

caches
======

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

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

値
-

`CacheStorage` オブジェクト。

例
-

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

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

仕様書
---

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

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

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

関連情報
----

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


ウェブ NFC API - Web API

ウェブ NFC API
===========

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

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

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

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

`NDEFMessage`

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

`NDEFReader`

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

`NDEFRecord`

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

仕様書
---

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

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

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


VRLayerInit - Web API

VRLayerInit
===========

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

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

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

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

プロパティ
-----

`VRLayerInit.leftBounds`
非推奨

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

`VRLayerInit.rightBounds`
非推奨

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

`VRLayerInit.source`
非推奨

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

例
-

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

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

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

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

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

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

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

仕様書
---

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

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

関連情報
----

* WebVR API


VRDisplay - Web API

VRDisplay
=========

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

**`VRDisplay`** は WebVR API のインターフェイスで、この API が対応している VR 機器を表します。機器 ID や説明文のような汎用的な情報が含まれており、 VR シーンの表示を開始するためのメソッドや、視線パラメーターやディスプレイの備える機能の取得、その他の重要な機能を含んでいます。

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

`Navigator.getVRDisplays()` を呼び出すことで、すべての接続されている VR 機器の配列が返されます。

プロパティ
-----

`VRDisplay.capabilities` 読取専用
非推奨

`VRDisplay` の備える機能を示す `VRDisplayCapabilities` オブジェクトを返します。

`VRDisplay.depthFar`
非推奨

視錐台 (ビューフラスタム；つまりシーンの可視領域の境界) の far 平面を定義している z-depth の取得と設定を行います。

`VRDisplay.depthNear`
非推奨

視錐台 (ビューフラスタム；つまりシーンの可視領域の境界) の near 平面を定義している z-depth の取得と設定を行います。

`VRDisplay.displayId` 読取専用
非推奨

この VRDisplay 固有のIDを返します。この ID は Gamepad API (参照 `Gamepad.displayId`) の関連付けのために使用されます。

`VRDisplay.displayName` 読取専用
非推奨

`VRDisplay` を識別するための人間が読める形式の名前を返します。

`VRDisplay.isConnected` 読取専用
非推奨

`VRDisplay` がコンピュータに接続されているか否かを示す論理値を返します。

`VRDisplay.isPresenting` 読取専用
非推奨

`VRDisplay` が現在コンテンツを表示中であるか否かを示す論理値を返します。

`VRDisplay.stageParameters` 読取専用
非推奨

`VRDisplay` がルームスケール体験をサポートしている場合に、ルームスケールパラメーターを含んだ `VRStageParameters` オブジェクトを返します。

メソッド
----

`VRDisplay.getEyeParameters()`
非推奨

指定した側の視線パラメーターを含む `VREyeParameters` オブジェクトを返します。

`VRDisplay.getFrameData()`
非推奨

`VRFrameData` オブジェクトを受け取り、現在のフレームをレンダリングするために必要な情報を入力します。

`VRDisplay.getImmediatePose()`
非推奨

`VRDisplay` の現在のポーズを定義した `VRPose` オブジェクトを、予測を適用せずに返します。これはもはや必要ないため、仕様から削除されました。

`VRDisplay.getLayers()`
非推奨

`VRDisplay` によって現在表示されているレイヤーを返します。

`VRDisplay.getPose()`
非推奨

現在のフレームが実際に表示されるときの `VRDisplay` の予測ポーズを定義した `VRPose` オブジェクトを返します。**このメソッドは非推奨です。代わりに `VRDisplay.getFrameData()` を使用する必要があり、これも `VRPose` オブジェクトを提供します。**

`VRDisplay.resetPose()`
非推奨

現在の `VRPose.position` と `VRPose.orientation` を"原点/ゼロ"位置の値として扱うように、`VRDisplay` のポーズをリセットします。

`VRDisplay.cancelAnimationFrame()`
非推奨

`Window.cancelAnimationFrame` の特別な実装で、`VRDisplay.requestAnimationFrame()` を未登録状態にすることをコールバック可能にしています。

`VRDisplay.requestAnimationFrame()`
非推奨

`Window.requestAnimationFrame` の特別な実装で、`VRDisplay`の新しいフレームが描画される際に毎回呼出されるコールバック関数を持っています。

`VRDisplay.requestPresent()`
非推奨

`VRDisplay` へのシーン描画を開始します。

`VRDisplay.exitPresent()`
非推奨

`VRDisplay` のシーン描画を停止します。

`VRDisplay.submitFrame()`
非推奨

現在表示されている `VRLayerInit` の状態を取得し、`VRDisplay` に表示します。

例
-

```js
if (navigator.getVRDisplays) {
  console.log("WebVR 1.1 supported");
  // Then get the displays attached to the computer
  navigator.getVRDisplays().then(function (displays) {
    // If a display is available, use it to present the scene
    if (displays.length > 0) {
      vrDisplay = displays[0];
      // Now we have our VRDisplay object and can do what we want with it
    }
  });
}
```

**メモ:** この完全なコードは raw-webgl-example で確認できます。

仕様書
---

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

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

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

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

関連情報
----

* WebVR API


MIDIInput - Web API

MIDIInput
=========

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

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

EventTarget

MIDIPort

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

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

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

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

### イベント

`midimessage`

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

例
-

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

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

仕様書
---

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

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

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


Touch - Web API

Touch
=====

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

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

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

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

`Touch()`

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

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

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

### 基本プロパティ

`Touch.identifier` 読取専用

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

`Touch.screenX` 読取専用

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

`Touch.screenY` 読取専用

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

`Touch.clientX` 読取専用

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

`Touch.clientY` 読取専用

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

`Touch.pageX` 読取専用

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

`Touch.pageY` 読取専用

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

`Touch.target` 読取専用

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

### タッチ領域

`Touch.radiusX` 読取専用

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

`Touch.radiusY` 読取専用

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

`Touch.rotationAngle` 読取専用

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

`Touch.force` 読取専用

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

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

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

仕様書
---

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

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

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

関連情報
----

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


MutationObserver - Web API

MutationObserver
================

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

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

`MutationObserver()`

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

メソッド
----

`disconnect()`

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

`observe()`

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

`takeRecords()`

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

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

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

例
-

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

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

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

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

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

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

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

仕様書
---

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

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

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

関連情報
----

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


GPUAdapterInfo - Web API

GPUAdapterInfo
==============

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

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

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

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

`architecture`
Experimental
 読取専用

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

`description`
Experimental
 読取専用

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

`device`
Experimental
 読取専用

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

`vendor`
Experimental
 読取専用

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

例
-

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

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

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

  // ...
}
```

仕様書
---

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

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

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

関連情報
----

* WebGPU API


ServiceWorkerContainer - Web API

ServiceWorkerContainer
======================

`ServiceWorkerContainer` はサービスワーカー APIのインターフェイスで、ネットワークエコシステムの全体的な単位として、サービスワーカーを表すオブジェクトを提供します。 サービスワーカーは、サービスワーカーの登録、登録解除、更新のための機能や、サービスワーカーの状態とそれらの登録状況にアクセスするための機能を備えています。

ここで最も重要なことは、サービスワーカーを登録するための `ServiceWorkerContainer.register()` メソッドと、現在のページがアクティブに制御されているかどうかを判断するための `ServiceWorkerContainer.controller` プロパティを公開していることです。

EventTarget

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

`ServiceWorkerContainer.controller` 読取専用

`ServiceWorker` オブジェクトの状態が `activating` または `activated` の場合、それを返します（`ServiceWorkerRegistration.active` によって返されるのと同じオブジェクトです）。このプロパティは、強制再読み込みのリクエスト中（*Shift* + 再読み込み）、またはアクティブワーカーがない場合は `null` を返します。

`ServiceWorkerContainer.ready` 読取専用

サービスワーカーがアクティブになるまでコードの実行を遅らせる方法を提供します。 決して拒否せず、現在のページに関連付けられている `ServiceWorkerRegistration` に `ServiceWorkerRegistration.active` ワーカーが存在するようになるまで無期限に待機する `Promise` を返します。 その条件が満たされると、`ServiceWorkerRegistration` で解決されます。

イベント
----

`controllerchange`

文書に関連する `ServiceWorkerRegistration` が新しいアクティブ（`active`）ワーカーを取得すると発生します。

`error`
非推奨

Non-standard

関連するサービスワーカーでエラーが発生するたびに発生します。

`message`

着信メッセージを `ServiceWorkerContainer` オブジェクトが受信したときに発生します（例えば、`MessagePort.postMessage()` 呼び出しを介して）。

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

`ServiceWorkerContainer.register()`

指定された `scriptURL` の `ServiceWorkerRegistration` を作成または更新します。

`ServiceWorkerContainer.getRegistration()`

指定された文書 URL とスコープが一致する `ServiceWorkerRegistration` オブジェクトを取得します。 このメソッドは、`ServiceWorkerRegistration` または `undefined` に解決される `Promise` を返します。

`ServiceWorkerContainer.getRegistrations()`

`ServiceWorkerContainer` に関するすべての `ServiceWorkerRegistration` オブジェクトを配列で返します。 このメソッドは、`ServiceWorkerRegistration` の配列に解決される `Promise` を返します。

`ServiceWorkerContainer.startMessages()`

サービスワーカーからその制御下のページにディスパッチされるメッセージの流れを明示的に開始します（例えば、`Client.postMessage()` を介して送信されます）。 これは、ページのコンテンツの読み込みが完了する前であっても、送信されたメッセージに早く反応するために使用できます。

例
-

以下の例では、まずブラウザーがサービスワーカーをサポートしているかどうかを確認します。 サポートしている場合、コードはサービスワーカーを登録し、ページがサービスワーカーによってアクティブに制御されているかどうかを判断します。 そうでない場合は、サービスワーカーが制御できるように、ページを再読み込みするようユーザーに求めます。 コードは、登録失敗も報告します。

```js
if ("serviceWorker" in navigator) {
  // デフォルトのスコープを使用して、
  // サイトのルートでホストされるサービスワーカーを登録します。
  navigator.serviceWorker
    .register("/sw.js")
    .then((registration) => {
      console.log("サービスワーカー登録成功:", registration);

      // この時点で、オプションで registration に何かを行うことができます。
      // https://developer.mozilla.org/ja/docs/Web/API/ServiceWorkerRegistration を参照してください
    })
    .catch((error) => {
      console.error(`サービスワーカー登録失敗: ${error}`);
    });

  // 登録状況に関係なく、
  // 現在のページが既存のサービスワーカーによって制御されているかどうか、
  // およびそのコントローラーがいつ変更されたかについての情報も表示しましょう。

  // まず、現在サービスワーカーが制御されているかどうか、
  // 1 回限りのチェックを行います。
  if (navigator.serviceWorker.controller) {
    console.log(
      "このページは現在サービスワーカーによって制御されています:",
      navigator.serviceWorker.controller,
    );
  }

  // 次に、ハンドラーを登録して、新しいまたは更新された
  // サービスワーカーが制御を取得するタイミングを検出します。
  navigator.serviceWorker.oncontrollerchange = () => {
    console.log(
      "このページは次のものが制御しています。",
      navigator.serviceWorker.controller,
    );
  };
} else {
  console.log("サービスワーカーに対応していません。");
}
```

仕様書
---

| Specification |
| --- |
| Service Workers # serviceworkercontainer-interface |

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

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

関連情報
----

* サービスワーカーの使用
* サービスワーカーの基本的なコード例
* ServiceWorker の準備はできていますか？（英語）
* `Promise`
* ウェブワーカーの使用


Request - Web API

Request
=======

**`Request`** はフェッチ API のインターフェイスで、リソースのリクエストを表します。

新しい `Request` オブジェクトは `Request()` コンストラクターを用いて生成することができますが、 `Request` オブジェクトは他の API 操作、例えばサービスワーカーの `FetchEvent.request` などの結果として返されたものに遭遇することの方が多いでしょう。

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

`Request()`

新しい `Request` オブジェクトを生成します。

プロパティ
-----

`Request.body` 読取専用

本体の中身の `ReadableStream` です。

`Request.bodyUsed` 読取専用

`true` または `false` で、レスポンス中で本体が既に使用されたかどうかを示します。

`Request.cache` 読取専用

リクエストのキャッシュモード (`default`, `reload`, `no-cache` など) が入ります。

`Request.credentials` 読取専用

リクエストの認証情報 (`omit`, `same-origin`, `include` など) が入ります。既定値は `same-origin` です。

`Request.destination` 読取専用

文字列で、リクエストの宛先を示します。これはその種類のコンテンツがリクエストされることを示す文字列です。

`Request.headers` 読取専用

リクエストに関連付けられた `Headers` オブジェクトが入ります。

`Request.integrity` 読取専用

リクエストのサブリソース完全性の値を保持します（`sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=` など）。

`Request.method` 読取専用

リクエストメソッド (`GET`, `POST` など) を保持します。

`Request.mode` 読取専用

リクエストのモード ( `cors`, `no-cors`, `same-origin`, `navigate` など) を保持します。

`Request.priority` 読取専用
Experimental

このリクエストの優先度のヒント（`high`, `low`, `auto` など）を保持します。

`Request.redirect` 読取専用

リダイレクトをどう扱うかのモードが入ります。 `follow`, `error`, `manual` のいずれかです。

`Request.referrer` 読取専用

リクエストのリファラー (`client` など) が入ります。

`Request.referrerPolicy` 読取専用

リファラに関するポリシー (`no-referrer` など) が入ります。

`Request.url` 読取専用

リクエストの URL が入ります。

メソッド
----

`Request.arrayBuffer()`

リクエストの本体の `ArrayBuffer` 表現で解決するプロミスを返します。

`Request.blob()`

リクエストの本体の `Blob` 表現で解決するプロミスを返します。

`Request.clone()`

現在の `Request` オブジェクトのコピーを生成します。

`Request.formData()`

リクエストの本体の `FormData` 表現で解決するプロミスを返します。

`Request.json()`

リクエストの本体を `JSON` で解釈した結果で解決するプロミスを返します。

`Request.text()`

リクエストの本体のテキスト表現で解決するプロミスを返します。

**メモ:** リクエストの本体の関数は 1 度しか呼び出せません。 2 回目以降は空の文字列または ArrayBuffer で解決します。

例
-

次のスニペットでは、`Request()` コンストラクターを使用して (スクリプトと同じディレクトリーにある画像ファイルのために) 新しい request を生成し、いくつかリクエストのプロパティ値を返しています。

```js
const request = new Request("https://www.mozilla.org/favicon.ico");

const url = request.url;
const method = request.method;
const credentials = request.credentials;
```

このリクエストは、下記のように `Request` オブジェクトを引数として `fetch()` に渡すことで読み取ることができます。

```js
fetch(request)
  .then((response) => response.blob())
  .then((blob) => {
    image.src = URL.createObjectURL(blob);
  });
```

以下のスニペットでは、 `Request()` コンストラクターにいくつかの初期化データと本体コンテンツを付けて、本体ペイロードを必要とする API リクエストのための新しいリクエストを生成します。

```js
const request = new Request("https://example.com", {
  method: "POST",
  body: '{"foo": "bar"}',
});

const url = request.url;
const method = request.method;
const credentials = request.credentials;
const bodyUsed = request.bodyUsed;
```

**メモ:** body の型は `Blob`, `ArrayBuffer`, `TypedArray`, `DataView`, `FormData`, `URLSearchParams`, `ReadableStream`, `String` オブジェクトのいずれか、および文字列リテラルのみですので、 JSON オブジェクトを本体に追加するには、そのオブジェクトの文字列化をする必要があります。

すると `Request` オブジェクトを、例えば `fetch()` 呼び出しの引数として渡すことで API リクエストを取得できて、レスポンスを取得できます。

```js
fetch(request)
  .then((response) => {
    if (response.status === 200) {
      return response.json();
    } else {
      throw new Error("Something went wrong on API server!");
    }
  })
  .then((response) => {
    console.debug(response);
    // …
  })
  .catch((error) => {
    console.error(error);
  });
```

仕様書
---

| Specification |
| --- |
| Fetch Standard # request-class |

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

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

関連情報
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP


Worklet - Web API

Worklet
=======

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

**`Worklet`** インターフェイスは軽量なウェブワーカーを提供し、開発者がレンダリングパイプラインの低水準な部分を制御できるようにします。

ワークレットでは、グラフィックや音声処理といった、高い性能を必要とする処理を JavaScript や WebAssembly コードを使って記述できます。

ワークレットの種類
---------

ワークレットの利用はいくつかの用途に限定されています。つまり、ウェブワーカーのように好きな計算をさせる用途には使えません。 `Worklet` インターフェイスは、すべての種類のワークレットに共通する属性とメソッドを抽象化する一方、直接インスタンスを作成することはできません。実際にインスタンスを作成するには、以下のクラスを利用します。

| クラス名 | 説明 | 動作するスレッド | 仕様書 |
| --- | --- | --- | --- |
| `PaintWorklet` (en-US) | CSS プロパティがファイルを必要とする場合に、プログラムによって画像を生成するためのものです。このインターフェイスには `CSS.paintWorklet` でアクセスします。 | **Chrome:** メインスレッド**Gecko:** 描画スレッド | CSS 描画 API |
| `AudioWorklet` | カスタムオーディオノードでの音声処理のために使用します。 | ウェブオーディオレンダリングスレッド | ウェブオーディオ API |
| `AnimationWorklet` | スクロールに伴うアニメーションや、性能を必要とするアニメーションをプログラミングするために使用します。 | 編集スレッド | CSS アニメーションワークレット API |
| `LayoutWorklet` | カスタム要素のサイズと位置を定義するために使用します。 |  | CSS レイアウト API |

WebGL を用いた 3D グラフィックにはワークレットを使用しません。その代わりに GLSL で記述した頂点シェーダーとフラグメントシェーダーを書いてください。これらのシェーダーコードはグラフィックカードの上で動作します。

プロパティ
-----

*Worklet インターフェイスでは、プロパティは定義されていません。*

メソッド
----

`Worklet.addModule()`
Experimental

指定された URL にあるスクリプト モジュールを現在のワークレットに追加します。

仕様書
---

| Specification |
| --- |
| HTML Standard # worklets-worklet |

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

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

関連情報
----

* Houdini: Demystifying CSS on Google Developers (May 2016)
* AudioWorklet :: What, Why, and How on YouTube (November 2017)
* Enter AudioWorklet on Google Developers (December 2017)
* Animation Worklet - HTTP203 Advent on YouTube (December 2017)


XRSystem - Web API

XRSystem
========

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

WebXR Device API の **`XRSystem`** インターフェイスは、WebXR セッションを表す `XRSession` (en-US) オブジェクトにアクセスできるようにするメソッドを提供します。 その `XRSession` が手元にあれば、それを使用して拡張現実（AR）または仮想現実（VR）デバイスと対話できます。

プロパティ
-----

*`XRSystem` はプロパティを直接提供しませんが、親インターフェイスである `EventTarget` からプロパティを継承します。*

メソッド
----

*`XRSystem` インターフェイスには、親インターフェイスである `EventTarget` からメソッドを継承することに加えて、次のメソッドが含まれています。*

`isSessionSupported()` (en-US)
Experimental

ブラウザーが指定された `XRSessionMode` (en-US) をサポートしている場合、`true` に解決される promise を返します。 指定されたモードをサポートしていない場合、`false` に解決されます。

`requestSession()` (en-US)
Experimental

指定された `XRSessionMode` (en-US) を持つ新しい `XRSession` (en-US) に解決される promise を返します。

イベント
----

`devicechange` (en-US)
Experimental

 使用可能な XR デバイスのセットが変更されたときに送信されます。
 `ondevicechange` (en-US) イベントハンドラーを使用することもできます。

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

このインターフェイスは、以前のバージョンの仕様では単に `XR` と呼ばれていました。 コードや文書に `XR` への参照がある場合は、それを `XRSystem` に置き換えてください。

例
-

次の例は、`isSessionSupported()` (en-US) と `requestSession()` (en-US) の両方を使用する方法を示しています。

```js
if (navigator.xr) {
  immersiveButton.addEventListener("click", onButtonClicked);
  navigator.xr.isSessionSupported("immersive-vr").then((isSupported) => {
    if (isSupported) {
      immersiveButton.disabled = false;
    } else {
      immersiveButton.disabled = true;
    }
  });
}

function onButtonClicked() {
  if (!xrSession) {
    navigator.xr.requestSession("immersive-vr").then((session) => {
      // onSessionStarted() not shown for reasons of brevity and clarity.
      onSessionStarted(session);
    });
  } else {
    // Shut down the already running XRSession
    xrSession.end().then(() => {
      // Since there are cases where the end event is not sent, call the handler here as well.
      onSessionEnded();
    });
  }
}
```

このコードは、`navigator.xr` プロパティを探して、WebXR が使用可能かどうかを確認することから始まります。 見つかった場合は、WebXR が存在することがわかっているので、ユーザーがクリックして没入型 VR モードのオンとオフを切り替えることができるボタンのハンドラーを確立します。

ただし、目的の没入型モードが利用可能かどうかはまだわかりません。 これを決定するために、ボタン `immersiveButton` を有効にする前に、必要なセッションオプションを渡して `isSessionSupported()` を呼び出します。 これにより、ユーザーは、没入型 VR モードが使用可能な場合にのみ没入型モードに切り替えることができます。 没入型 VR が利用できない場合、ボタンを使用できないように無効しています。

`onButtonClicked()` 関数は、実行中のセッションがすでに存在するかどうかを確認します。 存在しない場合は、`requestSession()` を使用して開始し、返された promise が解決したら、関数 `onSessionStarted()` を呼び出して、レンダリングなどのためにセッションを設定します。

一方、進行中の XR セッションがすでに存在する場合は、代わりに `end()` (en-US) を呼び出して現在のセッションを終了します。 現在のセッションが終了すると、`end` (en-US) イベントが送信されるので、そのハンドラーで `xrSession` を `null` に設定して、進行中のセッションがなくなったことを記録します。 そうすれば、ユーザーがボタンをもう一度クリックすることで、新しいセッションが開始されます。

仕様
--

| Specification |
| --- |
| WebXR Device API # xrsystem-interface |

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

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


Storage API - Web API

Storage API
===========

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

ストレージ標準（Storage Standard）は、個々のウェブサイトのコンテンツがアクセス可能なデータを格納するすべての API およびテクノロジーで使用する、共通の共有ストレージシステムを定義しています。Storage API は、どのくらいのスペースを使用できるかや、すでにどのくらいのスペースを使用しているかを調べたり、ユーザーエージェントが他のもののための場所を空けるためにサイトデータを処分する前に、警告する必要があるかどうかを制御したりといった機能を、サイトのコードに提供します。

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

サイトストレージ — ストレージ標準によって管理しているウェブサイト用に格納されたデータ — には、次のものが含まれます。

* IndexedDB データベース
* Cache API のデータ
* サービスワーカーの登録
* `window.localStorage` を使用して管理している Web Storage API のデータ
* `History.pushState()` を使用して保存した履歴状態情報
* アプリケーションキャッシュ
* 通知データ
* 維持される可能性があるその他の種類のサイトでアクセス可能なサイト固有のデータ
サイトストレージユニット
------------

ストレージ標準によって記述され、Storage API を使用して相互作用するサイトストレージシステムは、各オリジン（origin）に対して 1 つの**サイトストレージユニット**（site storage unit、サイトの保管単位）で構成されています。基本的に、すべてのウェブサイトまたはウェブアプリには、データを格納するための独自のストレージユニットがあります。以下の図は、内部に 3 つのストレージユニットを持つサイトストレージプールを示しています。これはストレージユニットがどのように異なるデータタイプを格納でき、異なるクォータ（最大ストレージ制限）を持つことができるかを示しています。

![サイトストレージプールが、さまざまな API からのデータとクォータに達する前に残っている可能性のある未使用スペースを含む複数のストレージユニットで構成されている様子を示す図。](/ja/docs/Web/API/Storage_API/StorageUnits.png)

* Origin 1 には、Web Storage のデータと IndexedDB のデータがありますが、空き容量もあります。現在の使用量はまだクォータに達していません。
* Origin 2 にはまだデータが格納されていません。内容を待っているだけの空の箱です。ただし、このオリジンは他の 2 つよりもクォータが少なくなります。アクセス頻度の低いサイト、またはデータストレージ要件が低いことが知られているサイトである可能性があります。
* Origin 3 のストレージユニットは完全にいっぱいです。クォータに達し、既存のデータを削除しない限り、これ以上データを格納できません。

ユーザーエージェントは様々なオリジンのクォータを決定するために様々なテクニックを使う可能性があります。最も可能性の高い方法の 1 つ — 実際に仕様が具体的に推奨するもの — は、個々のサイトの人気や使用レベルを考慮して、それらのクォータがどうあるべきかを判断することです。ブラウザーがこれらのクォータをカスタマイズするためのユーザーインターフェイスを提供することも考えられます。

ボックスモード
-------

各サイトストレージユニット内の実際のデータストレージは、その**ボックス**と呼ばれます。各サイトストレージユニットには、そのすべてのデータを配置するボックスが 1 つだけあり、そのボックスのデータ保持ポリシーを説明する**ボックスモード**があります。次の 2 つのモードがあります。

`"best-effort"`（最大限の努力）

ユーザーエージェントは可能な限りボックスに含まれているデータを保持しようと試みますが、ストレージスペースが少なくなり、ストレージの圧力を軽減するためにボックスを消去する必要がある場合は*ユーザーに警告しません*。

`"persistent"`（永続的）

ユーザーエージェントはデータを可能な限り長く保持し、`"persistent"` とマークされたボックスの消去を検討する前にすべての `"best-effort"` ボックスを消去します。persistent ボックスの消去を検討する必要がある場合、ユーザーエージェントはユーザーに通知し、必要に応じて 1 つ以上の persistent ボックスを消去する方法を提供します。

オリジンのボックスモードを変更するには、`"persistent-storage"`（永続的ストレージ）機能を使うパーミッションが必要です。

データの永続化と消去
----------

サイトやアプリに **`"persistent-storage"`** 機能のパーミッションがある場合は、`StorageManager.persist()` メソッドを使用して、そのボックスを永続的にすることを要求できます。また利用特性や他の測定基準により、ユーザーエージェントがサイトのストレージユニットを永続的にすることを決定することも可能です。`"persistent-storage"` 機能のパーミッション関連のフラグ、アルゴリズム、およびタイプはすべてパーミッションの標準デフォルトに設定されています。ただし、**パーミッションの状態**（permission state）はオリジン全体で同じでなければならず、パーミッションの状態が `"granted"` （付与）されていない場合（何らかの理由で永続的ストレージ機能へのアクセスが拒否された場合）、そのオリジンのサイトストレージユニットのボックスモードは常に `"best-effort"` になります。

**メモ:** パーミッションの取得と管理の詳細については、Permissions API の使用を参照してください。

サイトストレージユニットを消去するとき、オリジンのボックスは単一の実体として扱われます。ユーザーエージェントがそれを消去する必要があり、ユーザーが承認した場合、個々の API からデータのみを消去する手段を提供するのではなく、データストア全体を消去します。

ボックスが `"persistent"` とマークされている場合、その内容は、データのオリジン自身やユーザーが特別に消すことなしには、ユーザーエージェントによって消去されません。これには、ユーザーが「キャッシュを消去」や「最近の履歴を消去」のオプションを選択した場合などのシナリオが含まれます。ユーザーは、persistent サイトストレージユニットを削除するための許可を特に求められます。

クォータと使用量の推定
-----------

ユーザーエージェントは、選択した任意のメカニズムを使用して、特定のサイトが使用できるストレージの最大量を決定します。この最大値がオリジンの**クォータ**（quota）です。サイトが使用しているスペースの量は、その**使用量**（usage）と呼ばれます。これらの値は両方とも推定値です。正確でない理由は次のようにいくつかあります。

* ユーザーエージェントは、これらの値がフィンガープリント（個人の推定）の目的で使用されるのを防ぐために、特定のオリジンが使用するデータの正確なサイズを不明瞭にしておくことが奨励されています。
* 格納されたデータの物理的サイズを縮小するために重複排除、圧縮、およびその他の方法が使用されることがあります。
* クォータは、オリジンが使えるスペースの控えめな概算値であり、オーバーランを防ぐためにデバイスで利用可能なスペースより小さくなければなりません。

ユーザーエージェントは、オリジンのクォータのサイズを決定するために選択した任意の方法を使用することができ、そして仕様では人気があるか頻繁に使用されるサイトに追加スペースを提供することを奨励しています。

特定のオリジンのクォータと使用量の推定値を決定するには、`navigator.storage.estimate()` メソッドを使用します。このメソッドは、解決すると、これらの数値を含む `StorageEstimate` を受け取るという Promise を返します。例えば次のようにです。

```js
navigator.storage.estimate().then((estimate) => {
  // estimate.quota は見積もりクォータです
  // estimate.usage は見積もり使用バイト数です
});
```

仕様
--

| Specification |
| --- |
| Storage Standard # storagemanager |

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

### StorageManager

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

関連情報
----

* `navigator.storage` (en-US)
* `StorageManager`（`navigator.storage` から返されたオブジェクト）
* Permissions API の使用


TaskAttributionTiming - Web API

TaskAttributionTiming
=====================

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

**`TaskAttributionTiming`** インターフェイスは、長いタスクに関連する作業とそれに関連するフレームコンテキストに関する情報を返します。フレームコンテキストはコンテナーとも呼ばれ、長いタスクに関わる iframe、embed、object のことです。

通常、 `TaskAttributionTiming` オブジェクトを使って作業するのは、長いタスク を監視するときです。

`TaskAttributionTiming` は `PerformanceEntry` を継承しています。

PerformanceEntry

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

このインターフェイスは、イベントタイミングパフォーマンス項目の以下の `PerformanceEntry` プロパティを以下のように修飾して拡張します。

`PerformanceEntry.duration` 読取専用
Experimental

このインターフェイスでは `duration` は適用されないので、常に `0` を返します。

`PerformanceEntry.entryType` 読取専用
Experimental

常に `taskattribution` を返します。

`PerformanceEntry.name` 読取専用
Experimental

常の `"unknown"` を返します。

`PerformanceEntry.startTime` 読取専用
Experimental

常の `0` を返します。

このインターフェイスは以下のプロパティにも対応しています。

`TaskAttributionTiming.containerType` 読取専用
Experimental

フレームコンテナーの種類（`iframe`、`embed`、`object` のいずれか）を返します。

`TaskAttributionTiming.containerSrc` 読取専用
Experimental

コンテナーの `src` 属性を返します。

`TaskAttributionTiming.containerId` 読取専用
Experimental

コンテナーの `id` 属性を返します。

`TaskAttributionTiming.containerName` 読取専用
Experimental

コンテナーの `name` 属性を返します。

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

`TaskAttributionTiming.toJSON()`
Experimental

`TaskAttributionTiming` オブジェクトの JSON 表現を返します。

仕様書
---

| Specification |
| --- |
| Long Tasks API # sec-TaskAttributionTiming |

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

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

関連情報
----

* `PerformanceLongTaskTiming`