recursal/MDN huggingface dataset:
MIDIPort
========

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

Web MIDI API の **`MIDIPort`** インターフェイスは、MIDI の入力ポートや出力ポートを表します。

`MIDIPort` のインスタンスは新しい MIDI デバイスが接続された時に生成されます。そのため、コンストラクターはありません。

EventTarget

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

`MIDIPort.id` 読取専用 

ポートの一意な ID を表す文字列を返します。

`MIDIPort.manufacturer` 読取専用 

ポートの製造元を表す文字列を返します。

`MIDIPort.name` 読取専用 

ポートのシステム名を表す文字列を返します。

`MIDIPort.type` 読取専用 

ポートの種類を表す文字列を返します。以下のいずれかです。

`"input"`

この `MIDIPort` は入力ポートです。

`"output"`

この `MIDIPort` は出力ポートです。


`MIDIPort.version` 読取専用 

ポートのバージョンを表す文字列を返します。

`MIDIPort.state` 読取専用 

ポートの状態を表す文字列を返します。以下のいずれかです。

`"disconnected"`

この `MIDIPort` が表すデバイスはシステムから切断されています。

`"connected"`

この `MIDIPort` が表すデバイスは現在接続されています。


`MIDIPort.connection` 読取専用 

ポートの接続状態を表す文字列を返します。以下のいずれかです。

`"open"`

この `MIDIPort` が表すデバイスは既に開かれており、利用可能です。

`"closed"`

この `MIDIPort` が表すデバイスは開かれていないか、閉じられた後です。

`"pending"`

この `MIDIPort` が表すデバイスは開かれていますが、その後切断されました。


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

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

`MIDIPort.open()`

この `MIDIPort` に接続されている MIDI デバイスを明示的に利用可能にし、ポートへのアクセスに成功したら解決する `Promise` を返します。

`MIDIPort.close()`

この `MIDIPort` に接続されている MIDI デバイスを利用不可能にし、`state` を `"open"` から `"closed"` に変更します。ポートを閉じる操作が完了したら解決する `Promise` を返します。

イベント
----

`MIDIPort.statechange_event`

既存のポートの状態または接続状態が変化した時呼ばれます。

例
-

### ポートとその情報を列挙する

以下の例では入力ポートと出力ポートを列挙し、それらの情報を `MIDIPort` のプロパティを用いて表示します。


```js
function listInputsAndOutputs(midiAccess) {
  for (const entry of midiAccess.inputs) {
    const input = entry[1];
    console.log(
      `入力ポート [type:'${input.type}'] id:'${input.id}' manufacturer: '${input.manufacturer}' name: '${input.name}' version: '${input.version}'`,
    );
  }

  for (const entry of midiAccess.outputs) {
    const output = entry[1];
    console.log(
      `出力ポート [type:'${output.type}'] id: '${output.id}' manufacturer: '${output.manufacturer}' name: '${output.name}' version: '${output.version}'`,
    );
  }
}
```

### 利用可能なポートを選択リストに入れる

以下の例では、ユーザーが使用したいデバイスを選択できるように、入力ポートのリストを受け取ってそれらを選択リストに入れます。


```js
inputs.forEach((port, key) => {
  const opt = document.createElement("option");
  opt.text = port.name;
  document.getElementById("inputportselector").add(opt);
});
```

仕様書
---

| Specification |
| --- |
| Web MIDI API # MIDIPort |

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

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

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

**`DOMError`** インターフェイスは、エラー名を含んでいるエラーオブジェクトを表します。

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

`DOMError.name` 読取専用  
非推奨

文字列で、このエラーの型名のひとつを返します（下記参照）。

`DOMError.message` 読取専用  
非推奨

文字列で、このエラーの型の名前に関連付けられたメッセージまたは説明を返します。

エラーの型
-----

