recursal/MDN huggingface dataset:
TextDecoder
===========

**`TextDecoder`** インターフェイスは、特定のテキストエンコーディング、例えば `UTF-8`、`ISO-8859-2`、`KOI8-R`、`GBK` などのデコーダーを表します。デコーダーは入力としてバイトストリームを受け取り、コードポイントのストリームを出力します。

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

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

`TextDecoder()`

新たに生成した `TextDecoder` を返します。これは、引数で指定したデコード方式を使用して連続したコードポイントを生成します。

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

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

`TextDecoder.encoding` 読取専用 

デコーダーの名称を持つ文字列であり、これは `TextDecoder` が使用する方式を表す文字列です。

`TextDecoder.fatal` 読取専用 

エラーモードが fatal であるかを示す論理値です。

`TextDecoder.ignoreBOM` 読取専用 

バイトオーダーマークを無視するかどうかを示す論理値です。

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

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

`TextDecoder.decode()`

特定の `TextDecoder` オブジェクトの方式でデコードされたテキストを含む文字列を返します。

例
-

### 型付き配列でのテキスト表現

この例では、中国語/日本語の文字 
 ![「吉」を表す漢字](/ja/docs/Web/API/TextDecoder/2019-05-21_191907.png) を、異なる 5 種類の型付き配列、 `Uint8Array`, `Int8Array`, `Uint16Array`, `Int16Array`, `Int32Array` で表します。


```js
let utf8decoder = new TextDecoder(); // default 'utf-8' or 'utf8'

let u8arr = new Uint8Array([240, 160, 174, 183]);
let i8arr = new Int8Array([-16, -96, -82, -73]);
let u16arr = new Uint16Array([41200, 47022]);
let i16arr = new Int16Array([-24336, -18514]);
let i32arr = new Int32Array([-1213292304]);

console.log(utf8decoder.decode(u8arr));
console.log(utf8decoder.decode(i8arr));
console.log(utf8decoder.decode(u16arr));
console.log(utf8decoder.decode(i16arr));
console.log(utf8decoder.decode(i32arr));
```

### UTF-8 ではないテキストの扱い

この例では、ロシア語の "Привет, мир!"、 "Hello, world." という意味のテキストをデコードします。 `TextDecoder()` コンストラクターでは、キリル語の文字に適した Windows-1251 文字エンコーディングを指定します。


```js
const win1251decoder = new TextDecoder("windows-1251");
const bytes = new Uint8Array([
  207, 240, 232, 226, 229, 242, 44, 32, 236, 232, 240, 33,
]);
console.log(win1251decoder.decode(bytes)); // Привет, мир!
```

仕様書
---

| Specification |
| --- |
| Encoding Standard # interface-textdecoder |

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

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

関連情報
----

* 逆の操作を表す `TextEncoder` インターフェイス。
* 対応していないブラウザーでもこのインターフェイスを使用可能にする shim。
* Node.js supports global export from v11.0.0
SpeechSynthesisEvent
====================

**`SpeechSynthesisEvent`** はウェブ音声 API のインターフェイスで、は、発話サービスで処理された `SpeechSynthesisUtterance` オブジェクトの現在の状態に関する情報を保持します。

Event

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

`SpeechSynthesisEvent()`

新しい `SpeechSynthesisEvent` を作成します。

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

*以下に挙げたプロパティに加え、親インターフェイスである `Event` のプロパティが利用可能です。*

`SpeechSynthesisEvent.charIndex` 読取専用 

イベントが発生したときに発話されていた `SpeechSynthesisUtterance.text` 内の文字のインデックス位置を返します。

`SpeechSynthesisEvent.charLength` 読取専用 

発話エンジンが対応している場合、 `charIndex` 位置の後に発話できる残りの文字数を返します。発話エンジンが情報を提供できない場合は 0 を返します。

`SpeechSynthesisEvent.elapsedTime` 読取専用 

