recursal/MDN huggingface dataset:
HTMLBaseElement
===============

**`HTMLBaseElement`** インターフェイスは、文書の基底 URI を持ちます。このオブジェクトは `HTMLElement` インターフェイスで定められているすべてのプロパティとメソッドを継承します。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLBaseElement.href`

文字列で、 HTML の `href` 属性を反映し、文書内の相対 URL の基底 URL を保持します。

`HTMLBaseElement.target` (en-US)

文字列で、 HTML の `target` 属性を反映し、要素にターゲットとなる参照先が指定されなかった場合の既定のターゲットとなる閲覧コンテキストまたはフレームを保持します。

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

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlbaseelement |

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

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

関連情報
----

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

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

Gamepad API の **`GamepadHapticActuator`** インターフェイスは、ユーザーに触覚フィードバックを提供するように設計されたコントローラー内のハードウェア (可能な場合) を表し、最も一般的には振動ハードウェアです。

このインターフェイスには、 `Gamepad.hapticActuators` プロパティからアクセスできます。

プロパティ
-----

`GamepadHapticActuator.type` 読取専用 

触覚ハードウェアのタイプを表す列挙型を返します。

メソッド
----

`GamepadHapticActuator.pulse()` 読取専用 

指定した期間、特定の強度でハードウェアパルスを作成します。

例
-

TBD.

仕様書
---

| Specification |
| --- |
| Gamepad Extensions # gamepadhapticactuator-interface |

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

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

関連情報
----

* Gamepad API
DOMQuad
=======

`DOMQuad` は任意の四角形の角を定義する 4 つの `DOMPoint` の集合です。 `DOMQuad` を返すことで、 `getBoxQuads()` は任意の 2D または 3D 変換を表示している場合でも正確な情報を返すことができます。便利な `bounds` 属性があり、軸に沿った長方形が欲しい場合に `DOMRectReadOnly` を返します。

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

`DOMQuad()`

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

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

p1,p2,p3,p4 読取専用 

それぞれ `DOMPoint` オブジェクトで、 `DOMQuad` オブジェクトの 4 つの角のそれぞれに対応します。

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

`DOMQuad.fromRect()`

渡された座標の集合に基づいて新しい `DOMQuad` オブジェクトを返します。

`DOMQuad.fromQuad()`

渡された座標の集合に基づいて新しい `DOMQuad` オブジェクトを返します。

`DOMQuad.getBounds()`

`DOMQuad` オブジェクトの座標と寸法を持つ `DOMRect` オブジェクトを返します。

`DOMQuad.toJSON()`

`DOMQuad` オブジェクトの JSON 表現を返します。

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # DOMQuad |

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

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

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
**`HTMLSlotElement`** はシャドウ DOM API のインターフェイスで、 HTML の `<slot>` 要素の名前と割り当てられたノードにアクセスできるようにします。

EventTarget

Node

Element

HTMLElement

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

`HTMLSlotElement.name`

文字列で、スロットの名前を取得または設定するために使用します。

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

`HTMLSlotElement.assign()`

このスロットに手動で割り当てられたノードを、指定されたノードに設定します。

`HTMLSlotElement.assignedNodes()`

このスロットに割り当てられた一連のノードを返し、`flatten` オプションが `true` に設定されていた場合は、このスロットの子孫である他のスロットに割り当てられたノードも返します。割り当てられたノードが見つからない場合は、スロットの代替コンテンツを返します。

`HTMLSlotElement.assignedElements()`

このスロットに割り当てられた一連の要素を返します (それ以外のノードは返しません)。`flatten` オプションが `true` に設定されていた場合は、このスロットの子孫である他のスロットに割り当てられた要素も返します。割り当てられたノードが見つからない場合は、スロットの代替コンテンツを返します。

イベント
----

`slotchange`

スロットに含まれるノードが変更されたときに `HTMLSlotElement` インスタンス (`<slot>` 要素) に発生します。

例
-

以下のスニペットは、 slotchange の例からとりました (ライブでも確認)。


```js
let slots = this.shadowRoot.querySelectorAll("slot");
slots[1].addEventListener("slotchange", (e) => {
  let nodes = slots[1].assignedNodes();
  console.log(
    `Element in Slot "${slots[1].name}" changed to "${nodes[0].outerHTML}".`,
  );
});
```


ここではすべてのスロットの参照を取得し、テンプレート内の 2 番目のスロットに slotchange イベントリスナーを追加します。 — これが例の中でコンテンツの変更を追跡します。

スロットの変更の中で要素が挿入されるたびに、コンソールにどのスロットが変更されたか、スロット内の新しいノードは何であるかをログ出力します。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlslotelement |

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

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

**`SVGGraphicsElement`** インターフェイスは、直接グループにグラフィックを描画することを主な目的とした SVG 要素を表します。

**メモ:** このインターフェイスは SVG 2 で導入され、 SVG 1.1 で導入された `SVGLocatable` および `SVGTransformable` インターフェイスを置き換えています。

プロパティ
-----

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

`SVGGraphicsElement.transform` 読取専用 

`SVGAnimatedTransformList` (en-US) で、指定された要素の `transform` プロパティおよび関連する `transform` 属性の計算値を反映します。

メソッド
----

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

`SVGGraphicsElement.getBBox()`

`DOMRect` で、現在の要素の計算上の囲みボックスを返します。

`SVGGraphicsElement.getCTM()`

`DOMMatrix` で、現在の要素の座標系をその SVG ビューポートの座標系に変換する行列を返します。

`SVGGraphicsElement.getScreenCTM()`

`DOMMatrix` で、現在の要素の座標系を SVG 文書フラグメントの SVG ビューポートの座標系に変換する行列を返します。

仕様書
---

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGGraphicsElement |

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

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

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

**メモ:** このトピックでは、標準規格で定義されている `HTMLEmbedElement` インターフェイスについて説明します。それ以前の、標準化されていない版のインターフェイスは扱いません。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLEmbedElement.align` 
非推奨