| 型 | 説明 |
| --- | --- |
| `IndexSizeError` | 許可された範囲内にありません（例えば、`range` オブジェクト内で発生します）。 |
| `HierarchyRequestError` | ノードのツリー階層指定が正しくありません。 |
| `WrongDocumentError` | オブジェクトが誤った `document` 内にあります。 |
| `InvalidCharacterError` | 文字列が不正な文字を含んでいます。 |
| `NoModificationAllowedError` | オブジェクトは変更不可能です。 |
| `NotFoundError` | オブジェクトを見つけられませんでした。 |
| `NotSupportedError` | その操作に対応していません。 |
| `InvalidStateError` | オブジェクトが不正な状態です。 |
| `SyntaxError` | 文字列が期待されたパターンに一致しませんでした。 |
| `InvalidModificationError` | オブジェクトはこの方法では変更不可能です。 |
| `NamespaceError` | この操作は XML の名前空間により許可されていません。 |
| `InvalidAccessError` | そのオブジェクトは指定した操作または引数に対応していません。 |
| `TypeMismatchError` | オブジェクトの型が期待された型と一致しません。 |
| `SecurityError` | 操作が安全ではありません。 |
| `NetworkError` | ネットワークエラーが発生しました。 |
| `AbortError` | この操作が中止されました。 |
| `URLMismatchError` | 指定した URL がもう 1 つの URL に一致しません。 |
| `QuotaExceededError` | クォータの容量を超えました。 |
| `TimeoutError` | 操作がタイムアウトしました。 |
| `InvalidNodeTypeError` | そのノードが不正、あるいは、この命令では不正な祖先ノードを持っています。 |
| `DataCloneError` | そのオブジェクトはクローン不可能です。 |

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

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

関連情報
----

* `DOMException`
MediaStream
===========

**`MediaStream`** インターフェイスは、メディアコンテンツのストリームを表します。ストリームは動画や音声など複数の**トラック**から成ります。それぞれのトラックは `MediaStreamTrack` のインスタンスとして定義されます。

`MediaStream` オブジェクトを取得するには、コンストラクターを使用するか `MediaDevices.getUserMedia()`, `MediaDevices.getDisplayMedia()`, `HTMLCanvasElement.captureStream()`　などの関数を呼び出すかします。

ユーザーエージェントによっては、このインターフェイスを `CanvasCaptureMediaStreamTrack` (en-US) のようにサブクラス化して、より詳細な情報や機能を提供しています。

EventTarget

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

`MediaStream()`

新しい MediaStream オブジェクトを作成して返します。空のストリーム、既存のストリームに基づいたストリーム、 (`MediaStreamTrack` オブジェクトの配列として指定して) 特定のトラックのリストを含むストリームを作成することができます。

プロパティ
-----

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

`MediaStream.active` 読取専用 

論理値で、 `true` は `MediaStream` がアクティブな時、 `false` はそうでない場合です。

`MediaStream.id` 読取専用 

`DOMString` で 36 文字のオブジェクトの汎用一意識別子 (UUID) を表す文字列が入ります。

メソッド
----

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

`MediaStream.addTrack()`

引数で指定された `MediaStreamTrack` のコピーを格納します。トラックが既に `MediaStream` オブジェクトに追加されていた場合は、何も起こりません。


`MediaStream.clone()`

`MediaStream` オブジェクトの複製を返します。ただし、複製は固有の `id` の値を持ちます。


`MediaStream.getAudioTracks()`

`MediaStreamTrack` オブジェクトのリストで、 `MediaStream` オブジェクトに格納されているものの中で `kind` 属性が `audio` に設定されているものを返します。順序は未定義であり、ブラウザーによって異なるばかりでなく、呼び出し毎に異なる可能性もあります。


`MediaStream.getTrackById()`

引数 `trackid` で与えられた ID を持つトラックを返します。引数が与えられなかった場合や、その ID を持つトラックが存在しなかった場合は、 `null` を返します。複数のトラックが同じ ID を持っている場合は、最初の一つを返します。

`MediaStream.getTracks()`

