ChannelMergerNode - Web API

ChannelMergerNode
=================

`ChannelMergerNode` インターフェイスは、反対の機能の `ChannelSplitterNode` と組み合わせて使用されることが多く、さまざまなモノラル入力を単一の出力に再結合します。 各入力は、出力のチャンネルを埋めるために使用されます。 これは各チャンネルに別々にアクセスするのに便利です、つまり 各チャンネルでゲインを別々に制御する必要がある場合にミキシングするのに有効です。

![](/ja/docs/Web/API/ChannelMergerNode/webaudiomerger.png)

もし `ChannelMergerNode` の出力が 1 つであるが、マージするチャンネルと同じ数の入力がある場合、入力数はそのコンストラクターおよび `AudioContext.createChannelMerger()` の呼び出しの引数で指定されただけの数になります。値が指定されていない場合は、既定の `6` になります。

`ChannelMergerNode` を使用すると、レンダリングハードウェアが処理できるよりも多くのチャンネルで出力を作成することが可能です。その場合、シグナルが`AudioContext.listener` オブジェクトに送信されると、余分なチャンネルは無視されます。

EventTarget

AudioNode

ChannelMergerNode

|  |  |
| --- | --- |
| 入力数 | 可変。既定値は `6` です。 |
| 出力数 | `1` |
| チャンネルカウントモード | `"explicit"` |
| チャンネルカウント | `2` (既定のカウントモードでは使用されません) |
| チャンネル判別 | `"speakers"` |

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

`ChannelMergerNode()` (en-US)

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

プロパティ
-----

*特有のプロパティはありません。 親である `AudioNode` からプロパティを継承しています。*

メソッド
----

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

例
-

コード零については `BaseAudioContext.createChannelMerger()` を参照してください。

仕様書
---

| Specification |
| --- |
| Web Audio API # ChannelMergerNode |

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

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

関連情報
----

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


PictureInPictureWindow - Web API

PictureInPictureWindow
======================

**`PictureInPictureWindow`** インターフェイスは、プログラムにより 浮動動画ウィンドウの **`width`**、**`height`**、**`resize` イベント**を取得できるオブジェクトを表します。

このインターフェイスを持つオブジェクトは、 `HTMLVideoElement.requestPictureInPicture()` のプロミスの返値を使用して取得します。

EventTarget

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

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

`PictureInPictureWindow.width` 読取専用

浮動動画ウィンドウの幅を指定します。

`PictureInPictureWindow.height` 読取専用

浮動動画ウィンドウの高さを指定します。

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

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

イベント
----

*`PictureInPictureWindow` インターフェイスはイベントを継承していません。*

`resize`

浮動動画ウィンドウのサイズ変更時に `PictureInPictureWindow` に送られます。

例
-

`<button>` と `<video>` が指定されており、ボタンをクリックすると動画がピクチャインピクチャモードになります。次に、浮動動画ウィンドウの寸法をコンソールに出力するイベントを取り付けます。

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

function printPipWindowDimensions(evt) {
  const pipWindow = evt.target;
  console.log(
    `浮動動画ウィンドウの大きさ: ${pipWindow.width}x${pipWindow.height}px`,
  );
  // 表示例:
  // 浮動動画ウィンドウの大きさ: 640x360px
}

button.onclick = () => {
  video.requestPictureInPicture().then((pictureInPictureWindow) => {
    pictureInPictureWindow.onresize = printPipWindowDimensions;
  });
};
```

仕様書
---

| Specification |
| --- |
| Picture-in-Picture # interface-picture-in-picture-window |

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

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

関連情報
----

* `Picture-in-Picture API`


HTMLQuoteElement - Web API

HTMLQuoteElement
================

**`HTMLQuoteElement`** インターフェイスは、（通常の `HTMLElement` インターフェイスから継承されるもの以外に）引用要素を操作するための特別なプロパティやメソッドを提供します。例えば `<blockquote>` や `<q>` ですが、`<cite>` 要素は含みません。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLQuoteElement.cite`

文字列で、HTML の `cite` 属性を反映し、引用元の URL を表します。

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

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlquoteelement |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: `<blockquote>` および `<q>`、ただし `<cite>` は含みません


USBInTransferResult - Web API

USBInTransferResult
===================

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 の `USBInTransferResult` インターフェイスは、`USBDevice` インターフェイスの `transferIn()` および `controlTransferIn()` メソッドを呼び出した結果を提供します。これは、USB デバイスから USB ホストへのデータ転送の要求の結果を表します。

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

`USBInTransferResult()`
Experimental

指定の `status` および `data` フィールドを持つ新しい `USBInTransferResult` オブジェクトを生成します。

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

`USBInTransferResult.data` 読取専用
Experimental

あれば、USB デバイスから受信したデータが格納された `DataView` オブジェクトを返します。

`USBInTransferResult.status` 読取専用
Experimental

転送要求の状態を返します。以下のいずれかです。

* `"ok"` — 転送は成功しました。
* `"stall"` — デバイスはエンドポイントでストール状態を発生させ、エラーを示しました。コントロールエンドポイントでのストールをクリアする必要はありません。バルクエンドポイントやインタラプトエンドポイントでのストールは、次の `transferIn()` の呼び出しの前に `clearHalt()` を呼び出してクリアする必要があります。
* `"babble"` — デバイスは想定より多くのデータで応答しました。

仕様書
---

| Specification |
| --- |
| WebUSB API # usbintransferresult |

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

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


MediaTrackSupportedConstraints - Web API

MediaTrackSupportedConstraints
==============================

**`MediaTrackSupportedConstraints`** 辞書はユーザーエージェントまたはブラウザーが `MediaStreamTrack` オブジェクトの実装で認識する制約可能なプロパティのリストを確立するものです。 `MediaTrackSupportedConstraints` に適合するオブジェクトは `MediaDevices.getSupportedConstraints()` によって返されます。

WebIDLのインターフェイス定義はこのように動作するため、制約が要求されたが対応していない場合、エラーは発生しません。代わりに、指定された制約が適用され、認識されない制約が要求から取り除かれます。これは混乱をもたらすことがあり、エラーのデバッグが困難になるので、制約を黙って無視することと制約を受け入れることの違いを知る必要がある場合は、制約を確立しようとする前に、必ず `getSupportedConstraints()` を使用してこの情報を取り出してください。

実際の制約セットは `MediaTrackConstraints` (en-US) 辞書をベースにしたオブジェクトで表現されます。

制約がどのように動作するかについての詳細を知りたい場合は、能力、制約、設定を読んでください。

プロパティ
-----

オブジェクトは以下のプロパティの組み合わせであり、必ずしも全てのプロパティが含まれるわけではありません。

`autoGainControl`

論理値で、値が `true` ならば、現在の環境で `autoGainControl` (en-US) 制約に対応しています。

`width`

論理値で、値が `true` ならば、現在の環境で `width` (en-US) 制約に対応しています。

`height`

論理値で、値が `true` ならば、現在の環境で `height` (en-US) 制約に対応しています。

`aspectRatio`

論理値で、値が `true` ならば、現在の環境で `aspectRatio` (en-US) 制約に対応しています。

`frameRate`

論理値で、値が `true` ならば、現在の環境で `frameRate` (en-US) 制約に対応しています。

`facingMode`

論理値で、値が `true` ならば、現在の環境で `facingMode` (en-US) 制約に対応しています。

`resizeMode`

論理値で、値が `true` ならば、現在の環境で `resizeMode` (en-US) 制約に対応しています。

`volume`

論理値で、値が `true` ならば、現在の環境で `volume` (en-US) 制約に対応しています。

`sampleRate`

論理値で、値が `true` ならば、現在の環境で `sampleRate` (en-US) 制約に対応しています。

`sampleSize`

論理値で、値が `true` ならば、現在の環境で `sampleSize` (en-US) 制約に対応しています。

`echoCancellation`

論理値で、値が `true` ならば、現在の環境で `echoCancellation` (en-US) 制約に対応しています。

`latency`

論理値で、値が `true` ならば、現在の環境で `latency` (en-US) 制約に対応しています。

`noiseSuppression`

論理値で、値が `true` ならば、現在の環境で `noiseSuppression` (en-US) 制約に対応しています。

`channelCount`

論理値で、値が `true` ならば、現在の環境で `channelCount` (en-US) 制約に対応しています。

`deviceId`

論理値で、値が `true` ならば、現在の環境で `deviceId` (en-US) 制約に対応しています。

`groupId`

論理値で、値が `true` ならば、現在の環境で `groupId` (en-US) 制約に対応しています。

### 画面共有トラックに固有のプロパティ

ユーザーの画面内コンテンツから映像ソースを含むトラックには、映像トラックで利用可能なプロパティに加え、以下のプロパティを入れることができます。

`displaySurface` (en-US)

論理値で、値が `true` ならば、現在の環境で `displaySurface` (en-US) 制約に対応しています。

`logicalSurface` (en-US)

論理値で、値が `true` ならば、現在の環境で `logicalSurface` (en-US) 制約に対応しています。

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

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

関連情報
----

* メディアキャプチャとストリーム API
* 能力、制約、設定
* 画面キャプチャ API
* 画面キャプチャ API の使用
* `MediaTrackConstraints` (en-US)
* `MediaDevices.getUserMedia()`
* `MediaStreamTrack.getConstraints()` (en-US)
* `MediaStreamTrack.applyConstraints()` (en-US)
* `MediaStreamTrack.getSettings()` (en-US)


TextEncoder - Web API

TextEncoder
===========

**`TextEncoder`** はコードポイントのストリームを入力として受け取り、 UTF-8 のバイトストリームを出力します。

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

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

`TextEncoder()`

新たに生成した `TextEncoder` を返します。これは、 UTF-8 エンコーディングのバイトストリームを生成します。

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

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

`TextEncoder.prototype.encoding` 読取専用

常に `utf-8` を返します。

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

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

`TextEncoder.encode()`

入力として文字列を取り、 UTF-8 でエンコードされたテキストを含む `Uint8Array` を返します。

`TextEncoder.encodeInto()`

エンコードする文字列と、 UTF-8 でエンコードされたテキストをが入る宛先の `Uint8Array` を取り、エンコーディングの進捗を示す辞書オブジェクトを返します。これは `encode()` よりも新しく、より性能が高くなる可能性があります。

例
-

```js
const encoder = new TextEncoder();
const view = encoder.encode("€");
console.log(view); // Uint8Array(3) [226, 130, 172]
```

仕様書
---

| Specification |
| --- |
| Encoding Standard # interface-textencoder |

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

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

関連情報
----

* 逆の操作を表す `TextDecoder` インターフェイス。
* Node.js supports global export from v11.0.0


XMLHttpRequest - Web API

XMLHttpRequest
==============

`XMLHttpRequest` (XHR) オブジェクトは、サーバーと対話するために使用されます。ページ全体を更新する必要なしに、データを受け取ることができます。これでユーザーの作業を中断させることなく、ウェブページの一部を更新することができます。

EventTarget

XMLHttpRequestEventTarget

XMLHttpRequest
`XMLHttpRequest` という名前ではあるものの、 XML だけでなく、あらゆる種類のデータを受け取るために使用することができます。

通信においてサーバーからのイベントデータやメッセージデータの受信を含む必要があるのであれば、サーバー送信イベントの `EventSource` インターフェイスを使用することも検討してください。全二重の通信では、 WebSocket の方が良いかもしれません。

**注:** This feature is available in Web Workers, except for Service Workers

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

`XMLHttpRequest()`

XMLHttpRequest を初期化するコンストラクターです。これは、他のメソッドを呼び出す前に呼び出さなければなりません。

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

*このインターフェイスは、 `XMLHttpRequestEventTarget` および `EventTarget` のプロパティを継承しています。*

`XMLHttpRequest.readyState` 読取専用

リクエストの状態を表す数値を返します。

`XMLHttpRequest.response` 読取専用

`ArrayBuffer`、`Blob`、`Document`、JavaScript オブジェクト、文字列の何れか（`XMLHttpRequest.responseType` の値による）で、リクエストのエンティティ本体を返します。

`XMLHttpRequest.responseText` 読取専用

文字列で、リクエストに対するレスポンスをテキスト形式で返すか、リクエストが失敗した場合や、まだ送信されていない場合は `null` を返します。

`XMLHttpRequest.responseType`

レスポンスの種類を示します。

`XMLHttpRequest.responseURL` 読取専用

レスポンスのシリアライズされた URL、または URL が null であれば空文字列を返します。

`XMLHttpRequest.responseXML` 読取専用

`Document` でリクエストに対するレスポンスが入ったを返すか、またはリクエストが成功しなかった場合、まだ送信されていない場合、 XML または HTML として解釈できなかった場合は `null` を返します。ウェブワーカーでは利用できません。

`XMLHttpRequest.status` 読取専用

リクエストの HTTP レスポンスステータスコードを返します。

`XMLHttpRequest.statusText` 読取専用

文字列で、HTTP サーバーから返ってきたレスポンス文字列を返します。 `XMLHttpRequest.status` とは異なり、（"`OK`" のような）レスポンスメッセージの完全な文が含まれています。

**メモ:** HTTP/2 仕様書 RFC 7540, セクション 8.1.2.4: Response Pseudo-Header Fields によれば、 HTTP/2 では、 HTTP/1.1 のステータス行に含まれていたバージョンや原因の文を伝える方法が定義されていません。

`XMLHttpRequest.timeout`

リクエストを自動的に終了するまでの時間をミリ秒単位で表します。

`XMLHttpRequest.upload` 読取専用

`XMLHttpRequestUpload` で、アップロードプロセスを表します。

`XMLHttpRequest.withCredentials`

サイト間の `Access-Control` リクエストでクッキーや認証ヘッダーなどの資格情報を使用する場合は `true` を返します。そうでなければ `false` を返します。

### 標準外のプロパティ

`XMLHttpRequest.channel` 読取専用

リクエストの実行の際にオブジェクトによって使われるチャンネルです。

`XMLHttpRequest.mozAnon` 読取専用

論理値です。 true の場合、リクエストを Cookie や認証ヘッダーを伴わずに送信します。

`XMLHttpRequest.mozSystem` 読取専用

論理値です。 true の場合、リクエストで同一オリジンポリシーは適用されません。

`XMLHttpRequest.mozBackgroundRequest`

論理値です。このオブジェクトがバックグラウンドサービスのリクエストを表しているかどうかを示します。

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

`XMLHttpRequest.abort()`

リクエストがすでに送信されている場合、リクエストを中止します。

`XMLHttpRequest.getAllResponseHeaders()`

すべてのレスポンスヘッダーを、 CRLF で区切り、文字列として返します。レスポンスを何も受け取らなかった場合は `null` を返します。

`XMLHttpRequest.getResponseHeader()`

指定したヘッダーを含む文字列を返します。レスポンスを受信していない、またはレスポンス内に指定したヘッダーが存在しない場合は `null` を返します。

`XMLHttpRequest.open()`

リクエストを初期化します。

`XMLHttpRequest.overrideMimeType()`

サーバーから返ってくる MIME タイプを上書きします。

`XMLHttpRequest.send()`

リクエストを送信します。このリクエストが非同期（既定）の場合、このメソッドはリクエストが送るとすぐに返ります。

`XMLHttpRequest.setRequestHeader()`

HTTP リクエストヘッダーの値を設定します。 `setRequestHeader()` は `open()` の後、および `send()` の前に呼び出さなくてはいけません。

イベント
----

`abort`

 例えばプログラムが `XMLHttpRequest.abort()` を呼び出した時など、リクエストが中断されたときに発生します。
 `onabort` イベントハンドラープロパティを通して利用することもできます。

`error`

 リクエストでエラーが発生したときに発生します。
 `onerror` イベントハンドラープロパティを通して利用することもできます。

`load`

`XMLHttpRequest` のトランザクションが成功裏に完了したときに発生します。
 `onload` イベントハンドラープロパティを通して利用することもできます。

`loadend`

 リクエストが完了したときに、成功した場合（`load` の後）、成功しなかった場合（`abort` または `error` の後）のどちらでも発生します。
 `onloadend` イベントハンドラープロパティを通して利用することもできます。

`loadstart`

 リクエストがデータを読み込み始めたときに発生します。
 `onloadstart` イベントハンドラープロパティを通して利用することもできます。

`progress`

 リクエストがもっとデータを受信した際に定期的に発生します。
 `onprogress` イベントハンドラープロパティを通して利用することもできます。

`readystatechange`

`readyState` プロパティが変化するたびに発生します。
 `onreadystatechange` イベントハンドラープロパティを通して利用することもできます。

`timeout`

 プリセット時間が過ぎたために進行が終了したときに発生します。
 `ontimeout` イベントハンドラープロパティを通して利用することもできます。

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # interface-xmlhttprequest |

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

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

関連情報
----

* `XMLSerializer`: DOM ツリーの XML へのシリアライズ
* XMLHttpRequest の使用
* フェッチ API


GamepadEvent - Web API

GamepadEvent
============

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

GamepadEvent はゲームパッド API のインターフェイスで、システムに接続されているゲームパッドへの参照が含まれています。これは、ゲームパッドイベント `gamepadconnected` と `gamepaddisconnected` が応答として発生するものです。

Event

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

`GamepadEvent()`

新しい `GamepadEvent` オブジェクトを返します。

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

`GamepadEvent.gamepad` 読取専用

発生したイベントの関連するゲームパッドデータへのアクセスを提供する `Gamepad` オブジェクトを返します。

例
-