イベントが発生した時点の `SpeechSynthesisUtterance.text` が話し始めてからの経過時間（秒）を返します。

`SpeechSynthesisEvent.name` 読取専用 

`SpeechSynthesisUtterance.text` が発話される際に発生する特定の種類のイベントに関連する名前を返します。 `mark` イベントの場合は到達した SSML マーカーの名前、 `boundary` イベントの場合は到達した境界の種類です。

`SpeechSynthesisEvent.utterance` 読取専用 

イベントが発生した `SpeechSynthesisUtterance` インスタンスを返します。

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

*以下に挙げたメソッドに加え、親インターフェイスである `Event` のメソッドが利用可能です。*

例
-


```js
utterThis.onpause = (event) => {
  const char = event.utterance.text.charAt(event.charIndex);
  console.log(
    `Speech paused at character ${event.charIndex} of "${event.utterance.text}", which is "${char}".`,
  );
};

utterThis.onboundary = (event) => {
  console.log(
    `${event.name} boundary reached after ${event.elapsedTime} seconds.`,
  );
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # speechsynthesisevent |

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

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

関連情報
----

* ウェブ音声 API
HTMLDialogElement
=================

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

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

* Learn more
* See full compatibility
* Report feedback
**`HTMLDialogElement`** インターフェイスは `<dialog>` 要素を操作するメソッドを提供します。 `HTMLElement` インターフェースからプロパティとメソッドを継承しています。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLDialogElement.open`

論理値で、ダイアログが操作可能であることを示す `open` 属性の値を反映します。

`HTMLDialogElement.returnValue`

文字列で、ダイアログの返値を設定または返却します。

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

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

`HTMLDialogElement.close()`

ダイアログを閉じます。任意で引数として文字列を渡すことができ、これがダイアログの `returnValue` を更新します。

`HTMLDialogElement.show()`

ダイアログをモードレスで開きます。すなわち、その間にダイアログの外のコンテンツが操作できます。

`HTMLDialogElement.showModal()`

ダイアログをモーダルで、他のダイアログがあればその最も上に表示します。ダイアログの外の操作はブロックされます。ダイアログの外はすべて inert となり、ダイアログの外の操作はブロックされます。

イベント
----

`cancel`

ユーザーがエスケープキーで現在開いているダイアログを解除したときに発行されます。

`close`

エスケープキー、`HTMLDialogElement.close()` メソッド、または `method="dialog"` でダイアログ内のフォームを送信することによって、このダイアログが閉じられたときに発行されます。

例
-

### モーダルダイアログを開く

以下の例はボタンを表示し、クリックすると、フォームの入ったモーダルダイアログ (`<dialog>`) を `HTMLDialogElement.showModal()` 関数によって開きます。そこから *Cancel* ボタンを押して (`HTMLDialogElement.close()` 関数で) ダイアログを閉じるか、送信ボタンでフォームを送信するかします。Cancel ボタンを選択すると、`close` イベントを生成します。`cancel` イベントではありません。


```html
<!-- pop-up dialog box, containing a form -->
<dialog id="favDialog">
  <form method="dialog">
    <p>
      <label for="favAnimal">Favorite animal:</label>
      <select id="favAnimal" name="favAnimal">
        <option></option>
        <option>Brine shrimp</option>
        <option>Red panda</option>
        <option>Spider monkey</option>
      </select>
    </p>
    <div>
      <button id="cancel" type="reset">Cancel</button>
      <button type="submit">Confirm</button>
    </div>
  </form>
</dialog>

<div>
  <button id="updateDetails">Update details</button>
</div>
```


#### JavaScript