`MediaStreamTrack` オブジェクトのリストで、 MediaStream オブジェクトに格納されているものをすべて、 `kind` 属性の値に関わらず返します。順序は未定義であり、ブラウザーによって異なるばかりでなく、呼び出し毎に異なる可能性もあります。


`MediaStream.getVideoTracks()`

`MediaStreamTrack` オブジェクトのリストで、 MediaStream オブジェクトに格納されているものの中で kind 属性が video に設定されているものを返します。順序は未定義であり、ブラウザーによって異なるばかりでなく、呼び出し毎に異なる可能性もあります。


`MediaStream.removeTrack()` (en-US)

引数として与えられた `MediaStreamTrack` を除去します。トラックが `MediaStream` オブジェクトに含まれていなかった場合は、何もしません。

イベント
----

`addtrack`

新しい `MediaStreamTrack` オブジェクトが追加されたときに発行されます。

`removetrack`

`MediaStreamTrack` オブジェクトが除去されたときに発行されます。


`active`

この MediaStream がアクティブになったときに発行されます。


`inactive`

この MediaStream がアクティブでなくなったときに発行されます。

仕様書
---

| Specification |
| --- |
| Media Capture and Streams # mediastream |

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

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

関連情報
----

* MediaStream 収録 API の使用
* WebRTC API
* ウェブオーディオ API
* `MediaStreamTrack`
HTMLSpanElement
===============

**`HTMLSpanElement`** インターフェイスは `<span>` 要素を表し、 `HTMLElement` から派生していますが、それ以外のプロパティやメソッドを追加していません。

プロパティ
-----

*このインターフェイスにはプロパティがありませんが、 `HTMLElement` からプロパティを継承しています。*

メソッド
----

*このインターフェイスにはメソッドがありませんが、 `HTMLElement` からメソッドを継承しています。*

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlspanelement |

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

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

関連情報
----

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

**`DOMRect`** は矩形の大きさと位置を記述します。

`DOMRect` が表すボックスの型は、それを返したメソッドやプロパティで指定されます。例えば、`Range.getBoundingClientRect()`は、そのようなオブジェクトを使用した範囲のコンテンツを囲む長方形を指定します。

親である `DOMRectReadOnly` から継承しています。

DOMRectReadOnly

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

`DOMRect()`

新しい `DOMRect` オブジェクトを作成します。

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

*`DOMRect` は親である `DOMRectReadOnly` からプロパティを継承しています。違いはそれらが読み取り専用でなくなることです。*

`DOMRectReadOnly.x`

この `DOMRect` の原点（ふつうは矩形の左上隅）の X 座標です。

`DOMRectReadOnly.y`

この `DOMRect` の原点（ふつうは矩形の左上隅）の Y 座標です。

`DOMRectReadOnly.width`

この `DOMRect` の幅です。

`DOMRectReadOnly.height`

この `DOMRect` の高さです。

`DOMRectReadOnly.top`

この `DOMRect` の上端の座標値を返します（ふつうは `y` と同じ、 `height` が負の数である場合は `y + height` と同じです）。

`DOMRectReadOnly.right`

この `DOMRect` の右端の座標値を返します（ふつうは `x + width` と同じ、 `width` が負の数である場合は `x` と同じです）。

`DOMRectReadOnly.bottom`

この `DOMRect` の下端の座標値を返します（ふつうは `y + height` と同じ、 `height` が負の数である場合は `y` と同じです）。

`DOMRectReadOnly.left`

この `DOMRect` の左端の座標値を返します（ふつうは `x` と同じ、 `width` が負の数である場合は `x + width` と同じです）。

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

*`DOMRect` には親である `DOMRectReadOnly` から継承した静的メソッドもあります。*

`DOMRect.fromRect()`

新しい `DOMRect` オブジェクトを指定した位置と寸法で作成します。

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

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

仕様書
---

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

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

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

関連情報
----

* `DOMPoint`
HTMLTimeElement
===============

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

EventTarget

Node

Element

HTMLElement

HTMLTimeElementプロパティ
-----

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

`HTMLTimeElement.dateTime`