ゲームパッドプロパティは、起動された `gamepadconnected` イベントで呼び出されます。

```js
window.addEventListener("gamepadconnected", (e) => {
  console.log(
    "Gamepad connected at index %d: %s. %d buttons, %d axes.",
    e.gamepad.index,
    e.gamepad.id,
    e.gamepad.buttons.length,
    e.gamepad.axes.length,
  );
});
```

また `gamepaddisconnected` イベントでも呼び出されます。

```js
window.addEventListener("gamepaddisconnected", (e) => {
  console.log(
    "Gamepad disconnected from index %d: %s",
    e.gamepad.index,
    e.gamepad.id,
  );
});
```

仕様書
---

| Specification |
| --- |
| Gamepad # gamepadevent-interface |

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

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

関連情報
----

ゲームパッド API の使用


Client - Web API

Client
======

**`Client`** インターフェイスは、`Worker` や `SharedWorker` などの実行可能なコンテキストを表します。`Window` クライアントは、より具体的な `WindowClient` によって表されます。`Client`/`WindowClient` オブジェクトは `Clients.matchAll()` や `Clients.get()` などのメソッドから取得できます。

メソッド
----

`Client.postMessage()`

メッセージをクライアントに送信します。

プロパティ
-----

`Client.id` 読取専用

文字列としてのクライアントの汎用一意識別子。

`Client.type` 読取専用

文字列としてのクライアントの種類。`"window"`、`"worker"`、`"sharedworker"` のいずれかです。

`Client.url` 読取専用

文字列としてのクライアントの URL。

仕様
--

| Specification |
| --- |
| Service Workers # client-interface |

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

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

関連情報
----

* サービスワーカーの使用
* Is ServiceWorker ready?（英語）
* プロミス


PerformanceNavigation - Web API

PerformanceNavigation
=====================

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

古い **`PerformanceNavigation`** インターフェイスは、現在のドキュメントへのナビゲーションがどのように行われたかに関する情報を表します。

**警告:** このインターフェイスは Navigation Timing Level 2 仕様書では非推奨です。
 代わりに `PerformanceNavigationTiming` インターフェイスを使用してください。

この型のオブジェクトは、`Performance.navigation` 読み取り専用属性を呼び出すことによって取得できます。

プロパティ
-----

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

`PerformanceNavigation.type` 読取専用
非推奨

`unsigned short` で、このページへのナビゲーションがどのように行われたかを示します。取りうる値は次のとおりです。

`TYPE_NAVIGATE` (0)

リンク、ブックマーク、フォーム送信、またはスクリプトを使用するか、アドレスバーに URL を入力してページにアクセスしました。

`TYPE_RELOAD` (1)

このページには、[再読み込み] ボタンをクリックするか、`Location.reload()` メソッドを介してアクセスしました。

`TYPE_BACK_FORWARD` (2)

このページには履歴をたどってアクセスしました。

`TYPE_RESERVED` (255)

その他の方法で。

`PerformanceNavigation.redirectCount` 読取専用
非推奨

`unsigned short` で、ページに到達する前に行われたリダイレクトの数を表します。

メソッド
----

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

非推奨 `PerformanceNavigation.toJSON()` (en-US)

`PerformanceNavigation` オブジェクトを表す json オブジェクトを返す jsonizer です。

仕様書
---

 この機能は標準化の予定がなくなりました。 Navigation Timing Level 2 仕様書で非推奨になったためです。
 代わりに `PerformanceNavigationTiming` インターフェイスを使用してください。

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

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

関連情報
----

* この型のオブジェクトへのアクセスを許可する `Performance`
* `PerformanceNavigationTiming` (ナビゲーションタイミングレベル 2 の一部)
Experimental


MessageChannel - Web API

MessageChannel
==============

Channel Messaging API の **`MessageChannel`** インターフェースは、新しいメッセージチャンネルを作成し、2 つの `MessagePort` プロパティを通して、その間でデータを送信できます。

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

プロパティ
-----

`MessageChannel.port1` 読取専用

チャンネルの port1 を返します。

`MessageChannel.port2` 読取専用

チャンネルの port2 を返します。

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

`MessageChannel()`

2 つの新しい `MessagePort` オブジェクトを持つ 新しい `MessageChannel` オブジェクトを返します。

例
-

次のコードブロックでは、`MessageChannel.MessageChannel` コンストラクタを使用して作成された新しいチャンネルを知ることができます。`<iframe>` が読み込まれると、`MessagePort.postMessage` にメッセージを添えて `MessageChannel.port2` を `<iframe>` へ渡します。すると、`handleMessage` ハンドラが `<iframe>` から返送されたメッセージに (`MessagePort.onmessage` を使用して) 返答し、これを段落に挿入します。

```js
var channel = new MessageChannel();
var para = document.querySelector("p");

var ifr = document.querySelector("iframe");
var otherWindow = ifr.contentWindow;

ifr.addEventListener("load", iframeLoaded, false);

function iframeLoaded() {
  otherWindow.postMessage("Hello from the main page!", "\*", [channel.port2]);
}

channel.port1.onmessage = handleMessage;
function handleMessage(e) {
  para.innerHTML = e.data;
}
```

完全に動作する例は、Github 上の channel messaging basic demo を参照してください (実際のデモも実行できます)。

仕様
--

| Specification |
| --- |
| HTML Standard # message-channels |

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

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

関連情報
----

* Using channel messaging


RTCDataChannel - Web API

RTCDataChannel
==============

**`RTCDataChannel`** インターフェイスは、2 つのピア間で双方向に任意のデータを転送するためのネットワークチャンネルを表現します。すべてのデータチャンネルは `RTCPeerConnection` に関連付けられており、それぞれのぴあコネクションは理論上、最大 65,534 個のデータチャンネルを持つことができます（実際の上限はブラウザーごとに異なります）。

データチャンネルを作成してリモートのピアに参加するかを問い合わせるには、`RTCPeerConnection` の `createDataChannel()` (en-US) メソッドを呼び出します。データ交換に招かれているピアは `datachannel` (en-US) イベント (`RTCDataChannelEvent` 型) を受け取って、コネクションにデータチャンネルが追加されたことを知ります。

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

EventTarget

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

*`EventTarget` からプロパティを継承しています。*

`binaryType` (en-US)

 文字列で、 `RTCDataChannel` で受信したバイナリーデータを表現するために使用されるオブジェクトの種類を指定します。
 値は `WebSocket.binaryType` プロパティで許可されているものと同じです。
 `Blob` オブジェクトを使用する場合は `blob`、 `ArrayBuffer` オブジェクトを使用する場合は `arraybuffer` を指定します。
 既定値は `blob` です。

`bufferedAmount` (en-US) 読取専用

データチャンネルで送信するために現在キューイングされているデータのバイト数を返します。

`bufferedAmountLowThreshold` (en-US)

 バッファリングされた送信データのうち、 "low" とみなされるバイト数を指定します。
 既定値は 0 です。

`id` (en-US) 読取専用

`RTCDataChannel` を一意に識別するための ID 番号（0 から 65,534 の間）を返します。

`label` (en-US) 読取専用

 文字列で、データチャンネルを記述している名前を返します。
 このラベルは一意である必要はありません。

`maxPacketLifeTime` (en-US) 読取専用

データチャンネルが作成されたときに設定された、ブラウザーがメッセージの送信を試みるのにかかる許容時間 （ミリ秒単位）、または `null` を返します。

`maxRetransmits` (en-US) 読取専用

データチャンネルが作成されたときに設定された、ブラウザーがあきらめる前にメッセージを再送信しようとする最大回数、または最大回数がないことを示す `null` を返します。

`negotiated` (en-US) 読取専用

`RTCDataChannel` の接続が、ウェブアプリケーションによって交渉されたのか (`true`) あるいは WebRTC レイヤーによって交渉されたのか (`false`) を示します。
 既定値は `false` です。

`ordered` (en-US) 読取専用

 データチャンネルのメッセージが順番通りに配送されることを保証するかどうかを示します。
 既定値は `true` で、データチャンネルが実際に順序どおりに配送されることを示します。

`protocol` (en-US) 読取専用

 使用されているサブプロトコルの名前を格納した文字列を返します。
 データチャンネルの作成時にプロトコルが指定されなかった場合、このプロパティの値は空文字列 (`""`) となります。

`readyState` (en-US) 読取専用

 データチャンネルの基盤となるデータ接続の状態を示す文字列を返します。
 `connecting`, `open`, `closing`, `closed` の値のいずれかを持つ可能性があります。

### 古いプロパティ

`reliable` (en-US) 読取専用
非推奨

Non-standard

データチャンネルが *reliable* であるかどうかを示します。

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

*`EventTarget` からもメソッドを継承しています。*

`close()` (en-US)

`RTCDataChannel` を閉じました。
 どちらのピアもこのメソッドを呼び出してチャンネルの閉鎖を開始することが許可されています。

`send()` (en-US)

データチャンネルを経由してリモートピアーにデータを送信します。

### イベント

`bufferedamountlow` (en-US)

送信データバッファー内のデータバイト数が `bufferedAmountLowThreshold` (en-US) で指定する値以下になると送信されます。

`close` (en-US)

基盤となるデータトランスポートが閉じられたときに送信されます。

`closing` (en-US)

基盤となるデータトランスポートが閉じ始めようとするときに送られます。

`error` (en-US)

データチャンネルにエラーが発生したときに送信されます。

`message` (en-US)

 リモートピアからメッセージを受信したときに送信されます。
 メッセージのコンテンツは、イベントの `data` プロパティで得ることができます。

`open` (en-US)

データチャンネルが最初に開かれたとき、または既存のデータチャンネルの基盤となる接続が再び開かれたときに送信されます。

データ形式
-----

基礎となるデータ形式は、 IEEE の仕様書 SDP Offer/Answer Procedures for SCTP over DTLS Transport(RFC 8841) によって定義されています。現在の形式では、そのプロトコルを `"UDP/DTLS/SCTP"` (SCTP を運ぶ DTLS を運ぶ UDP) または `"TCP/DTLS/SCTP"` (SCTP を運ぶ DTLS を運ぶ TCP) のいずれかに指定する。古いブラウザーでは `"DTLS/SCTP"` のみを指定することができます。

例
-

```js
const pc = new RTCPeerConnection();
const dc = pc.createDataChannel("my channel");

dc.onmessage = (event) => {
  console.log(`received: ${event.data}`);
};

dc.onopen = () => {
  console.log("datachannel open");
};

dc.onclose = () => {
  console.log("datachannel close");
};
```

仕様書
---

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # rtcdatachannel |

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

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

関連情報
----

* WebRTC API


OTPCredential - Web API

OTPCredential
=============

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

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

WebOTP API の **`OTPCredential`** インターフェイスは、新しいワンタイムパスワードを取得したときに返す属性を持ちます。

Credential

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

*このインターフェイスは、`Credential` からもプロパティを継承します。*

`OTPCredential.code`
Experimental

ワンタイムパスワードです。

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

なし

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

なし

例
-

以下のコードは、SMS の受信時にブラウザーの許可手続きを起動します。許可が得られると、`Promise` が `OTPCredential` オブジェクトで解決します。このコードをシンプルなデモの一部として見る

```js
navigator.credentials
  .get({
    otp: { transport: ["sms"] },
    signal: ac.signal,
  })
  .then((otp) => {
    input.value = otp.code;
    if (form) form.submit();
  })
  .catch((err) => {
    console.error(err);
  });
```

仕様書
---

| Specification |
| --- |
| WebOTP API # OTPCredential |

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

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


SVGEvent - Web API

SVGEvent
========

このセクションには、Scalable Vector Graphics (SVG) イベントリファレンスのドキュメントが含まれています。

このセクションにおいて
-----------

| 項目 | 説明 |
| --- | --- |
| **onabort** | 要素が完全に読み込まれる前にページの読み込みが停止したときに発生します。 |
| **onerror** | 要素が正しく読み込まれなかったり、スクリプトが正しく実行されなかったりすると発生します。 |
| **onload** | ブラウザが要素とそのすべての子孫を完全に解析したときに発生します。 |
| **onresize** | ドキュメントビューのサイズが変更されているときに発生します。 |
| **onscroll** | ドキュメントビューが x 軸、y 軸、または両方の軸に沿って移動されているときに発生します。 |
| **onunload** | ドキュメントがウィンドウまたはフレームから削除されたときに発生します。 |
| **onzoom** | ドキュメントのズームレベルまたは**currentScale**プロパティが変更されたときに発生します。 |


createImageBitmap() - Web API

createImageBitmap()
===================

**`createImageBitmap()`** メソッドは、指定されたソースからビットマップを作成し、オプションでそのソースの一部のみを切り抜きます。このメソッドは、ウィンドウとワーカーの両方のグローバルスコープに存在します。このメソッドは、さまざまな画像ソースを受け付け、 `ImageBitmap` に解決する `Promise` を返します。

構文
--

```js
createImageBitmap(image)
createImageBitmap(image, options)
createImageBitmap(image, sx, sy, sw, sh)
createImageBitmap(image, sx, sy, sw, sh, options)
```

### 引数

`image`

画像ソースで、以下のうちの何れかです。

* `HTMLImageElement`
* `SVGImageElement` (en-US)
* `HTMLVideoElement`
* `HTMLCanvasElement`
* `Blob`
* `ImageData`
* `ImageBitmap`
* `OffscreenCanvas` (en-US)

`sx`

`ImageBitmap` が抽出される矩形の参照点の x 座標。

`sy`

`ImageBitmap` が抽出される矩形の参照点の y 座標。

`sw`

`ImageBitmap` が抽出される矩形の幅。この値は負の値にすることができます。

`sh`

`ImageBitmap` が抽出される矩形の高さ。この値は負の値にすることができます。

`options` 省略可

画像の抽出のためのオプションを設定するオブジェクト。利用可能なオプションは以下の通りです。

`imageOrientation`

画像をそのまま表示するか、垂直方向に反転させて表示するかを指定します。`none` （既定値）または `flipY` のいずれかを指定します。

`premultiplyAlpha`

ビットマップのカラーチャンネルをアルファチャンネルで前置増幅するかどうかを指定します。 `none`、`premultiply`、`default` （既定値）のいずれかです。

`colorSpaceConversion`

画像を色空間変換でデコードするかどうかを指定します。 `none` または `default` （既定値）のいずれかを指定します。値 `default` は、実装固有の動作を使用することを示します。

`resizeWidth`

出力幅を示す long 整数です。

`resizeHeight`

出力の高さを示す long 整数です。

`resizeQuality`

出力する寸法に合わせて入力のサイズを変更するために使用するアルゴリズムを指定します。`pixelated`、`low` （既定値）`medium`、`high`のいずれかです、

### 返値

指定された矩形のビットマップデータを保持する `ImageBitmap` オブジェクトに解決する `Promise` を返します。

例
-

### スプライトシートからのスプライト作成

この例では、スプライトシートをロードし、個々のスプライトを抽出し、各スプライトをキャンバスにレンダリングします。スプライトシートとは、複数の小さな画像を含む画像で、それぞれを個別にレンダリングできるようにしたいものです。

```js
const canvas = document.getElementById("myCanvas"),
  ctx = canvas.getContext("2d"),
  image = new Image();

// スプライトシートがロードされるのを待ちます
image.onload = () => {
  Promise.all([
    // スプライトシートから2つのスプライトを切り取ります
    createImageBitmap(image, 0, 0, 32, 32),
    createImageBitmap(image, 32, 0, 32, 32),
  ]).then((sprites) => {
    // 各スプライトをキャンバスに描きます
    ctx.drawImage(sprites[0], 0, 0);
    ctx.drawImage(sprites[1], 32, 32);
  });
};

// 画像ファイルからスプライトシートを読み込みます
image.src = "sprites.png";
```

仕様書
---

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

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

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

関連情報
----

* `CanvasRenderingContext2D.drawImage()`
* `ImageData`


WebGLShader - Web API

WebGLShader
===========

**WebGLShader** は WebGL API の一部で、頂点シェーダーとフラグメントシェーダーを表します。 `WebGLProgram` は両方の種類のシェーダーが必要です。

WebGLObject

WebGLShader解説
--

**WebGLShader** を作成するには `WebGLRenderingContext.createShader` を使用し、それから `WebGLRenderingContext.shaderSource()` を使用して GLSL ソースコードを結び付け、最後に `WebGLRenderingContext.compileShader()` を呼び出してシェーダーを完成させコンパイルします。この時点では **WebGLShader** はまだ使用可能な形になっておらず、 `WebGLProgram` に関連付ける必要があります。

```js
function createShader(gl, sourceCode, type) {
  // gl.VERTEX\_SHADER または gl.FRAGMENT\_SHADER のどちらかをコンパイル
  const shader = gl.createShader(type);
  gl.shaderSource(shader, sourceCode);
  gl.compileShader(shader);

  if (!gl.getShaderParameter(shader, gl.COMPILE\_STATUS)) {
    const info = gl.getShaderInfoLog(shader);
    throw `WebGL プログラムをコンパイルできませんでした。\n\n${info}`;
  }
  return shader;
}
```

シェーダーの取り付けについては `WebGLProgram` を参照してください。

例
-

### 頂点シェーダーの作成

シェーダーのソースコード文字列の書き込みのアクセスには、他にも多くの戦略があることに注意してください。これらの例は説明のためのものです。

```js
const vertexShaderSource =
  "attribute vec4 position;\n" +
  "void main() {\n" +
  " gl\_Position = position;\n" +
  "}\n";

// 上の例の createShader 関数を使う
const vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX\_SHADER);
```