```js
const updateButton = document.getElementById("updateDetails");
const cancelButton = document.getElementById("cancel");
const dialog = document.getElementById("favDialog");
dialog.returnValue = "favAnimal";

function openCheck(dialog) {
  if (dialog.open) {
    console.log("Dialog open");
  } else {
    console.log("Dialog closed");
  }
}

// Update button opens a modal dialog
updateButton.addEventListener("click", () => {
  dialog.showModal();
  openCheck(dialog);
});

// Form cancel button closes the dialog box
cancelButton.addEventListener("click", () => {
  dialog.close("animalNotChosen");
  openCheck(dialog);
});
```


#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # htmldialogelement |

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

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

関連情報
----

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

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

WebGPU API の **`GPU`** インターフェイスは、WebGPU を使用するためのスタート地点です。デバイスの要求、機能や制限の設定、などを行える `GPUAdapter` を取得するのに使用できます。

現在のコンテキスト用の `GPU` オブジェクトには、`Navigator.gpu` または `WorkerNavigator.gpu` プロパティからアクセスできます。

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

`wgslLanguageFeatures` 
Experimental
 読取専用 

この WebGPU の実装が対応している WGSL 言語の拡張を報告する `WGSLLanguageFeatures` オブジェクトです。

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

`requestAdapter()` 
Experimental

`GPUAdapter` オブジェクトのインスタンスで解決する `Promise` を返します。これを用いて、WebGPU の機能を用いるための第一のインターフェイスである `GPUDevice` (en-US) を要求できます。

`getPreferredCanvasFormat()` 
Experimental

現在のシステムにおける、8 ビット深度で通常のダイナミックレンジのコンテンツを表示するために最適なキャンバステクスチャーの形式を返します。

例
-

### アダプターとデバイスを要求する


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

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

  const device = await adapter.requestDevice();

  //...
}
```

### GPUCanvasContext を最適なテクスチャー形式で設定する


```js
const canvas = document.querySelector("#gpuCanvas");
const context = canvas.getContext("webgpu");

context.configure({
  device: device,
  format: navigator.gpu.getPreferredCanvasFormat(),
  alphaMode: "premultiplied",
});
```

仕様書
---

| Specification |
| --- |
| WebGPU # gpu-interface |

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

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

関連情報
----

* WebGPU API
MIDIInputMap
============

Web MIDI API の読み取り専用インターフェイス **`MIDIInputMap`** は、現在利用可能な MIDI 入力ポートの集合を提供します。

`MIDIInputMap` のインスタンスは、キーを MIDI 入力の ID 文字列、対応する値を対応する `MIDIInput` オブジェクトとする読み取り専用の `Map` 風オブジェクトです。

仕様書
---

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

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

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

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

Web Speech API の **`SpeechRecognitionError`** インターフェイスは、認識サービスからのエラーメッセージを表します。

プロパティ
-----

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

`SpeechRecognitionError.error` (en-US) 読取専用 

起こったエラーの種類を返します。

`SpeechRecognitionError.message` (en-US) 読取専用 

エラーの内容が詳しく書かれたメッセージを返します。

例
-


```js
var recognition = new SpeechRecognition();

recognition.onerror = function (event) {
  console.log("Speech recognition error detected: " + event.error);
  console.log("Additional information: " + event.message);
};
```

仕様
--

| Specification |
| --- |
| Web Speech API # speechrecognitionerrorevent |

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

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

### Firefox OS の許可設定

アプリ内で音声認識を使用するには、以下の許可設定を manifest で指定する必要があります:


```json
"permissions": {
  "audio-capture" : {
    "description" : "Audio capture"
  },
  "speech-recognition" : {
    "description" : "Speech recognition"
  }
}
```


特権アプリも必要なため、以下も同様に含める必要があります:


```json
  "type": "privileged"
```

関連項目
----

* Web Speech API
origin
======

グローバルの **`origin`** プロパティは読み取り専用で、文字列としてシリアライズされた、グローバルスコープのオリジンを返します。

値
-

文字列です。

例
-

ワーカースクリプト内から以下のスニペットを実行すると、メッセージを受け取る度にワーカーのグローバルスコープのオリジンをコンソールに記録します。


```js
onmessage = () => {
  console.log(self.origin);
};
```


もしオリジンがスキーム/ホスト名/ポート番号の組み合わせでない場合（すなわち、ローカルで実行しようとしている、つまり `file://` の URL の場合）、 `origin` は `"null"` という文字列を返すでしょう。

