recursal/MDN huggingface dataset:
Worklet
=======

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

**`Worklet`** インターフェイスは軽量なウェブワーカーを提供し、開発者がレンダリングパイプラインの低水準な部分を制御できるようにします。

ワークレットでは、グラフィックや音声処理といった、高い性能を必要とする処理を JavaScript や WebAssembly コードを使って記述できます。

ワークレットの種類
---------

ワークレットの利用はいくつかの用途に限定されています。つまり、ウェブワーカーのように好きな計算をさせる用途には使えません。 `Worklet` インターフェイスは、すべての種類のワークレットに共通する属性とメソッドを抽象化する一方、直接インスタンスを作成することはできません。実際にインスタンスを作成するには、以下のクラスを利用します。

| クラス名 | 説明 | 動作するスレッド | 仕様書 |
| --- | --- | --- | --- |
| `PaintWorklet` (en-US) | CSS プロパティがファイルを必要とする場合に、プログラムによって画像を生成するためのものです。このインターフェイスには `CSS.paintWorklet` でアクセスします。 | **Chrome:** メインスレッド**Gecko:** 描画スレッド | CSS 描画 API |
| `AudioWorklet` | カスタムオーディオノードでの音声処理のために使用します。 | ウェブオーディオレンダリングスレッド | ウェブオーディオ API |
| `AnimationWorklet` | スクロールに伴うアニメーションや、性能を必要とするアニメーションをプログラミングするために使用します。 | 編集スレッド | CSS アニメーションワークレット API |
| `LayoutWorklet` | カスタム要素のサイズと位置を定義するために使用します。 |  | CSS レイアウト API |

WebGL を用いた 3D グラフィックにはワークレットを使用しません。その代わりに GLSL で記述した頂点シェーダーとフラグメントシェーダーを書いてください。これらのシェーダーコードはグラフィックカードの上で動作します。

プロパティ
-----

*Worklet インターフェイスでは、プロパティは定義されていません。*

メソッド
----

`Worklet.addModule()` 
Experimental

指定された URL にあるスクリプト モジュールを現在のワークレットに追加します。

仕様書
---

| Specification |
| --- |
| HTML Standard # worklets-worklet |

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

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

関連情報
----

* Houdini: Demystifying CSS on Google Developers (May 2016)
* AudioWorklet :: What, Why, and How on YouTube (November 2017)
* Enter AudioWorklet on Google Developers (December 2017)
* Animation Worklet - HTTP203 Advent on YouTube (December 2017)
XRSystem
========

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

WebXR Device API の **`XRSystem`** インターフェイスは、WebXR セッションを表す `XRSession` (en-US) オブジェクトにアクセスできるようにするメソッドを提供します。 その `XRSession` が手元にあれば、それを使用して拡張現実（AR）または仮想現実（VR）デバイスと対話できます。

プロパティ
-----

*`XRSystem` はプロパティを直接提供しませんが、親インターフェイスである `EventTarget` からプロパティを継承します。*

メソッド
----

*`XRSystem` インターフェイスには、親インターフェイスである `EventTarget` からメソッドを継承することに加えて、次のメソッドが含まれています。*

`isSessionSupported()` (en-US) 
Experimental

ブラウザーが指定された `XRSessionMode` (en-US) をサポートしている場合、`true` に解決される promise を返します。 指定されたモードをサポートしていない場合、`false` に解決されます。

`requestSession()` (en-US) 
Experimental

指定された `XRSessionMode` (en-US) を持つ新しい `XRSession` (en-US) に解決される promise を返します。

イベント
----

`devicechange` (en-US) 
Experimental

 使用可能な XR デバイスのセットが変更されたときに送信されます。
 `ondevicechange` (en-US) イベントハンドラーを使用することもできます。


使用上の注意
------

このインターフェイスは、以前のバージョンの仕様では単に `XR` と呼ばれていました。 コードや文書に `XR` への参照がある場合は、それを `XRSystem` に置き換えてください。

例
-

次の例は、`isSessionSupported()` (en-US) と `requestSession()` (en-US) の両方を使用する方法を示しています。