### フラグメントシェーダーの作成

```js
const fragmentShaderSource =
  "void main() {\n" + " gl\_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n" + "}\n";

// 上の例の createShader 関数を使う
const fragmentShader = createShader(
  gl,
  fragmentShaderSource,
  gl.FRAGMENT\_SHADER,
);
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.8 |

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

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

関連情報
----

* `WebGLProgram`
* `WebGLRenderingContext.attachShader()`
* `WebGLRenderingContext.bindAttribLocation()` (en-US)
* `WebGLRenderingContext.compileShader()`
* `WebGLRenderingContext.createProgram()`
* `WebGLRenderingContext.createShader()`
* `WebGLRenderingContext.deleteProgram()` (en-US)
* `WebGLRenderingContext.deleteShader()` (en-US)
* `WebGLRenderingContext.detachShader()` (en-US)
* `WebGLRenderingContext.getAttachedShaders()` (en-US)
* `WebGLRenderingContext.getProgramParameter()` (en-US)
* `WebGLRenderingContext.getProgramInfoLog()` (en-US)
* `WebGLRenderingContext.getShaderParameter()`
* `WebGLRenderingContext.getShaderPrecisionFormat()` (en-US)
* `WebGLRenderingContext.getShaderInfoLog()`
* `WebGLRenderingContext.getShaderSource()` (en-US)
* `WebGLRenderingContext.isProgram()` (en-US)
* `WebGLRenderingContext.isShader()` (en-US)
* `WebGLRenderingContext.linkProgram()`
* `WebGLRenderingContext.shaderSource()`
* `WebGLRenderingContext.useProgram()`
* `WebGLRenderingContext.validateProgram()` (en-US)


HashChangeEvent - Web API

HashChangeEvent
===============

**`HashChangeEvent`** インターフェイスは、URL のフラグメント識別子が変更されたときに発生するイベントを表します。

フラグメント識別子は URL の一部で、`#` 記号からそれに続く部分です。

Event

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

`HashChangeEvent()`

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

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

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

`HashChangeEvent.newURL` 読取専用

ウィンドウが移動しようとしている新しい URL。

`HashChangeEvent.oldURL` 読取専用

ウィンドウがいた直前の URL。

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

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

例
-

### 基本的な例

```js
function locationHashChanged() {
  if (location.hash === "#somecoolfeature") {
    somecoolfeature();
  }
}

window.addEventListener("hashchange", locationHashChanged);
```

仕様書
---

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

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

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

関連イベント
------

* `hashchange`
* `popstate`


PushSubscriptionOptions - Web API

PushSubscriptionOptions
=======================

Push API の **`PushSubscriptionOptions`** インターフェイスは、プッシュサブスクリプションに関連付いたオプションを表します。

`PushSubscription` で `PushSubscription.options` を呼ぶと、読み取り専用の `PushSubscriptionOptions` オブジェクトが返ります。このインターフェイスは自身のコンストラクターを持ちません。

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

`PushSubscriptionOptions.userVisibleOnly` 読取専用

プッシュサブスクリプションがユーザーに見える効果を持つメッセージのみに使われるかどうかを表す `boolean` 値です｡

`PushSubscriptionOptions.applicationServerKey` 読取専用

プッシュサーバーがプッシュサーバーを通じてクライアントアプリケーションにメッセージを送信するのに用いる公開鍵です。

例
-

`PushSubscription` で `PushSubscription.options` を呼ぶと、`PushSubscriptionOptions` オブジェクトが返ります。この例では、これをコンソールに出力します。

```js
navigator.serviceWorker.ready.then((reg) => {
  reg.pushManager.getSubscription().then((subscription) => {
    const options = subscription.options;
    console.log(options); // PushSubscriptionOptions オブジェクト
  });
});
```

仕様書
---

| Specification |
| --- |
| Push API # dom-pushsubscriptionoptions |

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

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


Beacon API - Web API

Beacon API
==========

**`Beacon`** API はウェブサーバーに非同期でブロッキングしないリクエストを送るのに使用されます。リクエストのレスポンスは求めません。`XMLHttpRequest` や Fetch API により行われるリクエストとは違い、ブラウザーはビーコンのリクエストをページがアンロードされる前に開始し、完了するまで処理することを保証します。

Beacon API の主な用途は、クライアント側でのイベントやセッションデータなどの統計情報をサーバーに送ることです。これまでは、ウェブサイトはこの用途に `XMLHttpRequest` を用いていましたが、ブラウザーがこれらの非同期リクエストを送信する保証がない状況がありました。(たとえば、ページがアンロードされようとしているとき) これを打開するため、ウェブサイトはリクエストを同期的にするなどの様々なテクニックに頼っていましたが、これらはレスポンシブ性に悪い影響がありました。ビーコンのリクエストは非同期かつ送信されることが保証されるので、パフォーマンスにおけるよい性質と信頼性を兼ね備えます。

この API を使用する動機と使用法の詳細は、`navigator.sendBeacon()` メソッドのドキュメントを参照してください。

**メモ:** この API は Web Workers では *使用できません*。(`WorkerNavigator` 経由では公開されていません)

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

この API では、1 個のメソッド `navigator.sendBeacon()` が定義されています。

このメソッドは、URL とリクエストで送るデータの 2 個の引数をとります。データの引数は省略可能で、型は `TypedArray`、`DataView`、`Blob`、文字列リテラル、オブジェクト、`FormData` オブジェクトが使用できます。ブラウザーが正常にリクエストを送信用のキューに入れた場合は `true` を返し、そうでない場合は `false` を返します。

仕様書
---

| Specification |
| --- |
| Beacon # sendbeacon-method |

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

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

関連情報
----

* Beacon の仕様書
* Beacon CanIUse データ
* Intercepting beacons through service workers; Ehsan Akhgari; 2015-Apr-08
* https://webkit.org/blog/8821/link-click-analytics-and-privacy/
* Beaconing in Practice


HTMLMediaElement - Web API

HTMLMediaElement
================

**`HTMLMediaElement`** インターフェイスは、 `HTMLElement` に音声や動画で一般的なメディアに関する基本的な能力の対応に必要なプロパティやメソッドを追加します。

`HTMLVideoElement` および `HTMLAudioElement` 要素はどちらも、このインターフェイスを継承しています。

EventTarget

Node

Element

HTMLElement

HTMLMediaElementプロパティ
-----

*このインターフェイスは祖先である `HTMLElement`, `Element`, `Node`, `EventTarget` のプロパティを継承しています。*

`HTMLMediaElement.audioTracks`

`AudioTrackList` で、この要素に含まれる `AudioTrack` オブジェクトを列挙します。

`HTMLMediaElement.autoplay`

論理値で、 HTML の `autoplay` 属性の値を反映し、中断なしに再生できるだけの十分なデータが揃った時点で自動的に再生を始めるかどうかを示します。

**メモ:** ユーザーが期待していない、あるいは望んでいないときに自動的に音声を再生すると、ユーザーに不快な体験をさせることになるため、ほとんどの場合避けるべきですが、例外も存在します。詳しくは、メディアとウェブオーディオ API のガイドを参照してください。ブラウザーは自動再生要求を無視する可能性があることを念頭に置き、コードが自動再生の動作に依存していないことを確認する必要があります。

`HTMLMediaElement.buffered` 読取専用

`buffered` プロパティにアクセスした時点で、ブラウザーがバッファリングしているメディアソースの範囲を（もしあれば） `TimeRanges` オブジェクトで返します。

`HTMLMediaElement.controls`

論理値で、 HTML の `controls` 属性を反映し、リソースを制御するユーザーインターフェイス項目を表示するかどうかを示します。

`HTMLMediaElement.controlsList` 読取専用

ユーザーエージェントが独自のコントロールのセットを表示するたびに、メディア要素に表示するコントロールをユーザーエージェントが選択するのに役立つ `DOMTokenList` を返します。 `DOMTokenList`は、`nodownload`、`nofullscreen`、`noremoteplayback`の 3 つの値のうち 1 つ以上を取ります。

`HTMLMediaElement.crossOrigin`

文字列で、このメディア要素の CORS 設定を示します。

`HTMLMediaElement.currentSrc`読取専用

文字列で、選択されたメディアリソースの絶対 URL を返します。

`HTMLMediaElement.currentTime`

倍精度浮動小数点値で、現在の再生時刻を秒単位で示します。メディアの再生が開始されておらず、シークも行われていない場合、この値はメディアの初期再生時刻となります。この値を設定すると、メディアは新しい時刻にシークされます。この時間は、メディアのタイムラインに対して相対的に指定されます。

`HTMLMediaElement.defaultMuted`

論理値で、HTML の `muted` 属性を反映します。標準状態で音声がミュートされているか、いないかを示します。

`HTMLMediaElement.defaultPlaybackRate`

`double` で、メディアの既定の再生速度を示します。

`HTMLMediaElement.disableRemotePlayback`

論理値で、リモート再生の状態を設定または返却します。メディア要素にリモート再生 UI が許可されているかどうかを示します。

`HTMLMediaElement.duration` 読取専用

読み取り専用の倍精度浮動小数点値で、メディアの総時間を秒単位で示します。メディアデータがない場合、返値は `NaN` となります。メディアの長さが不定 （ライブストリーミングメディアや WebRTC 呼び出しのメディアなど）の場合、 値は `+Infinity` となります。

`HTMLMediaElement.ended` 読取専用

メディア要素の再生が終了したかどうかを示す論理値を返します。

`HTMLMediaElement.error` 読取専用

直近のエラーに対応する `MediaError` (en-US) オブジェクトを返すか、エラーが発生していない場合は `null` を返します。

`HTMLMediaElement.loop`

論理型で、 HTML の `loop` 属性を反映し、末尾に達したときにメディア要素が再び再生を始めるかどうかを示します。

`HTMLMediaElement.mediaKeys` (en-US) 読取専用

`MediaKeys` (en-US) オブジェクトまたは `null` を返します。 MediaKeys は、関連付けられた HTMLMediaElement が再生中にメディアデータの復号に使用できるキーのセットです。

`HTMLMediaElement.muted`

音声がミュートされているかどうかを判断するための論理値です。ミュートされている場合は `true` で、そうでない場合は `false` となります。

`HTMLMediaElement.networkState` 読取専用

ネットワーク経由でメディアを取得する際の現在の状態を示す `unsigned short` （列挙値）を返します。

`HTMLMediaElement.paused` 読取専用

論理値で、メディア要素が一時停止中であるか否かを示します。

`HTMLMediaElement.playbackRate`

`double` で、メディアの再生レートを示します。

`HTMLMediaElement.played` 読取専用

ブラウザーが再生したメディアソースの範囲を含む `TimeRanges` オブジェクトを返します（もしあれば）。

`HTMLMediaElement.preload`

HTML の `preload` 属性を反映した文字列で、どのデータを先読みすべきかを示します。取りうる値は `none`, `metadata`, `auto` です。

`HTMLMediaElement.preservesPitch`

音のピッチを保持するかどうかを決定する論理値です。 `false` に設定すると、ピッチは音声の速度に合わせられます。

`HTMLMediaElement.readyState` 読取専用

メディアの準備状態を示す `unsigned short` （列挙値）を返します。

`HTMLMediaElement.seekable` 読取専用

ユーザーがシークできる時間帯があれば、それを含む `TimeRanges` オブジェクトを返します。

`HTMLMediaElement.seeking` 読取専用

メディアが新しい位置へのシーク中であるかどうかを論理値で返します。

`HTMLMediaElement.sinkId` 読取専用
Experimental

出力を配信する音声機器の一意の ID を文字列で返します。ユーザーエージェントの既定値を使用している場合は、空の文字列を返します。この ID は `MediaDevices.enumerateDevices()` から返される `MediaDeviceInfo.deviceid` 値、 `id-multimedia` 値、 `id-communications` 値のいずれかである必要があります。

`HTMLMediaElement.src`

使用するメディアリソースの URL を記した HTML の `src` 属性を反映した文字列です。

`HTMLMediaElement.srcObject`

現在の `HTMLMediaElement` で再生する、または再生したメディアを表す `MediaStream`、または割り当てられていない場合は `null` です。

`HTMLMediaElement.textTracks` 読取専用

`TextTrackList` (en-US) オブジェクトで、この要素に含まれる `TextTrack` オブジェクトのリストを返します。

`HTMLMediaElement.videoTracks` 読取専用

`VideoTrackList` オブジェクトで、この要素に含まれる `VideoTrack` オブジェクトのリストを返します。

`HTMLMediaElement.volume`

`double` で音声の音量を示します。 0.0 (無音) から 1.0 (最大) の間です。

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

`HTMLMediaElement.onencrypted` (en-US)

メディアが暗号化されたときに呼び出されるイベントハンドラーを設定します。

`HTMLMediaElement.onwaitingforkey` (en-US)

暗号化キー待ちで再生がブロックされたときに呼び出されるイベントハンドラーを設定します。

廃止されたプロパティ
----------

これらのプロパティは廃止されており、たとえブラウザーがまだ対応していても使わないでください。

`HTMLMediaElement.controller`
非推奨

Non-standard

要素に割り当てられたメディアコントローラーを表す `MediaController` オブジェクト、または何も割り当てられていない場合は `null` です。

`HTMLMediaElement.mediaGroup`
非推奨

Non-standard

所属する要素のグループ名を示す HTML の `mediagroup` 属性を反映した文字列です。メディア要素のグループは、共通の `MediaController` を共有します。

`HTMLMediaElement.mozAudioCaptured` 読取専用
Non-standard

非推奨

論理値を返します。オーディオストリームキャプチャに関連します。

`HTMLMediaElement.mozFragmentEnd`
Non-standard

非推奨

`double` で、メディア要素が `currentSrc` のフラグメント URI を持っている場合はフラグメントの終了時刻にアクセスすることができます。それ以外の場合はメディアの再生時間と同じです。

メソッド
----

*このインターフェイスには祖先である `HTMLElement`, `Element`, `Node`, `EventTarget` から継承したメソッドもあります。*

`HTMLMediaElement.addTextTrack()`

メディア要素に新しい `TextTrack` オブジェクト（字幕用トラックなど）を追加します。これはプログラム的なインターフェイスのみで、 DOM には影響しません。

`HTMLMediaElement.captureStream()`

メディアコンテンツのストリームをキャプチャして `MediaStream` 返します。

`HTMLMediaElement.canPlayType()`

MIME メディア種別を指定する文字列（潜在的には `codecs` 引数 (en-US)も含む）が与えられた場合、 `canPlayType()` は、メディアが再生可能であるべき場合には文字列 `probably` を、メディアが再生されるかどうかを決定するのに十分な情報がない場合には `maybe` を、メディアが再生できない場合には空文字列を返します。

`HTMLMediaElement.fastSeek()`

低い精度で素早く指定時刻にシークします。

`HTMLMediaElement.load()`

メディアを先頭にリセットし、 `src` 属性または `<source>` 要素を使用して提供されたソースのうちから、最適なソースを選択します。

`HTMLMediaElement.pause()`

再生を一時停止します。

`HTMLMediaElement.play()`

再生を開始します。

`HTMLMediaElement.seekToNextFrame()`
非推奨

メディア内の次のフレームをシークします。この非標準的で実験的なメソッドにより、メディアの読み込みとレンダリングをカスタム速度で手動で行ったり、メディアをフレーム単位で移動してフィルタリングやその他の操作を行ったりすることが可能になります。

`HTMLMediaElement.setMediaKeys()`

`Promise` オブジェクトを返します。再生に利用する`MediaKeys` (en-US) を指定します。

`HTMLMediaElement.setSinkId()`

出力に使用するオーディオ機器の ID を設定し、`Promise` を返します。これは、アプリケーションが指定された機器の使用が許可されている場合のみ動作します。

廃止されたメソッド
---------

*これらのメソッドは廃止されているため、たとえブラウザーがまだ対応していても使わないでください。*

`HTMLMediaElement.mozCaptureStream()`
Non-standard

[説明を入力]

`HTMLMediaElement.mozCaptureStreamUntilEnded()`
Non-standard

非推奨

[説明を入力]

`HTMLMediaElement.mozGetMetadata()`
Non-standard

非推奨

再生中のメディアデータに対するメタデータを `Object` として返します。呼び出すたびに、オブジェクトのコピーが新しく作られます。このメソッドを呼び出すには、loadedmetadata イベントが発行された後でなければなりません。

イベント
----

*親である `HTMLElement`* からメソッドを継承しています。これらのイベントを待ち受けするには、 `addEventListener()` を使用するか、このインターフェイスの `onイベント名` プロパティにイベントリスナーを代入するかしてください。

`abort`

リソースが完全にロードされておらず、かつその結果がエラーでない場合に発行されます。

`canplay`

ユーザーエージェントがメディアを再生することはできるが、コンテンツのさらなるバッファリングのために停止することなくメディアを最後まで再生するには十分なデータが読み込まれて**いない**と推定されるときに発行されます。

`canplaythrough`

ユーザーエージェントがメディアを再生することができ、コンテンツのさらなるバッファリングのために停止することなく、メディアを最後まで再生するのに十分なデータが読み込まれたと推定されるときに発行されます。

`durationchange`

duration プロパティが更新されたときに発行されます。

`emptied`

メディアが空になったときに発行されます。例えば、メディアがすでに読み込まれており（または部分的に読み込まれており）、再読み込みのために `HTMLMediaElement.load()` メソッドが呼ばれた場合などです。