仕様書
---

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

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

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

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

.WebXR Device API の **`XRBoundedReferenceSpace`** インターフェイスは、事前設定された境界を持つ仮想世界の参照空間を記述します。 これは `XRReferenceSpace` を拡張して、ビューアーの位置の周囲の本質的に制限のない空間を記述します。 これらの境界は、点の配列を使用して定義し、各点は、ユーザーがその中で移動することができる多角形の頂点を定義します。

これは通常、XR システムがユーザーの開始位置から限られた距離内でユーザーの物理的な移動を追跡できる場合に使用します。 指定された境界は、実際には、WebXR サイトまたはアプリケーションがユーザーが現実世界の壁やその他の障害物と衝突するのを防ぐために、ユーザーがいる部屋の形状とサイズを表す場合があります。 少なくとも、境界は、XR デバイスがユーザーの移動を追跡できる領域を示します。 制限付き空間の仕組みとその有用性の詳細については、制限付き参照空間の使用 (en-US)の記事を参照してください。

プロパティ
-----

*`XRReferenceSpace` のプロパティに加えて、`XRBoundedReferenceSpace` には次のものが含まれています。*

`boundsGeometry` 読取専用 

`DOMPointReadOnly` オブジェクトの配列。 各オブジェクトは、ユーザーが留まる必要がある境界を定義する多角形の頂点を定義します。 これらの頂点は、ビューアーの位置の周囲を*時計回り*に移動するように並べ替える*必要があります*。

メソッド
----

*`XRBoundedReferenceSpace` は、その親インターフェイスである `XRReferenceSpace` のメソッドを継承します。 それ以上のメソッドはありません。*

仕様
--

| Specification |
| --- |
| WebXR Device API # xrboundedreferencespace-interface |

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

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

関連情報
----

* WebXR Device API
* WebXR の幾何学と参照空間
* 視点とビューアー: WebXR でのカメラのシミュレーション
BeforeUnloadEvent
=================

**`BeforeUnloadEvent`** は `beforeunload` イベントのインターフェイスです。

`beforeunload` イベントは、ウィンドウ、文書、そのリソースがアンロードされようとしているときに発生します。

Event の `returnValue` プロパティに空文字列でない値が代入されると、ダイアログボックスが現れ、ユーザーにページを離れるかどうかの確認を求めます（下記の例を参照）。値が指定されなかった場合、イベントはサイレントで処理されます。実装によっては、フレームまたは埋め込まれたフレームがユーザージェスチャまたはユーザーの操作を受け取った場合にのみ、ダイアログボックスを示すものもあります。詳しくはブラウザーの互換性を参照してください。

**メモ:** セキュリティ上の理由から、返す文字列の代わりに、ウェブページの制御しない一般的な文字列のみが示されます。

Event

BeforeUnloadEvent

|  |  |
| --- | --- |
| バブリング | なし |
| キャンセル | 可 |
| 対象オブジェクト | defaultView |
| インターフェイス | `Event` |

例
-


```js
window.addEventListener("beforeunload", (event) => {
  event.returnValue = "\\o/";
});

// is equivalent to
window.addEventListener("beforeunload", (event) => {
  event.preventDefault();
});
```


WebKit 派生ブラウザーは、ダイアログボックスについては仕様に従っていません。ほぼクロスブラウザーで動作する例としては、下記の例のようなものがあります。


```js
window.addEventListener("beforeunload", (e) => {
  const confirmationMessage = "\\o/";

  // Gecko + IE
  (e || window.event).returnValue = confirmationMessage;

  // Safari, Chrome, and other WebKit-derived browsers
  return confirmationMessage;
});
```