```js
if (navigator.xr) {
  immersiveButton.addEventListener("click", onButtonClicked);
  navigator.xr.isSessionSupported("immersive-vr").then((isSupported) => {
    if (isSupported) {
      immersiveButton.disabled = false;
    } else {
      immersiveButton.disabled = true;
    }
  });
}

function onButtonClicked() {
  if (!xrSession) {
    navigator.xr.requestSession("immersive-vr").then((session) => {
      // onSessionStarted() not shown for reasons of brevity and clarity.
      onSessionStarted(session);
    });
  } else {
    // Shut down the already running XRSession
    xrSession.end().then(() => {
      // Since there are cases where the end event is not sent, call the handler here as well.
      onSessionEnded();
    });
  }
}
```


このコードは、`navigator.xr` プロパティを探して、WebXR が使用可能かどうかを確認することから始まります。 見つかった場合は、WebXR が存在することがわかっているので、ユーザーがクリックして没入型 VR モードのオンとオフを切り替えることができるボタンのハンドラーを確立します。

ただし、目的の没入型モードが利用可能かどうかはまだわかりません。 これを決定するために、ボタン `immersiveButton` を有効にする前に、必要なセッションオプションを渡して `isSessionSupported()` を呼び出します。 これにより、ユーザーは、没入型 VR モードが使用可能な場合にのみ没入型モードに切り替えることができます。 没入型 VR が利用できない場合、ボタンを使用できないように無効しています。

`onButtonClicked()` 関数は、実行中のセッションがすでに存在するかどうかを確認します。 存在しない場合は、`requestSession()` を使用して開始し、返された promise が解決したら、関数 `onSessionStarted()` を呼び出して、レンダリングなどのためにセッションを設定します。

一方、進行中の XR セッションがすでに存在する場合は、代わりに `end()` (en-US) を呼び出して現在のセッションを終了します。 現在のセッションが終了すると、`end` (en-US) イベントが送信されるので、そのハンドラーで `xrSession` を `null` に設定して、進行中のセッションがなくなったことを記録します。 そうすれば、ユーザーがボタンをもう一度クリックすることで、新しいセッションが開始されます。

仕様
--

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

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

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

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

**`TaskAttributionTiming`** インターフェイスは、長いタスクに関連する作業とそれに関連するフレームコンテキストに関する情報を返します。フレームコンテキストはコンテナーとも呼ばれ、長いタスクに関わる iframe、embed、object のことです。

通常、 `TaskAttributionTiming` オブジェクトを使って作業するのは、長いタスク を監視するときです。

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

PerformanceEntry

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

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

`PerformanceEntry.duration` 読取専用  
Experimental

このインターフェイスでは `duration` は適用されないので、常に `0` を返します。

`PerformanceEntry.entryType` 読取専用  
Experimental

常に `taskattribution` を返します。

`PerformanceEntry.name` 読取専用  
Experimental

常の `"unknown"` を返します。

`PerformanceEntry.startTime` 読取専用  
Experimental

常の `0` を返します。

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

`TaskAttributionTiming.containerType` 読取専用  
Experimental

フレームコンテナーの種類（`iframe`、`embed`、`object` のいずれか）を返します。

`TaskAttributionTiming.containerSrc` 読取専用  
Experimental

コンテナーの `src` 属性を返します。

`TaskAttributionTiming.containerId` 読取専用  
Experimental

コンテナーの `id` 属性を返します。

`TaskAttributionTiming.containerName` 読取専用  
Experimental

コンテナーの `name` 属性を返します。

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

`TaskAttributionTiming.toJSON()` 
Experimental

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

仕様書
---

| Specification |
| --- |
| Long Tasks API # sec-TaskAttributionTiming |

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

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

関連情報
----

* `PerformanceLongTaskTiming`
BluetoothRemoteGATTDescriptor
=============================

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

Web Bluetooth API の `BluetoothRemoteGATTDescriptor` は、GATT ディスクリプターを提供します。これは、キャラクタリスティックの値に関する詳細情報を提供します。

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

`BluetoothRemoteGATTDescriptor.characteristic` 読取専用  
Experimental

このディスクリプターが属する `BluetoothRemoteGATTCharacteristic` を返します。

`BluetoothRemoteGATTDescriptor.uuid` 読取専用  
Experimental

 このキャラクタリスティックディスクリプターの UUID を返します。たとえば、theClient
 Characteristic Configuration descriptor は「`00002902-0000-1000-8000-00805f9b34fb`」です。


