HTMLHtmlElement - Web API

HTMLHtmlElement
===============

**`HTMLHtmlElement`** インターフェイスは、HTML 文書のルートノードとして機能します。このオブジェクトは `HTMLElement` インターフェイスで記述されたプロパティやメソッドを継承しています。

`HTMLHtmlElement` オブジェクトを文書から受け取るには、 `document.documentElement` プロパティの値を読み取ります。

EventTarget

Node

Element

HTMLElement

HTMLHtmlElementプロパティ
-----

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

`HTMLHtmlElement.version`
非推奨

この文書に適用される HTML 文書型定義 (DTD) のバージョンを表す文字列。このプロパティは不適合であるため、もう使用するべきではありません。省略してください。

メソッド
----

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlhtmlelement |

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

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

関連情報
----

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


AudioSinkInfo - Web API

AudioSinkInfo
=============

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

Web Audio API の **`AudioSinkInfo`** インターフェイスは、`AudioContext` の sink ID (`AudioContext.sinkId` により取得できる) を表現する情報を表します。

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

`type` 読取専用
Experimental

この音声出力デバイスの種類を返します。

例
-

`sinkId` の値を `{ type: 'none' }` にして新しい `AudioContext` を生成し、後に `AudioContext.sinkId` を参照すると、`type: 'none'` が入った `AudioSinkInfo` オブジェクトが返ります。これは現在利用可能な唯一の値です。

```js
audioCtx = new window.AudioContext({
  sinkId: { type: "none" },
});

// ...

audioCtx.sinkId;
```

仕様書
---

| Specification |
| --- |
| Web Audio API # AudioSinkInfo |

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

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

関連情報
----

* SetSinkId test example
* `AudioContext.setSinkId()`
* `AudioContext.sinkId`
* `sinkchange`


AudioProcessingEvent - Web API

AudioProcessingEvent
====================

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

`AudioProcessingEvent` はウェブオーディオ API のインターフェイスで、`ScriptProcessorNode` 入力バッファーが処理可能な状態になったときに発生するイベントを表します。

このインターフェイスを持つ `audioprocess` イベントは、音声処理が必要なときに `ScriptProcessorNode` で発生します。音声処理中、入力バッファーが読み込まれ、処理されて出力音声データが生成され、出力バッファーに書き込まれます。

**警告:** この機能は非推奨となったので、`AudioWorklet` で置き換えてください。

Event

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

`AudioProcessingEvent()`
非推奨

新しい `AudioProcessingEvent` オブジェクトを生成します。

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

*親プロパティである `Event` から継承されたプロパティも実装しています*。

`playbackTime` 読取専用
非推奨

double 型で、音声が再生される時間を表します。 `AudioContext.currentTime` の時刻で定義されます。

`inputBuffer` 読取専用
非推奨

 処理する入力音声データを含むバッファーである `AudioBuffer` を指定します。
 チャンネル数はファクトリーメソッド `AudioContext.createScriptProcessor()` の引数 `numberOfInputChannels` として定義されています。
 なお、返された `AudioBuffer` は、イベントハンドラーのスコープ内のみで有効であることに注意してください。

`outputBuffer` 読取専用
非推奨

 出力する音声データを書き込むバッファーである `AudioBuffer` を指定します。
 チャンネル数はファクトリーメソッド `AudioContext.createScriptProcessor()` の引数 `numberOutputChannels` として定義されています。
 なお、返された `AudioBuffer` は、イベントハンドラーのスコープ内のみで有効であることに注意してください。

例
-

次の例は、`ScriptProcessorNode` を使用して、`AudioContext.decodeAudioData()` で読み込んだ音声を`AudioDestinationNode` で処理し、入力トラック（バッファー）の各音声サンプルにホワイトノイズを追加し、`AudioDestinationNode` を通して再生する方法を示しています。 各チャンネルと各サンプルフレームに対して、`scriptNode.onaudioprocess` 関数は関連する `audioProcessingEvent` を受け取り、それを用いて入力バッファー内の各チャンネルと各チャンネル内の各サンプルをループし、少量のホワイトノイズを追加してから、その結果をそれぞれのケースで出力サンプルに設定します。

**メモ:** 完全な動作する例は、GitHub の script-processor-node リポジトリーを参照してください（ソースコードにもアクセスできます）。

```js
const myScript = document.querySelector("script");
const myPre = document.querySelector("pre");
const playButton = document.querySelector("button");

// Create AudioContext and buffer source
const audioCtx = new AudioContext();
const source = audioCtx.createBufferSource();

// Create a ScriptProcessorNode with a bufferSize of 4096 and a single input and output channel
const scriptNode = audioCtx.createScriptProcessor(4096, 1, 1);
console.log(scriptNode.bufferSize);

// load in an audio track via XHR and decodeAudioData

function getData() {
  request = new XMLHttpRequest();
  request.open("GET", "viper.ogg", true);
  request.responseType = "arraybuffer";
  request.onload = () => {
    const audioData = request.response;

    audioCtx.decodeAudioData(
      audioData,
      (buffer) => {
        myBuffer = buffer;
        source.buffer = myBuffer;
      },
      (e) => console.error(`Error with decoding audio data: ${e.err}`),
    );
  };
  request.send();
}

// Give the node a function to process audio events
scriptNode.onaudioprocess = (audioProcessingEvent) => {
  // The input buffer is the song we loaded earlier
  const inputBuffer = audioProcessingEvent.inputBuffer;

  // The output buffer contains the samples that will be modified and played
  const outputBuffer = audioProcessingEvent.outputBuffer;

  // Loop through the output channels (in this case there is only one)
  for (let channel = 0; channel < outputBuffer.numberOfChannels; channel++) {
    const inputData = inputBuffer.getChannelData(channel);
    const outputData = outputBuffer.getChannelData(channel);

    // Loop through the 4096 samples
    for (let sample = 0; sample < inputBuffer.length; sample++) {
      // make output equal to the same as the input
      outputData[sample] = inputData[sample];

      // add noise to each output sample
      outputData[sample] += (Math.random() \* 2 - 1) \* 0.2;
    }
  }
};

getData();

// Wire up the play button
playButton.onclick = () => {
  source.connect(scriptNode);
  scriptNode.connect(audioCtx.destination);
  source.start();
};

// When the buffer source stops playing, disconnect everything
source.onended = () => {
  source.disconnect(scriptNode);
  scriptNode.disconnect(audioCtx.destination);
};
```

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

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

関連情報
----

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


FileReader - Web API

FileReader
==========

**`FileReader`** オブジェクトを使用すると、ウェブアプリケーションは、ユーザーのコンピューターに保存されているファイル（または生のデータバッファー）の内容を非同期に読み取ることができます。`File` または `Blob` オブジェクトを使用して、読み込むファイルまたはデータを指定します。

File オブジェクトは、`<input>` 要素を使用してファイルを選択した結果として返される `FileList` オブジェクト、またはドラッグ & ドロップ操作の `DataTransfer` オブジェクトから取得することができます。

`FileReader` は、ユーザーが HTML の `<input type="file">` 要素を使って、あるいはドラッグ & ドロップで明示的に選択したファイルの内容にのみアクセスすることができます。ユーザーのファイルシステムからパス名でファイルを読み込むために使用することはできません。クライアントのファイルシステム上のファイルをパス名で読み込むには、ファイルシステムアクセス API を使用してください。サーバー側のファイルを読み込むには、標準的な Ajax ソリューションを使用し、ドメインをまたがって読み込む場合は CORS 許可を取得してください。

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

EventTarget

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

`FileReader()`

新しく作成された `FileReader` を返します。

詳細や例についてはウェブアプリケーションからのファイルの使用を参照してください。

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

`FileReader.error` 読取専用

ファイルの読み込み中に発生したエラーを表す `DOMException` です。

`FileReader.readyState` 読取専用

`FileReader` の状態を示す数値。以下のいずれかになります。

| 名前 | 値 | 説明 |
| --- | --- | --- |
| `EMPTY` | `0` | まだデータは読み込まれていません。 |
| `LOADING` | `1` | データは現在読み込み中です。 |
| `DONE` | `2` | 読み込みリクエストがすべて終了しました。 |

`FileReader.result` 読取専用

ファイルの内容。このプロパティは読み込み操作が完了した後にのみ有効であり、データの形式は、どのメソッドが読み込み操作を開始するのに使用されたかに依存します。

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

`FileReader.abort()`

読み込み処理を中断します。結果として `readyState` は `DONE` に変わります。

`FileReader.readAsArrayBuffer()`

指定された `Blob` の内容の読み込みを開始し、終了すると、`result` 属性にファイルのデータを表す `ArrayBuffer` が格納されます。

`FileReader.readAsBinaryString()`

指定された `Blob` の内容の読み込みを開始し、終了すると、`result` 属性にはファイルからの生のバイナリーデータが文字列として格納されます。

`FileReader.readAsDataURL()`

指定された `Blob` の内容の読み込みを開始し、終了すると、`result` 属性にはファイルのデータを表す `data:` の URL が格納されます。

`FileReader.readAsText()`

指定された `Blob` の内容の読み込みを開始し、終了すると `result` 属性にファイルの内容がテキスト文字列として格納されます。オプションでエンコーディング名を指定することができます。

イベント
----

これらのイベントを待ち受けるには、 `addEventListener()` を使用するか、このインターフェイスの `onイベント名` プロパティにイベントリスナーを代入するかしてください。 `FileReader` が使用されなくなったら、メモリーリークを防ぐために `removeEventListener()` でイベントリスナーを取り外してください。

`abort`

プログラムが `FileReader.abort()` を呼び出したなどの原因で、読み取り操作が中断されたときに発生します。

`error`

エラーのために読み取りが失敗したときに発生します。

`load`

読み取りが正常に完了したときに発生します。

`loadend`

正常かどうかにかかわらず、読み取りが完了したときに発生します。

`loadstart`

読み取りが開始されたときに発生します。

`progress`

データの読み取り時に定期的に発生します。

仕様書
---

| Specification |
| --- |
| File API # APIASynch |

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

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

関連情報
----

* ウェブアプリケーションからのファイルの使用
* `File`
* `Blob`
* `FileReaderSync`


AudioListener - Web API

AudioListener
=============

`AudioListener` インターフェースは、特定の人物が聞いている音場の位置と方向を表し、それが音声空間処理 (en-US)に使用されます。すべての `PannerNode` は、 `BaseAudioContext.listener` 属性に格納されている `AudioListener` に関連して空間化されます。

注意点としては、リスナーは 1 つのコンテキストにつき 1 つしかなく、 `AudioNode` ではないことです。

![AudioListener の位置、上方向、前方向のベクトルを、上方向と前方向のベクトルが互いに90°になるように表示したものです。](/ja/docs/Web/API/AudioListener/webaudiolistenerreduced.png)

プロパティ
-----

**メモ:** position、forward、up の値の設定と取得は異なる構文で行われます。取得は例えば `AudioListener.positionX` にアクセスすることで行われ、同じプロパティを設定するには `AudioListener.positionX.value` を使用することで行われます。仕様書の IDL でこれらの値は読み取り専用とマークされていないのはこのためです。

`AudioListener.positionX` (en-US)

右直交座標系におけるリスナーの水平位置を表します。既定値は 0 です。

`AudioListener.positionY` (en-US)

右直交座標系におけるリスナーの垂直位置を表します。既定値は 0 です。

`AudioListener.positionZ` (en-US)

右直交座標系におけるリスナーの縦方向（前後）の位置を表します。既定値は 0 です。

`AudioListener.forwardX` (en-US)

位置（`positionX`, `positionY`, `positionZ`）の値と同じ直交座標系におけるリスナーの前方向の水平位置を表します。 順方向と上方向の値は互いに線形的に独立しています。既定値は 0 です。

`AudioListener.forwardY` (en-US)

位置（`positionX`, `positionY`, `positionZ`）の値と同じ直交座標系におけるリスナーの前方方向の垂直位置を表します。 順方向と上方向の値は互いに線形的に独立しています。既定値は 0 です。

`AudioListener.forwardZ` (en-US)

位置（`positionX`, `positionY`, `positionZ`）の値と同じ直交座標系でのリスナーの前方向の前後（前後）の位置を表します。 順方向と上方向の値は互いに線形的に独立しています。既定値は -1 です。

`AudioListener.upX` (en-US)

位置（`positionX`, `positionY`, `positionZ`）と同じ直交座標系でのリスナーの前方向の前後（前後）の位置を表します。 順方向と上方向の値は互いに線形的に独立しています。既定値は -1 です。

`AudioListener.upY` (en-US)

位置（`positionX`, `positionY`, `positionZ`）の値と同じ直交座標系における、リスナーの頭のてっぺんの垂直位置を表します。 順方向と上方向の値は互いに線形的に独立しています。 デフォルトは1です。

`AudioListener.upZ` (en-US)

位置（`positionX`, `positionY`, `positionZ`）の値と同じ直交座標系における、リスナーの頭の上端の縦方向（前後）の位置を表します。 順方向と上方向の値は互いに線形的に独立しています。既定値は 0 です。

メソッド
----

`AudioListener.setOrientation()` (en-US)
非推奨

リスナーの向きを設定します。

`AudioListener.setPosition()` (en-US)
非推奨

リスナーの位置を設定します。

**メモ:** これらのメソッドは非推奨ですが、現在、 Firefox、Internet Explorer、Safari で方向と位置を設定するための唯一の方法となっています。

非推奨の機能
------

`AudioListener.dopplerFactor`
非推奨

double 値で、ドップラー効果をレンダリングするときに使用するピッチシフトの量を表します。

`AudioListener.speedOfSound`
非推奨

double 値で、音の速度をメートル毎秒で表します。

この仕様の以前のバージョンでは、 `dopplerFactor` および `speedOfSound` プロパティと `setPosition()` メソッドを使用して、ダウンストリームに接続された `AudioBufferSourceNode` に適用されるドップラー効果を制御できました — これらは `PannerNode` と `AudioListener` の相対速度に応じて上下にピッチが変わります。 これらの機能には多くの問題がありました。

* `AudioBufferSourceNode` のみがピッチを上下させることができ、他のソースノードはできませんでした。
* `AudioBufferSourceNode` が複数の `PannerNode` に接続されている場合に採用する動作が不明確でした。
* パンナーとリスナーのベロシティは `AudioParam` ではなかったため、ピッチの変更はスムーズに適用できず、オーディオグリッチが発生しました。

これらの問題のため、これらのプロパティとメソッドは削除されました。

`setOrientation()` および `setPosition()` メソッドは、それらのプロパティ値を同等に設定することで置き換えられました。 例えば、 `setPosition(x, y, z)` は、それぞれ `positionX.value`, `positionY.value` および `positionZ.value` を設定することによって実現できます。

例
-

サンプルコードは `BaseAudioContext.createPanner()` を参照してください。

仕様書
---

| Specification |
| --- |
| Web Audio API # AudioListener |

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

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

関連情報
----

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


TrackEvent - Web API

TrackEvent
==========

**`TrackEvent`** インターフェイスは HTML DOM 仕様の一部であり、 HTML のメディア要素で使用可能なトラックのセットに対する変更を表すイベントに使用されます。 これらのイベントは `addtrack` と `removetrack` です。

`TrackEvent` を `RTCTrackEvent` (en-US) インターフェイスと混同しないでください。そちらは `RTCPeerConnection` の一部であるトラックに使用されます。

`TrackEvent` に基づくイベントは、常に次のメディアトラックリストの種類のいずれかに送信されます。

* 映像トラックに関連するイベントは、常に `HTMLMediaElement.videoTracks` にある `VideoTrackList` に送信されます。
* 音声トラックに関連するイベントは、常に `HTMLMediaElement.audioTracks` で指定された `AudioTrackList` に送信されます。
* テキストトラックに影響を与えるイベントは、`HTMLMediaElement.textTracks` によって示される `TextTrackList` (en-US) オブジェクトに送信されます。