列挙型のプロパティを表す文字列で、要素の内容を周囲のコンテキストから見てどう配置するかを示します。指定可能な値は `"left"`, `"right"`, `"center"`, `"justify"` です。

`HTMLEmbedElement.height` (en-US)

文字列で HTML の `height` 属性を反映しており、リソースが表示される高さが入ります。

`HTMLEmbedElement.name` 
非推奨

文字列で、埋め込まれたオブジェクトの名前を表します。

`HTMLEmbedElement.src`

文字列で、HTML の `src` 属性を反映しており、リソースの場所が入ります。

`HTMLEmbedElement.type`

文字列で、HTML の `type` 属性を反映しており、リソースの型が入ります。

`HTMLEmbedElement.width` (en-US)

文字列で、HTML の `width` 属性を反映しており、リソースが表示される幅が入ります。

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

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlembedelement |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: `<embed>`
ファイルとディレクトリー項目 API
==================

ファイルとディレクトリー項目 API (File and Directory Entries API) は、ウェブアプリケーションが移動してファイルにアクセスできるローカルファイルシステムをシミュレートします。サンドボックス化された仮想的なファイルシステムで、ファイルやディレクトリーの読み書きや作成を行うアプリを開発することができます。

ファイルシステムへのアクセス権の取得
------------------

仕様の現在の草案で定義されているファイルシステムへのアクセスを取得する方法は 2 つあります。

* ドラッグ＆ドロップで `drop` イベントを扱う際、 `DataTransferItem.webkitGetAsEntry()` を呼び出すとドロップされたアイテムの `FileSystemEntry` (en-US) を取得することができます。結果が `null` でなかった場合、これはドロップされたファイルまたはディレクトリーであり、ファイルシステム呼び出しを使用して取り扱うことができます。
* `HTMLInputElement.webkitEntries` プロパティでは、現在選択されているファイルの `FileSystemFileEntry` オブジェクトにアクセスすることができますが、これはファイル選択へドラッグ＆ドロップされた場合に限られます（Firefox バグ 1326031）。 `HTMLInputElement.webkitdirectory` が `true` である場合、 `<input>` 要素はディレクトリーピッカーとなり、それぞれの選択されたディレクトリーの `FileSystemDirectoryEntry` オブジェクトを取得できます。
インターフェイス
--------

ファイルとディレクトリー項目 API には以下のインターフェイスがあります。

`FileSystem`

ファイルシステムを表します。

`FileSystemEntry` (en-US)

ファイルシステムにおける単一の項目を表現する基本インターフェイス。ファイルやディレクトリーを表現する他のインターフェイスによって実装される。

`FileSystemFileEntry`

ファイルシステム内の単一のファイルを表します。

`FileSystemDirectoryEntry`

ファイルシステム内の単一のディレクトリーを表します。

`FileSystemDirectoryReader` (en-US)

`FileSystemDirectoryEntry.createReader()` (en-US) を呼び出すことで生成され、このインターフェイスはディレクトリーの内容を読み取る機能を提供します。