`BluetoothRemoteGATTDescriptor.value` 読取専用  
Experimental

現在キャッシュされているディスクリプターの値を返します。この値はディスクリプターの値が読まれると更新されます。

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

`BluetoothRemoteGATTDescriptor.readValue()` 
Experimental

利用可能で対応していれば `value` プロパティの複製が格納された `ArrayBuffer` で解決する `Promise` を返します。そうでない場合、エラーを投げます。

`BluetoothRemoteGATTDescriptor.writeValue()` 
Experimental

`value` プロパティを `ArrayBuffer` に格納されたバイト列に設定し、`Promise` を返します。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # bluetoothgattdescriptor-interface |

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

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

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

EventTarget

Node

Element

HTMLElement

HTMLTableSectionElementプロパティ
-----

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

`HTMLTableSectionElement.align` 
非推奨

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

`HTMLTableSectionElement.rows` 読取専用 

セクション内の行を含む生きた `HTMLCollection` を返します。この `HTMLCollection` は生きており、行が追加または削除された際には自動的に更新されます。

`HTMLTableSectionElement.ch` 
非推奨

単一の文字が入った文字列です。この文字は、列のすべてのセルを揃えるための文字です。これは `char` を反映したもので、既定値は言語に関連した小数点以下の値、例えば英語なら `'.'`、フランス語なら `','` になります。このプロパティは任意であり、あまり対応されていませんでした。

`HTMLTableSectionElement.chOff` 
非推奨

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

`HTMLTableSectionElement.vAlign` 
非推奨

文字列で、セルの内容物が垂直方向に配置される方法を示す列挙値を表します。これは `valign` 属性を反映し、 `"top"`, `"middle"`, `"bottom"`, `"baseline"` の何れかの値を取ります。

メソッド
----

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

`HTMLTableSectionElement.deleteRow()`

引数で与えられた `index` に対応する行を、そのセクションから削除します。もし `index` の値が `-1` であれば、最後の行が削除されます。もし `-1` よりも小さいか、コレクション内の行数よりも大きい場合は、 `DOMException` が `IndexSizeError` の値で発生します。

`HTMLTableSectionElement.insertRow()`

セクションの新しい行を表す `HTMLTableRowElement` を返します。これは、指定された `index` の位置にある `<tr>` 要素の直前の行コレクションに挿入されます。 `index` が `-1` である場合、新しい行がコレクションに追加されます。もし `index` が `-1` よりも小さいか、コレクション内の行数よりも大きい場合は、値 `IndexSizeError` を持つ `DOMException` が発生します。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmltablesectionelement |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: `<tfoot>`, `<thead>`, `<tbody>`
Permissions
===========

`Permissions` は権限 API のインターフェイスで、権限の照会や取り消しのためのメソッドなど、中心となる権限 API の機能を提供します。

メソッド
----

`Permissions.query()`

指定された API の権限の状態を返します。

`Permissions.request()` 
Experimental

指定された API を使用する権限を要求します。 これは現在どのブラウザーも対応していません。

`Permissions.requestAll()` 
Experimental

Non-standard

指定された API 群の使用許可を要求します。これは現在、どのブラウザーも対応していません。

`Permissions.revoke()` 
非推奨

指定された API に現在設定されている権限を取り消します。

例
-


```js
navigator.permissions.query({ name: " geolocation" }).then((result) => {
  if (result.state === "granted") {
    showLocalNewsWithGeolocation();
  } else if (result.state === "prompt") {
    showButtonToEnableLocalNews();
  }
  // 権限が拒否された場合は何もしないでください。
});
```

仕様書
---

| Specification |
| --- |
| Permissions # permissions-interface |

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

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

**`CryptoKey`** インターフェイスは、特定の鍵アルゴリズムによりもたらされる暗号鍵を表します。

`CryptoKey` オブジェクトは、`SubtleCrypto.generateKey()` または `SubtleCrypto.deriveKey()`、`SubtleCrypto.importKey()` を使用して取得できます。

プロパティ
-----

*このインターフェイスはどのプロパティも継承しません。*

`CryptoKey.type` (en-US)

鍵の種類と、(対称アルゴリズムでは) 秘密鍵、(非対称アルゴリズムでは) 公開鍵またはプライベートキーを表す列挙値を返します。