Event

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

`TrackEvent()`

指定されたイベント種別とオプションの追加プロパティで、新しい `TrackEvent` オブジェクトを作成して初期化します。

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

*`TrackEvent` は `Event` に基づいているため、`Event` のプロパティは `TrackEvent` オブジェクトでも利用できます。*

`track` 読取専用

イベントが参照している DOM のトラックオブジェクト。 `null` でない場合、これは常にメディアトラックの種類のうちの 1 つのオブジェクト（`AudioTrack`、`VideoTrack`、 `TextTrack`）です。

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

*`TrackEvent` には独自のメソッドはありません。 しかし、それは `Event` に基づいているので、`Event` オブジェクトで利用可能なメソッドを提供します。*

例
-

この例では、 `handleTrackEvent()` 関数を設定します。 この関数は、文書内で見つかった最初の `<video>` 要素の `addtrack` イベントまたは `removetrack` イベントに対して呼び出されます。

```js
const videoElem = document.querySelector("video");

videoElem.videoTracks.addEventListener("addtrack", handleTrackEvent, false);
videoElem.videoTracks.addEventListener("removetrack", handleTrackEvent, false);
videoElem.audioTracks.addEventListener("addtrack", handleTrackEvent, false);
videoElem.audioTracks.addEventListener("removetrack", handleTrackEvent, false);
videoElem.textTracks.addEventListener("addtrack", handleTrackEvent, false);
videoElem.textTracks.addEventListener("removetrack", handleTrackEvent, false);

function handleTrackEvent(event) {
  let trackKind;

  if (event.target instanceof VideoTrackList) {
    trackKind = "映像";
  } else if (event.target instanceof AudioTrackList) {
    trackKind = "音声";
  } else if (event.target instanceof TextTrackList) {
    trackKind = "テキスト";
  } else {
    trackKind = "不明な";
  }

  switch (event.type) {
    case "addtrack":
      console.log(trackKind + "トラックが追加されました。");
      break;
    case "removetrack":
      console.log(trackKind + "トラックが取り除かれました。");
      break;
  }
}
```

イベントハンドラーは、 JavaScript の `instanceof` 演算子を使用してイベントが発生したトラックの種類を判断し、それがどの種類のトラックであるか、および要素に追加されているのか、要素から取り除かれているのかを示すメッセージをコンソールに出力します。

仕様書
---

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

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

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


MediaSession - Web API

MediaSession
============

**`MediaSession`** はメディアセッション API のインターフェイスで、ウェブページで標準のメディア再生操作に対する専用の動作を提供します。 これにより、ウェブページは標準的なメディア再生の対話操作に対して独自の動作を提供し、ユーザーエージェントが端末や OS に送信して標準的なユーザーインターフェイス要素で表示することができるメタデータを報告することができます。

例えば、スマートフォンのロック画面には、メディア再生や情報表示のための制御を行う標準パネルがあります。端末上のブラウザーは `MediaSession` を使用して、その標準/グローバルユーザーインタフェースからブラウザーの再生を制御できるようにすることができます。

プロパティ
-----

`metadata`

プラットフォームのユーザーインターフェイスに表示するためのリッチメタデータを含む `MediaMetadata` のインスタンスを返します。

`playbackState`

現在のメディアセッションが再生中であるかどうかを示します。有効な値は `none`, `paused`, `playing`です。

メソッド
----

`setActionHandler()`

再生や一時停止などのメディアセッションの操作のためのイベントハンドラーを設定します。

`setPositionState()`

現在表示しているメディアの再生位置と再生速度を設定します。

例
-

### 音楽プレーヤーのアクションハンドラーを設定

以下の例では、新しいメディアセッションを作成し、それにアクションハンドラーを割り当てます。

```js
if ("mediaSession" in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: "Unforgettable",
    artist: "Nat King Cole",
    album: "The Ultimate Collection (Remastered)",
    artwork: [
      {
        src: "https://dummyimage.com/96x96",
        sizes: "96x96",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/128x128",
        sizes: "128x128",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/192x192",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/256x256",
        sizes: "256x256",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/384x384",
        sizes: "384x384",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/512x512",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  });

  navigator.mediaSession.setActionHandler("play", () => {
    /\* Code excerpted. \*/
  });
  navigator.mediaSession.setActionHandler("pause", () => {
    /\* Code excerpted. \*/
  });
  navigator.mediaSession.setActionHandler("stop", () => {
    /\* Code excerpted. \*/
  });
  navigator.mediaSession.setActionHandler("seekbackward", () => {
    /\* Code excerpted. \*/
  });
  navigator.mediaSession.setActionHandler("seekforward", () => {
    /\* Code excerpted. \*/
  });
  navigator.mediaSession.setActionHandler("seekto", () => {
    /\* Code excerpted. \*/
  });
  navigator.mediaSession.setActionHandler("previoustrack", () => {
    /\* Code excerpted. \*/
  });
  navigator.mediaSession.setActionHandler("nexttrack", () => {
    /\* Code excerpted. \*/
  });
  navigator.mediaSession.setActionHandler("skipad", () => {
    /\* Code excerpted. \*/
  });
  navigator.mediaSession.setActionHandler("togglecamera", () => {
    /\* Code excerpted. \*/
  });
  navigator.mediaSession.setActionHandler("togglemicrophone", () => {
    /\* Code excerpted. \*/
  });
  navigator.mediaSession.setActionHandler("hangup", () => {
    /\* Code excerpted. \*/
  });
}
```

次の例では、再生と一時停止のための 2 つの関数を設定し、関連するアクションハンドラーのコールバックとして使用しています。

```js
const actionHandlers = [
  // play
  [
    "play",
    async () => {
      // play our audio
      await audioEl.play();
      // set playback state
      navigator.mediaSession.playbackState = "playing";
      // update our status element
      updateStatus(allMeta[index], "Action: play | Track is playing…");
    },
  ],
  [
    "pause",
    () => {
      // pause out audio
      audioEl.pause();
      // set playback state
      navigator.mediaSession.playbackState = "paused";
      // update our status element
      updateStatus(allMeta[index], "Action: pause | Track has been paused…");
    },
  ],
];

for (const [action, handler] of actionHandlers) {
  try {
    navigator.mediaSession.setActionHandler(action, handler);
  } catch (error) {
    console.log(`The media session action "${action}" is not supported yet.`);
  }
}
```

### アクションハンドラーを使用して、スライドプレゼンテーションを制御

アクションハンドラー `"previousslide"` と `"nextslide"` を使用すると、例えば、ユーザーがプレゼンテーションを Picture-in-Picture ウィンドウに入れ、ブラウザーの提供するスライド移動用のコントロールを押すことで、スライドプレゼンテーションを前に進めたり後ろに戻したりすることを扱うことができます。

```js
try {
  navigator.mediaSession.setActionHandler("previousslide", () => {
    log('> User clicked "Previous Slide" icon.');
    if (slideNumber > 1) slideNumber--;
    updateSlide();
  });
} catch (error) {
  log('Warning! The "previousslide" media session action is not supported.');
}

try {
  navigator.mediaSession.setActionHandler("nextslide", () => {
    log('> User clicked "Next Slide" icon.');
    slideNumber++;
    updateSlide();
  });
} catch (error) {
  log('Warning! The "nextslide" media session action is not supported.');
}
```

動作する例としては、Presenting Slides / Media Session Sampleを参照してください。

仕様書
---

| Specification |
| --- |
| Media Session # the-mediasession-interface |

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

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


AudioBuffer - Web API

AudioBuffer
===========

**`AudioBuffer`** インターフェイスはメモリー上の短い音声を表すもので、 `AudioContext.decodeAudioData()` メソッドで音声ファイルから生成されたり、 `AudioContext.createBuffer()` を使って生のデータから生成されたりします。 AudioBuffer に入れた後、その音声は `AudioBufferSourceNode` に渡せば再生できます。

これらのオブジェクトは短い、一般的には 45 秒未満の、断片的な音声を保持するために設計されています。それよりも長い音声は、 `MediaElementAudioSourceNode` のオブジェクトが適しています。バッファーには、ノンインターリーブ IEEE754 32bit リニア PCM で、 `-1` から `+1` の範囲に正規化された形式で格納されます。つまり、 32 ビット浮動小数点バッファーで、それぞれのサンプルは -1.0 から 1.0 の間です。 AudioBuffer に複数のチャンネルがある場合は、それぞれ分かれたバッファーに格納されます。

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

`AudioBuffer()`

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

プロパティ
-----

`AudioBuffer.sampleRate` 読取専用

バッファーに格納された PCM データの 1 秒あたりのサンプル数であるサンプリングレートを表す float を返します。

`AudioBuffer.length` 読取専用

バッファーに格納された PCM データの秒数で長さを表す整数を返します。

`AudioBuffer.duration` 読取専用

バッファーに格納された PCM データの時間を秒単位で表す double 値を返します。

`AudioBuffer.numberOfChannels` 読取専用

バッファーに格納された PCM データによって記述されるディスクリート音声チャンネルの数を表す整数を返します。

メソッド
----

`AudioBuffer.getChannelData()`

引数 `channel` で定義されたチャンネルに関連付けられた PCM データを含む `Float32Array` を返します（`0` は最初のチャンネルを表します）。

`AudioBuffer.copyFromChannel()`

`AudioBuffer` の指定されたチャンネルから、サンプルを配列 `destination` にコピーします。

`AudioBuffer.copyToChannel()`

音声バッファー `AudioBuffer` の指定されたチャンネルに、配列 `source` からサンプルをコピーします。

例
-

次の簡単な例では、 `AudioBuffer` の生成し、バッファーにランダムなホワイトノイズを書き込む方法を示しています。 webaudio-examples リポジトリーには完全なソースコードと、ライブ実行版があります。

```js
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// AudioContextのサンプルレートで 3 秒間の空のステレオバッファーを生成する
var myArrayBuffer = audioCtx.createBuffer(
  2,
  audioCtx.sampleRate \* 3,
  audioCtx.sampleRate,
);

// バッファにホワイトノイズを書き込む
// -1.0 から 1.0 の間の乱数の値で埋めるだけ
for (var channel = 0; channel < myArrayBuffer.numberOfChannels; channel++) {
  // 実際のデータの配列を得る
  var nowBuffering = myArrayBuffer.getChannelData(channel);
  for (var i = 0; i < myArrayBuffer.length; i++) {
    // Math.random() は [0; 1.0] である
    // 音声は [-1.0; 1.0] である必要がある
    nowBuffering[i] = Math.random() \* 2 - 1;
  }
}

// AudioBufferSourceNode を得る
// これは AudioBuffer を再生するときに使う AudioNode である
var source = audioCtx.createBufferSource();

// AudioBufferSourceNode にバッファーを設定する
source.buffer = myArrayBuffer;

// AudioBufferSourceNode を出力先に接続すると音声が聞こえるようになる
source.connect(audioCtx.destination);

// 音源の再生を始める
source.start();
```

仕様書
---

| Specification |
| --- |
| Web Audio API # AudioBuffer |

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

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

関連情報
----

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


PerformanceElementTiming - Web API

PerformanceElementTiming
========================

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

**`PerformanceElementTiming`** インターフェイスは、開発者が `elementtiming` 属性で記述した画像やテキストのノード要素の描画タイミング情報を保持します。

解説
--

要素タイミング API の目的は、ウェブ開発者や分析ツールにページ上の重要な要素のレンダリングタイムスタンプを測定する機能を提供することです。

API は以下の要素のタイミング情報に対応しています。

* `<img>` 要素
* `<image>` 要素（`<svg>` 内）
* ポスター画像（`<video>` 要素）
* `background-image` がある要素
* テキストノードのグループ、 `<p>` など

作者は要素に `elementtiming` 属性を追加することで、監視のためのフラグを立てます。

`PerformanceElementTiming` は `PerformanceEntry` を継承しています。

PerformanceEntry

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

このインターフェイスは、以下のイベントタイミングパフォーマンス項目型である `PerformanceEntry` プロパティを以下のように修飾して拡張しています。

`PerformanceEntry.duration` 読取専用
Experimental

常に `0` を返します。 `duration` はこのインターフェイスでは利用できません。

`PerformanceEntry.entryType` 読取専用
Experimental

常に `"element"` を返します。

`PerformanceEntry.name` 読取専用
Experimental

画像には `"image-paint"` を返し、テキストには `"text-paint"` を返します。

`PerformanceEntry.startTime` 読取専用
Experimental

この項目の `renderTime` の値が `0` でない場合はその値を返し、そうでない場合はこの項目の `loadTime` の値を返します。

このインターフェイスは以下のプロパティにも対応しています。

`PerformanceElementTiming.element` 読取専用
Experimental

情報を返す要素を表す `Element` です。

`PerformanceElementTiming.id` 読取専用
Experimental

要素の `id` である文字列です。

`PerformanceElementTiming.identifier` 読取専用
Experimental

要素の `elementtiming` 属性の値である文字列です。

`PerformanceElementTiming.intersectionRect` 読取専用
Experimental

ビューポート内の要素の矩形である `DOMRectReadOnly` です。

`PerformanceElementTiming.loadTime` 読取専用
Experimental

要素の読み込み時間を持つ `DOMHighResTimeStamp` です。

`PerformanceElementTiming.naturalHeight` 読取専用
Experimental

符号なし 32 ビット整数 (unsigned long) で、これが画像に適用されているときは画像の内在的な高さを表し、テキストのときは 0 です。

`PerformanceElementTiming.naturalWidth` 読取専用
Experimental

符号なし 32 ビット整数 (unsigned long) で、これが画像に適用されているときは画像の内在的な幅を表し、テキストのときは 0 です。

`PerformanceElementTiming.renderTime` 読取専用
Experimental

要素の描画時間を持つ `DOMHighResTimeStamp` です。

`PerformanceElementTiming.url` 読取専用
Experimental

画像の場合はリソースをリクエストする初期 URL となる文字列です。テキストの場合は 0 です。

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

`PerformanceElementTiming.toJSON()`
Experimental

`PerformanceElementTiming` オブジェクトを JSON で返します。

例
-

### 固有の要素のレンダリング時間の監視

この例では、 `elementtiming` 属性を追加することで、 2 つの要素を監視しています。 `PerformanceObserver` は `"element"` 型のパフォーマンス項目をすべて取得するために登録され、 `buffered` フラグを使用してオブザーバー作成前のデータにアクセスしています。

```html
<img src="image.jpg" elementtiming="big-image" />
<p elementtiming="text" id="text-id">text here</p>
```

```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry);
  });
});
observer.observe({ type: "element", buffered: true });
```

2 つの項目がコンソールに出力されます。最初の項目は画像の詳細を格納し、 2 つ目はテキストノードの詳細を格納します。

仕様書
---

| Specification |
| --- |
| Element Timing API # sec-performance-element-timing |

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

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

関連情報
----

* `elementtiming` HTML 属性


StylePropertyMap - Web API

StylePropertyMap
================

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

**`StylePropertyMap`** は CSS 型付きオブジェクトモデル API のインターフェイスで、`CSSStyleDeclaration` に代わる CSS 宣言ブロックの表現を提供するものです。

StylePropertyMapReadOnly

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

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

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

*親である `StylePropertyMapReadOnly` からメソッドを継承しています。*

`StylePropertyMap.append()`
Experimental

指定されたプロパティと値を持つ新しい CSS 宣言を `StylePropertyMap` に追加します。

`StylePropertyMap.clear()`
Experimental

`StylePropertyMap` 内のすべての宣言を削除します。

`StylePropertyMap.delete()`
Experimental

指定されたプロパティを持つ CSS 宣言を削除します。

`StylePropertyMap.set()`
Experimental

指定されたプロパティを持つ CSS 宣言を変更します。

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # the-stylepropertymap |

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

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


ゲームパッド API - Web API

ゲームパッド API
==========

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