仕様書
---

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

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

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

関連情報
----

* `DOMContentLoaded`
* `readystatechange`
* `load`
* `beforeunload`
* `unload`
* Unloading Documents — Prompt to unload a document
FontFaceSet
===========

**`FontFaceSet`** は CSS フォント読み込み API のインターフェイスで、フォントフェイスのダウンロードとダウンロード状況の問い合わせを管理します。

`FontFaceSet` インスタンスは `Set` 風オブジェクト であり、 `FontFace` オブジェクトの順序付けられた集合を保持することができます。

このプロパティは `Document.fonts`、またはウェブワーカー内の `self.fonts` として利用可能です。

EventTarget

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

`FontFaceSet.status` 読取専用 

フォントフェイスの読み込み状態を示します。 `'loading'` または `'loaded'` のどちらかになります。

`FontFaceSet.ready` 読取専用 

`Promise` で、フォントの読み込みとレイアウト操作が完全に完了すると解決されます。

`FontFaceSet.size` 読取専用 

`FontFaceSet` に含まれる値の数を返します。

### イベント

`loading`

フォントフェイスの集合の読み込みが開始されたときに発行されます。

`loadingdone`

フォントフェイスの集合の読み込みが完了したときに発行されます。

`loadingerror`

フォントフェイスの集合を読み込む際にエラーが発生した場合に発行されます。

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

`FontFaceSet.add()`

フォント集合にフォントを追加します。

`FontFaceSet.check()`

論理値で、フォントが読み込まれているかどうかを示しますが、読み込まれていないときは読み込みを開始しません。

`FontFaceSet.clear()`

手動で追加したフォントをすべてフォント集合から除去されます。CSS に接続されたフォントは影響を受けません。

`FontFaceSet.delete()`

手動で追加したフォントをフォント集合から取り除きます。CSS に接続されたフォントは影響を受けません。

`FontFaceSet.entries()`

`FontFaceSet` の各要素の値を挿入順に返す新しいイテレーターを返します。

`FontFaceSet.forEach()`

指定された関数を `FontFaceSet` オブジェクトの各値に対して実行します。

`FontFaceSet.has()`

指定された値で要素が存在するかどうかを検査して `Boolean` で返します。

`FontFaceSet.keys()`

`FontFaceSet.values()` の別名です。

`FontFaceSet.load()`

要求されたフォントのフォントフェイスのリストで解決する `Promise` を返します。

`FontFaceSet.values()`

`FontFaceSet` オブジェクトの各要素の値を挿入順に返す新しいイテレーターオブジェクトを返します。

仕様書
---

| Specification |
| --- |
| CSS Font Loading Module Level 3 # FontFaceSet-interface |

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

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

`ConstantSourceNode` インターフェイスはウェブオーディオ API の一部で、出力が 1 つの不変の値である音声ソース（`AudioScheduledSourceNode` に基づいています）を表します。そのため、音声ソースから入ってくる値を一定に保つ必要がある場合に有益な値です。また、 `offset` の値を自動化したり、他のノードを接続したりして、構成可能な `AudioParam` として使用することができます。詳しくは ConstantSourceNode による複数の引数の制御 (en-US)を参照して下さい。

`ConstantSourceNode` は入力を持たず、ちょうど 1 つのモノラル（1 チャンネル）出力を持ちます。出力の値は常に `offset` 引数の値と同じです。

EventTarget

AudioNode

AudioScheduledSourceNode

ConstantSourceNode

|  |  |
| --- | --- |
| 入力数 | `0` |
| 出力数 | `1` |

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

`ConstantSourceNode()`

新しい `ConstantSourceNode` インスタンスを作成して返します。オプションとして、オブジェクトのプロパティの初期値を確立するためのオブジェクトを指定します。別の方法として、`BaseAudioContext.createConstantSource()` ファクトリーメソッドを使用することができます。AudioNode の作成を参照してください。

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