`CryptoKey.extractable` (en-US)

生の情報がアプリケーションにエクスポートされるかどうかを示す `Boolean` を返します。

`CryptoKey.algorithm` (en-US)

鍵が使用される特定の暗号法を表す透過オブジェクトを返します。

`CryptoKey.usages` (en-US)

どの用途で使用される鍵かを示す列挙値の配列を返します。

メソッド
----

*このインターフェイスはどのメソッドも定義または継承しません。*

仕様
--

| Specification |
| --- |
| Web Cryptography API # cryptokey-interface |

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

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

関連情報
----

* `Crypto` および `Crypto.subtle`。
PushEvent
=========

**`PushEvent`** はプッシュ API のインターフェイスで、受け取ったプッシュメッセージを表します。このイベントは、`ServiceWorker` の グローバルスコープに送信されます。これは、アプリケーションサーバーから `PushSubscription` に送信された情報を含みます。

Event

ExtendableEvent

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

`PushEvent()`

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

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

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

`PushEvent.data` 読取専用 

`PushSubscription` に送信されたデータを含む `PushMessageData` オブジェクトへの参照を返します。

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

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

例
-

次の例は、`PushEvent` からデータを取得して、すべてのサービスワーカークライアントで表示しています。


```js
self.addEventListener("push", (event) => {
  if (!(self.Notification && self.Notification.permission === "granted")) {
    return;
  }

  const data = event.data?.json() ?? {};
  const title = data.title || "Something Has Happened";
  const message =
    data.message || "Here's something you might want to check out.";
  const icon = "images/new-notification.png";

  const notification = new self.Notification(title, {
    body: message,
    tag: "simple-push-demo-notification",
    icon,
  });

  notification.addEventListener("click", () => {
    clients.openWindow(
      "https://example.blog.com/2015/03/04/something-new.html",
    );
  });
});
```

仕様書
---

| Specification |
| --- |
| Push API # pushevent-interface |

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

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

関連項目
----

* プッシュ API
* サービスワーカー API
PublicKeyCredential
===================

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

**`PublicKeyCredential`** インターフェイスは、パスワードの代わりにフィッシングやデータ消去に耐性のある非対称の鍵ペアを使用してサービスにログインするための資格情報である、公開鍵と秘密鍵のペアについての情報を提供します。これは `Credential` を継承しており、ウェブ認証 API が資格情報管理 API へ拡張された際に作成されました。 `Credential` を継承している他のインターフェイスとしては、 `PasswordCredential` (en-US) や `FederatedCredential` があります。

Credential

PublicKeyCredential

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

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

`PublicKeyCredential.type` 読取専用  安全なコンテキスト用

`Credential` から継承しています。 `PublicKeyCredential` インスタンスの場合は、常に `public-key` に設定されています。

`PublicKeyCredential.id` 読取専用  安全なコンテキスト用

`Credential` から継承しており、 `PublicKeyCredential.rawId` の base64url 符号化になるようオーバーライドしています。

`PublicKeyCredential.rawId` 読取専用  安全なコンテキスト用

`ArrayBuffer` で、この `PublicKeyCredential` のグローバルに固有な識別子を保持します。この識別子は今後の `CredentialsContainer.get` (en-US) の呼び出しにおいて、資格情報を検索するのに使用することができます。

`PublicKeyCredential.response` 読取専用  安全なコンテキスト用

`AuthenticatorResponse` オブジェクトのインスタンスです。これは `PublicKeyCredential` が `navigator.credentials.create()` の呼び出しの結果だった場合であった場合は `AuthenticatorAttestationResponse` 型に、 `PublicKeyCredential` が `navigator.credentials.get()` (en-US) の呼び出しの結果であった場合は `AuthenticatorAssertionResponse` 型になります。

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

`PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable()` 安全なコンテキスト用

静的メソッドで、認証機器が所属するプラットフォームがユーザーを*検証*する能力を持っているならば `true` で解決する `Promise` を返します。

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

`PublicKeyCredential.getClientExtensionResults()` 安全なコンテキスト用

何らかの拡張機能がリクエストされた場合、このメソッドはその拡張機能が処理した結果を返します。

例
-

### PublicKeyCredential の新しいインスタンスを生成