**ゲームパッド API** (Gamepad API) は、開発者に単純で一貫した方法で、ゲームパッドや異なるゲームのコントローラーにアクセスし、信号に応答する方法を提供します。これには、ゲームパッドの接続や切断、ゲームパッドに関するその他の情報へのアクセス、現在押されているボタンやその他のコントロールなど、3 つのインターフェイス、2 つのイベントと 1 つの特別な機能が含まれています。

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

`Gamepad`

コンピューターに接続しているゲームパッドやコントローラーを表します。

`GamepadButton`

接続されているコントローラーのいずれかのボタンを表します。

`GamepadEvent`

ゲームパッドに関連するイベントを表すイベントオブジェクトです。

### ゲームパッドの実験的な拡張機能

`GamepadHapticActuator`

ユーザーに触覚フィードバックを提供するように設計されたコントローラー内のハードウェア（使用可能な場合）、多くの場合はバイブレーションハードウェアを表します。

`GamepadPose` (en-US)

WebVR コントローラーの場合のコントローラーの姿勢 (3D 空間内の位置と向きなど) を表します。これはより新しい WebXR 標準では使用*されません。*

上記の情報にアクセスできる機能については、Gamepad インターフェイスの拡張機能を参照してください。

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

#### Navigator

`Navigator.getGamepads()`

接続されたゲームパッドごとに一つの `Gamepad` オブジェクトの配列を返す `Navigator` オブジェクトの拡張です。

#### Window のイベント

`gamepadconnected`

ゲームパッドが接続したときに発生するイベントです。

`gamepaddisconnected`

ゲームパッドが切断されたときに発生するイベントです。

チュートリアルとガイド
-----------

* ゲームパッド API の利用
* Gamepad ゲームパッドを利用したコントロールの実装
仕様書
---

| Specification |
| --- |
| Gamepad # gamepad-interface |
| Gamepad Extensions # partial-gamepad-interface |

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

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

関連情報
----

* Ted Mielczarek と Robert Nyman による The Gamepad API の紹介
* Simple API demo page (ソース)


メディアセッション API - Web API

メディアセッション API
=============

メディアセッション API は、メディア通知をカスタマイズする方法を提供します。これは、ウェブアプリケーションが再生しているメディアについて、ユーザーエージェントが表示するためのメタデータを提供することで実現します。

また、ブラウザーがプラットフォームメディアキー（キーボード、ヘッドセット、リモコンにあるハードウェアキー、通知領域やモバイル端末のロック画面にあるソフトウェアキーなど）にアクセスするために使用できるアクションハンドラーも提供します。そのため、ウェブページを見ていないときでも、機器を介してウェブで指定されたメディアをシームレスに制御することができます。

その狙いは、ユーザーが、メディアを起動した固有のページを開かなくても、再生されているものを知り、制御することができるようにすることです。メディアセッション API に対応するために、ブラウザーはまず OS レベルのメディア制御 (Firefox の MediaControl など) にアクセスし制御するためのメカニズムを必要とします。

メディアセッションの概念と用途
---------------

`MediaMetadata` インターフェイスにより、ウェブサイトは再生中のメディアに対して豊富なメタデータをプラットフォーム UI に提供することができます。このメタデータには、タイトル、アーティスト（クリエイター）名、アルバム（コレクション）、アートワークが含まれます。プラットフォームは、このメタデータをメディアセンター、通知、端末のロック画面などに表示することができます。

`MediaSession` インターフェイスにより、ユーザーはユーザーエージェントを定義したインターフェイス要素を通して、メディアの再生を制御することができます。これらの要素を操作すると、ウェブページのアクションハンドラーが起動し、メディアを再生することができます。複数のページが同時にこの API を使用する可能性があるため、ユーザーエージェントは正しいページのアクションハンドラーを呼び出す責任があります。ユーザーエージェントは、ページで定義した動作が利用できない場合、既定の動作を提供します。

メディアセッション API へのアクセス
--------------------

メディアセッション API の主要なインターフェイスは `MediaSession` インターフェイスです。自分自身で `MediaSession` インスタンスを作成するのではなく、 `navigator.mediaSession` プロパティを使用して API にアクセスします。例えば、メディアセッションの現在の状態を `playing` に設定するには、次のようにします。

```js
navigator.mediaSession.playbackState = "playing";
```

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

`MediaMetadata`

ウェブページがプラットフォーム UI に表示するためのリッチメディアメタデータを提供することを可能にします。

`MediaSession`

ウェブページがメディア再生の標準的なやりとりに独自の動作を提供できるようにします。

辞書
--

`MediaImage` (en-US)

`MediaImage` オブジェクトは、メディアに関連する画像を記述する情報を格納します。これはCDやDVDのカバー、映画のポスター、ポスターフレームなどかもしれません。

例
-

### 音楽プレーヤーのアクションハンドラーを設定

次の例は、メディアセッション API の機能検出を示しています。そして、セッションのメタデータオブジェクトをインスタンス化し、ユーザー制御操作のアクションハンドラーを追加しています。

```js
if ("mediaSession" in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: "Unforgettable",
    artist: "Nat King Cole",
    album: "The Ultimate Collection (Remastered)",
    artwork: [
      {
        src: "https://dummyimage.com/96x96",
        sizes: "96x96",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/128x128",
        sizes: "128x128",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/192x192",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/256x256",
        sizes: "256x256",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/384x384",
        sizes: "384x384",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/512x512",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  });

  navigator.mediaSession.setActionHandler("play", () => {
    /\* Code excerpted. \*/
  });
  navigator.mediaSession.setActionHandler("pause", () => {
    /\* Code excerpted. \*/
  });
  navigator.mediaSession.setActionHandler("stop", () => {
    /\* Code excerpted. \*/
  });
  navigator.mediaSession.setActionHandler("seekbackward", () => {
    /\* Code excerpted. \*/
  });
  navigator.mediaSession.setActionHandler("seekforward", () => {
    /\* Code excerpted. \*/
  });
  navigator.mediaSession.setActionHandler("seekto", () => {
    /\* Code excerpted. \*/
  });
  navigator.mediaSession.setActionHandler("previoustrack", () => {
    /\* Code excerpted. \*/
  });
  navigator.mediaSession.setActionHandler("nexttrack", () => {
    /\* Code excerpted. \*/
  });
  navigator.mediaSession.setActionHandler("skipad", () => {
    /\* Code excerpted. \*/
  });
}
```

ユーザーエージェントによっては、モバイル端末でのメディア要素の自動再生を無効にしており、メディアを開始するにはユーザーの操作が必要な場合があります。以下の例では、ページ上の再生ボタンに `pointerup` イベントを追加し、メディアセッションのコードを起動させるために使用しています。

```js
playButton.addEventListener("pointerup", (event) => {
  const audio = document.querySelector("audio");

  // User interacted with the page. Let's play audio!
  audio
    .play()
    .then(() => {
      /\* Set up media session controls, as shown above. \*/
    })
    .catch((error) => {
      console.error(error);
    });
});
```

### アクションハンドラーを用いたスライドプレゼンテーションの制御

アクションハンドラー `"previousslide"` と `"nextslide"` は、例えば、ユーザーがプレゼンテーションを Picture-in-Picture ウィンドウに入れ、ブラウザーの提供するスライド移動用のコントロールを押して、スライドプレゼンテーションを前に進めたり後ろに戻したりすることを扱うのに使用できます。

```js
try {
  navigator.mediaSession.setActionHandler("previousslide", () => {
    log('> User clicked "Previous Slide" icon.');
    if (slideNumber > 1) slideNumber--;
    updateSlide();
  });
} catch (error) {
  log('Warning! The "previousslide" media session action is not supported.');
}

try {
  navigator.mediaSession.setActionHandler("nextslide", () => {
    log('> User clicked "Next Slide" icon.');
    slideNumber++;
    updateSlide();
  });
} catch (error) {
  log('Warning! The "nextslide" media session action is not supported.');
}
```

動作例は Presenting Slides / Media Session Sample を参照してください。

仕様書
---

| Specification |
| --- |
| Media Session # the-mediasession-interface |

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

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


AudioDestinationNode - Web API

AudioDestinationNode
====================

`AudioDestinationNode`インターフェースは、指定のコンテキストの音声の最後の目的地 - 通常はあなたのデバイスのスピーカーを表します。`OfflineAudioContext`と共に使えば、オーディオデータを「録音」するノードにもできます。

`AudioDestinationNode`には出力はなく(出力が**あれば**、これ以上 AudioNode に音声を結びつけることができません)、入力が 1 つあります。入力チャンネルの数は、0 から`maxChannelCount`変数の間である必要があり、そうでなければ例外が発生します。

指定の`AudioContext`の`AudioDestinationNode`は`AudioContext.destination`プロパティで取得できます。

|  |  |
| --- | --- |
| Number of inputs | `1` |
| Number of outputs | `0` |
| Channel count mode | `"explicit"` |
| Channel count | `2` |
| Channel interpretation | `"speakers"` |

プロパティ
-----

*親の`AudioNode`のプロパティを継承しています。*

`AudioDestinationNode.maxChannelCount`

`unsigned long`で表された物理的なデバイスが扱えるチャンネルの最大数

メソッド
----

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

例
-

`AudioDestinationNode`の設定には複雑なことはありません - デフォルトでユーザのシステム(例:スピーカー)を表しています。よって、数行のコードを書くだけで内部の音声を接続することができます:

```js
var audioCtx = new AudioContext();
var source = audioCtx.createMediaElementSource(myMediaElement);
source.connect(gainNode);
gainNode.connect(audioCtx.destination);
```

完全な実装は、MDN Web Audio のVoice-change-o-maticやViolent Thereminのようなサンプルを参考にしてください。

仕様
--

| Specification |
| --- |
| Web Audio API # AudioDestinationNode |

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

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

参考
--

* Using the Web Audio API


RTCSessionDescription - Web API

RTCSessionDescription
=====================

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

**`RTCSessionDescription`** インターフェイスは、接続 (または接続する予定のもの) の一端と、その構成方法を記述します。それぞれの **`RTCSessionDescription`** は、どのオファー/アンサー交渉プロセスを使用するかを表す記述の `type` (en-US) と、セッションの SDP (en-US) 記述子から成ります。

The process of negotiating a connection between two peers involves exchanging `RTCSessionDescription` objects back and forth, with each description suggesting one combination of connection configuration options that the sender of the description supports. Once the two peers agree upon a configuration for the connection, negotiation is complete.

プロパティ
-----

*`RTCSessionDescription` が継承するプロパティは存在しません。*

`RTCSessionDescription.type` (en-US) 読取専用

これは `RTCSdpType` の列挙型であり、ディスクリプションの種類を表します。

`RTCSessionDescription.sdp` (en-US) 読取専用

これは、セッションを説明するための SDP (en-US) 形式の `DOMString` です。

定数
--

### RTCSdpType

This enum defines strings that describe the current state of the session description, as used in the `type` (en-US) property. The session description's type will be specified using one of these values.

| 値 | 説明 |
| --- | --- |
| `answer` | The SDP contained in the `sdp` (en-US) property is the definitive choice in the exchange. In other words, this session description describes the agreed-upon configuration, and is being sent to finalize negotiation. |
| `offer` | The session description object describes the initial proposal in an offer/answer exchange. The session negotiation process begins with an offer being sent from the caller to the callee. |
| `pranswer` | The session description object describes a provisional answer; that is, it's a response to a previous offer or provisional answer. |
| `rollback` | This special type with an empty session description is used to roll back to the previous stable state. |

メソッド
----

*`RTCSessionDescription` が継承するメソッドは存在しません。*

`RTCSessionDescription()` (en-US)
非推奨

新しい `RTCSessionDescription` を返します。この引数は `RTCSessionDescriptionInit` ディクショナリであり (任意の) 2 つの引数を含みます。これらの引数の 1 つまたは全て与えられなかった場合、関連するプロパティは null に設定されます。

`RTCSessionDescription.toJSON()` (en-US)

このオブジェクトの JSON による表現を生成して返します。生成された JSON は、`type` (en-US) と `sdp` (en-US)を含みます。

例
-

```js
signalingChannel.onmessage = function (evt) {
  if (!pc) start(false);

  var message = JSON.parse(evt.data);
  if (message.sdp)
    pc.setRemoteDescription(
      new RTCSessionDescription(message),
      function () {
        // オファーを受け取った場合、このオファーに対して応答する。
        if (pc.remoteDescription.type == "offer")
          pc.createAnswer(localDescCreated, logError);
      },
      logError,
    );
  else
    pc.addIceCandidate(
      new RTCIceCandidate(message.candidate),
      function () {},
      logError,
    );
};
```

仕様策定状況
------

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # rtcsessiondescription-class |

ブラウザーの対応
--------

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

関連情報
----

* WebRTC (en-US)
* `RTCPeerConnection.setLocalDescription()` (en-US) 及び `RTCPeerConnection.setRemoteDescription()` (en-US)


WebHID API - Web API

WebHID API
==========

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

ヒューマンインターフェイスデバイス (HID) はデバイスの一種で、人間から入力を受け取ったり、人間に出力を提示したりするものです。また、インストールの手続きを単純にするために設計された、ホストとデバイスの間の双方向のコミュニケーションのための標準である HID プロトコルのことも指します。HID プロトコルはもともと USB デバイス用に開発されましたが、その後 Bluetooth などの他の多くのプロトコルの上に実装されました。

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

`HID`

HID デバイスへの接続およびアタッチした HID デバイスのリストアップを行うメソッドと、HID デバイスの接続を扱うイベントハンドラーを提供します。

`HIDDevice`

HID デバイスを表します。1 個の物理デバイスが複数の `HIDDevice` オブジェクトで表されることもあります。

`HIDInputReportEvent`

割り当てられた HID デバイスのいずれかから Input レポートを受信した時、`HIDDevice.inputreport_event` に渡されます。

`HIDConnectionEvent`

デバイスが接続されたり切断されたりした時、`HID.onconnect` や `HID.ondisconnect` に渡されます。

例
-

`requestDevice()` メソッドを用いてデバイスに接続できます。この場合、利用可能な全てのデバイスの中から選択することになります。

```js
const device = await navigator.hid.requestDevice({ filters: [] });
// デバイスを選択するためのリストと「接続」「キャンセル」のボタンがある「... が HID デバイスへの接続を要求しています」というタイトルのポップアップが現れます。
// 1個選択し、「接続」ボタンをクリックしてください。すると、選択されたデバイスが入った配列が device に格納されます。
```

これまでにこのウェブサイトによるアクセスが許可された全てのデバイスを取得し、デバイス名をコンソールに出力できます。

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

任意の HID デバイスの切断に反応するイベントリスナーを登録できます。

```js
navigator.hid.addEventListener("disconnect", (event) => {
  console.log(`HID disconnected: ${event.device.productName}`);
  console.dir(event);
});
// 例えば、キーボードが切断される時、コンソールに以下のログが記録されるでしょう。
// HID disconnected: USB Keyboard
// {
// bubbles: false
// cancelBubble: false
// cancelable: false
// composed: false
// currentTarget: HID {onconnect: null, ondisconnect: null}
// defaultPrevented: false
// device: HIDDevice {oninputreport: null, opened: false, vendorId: 6700, productId: 11555, productName: "USB Keyboard", …}
// eventPhase: 0
// isTrusted: true
// path: []
// returnValue: true
// srcElement: HID {onconnect: null, ondisconnect: null}
// target: HID {onconnect: null, ondisconnect: null}
// timeStamp: 18176.600000023842
// type: "disconnect"
// }

// 上記のイベントは HIDConnectionEvent インターフェイスのインスタンスです。
```

仕様書
---

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

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

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


IntersectionObserverEntry - Web API

IntersectionObserverEntry
=========================

**`IntersectionObserverEntry`** は交差オブザーバー API のインターフェイスで、遷移の特定の瞬間における対象要素とそのルートコンテナー間の交差状態を表します。