*親インターフェイスである `AudioScheduledSourceNode` からプロパティを継承しており、さらに以下のプロパティがあります。*

`offset`

このソースが連続的に出力する値を指定する `AudioParam`。既定値では 1.0 です。

### イベント

*親インターフェイスである `AudioScheduledSourceNode` からイベントを継承しています。*

**メモ:** 一部のブラウザーでは、このイベントの実装は `AudioScheduledSourceNode` インターフェイスの一部となっています。

`ended`

`ConstantSourceNode` データの再生が停止するたびに発生します。

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

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

**メモ:** 一部のブラウザーでは、これらのメソッドの実装は `AudioScheduledSourceNode` インターフェイスの一部となっています。

`start()`

正確な時刻に音を再生するようにスケジュールします。

`stop()`

正確な時刻に音を再生停止するようスケジュールします。

例
-

ConstantSourceNode での複数の引数の制御 (en-US)の記事では、 `ConstantSourceNode` を作成して 1 つのスライダーコントロールで 2 つの `GainNode` のゲインを変更できるようにしています。 3 つのノードはこのように設定されています。


```js
gainNode2 = context.createGain();
gainNode3 = context.createGain();
gainNode2.gain.value = gainNode3.gain.value = 0.5;
volumeSliderControl.value = gainNode2.gain.value;

constantNode = context.createConstantSource();
constantNode.connect(gainNode2.gain);
constantNode.connect(gainNode3.gain);
constantNode.start();

gainNode2.connect(context.destination);
gainNode3.connect(context.destination);
```


このコードでは、まずゲインノードを作成し、それらとその値を調整するボリュームコントロールをすべて 0.5 に設定します。次に `AudioContext.createConstantSource()` を呼び出して `ConstantSourceNode` を作成し、 2 つのゲインノードのそれぞれのゲイン引数を `ConstantSourceNode` に接続します。定電位ソースの `start()` メソッドを呼び出して定電位ソースを開始した後です。最後に、 2 つのゲインノードは音声出力先（通常はスピーカーまたはヘッドフォン）に接続されます。

これで `constantNode.offset` の値が変わるたびに、 `gainNode2` と `gainNode3` のゲインは同じ値になるように変化します。

この例を実際に見るには、また、これらのスニペットから派生したコードの残りを読むには、 ConstantSourceNode での複数の引数の制御 (en-US) を参照してください。

仕様書
---

| Specification |
| --- |
| Web Audio API # ConstantSourceNode |

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

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

関連情報
----

* ウェブオーディオ API の使用
* `AudioScheduledSourceNode`
* `AudioNode`
CookieStore
===========

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

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

**`CookieStore`** はクッキーストア API のインターフェイスで、ページまたはサービスワーカーから非同期に Cookie を取得、設定するためのメソッドを提供します。

`CookieStore` は `Window` または `ServiceWorkerGlobalScope` コンテキスト内のグローバスコープの属性を介してアクセスされます。そのため、コンストラクターはありません。

EventTarget

CookieStoreメソッド
----

`CookieStore.delete()` 
Experimental

`delete()` メソッドは与えられた名前またはオプションオブジェクトを持つ Cookie を削除します。削除が完了すると解決される `Promise` が返されます。

`CookieStore.get()` 
Experimental

`get()` メソッドは与えられた名前またはオプションオブジェクトで 1 つの Cookie を取得します。1 つの Cookie の詳細に解決される `Promise` を返します。

`CookieStore.getAll()` 
Experimental

`getAll()` メソッドはマッチするすべての Cookie を取得します。Cookie のリストに解決される `Promise` を返します。

`CookieStore.set()` 
Experimental

`set()` メソッドは与えられた名前と値またはオプションオブジェクトを Cookie に設定し、Cookie が設定されると解決される `Promise` を返します。