仕様書
---

| Specification |
| --- |
| File and Directory Entries API # api-domfilesystem |

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

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

関連情報
----

* ファイルとディレクトリー項目 API の紹介
* ファイルとディレクトリー項目 API の Firefox での対応
チャンネルメッセージング API
================

**チャンネルメッセージング API** (Channel Messaging API) を使用すると、同じ文書に添付された異なる閲覧コンテキストで実行される 2 つの別々のスクリプト（2 つの IFrame、メイン文書と IFrame、`SharedWorker` を介した 2 つの文書、 2 つのワーカーなど）で直接通信し、両端にポートを持つ双方向チャンネル（またはパイプ）を介して相互にメッセージをやり取りできます。

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

チャンネルメッセージングの概念と使用方法
--------------------

メッセージチャンネルは `MessageChannel()` コンストラクターを使用して作成します。 作成すると、チャンネルの 2 つのポートは `MessageChannel.port1` プロパティおよび `MessageChannel.port2` プロパティを介してアクセスできます（どちらのプロパティも `MessagePort` オブジェクトを返します）。 チャンネルを作成したアプリは `port1` を使用し、ポートの反対側のアプリは `port2` を使用します — `port2` にメッセージを送信し、`window.postMessage` を使用して 2 つの引数（送信するメッセージと所有権を移管するオブジェクト、この場合はポート自体）でポートを他の閲覧コンテキストに移管します。

これらの移譲可能オブジェクトが転送されると、それまで属していたコンテキストでは使えなくなります。ポートは、送信された後、元のコンテキストでは使用することができなくなります。

もう一方の閲覧コンテキストは、 `onmessage` を使用してメッセージを待ち受けし、イベントの `data` 属性を使用してメッセージの内容を取得することができます。 `MessagePort.postMessage` を使用して元の文書にメッセージを送り返すことで応答できます。

チャンネルへのメッセージ送信を停止したい場合は、`MessagePort.close` を呼び出してポートを閉じることができます。

この API の使用方法の詳細については、チャンネルメッセージングの使用を参照してください。

チャンネルメッセージングのインターフェイス
---------------------

`MessageChannel`

メッセージを送信するための新しいメッセージチャンネルを作成します。

`MessagePort`

メッセージチャンネルのポートを制御して、一方のポートからメッセージを送信し、もう一方のポートで到着するのを待ち受けします。

`PortCollection`

`MessagePort` の配列。 同時に複数のポートにメッセージをブロードキャストできるようにするための実験的な解決策。

例
-

* Github でチャンネルメッセージングの基本的なデモ（ライブで実行）を公開しました。 これはページと埋め込まれた `<iframe>` の間の本当に簡単な単一メッセージ転送を示します。
* また、メインページと IFrame の間で複数のメッセージを送信することができる、もう少し複雑な設定を示すマルチメッセージデモ（ライブで実行）を見ることもできます。
### 仕様書

| Specification |
| --- |
| HTML Standard # channel-messaging |

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

### `MessageChannel`

### api.MessageChannel

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

### api.MessagePort

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

### `MessagePort`

### api.MessageChannel

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

### api.MessagePort

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

関連情報
----

* チャンネルメッセージングの使用
* ウェブワーカー API
* ブロードキャストチャンネル API
HTMLTrackElement
================