`ended`

メディア（<audio> または <video>）の終端に到達したとき、またはそれ以降のデータがないために再生が停止したときに発行されます。

`error`

エラーによりリソースの読み込みができなかった場合に発行されます。

`loadeddata`

メディアの 1 フレーム目の読み込みが終了した時点で発行されます。

`loadedmetadata`

メタデータが読み込まれたときに発行されます。

`loadstart`

ブラウザーがリソースの読み込みを開始したときに発行されます。

`pause`

再生を一時停止する要求が処理され、アクティビティが一時停止状態になったときに発行されます。最も一般的には、メディアの `HTMLMediaElement.pause()` メソッドが呼び出されたときに発行されます。

`play`

`HTMLMediaElement.play()` メソッド、または `autoplay` 属性の結果として、 `paused` プロパティが `true` から `false` に変更されたときに発行されます。

`playing`

データ不足で一時停止または遅延していた再生が開始できる状態になったときに発行されます。

`progress`

ブラウザーがリソースを読み込む際に、定期的に発行されます。

`ratechange`

再生速度が変更されたときに発行されます。

`resize`

`videoWidth` および `videoHeight` プロパティの一方または両方が更新された直後に発行されます。

`seeked`

シーク動作が完了したときに発行されます。

`seeking`

シーク動作が開始されたときに発行されます。

`stalled`

ユーザーエージェントがメディアデータを取得しようとしたが，予想に反してデータが得られなかった場合に発行されます。

`suspend`

メディアデータの読み込みが中断されたときに発行されます。

`timeupdate`

`currentTime` プロパティで示される時刻が更新されたときに発行されます。

`volumechange`

音量が変更されたときに発行されます。

`waiting`

一時的なデータ不足で再生が停止したときに発行されます。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlmediaelement |

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

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

関連情報
----

### リファレンス

* HTML の `<video>` および `<audio>` 要素
* `HTMLMediaElement` を継承している `HTMLVideoElement` および `HTMLAudioElement` インターフェイス
### ガイド

* ウェブメディア技術
* 学習領域: 動画および音声コンテンツ
* ウェブ上のメディア型と形式のガイド
* ウェブコンテンツにおけるメディア対応の問題の扱い (en-US)


TreeWalker - Web API

TreeWalker
==========

**`TreeWalker`** オブジェクトは、文書のサブツリーのノードおよびその位置を表します。

`TreeWalker` は `document` オブジェクトの `Document.createTreeWalker()` (en-US) メソッドを使用して作成可能です。

プロパティ
-----

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

`TreeWalker.root` 読取専用

`TreeWalker` を作成したときに指定したルートノードを表す `Node` を返します。

`TreeWalker.whatToShow` (en-US) 読取専用

提供しなければならない `Node` の型を表す定数で構成されるビットマスクである `unsigned long` を返します。一致しないノードはスキップされますが、その子は関連があれば含まれます。使用できる値は以下のとおりです。

| 定数 | 数値 | 説明 |
| --- | --- | --- |
| `NodeFilter.SHOW_ALL` | `4294967295` (`unsigned long` の最大値) | すべてのノードを表示します。 |
| `NodeFilter.SHOW_ATTRIBUTE`
非推奨
 | `2` | 属性の `Attr` ノードを表示します。これはルートとして `Attr` を含む `TreeWalker` を作成する場合に限り、意味があります。この場合は、反復処理や走査処理の最初の位置に属性ノードが現れることを意味します。属性はほかのノードの子ではありませんので、文書ツリーを走査処理するときは出現しません。 |
| `NodeFilter.SHOW_CDATA_SECTION`
非推奨
 | `8` | `CDATASection` ノードを表示します。 |
| `NodeFilter.SHOW_COMMENT` | `128` | `Comment` ノードを表示します。 |
| `NodeFilter.SHOW_DOCUMENT` | `256` | `Document` ノードを表示します。 |
| `NodeFilter.SHOW_DOCUMENT_FRAGMENT` | `1024` | `DocumentFragment` ノードを表示します。 |
| `NodeFilter.SHOW_DOCUMENT_TYPE` | `512` | `DocumentType` ノードを表示します。 |
| `NodeFilter.SHOW_ELEMENT` | `1` | `Element` ノードを表示します。 |
| `NodeFilter.SHOW_ENTITY`
非推奨
 | `32` | 旧式、もう使えません。 |
| `NodeFilter.SHOW_ENTITY_REFERENCE`
非推奨
 | `16` | 旧式、もう使えません。 |
| `NodeFilter.SHOW_NOTATION`
非推奨
 | `2048` | 旧式、もう使えません。 |
| `NodeFilter.SHOW_PROCESSING_INSTRUCTION` | `64` | `ProcessingInstruction` ノードを表示します。 |
| `NodeFilter.SHOW_TEXT` | `4` | `Text` ノードを表示します。 |

`TreeWalker.filter` (en-US) 読取専用

関連するノードを選択するために使用した `NodeFilter` (en-US) を返します。

`TreeWalker.currentNode` (en-US)

`TreeWalker` の現在の位置の `Node` です。

メソッド
----

*このインターフェイスが継承しているメソッドはありません。*

**メモ:** `TreeWalker` のコンテキストでは、 `whatToShow` と `filter` 引数で決定される論理ビューにノードが存在する場合、ノードは*可視状態*となります。(ノードが画面上に表示されているかどうかは関係ありません)。

`TreeWalker.parentNode()` (en-US)

現在の `Node` を文書内の順序で最初の*可視状態*である祖先ノードに移動して、発見したノードを返します。また、現在のノードをこの位置に移動します。該当するノードがない、あるいはオブジェクト生成時に定義した*ルートノード*より前にある場合は、`null` を返して現在のノードは変更しません。

`TreeWalker.firstChild()` (en-US)

現在の `Node` を現在のノードで最初の*可視状態*である子に移動して、発見した子ノードを返します。また、現在のノードをこの子ノードに移動します。該当する子がない場合は、`null` を返して現在のノードは変更しません。なお、 `firstChild()` が返すノードは、 `TreeWalker` オブジェクトのインスタンス化時に設定された `whatToShow` の値に依存することに注意してください。次のような HTML ツリーを想定して、 `whatToShow` を `NodeFilter.SHOW_ALL` に設定して `firstChild()` を呼び出すと、`HTMLDivElement` オブジェクトではなく `Text` ノードが返されます。

```html
<!DOCTYPE html>
<html>
  <head><title>Demo</title>
  <body>
    <div id="container"></div>
  </body>
</html>
```

```js
let walker = document.createTreeWalker(document.body, NodeFilter.SHOW\_ALL);
let node = walker.firstChild(); // nodeName: "#text"
```

しかし、次のようにすることができます。

```js
let walker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW\_ELEMENT,
);
let node = walker.firstChild(); // nodeName: "DIV"
```

同じことが `nextSibling()`, `previousSibling()`, `firstChild()`, `lastChild()` でも言えます。

`TreeWalker.lastChild()` (en-US)

現在の `Node` を現在のノードで最後の*可視状態*である子に移動して、発見した子ノードを返します。また、現在のノードをこの子ノードに移動します。該当する子がない場合は、`null` を返して現在のノードは変更しません。

`TreeWalker.previousSibling()` (en-US)

現在の `Node` を前の兄弟に移動して、発見した兄弟ノードを返します。該当するノードがない場合は、 `null` を返して現在のノードは変更しません。

`TreeWalker.nextSibling()` (en-US)

現在の `Node` を次の兄弟に移動して、発見した兄弟ノードを返します。該当するノードがない場合は、 `null` を返して現在のノードは変更しません。

`TreeWalker.previousNode()` (en-US)

現在の `Node` を文書内の順序で前の*可視状態である*ノードに移動して、発見したノードを返します。また、現在のノードをこの位置に移動します。該当するノードがない、あるいはオブジェクト生成時に定義した*ルートノード*より前にある場合は、`null` を返して現在のノードは変更しません。

`TreeWalker.nextNode()` (en-US)

現在の `Node` を文書内の順序で次の*可視状態である*ノードに移動して、発見したノードを返します。また、現在のノードをこの位置に移動します。該当するノードがない場合は、`null` を返して現在のノードは変更しません。

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-treewalker |

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

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

関連情報
----

* 作成するメソッド: `Document.createTreeWalker()` (en-US)
* 関連インターフェイス: `NodeFilter` (en-US), `NodeIterator`


PaymentRequestUpdateEvent - Web API

PaymentRequestUpdateEvent
=========================

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

**`PaymentRequestUpdateEvent`** インターフェイスは、待機中の `PaymentRequest` インスタンスの配送関連情報に変更が加えられたときに `PaymentRequest` に送られるイベント用に使用します。それらのイベントは以下の通りです。

`shippingaddresschange` 安全なコンテキスト用

ユーザーが配送先を変更するたびに配信されます。

`shippingoptionchange` 安全なコンテキスト用

ユーザーが配送オプションを変更するたびに配信されます。

Event

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

`PaymentRequestUpdateEvent()` 安全なコンテキスト用

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

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

*親インターフェイスである `Event` から継承されたプロパティのみを提供しています。*

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

*親インターフェイスである `Event` から継承されたプロパティに加え、`PaymentRequestUpdateEvent` は以下のメソッドを提供しています。*

`PaymentRequestUpdateEvent.updateWith()` 安全なコンテキスト用

イベントハンドラーは、決済リクエストに含める情報を変更する必要があると判断した場合、または新しい情報を追加する必要があると判断した場合、置換または追加する必要がある情報を指定して `updateWith()` を呼び出します。

仕様書
---

| Specification |
| --- |
| Payment Request API 1.1 # paymentrequestupdateevent-interface |

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

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

関連情報
----

* 決済リクエスト API の使用


AudioScheduledSourceNode - Web API

AudioScheduledSourceNode
========================

`AudioScheduledSourceNode` インターフェイス（ウェブオーディオ API の一部）は、オーディオソースノード各種の親インターフェイスであり、必要に応じ、指定された時間で開始や停止を行う機能を持ちます。具体的には、このインターフェイスでは、`start()` や、`stop()` メソッドの他、`ended` イベントを定義しています。

**メモ:** `AudioScheduledSourceNode` オブジェクトは、直接作成することはできません。
 かわりに、`AudioBufferSourceNode` や、`OscillatorNode`、または `ConstantSourceNode` を使用してください。

特に明記しない限り、 `AudioScheduledSourceNode` をベースにしたノードは、再生されていない時（つまり、 `start()` の前や、 `stop()` の後）は、無音を出力します。無音は、値がゼロ (0) であるサンプルストリームを、常に流し続けることで表現されています。

EventTarget

AudioNode

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

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

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

*親インターフェイスである `AudioNode` からメソッドを継承しており、さらに以下のメソッドがあります。*

`start()`

指定した時刻に、ノードが特定の音を再生するようスケジュールします。時刻を指定しない場合、ノードはすぐに再生を開始します。

`stop()`

指定した時刻に、ノードの再生を停止するよう、スケジュールします。時刻を指定しない場合、ノードはすぐに停止します。

イベント
----

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

`ended`

ソースノードが、所定の停止時間に達した、音声の全時間が演奏された、あるいはバッファの全体が演奏されたなどの理由で、再生を停止したときに発行されます。

仕様書
---

| Specification |
| --- |
| Web Audio API # AudioScheduledSourceNode |

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

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

関連情報
----

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


XMLHttpRequest API - Web API

XMLHttpRequest API
==================

**注:** This feature is available in Web Workers, except for Service Workers

**XMLHttpRequest API** を使用すことで、ウェブアプリケーションがウェブサーバーに HTTP リクエストを行い、JavaScript を使用してプログラムでレスポンスを受け取ることができます。これによりウェブサイトは、新しいページに移動することなく、サーバーからのデータでページの一部だけを更新することができます。この方法は、 Ajax としても知られています。

フェッチ API は XMLHttpRequest API をより柔軟で強力に置き換えたものです。フェッチ API は、非同期レスポンスを処理するためにイベントの代わりにプロミスを使用し、サービスワーカーとうまく統合し、 CORS のような HTTP の高度な側面に対応しています。これらの理由から、現代のウェブアプリケーションでは、`XMLHttpRequest` の代わりにフェッチ API を使用するのが一般的です。

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

XMLHttpRequest API の中心となるインターフェイスは `XMLHttpRequest` です。 HTTP リクエストを行うには、以下のようにします。

1. 新しい `XMLHttpRequest` のインスタンスを、コンストラクターを呼び出すことで作成します。
2. `XMLHttpRequest.open()` を呼び出して初期化します。この時点で、リクエストの URL、使用する HTTP メソッド、オプションでユーザ名ーとパスワードを提供します。
3. リクエストの結果を取得するイベントハンドラーを取り付けます。例えば、 `load` イベントはリクエストが完全に完了した時に発行され、 `error` イベントは様々なエラー状態の時に発行されます。
4. `XMLHttpRequest.send()` を呼び出してリクエストを送信します。

XMLHttpRequest API の詳細なガイドについては、 XMLHttpRequest の使用を参照してください。

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

`FormData`

`<form>` のフィールドとその値を表すオブジェクトで、 `XMLHttpRequest` または `fetch()` を用いてサーバーに送信することができます。

`ProgressEvent`

`Event` のサブクラスで `progress` に渡され、リクエストがどれだけ進行したかの情報を格納します。

`XMLHttpRequest`

単一の HTTP リクエストを表します。

`XMLHttpRequestEventTarget`

`XMLHttpRequest` および `XMLHttpRequestUpload` のスーパークラスで、どちらでも利用できるイベントを定義しています。

`XMLHttpRequestUpload`

HTTP アップロードのアップロード処理を表します。コードがアップロードの進捗を追跡できるようにするイベントを提供します。

例
-

### サーバーから JSON データを読み取り

この例では、 https://raw.githubusercontent.com/ から JSON ファイルを取得し、イベントの進捗状況を表示させるイベントリスナーを追加しています。

#### HTML

```html
<div class="controls">
  <button class="xhr" type="button">クリックすると XHR を開始</button>
</div>

<textarea readonly class="event-log"></textarea>
```

```
.event-log {
  width: 25rem;
  height: 5rem;
  border: 1px solid black;
  margin: 0.5rem;
  padding: 0.2rem;
}

button {
  width: 12rem;
  margin: 0.5rem;
}
```

#### JavaScript

```js
const xhrButton = document.querySelector(".xhr");
const log = document.querySelector(".event-log");
const url =
  "https://raw.githubusercontent.com/mdn/content/main/files/en-us/\_wikihistory.json";

function handleEvent(e) {
  log.textContent = `${log.textContent}${e.type}: ${e.loaded} バイト転送しました\n`;
}

function addListeners(xhr) {
  xhr.addEventListener("loadstart", handleEvent);
  xhr.addEventListener("load", handleEvent);
  xhr.addEventListener("loadend", handleEvent);
  xhr.addEventListener("progress", handleEvent);
  xhr.addEventListener("error", handleEvent);
  xhr.addEventListener("abort", handleEvent);
}

xhrButton.addEventListener("click", () => {
  log.textContent = "";

  const xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  addListeners(xhr);
  xhr.send();
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard  |

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

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

関連情報
----

* フェッチ API


BluetoothRemoteGATTService - Web API

BluetoothRemoteGATTService
==========================

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

Web Bluetooth API の `BluetoothRemoteGATTService` インターフェイスは、GATT サーバーにより提供されるサービスを表します。デバイス、参照されるサービス、このサービスのキャラクタリスティックのリストも含みます。

EventTarget

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

`BluetoothRemoteGATTService.device` 読取専用
Experimental

`BluetoothDevice` のインスタンスを通じて、この Bluetooth デバイスの情報を返します。

`BluetoothRemoteGATTService.isPrimary` 読取専用
Experimental

これがプライマリーサービスなのかセカンダリーサービスなのかを表す論理値を返します。

`BluetoothRemoteGATTService.uuid` 読取専用
Experimental

このサービスの UUID を表す文字列を返します。

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

`BluetoothRemoteGATTService.getCharacteristic()`
Experimental

指定の universally unique identifier (UUID) に対応する `BluetoothRemoteGATTCharacteristic` のインスタンスで解決する `Promise` を返します。

`BluetoothRemoteGATTService.getCharacteristics()`
Experimental

省略可能な universally unique identifier (UUID) に対応する `BluetoothRemoteGATTCharacteristic` のインスタンスの `Array` で解決する `Promise` を返します。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # bluetoothgattservice-interface |

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

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


PermissionStatus - Web API

PermissionStatus
================

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

Permissions API の **`PermissionStatus`** インターフェイスは、オブジェクトの状態と、その状態への変更を監視するためのイベントハンドラを提供します。

プロパティ
-----

`PermissionStatus.state` 読取専用

要求されたパーミッションの状態を返します。 `'granted'`（付与）、`'denied'`（拒否）、`'prompt'`（プロンプト）のいずれかです。

`PermissionStatus.status` (en-US)読取専用
非推奨

要求されたパーミッションの状態を返します。 `'granted'`、`'denied'`、`'prompt'` のいずれかです。 仕様の今後のバージョンは、これを `PermissionStatus.state` に置き換えます。

### イベントハンドラ

`PermissionStatus.onchange`

`PermissionStatus.status` が変わるたびに呼び出されるイベント。

例
-

```js
navigator.permissions
  .query({ name: "geolocation" })
  .then(function (permissionStatus) {
    console.log(
      "位置情報のパーミッションの状態は " + permissionStatus.state + " です。",
    );
    permissionStatus.onchange = function () {
      console.log(
        "位置情報のパーミッションの状態が " +
          this.state +
          " に変更されました。",
      );
    };
  });