イベント
----

`change` 
Experimental

`change` イベントは、任意の Cookie に変更が加えられたときに発生します。

例
-

この例では、Cookie を設定し、操作が成功したか失敗したかのフィードバックをコンソールに書き込んでいます。


```js
const day = 24 \* 60 \* 60 \* 1000;
cookieStore
  .set({
    name: "cookie1",
    value: "cookie1-value",
    expires: Date.now() + day,
    domain: "example.com",
  })
  .then(
    () => {
      console.log("It worked!");
    },
    (reason) => {
      console.error("It failed: ", reason);
    },
  );
```

仕様書
---

| Specification |
| --- |
| Cookie Store API # CookieStore |

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

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

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

**`FederatedCredential`** は資格情報管理 API のインターフェイスで、連合アイデンティティプロバイダーからの資格情報についての情報を提供します。連合アイデンティティプロバイダーは、ウェブサイトが正しくユーザーを認証し、そのための API を提供する主体です。連合アイデンティティプロバイダーの一例として、 OpenID Connect があります。

**メモ:** 連合資格情報管理 API (FedCM) (en-US) は、ブラウザーで ID フェデレーションを処理するためのより完全なソリューションを提供し、`IdentityCredential` (en-US) 型を使用します。

対応しているブラウザーにおいては、このインターフェイスのインスタンスがグローバル `fetch` の `init` オブジェクトの `credential` メンバーとして渡されることがあります。

Credential

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

`FederatedCredential()` 
Experimental

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

プロパティ
-----

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

`FederatedCredential.provider` 読取専用  
Experimental

資格情報の連合アイデンティティプロバイダーの入った文字列を返します。

`FederatedCredential.protocol` 読取専用  
Experimental

資格情報の連合アイデンティティプロトコルの入った文字列を返します。

### イベントハンドラー

なし。

メソッド
----

なし。

例
-


```js
const cred = new FederatedCredential({
  id,
  name,
  provider: "https://account.google.com",
  iconURL,
});

// 格納
navigator.credentials.store(cred).then(() => {
  // 他に何かをする
});
```

仕様書
---

| Specification |
| --- |
| Credential Management Level 1 # federated |

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

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