`IntersectionObserverEntry` のインスタンスは、 `IntersectionObserver` のコールバックに `entries` 引数で渡されます。それ以外でこれらのオブジェクト取得することができるのは、 `IntersectionObserver.takeRecords()` を呼び出した場合のみです。

プロパティ
-----

`IntersectionObserverEntry.boundingClientRect` 読取専用

対象要素の外接矩形を `DOMRectReadOnly` として返します。境界は `Element.getBoundingClientRect()` の記事で説明されているのと同様に計算されます。

`IntersectionObserverEntry.intersectionRatio` 読取専用

`intersectionRect` と `boundingClientRect` の比率を返します。

`IntersectionObserverEntry.intersectionRect` 読取専用

対象の表示領域の矩形を表す `DOMRectReadOnly` を返します。

`IntersectionObserverEntry.isIntersecting` 読取専用

論理値で、対象要素が、この交差オブザーバーのルートに対象要素が交差したときは `true` になります。この値が `true` の場合、 `IntersectionObserverEntry` は交差状態への変わり目にあることを示します。 `false` の場合、交差状態から交差なしへの変わり目であることがわかります。

`IntersectionObserverEntry.rootBounds` 読取専用

この交差オブザーバーのルートの矩形である `DOMRectReadOnly` を返します。

`IntersectionObserverEntry.target` 読取専用

ルートとの交差状態が変化した `Element` です。

`IntersectionObserverEntry.time` 読取専用

`DOMHighResTimeStamp` で、この `IntersectionObserver` の時刻の起点を基準にして、交差が記録された時刻を示します。

メソッド
----

*このインタフェースにはメソッドがありません。*

仕様書
---

| Specification |
| --- |
| Intersection Observer # intersection-observer-entry |

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

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


GeolocationPosition - Web API

GeolocationPosition
===================

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

**`GeolocationPosition`** インターフェイスは対象のデバイスのある時間における現在位置を表します。`GeolocationCoordinates` オブジェクトで表される位置情報には、地球を表す楕円体上における平面座標のほかに、高度や速度といった情報も含まれます。

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

*`GeolocationPosition` インターフェイスが継承するプロパティはありません。*

`GeolocationPosition.coords` 読取専用  安全なコンテキスト用

現在位置を示す `GeolocationCoordinates` オブジェクトを返します。

`GeolocationPosition.timestamp` 読取専用  安全なコンテキスト用

位置情報が取得された時刻を表すタイムスタンプを、ミリ秒単位の Unix 時刻で返します。

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

*`GeolocationPosition` インターフェイスが実装・継承するメソッドはありません。*

仕様書
---

| Specification |
| --- |
| Geolocation API # position\_interface |

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

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

関連情報
----

* 位置情報 API の使用
* `Geolocation`


PluginArray - Web API

PluginArray
===========

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

`PluginArray` インターフェースには使用可能なプラグインのリストが格納されています。 `window.navigator.plugins` プロパティによって返されます。

プロパティ
-----

| プロパティ名 | 説明 | 戻り値の型 | 可用性 |
| --- | --- | --- | --- |
| `PluginArray.length` | プラグインリスト配列中のプラグイン数。**読取専用**。 | unsigned long | DOM 0 |

メソッド
----

`PluginArray.item`

プラグインリスト配列中の指定したインデックスにある `Plugin` を返す

`PluginArray.namedItem`

プラグインリスト配列中の指定した名称の `Plugin` を返す

`PluginArray.refresh`

現在のページの全てのプラグインを更新。必要に応じて文書を再読み込みします。


リサイズオブザーバー API - Web API

リサイズオブザーバー API
==============

リサイズオブザーバー API は要素のサイズ変化を監視し、変化するたびにオブザーバーに報告できる、実行可能な方法を提供します。

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

要素のサイズの変化を検出する方法 (やそのほかの手法) はたくさんありますが、これまでの実装はハック的で脆弱なことがよくありました。

例えば、 メディアクエリー / `window.matchMedia` はビューポートのサイズの変化を検出したときに特定の箇所に対してレイアウト更新を行う場合に最適ですが、これが特定の要素のサイズの変更を検出したい場合はどうすればよいでしょうか？

この問題を解決するために、サイズの変化を検出させたい要素を示唆する適切なイベント ( Window: resize イベント など) で監視し、 `Element.getBoundingClientRect` や `Window.getComputedStyle` などを使用して要素の新しいサイズやその他の特徴を探し出す方法が考えられます。

そのような方法では、限られたユースケースでしか機能せず、パフォーマンス面でも悪影響があり (上記のメソッドを連続的に呼び出すと大きなパフォーマンス低下につながる) 、ブラウザーのウインドウサイズが変わらないと機能しないことが多い傾向があります。

Resize Observer API では、このような問題に対する解決策を提供する他、要素の内容やボーダーボックスのサイズの変化までも簡単に監視し、実行できるようにします。これはウェブプラットフォームでしばしば議論されている 要素クエリー の欠如に対する解決策として提供します。

使い方は簡単で、パフォーマンスオブザーバーや交差オブザーバーなど、他のオブザーバーとほとんど同じです。新しい `ResizeObserver` オブジェクトを `ResizeObserver()` コンストラクターで作成できます。 `ResizeObserver.observe()` で特定の要素のサイズの変更を検出するようにします。コールバック関数はコンストラクターの中で設定し、要素のサイズが変わるたびに毎回実行され、変化後のサイズを通して自由に実行できるようになります。

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

`ResizeObserver`

新しいオブザーバーを登録し、要素の監視を開始あるいは停止する機能を提供します。

`ResizeObserverEntry`

サイズが変化された単一の要素を記述し、要素とその新しいサイズを識別します。

例
-

GitHub リポジトリーでは、いくつか簡単な実装例があります。

* resize-observer-border-radius.html (ソース): ビューポートサイズに応じてパーセント割合のサイズで表示する、緑色のボックスの簡単な実装例。ビューポートサイズが変化すると、ボックスの角丸もボックスのサイズに応じて変化します。これを `border-radius` を使用してパーセント割合で実装することもできますが、見苦しいような楕円形の角丸ができてしまいます。上記の解決策では、ボックスのサイズに応じてサイズが変わるきれいな角丸を表示できます。
* resize-observer-text.html (ソース): ここでは、スライダーで調整すると内部の `div` 要素のサイズが変化し、リサイズオブザーバーを通してヘッダーと文章の `font-size` を変更します。これはビューポートとは関係なくても、要素のサイズ変更を検出して実行できることを示しています。

通常、コードは次のようなパターンに従います (resize-observer-border-radius.html からの引用)。

```js
const resizeObserver = new ResizeObserver((entries) => {
  const calcBorderRadius = (size1, size2) =>
    `${Math.min(100, size1 / 10 + size2 / 10)}px`;

  for (const entry of entries) {
    if (entry.borderBoxSize) {
      entry.target.style.borderRadius = calcBorderRadius(
        entry.borderBoxSize[0].inlineSize,
        entry.borderBoxSize[0].blockSize,
      );
    } else {
      entry.target.style.borderRadius = calcBorderRadius(
        entry.contentRect.width,
        entry.contentRect.height,
      );
    }
  }
});

resizeObserver.observe(document.querySelector("div"));
```

仕様書
---

| Specification |
| --- |
| Resize Observer # resize-observer-interface |

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

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

関連情報
----

* ResizeObserver: It's Like document.onresize for Elements


HTMLDetailsElement - Web API

HTMLDetailsElement
==================

**`HTMLDetailsElement`** インターフェイスは、（継承によって利用できる通常の `HTMLElement` インターフェイスのもの以外の）`<details>` を操作するための特殊なプロパティを提供します。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLDetailsElement.open`

HTML の `open` 属性を反映する論理値で、要素の内容（`<summary>` を除く）がユーザーに表示されているかどうかを示します。

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

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

イベント
----

このイベントは `addEventListener()` を使用するか、このインターフェイスの `onイベント名` プロパティにイベントリスナーを代入することで待ち受けします。

`toggle`

`<details>` 要素の `open`/`closed` 状態がトグル切り替えされたときに発生します。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmldetailselement |

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

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

関連情報
----

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


AnalyserNode - Web API

AnalyserNode
============

**`AnalyserNode`** インターフェイスはリアルタイム時間領域/周波数領域分析情報を表現します。 `AudioNode` は、入力から出力の流れにおいて音声ストリームそのものは変えず、データ加工や音声の可視化をすることができます。

1 つの `AnalyserNode` は必ず 1 つの入力と出力を持ちます。出力先がなくてもこのノードは問題ありません。

![音声ストリームを変更することなく、ノードは FFT を使用して、それに関連する周波数と時刻のデータを取得することができます。](/ja/docs/Web/API/AnalyserNode/fttaudiodata_en.svg)

EventTarget

AudioNode

AnalyserNode

|  |  |
| --- | --- |
| 入力の数 | `1` |
| 出力の数 | `1` （ただし未接続のままになる） |
| チャンネル数モード | `"max"` |
| チャンネル数 | `2` |
| チャンネルの解釈 | `"speakers"` |

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

`AnalyserNode()`

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

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

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

`AnalyserNode.fftSize`

符号なし long 型の値で、 FFT（高速フーリエ変換）において周波数領域を決定するために使われているサイズを表します。

`AnalyserNode.frequencyBinCount` 読取専用

符号なし long 型の値で、 FFT のサイズの半分の値。一般的に音声再生時の可視化に用いられます。

`AnalyserNode.minDecibels`

double 型の値で、 unsigned byte 型の値へ変換する FFT 分析データのスケーリング時の最小のパワー値を表します。一般的に、この値は、 `getByteFrequencyData()` の使用時の結果の範囲の最小値を指定します。

`AnalyserNode.maxDecibels`

double 型の値で、 unsigned byte 型の値へ変換する FFT 分析データのスケーリング時の最大のパワー値を表します。一般的に、この値は、 `getByteFrequencyData()` の使用時の結果の範囲の最大値を指定します。

`AnalyserNode.smoothingTimeConstant`

double 型の値で、分析フレームの平均間隔を表します。基本的に、時間的にスペクトルを平滑化させるのに用いられます。

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

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

`AnalyserNode.getFloatFrequencyData()`

現在の周波数データを、引数として渡された `Float32Array` 配列へコピーします。

`AnalyserNode.getByteFrequencyData()`

現在の周波数データを、引数として渡された `Uint8Array` 配列（unsigned byte 配列）へコピーします。

`AnalyserNode.getFloatTimeDomainData()`

現在の波形または時間領域データを、渡された `Float32Array` 配列へコピーします。

`AnalyserNode.getByteTimeDomainData()`

現在の波形または時間領域データを、引数として渡された `Uint8Array` 配列（unsigned byte 配列）へコピーします。

例
-

**メモ:** 音声の視覚化を作成するための詳細は、ウェブオーディオ API の視覚化のガイドを参照してください。

### 基本的な使い方

 次の例では、 `AudioContext` で `AnalyserNode` を作成し、 `requestAnimationFrame` と `<canvas>` で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。
 より完全な応用例/情報については、 Voice-change-O-matic のデモを調べてください（関連するコードは app.js の 108-193 行目を参照）。

```js
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// …

const analyser = audioCtx.createAnalyser();
analyser.fftSize = 2048;

const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);

// Connect the source to be analysed
source.connect(analyser);

// Get a canvas defined with ID "oscilloscope"
const canvas = document.getElementById("oscilloscope");
const canvasCtx = canvas.getContext("2d");

// draw an oscilloscope of the current audio source

function draw() {
  requestAnimationFrame(draw);

  analyser.getByteTimeDomainData(dataArray);

  canvasCtx.fillStyle = "rgb(200, 200, 200)";
  canvasCtx.fillRect(0, 0, canvas.width, canvas.height);

  canvasCtx.lineWidth = 2;
  canvasCtx.strokeStyle = "rgb(0, 0, 0)";

  canvasCtx.beginPath();

  const sliceWidth = (canvas.width \* 1.0) / bufferLength;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    const v = dataArray[i] / 128.0;
    const y = (v \* canvas.height) / 2;

    if (i === 0) {
      canvasCtx.moveTo(x, y);
    } else {
      canvasCtx.lineTo(x, y);
    }

    x += sliceWidth;
  }

  canvasCtx.lineTo(canvas.width, canvas.height / 2);
  canvasCtx.stroke();
}

draw();
```

仕様書
---

| Specification |
| --- |
| Web Audio API # AnalyserNode |

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

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

関連情報
----

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


メディアキャプチャとストリーム API (メディアストリーム) - Web API

メディアキャプチャとストリーム API (メディアストリーム)
===============================

**メディアキャプチャとストリーム** API (Media Capture and Streams API) は、一般的に **メディアストリーム API** (Media Stream API または MediaStream API) と呼ばれ、音声や映像のデータのストリーミングへの対応を提供する WebRTC に関連した API です。

これは、ストリームとその構成トラックを操作するためのインターフェイスとメソッド、データ形式に関連する制約、データを非同期に使用する際の成功とエラーのコールバック、および処理中に発行されるイベントを提供するものです。

基本概念
----

この API は、音声または映像に関連づけられたデータの流れを表現するための `MediaStream` オブジェクトの操作を基本としています。例としてメディアストリームの取得をご覧ください。

`MediaStream` は 0 個以上の `MediaStreamTrack` によって構成されます。これは様々な音声や映像の**トラック**を表現します。それぞれの `MediaStreamTrack` は、1 つ以上の**チャンネル**を持ちます。このチャンネルはメディアストリームの最小の単位を表現します。例えば、ステレオの音声トラックの*左*と*右*のチャンネルのそれぞれのように、与えられたスピーカーに関連づけられた音声信号です。

`MediaStream` オブジェクトは、1 つの**入力**と 1 つの**出力**を持ちます。 `MediaStream` オブジェクトは、ローカルで呼び出される `getUserMedia()` によって生成され、ユーザーのカメラやマイクの 1 つを入力ソースとして持ちます。ローカルでない `MediaStream` は、 `<video>` や `<audio>` などのメディア要素や、WebRTC `RTCPeerConnection` API によって取得できるネットワーク越しに生成されたストリーム、ウェブオーディオ API の `MediaStreamAudioDestinationNode` によって作成されたストリームとして表現されます。

`MediaStream` オブジェクトの出力は**コンシューマー** (consumer) に接続されます。出力として `<audio>` や `<video>` などのメディア要素、 WebRTC `RTCPeerConnection` API、ウェブオーディオ API (en-US) の `MediaStreamAudioSourceNode`が使用できます。

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

これらのリファレンス記事では、メディアキャプチャとストリーム API を構成する各インターフェイスについて知っておく必要がある基本的な情報を見つけられます。

* `CanvasCaptureMediaStreamTrack` (en-US)
* `InputDeviceInfo` (en-US)
* `MediaDeviceKind`
* `MediaDeviceInfo`
* `MediaDevices`
* `MediaStream`
* `MediaStreamEvent` (en-US)
* `MediaStreamTrack`
* `MediaStreamTrackEvent` (en-US)
* `MediaTrackCapabilities`
* `MediaTrackConstraints` (en-US)
* `MediaTrackSettings` (en-US)
* `MediaTrackSupportedConstraints`
* `NavigatorUserMedia`
* `NavigatorUserMediaError`
* `OverconstrainedError` (en-US)
* `URL`
イベント
----

* `addtrack`
* `ended`
* `mute`
* `overconstrained`
* `removetrack`
* `unmute`
ガイドとチュートリアル
-----------

能力と制約と設定の記事では、**制約**と**能力**、メディア設定の概念について説明しています。また、制約エクササイザ―を記載しており、コンピューターの A/V 入力機器（ウェブカメラやマイクなど）からの音声と映像のトラックに対して異なる制約集合を適用した結果を試してみることができます。

getUserMedia() による写真の撮影 の記事では、`getUserMedia()` を使用して、 `getUserMedia()` に対応しているコンピューターや携帯電話のカメラにアクセスし、それで写真を撮る方法を示しています。

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

### api.MediaStream

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

### api.MediaStreamTrack

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

### api.MediaDevices

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

### api.MediaDeviceInfo

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

### api.InputDeviceInfo

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

### api.CanvasCaptureMediaStreamTrack

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

関連情報
----

* WebRTC - API の入門ページ
* `mediaDevices.getUserMedia()`
* WebRTC による写真の撮影: `getUserMedia()` を用いたデモとチュートリアル


TransformStream - Web API

TransformStream
===============

**`TransformStream`** はストリーム API のインターフェイスで、変換ストリームの概念であるパイプチェーンの具体的な実装を表します。

 これは、データのストリームをある形式から別の形式に変換するために `ReadableStream.pipeThrough()` メソッドに渡すことができます。
 例えば、動画フレームをデコード（またはエンコード）したり、データを解凍したり、ストリームを XML から JSON に変換したりするために使用します。

 変換アルゴリズムは、オブジェクトのコンストラクターのオプション引数として指定されます。
 提供されない場合、ストリームを通してパイプ処理されたデータは変更されません。

`TransformStream` は移譲可能オブジェクトです。

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

`TransformStream()`

指定されたハンドラーから変換ストリームを作成して返却します。オプションで、変換オブジェクトとストリームのキューイング戦略を指定します。

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

`TransformStream.readable` 読取専用

`TransformStream` の `readable` 側の端点です。

`TransformStream.writable` 読取専用

`TransformStream` の `writable` 側の端点です。

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

なし

例
-

### 何かを uint8array に変換するストリーム

以下の例では、変換ストリームは受信したすべてのチャンクを `Uint8Array` の値に渡します。

```js
const transformContent = {
  start() {}, // required.
  async transform(chunk, controller) {
    chunk = await chunk;
    switch (typeof chunk) {
      case "object":
        // just say the stream is done I guess
        if (chunk === null) {
          controller.terminate();
        } else if (ArrayBuffer.isView(chunk)) {
          controller.enqueue(
            new Uint8Array(chunk.buffer, chunk.byteOffset, chunk.byteLength),
          );
        } else if (
          Array.isArray(chunk) &&
          chunk.every((value) => typeof value === "number")
        ) {
          controller.enqueue(new Uint8Array(chunk));
        } else if (
          typeof chunk.valueOf === "function" &&
          chunk.valueOf() !== chunk
        ) {
          this.transform(chunk.valueOf(), controller); // hack
        } else if ("toJSON" in chunk) {
          this.transform(JSON.stringify(chunk), controller);
        }
        break;
      case "symbol":
        controller.error("Cannot send a symbol as a chunk part");
        break;
      case "undefined":
        controller.error("Cannot send undefined as a chunk part");
        break;
      default:
        controller.enqueue(this.textencoder.encode(String(chunk)));
        break;
    }
  },
  flush() {
    /\* do any destructor work here \*/
  },
};