```

仕様
--

| Specification |
| --- |
| Permissions # permissionstatus-interface |

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

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


XMLHttpRequestEventTarget - Web API

XMLHttpRequestEventTarget
=========================

`XMLHttpRequestEventTarget` インターフェイスは、 `XMLHttpRequest` と `XMLHttpRequestUpload` で共有されるイベントハンドラーを示します。

`XMLHttpRequestEventTarget` を直接使用することはありません。サブクラスで操作してください。

`XMLHttpRequest` への継承
---------------------

EventTarget

XMLHttpRequestEventTarget

XMLHttpRequest
以下のイベントが `XMLHttpRequest` で利用できます。

* `abort`
* `error`
* `load`
* `loadend`
* `loadstart`
* `progress`
* `readystatechange`
* `timeout`
`XMLHttpRequestUpload` への継承
---------------------------

EventTarget

XMLHttpRequestEventTarget

XMLHttpRequestUpload
以下のイベントが `XMLHttpRequestUpload` で利用できます。

* `abort`
* `error`
* `load`
* `loadend`
* `loadstart`
* `progress`
* `timeout`
仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # xmlhttprequesteventtarget |

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

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

関連情報
----

* `XMLHttpRequest`
* `XMLHttpRequestUpload`


DOMMatrix (WebKitCSSMatrix) - Web API

DOMMatrix (WebKitCSSMatrix)
===========================

**`DOMMatrix`** は、2D または 3D の回転や平行移動などの変換に適した 4×4 行列を表します。 これは `DOMMatrixReadOnly` インターフェイスの変更可能なバージョンです。

**`WebKitCSSMatrix`** および **`SVGMatrix`** は **`DOMMatrix`** の別名です。

このインターフェイスはウェブワーカー内で利用できるはずですが、一部の実装はまだそうなっていません。

DOMMatrixReadOnly

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

`DOMMatrix()`

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

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

*このインターフェイスは `DOMMatrixReadOnly` からプロパティを継承していますが、一部のプロパティは変更可能に変更されています。*

`is2D` 読取専用

論理値フラグであり、値が `true` の場合、行列は 2D 行列として初期化されます。 `false` の場合、行列は 3D となります。

`isIdentity` 読取専用

行列が単位行列である場合に `true` となる論理値です。単位行列とは、左上から右下への対角線上にある値（言い換えれば、各方向のオフセットが等しい値）を除いて、すべての値が `0` となる行列のことです。

`m11`, `m12`, `m13`, `m14`, `m21`, `m22`, `m23`, `m24`, `m31`, `m32`, `m33`, `m34`, `m41`, `m42`, `m43`, `m44`

4×4 行列の各成分を表す倍精度浮動小数点数で、 `m11` から `m14` が最初の列、 `m21` から `m24` が 2 つ目の列、というようになります。

`a`, `b`, `c`, `d`, `e`, `f`

2D の回転と平行移動を行うために必要となる、 4×4 行列の成分を表す倍精度浮動小数点数の値です。下記に示すように、これらは 4×4 行列の特定の成分の別名です。

| 2D | 3D の相当品 |
| --- | --- |
| `a` | `m11` |
| `b` | `m12` |
| `c` | `m21` |
| `d` | `m22` |
| `e` | `m41` |
| `f` | `m42` |

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

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

`DOMMatrix.invertSelf()`

この行列を逆行列に変更します。逆行列にできない場合、その成分はすべて `NaN` に設定され、 `is2D` は `false` を返します。

`DOMMatrix.multiplySelf()`

指定した `DOMMatrix` と後乗算することで、行列を変更します。これは点積 `A⋅B` と等価であり、行列 `A` は入力行列、 `B` はメソッドへの入力として指定された行列です。自分自身を返します。

`DOMMatrix.preMultiplySelf()`

指定した `DOMMatrix` との前乗算によって、行列を変更します。これは点積 `B⋅A` と等価であり、行列 `A` は入力行列、 `B` はメソッドへの入力として指定された行列です。自分自身を返します。

`DOMMatrix.translateSelf()`

指定したベクトルを適用して行列を変更します。既定値では `[0, 0, 0]` です。自分自身を返します。

`DOMMatrix.scaleNonUniformSelf()`
非推奨

指定された原点を中心として、X、Y、Z 軸に指定した拡大縮小を適用して行列を変更します。既定値は、Y 軸と Z 軸の倍率はどちらも `1` ですが、X 軸の倍率は指定する必要があります。既定値では原点は `(0, 0, 0)` です。自分自身を返します。

`DOMMatrix.scaleSelf()`

指定した原点を中心として、指定した倍率を適用して行列を変更します。また、それ自身を返します。既定では、倍率は 3 軸すべて `1` で、原点は `(0, 0, 0)` です。自分自身を返します。

`DOMMatrix.scale3dSelf()`

指定された原点を中心とした 3 つの軸すべてに、指定された倍率を適用して行列を変更します。自分自身を返します。

`DOMMatrix.rotateSelf()`

指定した度数だけ各軸の周りを回転することで、行列を変更します。自分自身を返します。

`DOMMatrix.rotateAxisAngleSelf()`

指定されたベクトルを中心に、指定した角度だけ回転するように行列を変更します。自分自身を返します。

`DOMMatrix.rotateFromVectorSelf()`

行列を、指定したベクトルと `(1, 0)` とのなす角だけ回転させることにより変更します。自分自身を返します。

`DOMMatrix.setMatrixValue()`

行列の内容を、指定した変換で記述された行列で置き換えます。自分自身を返します。

`DOMMatrix.skewXSelf()`

X 軸に沿って、指定した傾き変換を適用して行列を変更します。自分自身を返します。

`DOMMatrix.skewYSelf()`

指定した傾き変換を Y 軸に沿って適用することで、行列を変更します。自分自身を返します。

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

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

`fromFloat32Array()`

指定された単精度（32 ビット）浮動小数点数の配列から、変更可能な新しい `DOMMatrix` オブジェクトを作成します。配列に 6 個の値がある場合、結果は 2D 行列になり、配列に 16 個の値がある場合、結果は 3D 行列になります。そうでない場合、 `TypeError` 例外が発生します。

`fromFloat64Array()`

倍精度（64 ビット）浮動小数点値の配列が指定された場合、変更可能な新しい `DOMMatrix` オブジェクトを作成します。配列に 6 つの値がある場合、結果は 2D 行列になり、配列に 16 個の値がある場合、結果は 3D 行列になります。そうでない場合、 `TypeError` 例外が発生します。

`fromMatrix()`

既存の行列、あるいはそのプロパティの値を提供する `DOMMatrixInit` 辞書が指定された場合、新しい変更可能な `DOMMatrix` オブジェクトを作成します。

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

`DOMMatrix` インターフェイスで定義される行列は、4行4列で構成されます。この記事で数学を説明することはできませんが、この 4×4 のサイズは、 2D または 3D のジオメトリーに適用する変換を記述するのに十分です。

4×4 の抽象行列を構成する 16 個の要素（m\_11 から m\_44）の位置を示します。

[

m
11

m
21

m
31

m
41

m
12

m
22

m
32

m
42

m
13

m
23

m
33

m
43

m
14

m
24

m
34

m
44

]

\left [ \begin{matrix} m\_{11} & m\_{21} & m\_{31} & m\_{41} \ m\_{12} & m\_{22} & m\_{32} & m\_{42} \ m\_{13} & m\_{23} & m\_{33} & m\_{43} \ m\_{14} & m\_{24} & m\_{34} & m\_{44} \end{matrix} \right ]

`DOMMatrix` インターフェイスは、マークアップ内のすべての行列に使用することを意図して設計されています。

仕様書
---

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

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

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

関連情報
----

* `MSCSSMatrix` documentation on MSDN
* `WebKitCSSMatrix` documentation at Safari Developer Library
* Mozilla bug 717722: implement `(WebKit)CSSMatrix()`


ResizeObserverEntry - Web API

ResizeObserverEntry
===================

**`ResizeObserverEntry`** インターフェイスは、 `ResizeObserver()` コンストラクターのコールバック関数に渡されるオブジェクトを表します。これにより、監視対象の `Element` または `SVGElement` の新しい寸法にアクセスすることができます。

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

`ResizeObserverEntry.borderBoxSize` 読取専用

コールバックが実行されたときに監視された要素の新しい境界ボックスサイズを含むオブジェクトの配列です。

`ResizeObserverEntry.contentBoxSize` 読取専用

コールバックが実行されたときに監視された要素の新しいコンテンツボックスサイズを含むオブジェクトの配列です。

`ResizeObserverEntry.devicePixelContentBoxSize` 読取専用

コールバック実行時に監視される要素の新しいコンテンツボックスサイズをデバイスピクセル単位で含むオブジェクトの配列です。

`ResizeObserverEntry.contentRect` 読取専用

コールバックが実行されたときに監視された要素の新しいサイズを含む `DOMRectReadOnly` オブジェクトです。これは、上記の 2 つのプロパティよりも対応されていますが、リサイズオブザーバー API の以前の実装から残ったものであり、ウェブの互換性のために仕様に含まれているため、将来のバージョンで非推奨となる可能性があることに注意してください。

`ResizeObserverEntry.target` 読取専用

監視対象の `Element` または `SVGElement` オブジェクト。

**メモ:** コンテンツボックスは、コンテンツを配置できるボックスで、境界ボックスからパディングと境界の幅を除いたものを意味します。境界ボックスは、コンテンツ、パディング、境界を包含します。さらなる説明はボックスモデルを参照してください。

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

なし。

例
-

以下のスニペットは resize-observer-text.html （ソースを参照）の例から取ったものです。

なお、このコードは 3 つの異なる互換性のケースに応じたものです。

* 古いブラウザーでは、 `contentRect` には対応していても、 `contentBoxSize` は対応していない場合があります。
* 古いバージョンの Firefox は `contentBoxSize` に対応していますが、誤って配列ではなく単一のオブジェクトとして実装していました。
* 現代のブラウザーは `contentBoxSize` をオブジェクトの配列として対応しており、断片化された要素（例えば複数段組みの場合）のボックスサイズを報告できるようになっています。

```js
const resizeObserver = new ResizeObserver((entries) => {
  for (let entry of entries) {
    if (entry.contentBoxSize) {
      // The standard makes contentBoxSize an array...
      if (entry.contentBoxSize[0]) {
        h1Elem.style.fontSize =
          Math.max(1.5, entry.contentBoxSize[0].inlineSize / 200) + "rem";
        pElem.style.fontSize =
          Math.max(1, entry.contentBoxSize[0].inlineSize / 600) + "rem";
      } else {
        // ...but old versions of Firefox treat it as a single item
        h1Elem.style.fontSize =
          Math.max(1.5, entry.contentBoxSize.inlineSize / 200) + "rem";
        pElem.style.fontSize =
          Math.max(1, entry.contentBoxSize.inlineSize / 600) + "rem";
      }
    } else {
      h1Elem.style.fontSize =
        Math.max(1.5, entry.contentRect.width / 200) + "rem";
      pElem.style.fontSize = Math.max(1, entry.contentRect.width / 600) + "rem";
    }
  }
  console.log("Size changed");
});

resizeObserver.observe(divElem);
```

仕様書
---

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

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

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


OscillatorNode - Web API

OscillatorNode
==============

**`OscillatorNode`** インターフェイスは、正弦波などの周期的な波形を表します。これは、 `AudioScheduledSourceNode` 音声処理モジュールの一種で、指定された周波数の波を作成させ、実質的には一定の音になります。

EventTarget

AudioNode

AudioScheduledSourceNode

OscillatorNode

|  |  |
| --- | --- |
| 入力数 | `0` |
| 出力数 | `1` |
| チャンネルカウントモード | `max` |
| チャンネルカウント | `2` (デフォルトのカウントモードでは使用されません。) |
| チャンネルの解釈 | `speakers` |

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

`OscillatorNode()`

新しい `OscillatorNode` オブジェクトのインスタンスを作成します。オプションとして、ノードのプロパティに既定値を指定したオブジェクトを提供します。別の方法として、 `BaseAudioContext.createOscillator()` ファクトリーメソッドを使用することも可能です。AudioNode の作成を参照してください。

プロパティ
-----

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

`OscillatorNode.frequency`

a-rate の `AudioParam` であり、振動数・周波数をヘルツ（hertz、記号：Hz）で表わしたものです。（`AudioParam` は読み取り専用ですが、この値はそうではありません）。初期値は 440 Hz （中央 A （ラ）音）です。

`OscillatorNode.detune`

a-rate の `AudioParam` であり、発振音の離調をセント単位で表します（`AudioParam` は読み取り専用ですが、この値が表す値はそうでありません）。既定値は 0 です。

`OscillatorNode.type`

再生する波形の種類を指定する文字列です。いくつかの標準値の中から 1 つ、または、 `custom` で `PeriodicWave` を使用したカスタム波形を設定することができます。波形が異なれば、音色も異なります。標準的な値は `"sine"`, `"square"`, `"sawtooth"`, `"triangle"`, `"custom"` です。既定値は `"sine"` です。

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

`OscillatorNode.onended` (en-US)

音の再生が停止したときに発行される `ended` イベントに対するイベントハンドラーを設定します。

メソッド
----

*親インターフェイスである `AudioScheduledSourceNode` からメソッドを継承しており、さらに以下のメソッドがあります。*

`OscillatorNode.setPeriodicWave()`

標準的な波形の代わりに使用する、周期的な波形を記述した `PeriodicWave` を設定します。これを呼び出すと `type` は `custom` に設定されます。

`OscillatorNode.start()` (en-US)

音色の再生を開始する正確な時間を指定します。

`OscillatorNode.stop()` (en-US)

音色の再生を停止する時間を指定します。

例
-

以下の例は、 `AudioContext` を使用して発振器ノードを作成し、その上で音の再生を開始する基本的な使用方法を示しています。応用例としては、 Violent Theremin demo をご覧ください（関連するコードは app.js を参照してください）。

```js
// ウェブオーディオ API コンテキストの作成
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// Oscillator　ノードを作成します。
const oscillator = audioCtx.createOscillator();

oscillator.type = "square";
oscillator.frequency.setValueAtTime(440, audioCtx.currentTime); // ヘルツ単位の値
oscillator.connect(audioCtx.destination);
oscillator.start();
```

仕様書
---

| Specification |
| --- |
| Web Audio API # OscillatorNode |

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

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

関連情報
----

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


WebUSB API - Web API

WebUSB API
==========

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

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

**WebUSB API** は、USB をより安全かつ簡単に使えるように、標準でない Universal Serial Bus (USB) 対応のデバイスサービスをウェブから扱う方法を提供します。

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

USB は、有線の周辺機器のデファクトスタンダードです。コンピューターに接続する USBデバイスは、通常キーボード、マウス、ビデオデバイスなどのいくつかのデバイスクラスに分類されます。これらのデバイスは、オペレーティングシステムのクラスドライバーによってサポートされます。これらのデバイスの多くは、ウェブからも `WebHID API` を用いてアクセスできます。

これらの標準化されたデバイスに加え、どのクラスにも当てはまらないデバイスも数多く存在します。これらにはカスタムドライバーが必要で、これらを生かすにはネイティブコードが必要なためウェブからはアクセスできません。これらのデバイスのインストールでは、多くの場合製造元のウェブサイトでドライバーを探すことが必要であり、別のコンピューターで同じデバイスを使いたければこの作業を繰り返すことになります。

WebUSB は、これらの標準化されていない USB デバイスサービスをウェブから扱う方法を提供します。すなわち、ハードウェアの製造元が独自の API を提供することなくデバイスにウェブからアクセスする方法を提供できるようになります。

新しい WebUSB 対応のデバイスを接続すると、ブラウザーは通知を表示し、製造元のウェブサイトへのリンクを提供します。そのサイトを開くと、ブラウザーはデバイスに接続する許可を求め、デバイスを使用する準備が整います。ドライバーをダウンロードしてインストールする必要はありません。

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

`USB`

ウェブページが USB デバイスを検出し、接続するためのプロパティとメソッドを提供します。

`USBConnectionEvent`

ユーザーエージェントが新しい USB デバイスのホストへの接続や切断を検出した時、`USB.onconnect` や `USB.ondisconnect` に渡されるイベント型です。

`USBDevice`

ペアリングした USB デバイスのメタデータと、制御用のメソッドを提供します。

`USBInTransferResult`

USB デバイスから USB ホストへのデータ転送要求の結果を表します。

`USBOutTransferResult`

USB ホストから USB デバイスへのデータ転送要求の結果を表します。

`USBIsochronousInTransferPacket`

アイソクロナス転送用のエンドポイントにおける USB デバイスから USB ホストへのデータ転送要求による個々のパケットの状態を表します。

`USBIsochronousInTransferResult`

USB デバイスから USB ホストへのデータ転送要求の結果を表します｡

`USBIsochronousOutTransferPacket`

アイソクロナス転送用のエンドポイントにおける USB ホストから USB デバイスへのデータ転送要求による個々のパケットの状態を表します｡

`USBIsochronousOutTransferResult`

USB ホストから USB デバイスへのデータ転送要求の結果を表します｡

`USBConfiguration`

USB デバイスの特定のコンフィグレーションに関する情報と、それがサポートするインターフェイスを提供します。

`USBInterface`

USB デバイスが提供するインターフェイスに関する情報を提供します。

`USBAlternateInterface`

USB デバイスが提供するインターフェイスの特定のコンフィグレーションに関する情報を提供します。

`USBEndPoint`

USB デバイスが提供するエンドポイントに関する情報を提供します。

例
-

### 接続されたデバイスにアクセスする

この例では、接続された Arduino デバイス (ベンダー ID `0x2341`) に `USB.requestDevice()` を用いてアクセスする方法を示します。

```js
navigator.usb
  .requestDevice({ filters: [{ vendorId: 0x2341 }] })
  .then((device) => {
    console.log(device.productName); // "Arduino Micro"
    console.log(device.manufacturerName); // "Arduino LLC"
  })
  .catch((error) => {
    console.error(error);
  });