文字列で、HTML の `datetime` 属性を反映し、機械可読な形式の日付と時刻の値を保持します。

メソッド
----

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmltimeelement |

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

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

関連情報
----

* このインターフェイスを実装する HTML 要素: `<time>`.
PerformanceObserver
===================

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

**`PerformanceObserver`** インターフェイスは、パフォーマンス測定イベントを監視し、ブラウザーのパフォーマンスタイムラインに記録されるものとして、新しいパフォーマンス項目の通知を受けるために使用されます。

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

`PerformanceObserver()`

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

静的プロパティ
-------

`PerformanceObserver.supportedEntryTypes` 読取専用 

ユーザーエージェントが対応している `entryType` 値の配列を返します。

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

`PerformanceObserver.observe()`

観測する項目型を設定します。パフォーマンスオブザーバーのコールバック関数は、指定した `entryTypes` のいずれかにパフォーマンス項目が記録されたときに呼び出されます。

`PerformanceObserver.disconnect()`

パフォーマンスオブザーバーコールバックがパフォーマンス項目を受け取るのを停止します。

`PerformanceObserver.takeRecords()`

パフォーマンスオブザーバーに格納されているパフォーマンス項目の現在のリストを空にして返します。

例
-

### PerformanceObserver の作成

 次の例では、 "mark" (`PerformanceMark`) および "measure" (`PerformanceMeasure`) イベントを監視する `PerformanceObserver` を作成します。
 `perfObserver` コールバックは `list` (`PerformanceObserverEntryList`) を提供し、監視しているパフォーマンス項目を取得することができます。


```js
function perfObserver(list, observer) {
  list.getEntries().forEach((entry) => {
    if (entry.entryType === "mark") {
      console.log(`${entry.name}'s startTime: ${entry.startTime}`);
    }
    if (entry.entryType === "measure") {
      console.log(`${entry.name}'s duration: ${entry.duration}`);
    }
  });
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["measure", "mark"] });
```

仕様書
---

| Specification |
| --- |
| Performance Timeline # dom-performanceobserver |

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

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

関連情報
----

* `MutationObserver`
* `ResizeObserver`
* `IntersectionObserver`
MediaQueryList
==============

**`MediaQueryList`** オブジェクトは文書に適用されているメディアクエリーの情報を格納し、文書の状態に対する即時かつイベントドリブンのマッチングに対応します。

`MediaQueryList` は `matchMedia()` を `window` オブジェクト上で呼び出すことで作成することができます。結果として得られるオブジェクトは、メディアクエリーの状態が変化したとき (つまり、メディアクエリーのテストが `true` の評価が開始または停止したとき) に、リスナーへの通知の送信を処理します。

これにより、定期的に値をポーリングするのではなく、文書を監視してメディアクエリーが変更されたときに検出することが可能になり、メディアクエリーの状態に基づいて文書にプログラム的に変更を加えることができるので、アダプティブデザインにとても便利です。

プロパティ
-----

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

`matches`読取専用 

`boolean` で、 `true` であれば `document` が現在メディアクエリーリストに一致しており、 `false` であればそうではありません。

`media`読取専用 

文字列で、シリアライズされたメディアクエリーを表します。

メソッド
----

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

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

`MediaQueryList` にコールバックを追加します。このコールバックは、メディアクエリーの状態 (リスト内のメディアクエリーと文書が一致するかどうか) が変化するたびに呼び出されます。このメソッドは、主に下位互換性のために存在します。可能であれば、代わりに `addEventListener()`を使用して `change` イベントを監視してください。

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

指定されたリスナーコールバックを、 `MediaQueryList` でメディアクエリーの状態が変化するたび、すなわち `MediaQueryList` に列挙されたメディアクエリーの一致・不一致の状態が変化するに呼び出されるコールバックから削除します。このメソッドは下位互換性のために保持されています。可能であれば、一般的に `removeEventListener()` を使用して、変更通知コールバックを削除してください (以前 `addEventListener()` を使用して追加されたものです)。

イベント
----

*以下のイベントは `MediaQueryList` オブジェクトに配信されます。*

`change`

文書に対してメディアクエリーを実行した結果が変更されたときに `MediaQueryList` に送信されます。例えば、メディアクエリーが `(min-width: 400px)` の場合、 `change` イベントが文書のビューポートの幅が 400px の閾値を通過するよう変更されるたびに発行されます。

例
-

このシンプルな例では、 `MediaQueryList` を作成し、メディアクエリーの状態が変化したときにそれを検出するリスナーを設定し、それがページの表示を変更するときにカスタム関数を実行します。


```js
const para = document.querySelector("p");
const mql = window.matchMedia("(max-width: 600px)");