ここでは、 `navigator.credentials.create()` を用いて新しい資格情報を生成します。


```js
const publicKey = {
  challenge: new Uint8Array([
    21, 31, 105 /\* 29 more random bytes generated by the server \*/,
  ]),
  rp: {
    name: "Example CORP",
    id: "login.example.com",
  },
  user: {
    id: new Uint8Array(16),
    name: "canand@example.com",
    displayName: "Carina Anand",
  },
  pubKeyCredParams: [
    {
      type: "public-key",
      alg: -7,
    },
  ],
};

navigator.credentials
  .create({ publicKey })
  .then((newCredentialInfo) => {
    const response = newCredentialInfo.response;
    const clientExtensionsResults =
      newCredentialInfo.getClientExtensionResults();
  })
  .catch((err) => {
    console.error(err);
  });
```

### PublicKeyCredential の既存のインスタンスを取得

ここでは、 `navigator.credentials.get()` (en-US) を用いて認証機器から既存の資格情報を読み取ります。


```js
const options = {
  challenge: new Uint8Array([
    /\* bytes sent from the server \*/
  ]),
};

navigator.credentials
  .get({ publicKey: options })
  .then((credentialInfoAssertion) => {
    // send assertion response back to the server
    // to proceed with the control of the credential
  })
  .catch((err) => {
    console.error(err);
  });
```

仕様書
---

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

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

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

関連情報
----

* 親インターフェイスの `Credential`
FileList
========

この型のオブジェクトは、 HTML の `<input>` 要素の `files` プロパティで返されます。これにより、 `<input type="file">` 要素で選択されているファイルのリストにアクセスすることができます。また、ドラッグ＆ドロップ API を使用している場合は、ウェブコンテンツにドロップされたファイルのリストにも使用されます。使用方法の詳細は `DataTransfer` オブジェクトを見てください。

**メモ:** Gecko 1.9.2 より前は、input 要素は一度に 1 つのファイルだけ選択することができます。すなわち、 FileList に入るファイルは 1 つだけです。 Gecko 1.9.2 から、 input 要素の multiple 属性が true の場合、 FileList に複数のファイルが入ります。

ファイルリストの使用
----------

すべての `<input>` 要素のノードには `files` 属性があり、これが `FileList` 型なので、リスト中の項目にアクセスすることができます。例えば、HTML に以下のファイル入力があるとします。


```html
<input id="fileItem" type="file" />
```


次のコードの行は、ノードのファイルリスト内の最初のファイルを `File` オブジェクトとして取得します。


```js
var file = document.getElementById("fileItem").files[0];
```

メソッドの概要
-------

|  |
| --- |
| `File item(index);` |

プロパティ
-----

|  |  |  |
| --- | --- | --- |
| 属性 | 型 | 説明 |
| `length` | `integer` | 読み取り専用で、リスト内のファイル数を示します。 |

メソッド
----

### item()

ファイルリスト内の指定された位置にあるファイルを表す `File` オブジェクトを返します。
```

File item(
  index
);
```


#### 引数

`index`

リストから受け取るファイルの 0 から始まる位置です。

#### 返値

要求されたファイルを表す `File` です。

例
-

この例では、`input` 要素を使用してユーザーが選択したすべてのファイルを反復処理します。


```js
// fileInput は HTML の input 要素 <input type="file" id="myfileinput" multiple> です。
var fileInput = document.getElementById("myfileinput");

// files は FileList オブジェクトです (NodeList と同様)
var files = fileInput.files;
var file;

// files を反復処理
for (var i = 0; i < files.length; i++) {
  // get item
  file = files.item(i);
  //or
  file = files[i];

  alert(file.name);
}
```


こちらが完全な例です。


```html
<!doctype html>
<html>
  <head> </head>
  <body>
    <!-- multiple を設定して、複数のファイルが選択できるようにしています -->

    <input id="myfiles" multiple type="file" />
  </body>

  <script>
 var pullfiles = function () {
 // querySelector が好き
 var fileInput = document.querySelector("#myfiles");
 var files = fileInput.files;
 // files.length をキャッシュ
 var fl = files.length;
 var i = 0;

 while (i < fl) {
 // ループ内のファイル var をローカライズ
 var file = files[i];
 alert(file.name);
 i++;
 }
 };

 // input 要素の onchange を設定し pullfiles を呼び出すようにします。
 document.querySelector("#myfiles").onchange = pullfiles;

 //a.t
 </script>
</html>
```