```

### 接続された全てのデバイスを検出する

`USB.getDevices()` を用いることで、接続された全てのデバイスを検出できます。この例では、接続された Arduino デバイスの製品名と製造元名をコンソールに出力します。

```js
navigator.usb.getDevices().then((devices) => {
  devices.forEach((device) => {
    console.log(device.productName); // "Arduino Micro"
    console.log(device.manufacturerName); // "Arduino LLC"
  });
});
```

仕様書
---

| Specification |
| --- |
| WebUSB API  |

関連情報
----

* Access USB Devices on the Web


ServiceWorkerGlobalScope - Web API

ServiceWorkerGlobalScope
========================

**`ServiceWorkerGlobalScope`** はサービスワーカー API のインターフェイスで、サービスワーカーのグローバル実行コンテキストを表します。

開発者は、サービスワーカーの状態が終了/再起動サイクルに渡って維持されないことを覚えておく必要があります。したがって、それぞれのイベントハンドラーは、それが裸の、既定のグローバル状態で呼び出されることを想定する必要があります。

いったん正しく登録されたら、サービスワーカーはメモリーとプロセッサーの力を温存するため、アイドル時であれば停止させることができます。アクティブなサービスワーカーは、例えば `fetch` や `message` などのイベントに応じて自動的に再起動します。

加えて、同期リクエストはサービスワーカーでは許可されていません。非同期リクエスト、つまり `fetch()` メソッド経由で初期化されたものが使われます。

このインターフェイスは `WorkerGlobalScope` インターフェイスと、その親の `EventTarget` を継承しています。

EventTarget

WorkerGlobalScope

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

`caches` 読取専用

サービスワーカーに関連づけられた `CacheStorage` オブジェクトを保持します。

`ServiceWorkerGlobalScope.clients` 読取専用

サービスワーカーに関連付けられた `Clients` オブジェクトを保持します。

`ServiceWorkerGlobalScope.registration` 読取専用

サービスワーカーの登録を表す `ServiceWorkerRegistration` オブジェクトを保持します。

イベント
----

`activate`

`ServiceWorkerRegistration` が新しい `ServiceWorkerRegistration.active` ワーカーを得た時に発生します。

`canmakepayment` (en-US)
Experimental

決済アプリのサービスワーカーで発行され、決済を処理する準備ができたかどうかを調べるために使用されます。特に、販売者のウェブサイトが `new PaymentRequest()` を呼び出すと発行されます。

`contentdelete`
Experimental

コンテンツ索引 (en-US)からアイテムが取り除かれたときに発生します。

`fetch`

`fetch()` が呼び出されたときに発生します。

`install`

`ServiceWorkerRegistration` が新しい `ServiceWorkerRegistration.installing` ワーカーを得た時に発生します。

`message`

メッセージを受信したときに発生します。制御中のページは `MessagePort.postMessage()` メソッドを使用してサービスワーカーにメッセージを送信することができます。サービスワーカーは任意で `event.data.port` で公開されている `MessagePort` を通じて、対応する制御中のページに返信することができます。

`notificationclick`

表示された通知をユーザーがクリックしたときに発生します。

`notificationclose`

表示された通知をユーザーが閉じたときに発生します。

`paymentrequest` (en-US)
Experimental

販売者のウェブサイトで `PaymentRequest.show()` メソッドを介して支払いフローが開始されたときに、支払いアプリで発行されます。

`sync`

サービスワーカーのクライアントページから `SyncManager.register` (en-US) への呼び出しが行われたときに発生します。ネットワークが有効であるか、すぐに利用可能になるのであれば、直ちに同期が試みられます。

`periodicsync`
Experimental

`PeriodicSyncManager` を登録したときに指定した周期で発生します。

`push`

サーバーのプッシュ通知が届いたときに発生します。

`pushsubscriptionchange`

プッシュ通知への加入が無効化されたとき、または無効化されようとするとき (例えば、プッシュ通知の有効期限が設定されたとき) に発生します。

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

`ServiceWorkerGlobalScope.skipWaiting()`

現在のサービスワーカーの登録を、待ち状態からクライアントが使っている時のアクティブ状態に進めます。

`ServiceWorkerGlobalScope` は `WorkerGlobalScope` を実装しています。このため利用できる以下のプロパティもあります。

`fetch()`

リソース取得 (fetch) のプロセスを開始します。これはリクエストのレスポンスを表す `Response` オブジェクトを解決するプロミスを返します。このアルゴリズムはサービスワーカーコンテキストに渡されるフェッチ処理のエントリーポイントです。

例
-

このコードスニペットは、service worker prefetch の例（prefetch の例のライブ版を参照してください）からのものです。 `onfetch` イベントハンドラーは `fetch` イベントを監視します。イベントが発生した時、コードは `Cache` オブジェクト内で、最初に一致したリクエストに対して解決するプロミスを返します。もし、何も一致しなかった場合は、コードはネットワークからレスポンスを読み取ります。

さらに、このコードは `fetch()` 操作で発生した例外を処理しています。 HTTP のエラーレスポンス（たとえば、404）は、例外を引き起こさないことに注意してください。適切なエラーコードセットを持った通常のレスポンスオブジェクトを返します。

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

  event.respondWith(
    caches.match(event.request).then((response) => {
      if (response) {
        console.log("Found response in cache:", response);

        return response;
      }
      console.log("No response found in cache. About to fetch from network…");

      return fetch(event.request).then(
        (response) => {
          console.log("Response from network is:", response);

          return response;
        },
        (error) => {
          console.error("Fetching failed:", error);

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

仕様書
---

| Specification |
| --- |
| Service Workers # serviceworkerglobalscope-interface |

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

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

関連情報
----

* サービスワーカーの使用
* サービスワーカーの基本的なコード例
* Is ServiceWorker ready?
* `Promise`


交差オブザーバー API - Web API

交差オブザーバー API
============

交差オブザーバー API (Intersection Observer API) は、ターゲットとなる要素が、祖先要素または文書の最上位のビューポートと交差する変化を非同期的に監視する方法を提供します。

従来、ある要素の可視状態、あるいは 2 つの要素の相対的な可視状態を検出することは困難であり、その解決策は信頼性が低く、ブラウザーやアクセスするサイトの動作が重くなる傾向がありました。ウェブが成熟していくにつれて、このような情報の必要性は高まっていきます。交差情報 (Intersection information) についての情報は次の理由から必要とされています。

* ページがスクロールした際の画像やその他のコンテンツの遅延読み込み。
* 「無限スクロール」をするウェブサイトを実装し、スクロールに従って次々とコンテンツを読み込んで、ユーザーがページの切り替えをせずに済むようにすること。
* 広告費を計算するための広告が表示されたかどうかのレポート。
* ユーザーが結果を見るかどうかで、タスクを実行するかどうか、アニメーションを処理するかどうかを決定すること。

以前は、要素同士の交差の検出を実装するには、イベントハンドラーやループで `Element.getBoundingClientRect()` などのメソッドを呼び出し、影響を受けるすべての要素について必要な情報を蓄積していました。このコードはすべてメインスレッドで実行されるため、これらのうち 1 つでもあればパフォーマンスの問題を引き起こす可能性があります。サイトでこのような検出が大量に行われると、まったく醜くなる可能性があります。

ウェブページで無限スクロールを使用することを考えてみてください。ベンダーから提供されるライブラリーを使用して、ページ全体に定期的に配置された広告を管理し、アニメーショングラフィックスを表示し、通知ボックスなどを描画するカスタムライブラリーを使用します。それぞれには独自に交差を検出するためのルーチンがあり、すべてがメインスレッド上で実行されます。ウェブサイトの作者は、これが起こっていることを認識していないかもしれません。内部の働きについてほとんど知らずに 2 つのライブラリーを使用しているからです。ユーザーがページをスクロールすると、スクロール処理中にこれらの交差の検出ルーチンが絶えず起動し、ユーザーはブラウザー、ウェブサイト、およびコンピューターにイライラさせられることになります。

交差オブザーバー API は、特定の要素が他の要素（またはビューポート）と交差に入ったり出たりしたとき、または 2 つの要素間の交差量が指定された量だけ変化したときに実行されるコールバック関数を、コードが登録できるようにします。こうすることで、サイトはこのような要素の交差を監視するために、メインスレッドで何らかの処理をする必要がなくなり、ブラウザーは適切と思われる交差の管理を自由に最適化することができます。

交差オブザーバー API は、重複したピクセルの正確な数や、それがどのピクセルであるかを具体的に示すことはできません。しかし、「*N* % 前後のどこかで交差していたら、何かをする必要がある」という、より一般的な利用法はカバーします。

交差オブザーバーの概念と使い方
---------------

交差オブザーバー API を使用すると、以下のいずれかの状況が発生したときに呼び出されるコールバックを構成することができます。

* **ターゲット**要素が端末のビューポートまたは指定された要素と交差したとき。この指定された要素は、交差オブザーバー API の用途では**ルート要素**または**ルート**と呼びます。
* オブザーバーが対象要素を監視するよう最初に指示されたとき。

通常、対象要素の最も近いスクロール可能な祖先、または対象要素がスクロール可能な要素の子孫でない場合は、端末のビューポートを基準にして交差の変化を監視したいと思うでしょう。端末のビューポートを基準にして交差を監視するには、 `root` オプションに `null` を指定します。交差オブザーバーのオプションについてのより詳しい説明は、このまま読み進めてください。

ビューポートとその他の要素のどちらがルートとして使用されていても、 API は同じように動作し、対象要素の表示状態が変わってルートとの間で交差の量の期待値を通るたびに、提供したコールバック関数が実行されます。

対象要素とそのルート要素の交差する度合いが**交差率**です。これは対象要素のパーセント値を 0.0 から 1.0 の間の値で表現したものです。

### 交差オブザーバーの作成

交差オブザーバーは、コンストラクターを呼び出して閾値が一方向また他の方向に交差する度に実行されるコールバック関数を渡すことで生成します。

```js
let options = {
  root: document.querySelector("#scrollArea"),
  rootMargin: "0px",
  threshold: 1.0,
};

let observer = new IntersectionObserver(callback, options);
```

閾値 (threshold) の 1.0 は、 `root` オプションで指定された要素内でターゲットが 100% 表示された時にコールバックが呼び出されることを意味しています。

#### 交差オブザーバーのオプション

`options` オブジェクトは `IntersectionObserver()` コンストラクターに渡され、オブザーバーのコールバックが呼び出される状況を制御します。以下のようなフィールドがあります。

`root`

ターゲットが見えるかどうかを確認するためのビューポートとして使用される要素です。指定されなかった場合、または `null` の場合は既定でブラウザーのビューポートが使用されます。

`rootMargin`

root の周りのマージンです。 CSS の `margin` プロパティに似た値を指定することができます。例えば、 `"10px 20px 30px 40px"` （上、右、下、左）のようにします。この値はパーセント値にすることができます。この一連の値は、交差を計算する前にルート要素の範囲のボックスの各辺を拡大または縮小させることができます。既定値はすべてゼロです。

`threshold`

単一の数値または数値の配列で、ターゲットがどのくらいの割合で見えている場合にオブザーバーのコールバックを実行するかを示します。見える範囲が 50% を超えたときのみ検出する場合は値 0.5 を使用します。 25% を超える度にコールバックを実行する場合は、 [0, 0.25, 0.5, 0.75, 1] という配列を指定します。既定値は 0 です（つまり、 1 ピクセルでも表示されるとコールバックが実行されます）。 1.0 の値は全てのピクセルが見えるようになるまで、閾値を超えたとはみなされないことを意味します。

#### 監視される要素をターゲットにする

オブザーバーを作成した後は、監視する対象要素を与える必要があります。

```js
let target = document.querySelector("#listItem");
observer.observe(target);

// オブザーバーに設定したコールバックが初めて実行され、オブザーバーにターゲットが
// 割り当てられるまで待機します（ターゲットが現在表示されていない場合でも同様）。
```

ターゲットが `IntersectionObserver` に指定された閾値を満たす度にコールバックが呼び出されます。コールバックは `IntersectionObserverEntry` オブジェクトのリストとオブザーバー自体を受け取ります。

```js
let callback = (entries, observer) => {
  entries.forEach((entry) => {
    // それぞれの項目は、観測された 1 つの対象要素の交差状態の変化を示している。
    // entry.boundingClientRect
    // entry.intersectionRatio
    // entry.intersectionRect
    // entry.isIntersecting
    // entry.rootBounds
    // entry.target
    // entry.time
  });
};
```

コールバックが受信した項目のリストには、交差状態の変化を報告する各ターゲットに対して 1 つずつの項目が含まれます。 `isIntersecting` プロパティの値をチェックして、その項目が現在ルートと交差している要素を表しているかどうかを確認します。

コールバックはメインスレッドで実行される点に注意してください。可能な限り早く動作する必要があります。もし時間を要する処理であるなら、 `Window.requestIdleCallback()` を使ったほうがいいでしょう。

また `root` オプションを指定した場合、ターゲットはルート要素の子孫でなければなりません。

### 交差の計算方法

交差オブザーバー API によって考慮される領域はすべて矩形です。異形の要素は、要素全体を囲む最小の矩形で占有しているとみなされます。同様に、要素の可視部分が矩形ではない場合、要素が交差する矩形は要素の可視部分全体を含む最小の矩形であると見なされます。

`IntersectionObserverEntry` オブジェクトによって提供される様々なプロパティが、どのように交差を表現するかを理解すると有益でしょう。

#### 交差ルートとルートマージン

ある要素とそのコンテナーとの交差を監視するまえに、まずはコンテナーを知る必要があります。ここでのコンテナーとは**交差ルート**または**ルート要素**です。これは監視される要素の親要素となる文書内の特定の要素になるか、文書のビューポートをコンテナーとして使用する際は `null` になるかいずれかになります。

**ルート交差矩形**はターゲットをチェックするために使用される矩形です。この矩形は次のように決まります。

* 交差ルートが暗黙のルート（すなわち最上位の `Document`）である場合、ルート交差矩形はビューポートの矩形になります。
* 交差ルートのあふれた部分が切り取られていた場合、ルート交差矩形はルート要素のコンテンツ領域になります。
* それ以外の場合は、ルート交差矩形は交差ルートのクライアント矩形（`getBoundingClientRect()` を呼び出して返されるもの）です。

交差するルートとして使用される矩形は、**ルートマージン** `rootMargin` を `IntersectionObserver` の作成時に設定することで調整することが可能です。 `rootMargin` の値は交差ルートの外接ボックスの各辺に追加されるオフセットを定義して、最終的な交差ルートの境界を作成します（コールバックが実行された際には `IntersectionObserverEntry.rootBounds` で取得できるものです）。

#### 閾値

交差オブザーバー API は、対象要素が見える量の微細な変化が発生するたびに知らせるのではなく、**閾値** (threshold) を使用します。オブザーバーを作成する際に、表示される対象要素がどの程度見えているかの割合を表す 1 つ以上の数値を指定することができます。API はこれらの閾値を超えて見えたかどうかの変更のみを知らせます。

例えば、対象要素が見える量が 25% 単位で増えたり減ったりするたびに通知を受けたい場合は、オブザーバーを作成する際に [0, 0.25, 0.5, 0.75, 1] という配列を閾値のリストとして指定します。

コールバックが呼び出されると、 `IntersectionObserverEntry` オブジェクトのリストを受け取ります。これは、ルートと交差する度合いが変化し、露出量がいずれかの方向に閾値を越えた観測対象ごとに 1 つずつあります。

ターゲットが*現在*ルートと交差しているかどうかは、項目の `isIntersecting` プロパティを見ることで確認できます。これにより、その項目が、要素が交差している状態から交差しなくなるまでの遷移を表すのか、交差していない状態から交差する状態への遷移を表すのかを判断することができます。

交差する矩形がゼロになることもあり得ることに注意してください。これは、交差部分が両者の境界線にぴったり沿っているか、または `boundingClientRect` の面積がゼロの場合に起こり得ることです。このようにターゲットとルートが境界線を共有している状態は、交差した状態に遷移したとみなすには不十分です。

閾値の仕組みを感じ取るには、下のボックスをスクロールして見てください。その中にある各色のボックスには四隅全てにパーセント値が表示されています。コンテナーをスクロールする時にこれらのパーセント値が変化することが分かります。各ボックスには異なる閾値が設定されています。

* 最初のボックスには、可視点の各パーセント値が設定されています。つまり`IntersectionObserver.thresholds` の配列は `[0.00, 0.01, 0.02, /*…,*/ 0.99, 1.00]` となります。
* 2 つ目のボックスには単一の閾値が、 50% の位置にあります。
* 3 つ目のボックスには、可視率 10% 毎に閾値があります (0%, 10%, 20%...)
* 最後のボックスの閾値は 25% 毎です。
```