function screenTest(e) {
  if (e.matches) {
    /\* the viewport is 600 pixels wide or less \*/
    para.textContent = "This is a narrow screen — less than 600px wide.";
    document.body.style.backgroundColor = "red";
  } else {
    /\* the viewport is more than 600 pixels wide \*/
    para.textContent = "This is a wide screen — more than 600px wide.";
    document.body.style.backgroundColor = "blue";
  }
}

mql.addEventListener("change", screenTest);
```


**メモ:** この例は GitHub にあります (ソースコードを参照、およびライブで実行)。

他の例は個別のプロパティやメソッドのページにあります。

仕様書
---

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

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

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

関連情報
----

* メディアクエリー
* プログラムによるメディアクエリーの評価
* `window.matchMedia()`
* `MediaQueryListListener` (en-US)
* `MediaQueryListEvent` (en-US)
* `Window.devicePixelRatio` の記事にも有益な例があります
CSSPageRule
===========

**`CSSPageRule`** は単一の CSS `@page` ルールを表します。

CSSRule

CSSGroupingRule

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

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

`CSSPageRule.selectorText`

このアットルールに関連付けられたページセレクターのテキストを表します。

`CSSPageRule.style` 読取専用 

このアットルールに関連付けられた宣言ブロックを返します。

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

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

例
-

このスタイルシートには単一の `@page` ルールがあるので、最初の（そして唯一の）返されるルールは `CSSPageRule` になります。


```css
@page {
  margin: 1cm;
}
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0]); // CSSPageRule
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # the-csspagerule-interface |

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

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

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

**`VRFrameData`** は WebVR API のインターフェイスで、 VR シーンの 1 つのフレームを描画するのに必要となるすべての情報を表現します。 `VRDisplay.getFrameData()` で構築します。

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

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

`VRFrameData()` 
非推奨

`VRFrameData` オブジェクトインスタンスを作成します。

プロパティ
-----

`VRFrameData.leftProjectionMatrix` 
非推奨
読取専用 

`Float32Array` 型で 4 行 4 列の行列であり、左目の描画に利用される射影を表します。

`VRFrameData.leftViewMatrix` 
非推奨
読取専用 

`Float32Array` 型で 4 行 4 列の行列であり、左目の描画に利用されるビュー変換を表します。

`VRFrameData.pose` 
非推奨
読取専用 

現在の `VRFrameData.timestamp` の値が示す時刻での、 `VRDisplay` の `VRPose` です。

`VRFrameData.rightProjectionMatrix` 
非推奨
読取専用 

`Float32Array` 型で 4 行 4 列の行列であり、右目の描画に利用される射影を表します。

`VRFrameData.rightViewMatrix` 
非推奨
読取専用 

`Float32Array` 型で 4 行 4 列の行列であり、右目の描画に利用されるビュー変換を表します。

`VRFrameData.timestamp` 
非推奨
読取専用 

定常的に増加するタイムスタンプ値であり、フレームが更新された時を表します。

例
-

例については `VRDisplay.getFrameData()` を参照してください。

仕様書
---

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

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

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

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

関連情報
----

* WebVR API
DeviceMotionEventRotationRate
=============================

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

**`DeviceMotionEventRotationRate`** は 端末方向イベントのインターフェイスで、端末が回転する 3 つの軸すべての速度に関する情報を提供します。

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