**`HTMLTrackElement`** インターフェイスは DOM 内にある HTML の `<track>` 要素を表します。この要素は `<audio>` または `<video>` の子として使用され、クローズドキャプションや字幕などの情報を含むテキストトラックを指定することが可能です。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLTrackElement.kind`

HTML の `kind` 属性を反映した文字列で、使用する予定のテキストトラックを示します。可能な値は `subtitles`, `captions`, `descriptions`, `chapters`, `metadata` です。

`HTMLTrackElement.src`

HTML の `src` 属性を反映した文字列で、テキストトラックデータの在りかを示します。

`HTMLTrackElement.srclang`

HTML の `srclang` 属性を反映した文字列で、テキストのトラックデータの言語を示します。

`HTMLTrackElement.label`

HTML の `label` 属性を反映した文字列で、トラックのユーザーが読めるタイトルを示します。

`HTMLTrackElement.default`

`default` 属性を反映した論理値で、ユーザーの環境設定で他のトラックがより適切であることが示されていない場合、そのトラックを有効にすることを示します。

`HTMLTrackElement.readyState` 読取専用 

トラックの準備状態を示す `unsigned short` を返します。

| 定数 | 値 | 説明 |
| --- | --- | --- |
| `NONE` | 0 | テキストトラックのキューが得られていないことを示します。 |
| `LOADING` | 1 | テキストトラックが読み込まれ、今のところ致命的なエラーはないことを示します。パーサーによって、さらにキューがトラックに追加されるかもしれません。 |
| `LOADED` | 2 | テキストトラックが致命的なエラーなしに読み込まれたことを示します。 |
| `ERROR` | 3 | テキストトラックが有効であったが，ユーザーエージェントがそれを取得しようとしたとき，これが何らかの形で失敗したことを示す。一部または全部のキューが欠落している可能性が高く、取得できない。 |

`HTMLTrackElement.track` 読取専用 

track 要素のテキストトラックデータである `TextTrack` を返します。

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

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

イベント
----

*`<track>` 要素では、親である `HTMLElement` で発生する可能性があるイベントに加えて、以下のイベントが発生する可能性があります。*

`cuechange`

 基礎となる `TextTrack` が、現在表示されているキューを変更したときに送られます。このイベントは常に `TextTrack` に送られますが、もし `HTMLTrackElement` がトラックと関連付けられていれば、そちらにも送られます。
 また、 `oncuechange` イベントハンドラーを使用して、このイベントのハンドラーを確立することができます。


使用上のメモ
------

### トラックのテキストリソースの読み込み

トラックの `mode` が初期状態で `disabled` になっていると、テキストトラックの実際のキューを記述した WebVTT や TTML データは読み込まれません。もし `<track>` が設定された後にトラックに対して何らかの処理を行う必要がある場合は、代わりにトラックの `mode` が `hidden` （最初からユーザーに表示したくない場合）か `showing` （最初にトラックを表示する場合）のどちらかになるようにしなければなりません。モードは後で好きなように変更することができます。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmltrackelement |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: `<track>`
CSS プロパティと値 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
**CSS プロパティと値 API**（CSS Houdini API の傘下）により、 `CSS カスタムプロパティ`の登録において、開発者は明示的に、プロパティの型チェック、既定値、プロパティの値を継承の有無の登録を行うことができます。

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

`CSS.registerProperty`

ブラウザーが `CSS カスタムプロパティ`を構文解析する方法を定義します。 JavaScript の `CSS.registerProperty` を介してこのインターフェイスにアクセスします。

`@property`

ブラウザーが `CSS カスタムプロパティ`を構文解析する方法を定義します。 CSS の `@property` アットルールを介してこのインターフェイスにアクセスします。

例
-

次の例では、 `CSS カスタムプロパティ` として `--my-prop` を `CSS.registerProperty` によって登録します。 `--my-prop` は CSS 色構文を使用し、既定値として `#c0ffee` があり、値を継承しないようにします。


```js
window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});
```


CSS では次の `@property` アットルールを使用して、同じ登録を行うことができます。


```css
@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```

仕様書
---

| Specification |
| --- |
| CSS Properties and Values API Level 1 # the-css-property-rule-interface |
| CSS Properties and Values API Level 1 # the-registerproperty-function |

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

### api.CSSPropertyRule

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

### api.CSS.registerProperty\_static

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

関連情報
----

* CSS プロパティと値 API の使用
* CSS 描画 API
* CSS 型付きオブジェクトモデル
* CSS Houdini
IDBCursorWithValue
==================

IndexedDB API の **`IDBCursorWithValue`** インターフェイスは、データベース内の複数のレコードを走査・反復するのに用いるカーソルを表します。`value` プロパティがある以外は、`IDBCursor` と同じです。

カーソルは、反復対象のインデックスまたはオブジェクトストアを表す反復元を持ちます。さらに、範囲内での位置を持ち、レコードキーの順番の昇順もしくは降順に動きます。カーソルにより、アプリケーションはカーソルの範囲の全レコードを非同期で処理できます。

同時に保持できるカーソルの数は無制限です。あるカーソルを表すとき、常に同じ `IDBCursorWithValue` オブジェクトを取得できます。操作は対象のインデックスまたはオブジェクトストアで行われます。

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

IDBCursor

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

親インターフェイスの `IDBCursor` からメソッドを継承します。

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

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

`IDBCursorWithValue.value` 読取専用 

現在のカーソルの値を返します。

例
-