仕様書
---

| Specification |
| --- |
| File API # filelist-section |
| HTML Standard # dom-input-files-dev |

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

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

関連情報
----

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

`MediaStreamAudioDestinationNode` インターフェイスは、単一の `AudioMediaStreamTrack` を持つ WebRTC `MediaStream` からなる音声の出力先を表します。これは、`navigator.mediaDevices.getUserMedia()` で取得した `MediaStream` と同様に用いることができます。

これは音声の出力先としてふるまう `AudioNode` であり、`AudioContext.createMediaStreamDestination()` メソッドで生成できます。

EventTarget

AudioNode

MediaStreamAudioDestinationNode

|  |  |
| --- | --- |
| 入力数 | `1` |
| 出力数 | `0` |
| チャンネル数 | `2` |
| チャンネルカウントモード | `"explicit"` |
| チャンネルカウントの解釈 | `"speakers"` |

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

`MediaStreamAudioDestinationNode()`

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

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

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

`MediaStreamAudioDestinationNode.stream`

`kind` が `audio` であり、ノードと同じ数のチャンネルを持つ単一の `MediaStreamTrack` からなる `MediaStream` です。このプロパティを用いて、ストリームを音声グラフから取り出し、Media Recorder などの他の構築に供給できます。

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

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

例
-

`AudioContext.createMediaStreamDestination()` に、`MediaStreamAudioDestinationNode` を生成し、それを録音する音声の音源として用いるサンプルコードがあります。

仕様書
---

| Specification |
| --- |
| Web Audio API # MediaStreamAudioDestinationNode |

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

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

関連情報
----

* Web Audio API の使用
PushSubscription
================

`PushSubscription` はプッシュ API のインターフェイスで、サブスクリプションの URL エンドポイントを提供し、ここからプッシュサービスの登録を脱退できます。

このインターフェイスのインスタンスはシリアライズできます。

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

`PushSubscription.endpoint` 読取専用 

文字列で、このプッシュサブスクリプションに関連づけられたエンドポイントが入ります。

`PushSubscription.expirationTime` 読取専用 

`DOMHighResTimeStamp` で、存在すれば、プッシュサブスクリプションに関連付いたサブスクリプションの期限です。存在しない場合は `null` です。

`PushSubscription.options` 読取専用 

サブスクリプションを作成するために用いられるオプションを含むオブジェクト。

`PushSubscription.subscriptionId` 
非推奨
 読取専用 

文字列で、このプッシュサブスクリプションに関連したサブスクリプション ID が入ります。

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

`PushSubscription.getKey()`

サーバーに送信されてプッシュメッセージの暗号化に使用される、クライアントの公開鍵を含む `ArrayBuffer` を返します。

`PushSubscription.toJSON()`

標準シリアライザーです。サブスクリプションプロパティの JSON 記法を返します。

`PushSubscription.unsubscribe()`

プッシュサービスのサブスクリプションを脱退する非同期プロセスを開始します。現在のサブスクリプションが成功裏に脱退できた場合、論理値で解決される `Promise` を返します。

例
-


```js
navigator.serviceWorker.ready.then((reg) => {
  reg.pushManager.getSubscription().then((subscription) => {
    subscription
      .unsubscribe()
      .then((successful) => {
        // 成功裏に脱退。
      })
      .catch((e) => {
        // 脱退に失敗。
      });
  });
});
```

仕様書
---

| Specification |
| --- |
| Push API # pushsubscription-interface |

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

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

関連項目
----

* プッシュ API
* サービスワーカー API
パフォーマンス API
===========

パフォーマンス API は、ウェブアプリケーションのパフォーマンスを測定するために使用される一連の規格です。

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

ウェブアプリケーションを高速に動作させるためには、さまざまなパフォーマンス指標を測定・分析することが重要です。パフォーマンス API は、重要な組み込み指標と、ブラウザーのパフォーマンスタイムラインに自分自身で測定値を追加する機能を提供します。パフォーマンスタイムラインには高精度のタイムスタンプが含まれ、開発者ツールで表示することができます。また、このデータを分析エンドポイントに送信して、パフォーマンス指標を時刻とともに記録することもできます。