class AnyToU8Stream extends TransformStream {
  constructor() {
    super({ ...transformContent, textencoder: new TextEncoder() });
  }
}
```

### TextEncoderStream および TextDecoderStream の代替

なお、これはネイティブのコンストラクターを使っているため非推奨です。これは対応していないプラットフォームで代替とすることを意図しています。

```js
const tes = {
  start() {
    this.encoder = new TextEncoder();
  },
  transform(chunk, controller) {
    controller.enqueue(this.encoder.encode(chunk));
  },
};

let _jstes_wm = new WeakMap(); /\* info holder \*/
class JSTextEncoderStream extends TransformStream {
  constructor() {
    let t = { ...tes };

    super(t);
    _jstes_wm.set(this, t);
  }
  get encoding() {
    return _jstes_wm.get(this).encoder.encoding;
  }
}
```

同様に、 `TextDecoderStream` は次のように書くことができます。

```js
const tds = {
  start() {
    this.decoder = new TextDecoder(this.encoding, this.options);
  },
  transform(chunk, controller) {
    controller.enqueue(this.decoder.decode(chunk, { stream: true }));
  },
};

let _jstds_wm = new WeakMap(); /\* info holder \*/
class JSTextDecoderStream extends TransformStream {
  constructor(encoding = "utf-8", { ...options } = {}) {
    let t = { ...tds, encoding, options };

    super(t);
    _jstds_wm.set(this, t);
  }
  get encoding() {
    return _jstds_wm.get(this).decoder.encoding;
  }
  get fatal() {
    return _jstds_wm.get(this).decoder.fatal;
  }
  get ignoreBOM() {
    return _jstds_wm.get(this).decoder.ignoreBOM;
  }
}
```

### 複数の ReadableStreams を互いに結合

これは、複数のストリームを結合できる便利なものです。例ではプログレッシブ読み込みやプログレッシブストリーミングを持つ PWA の構築が含まれます。

```js
let responses = [
  /\* conjoined response tree \*/
];
let { readable, writable } = new TransformStream();

responses.reduce(
  (a, res, i, arr) =>
    a.then(() => res.pipeTo(writable, { preventClose: i + 1 !== arr.length })),
  Promise.resolve(),
);
```

これは他への影響に対して耐性がないことに注意してください。

仕様書
---

| Specification |
| --- |
| Streams Standard # ts-class |

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

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

関連情報
----

* WHATWG Stream Visualizer: 読み取り、書き込み、変換ストリームの基本的な視覚化
* Streams—The Definitive Guide


OrientationSensor - Web API

OrientationSensor
=================

Sensor APIs の **`OrientationSensor`** インターフェイスは、向きセンサーのベースクラスです。このインターフェイスを直接使用することはできません。かわりに、このインターフェイスは継承するインターフェイスからアクセスされるプロパティとメソッドを提供します。

この機能はサーバーで設定された Permissions Policy でブロックされる可能性があります。

EventTarget

Sensor

OrientationSensorOrientationSensor をベースとするインターフェイス
---------------------------------

以下は、`OrientationSensor` インターフェイスをベースとするインターフェイスの一覧です。

* `AbsoluteOrientationSensor`
* `RelativeOrientationSensor`
インスタンスプロパティ
-----------

`OrientationSensor.quaternion`

各要素がデバイスの向きを表す単位四元数の成分である 4 要素の `Array` を返します。

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

`OrientationSensor.populateMatrix()`

指定のオブジェクトに、センサーの最新の測定値に基づく回転行列を入れます。

例
-

### 基本的な例

以下の例は、だいたい Intel の Orientation Phone demo をもとにしており、1 秒に 60 回の周期を設定して `AbsoluteOrientationSensor` のインスタンスを生成しています。測定ごとに、`OrientationSensor.quaternion` を用いて電話の視覚的なモデルを回転しています。

```js
const options = { frequency: 60, referenceFrame: "device" };
const sensor = new AbsoluteOrientationSensor(options);

sensor.addEventListener("reading", () => {
  // model は別の場所で生成した Three.js のオブジェクト
  model.quaternion.fromArray(sensor.quaternion).inverse();
});
sensor.addEventListener("error", (error) => {
  if (event.error.name === "NotReadableError") {
    console.log("センサーが利用できません。");
  }
});
sensor.start();
```

### 許可の例

向きセンサーを使用するには、複数のデバイスセンサーを使用する許可を要求する必要があります。`Permissions` インターフェイスは Promise を使用するので、許可を要求するのには `Promise.all` を使用するとよいです。

```js
const sensor = new AbsoluteOrientationSensor();
Promise.all([
  navigator.permissions.query({ name: "accelerometer" }),
  navigator.permissions.query({ name: "magnetometer" }),
  navigator.permissions.query({ name: "gyroscope" }),
]).then((results) => {
  if (results.every((result) => result.state === "granted")) {
    sensor.start();
    // …
  } else {
    console.log("AbsoluteOrientationSensor を使用する許可がありません。");
  }
});
```

仕様書
---

| Specification |
| --- |
| Orientation Sensor # orientationsensor-interface |

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

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


FileSystemDirectoryHandle - Web API

FileSystemDirectoryHandle
=========================

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

`File System Access API` の **`FileSystemDirectoryHandle`** インターフェイスは、ファイルシステムのディレクトリーへのハンドルを提供します。

このインターフェイスは、メソッド `window.showDirectoryPicker()`・`StorageManager.getDirectory()`・`DataTransferItem.getAsFileSystemHandle()`・`FileSystemDirectoryHandle.getDirectoryHandle()` からアクセス可能です。

FileSystemHandle

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

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

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

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

`FileSystemDirectoryHandle.entries()`

オブジェクト自身の列挙可能なプロパティの `[key, value]` ペアの新しい *非同期イテレーター* を返します。

`FileSystemDirectoryHandle.getFileHandle()`

メソッドが呼ばれたディレクトリー内の指定の名前のファイルを表す `FileSystemFileHandle` で解決する `Promise` を返します。

`FileSystemDirectoryHandle.getDirectoryHandle()`

メソッドが呼ばれたディレクトリー内の指定の名前のサブディレクトリーを表す `FileSystemDirectoryHandle` で解決される `Promise` を返します。

`FileSystemDirectoryHandle.keys()`

`FileSystemDirectoryHandle` 内の各アイテムのキーを含む新しい *非同期イテレーター* を返します。

`FileSystemDirectoryHandle.removeEntry()`

ディレクトリーハンドルに指定の名前のファイルまたはディレクトリーがある場合、非同期でエントリーを削除しようとします。

`FileSystemDirectoryHandle.resolve()`

親ハンドルから指定の子エントリーへのディレクトリー名の `Array` (最後の要素は指定した子エントリーの名前) で解決する `Promise` を返します。

`FileSystemDirectoryHandle.values()`

`FileSystemDirectoryHandle` 内の各インデックスに対応する値を含む新しい *非同期イテレーター* を返します。

`FileSystemDirectoryHandle[@@asyncIterator]()`

デフォルトでは `entries` 関数を返します。

例
-

以下の例では、指定の名前のディレクトリーハンドルを返します。指定したディレクトリーが存在しない場合は、作成されます。

```js
const dirName = "directoryToGetName";

// ディレクトリーハンドル 'currentDirHandle' があると仮定
const subDir = currentDirHandle.getDirectoryHandle(dirName, { create: true });
```

以下の非同期関数は、`resolve()` を用いて、選択されたファイルの指定のディレクトリーハンドルを基準とする相対パスを取得します。

```js
async function returnPathDirectories(directoryHandle) {
  // ファイルピッカーを開いてファイルハンドルを得る
  const handle = await self.showOpenFilePicker();
  if (!handle) {
    // ユーザーがキャンセルしたか、ファイルを開くのに失敗した
    return;
  }

  // ハンドルがディレクトリーハンドルが表すディレクトリー内にあるかを確認する
  const relativePaths = await directoryHandle.resolve(handle);

  if (relativePath === null) {
    // ディレクトリーハンドル内にない
  } else {
    // relativePath は相対パスを表す名前の配列

    for (const name of relativePaths) {
      // 各エントリーを記録する
      console.log(name);
    }
  }
}
```

以下の例では、ディレクトリーを再帰的に走査し、ディレクトリー内の各ファイルを表す `FileSystemFileHandle` オブジェクトを返します。

```js
async function\* getFilesRecursively(entry) {
  if (entry.kind === "file") {
    const file = await entry.getFile();
    if (file !== null) {
      file.relativePath = getRelativePath(entry);
      yield file;
    }
  } else if (entry.kind === "directory") {
    for await (const handle of entry.values()) {
      yield\* getFilesRecursively(handle);
    }
  }
}
for await (const fileHandle of getFilesRecursively(directoryHandle)) {
  console.log(fileHandle);
}
```

仕様書
---

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

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

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


ReadableStreamBYOBReader - Web API

ReadableStreamBYOBReader
========================

`ReadableStreamBYOBReader` はストリーム API のインターフェイスで、 `ReadableStream` 用のリーダーを定義します。このリーダーは、基盤となるバイトソースからのゼロコピー読み込みに対応しています。
 ファイルなど、データがバイト列の「無名」シーケンスとして配信される基盤から効率的にコピーするために使用します。

 このリーダー型のインスタンスは、通常、ストリーム上で `ReadableStream.getReader()` を呼び出して、オプション引数に `mode: "byob"` を指定します。
 読み取り可能なストリームは、基盤バイトソースを保有していなければなりません。言い換えれば、構築時に`type: "bytes"`を持つ基盤を指定されていなければなりません。

 この種のリーダーを使用すると、読み取り可能なストリームの内部キューが空のときに `read()` リクエストを行うと、基盤となっているソースから（ストリームの内部キューをバイパスして）ゼロコピーで移譲されます。
 内部キューが空でない場合、 `read()` はバッファーされたデータからリクエストを満たします。

 メソッドとプロパティは 既定のリーダー (`ReadableStreamDefaultReader`) のものと似ていることに注意してください。
 `read()` メソッドは、データを書き込むビューを提供するという点で異なります。

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

`ReadableStreamBYOBReader()`

`ReadableStreamBYOBReader` オブジェクトのインスタンスを作成して返します。

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

`ReadableStreamBYOBReader.closed` 読取専用

ストリーミングプロセスの終了に応答するコードを記述できます。ストリームが閉じられた場合、またはリーダーのロックが解除された場合に満たすプロミスを返します。ストリームがエラーの場合は拒否します。

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

`ReadableStreamBYOBReader.cancel()`

ストリームをキャンセルし、コンシューマーがストリームに興味を失ったことを通知します。 提供された `reason` 引数は、基になるソースに与えられ、使用する場合もしない場合もあります。

`ReadableStreamBYOBReader.read()`

ストリームの内部キュー内の次のチャンクへのアクセスを提供する promise を返します。

`ReadableStreamBYOBReader.releaseLock()`

ストリームのリーダーのロックを解除します。

例
-

以下の例は、読み取り可能なバイトストリームの使用から取ったものです。

 まず、ストリーム上で `ReadableStream.getReader()` を使用してリーダーを作成します。 options 引数に `mode: "byob"` を指定します。
 これは "Bring Your Own Buffer" リーダーなので、読み込むための `ArrayBuffer` も作成する必要があります。

```js
const reader = stream.getReader({ mode: "byob" });
let buffer = new ArrayBuffer(4000);
```

 リーダーを使用する関数を下記に示します。
 これは `read()` メソッドを再帰的に呼び出して、データをバッファーに読み込みます。
 このメソッドは `Uint8Array` 型付き配列を取り、これが これは、元の配列バッファーでまだ書き込まれていない部分のビューです。
 ビューの引数は、前回呼び出された際に受け取ったデータから計算され、元配列バッファーへのオフセットを定義します。

```js
readStream(reader);

function readStream(reader) {
  let bytesReceived = 0;
  let offset = 0;

  while (offset < buffer.byteLength) {
    // read() returns a promise that resolves when a value has been received
    reader
      .read(new Uint8Array(buffer, offset, buffer.byteLength - offset))
      .then(function processBytes({ done, value }) {
        // Result objects contain two properties:
        // done - true if the stream has already given all its data.
        // value - some data. Always undefined when done is true.

        if (done) {
          // There is no more data in the stream
          return;
        }

        buffer = value.buffer;
        offset += value.byteLength;
        bytesReceived += value.byteLength;

        // Read some more, and call this function again
        return reader
          .read(new Uint8Array(buffer, offset, buffer.byteLength - offset))
          .then(processBytes);
      });
  }
}
```

ストリームにデータがなくなると、`read()`メソッドはプロパティ `done` を `true` に設定したオブジェクトで解決し、関数を返します。

`ReadableStreamBYOBReader.closed` プロパティはプロミスを返し、ストリームが閉じられたり、エラーとされたり、リーダーロックが解放されたりすることを監視するために使用することができます。

```js
reader.closed
  .then(() => {
    // Resolved - code to handle stream closing
  })
  .catch(() => {
    // Rejected - code to handle error
  });