この例では、トランザクションを作成し、オブジェクトストアを取得し、カーソルを用いてオブジェクトストア内の全レコードを走査します。カーソルを用いる場合、キーでデータを選択する必要は無く、単に全部を取得できます。また、ループ中のそれぞれの繰り返しにおいて、カーソルオブジェクトが指している現在のレコードのデータを `cursor.value.foo` で取得できます。動く例全体は、IDBCursor example を参照してください。(動く例を見る)


```js
function displayData() {
  const transaction = db.transaction(["rushAlbumList"], "readonly");
  const objectStore = transaction.objectStore("rushAlbumList");

  objectStore.openCursor().onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const listItem = document.createElement("li");
      listItem.textContent = `${cursor.value.albumTitle}, ${cursor.value.year}`;
      list.appendChild(listItem);

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

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-idbcursorwithvalue② |

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

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

関連情報
----

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

**エンコーディング API** は、様々な文字エンコーディングのテキストを扱うメカニズムを提供します。レガシーな UTF-8 以外のエンコーディングも含みます。

この API は、`TextDecoder`、`TextEncoder`、`TextDecoderStream`、`TextEncoderStream` の 4 つのインターフェイスを提供します。

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

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

* `TextDecoder`
* `TextEncoder`
* `TextDecoderStream`
* `TextEncoderStream`
仕様書
---

| Specification |
| --- |
| Encoding Standard # interface-textdecoder |
| Encoding Standard # interface-textencoder |
| Encoding Standard # interface-textencoderstream |
| Encoding Standard # interface-textdecoderstream |

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

### api.TextDecoder

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

### api.TextEncoder

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

### api.TextEncoderStream

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

### api.TextDecoderStream

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

関連情報
----

* エンコーディング API のエンコーディング - テキストをデコードする際に対応していなければならないエンコーディング。
* 対応していないブラウザーでこのインターフェイスを使用することができるポリフィル。
MediaMetadata
=============

**`MediaMetadata`** はメディアセッション API のインターフェイスで、ウェブページがプラットフォーム UI に表示するためのリッチメディアメタデータを提供することができます。

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

`MediaMetadata()`

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

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

`MediaMetadata.title`

再生されるメディアのタイトルを返したり設定したりします。

`MediaMetadata.artist`

再生されるメディアのアーティスト、グループ、作者の名前を返したり設定したりします。

`MediaMetadata.album`

再生されるメディアのアルバムまたはコレクションの名前を返したり設定したりします。

`MediaMetadata.artwork`

再生しているメディアに関連付けられた画像の配列を返したり設定したりします。

例
-

以下の例では、ブラウザーとの互換性を調べ、メディアセッションの現在のメタデータを設定しています。


```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",
      },
    ],
  });
}
```

仕様書
---

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

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

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

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

**`SpeechRecognitionEvent`** はウェブ音声 API のインターフェイスで、 `result` および `nomatch` イベントのイベントオブジェクトを表し、中間または最終の音声認識結果に関連するすべてのデータを保持します。

Event

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

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

`SpeechRecognitionEvent.emma` 読取専用  
非推奨

Non-standard

結果の EMMA (Extensible MultiModal Annotation markup language) - XML - 表現を返します。

`SpeechRecognitionEvent.interpretation` 読取専用  
非推奨

Non-standard

ユーザーが言ったことの意味づけを返します。

`SpeechRecognitionEvent.resultIndex` 読取専用 

実際に変更された `SpeechRecognitionResultList` (en-US) 「配列」の中で最もインデックス値の小さい結果を返します。

`SpeechRecognitionEvent.results` 読取専用 

現在のセッションのすべての音声認識結果を表す `SpeechRecognitionResultList` (en-US) オブジェクトを返します。

例
-

このコードは Speech color changer の例から取得したものです。


```js
recognition.onresult = (event) => {
  // The SpeechRecognitionEvent results property returns a SpeechRecognitionResultList object
  // The SpeechRecognitionResultList object contains SpeechRecognitionResult objects.
  // It has a getter so it can be accessed like an array
  // The first [0] returns the SpeechRecognitionResult at position 0.
  // Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects that contain
  // individual results.
  // These also have getters so they can be accessed like arrays.
  // The second [0] returns the SpeechRecognitionAlternative at position 0.
  // We then return the transcript property of the SpeechRecognitionAlternative object
  const color = event.results[0][0].transcript;
  diagnostic.textContent = `Result received: ${color}.`;
  bg.style.backgroundColor = color;
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # speechreco-event |

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

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

関連情報
----

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

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

**`AuthenticatorAttestationResponse`** は Web Authentication API のインターフェイスで、 `CredentialsContainer.create()` に `PublicKeyCredential` を渡すと返されます。そして、生成された新しいキーペアの暗号化信頼ルートを提供します。このレスポンスは認証情報の生成を完了させるために、信頼されている側のサーバーに送信されます。

このインターフェイスは `AuthenticatorResponse` を継承しています。

**メモ:** このインターフェイスは最上位のコンテキストに限定されています。 `<iframe>` 要素の中で使用しても、何も効果がありません。

プロパティ
-----

`AuthenticatorAttestationResponse.clientDataJSON` 安全なコンテキスト用読取専用 

認証のためのクライアントデータで、オリジンやチャレンジです。 `clientDataJSON` プロパティは `AuthenticatorResponse` から継承しています。

`AuthenticatorAttestationResponse.attestationObject` (en-US) 安全なコンテキスト用読取専用 

`ArrayBuffer` で、新しく生成されたキーペアのための認証機器のデータとアテステーションステートメントが入ります。

メソッド
----

`AuthenticatorAttestationResponse.getTransports()` (en-US)安全なコンテキスト用

文字列の `Array` で、認証機器がどの転送方法 (`usb` や `nfc` など) に対応していると信じられるかを記述します。情報が利用できない場合は、配列が空になることがあります。

例
-


```js
var publicKey = {
  challenge: /\* from the server \*/,
  rp: {
    name: "Example CORP",
    id  : "login.example.com"
  },
  user: {
    id: new Uint8Array(16),
    name: "jdoe@example.com",
    displayName: "John Doe"
  },
  pubKeyCredParams: [
    {
      type: "public-key",
      alg: -7
    }
  ]
};

navigator.credentials.create({ publicKey })
  .then(function (newCredentialInfo) {
    var response = newCredentialInfo.response;
    // Do something with the response
    // (sending it back to the relying party server maybe?)
  }).catch(function (err) {
     console.error(err);
  });
```

仕様書
---

| Specification |
| --- |
| Web Authentication: An API for accessing Public Key Credentials - Level 3 # authenticatorattestationresponse |

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

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

関連情報
----

* `AuthenticatorAssertionResponse`: 既存の認証情報を受け取る際にレスポンスの種類のインターフェイス
* `AuthenticatorResponse`: 親インターフェイス
Screen
======

`Screen` インターフェイスは画面を表し、通常は、現在のウィンドウが描画されている画面であり、 `window.screen` を使用して取得されます。

なお、ブラウザーはブラウザーのウィンドウの中心がどの画面にあるかを検出することで、報告する現在の画面がどれかを判断します。

プロパティ
-----

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

`Screen.availTop` 
Non-standard

永続的または半永続的なユーザーインターフェイス機能に割り当てられていない最初のピクセルの y 座標を指定します。

`Screen.availLeft` 
Non-standard

スクリーンの左端からの、最初の利用可能なピクセルの値を返します。

`Screen.availHeight`

Windows のタスクバーなど、オペレーティングシステムが表示する永続的または半永続的なユーザーインターフェイス機能を除いた画面の高さをピクセル単位で指定します。

`Screen.availWidth`

ウィンドウで利用可能な水平方向の空間の合計をピクセルで返します。

`Screen.colorDepth`

画面の色深度を返します。

`Screen.height`

画面の高さをピクセルで返します。

`Screen.left` 
Non-standard

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

`Screen.orientation`

現在の画面の向きを返します。

`Screen.pixelDepth`

画面のピット深度を取得します。

`Screen.top` 
Non-standard

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

`Screen.width`

画面の幅を返します。

`Screen.mozEnabled` 
Non-standard

非推奨

論理値です。 `false` に設定すると、端末の画面がオフになります。

`Screen.mozBrightness` 
Non-standard

非推奨

端末の画面の明るさをコントロールします。0 から 1.0 までの倍精度実数値で指定します。

メソッド
----

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

`Screen.lockOrientation` 
Non-standard

非推奨

画面の向きをロックします (全画面かインストールしたアプリでのみ動作します)

`Screen.unlockOrientation` 
Non-standard

非推奨

画面の向きのロックを解除します。 (全画面時かインストールしたアプリでのみ動作します)

イベント
----

`orientationchange` 
非推奨

画面の向きが変化したときに発生します。

例
-


```js
if (screen.pixelDepth < 8) {
  // 色数の少ないバージョンのページを使う
} else {
  // 通常の色数のページを使う
}
```

仕様書
---

| Specification |
| --- |
| CSSOM View Module # the-screen-interface |

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

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