<template id="boxTemplate">
  <div class="sampleBox">
    <div class="label topLeft"></div>
    <div class="label topRight"></div>
    <div class="label bottomLeft"></div>
    <div class="label bottomRight"></div>
  </div>
</template>

<main>
  <div class="contents">
    <div class="wrapper"></div>
  </div>
</main>
```

```
.contents {
  position: absolute;
  width: 700px;
  height: 1725px;
}

.wrapper {
  position: relative;
  top: 600px;
}

.sampleBox {
  position: relative;
  left: 175px;
  width: 150px;
  background-color: rgb(245, 170, 140);
  border: 2px solid rgb(201, 126, 17);
  padding: 4px;
  margin-bottom: 6px;
}

#box1 {
  height: 200px;
}

#box2 {
  height: 75px;
}

#box3 {
  height: 150px;
}

#box4 {
  height: 100px;
}

.label {
  font:
    14px "Open Sans",
    "Arial",
    sans-serif;
  position: absolute;
  margin: 0;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.7);
  width: 3em;
  height: 18px;
  padding: 2px;
  text-align: center;
}

.topLeft {
  left: 2px;
  top: 2px;
}

.topRight {
  right: 2px;
  top: 2px;
}

.bottomLeft {
  bottom: 2px;
  left: 2px;
}

.bottomRight {
  bottom: 2px;
  right: 2px;
}
```

```
let observers = [];

startup = () => {
  let wrapper = document.querySelector(".wrapper");

  // オブザーバーのオプション

  let observerOptions = {
    root: null,
    rootMargin: "0px",
    threshold: [],
  };

  // それぞれのボックスに設定する閾値の配列。最初のボックスの
  // 閾値は、（各パーセント点対して）非常にたくさんあるため、
  // プログラムで設定します。

  let thresholdSets = [
    [],
    [0.5],
    [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
    [0, 0.25, 0.5, 0.75, 1.0],
  ];

  for (let i = 0; i <= 1.0; i += 0.01) {
    thresholdSets[0].push(i);
  }

  // それぞれのボックスを追加し、それぞれに新しいオブザーバーを生成

  for (let i = 0; i < 4; i++) {
    let template = document
      .querySelector("#boxTemplate")
      .content.cloneNode(true);
    let boxID = `box${i + 1}`;
    template.querySelector(".sampleBox").id = boxID;
    wrapper.appendChild(document.importNode(template, true));

    // このボックスのオブザーバーを設定

    observerOptions.threshold = thresholdSets[i];
    observers[i] = new IntersectionObserver(
      intersectionCallback,
      observerOptions,
    );
    observers[i].observe(document.querySelector(`#${boxID}`));
  }

  // 開始位置までスクロール

  document.scrollingElement.scrollTop =
    wrapper.firstElementChild.getBoundingClientRect().top + window.scrollY;
  document.scrollingElement.scrollLeft = 750;
};

intersectionCallback = (entries) => {
  entries.forEach((entry) => {
    let box = entry.target;
    let visiblePct = `${Math.floor(entry.intersectionRatio \* 100)}%`;

    box.querySelector(".topLeft").innerHTML = visiblePct;
    box.querySelector(".topRight").innerHTML = visiblePct;
    box.querySelector(".bottomLeft").innerHTML = visiblePct;
    box.querySelector(".bottomRight").innerHTML = visiblePct;
  });
};

startup();
```

#### クリッピングと交差矩形

ブラウザーは次のように最終的な交差矩形を計算します。これはすべて完了した後の状態が見えますが、交差がいつ発生するかを正確に把握するために、これらの手順を理解すると役立ちます。

1. 対象要素の外接矩形（つまり、要素を構成するすべてのコンポーネントの外接ボックスを完全に囲む最小の矩形）を、ターゲットに対して `getBoundingClientRect()` を呼び出すことによって取得します。これは、交差の矩形の最大の大きさです。残りの手順で、交差しない部分を削除していきます。
2. ターゲットの直接の親ブロックから外側に向けて、それぞれの包含ブロックのクリッピングを（存在すれば）交差する矩形に適用します。ブロックのクリッピングは、 2 つのブロックの交差と、 `overflow` プロパティで（存在すれば）指定されたクリッピングモードに基づいて決定されます。 `overflow` に `visible` 以外を設定すると、クリッピングが行われます。
3. 包含する要素の中に、ネストされた閲覧コンテキストのルートがあった場合（`<iframe>` に含まれる文書など）、交差する矩形は包含するコンテキストのビューポートで切り取られ、コンテナー群を通して上方に再帰的にコンテナーの包含ブロックを続けます。ですから、最上位の `<iframe>` に到達したら、交差矩形はフレームのビューポートに切り取られ、そのフレームの親要素が交差ルートに向けた再帰の次のブロックになります。
4. 上方への再帰が交差ルートに達すると、結果の矩形が交差ルートの座標空間に対応付けられます。
5. 結果の矩形はそれからルート交差矩形と交差することで更新されます。
6. この矩形は、最終的に、ターゲットの `document` の座標空間に対応付けられます。
### 交差状態の変化のコールバック

対象要素がルート要素内で見えている範囲の可視量が閾値を通過したとき、 `IntersectionObserver` オブジェクトのコールバックが実行されます。コールバックは、入力引数として交差したすべての閾値を示す `IntersectionObserverEntry` オブジェクトの配列を、また参照として `IntersectionObserver` オブジェクト自身を受け取ります。

閾値のリスト内のそれぞれの項目は、通過した閾値を説明する `IntersectionObserverEntry` オブジェクトです。つまり、それぞれの項目は、指定された要素がルート要素とどの程度交差しているか、その要素が交差しているとみなされるかどうか、変化が発生した方向などを記述しています。

以下のコードスニペットでは、要素がルートと交差していない状態から 75% 以上交差した状態に遷移した回数をカウントするコールバックを示しています。閾値が 0.0 （既定値）の場合、コールバックはおよそ `isIntersecting` の論理値が変化した時に呼び出されます。このスニペットでは、まず遷移が正の値であることを確認し、次に `intersectionRatio` が 75% 以上かどうかを判断し、その場合はカウンターをインクリメントしています。

```js
const intersectionCallback = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      let elem = entry.target;

      if (entry.intersectionRatio >= 0.75) {
        intersectionCounter++;
      }
    }
  });
};
```

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

`IntersectionObserver`

交差オブザーバー API の主なインターフェイスです。同一の交差設定に対して任意の数の対象要素を監視するオブザーバーを作成し管理するためのメソッドを提供します。各オブザーバーは 1 つ以上の対象要素と共通の親要素、または最上位の `Document` のビューポートとの交差における変化を非同期的に監視することが出来ます。この親要素またはビューポートは**ルート**と呼ばれます。

`IntersectionObserverEntry`

スクロールにおける変化の特定の瞬間において、対象要素とルートとなるコンテナーとの交差を表現します。この型のオブジェクトは、 `IntersectionObserver` コールバックへの入力、または `IntersectionObserver.takeRecords()` の呼び出しの 2 通りの方法でのみ受け取ることができます。

単純な例
----

この単純な例では、対象要素の色と透明度を要素の可視性で変化させます。交差オブザーバー API による要素の表示時間設定では、要素のセット（例えば広告など）がユーザーに表示される時間を測定し、統計を記録したり要素を更新したりしてその情報にユーザーどう反応したかを示す、より拡張性の高い具体例を見ることができるでしょう。

### HTML

この例における HTML は非常に短く、主な要素はターゲットとなるボックス（IDは `"box"` としました）とボックス内のコンテンツです。

```html
<div id="box">
  <div class="vertical">Welcome to <strong>The Box!</strong></div>
</div>
```

### CSS

この CSS はこの例ではあまり重要ではありません。この CSS は要素をレイアウトし、 `background-color` と `border` 属性が CSS トランジションに加わることができるようにし、要素が多少見えなくなるときの変更に影響を与えるのに使用します。

```css
#box {
  background-color: rgba(40, 40, 190, 1);
  border: 4px solid rgb(20, 20, 120);
  transition:
    background-color 1s,
    border 1s;
  width: 350px;
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.vertical {
  color: white;
  font: 32px "Arial";
}

.extra {
  width: 350px;
  height: 350px;
  margin-top: 10px;
  border: 4px solid rgb(20, 20, 120);
  text-align: center;
  padding: 20px;
}
```

### JavaScript

最後に、交差オブザーバー API を使って何ができるのか、 JavaScript のコードを見ていきましょう。

#### セットアップ

まずは、いくつかの変数を準備してオブザーバーをインストールする必要があります。

```js
const numSteps = 20.0;

let boxElement;
let prevRatio = 0.0;
let increasingColor = "rgba(40, 40, 190, ratio)";
let decreasingColor = "rgba(190, 40, 40, ratio)";

// セットアップする
window.addEventListener(
  "load",
  (event) => {
    boxElement = document.querySelector("#box");

    createObserver();
  },
  false,
);
```

セットアップした定数と変数は下記の通りです。

`numSteps`

可視率が 0.0 から 1.0 の間にどのくらいの数の閾値を設定するか示す定数です。

`prevRatio`

この変数は閾値を超えた最後の可視率を記録するために使用します。これは対象要素が大体見えるようになったかどうかを調べることが出来ます。

`increasingColor`

可視率が増加している時に対象要素に適用する色を定義する文字列です。文字列の中の "比率" という単語は対象要素の現在の可視率に置き換えられ、要素が色を変化させるだけでなく不透明になるにつれて透明度が増していきます。

`decreasingColor`

同様に、可視率が減少していく時に適用する色を定義する文字列です。

`Window.addEventListener()` を呼び出して `load` イベントの待ち受けを開始します。ページの読み込みが完了すると、`querySelector()` を使用して ID が `"box"` 要素への参照を取得し、 `createObserver()` メソッドを呼び出して交差オブザーバーの設定とインストール処理を開始します。

#### 交差オブザーバーの作成

`createObserver()` メソッドは新しい交差オブザーバー (`IntersectionObserver`) を作成し、対象要素の監視を開始するためにページが完全に読み込まれてから呼び出されます。

```js
function createObserver() {
  let observer;

  let options = {
    root: null,
    rootMargin: "0px",
    threshold: buildThresholdList(),
  };

  observer = new IntersectionObserver(handleIntersect, options);
  observer.observe(boxElement);
}
```

この関数ではオブザーバーの設定を含む `options` オブジェクトを設定することから始めます。文書のビューポートに対して対象要素がどのくらい見えているかという変化を監視したいので、 `root` は `null` にします。マージンは必要がないので、マージンオフセットである `rootMargin` 設定は "0px" と指定しています。これによって、オブザーバーは追加された（または差し引かれた）空間がなくても対象要素の境界とビューポートの境界の交差点がどう変化するのか監視を開始することができます。

可視率の閾値のリストである、 `threshold` は関数 `buildThresholdList()` によって構成されます。閾値のリストは、この例ではプログラムによって計算されています。その数が意図的に調整可能だからです。

`options` が用意できたら、新しいオブザーバーを作成、つまり`IntersectionObserver()` のコンストラクターを呼び出して、閾値をまたいだ際に呼ばれる関数 `handleIntersect()` を指定し、オプションを指定します。次に、返されたオブザーバーに対して `observe()` を呼び出し、必要な対象要素を渡します。

`observer.observe()` をそれぞれの要素に対して呼び出すことにより、ビューポートに対して交差し変化しているかを複数の要素から監視することが出来ます。

#### 閾値比率の配列を組み立てる

閾値のリストを作成する `buildThresholdList()` 関数は次のようになります。

```js
function buildThresholdList() {
  let thresholds = [];
  let numSteps = 20;

  for (let i = 1.0; i <= numSteps; i++) {
    let ratio = i / numSteps;
    thresholds.push(ratio);
  }

  thresholds.push(0);
  return thresholds;
}
```

これは 1 と `numSteps` の間の各整数 `i` に対して、値 `i/numSteps` を閾値の配列に入れることで、それぞれが 0.0 と 1.0 の間の比率である閾値の配列を作成しています。また、0 を配列に含めます。既定の `numSteps` (20) が指定された結果、以下の閾値のリストが表示されます。

| # | 率 | # | 率 |
| --- | --- | --- | --- |
| 0 | 0.05 | 11 | 0.6 |
| 1 | 0.1 | 12 | 0.65 |
| 2 | 0.15 | 13 | 0.7 |
| 3 | 0.2 | 14 | 0.75 |
| 4 | 0.25 | 15 | 0.8 |
| 5 | 0.3 | 16 | 0.85 |
| 6 | 0.35 | 17 | 0.9 |
| 7 | 0.4 | 18 | 0.95 |
| 8 | 0.45 | 19 | 1 |
| 9 | 0.5 | 20 | 0 |
| 10 | 0.55 |

もちろん、閾値の配列をハードコードすることは可能ですし、よくやりがちなことです。しかし、この例では設定を追加することで粒度を調整したりするする余地が残っています。

#### 交差の変換の処理

ブラウザーは対象要素（この場合は `"box"` という ID を持つ要素）が表示されているか、またはどのくらい見えているかという比率が、閾値のリストにある値の 1 つをまたぐことを検出して、 `handleIntersect()` を呼び出します。

```js
function handleIntersect(entries, observer) {
  entries.forEach((entry) => {
    if (entry.intersectionRatio > prevRatio) {
      entry.target.style.backgroundColor = increasingColor.replace(
        "ratio",
        entry.intersectionRatio,
      );
    } else {
      entry.target.style.backgroundColor = decreasingColor.replace(
        "ratio",
        entry.intersectionRatio,
      );
    }

    prevRatio = entry.intersectionRatio;
  });
}
```

リストである `entries` 内にある `IntersectionObserverEntry` について、entry の `intersectionRatio` が上昇しているかを調べます。上昇していればターゲットの `background-color` に `increasingColor` （`"rgba(40, 40, 190, ratio)"` だったことを思い出してください）の値をセットし、その際にその中にある "ratio" という文字列を entry が持つ `intersectionRatio` と置き換えます。その結果、色が変更されるだけでなく、対象要素の透明度も変更されます。交差する比率が下がるに連れて、背景色のアルファ値が下がりより透明度の高い要素となります。

同様に、 `intersectionRatio` が下がっている場合は `decreasingColor` を文字列として使用し "ratio" という文字列を `intersectionRatio` でもって置き換えたあとに、要素の `background-color` として適用します。

最後に、交差する割合が上がっているか下がっているかを追跡するために、変数 `prevRatio` に現在の比率を代入しておきます。

### 結果

以下がその結果内容です。ページを上下にスクロールして、ボックスの外観がどう変化するかを確認してみましょう。

より応用的な例は交差オブザーバー API による要素の表示時間設定の節を見てください。

仕様書
---

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

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

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

関連情報
----

* 交差オブザーバーのポリフィル
* 交差オブザーバー API による要素の表示時間設定
* `IntersectionObserver` および `IntersectionObserverEntry`


ByteLengthQueuingStrategy - Web API

ByteLengthQueuingStrategy
=========================

**`ByteLengthQueuingStrategy`** はストリーム API のインターフェイスで、ストリームを構築するときに使用できる組み込みのバイト長キューイング戦略を提供します。

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

`ByteLengthQueuingStrategy()`

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

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

`ByteLengthQueuingStrategy.highWaterMark` 読取専用

背圧が適用される前に内部キューに格納することができるバイト数の合計。

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

`ByteLengthQueuingStrategy.size()`

指定されたチャンクの `byteLength` プロパティを返します。

例
-

```js
const queueingStrategy = new ByteLengthQueuingStrategy({ highWaterMark: 1024 });

const readableStream = new ReadableStream(
  {
    start(controller) {
      // …
    },
    pull(controller) {
      // …
    },
    cancel(err) {
      console.log("stream error:", err);
    },
  },
  queueingStrategy,
);