```

 ストリームを取り消すには `ReadableStreamBYOBReader.cancel()` を呼び出します。オプションで理由を指定します。
 これは、ストリームが取り消される可能性を解決するプロミスを返します。
 ストリームがキャンセルされると、コントローラは次に `cancel()` を基盤となるソース上で呼び出します。

読み取り可能なバイトストリームの使用の例では、次のようにボタンが押されたときに cancel メソッドを呼び出します。

```js
button.addEventListener("click", () => {
  reader.cancel("user choice").then(() => console.log("cancel complete"));
});
```

コンシューマーは `releaseLock()` を呼び出して、ストリーム上のリーダーの保持を解放することもできますが、これは読み込みが待機していない場合に限られます。

```js
reader.releaseLock();
```

仕様書
---

| Specification |
| --- |
| Streams Standard # byob-reader-class |

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

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

関連情報
----

* ストリーム API の概念
* 読み取り可能なストリームの使用
* `ReadableStream`
* WHATWG Stream Visualizer, for a basic visualization of readable, writable, and transform streams.
* Web-streams-polyfill or sd-streams - polyfills


HTMLFormControlsCollection - Web API

HTMLFormControlsCollection
==========================

**`HTMLFormControlsCollection`** インターフェイスは、HTML のフォームコントロール要素の集合を表すインターフェイスです。`HTMLFormElement` インターフェイスの `elements` プロパティから返されます。

`HTMLCollection` から継承されるプロパティとメソッドの他に、追加メソッドが一つ提供されます。

HTMLCollection

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

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

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

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

`HTMLFormControlsCollection.namedItem()`

集合内の `RadioNodeList` または `Element` の `name` または `id` が指定した名前と一致するノード、または一致するノードがない場合は `null` を返します。このバージョンの `namedItem()` は `HTMLCollection` から継承されたものを隠していることに注意してください。そのメソッドと同様、`collection["value"]` のように文字列で JavaScript の配列の括弧構文を使用すると、 `collection.namedItem("value")` と同等になります。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlformcontrolscollection |

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

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

関連情報
----

* `HTMLCollection`, `RadioNodeList`, `HTMLOptionsCollection`


NavigationPreloadManager - Web API

NavigationPreloadManager
========================

Service Worker API の **`NavigationPreloadManager`** インターフェイスは、サービスワーカーによるリソースのプリロード（事前読み込み）を管理するためのメソッドを提供します。

メソッド
----

`NavigationPreloadManager.enable()` (en-US)

ナビゲーションのプリロードを有効にし、解決する `Promise` を返します。

`NavigationPreloadManager.disable()` (en-US)

ナビゲーションのプリロードを無効にし、解決する `Promise` を返します。

`NavigationPreloadManager.setHeaderValue()` (en-US)

`Service-Worker-Navigation-Preload` ヘッダーの値を設定し、空の `Promise` を返します。

`NavigationPreloadManager.getState()` (en-US)

プリロードが有効かどうかと、`Service-Worker-Navigation-Preload` の内容を示すプロパティを持つオブジェクトに解決する `Promise` を返します。

例
-

#### ナビゲーションのプリロードの機能を検出して有効化

```js
addEventListener("activate", (event) => {
  event.waitUntil(
    (async function () {
      if (self.registration.navigationPreload) {
        // ナビゲーションのプリロードを有効にします！
        await self.registration.navigationPreload.enable();
      }
    })(),
  );
});
```

#### プリロードされたレスポンスの使用

次の例は、プリロードされたレスポンスを使用する fetch イベントの実装を示しています。

```js
addEventListener("fetch", (event) => {
  event.respondWith(
    (async function () {
      // 可能なら、キャッシュから応答します
      const cachedResponse = await caches.match(event.request);
      if (cachedResponse) return cachedResponse;

      // それがなく、プリロードされたレスポンスがあれば、それを使用します
      const response = await event.preloadResponse;
      if (response) return response;

      // それもなければ、ネットワークを試します。
      return fetch(event.request);
    })(),
  );
});
```

仕様
--

| Specification |
| --- |
| Service Workers # navigation-preload-manager |

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

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


WEBGL_color_buffer_float - Web API

WEBGL\_color\_buffer\_float
===========================

**`WEBGL_color_buffer_float`** 拡張は WebGL API の一部で、 32 ビット浮動小数点数の色バッファーにレンダリングする機能を追加します。

WebGL 拡張は `WebGLRenderingContext.getExtension()` (en-US) メソッドを使用することで利用することができます。詳細な情報については、WebGL チュートリアルの Using Extensions も参照してください。

**メモ:** この拡張機能は WebGL 1 コンテキストでのみ利用することができます。 WebGL 2 (en-US) では `EXT_color_buffer_float` (en-US) 拡張を使用してください。

`OES_texture_float` (en-US) 拡張は、暗黙にこの拡張を有効にします。

定数
--

`ext.RGBA32F_EXT`

RGBA 32 ビット浮動小数点数でカラーレンダリング可能な形式。

`ext.RGB32F_EXT` (
非推奨
)

RGB 32 ビット浮動小数点数で、カラーレンダリング可能な形式。

`ext.FRAMEBUFFER_ATTACHMENT_COMPONENT_TYPE_EXT`

?

`ext.UNSIGNED_NORMALIZED_EXT`

?

拡張されるメソッド
---------

この拡張機能は `WebGLRenderingContext.renderbufferStorage()` (en-US) を拡張します。

* `internalformat` 引数が `ext.RGBA32F_EXT` および `ext.RGB32F_EXT` (
非推奨
) を受け付けるようになります。
例
-

```js
const ext = gl.getExtension("WEBGL\_color\_buffer\_float");

gl.renderbufferStorage(gl.RENDERBUFFER, ext.RGBA32F\_EXT, 256, 256);
```

仕様書
---

| Specification |
| --- |
| WebGL WEBGL\_color\_buffer\_float Extension Specification  |

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

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

関連情報
----

* `WebGLRenderingContext.getExtension()` (en-US)
* `WebGLRenderingContext.renderbufferStorage()` (en-US)
* `OES_texture_float` (en-US)


Cache - Web API

Cache
=====

**`Cache`** インターフェイスは、 `Request` / `Response` オブジェクトのペアを保存するストレージの仕組みを提供します。`Cache` オブジェクトがどのくらい持続するかはブラウザーに依存しますが、単一のオリジンのスクリプトは通常、以前に生成された `Cache` オブジェクトの存在を頼りにすることができます。`Cache` インターフェイスは、ワーカーと同様にウィンドウスコープにも公開されていることに注意してください。サービスワーカーの仕様で定義されているとはいえ、サービスワーカーと共に使用する必要はありません。

ひとつのオリジンが、複数の名前付き `Cache` オブジェクトを保有することができます。スクリプト（例えば `ServiceWorker`） が `Cache` の更新をどのように処理するかを実装するのは作者の責任です。`Cache` 内のアイテムは、明示的に要求されない限り更新されませんし、削除されない限り有効期限はありません。 `CacheStorage.open()` を使用して特定の名前付き `Cache` オブジェクトを開き、それから任意の `Cache` のメソッドを呼び出して `Cache` を管理します。

また、定期的にキャッシュ項目を掃除する必要があります。各ブラウザーは、あるオリジンで使用できるキャッシュストレージの総量に厳しい制限を設けています。 `Cache` 容量の概算の使用量は `StorageManager.estimate()` API を用いて確認することができます。ブラウザーはディスク容量の管理に最善を尽くしますが、あるオリジンのキャッシュストレージを削除することがあります。ブラウザーはふつう、あるオリジンのデータをすべて削除するか、まったく削除しないかのいずれかです。名前を用いてキャッシュをバージョン管理し、安全に操作できるスクリプトのバージョンからのみキャッシュを使用するようにしてください。詳細は、古いキャッシュの削除を確認してください。

**メモ:** キーの照合アルゴリズムは、値の中にある VARY ヘッダーに依存しています。そのため、新しいキーを照合するには、キャッシュ内の項目のキーと値の両方を調べる必要があります。

**メモ:** キャッシュ API は HTTP のキャッシュヘッダーを尊重しません。

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

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

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

`Cache.match(request, options)`

`Cache` オブジェクト内で最初に一致したリクエストに関連するレスポンスで解決する `Promise` を返します。

`Cache.matchAll(request, options)`

`Cache` オブジェクト内で一致したすべてのレスポンスの配列で解決する `Promise` を返します。

`Cache.add(request)`

URL を受け取り、それを取得して、指定されたキャッシュに結果のレスポンスオブジェクトを追加します。機能的には `fetch()` を呼び出してから、 `put()` を使用してキャッシュに結果を追加するのと同等です。

`Cache.addAll(requests)`

URL の配列を受け取り、それらを取得して指定されたキャッシュに結果のレスポンスオブジェクトを追加します。

`Cache.put(request, response)`

リクエストとそのレスポンスの両方を受け取り、指定されたキャッシュへ追加します。

`Cache.delete(request, options)`

request をキーとした `Cache` 項目を探し、一致する `Cache` 項目が見つかった場合は削除して `true` で解決し、`Cache` 項目が見つからなかった場合は `false` で解決する `Promise` を返します。

`Cache.keys(request, options)`

`Cache` キーの配列で解決する `Promise` を返します。

例
-

このコードスニペットは、service worker selective caching sample からのものです（selective caching をライブで見る）。このコードでは `CacheStorage.open()` を使用して、 `font/` で始まる `Content-Type` ヘッダー用の `Cache` オブジェクトを開きます。

そしてこのコードは、 `Cache.match()` を使用してすでにキャッシュ内に一致するフォントがあるかどうかを確認し、もしあれば、それを返します。一致するフォントがなかった場合は、コードはネットワークからフォントを取得して、 `Cache.put()` を用いて取得したリソースをキャッシュします。

このコードは `fetch()` の操作で発生する例外を処理します。なお、 HTTP のエラーレスポンス（404 など）はこの例外を発生させません。適切なエラーコードを持つ通常のレスポンスオブジェクトを返します。

このコードスニペットでは、サービスワーカーで使用されるバージョン付きキャッシュのベストプラクティスも示しています。この例ではキャッシュが 1 つしかありませんが、キャッシュが複数でも同じアプローチが利用できます。これはキャッシュの一括指定識別子を、具体的なバージョン付けされたキャッシュ名に対応させます。このコードはまた、 `CURRENT_CACHES` で名前が指定されていないキャッシュをすべて削除します。

このコード例において、 `caches` は `ServiceWorkerGlobalScope` のプロパティです。これは `CacheStorage` オブジェクトを保持し、 `CacheStorage` インターフェイスでアクセスすることができます。

**メモ:** Chrome では、 `chrome://inspect/#service-workers` にアクセスして、登録されたサービスワーカーの下の "inspect" リンクをクリックすると、 `service-worker.js` スクリプトが行う様々なアクションのログ状態を見ることができます。

```js
const CACHE\_VERSION = 1;
const CURRENT\_CACHES = {
  font: `font-cache-v${CACHE\_VERSION}`,
};

self.addEventListener("activate", (event) => {
  // CURRENT\_CACHES で指定されていないすべてのキャッシュを削除します。
  // この例ではキャッシュは 1 つしかありませんが、同じロジックで
  // 複数のバージョン化されたキャッシュがある場合も処理できます。
  const expectedCacheNamesSet = new Set(Object.values(CURRENT\_CACHES));
  event.waitUntil(
    caches.keys().then((cacheNames) =>
      Promise.all(
        cacheNames.map((cacheName) => {
          if (!expectedCacheNamesSet.has(cacheName)) {
            // このキャッシュ名が「予期される」キャッシュ名のセットに
            // 存在しない場合は、削除します。
            console.log("期限切れのキャッシュを削除:", cacheName);
            return caches.delete(cacheName);
          }
        }),
      ),
    ),
  );
});

self.addEventListener("fetch", (event) => {
  console.log("Handling fetch event for", event.request.url);

  event.respondWith(
    caches.open(CURRENT\_CACHES.font).then((cache) => {
      return cache
        .match(event.request)
        .then((response) => {
          if (response) {
            // event.request の項目がキャッシュにある場合、レスポンスが定義され、
            // それを返すことができます。
            // この例では、フォントリソースのみがキャッシュされることに注意してください。
            console.log(" キャッシュ内にレスポンスあり:", response);

            return response;
          }

          // それ以外の場合、event.request の項目がキャッシュにない場合、
          // レスポンスは undefined となり、リソースを fetch() する必要があります。
          console.log(
            " キャッシュ内に %s のレスポンスが見つかりません。" +
              "ネットワークから取得します…",
            event.request.url,
          );

          // 後で cache.put() の呼び出しで使用する可能性があるため、
          // リクエストで .clone() を呼び出します。
          // fetch() と cache.put() の両方がリクエストを「消費」するため、
          // コピーを作成する必要があります。
          // （https://developer.mozilla.org/ja/docs/Web/API/Request/clone を参照）
          return fetch(event.request.clone()).then((response) => {
            console.log(
              " ネットワークからの %s のレスポンス: %O",
              event.request.url,
              response,
            );

            if (
              response.status < 400 &&
              response.headers.has("content-type") &&
              response.headers.get("content-type").match(/^font\//i)
            ) {
              // これにより、エラーであることがわかっているレスポンス（つまり、
              // HTTP ステータスコード 4xx または 5xx）のキャッシュが回避されます。
              // また、フォントに対応するレスポンス、すなわち "font/" で始まる
              // Content-Type レスポンスヘッダーを持つもののみをキャッシュする
              // ようにします。
              // なお、不透明なフィルターされたレスポンス
              // https://fetch.spec.whatwg.org/#concept-filtered-response-opaque
              // の場合はレスポンスヘッダーにアクセスできないので、このチェックは
              // 常に失敗し、フォントはキャッシュされません。
              // すべての Google Web Fonts は CORS をサポートするドメインから
              // 提供されるため、ここでは問題になりません。
              // ただし、CORS をサポートしていない他のオリジンのドメインから他の
              // リソースをキャッシュしようとしている場合は、注意が必要です。
              console.log(" レスポンスをキャッシュ: ", event.request.url);
              // レスポンスに対して .clone() を呼び出して、そのコピーを
              // キャッシュに保存します。そうすることで、制御されたページに戻る
              // 元のレスポンスオブジェクトを保持することができます。
              // https://developer.mozilla.org/ja/docs/Web/API/Request/clone
              cache.put(event.request, response.clone());
            } else {
              console.log(
                " レスポンスをキャッシュしない: ",
                event.request.url,
              );
            }

            // 元のレスポンスオブジェクトを返します。これは、リソース要求を満たすために使用されます。
            return response;
          });
        })
        .catch((error) => {
          // この catch() は、match() または fetch() 操作から発生する
          // 例外を処理します。
          // HTTP エラーレスポンス（404 など）は例外を起動しないことに
          // 注意してください。
          // 適切なエラーコードが設定された、通常のレスポンスオブジェクトを
          // 返します。
          console.error(" フェッチハンドラーのエラー:", error);

          throw error;
        });
    }),
  );
});
```

### クッキーとキャッシュオブジェクト

フェッチ API では `Set-Cookie` ヘッダーを、 `Response` オブジェクトを `fetch()` から返す前に削除することを要求しています。したがって、 `Response` は `Cache` へ格納されるとき `Set=Cookie` ヘッダーを含まず、クッキーを格納する操作も行われません。

仕様書
---

| Specification |
| --- |
| Service Workers # cache-interface |

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

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

関連情報
----

* サービスワーカーの使用
* サービスワーカーの基本的なコード例（英語）
* Is ServiceWorker ready?（英語）
* `Promise`
* ウェブワーカーの使用


PeriodicSyncManager - Web API

PeriodicSyncManager
===================

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