**`HTMLCanvasElement`** インターフェイスは、`<canvas>` 要素のレイアウトや表示を操作するための属性やメソッドを提供します。`HTMLCanvasElement` は `HTMLElement` インターフェイスのプロパティやメソッドも継承しています。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLCanvasElement.height`

この `<canvas>` 要素の `height` 属性で、このキャンバスの 1 列分の論理ピクセル数（または RGBA 値の数）を反映した正の整数です。この属性が指定されていないか、無効な値であった場合は、`150` の既定値が用いられます。もし `<canvas>` に CSS の高さが[独立して]割り当てられていない場合、この値は CSS ピクセル数の単位で高さとしても使用されます。

`HTMLCanvasElement.width`

この `<canvas>` 要素の `width` 属性で、このキャンバスの 1 行分の論理ピクセル数（または RGBA 値の数）を反映した正の整数です。この属性が指定されていないか、無効な値であった場合は、`300` の既定値が用いられます。もし `<canvas>` に CSS の高さが[独立して]割り当てられていない場合、この値は CSS ピクセル数の単位で幅としても使用されます。

`HTMLCanvasElement.mozOpaque` 
Non-standard

非推奨

この `<canvas>` 要素の `moz-opaque` 属性を反映した論理値です。半透明の部分の有無をキャンバスに伝えることができます。キャンバスに半透明がないことがわかれば、描画のパフォーマンスを最適化することができます。これは Mozilla ベースのブラウザーでのみ対応しています。代わりに標準化された `canvas.getContext('2d', { alpha: false })` を使用してください。

`HTMLCanvasElement.mozPrintCallback` 
Non-standard

初期状態では null である関数です。ウェブコンテンツでここに JavaScript 関数を設定すると、ページの印刷中にキャンバスが再描画される際に呼び出されます。呼び出される際、コールバックあkン数には "printState" オブジェクトが渡されます。これは MozCanvasPrintState インターフェイスです。 コールバックは printState オブジェクトから描画するコンテキストを取得することができ、完了したら done() を呼び出す必要があります。`mozPrintCallback` の目的は、使用するプリンターの解像度でキャンバスの高解像度レンダリングを行うことです。このブログ記事を参照してください。

メソッド
----

*`HTMLElement` から継承しているメソッドがあります。*

`HTMLCanvasElement.captureStream()`

`CanvasCaptureMediaStreamTrack` (en-US) を返します。これはキャンバスの表面に対するリアルタイム動画キャプチャです。

`HTMLCanvasElement.getContext()`

このキャンバスのの描画コンテキストを返すか、対応していないコンテキスト ID の場合は null を返します。描画コンテキストを用いてキャンバスに描画することができます。getContext の引数に `"2d"` を渡して呼び出すと `CanvasRenderingContext2D` オブジェクトを返します。`"webgl"`（または `"experimental-webgl"`）で呼び出すと、 `WebGLRenderingContext` オブジェクトを返します。このコンテキストは WebGL を実装しているブラウザーでのみ使用できます。

`HTMLCanvasElement.toDataURL()`

`type` 引数で指定した形式（既定では `png`）で画像を表現した data-URL を返します。返す画像の解像度は 96dpi です。

`HTMLCanvasElement.toBlob()`

キャンパスに格納する画像を表す `Blob` オブジェクトを作成します。このファイルは、ユーザーエージェントの判断で、ディスクにキャッシュされたり、メモリーに格納されたりすることがあります。

`HTMLCanvasElement.transferControlToOffscreen()`

`OffscreenCanvas` (en-US) オブジェクトへの制御権を、メインスレッドまたはワーカーへ移譲します。

イベント
----

これらのイベントは、`addEventListener()` を使用して待ち受けしてください。

`contextlost` 
Experimental

ユーザーエージェントが `CanvasRenderingContext2D` または `OffscreenCanvasRenderingContext2D` コンテキストに関連付けられたバッキングストレージが失われたことを検出した場合に発行されます。

`contextrestored` 
Experimental

ユーザーエージェントが `CanvasRenderingContext2D` または `OffscreenCanvasRenderingContext2D` コンテキストの復元に成功した場合に発行されます。

`webglcontextcreationerror`

ユーザーエージェントが `WebGLRenderingContext` または `WebGL2RenderingContext` コンテキストを作成することができない場合に発行されます。

`webglcontextlost`

ユーザーエージェントが `WebGLRenderingContext` または `WebGL2RenderingContext` オブジェクトに関連付けられた描画バッファーが失われたことを検出した場合に発行されます。

`webglcontextrestored`

ユーザーエージェントが `WebGLRenderingContext` または `WebGL2RenderingContext` オブジェクトの描画バッファーを復元する場合に発行されます。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlcanvaselement |

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

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

関連情報
----

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

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

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

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

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

WebUSB API の **`USB`** インターフェイスは、ウェブページから USB デバイスを検出し、接続するための属性とメソッドを提供します。

`USB` オブジェクトにアクセスするためには、`navigator.usb` (en-US) を使用します。

USB インターフェイスは、`EventTarget` を継承します。

EventTarget

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

なし

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

`USB.getDevices()` 
Experimental

接続されたペア設定済みのデバイスを表す `USBDevice` の配列で解決する `Promise` を返します。

`USB.requestDevice()` 
Experimental

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

イベント
----

`connect` 
Experimental

ペア設定済みのデバイスが接続された時、発火します。

`disconnect` 
Experimental

ペア設定済みのデバイスが切断された時、発火します。

仕様書
---

| Specification |
| --- |
| WebUSB API # usb |

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

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