const size = queueingStrategy.size(chunk);
```

仕様書
---

| Specification |
| --- |
| Streams Standard # blqs-class |

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

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

関連情報
----

* ストリーム API
* 内部キューとキューイング戦略
* `ByteLengthQueuingStrategy()` コンストラクター


WakeLock - Web API

WakeLock
========

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

**`WakeLock`** は画面起動ロック API のインターフェイスで、アプリケーションが動作し続ける必要があるときに、端末の画面が暗くなったりロックされたりすることを防ぐためのものです。

システムの起動ロックはグローバルの `Navigator.wakeLock` プロパティで公開されています。

メソッド
----

``request``

`WakeLockSentinel` オブジェクトを要求し、 `WakeLockSentinel` オブジェクトで解決する `Promise` を返します。

例
-

以下の非同期関数は、 `WakeLockSentinel` オブジェクトを要求します。`WakeLock.request` メソッドはブラウザーが何らかの理由でリクエストを拒否した場合を想定して、 `try...catch` 文で囲まれています。

```js
try {
  const wakeLock = await navigator.wakeLock.request("screen");
} catch (err) {
  // 起動ロックの要求に失敗 - 通常は、バッテリー低下などシステムに起因する。
  console.log(`${err.name}, ${err.message}`);
}
```

仕様書
---

| Specification |
| --- |
| Screen Wake Lock API # the-wakelock-interface |

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

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


Range - Web API

Range
=====

**`Range`** インターフェイスは、ノードやテキストノードの部品を含むことができる文書の範囲を表します。

範囲は `Document.createRange()` メソッドにより生成することができます。また、 `Selection` オブジェクトの `getRangeAt()` (en-US) メソッドや `Document` オブジェクトの `caretRangeFromPoint()` メソッドにより取得することもできます。

さらに、`Range()` コンストラクターも使用できます。

AbstractRange

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

*継承しているプロパティはありません。*

`Range.collapsed` 読取専用

論理値で、範囲の始点と終点が同じ位置にあるか否かを示します。

`Range.commonAncestorContainer` 読取専用

`startContainer` と `endContainer` をともに含む、最も深い `Node` を返します。

`Range.endContainer` 読取専用

`Range` の終点を含む `Node` を返します。

`Range.endOffset` 読取専用

`endContainer` の中での `Range` の終点の位置を示す数字を返します。

`Range.startContainer` 読取専用

`Range` の始点を含む `Node` を返します。

`Range.startOffset` 読取専用

`startContainer` の中での `Range` の始点の位置を示す数字を返します。

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

`Range()`

始点および終点がグローバルな `Document` である `Range` オブジェクトを返します。

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

*継承しているメソッドはありません。*

`Range.collapse()`

`Range` をその端点の一方へ折りたたみます。

`Range.compareBoundaryPoints()`

`Range` の端点を、他の `Range` の端点と比較します。

`Range.compareNode()`
非推奨

Non-standard

`Node` が範囲の前、後、中、外のうちのいずれの場所にあるかを示す定数を返します。

`Range.comparePoint()`

この点が `Range` の前、中、後のうちのいずれの場所にあるかを示す -1、0、1 を返します。

`Range.cloneContents()`

`Range` の中身をコピーした `DocumentFragment` を返します。

`Range.cloneRange()`

元の `Range` と同じ端点を持つ複製された `Range` オブジェクトを返します。

`Range.createContextualFragment()`

渡されたコードの文字列から生成した `DocumentFragment` を返します。

`Range.deleteContents()`

`Range` の中身を `Document` から削除します。

`Range.detach()`

何もしません。互換性のために維持されています。

`Range.extractContents()`

`Range` の中身を文書ツリーから `DocumentFragment` へ移動します。

`Range.getBoundingClientRect()`

`Range` の内容の全体に結びつく `DOMRect` オブジェクトを返します。これは、 `range.getClientRects()` が返します。すべての長方形の集合体です。

`Range.getClientRects()`

`Range` 内のすべての要素について、`Element.getClientRects()` の結果をまとめた `DOMRect` オブジェクトのリストを返します。

`Range.isPointInRange()`

与えられた点が `Range` の中にあるか否かを示す論理値を返します。

`Range.insertNode()`

`Range` の始点に `Node` を挿入します。

`Range.intersectsNode()`

指定ノードの範囲が `Range` と交差するか否かを示す論理値を返します。

`Range.selectNode()`

`Range` を、ある `Node` とその内容を含むように設定します。

`Range.selectNodeContents()`

`Range` を、ある `Node` の内容を含むように設定します。

`Range.setEnd()`

`Range` の終点を設定します。

`Range.setStart()`

`Range` の始点を設定します。

`Range.setEndAfter()`

他の `Node` を基準に `Range` の終点を設定します。

`Range.setEndBefore()`

他の `Node` を基準に `Range` の終点を設定します。

`Range.setStartAfter()`

他の `Node` を基準に `Range` の始点を設定します。

`Range.setStartBefore()`

他の `Node` を基準に `Range` の始点を設定します。

`Range.surroundContents()`

`Range` の中身を新しい `Node` の中に移動します。

`Range.toString()`

`Range` の内容を文字列として返します。

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-range |
| DOM Parsing and Serialization # extensions-to-the-range-interface |
| CSSOM View Module # extensions-to-the-range-interface |

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

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

関連情報
----

* DOM インターフェイスの索引


WheelEvent - Web API

WheelEvent
==========

**`WheelEvent`** インターフェイスは、ユーザーがマウスホイールやそれに似た機器を動かしたときに発行されるイベントを表します。

**メモ:** これは標準のホイールイベントインターフェイスです。古いバージョンのブラウザーは、標準外でブラウザー間の互換性のない `MouseWheelEvent` および `MouseScrollEvent` インターフェイスを実装していました。これらを避けて、このインターフェイスを使用してください。

**メモ:** `wheel` イベントと `scroll` イベントを混同しないでください。 `wheel` イベントの既定のアクションは実装固有のものです。したがって、 `wheel` イベントは必ずしも `scroll` イベントを発行するわけではありません。その場合でも、 `wheel` イベントの `delta*` 値は必ずしもコンテンツのスクロール方向を反映しているとは限りません。したがって、スクロールの方向を取得するために、 `wheel` イベントの `delta*` プロパティに頼らないようにしてください。代わりに、 `scroll` イベント内のターゲットの `scrollLeft` や `scrollTop` の値の変化を検出するようにしてください。

Event

UIEvent

MouseEvent

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

`WheelEvent()`

`WheelEvent` オブジェクトを生成します。

プロパティ
-----

*このインターフェイスは、その祖先である `MouseEvent`, `UIEvent`, `Event` からプロパティを継承しています。*

`WheelEvent.deltaX` 読取専用

水平方向のスクロール量を表す `double` を返します。

`WheelEvent.deltaY` 読取専用

垂直方向のスクロール量を表す `double` を返します。

`WheelEvent.deltaZ` 読取専用

Z 軸方向のスクロール量を表す `double` を返します。

`WheelEvent.deltaMode` 読取専用

スクロール量の差分値の単位を表す `unsigned long` を返します。許容値は以下のとおりです:

| 定数 | 値 | 説明 |
| --- | --- | --- |
| `DOM_DELTA_PIXEL` | `0x00` | `delta*` はピクセル数で指定されます。 |
| `DOM_DELTA_LINE` | `0x01` | `delta*` は行数で指定されます。マウスをクリックするたびに、コンテンツを 1 行スクロールします。行の高さを計算するために使用する方法は、ブラウザーに依存します。 |
| `DOM_DELTA_PAGE` | `0x02` | `delta*` はページ数で指定されます。マウスをクリックするたびに、コンテンツを 1 ページスクロールします。 |

`WheelEvent.wheelDelta` 読取専用
非推奨

Non-standard

ピクセル単位の距離を表す整数（32 ビット）を返します。

`WheelEvent.wheelDeltaX` 読取専用
非推奨

Non-standard

水平スクロール量を表す整数を返します。

`WheelEvent.wheelDeltaY` 読取専用
非推奨

Non-standard

垂直スクロール量を表す整数を返します。

**メモ:** Element: mousewheel イベントには、非推奨の `wheelDelta`、`wheelDeltaX`、`wheelDeltaY` プロパティについての追加の文書があります。

メソッド
----

*このインターフェイスではメソッドが定義されていませんが、祖先である `MouseEvent`, `UIEvent`, `Event` のメソッドを継承しています。*

仕様書
---

| Specification |
| --- |
| UI Events # interface-wheelevent |

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

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

関連情報
----

* `wheel` イベント
* 置き換えたインターフェイス:
    + Gecko の古いマウスホイールイベントオブジェクト: `MouseScrollEvent`


Web Crypto API - Web API

Web Crypto API
==============

**Web Crypto API** は、暗号化を使用してシステムを構築するためにスクリプトが暗号化プリミティブを使用することを可能にするインターフェイスです。

**警告:** Web Crypto API は、低レベルの暗号化プリミティブを多数提供しています。それらは非常に使い方を間違えやすく、そして関連する落とし穴は非常に微妙である場合もあります。

基本的な暗号機能を正しく使用していると仮定しても、安全な鍵管理と全体的なセキュリティシステムの設計を正しく理解するのは非常に難しく、一般的にセキュリティ分野のスペシャリストの領域です。

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

**自分のしていることが分からない場合は、おそらくこの API を使用すべきではないでしょう。**

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

一部のブラウザーでは、`Crypto` というインターフェイスが明確に定義されておらず、暗号化されていなくても実装されていました。混乱を避けるために、このインターフェイスのメソッドとプロパティは Web Crypto API を実装しているブラウザーから削除され、 Web Crypto API のすべてのメソッドは新しいインターフェイス、つまり `SubtleCrypto` で利用可能になりました。`Crypto.subtle` プロパティはそれを実装しているオブジェクトへのアクセスを提供します。

仕様
--

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

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

### Crypto

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


WindowClient - Web API

WindowClient
============

`WindowClient` はサービスワーカー API のインターフェイスで、アクティブなワーカーによって制御される閲覧コンテキスト内のドキュメントである、サービスワーカークライアントのスコープを表します。 サービスワーカークライアントは、それ自身の読み込みとサブリソースに対してサービスワーカーを個別に選択して使用します。

Client

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

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

`WindowClient.focus()`

現在のクライアントにユーザー入力フォーカスを与えます。

`WindowClient.navigate()`

指定された URL を制御されたクライアントのページに読み込みます。

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

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

`WindowClient.focused` 読取専用

論理値で、現在のクライアントにフォーカスがあるかどうかを示します。

`WindowClient.visibilityState` 読取専用

現在のクライアントの可視性を示します。 この値は、`"hidden"`、`"visible"`、`"prerender"` のいずれかです。

例
-

```js
self.addEventListener("notificationclick", (event) => {
  console.log("On notification click: ", event.notification.tag);
  event.notification.close();

  // これは、クライアントが既に開いているかどうかを確認し、
  // 開いている場合にフォーカスを合わせます
  event.waitUntil(
    clients
      .matchAll({
        type: "window",
      })
      .then((clientList) => {
        for (const client of clientList) {
          if (client.url === "/" && "focus" in client) {
            client.focus();
            break;
          }
        }
        if (clients.openWindow) return clients.openWindow("/");
      }),
  );
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # windowclient |

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

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

関連情報
----

* サービスワーカーの使用
* サービスワーカーの基本的なコード例（英語）
* Is ServiceWorker ready?（英語）
* プロミス
* ウェブワーカーの使用
* チャンネルメッセージング API


決済リクエスト API - Web API

決済リクエスト API
===========

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

決済リクエスト API (Payment Request API) は、販売者とユーザーの両方に、一貫したユーザー体験を提供します。これは新しい決済方法ではなく、ユーザーが自分の好きな決済方法を選択し、その情報を販売者が利用できるようにするための方法です。

決済リクエストの概念と利用方法
---------------

オンラインショッピングのカート放棄に関連する多くの問題は、チェックアウトフォームに起因する可能性があります。これは入力が難しく時間がかかり、完了するまでに複数の手順が必要になることがよくあるからです。**決済リクエスト API** はオンライン決済を完了するために必要な手順を減らし、チェックアウトフォームを廃止する可能性があることを意図しています。これは、ユーザーの詳細な情報を記憶し、 HTML フォームを必要とせずに販売者に渡されることで、チェックアウトプロセスを簡単にすることを目的としています。

決済をリクエストするには、ウェブページは、「購入」ボタンをクリックするなど、決済を開始するユーザー操作に応答して `PaymentRequest` オブジェクトを作成します。`PaymentRequest` を使用すると、ユーザーが取引を完了するための入力を提供している間、ウェブページでユーザーエージェントと情報を交換できます。

完全なガイドは、決済リクエスト API の使用を参照してください。

**メモ:** オリジンを跨いだ `<iframe>` 要素内では、`allowpaymentrequest` 属性が設定されている場合のみ、 API が利用可能です。

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

`PaymentAddress`

住所情報を含むオブジェクト。例えば、請求先住所や配送先住所に使用されます。

`PaymentRequest`

ユーザーエージェントの決済インターフェイスを作成および管理するための API を提供するオブジェクト。

`PaymentRequestEvent` (en-US)

`PaymentRequest` が行われたときに決済ハンドラーに配信されるイベント。

`PaymentRequestUpdateEvent`

ユーザーの操作に応じて、ウェブページが決済リクエストの詳細を更新できるようにします。

`PaymentMethodChangeEvent`

ユーザーが決済手段を変更することを表します（例 : クレジットカードからデビットカードへの切り替え）。

`PaymentResponse` (en-US)

ユーザーが決済手段を選択し、決済リクエストを承認した後に返されるオブジェクト。

`MerchantValidationEvent` (en-US)

販売者（ウェブサイト）が具体的な決済ハンドラー（例えば Apple Pay が使用できるものとして登録されているもの）の使用を許可されていることを検証することを要求するブラウザーを表します。

辞書
--

`AddressErrors`

エラーのある `PaymentAddress` 項目に、エラーの説明文を提供する文字列を含む辞書。

`PaymentDetailsUpdate`

決済インターフェイスのインスタンス化の後で、ユーザーが対話を始める前、サーバーが情報を更新する必要がある場合に、決済の詳細に対して行われる必要がある変更を記述したオブジェクト。

仕様書
---

| Specification |
| --- |
| Payment Request API 1.1 # paymentrequest-interface |

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

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

関連情報
----

* 決済リクエスト API の使用
* 決済処理の概要
* Introducing the Payment Request API for Apple Pay
* Google Pay API PaymentRequest Tutorial
* Samsung Pay Web Payments Integration Guide
* W3C Payment Request API FAQ
* 権限ポリシーディレクティブ `payment`


プッシュ API - Web API

プッシュ API
========

**プッシュ API** は、ウェブアプリケーションがサーバーからメッセージ (プッシュ通知) を受信できるようにします。ウェブアプリケーションがフォアグランド状態かどうか、読み込まれているかどうかに関わらず利用できます。開発者は、オプトインしたユーザーへ非同期の通知と更新を届けることができ、タイムリーな新着コンテンツによってユーザーの関心を得られます。

プッシュ通知の概念と使い方
-------------

**警告:** PushManager のサブスクリプションを実装する場合、アプリで CSRF/XSRF 問題を起こさないように保護することが非常に重要です。詳しくは以下の記事を参照してください。

* Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet
* Preventing CSRF and XSRF Attacks

アプリがプッシュ通知メッセージを受信するために、アプリでサービスワーカーが動作している必要があります。サービスワーカーが動作している時に、 `PushManager.subscribe()` を利用してプッシュ通知に加入することができます。

返値の `PushSubscription` には、プッシュ通知メッセージの配信に必要な情報であるエンドポイントとデータ送信用の暗号キーがすべて含まれています。

プッシュ通知メッセージを受信すると、そのメッセージを扱うためのサービスワーカーが起動します。これは、 `onpush` イベントハンドラーへ配信されます。これにより、例えば（`ServiceWorkerRegistration.showNotification()` を使用して）受信した通知を表示するなど、アプリケーションがプッシュ通知の受信に応じた動作ができます。

各サブスクリプションは、サービスワーカーに対して固有です。サブスクリプションのエンドポイントは、固有の capability URL です。サブスクリプションのエンドポイント URL はアプリケーションにメッセージを送るために不可欠な情報です。エンドポイント URL は秘密にしておく必要があります。さもないと、他のアプリケーションがあなたのアプリケーションにプッシュ通知メッセージを送ることができてしまいます。

プッシュ通知メッセージの配信のためにサービスワーカーを動作させると、特にバッテリーなどのリソースを消費します。これを扱う方式はブラウザーごとに異なっており、現在標準となる仕組みはありません。 Firefox も Chrome も通知を生成するプッシュ通知メッセージの数に制限を設けていません。 Firefox は通知を表示しないアプリケーションに送信されるプッシュ通知メッセージの数に制限 (クォータ) を設けていますが、 Chrome には制限がありません。この制限数は、ウェブサイトを訪れるたびに更新されます。

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

`PushEvent`

`ServiceWorker` のグローバルスコープ に送られるプッシュアクションを表します。これは、アプリケーションから `PushSubscription` へ送られる情報を含んでいます。

`PushManager`

プッシュ通知のリクエスト URL など、サードパーティのサーバーからプッシュ通知を受け取るための手段を提供します。

`PushMessageData`

サーバーから送られたプッシュ情報にアクセスする手段を提供し、受信したデータを操作するメソッドを含みます。

`PushSubscription`

サブスクリプションのエンドポイント URL を提供し、プッシュサービスからサブスクリプションを脱退できるようにします。

`PushSubscriptionOptions`

プッシュサブスクリプションに関連付けられたオプションを表します。

サービスワーカーへの追加機能
--------------

以下のサービスワーカー API への追加機能は、プッシュ API 仕様に含まれています。これらは、プッシュ通知メッセージを使用するためのエントリーポイントを提供するため、および、プッシュとサブスクリプション変更イベントの監視と応答のための追加です。

`ServiceWorkerRegistration.pushManager` 読取専用

加入を含むサブスクリプションの管理、アクティブなサブスクリプションの取得、プッシュ権限状態の取得を行う `PushManager` インターフェイスへの参照を返します。これは、プッシュ通知メッセージを使用するためのエントリーポイントです。

`onpush`

`push` イベントが発生する度に発動します。これは、サーバーがプッシュしたメッセージを受信する度に起こります。

`onpushsubscriptionchange`

`pushsubscriptionchange` イベントが発生する度に発動するイベントハンドラーです。例えば、プッシュサブスクリプションが無効になったり、無効になりつつある時（すなわち、プッシュサーバーが有効期限を設定している場合）です。

例
-

Mozilla の ServiceWorker Cookbook は便利なプッシュ通知の例をたくさん揃えています。

仕様書
---

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

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

### api.PushEvent

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

### api.PushMessageData

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

関連情報
----

* Sending VAPID identified WebPush Notifications via Mozilla's Push Service
* Push notifications overview
* サービスワーカー API