**`PeriodicSyncManager`** は`ウェブ定期バックグラウンド同期 API` のインターフェイスは、ネットワーク接続のある定期的な間隔で実行するタスクをサービスワーカーの中に登録する方法を提供します。これらのタスクは、定期バックグラウンド同期リクエストと呼ばれます。`PeriodicSyncManager` には `ServiceWorkerRegistration.periodicSync` を通してアクセスします。

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

なし。

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

`PeriodicSyncManager.register`
Experimental

指定したタグとオプションでブラウザーに定期同期リクエストを登録します。登録が完了した時点で解決する `Promise` を返します。

`PeriodicSyncManager.getTags`
Experimental

定期同期を行うために現在登録されているタグを表す文字列のリストで解決される `Promise` を返します。

`PeriodicSyncManager.unregister`
Experimental

指定されたタグに対応する定期同期のリクエストを登録解除し、登録解除が完了すると解決する `Promise` を返します。

例
-

次の例は、インターフェイスを使用する方法を示しています。

### 定期バックグラウンド同期のリクエスト

以下の非同期関数は、閲覧コンテキストから最小 1 日間隔で定期バックグラウンド同期を登録するものです。

```js
async function registerPeriodicNewsCheck() {
  const registration = await navigator.serviceWorker.ready;
  try {
    await registration.periodicSync.register("get-latest-news", {
      minInterval: 24 \* 60 \* 60 \* 1000,
    });
  } catch {
    console.log("Periodic Sync could not be registered!");
  }
}
```

### タグによる定期バックグラウンド同期の検証

このコードは、指定されたタグを持つ定期バックグラウンド同期タスクが登録されているかどうかを調べるものです。

```js
navigator.serviceWorker.ready.then((registration) => {
  registration.periodicSync.getTags().then((tags) => {
    if (tags.includes("get-latest-news")) skipDownloadingLatestNewsOnPageLoad();
  });
});
```

### 定期バックグラウンド同期タスクの削除

以下は、定期バックグラウンド同期タスクを削除して、バックグラウンドでの記事同期を停止するコードです。

```js
navigator.serviceWorker.ready.then((registration) => {
  registration.periodicSync.unregister("get-latest-news");
});
```

仕様書
---

| Specification |
| --- |
| Web Periodic Background Synchronization # periodicsyncmanager-interface |

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

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

関連情報
----

* Richer offline experiences with the Periodic Background Sync API
* A Periodic Background Sync demo app


HTMLInputElement - Web API

HTMLInputElement
================

**`HTMLInputElement`** インターフェイスは `<input>` 要素のオプション、レイアウト、表示方法を操作するための特別なプロパティやメソッドを提供します。

EventTarget

Node

Element

HTMLElement

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

一部のプロパティは、対応する属性を持つ入力要素の型にのみ適用されます。

`align`
非推奨

文字列: 要素の配置を**表します**。*代わりに CSS を使用してください。*

`autocapitalize`
Experimental

文字列: ユーザー入力の大文字化の動作を**定義**します。有効な値は `none`、`off`、`characters`、`words`、`sentences` の何れかです。

`defaultValue`

文字列: このオブジェクトが生成された際にもともと HTML で指定されていた既定値を**取得/設定**します。

`dirName`

文字列: この要素の書字方向を**取得/設定**します。

`inputmode`

この要素またはそのコンテンツを編集する際に使用する仮想キーボード設定の種類について、ブラウザーにヒントを提供します。

`labels` 読取専用

`NodeList` の配列: この要素のラベルである `<label>` のリストを**返します**。

`list` 読取専用

`HTMLElement`: `list` 属性が指す要素を**返します**。同じツリーに HTML 要素がない場合、プロパティは `null` になることがあります。

`multiple`

論理値: この要素の `multiple` 属性を**返却/設定**します。これは複数の値（例えば複数のファイル）を持つことが可能であるかどうかを示します。

`name`

文字列: この要素の `name` 属性を**返却/設定**します。ここにはフォーム送信時にその要素を識別する名前が入ります。

`popoverTargetAction`
Experimental

`<input>` 要素の `type="button"` 型で制御されるポップオーバー要素で実行されるアクション（`"hide"`、`"show"`、`"toggle"` の何れか）を取得および設定します。これは `popovertargetaction` という HTML 属性の値を反映します。

`popoverTargetElement`
Experimental

`<input>` 要素の `type="button"` 型で制御されるポップオーバー要素を取得および設定します。これは JavaScript で `popovertarget` という HTML 属性に相当するものです。

`step`

文字列: この要素の `step` 属性を**返却/設定**します。これは、 `min` や `max` と共に、数値や日時の値を設定する際の増分を制限します。文字列 `any` または正の浮動小数点数を設定することができます。 `any` が設定されていない場合、コントロールは最小値よりも大きい step 値の倍数のみを受け入れます。

`type`

文字列: この要素の `type` 属性を**返却/設定**します。これは表示するコントロールの型を示します。利用可能な値については `<input>` の `type` 属性を参照してください。

`useMap`
非推奨

文字列: クライアント側イメージマップを**表します**。

`value`

文字列: そのコントロールの現在の値を**返却/設定**します。ユーザーが予期しない値を入力した場合、これは空文字列を返すことがあります。

`valueAsDate`

`Date`: 要素の値を日付として解釈して**返却/設定**します。変換できない場合は `null` となります。

`valueAsNumber`

数値: この要素の値を、次のいずれかのうち一つとして解釈して**返します**。解釈は、時刻値、数値の順で行われ、変換できなければ `NaN` となります。

### 親フォームに関連するインスタンスプロパティ

`form` 読取専用

`HTMLFormElement`: 親の `<form>` 要素の参照を**返します**。

`formAction`

文字列: この要素の `formaction` 属性を**返却/設定**します。ここには要素によって送信された情報を処理するプログラムの URI が入ります。これは親フォームの `action` 属性を上書きします。

`formEnctype`

文字列: この要素の `formenctype` 属性を**返却/設定**します。ここにはフォームをサーバーに送信する際のコンテンツの型が入ります。これは親フォームの `enctype` 属性を上書きします。

`formMethod`

文字列: この要素の `formmethod` 属性を**返却/設定**します。ここにはブラウザーがフォームを送信する際に用いる HTTP メソッドが入ります。これは親フォームの `method` 属性を上書きします。

`formNoValidate`

論理値: この要素の `formnovalidate` 属性を**返却/設定**します。これは送信時にそのフォームが検証されないかどうかを示します。これは親フォームの `novalidate` 属性を上書きします。

`formTarget`

文字列: この要素の `formtarget` 属性を**返却/設定**します。ここにはフォームを送信した後で受け取ったレスポンスを表示する場所を示す名前またはキーワードが入ります。これは親フォームの `target` 属性を上書きします。

### hidden 以外の任意の型の入力要素に適用されるインスタンスプロパティ

`autofocus`

論理値: この要素の `autofocus` 属性を**返却/設定**します。ページが読み込まれたときに、ユーザーが別のコントロールに入力するなどしてそれを上書きしない限り、そのフォームコントロールが入力フォーカスを持つべきであることを指定します。文書内の 1 つの form 要素だけが `autofocus` 属性を持つことができます。

`disabled`

論理値: この要素の `disabled` 属性を**返却/設定**します。これはそのコントロールが対話を受け付けないかどうかを示します。その入力値はフォームとともに送信されません。 `readonly` もご覧ください。

`required`

論理値: この要素の `required` 属性を**返却/設定**します。これは、フォームを送信する前にユーザーが値を入力しなければならないかどうかを示します。

`validationMessage` 読取専用

文字列: そのコントロールが制約を満たさなかった場合、それを記述したローカライズされたメッセージを**返します**（もしあれば）。これは、コントロールが制約検証の候補ではない場合（`willValidate` が `false` の場合）、または制約を満たしている場合は空の文字列です。この値は、 `setCustomValidity()` メソッドで設定できます。

`validity` 読取専用

`ValidityState`: この要素の現在の検証状態を**返します**。

`willValidate` 読取専用

論理値: その要素が制約検証の候補であるかどうかを**返します**。これは何か制約検証を阻む条件がある場合、例えば、`type` が `hidden`、`reset`、`button` のいずれかである、祖先に `<datalist>` がある、`disabled` プロパティが `true` である、などです。

### checkbox または radio 型の要素にのみ適用されるプロパティ

`checked`

論理型: この要素の現在の状態を**返却/設定**します。

`defaultChecked`

論理型: このオブジェクトを生成した HTML でもともと指定されていたラジオボタンまたはチェックボックスの既定の状態を**返却/設定**します。

`indeterminate`

論理型: チェックボックスやラジオボタンの状態が不確定であるかどうかを**返します**。チェックボックスの場合は、その状態が不確定 (チェックでも未チェックでもない状態) であることを示すために、チェックボックスの外観が何らかの方法で不明瞭になったり、灰色になったりする効果があります。`checked` 属性の値には影響を与えず、チェックボックスをクリックするとその値は false になります。

### image 型の要素にのみ適用されるプロパティ

`alt`

文字列: この要素の代替テキストが設定された `alt` 属性を**返却/設定**します。

`height`

文字列: ボタンに表示される画像の高さを定義するこの要素の `height` 属性を**返却/設定**します。

`src`

文字列: グラフィックの送信ボタンを表示する画像の場所を示す URI を指定する、この要素の `src` 属性を**返却/設定**します。

`width`

文字列: ボタンに表示される画像の幅を定義する、文書の `width` 属性を**返却/設定**します。

### file 型の要素にのみ適用されるプロパティ

`accept`

文字列: サーバーが受け入れるファイル形式をカンマ区切りのリストで表すこの要素の `accept` 属性を**返却/設定**します。

`allowdirs`
Non-standard

論理型: 標準外の Directory Upload API の一部です。ファイルリストでディレクトリーとファイルの両方を選択できるようにするかどうかを示します。 Firefox でのみ実装されており、設定で隠されています。

`files`

`FileList`: アップロードするために選択されたファイルを表す `File` オブジェクトのリストを**返却/設定**します。

`webkitdirectory`

論理型: `webkitdirectory` 属性を**返します**。`true` の場合、ファイルシステム選択インターフェイスはファイルではなくディレクトリーのみが選択できるようになります。

`webkitEntries`

`FileSystemEntry` (en-US) の配列: 現在選択されているファイルまたはディレクトリーを**示します**。

### テキストや数値を含む表示される要素にのみ適用されるプロパティ

`autocomplete`

文字列: この要素の `autocomplete` 属性を**返却/設定**します。これはコントロールの値をブラウザーで自動的に補完できるかどうかを示します。

`max`

文字列: この要素の `max` 属性を**返却/設定**します。この属性には、この項目の（数値または日時の）最大値が含まれ、最小値（`min` 属性）より小さくすることはできません。

`maxLength`

`unsigned long`: この要素の `maxlength` 属性を**返却/設定**します。この属性には、値が持つことのできる（Unicode コードポイント単位の）最大文字数が含まれます。

`min`

文字列: この要素の `min` 属性を**返却/設定**します。この属性には、この項目の（数値または日時の）最小値が含まれ、最大値（`max` 属性）より大きくすることはできません。

`minLength`

`unsigned long`: この要素の `minlength` 属性を**返却/設定**します。この属性には、値が持つことのできる（Unicode コードポイント単位の）最小文字数が含まれます。

`pattern`

文字列: この要素の `pattern` 属性を**返却/設定**します。ここにはコントロールの値をチェックするための正規表現を含みます。`title` 属性を使用してユーザーについてパターンを説明してください。この属性は、 `type` 属性の値が `text`、`search`、`tel`、`url`、`email` の場合にのみ適用されます。

`placeholder`

文字列: この要素の `placeholder` 属性を**返却/設定**します。ここには、ユーザーがコントロールに何を入力できるかのヒントが設定されます。プレイスホルダーのテキストには、キャリッジリターンやラインフィードを含むことはできません。この属性は、 `type` 属性の値が `text`、`search`、`tel`、`url`、`email` の場合にのみ適用されます。

`readOnly`

論理型: この要素の `readonly` 属性を**返却/設定**します。これは、ユーザーがコントロールの値を変更できないことを示します。この属性は、 `type` 属性の値が `hidden`、`range`、`color`、`checkbox`、`radio`、`file`、ボタン型の場合は無視されます。

`selectionEnd`

`unsigned long`: 選択中のテキストの末尾の位置を**返却/設定**します。選択がない場合は、現在のテキスト入力カーソル位置の直後の文字のオフセットを返します。

`selectionStart`

`unsigned long`: 選択中のテキストの先頭の位置を**返却/設定**します。何も選択していない場合は、その `<input>` 要素内にあるテキスト入力カーソル (キャレット) の位置を返します。

`selectionDirection`

文字列: 選択が行われた方向を**返却/設定**します。取りうる値は、`forward`（現在のロケールにおける先頭から末尾の方向に選択された）、`backward`（逆方向）、`none`（方向が不明）です。

`size`

`unsigned long`: この要素の `size` 属性を**返却/設定**します。これはコントロールの外見の大きさが入ります。この値は `type` の値が `text` または `password` の場合は整数で文字数であり、それ以外の場合はピクセル単位です。 `type` が `text`、`search`、`tel`、`url`、`email`、`password` のいずれかに設定されている場合のみ適用されます。

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

`blur()`

この input 要素からフォーカスを外します。キー入力はどこにも行かなくなります。

`click()`

この input 要素のクリックをシミュレートします。

`focus()`

この input 要素にフォーカスを与えます。キー入力がこの要素に行くようになります。

`select()`

この input 要素のすべてのテキストを選択し、ユーザーがその内容をすべて置き換えることができるように、テキストにフォーカスを与えます。

`setSelectionRange()`

この input 要素のテキストの範囲を選択します（ただし、フォーカスは与えません）。

`setRangeText()`

この input 要素のテキストの範囲を新しいテキストで置き換えます。

`setCustomValidity()`

要素に独自の検証メッセージ設定します。このメッセージが空の文字列ではない場合、その要素は独自の検証のエラーに見舞われており、検証に不合格になります。

`showPicker()`

日付、時刻、色、ファイルについて、ブラウザーのピッカーを表示します。

`checkValidity()`

論理値を返します。 `false` の場合はその要素が制約検証の候補であり、かつ制約を満たしていないことを表します。この場合、この要素で `invalid` イベントも発生します。 `true` の場合はその要素が制約検証の候補でないか、制約を満たしていることを表します。

`reportValidity()`

`checkValidity()` メソッドを実行し、 false が返された場合 (無効な入力や pattern 属性が提供されていない場合) には、フォームを送信した場合と同様に、入力が無効であることをユーザーに報告します。

`stepDown()`

`value` を (`step` \* n) だけ減少させます。 n が指定されなかった場合の既定値は 1 です。次の場合は `InvalidStateError` 例外が発生します。

* 現在の `type` の値にこのメソッドが適用できない場合
* 要素に `step` 値が設定されていない場合
* `value` が数値に変換できない場合
* 結果の値が `max` を超えたり、 `min` を下回ったりする場合

`stepUp()`

`value` を (`step` \* n) だけ増加させます。 n が指定されなかった場合の既定値は 1 です。次の場合は INVALID\_STATE\_ERR 例外が発生します。

* 現在の `type` の値にこのメソッドが適用できない場合
* 要素に `step` 値が設定されていない場合
* `value` が数値に変換できない場合
* 結果の値が `max` を超えたり、 `min` を下回ったりする場合

イベント
----

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

`input`

`<input>`、`<select>`、`<textarea>` のいずれかの要素の `value` が変更されたときに発生します。なお、このイベントは実際には `HTMLElement` インターフェイス上で発生し、 `contenteditable` 要素にも適用されますが、フォーム入力要素で最も一般的に使用されるため、ここに挙げています。

`invalid`

制約検証時に、要素が制約を満たしていなかった場合に発生します。

`search`

`<input>` の `type="search"` で検索が開始されたときに発生します。

`selectionchange` イベント
Experimental

`<input>` の中のテキストの選択が変更された場合に発生します。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlinputelement |

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

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