`DeviceMotionEventRotationRate.alpha` 読取専用 

Z 軸上の回転量を秒あたりの角度で表します。

`DeviceMotionEventRotationRate.beta` 読取専用 

X 軸上の回転量を秒あたりの角度で表します。

`DeviceMotionEventRotationRate.gamma` 読取専用 

Y 軸上の回転量を秒あたりの角度で表します。

仕様書
---

| Specification |
| --- |
| DeviceOrientation Event Specification # devicemotioneventrotationrate |

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

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

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

Web MIDI API の **`MIDIAccess`** インターフェイスは、MIDI の入力デバイスや出力デバイスを列挙するメソッドと、それらのデバイスへのアクセスを得るメソッドを提供します。

EventTarget

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

`MIDIAccess.inputs` 読取専用 

任意の利用可能な MIDI 入力ポートへのアクセスを提供する `MIDIInputMap` のインスタンスを返します。

`MIDIAccess.outputs` 読取専用 

任意の利用可能な MIDI 出力ポートへのアクセスを提供する `MIDIOutputMap` のインスタンスを返します。

`MIDIAccess.sysexEnabled` 読取専用 

現在の `MIDIAccess` インスタンスでシステムエクスクルーシブへの対応が有効かどうかを表す論理値の属性です。

### イベント

`MIDIAccess.statechange_event`

新しい MIDI ポートが追加されるか、既存のポートの状態が変わると、毎回呼ばれます。

例
-

`Navigator.requestMIDIAccess()` メソッドが `MIDIAccess` オブジェクトで解決する `Promise` を返します。入力ポートおよび出力ポートの情報が返されます。

ポートの状態が変わると、そのポートの情報をコンソールに出力します。


```js
navigator.requestMIDIAccess().then((access) => {
  // 利用可能な MIDI コントローラーのリストを取得する
  const inputs = access.inputs.values();
  const outputs = access.outputs.values();

  access.onstatechange = (event) => {
    // この接続 (または切断) された MIDI コントローラーの情報を出力する
    console.log(event.port.name, event.port.manufacturer, event.port.state);
  };
});
```

仕様書
---

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

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

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

`HTMLTemplateElement` インターフェイスは、HTML の `<template>` 要素の内容にアクセスできるようにします。

EventTarget

Node

Element

HTMLElement

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

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

`content` 読取専用 

読み取り専用の `DocumentFragment` で、 `<template>` 要素のテンプレートの内容を表す DOM サブツリーを返します。

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

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmltemplateelement |

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

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