それぞれのパフォーマンス指標は単一の `PerformanceEntry` で表されます。パフォーマンス項目には `name`, `duration`, `startTime`, そして `type` があります。すべてのパフォーマンス指標は `PerformanceEntry` インターフェイスを拡張し、さらにそれを修飾しています。

パフォーマンス項目のほとんどは、何もしなくても記録され、`Performance.getEntries()` または `PerformanceObserver` からアクセスできます。例えば、 `PerformanceEventTiming` (en-US) の項目は、設定された閾値より時間がかかるイベントに対して記録されます。しかし、パフォーマンス API では `PerformanceMark` や `PerformanceMeasure` インターフェイスを使用して、自分自身でカスタムイベントを定義したり記録したりすることも可能です。

主となる `Performance` インターフェイスは `self.performance` を使用して各グローバルで使用でき、独自のパフォーマンス項目を追加したり、パフォーマンス項目をクリアしたり、パフォーマンス項目を取得したりすることが可能です。

このインターフェイスでは、さまざまな種類のパフォーマンス項目が記録されるときに、それを待ち受けするために使用することができます。

![パフォーマンス API の UML 図](/ja/docs/Web/API/Performance_API/diagram.svg)

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

`EventCounts` (en-US)

`performance.eventCounts` (en-US) によって返される、イベント種別毎に発送されたイベント数を保持する読み取り専用のマップです。

`LargestContentfulPaint` (en-US)

ビューポート内に表示される最大の画像またはテキストブロックのレンダリング時間を、ページの最初の読み込みを開始した時点から記録して測定します。

`Performance`

パフォーマンス測定にアクセスするためのメインインターフェイスです。ウィンドウとワーカーのコンテキストで `self.performance` を使用することで利用することができます。

`PerformanceElementTiming`

特定の要素のレンダリングタイムスタンプを測定します。

`PerformanceEntry`

単一のパフォーマンス指標をカプセル化したパフォーマンスタイムライン上の項目です。すべてのパフォーマンス指標はこのインターフェイスを継承します。

`PerformanceEventTiming` (en-US)

イベントの遅延時間、最初の入力遅延 (FID) を測定します。

`PerformanceLongTaskTiming`

レンダリングを占有し、他のタスクの実行を妨害する長時間のタスクを検出します。

`PerformanceMark`

パフォーマンスタイムライン上に自分自身で記入するためのカスタムマーカー。

`PerformanceMeasure`

2 つのパフォーマンス項目間の時刻をカスタム測定します。

`PerformanceNavigationTiming`

文書を読み込むのにかかる時間など、文書内のナビゲーションイベントを測定します。

`PerformanceObserver`

パフォーマンスタイムラインに記録される新しいパフォーマンス項目を待ち受けします。

`PerformanceObserverEntryList`

パフォーマンスオブザーバーで観測された項目のリスト。

`PerformancePaintTiming`

ウェブページ構築時のレンダリング処理を測定します。

`PerformanceResourceTiming`

画像、スクリプト、フェッチ呼び出しなどのリソースのリダイレクト開始・終了時刻、フェッチ開始時刻、 DNS ルックアップ開始・終了時刻、レスポンス開始・終了時刻などのネットワーク負荷の指標を測定します。

`PerformanceServerTiming` (en-US)

HTTP の `Server-Timing` ヘッダーのレスポンスで送られてくるサーバー指標を示します。

`TaskAttributionTiming`

タスクの種類と、長時間のタスクを担当するコンテナーを特定します。

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

* パフォーマンス API の使用
* パフォーマンスタイムラインの使用
* ユーザータイミング API の使用 (en-US)
* ナビゲーションタイミング API の使用 (en-US)
* リソースタイミング API の使用
仕様書
---

| Specification |
| --- |
| Element Timing API  |
| Event Timing API  |
| High Resolution Time  |
| Largest Contentful Paint  |
| Layout Instability  |
| Long Tasks API  |
| Navigation Timing Level 2  |
| Paint Timing  |
| Performance Timeline  |
| Resource Timing  |
| Server Timing  |
| User Timing  |

関連情報
----

* ウェブパフォーマンス
* 学習: ウェブパフォーマンス