関連情報
----

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


SubtleCrypto - Web API

SubtleCrypto
============

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

**`SubtleCrypto`** はウェブ暗号化 API のインターフェイスで、数々の低水準の暗号化関数を提供します。 `SubtleCrypto` の機能にアクセスするには、 `crypto` プロパティから取得した `Crypto` オブジェクトの `subtle` プロパティを使用します。

**警告:** このAPIは、数多くの低レベル暗号プリミティブを提供しています。これらを悪用するのはとても簡単で、その落とし穴は非常に微妙なものです。

基本的な暗号機能を正しく使用すると想定されていても、安全な鍵管理と全体的なセキュリティシステムの設計を正しく行うのは非常に難しく、一般的にはセキュリティの専門家の領域です。

セキュリティシステムの設計と実装に誤りがあると、システムのセキュリティが完全に機能しなくなる可能性があります。

学び、実験してください。しかし、このテーマに詳しい人物が徹底的にレビューする前に、あなたの作品の安全性を保証したり、ほのめかしたりしないでください。暗号 101 コースは、安全なシステムの設計と実装するために学び始めるには最適な場所です。

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

*このインターフェイスには親インターフェイスがないので、何もプロパティを継承していません。*

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

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

`SubtleCrypto.encrypt()`

引数に与えられた平文テキストおよびアルゴリズム、鍵に対応する暗号化されたデータで履行される `Promise` を返します。

`SubtleCrypto.decrypt()`

引数に与えられた暗号化されたテキストおよびアルゴリズム、鍵に対応する平文データで履行される `Promise` を返します。

`SubtleCrypto.sign()`

引数に与えられたテキストおよびアルゴリズム、鍵に対応する署名で履行される `Promise` を返します。

`SubtleCrypto.verify()`

引数に与えられた署名が、同じく引数に与えられたテキストおよびアルゴリズム、鍵と一致するかどうかを示す論理値で履行される `Promise` を返します。

`SubtleCrypto.digest()`

引数に与えられたアルゴリズムとテキストから生成されたダイジェストで履行される `Promise` を返します。

`SubtleCrypto.generateKey()`

対称アルゴリズムの場合は新しく生成された `CryptoKey` で、非対称アルゴリズムの場合は新しく生成された 2 つの鍵を含む `CryptoKeyPair` で履行される `Promise` を返します。これらは、引数として指定されたアルゴリズム、使用法、抽出可能性と一致します。

`SubtleCrypto.deriveKey()`

引数に与えられたマスターキーと特定のアルゴリズムによりもたらされる、新たに生成された `CryptoKey` で履行される `Promise` を返します。

`SubtleCrypto.deriveBits()`

引数に与えられたマスターキーと特定のアルゴリズムによりもたらされる、新たに生成された擬似乱数のビット列を含むバッファーで履行される `Promise` を返します。

`SubtleCrypto.importKey()`

引数に与えられた書式およびアルゴリズム、生の鍵データ、使用法、抽出可能性に対応する `CryptoKey` で履行される `Promise` を返します。

`SubtleCrypto.exportKey()`

要求された書式の鍵を含むバッファーで履行される `Promise` を返します。

`SubtleCrypto.wrapKey()`

安全でない環境で使用（転送や保存）するために、ラップされた対称鍵で履行される `Promise` を返します。返されるラップされたバッファーは、引数に与えられた書式内にあり、与えられたアルゴリズムで与えられたラッピング鍵によりラップされた鍵を含みます。

`SubtleCrypto.unwrapKey()`

引数に与えられたラップされた鍵に対応する `CryptoKey` の `Promise` を返します。

SubtleCrypto の使用
----------------

この API で実装する機能は、暗号化機能と鍵管理機能の 2 つに分けることができます。

### 暗号化関数

これらは、システムにプライバシーや認証などのセキュリティ機能を実装するために使用することができる関数です。 `SubtleCrypto` API は以下の暗号化関数を提供ししています。

* `sign()` および `verify()`: デジタル署名の作成と検証
* `encrypt()` および `decrypt()`: データの暗号化と復号
* `digest()`: あるデータの固定長で衝突に強いダイジェストを作成します。
### 鍵管理関数

`digest()` を除き、 API 内の暗号機能はすべて暗号鍵を使用しています。 `SubtleCrypto` API では、暗号鍵は `CryptoKey` オブジェクトを使用して表します。署名や暗号化などの演算処理を実行するには、 `CryptoKey` オブジェクトを `sign()` または `encrypt()` 関数に渡します。

#### キーの生成と導出

`generateKey()` および `deriveKey()` 関数は、どちらも新しい `CryptoKey` オブジェクトを作成します。

この違いは、 `generateKey()` が呼び出すたびに新しい鍵を生成するのに対し、 `deriveKey()` は最初の鍵素材から鍵を導出する点です。同じ鍵素材を 2 回に分けて `deriveKey()` を呼び出すと、同じ基盤値がある 2 つの `CryptoKey` オブジェクトを取得することができます。この例は、例えばパスワードから暗号鍵を導出し、後で同じパスワードから同じ鍵を導出してデータを復号したい場合に有益です。

#### 鍵のインポートとエクスポート

アプリの外部で鍵を利用できるようにするには、鍵をエクスポートする必要があります。それが `exportKey()` です。エクスポート形式はいくつか選べます。

`exportKey()` の逆は `importKey()` です。他のシステムから鍵をインポートすることができ、 PKCS #8 や JSON Web Key のような標準形式に対応しているため、これを支援することができます。 `exportKey()` 関数は暗号化されていない形式で鍵をエクスポートします。

鍵が機密性の高いものである場合、 `wrapKey()` を使用してください。これは鍵をエクスポートし、別の鍵を使用して暗号化するもので、 API では「鍵ラッピング鍵」と呼ばれています。

`wrapKey()` の逆は `unwrapKey()` で、鍵を復号してからインポートします。

#### 鍵の格納

`CryptoKey` オブジェクトは、構造化複製アルゴリズムを使用して格納することができます。すなわち、標準のウェブストレージ API を使用して、鍵を格納したり受け取ったりすることができます。この仕様書では、ほとんどの開発者が IndexedDB API を使用して `CryptoKey` オブジェクトを格納することを想定しています。

### 対応しているアルゴリズム

ウェブ暗号 API が提供した暗号関数は、 1 つ以上の異なる「暗号アルゴリズム」によって実行することができます。関数の `algorithm` 引数は、使用するアルゴリズムを示します。アルゴリズムによっては追加の引数が必要です。このような場合、 `algorithm` 引数は追加の引数を含めるために辞書オブジェクトになります。

下記の表は、どのアルゴリズムがどの暗号処理を運営するのに適しているかをまとめたものです。

|  | sign()verify() | encrypt()decrypt() | digest() | deriveBits()deriveKey() | wrapKey()unwrapKey() |
| --- | --- | --- | --- | --- | --- |
| RSASSA-PKCS1-v1\_5 | ✓ |  |  |  |  |
| RSA-PSS | ✓ |  |  |  |  |
| ECDSA | ✓ |  |  |  |  |
| HMAC | ✓ |  |  |  |  |
| RSA-OAEP |  | ✓ |  |  | ✓ |
| AES-CTR |  | ✓ |  |  | ✓ |
| AES-CBC |  | ✓ |  |  | ✓ |
| AES-GCM |  | ✓ |  |  | ✓ |
| SHA-1 |  |  | ✓ |  |  |
| SHA-256 |  |  | ✓ |  |  |
| SHA-384 |  |  | ✓ |  |  |
| SHA-512 |  |  | ✓ |  |  |
| ECDH |  |  |  | ✓ |  |
| HKDF |  |  |  | ✓ |  |
| PBKDF2 |  |  |  | ✓ |  |
| AES-KW |  |  |  |  | ✓ |

仕様書
---

| Specification |
| --- |
| Web Cryptography API # subtlecrypto-interface |

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

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

関連情報
----

* ウェブ暗号化 API
* SubtleCrypto の暗号以外の使用法
* ウェブセキュリティ
* プライバシー、権限、情報セキュリティについて
* `Crypto` および `Crypto.subtle`.
* Crypto 101: 暗号化の入門コースです（英語）。


NDEFMessage - Web API

NDEFMessage
===========

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

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

**`NDEFMessage`** はウェブ NFC API のインターフェイスで、 NFC タグで読み書きされる NDEF メッセージの内容を表します。インスタンスは `NDEFMessage()` コンストラクターを呼び出すか、 `reading` イベントに渡される `NDEFReadingEvent.message` プロパティを用いるかして取得します。

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

`NDEFMessage()`

新しい `NDEFMessage` オブジェクトを生成し、指定された NDEF レコードで初期化します。

プロパティ
-----

`NDEFMessage.records`読取専用

メッセージに含まれる NDEF レコードのリストを返します。

仕様書
---

| Specification |
| --- |
| Web NFC API # dom-ndefmessage |

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

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


MessageEvent - Web API

MessageEvent
============

**`MessageEvent`** インターフェースは対象のオブジェクトから受け取ったメッセージを表します。

次のメッセージを表すために使用されます。

* サーバー送信イベント （`EventSource.message_event` を参照）。
* ウェブソケット （WebSocket インターフェイスの `onmessage` プロパティを参照）。
* 文書間のメッセージ（`Window.postMessage()` および `Window.message_event` を参照）。
* チャンネルメッセージ （`MessagePort.postMessage()` および `MessagePort.message_event` を参照）。
* ワーカー／文書間メッセージ（上記 2 項目ほか、`Worker.postMessage()`, `Worker.message_event`, `ServiceWorkerGlobalScope.message_event` なども参照）。
* ブロードキャストチャンネル (`Broadcastchannel.postMessage()`) および `BroadcastChannel.message_event` を参照).

このイベントによって引き起こされる動作は、対応する `message` イベント（例えば、 上記の `onmessage` ハンドラーを使ったもの）のイベントハンドラーとして設定された関数の中で定義されています。

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

Event

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

`MessageEvent()`

新しい `MessageEvent` を作成します。

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

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

`MessageEvent.data` 読取専用

メッセージ送信元によって送信されたデータです。

`MessageEvent.origin` 読取専用

文字列で、メッセージ送信元のオリジンを表します。

`MessageEvent.lastEventId` 読取専用

文字列で、このイベントの一意の ID を表します。

`MessageEvent.source` 読取専用

`MessageEventSource` （WindowProxy、`MessagePort`、`ServiceWorker` の何れかのオブジェクト）で、メッセージの送信元を表します。

`MessageEvent.ports` 読取専用

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

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

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

`initMessageEvent()`
非推奨

メッセージイベントを初期化します。**これ以上このメソッドを使用しないでください。代わりに、`MessageEvent()` コンストラクターを使用してください。**

例
-

基本的な共有ワーカーの例（共有ワーカーを実行）には 2 つの HTML ページがあり、それぞれのページが単純な計算をする JavaScript を実行しています。異なるスクリプトが計算を実行するために同一のワーカーファイルを使用しています。ページの異なるウィンドウ内で動作していても、どちらのスクリプトもワーカーファイルにアクセスできます。

次のコードスニペットは、 `SharedWorker` オブジェクトの作成を `SharedWorker()` コンストラクターを使用して行う様子を示しています。どちらのスクリプトもこれを含んでいます。

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

次にどちらのスクリプトも `SharedWorker.port` プロパティで作成された `MessagePort` オブジェクトを通してワーカーにアクセスします。 onmessage イベントが addEventListener で装着されると、 `start()` メソッドでポートが手動で開きます。

```js
myWorker.port.start();
```

ポートが開くと、どちらのスクリプトもワーカーにメッセージを送信し、送信されたメッセージを `port.postMessage()` と `port.onmessage` でそれぞれ処理します。

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

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

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

ワーカーの内部では、 `onconnect` ハンドラーを使用して上記の同一のポートに接続しています。そのワーカーと関連付けられたポートは、`connect` イベントの `ports` プロパティで接続可能です。その後、ポートを開くために `MessagePort` の `start()` メソッドを、メインのスレッドから送信されたメッセージを処理するために `onmessage` ハンドラーを使用します。

```js
onconnect = (e) => {
  const port = e.ports[0];

  port.addEventListener("message", (e) => {
    const workerResult = `Result: ${e.data[0] \* e.data[1]}`;
    port.postMessage(workerResult);
  });

  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
};
```

仕様書
---

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

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

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

関連情報
----

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


UIEvent - Web API

UIEvent
=======

**`UIEvent`** インターフェイスは、シンプルなユーザーインターフェイスのイベントを表します。

`UIEvent` は `Event` から派生しています。後方互換性のために `UIEvent.initUIEvent()` メソッドは維持されていますが、`UIEvent` オブジェクトは `UIEvent()` コンストラクターを使用して作成すべきです。

`MouseEvent`、`TouchEvent`、`FocusEvent`、`KeyboardEvent`、`WheelEvent`、`InputEvent`、`CompositionEvent` といったインターフェイスが、このインターフェイスの直接または間接の子孫です。

Event

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

`UIEvent()`

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

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

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

`UIEvent.detail` 読取専用

`long` で、イベントの種類に応じて、イベントに関する詳細を返します。

`UIEvent.sourceCapabilities`
Experimental
 読取専用

タッチイベントの生成元である物理的な機器に関する情報を提供する、 `InputDeviceCapabilities` インターフェイスのインスタンスを返します。

`UIEvent.view` 読取専用

イベントを生成したビューを含む WindowProxy を返します。

`UIEvent.which`
非推奨
 読取専用

押下されたキーの `keyCode` の数値、または押下された英数字キーの文字コード (`charCode`) を返します。

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

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

`UIEvent.initUIEvent()`
非推奨

`UIEvent` オブジェクトを初期化します。イベントがすでに送出されている場合は、何も行いません。

仕様書
---

| Specification |
| --- |
| UI Events # idl-uievent |

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

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

関連情報
----

* イベント入門
* `Event`


VRPose - Web API

VRPose
======

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

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

**`VRPose`** は WebVR API のインターフェイスで、特定のタイムスタンプにおける VR センサーの状態（向き、位置、速度、加速度の情報を含みます）を示します。

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

このインターフェイスには、 `VRDisplay.getPose()` と `VRDisplay.getFrameData()` メソッドを通じてアクセスします。 `VRDisplay.getPose()` は非推奨です。

プロパティ
-----

`VRPose.position`
非推奨
 読取専用
Non-standard

現在の `VRPose.timestamp` における `VRDisplay` の位置を 3D ベクトルとして返します。

`VRPose.linearVelocity`
非推奨
 読取専用
Non-standard

現在の `VRPose.timestamp` における `VRDisplay` の（線形の）速度を返します。単位はメートル/秒です。

`VRPose.linearAcceleration`
非推奨
 読取専用
Non-standard

現在の `VRPose.timestamp` における `VRDisplay` の（線形の）加速度を返します。単位はメートル/秒/秒です。

`VRPose.orientation`
非推奨
 読取専用
Non-standard

現在の `VRPose.timestamp` におけるセンサーの向きをクォータニオン値として返します。

`VRPose.angularVelocity`
非推奨
 読取専用
Non-standard

現在の `VRPose.timestamp` における `VRDisplay` の角速度を返します。単位はラジアン/秒です。

`VRPose.angularAcceleration`
非推奨
 読取専用
Non-standard

現在の `VRPose.timestamp` における `VRDisplay` の角加速度を返します。単位はラジアン/秒/秒です。

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

`VRPose.timeStamp`
非推奨
 読取専用

システムの現在の時刻を返します。位置データが更新されたかどうか、またどのような順序で更新が行われたかを判断するのに有益な、単調に増加する値です。**代わりに、タイムスタンプは `VRDisplay.getFrameData()` が呼び出されたときに返されるようになりました（詳細は `VRFrameData.timestamp` を参照）。**

例
-

コード例については `VRFieldOfView` を参照してください。

仕様書
---

このインターフェイスは古い 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