**`HTMLSourceElement`** インターフェイスは、（通常の `HTMLElement` インターフェイスから継承されるもの以外に） `<source>` 要素を操作するための特別なプロパティとメソッドを提供します。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLSourceElement.media`

文字列で、HTML の `media` 属性を反映し、メディアリソースの意図する型を含みます。

`HTMLSourceElement.sizes`

文字列で、ブレークポイント間の画像の寸法を表します。

`HTMLSourceElement.src`

文字列で、HTML の `src` 属性を反映し、メディアリソースの URL が保持します。`HTMLSourceElement.src` プロパティは関連する `<source>` 要素が `<video>` や `<audio>` 要素などのメディア要素の中で入れ子になった場合のみ意味を持ちます。 `<picture>` 要素の中で入れ子になったときは意味を持たず、無視されます。

**メモ:** `src` プロパティが（兄弟要素によって）更新された場合、親の `HTMLMediaElement` の `load` メソッドが完了時に呼び出されます。`<source>` 要素は自動的には再読み込みされないからです。

`HTMLSourceElement.srcset`

文字列で、HTML の `srcset` 属性を反映し、カンマ (`',', U+002C COMMA`) で区切られた画像の候補のリストが入ります。画像の候補は URL の後に `'w'` に続いて画像の幅、または `'x'` に続いてピクセルの密度を指定します。

`HTMLSourceElement.type`

文字列で、HTML の `type` 属性を反映し、メディアリソースの型を保持します。

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

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlsourceelement |

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

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

関連情報
----

* このインターフェイスを実装する HTML 要素: `<source>`
* `<source>` 要素を含むことができる要素の HTML DOM API: `HTMLVideoElement`, `HTMLAudioElement`, `HTMLPictureElement`
DOMStringMap
============

**`DOMStringMap`** インターフェイスは、要素に追加されたカスタム属性のデータを表すために `HTMLElement.dataset`/`SVGElement.dataset` 属性で使用されます。

仕様書
---

| Specification |
| --- |
| HTML Standard # embedding-custom-non-visible-data-with-the-data-\*-attributes:domstringmap-3 |

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

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

関連情報
----

* `HTMLElement.dataset` / `SVGElement.dataset`
* グローバル属性 - `data-*`
BlobEvent
=========

**`BlobEvent`** インターフェイスは、`Blob` に関連付けられたイベントを表します。 これらの blob は、一般的にメディアコンテンツと関連付けられますが、必ずしもそうとは限りません。

Event

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

`BlobEvent()`

与えられた引数で `BlobEvent` イベントを生成します。

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

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

`BlobEvent.data` 読取専用 

イベントと関連付けられたデータを表す `Blob`。 イベントは、特定の `Blob` で何かが起こることにより、`EventTarget` 上で発生します。

`BlobEvent.timecode` 読取専用 

`data` 内の最初のチャンクのタイムスタンプと、このレコーダーによって生成された最初の `BlobEvent` 内の最初のチャンクのタイムスタンプとの差を示す `DOMHighResTimeStamp` です。生成されたばかりの `BlobEvent` の `timecode` はゼロとは限らないことに注意してください。

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

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

仕様書
---

| Specification |
| --- |
| MediaStream Recording # blobevent-section |

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

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

関連情報
----

* `Event` 基本インターフェイス
* メディアストリーム収録 API: メディアのチャンクの準備ができるたびに `BlobEvent` オブジェクトを送信します。
* メディアストリーム収録 API の使用
USBIsochronousOutTransferResult
===============================

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

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

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

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

WebUSB API の `USBIsochronousOutTransferResult` インターフェイスは、`USBDevice` インターフェイスの `isochronousTransferOut()` メソッドの呼び出しの結果を提供します。これは、USB ホストから USB デバイスへのデータ転送の要求の結果を表します。

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

`USBIsochronousOutTransferResult()` 
Experimental

指定の `packet` フィールドを持つ新しい `USBIsochronousOutTransferResult` オブジェクトを生成します。

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

`USBIsochronousOutTransferResult.packets` 読取専用  
Experimental

個々のデバイスへパケットを送信する要求の結果が格納された `USBIsochronousOutTransferPacket` オブジェクトの配列を返します。

仕様書
---

| Specification |
| --- |
| WebUSB API # usbisochronousouttransferresult |

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

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

Web Crypto API の辞書 **`EcKeyGenParams`** は、楕円曲線ベース、すなわちアルゴリズムとして ECDSA または ECDH を指定する鍵ペアを生成する際に `SubtleCrypto.generateKey()` の引数 `algorithm` として渡すべきオブジェクトを表します。

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

`name`

文字列。使用したいアルゴリズムにより、`ECDSA` または `ECDH` に設定するべきです。

`namedCurve`

使用する楕円曲線の名前を表す文字列です。以下の NIST によって承認された曲線の名前のうちいずれかを指定できます。

* `P-256`
* `P-384`
* `P-521`

例
-

`SubtleCrypto.generateKey()` の例を参照してください。

仕様書
---

| Specification |
| --- |
| Web Cryptography API # dfn-EcKeyGenParams |

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

`SubtleCrypto.generateKey()` メソッドにおいてアルゴリズム "ECDH" または "ECDSA" をサポートしているブラウザーは、この型をサポートするはずです。

関連情報
----

* `SubtleCrypto.generateKey()`