位置情報 API - Web API

位置情報 API
========

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

**位置情報 API** (Geolocation API) を使用すると、ユーザーが望む場合に、自分の位置情報をウェブアプリケーションに提供することができます。プライバシー上の理由から、ユーザーは位置情報を報告する許可を求められます。

WebExtension で `Geolocation` オブジェクトを使用するには、マニフェストに `"geolocation"` パーミッションを追加しなければなりません。ユーザーのオペレーティングシステムは、最初に要求されたときに位置情報へのアクセスを許可するようにユーザーに促します。

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

ウェブアプリでユーザーの位置情報を取得したいと思うことはよくあります。例えば、ユーザーの位置を地図上にプロットしたり、ユーザーの位置に関連するパーソナライズされた情報を表示したりすることができます。

位置情報 APIは `navigator.geolocation` への呼び出しを介してアクセスします。これにより、ブラウザーはユーザーに自分の位置情報にアクセスする許可を要求します。ユーザーが許可すると、ブラウザーは端末上で利用可能な最良の機能（GPS など）を使用してこの情報にアクセスします。

開発者は、いくつかの異なる方法でこの位置情報にアクセスできるようになりました。

* `Geolocation.getCurrentPosition()`: 端末の現在の位置を受け取ります。
* `Geolocation.watchPosition()`: 端末の位置が変化するごとに自動的に呼び出され、更新された位置情報を返すハンドラー関数を登録します。

どちらの場合も、メソッド呼び出しには最大 3 つの引数を取ります。

* 成功コールバック（必須）: 位置情報の取得に成功した場合、このコールバックが `GeolocationPosition` オブジェクトを唯一の引数として実行され、位置情報へのアクセスを提供します。
* エラーコールバック（オプション）: 位置情報の検索に失敗した場合、このコールバックが `GeolocationPositionError` オブジェクトを唯一の引数として実行され、何が問題となったかに関するアクセス情報を提供します。
* 位置データを取得するためのオプションを提供するオプションのオブジェクト。

位置情報の使用に関するさらなる情報は、位置情報 API の使用を参照してください。

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

`Geolocation`

この API のメインクラスです。ユーザーの現在位置の取得、位置の変化の監視、および以前に設定した管理のクリアを行うメソッドが含まれています。

`GeolocationPosition`

ユーザーの位置を表します。 `GeolocationPosition` インスタンスは、 `Geolocation` に含まれるメソッドのいずれかの呼び出しが成功した場合に、成功コールバックの内部で返され、タイムスタンプと `GeolocationCoordinates` オブジェクトのインスタンスが含まれます。

`GeolocationCoordinates`

ユーザーの位置の座標を表します。 `GeolocationCoordinates` のインスタンスには、緯度、経度、その他の重要な関連情報が含まれています。

`GeolocationPositionError`

`GeolocationPositionError` は、 `Geolocation` に含まれるメソッドのいずれかの呼び出しに失敗した場合、エラーコールバック内で返され、エラーコードとメッセージが含まれています。

`Navigator.geolocation`

API のエントリーポイント。 `Geolocation` オブジェクトのインスタンスを返し、そこから他のすべての機能にアクセスすることができます。

例
-

例については位置情報 API の使用を参照してください。

仕様書
---

| Specification |
| --- |
| Geolocation API # geolocation\_interface |

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

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

### 可用性

Wi-Fi ベースの測位は Google が提供することが多いため、中国ではバニラの位置情報 API が利用できない場合があります。 Baidu, Autonavi, Tencent などの地域ののサードパーティプロバイダーを使用することができます。これらのサービスは、ユーザーの IP アドレスおよび/またはローカルアプリを使用して、より高度な位置情報を提供します。

関連情報
----

* 位置情報 API の使用
* Geolocation API on w3.org
* Who moved my geolocation? (Hacks blog)


HTMLLinkElement - Web API

HTMLLinkElement
===============

**`HTMLLinkElement`** インターフェイスは、外部リソースの参照情報と、それらのリソースと文書の関係（またはその逆）を表します（`<link>` 要素に対応します。 `HTMLAnchorElement` で表される `<a>` 要素と混同しないでください）。このオブジェクトは `HTMLElement` インターフェイスのすべてのプロパティとメソッドを継承します。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLLinkElement.as`

文字列で、この HTML リンクによって読み込まれるコンテンツの種類を表します。

`HTMLLinkElement.crossOrigin` (en-US)

文字列で、このリンク要素の CORS 設定に対応します。詳細については、 CORS 設定属性を参照してください。

`HTMLLinkElement.disabled`

論理値で、リンクが無効であるかどうかを表します。現在、スタイルシートリンクでのみ使用されています。

`HTMLLinkElement.fetchPriority`
Experimental

オプションの文字列で、ブラウザーが先読みの取得を他の同じ種類のリソースと比較してどのように優先させるべきかというヒントを表します。この値を指定した場合、許可された値のいずれかでなければなりません。高い優先度で取得する場合は `high`、低い優先度で取得する場合は `low`、優先度を指定しない場合は `auto` （既定値）となります。

`HTMLLinkElement.href`

文字列で、対象リソースの URI を表します。

`HTMLLinkElement.hreflang` (en-US)

文字列で、リンク先リソースの言語コードを表します。

`HTMLLinkElement.media`

文字列で、リソースに適用される 1 つ以上のメディア形式のリストを表します。

`HTMLLinkElement.referrerPolicy`

文字列で、使用するリファラーを示す HTML の `referrerpolicy` 属性を反映します。

`HTMLLinkElement.rel`

文字列で、リンク元文書からリンク先リソースに対する関連性を表します。

`HTMLLinkElement.relList` 読取専用

`DOMTokenList` で、 HTML の `rel` 属性をトークンのリストとして反映します。

`HTMLLinkElement.sizes` 読取専用

`DOMTokenList` で、トークンのリストとして HTML の `sizes` 属性を反映します。

`HTMLLinkElement.sheet` 読取専用

指定された要素に関連付けられた `StyleSheet` オブジェクトを返します。存在しない場合は `null` を返します。

`HTMLLinkElement.type`

文字列で、リンク先リソースの MIME タイプを表します。

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

`HTMLLinkElement.charset`
非推奨

文字列で、対象リソースの文字エンコーディングを表します。

`HTMLLinkElement.rev`
非推奨

文字列で、リソースからこの文書に対してリンクされたリソースの逆相の関係を表します。

**メモ:** 現在、W3C HTML 5.2 仕様では `rev` は廃止ではないとされていますが、WHATWG living standard では廃止というラベルが貼られたままになっています。この矛盾が解決されるまでは、廃止であると考えるべきでしょう。

`HTMLLinkElement.target`
非推奨

文字列で、リソースが適用する対象フレームの名前を表します。

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

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmllinkelement |

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

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

関連情報
----

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


USBIsochronousOutTransferPacket - Web API

USBIsochronousOutTransferPacket
===============================

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 の `USBIsochronousOutTransferPacket` インターフェイスは、`USBDevice` インターフェイスの `isochronousTransferOut()` メソッドの呼び出しに対する応答の一部です。これは、アイソクロナスエンドポイントによる USB ホストから USB デバイスへのデータ転送の要求における個別のパケットの状態を表します。

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

`USBIsochronousOutTransferPacket()`
Experimental

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

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

`USBIsochronousOutTransferPacket.bytesWritten` 読取専用
Experimental

このパケットでデバイスに送信されたバイト数を返します。

`USBIsochronousOutTransferPacket.status` 読取専用
Experimental

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

* `"ok"` — 転送は成功しました。
* `"stall"` — デバイスはエンドポイントでストール状態を発生させ、エラーを示しました。アイソクロナスエンドポイントでのストールをクリアする必要はありません。

仕様書
---

| Specification |
| --- |
| WebUSB API # usbisochronousouttransferpacket |

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

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


MIDIMessageEvent - Web API

MIDIMessageEvent
================

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

Web MIDI API の **`MIDIMessageEvent`** インターフェイスは、`MIDIInput` インターフェイスの `midimessage` イベントに渡されるイベントを表します。`midimessage` イベントは、`MIDIInput` が表すデバイスから MIDI メッセージが送られてくるたびに発火します。たとえば、MIDI キーボードのキーが押された時、ノブが回された時、スライダーが動かされた時などです。

Event

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

`MIDIMessageEvent()`

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

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

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

`MIDIMessageEvent.data`

1 個の MIDI メッセージのデータバイト列が格納された `Uint8Array` です。構造の詳細については、MIDI の仕様書を参照してください。

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

*このインターフェイスは固有のメソッドを実装していませんが、`Event` からメソッドを継承します。*

例
-

以下の例は、すべての MIDI メッセージをコンソールに出力します。

```js
navigator.requestMIDIAccess().then((midiAccess) => {
  Array.from(midiAccess.inputs).forEach((input) => {
    input[1].onmidimessage = (msg) => {
      console.log(msg);
    };
  });
});
```

仕様書
---

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

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

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


サービスワーカー API - Web API

サービスワーカー API
============

サービスワーカーは、基本的にウェブアプリケーション、ブラウザー、そして（もし繋がっていれば）ネットワークの間に介在するプロキシサーバーのように振る舞います。これは、よりよいオフラインの操作性を可能にするように意図されており、ネットワークのリクエストに介在してネットワークの使用可否の状況に基づいて適切な対応を取ったり、サーバー上にある資産を更新したりします。また、プッシュ通知やバックグラウンド同期の API 群へのアクセスもできるようになります。

サービスワーカーの概念と使い方
---------------

サービスワーカーは、あるオリジンとパスに対して登録されたイベント駆動型のワーカーです。 JavaScript ファイルの形を取り、ナビゲーションやリソースへのリクエストを横取りや改変したり細かい粒度でリソースをキャッシュすることで関連付けられたウェブページやサイトを制御し、それぞれの状況（もっとも顕著な例は、ネットワークが利用できないとき）にアプリがどのように振る舞うかを完全に制御することができます。

サービスワーカーはワーカーのコンテキストで実行されます。従って、DOM へアクセスすることができず、アプリを実行する主要な JavaScript とは異なるスレッドで実行されるため、他のタスクをブロックすることはありません。完全に非同期で設計されています。そのため、同期型の XHR やウェブストレージのような API をサービスワーカーで使用することはできません。

 サービスワーカーの JavaScript モジュールは動的にインポートできず、`import()` はサービスワーカーのグローバルスコープで呼び出されると例外を発生します。
 `import` 文を使用した静的インポートは許可されています。

サービスワーカーはセキュリティ上の理由から、 HTTPS 通信でのみ動作します。最も重要なことは、HTTP 接続は中間者攻撃による悪意のあるコード注入の影響を受けやすく、こうした強力な API へのアクセスを許可されると、その攻撃はより悪いものになる可能性があるということです。Firefox ではプライベートブラウジングモードでサービスワーカー API を利用することはできません。

**メモ:** Firefox では、テストのためにサービスワーカーを HTTP (安全ではない) 上で実行することができます。これは、 **HTTP による サービスワーカー を有効化 (ツールボックスを開いたとき)** オプションを Firefox Devtools 設定メニューでチェックするだけです。

**メモ:** サービスワーカーは AppCache のような、この分野における以前の試みより勝っています。以前のものは、あなたがしようとしていることを想定していなかったり、想定が正しくなかったときに壊れたりしていたのに対して、サービスワーカーはあなたがすべてを細かく制御することができるためです。

**メモ:** サービスワーカーはプロミスを頻繁に使用して、レスポンスが来るのを待ってから、成功または失敗のアクションで応答します。プロミスのアーキテクチャはこの領域に対して理想的なものです。

### 登録

サービスワーカーは最初に `ServiceWorkerContainer.register()` メソッドを使って登録されます。成功したら、サービスワーカーがクライアントにダウンロードされ、ユーザーがアクセスした URL のオリジン内全体、または指定したそのサブセット内に対してインストールと有効化（下記参照）が試みられます。

### ダウンロードとインストールと有効化

この段階で、サービスワーカーは以下のライフサイクルで実行されます。

1. ダウンロード
2. インストール
3. 有効化

ユーザーが最初にサービスワーカーが制御するサイトやページにアクセスすると、サービスワーカーが直ちにダウンロードされます。

その後、次の場面で更新されます。

* スコープ内のページへの移動が発生したとき
* サービスワーカーでイベントが発生し、かつ過去 24 時間以内にダウンロードが行われていない場合

ダウンロードしたファイルが新しいと分かった場合、既存のサービスワーカーとバイト単位に比較して異なっていた場合や、そのページやサイトで最初のサービスワーカーが見つかった場合は、インストールが試みられます。

サービスワーカーが初めて有効化されるときであれば、インストールが試みられ、インストールに成功した後で、有効化されます。

利用できる既存のサービスワーカーがあった場合は、新しいバージョンがバックグラウンドでインストールされますが、まだ有効化 (activate) されません。この時点のものを*待機中 (waiting) のワーカー*と呼びます。まだ使用している古いサービスワーカーが読み込んでいるページがなくなった時のみ、有効化されます。ページが読み込まれなくなったらすぐに、新しいサービスワーカーが有効化されます（*アクティブワーカー*になります）。 `ServiceWorkerGlobalScope.skipWaiting()` を使用するとすぐに有効化することができ、 `Clients.claim()` を使用してアクティブワーカーが既存のページの管理を始めることができます。

`install` を受け取ることもできます。イベントが発行されたときの標準的なアクションは、使用するためにサービスワーカーを準備すること、例えば組込みストレージ API を使用してキャッシュを構築したり、アプリがオフラインの時に使用したい資産をその中に配置したりすることです。

`activate` イベントもあります。このイベントが発行された時点は、古いキャッシュや、前のバージョンのサービスワーカーに関するその他のものを整理するのによいタイミングです。

サービスワーカーは `FetchEvent` イベントを使用してリクエストに応答することができます。`FetchEvent.respondWith()` メソッドを使用して、これらのリクエストに対するレスポンスを何でも思うように変更できます。

**メモ:** `install`/`activate` イベントは完了するまでに時間がかかる可能性があるため、サービスワーカーの仕様書では `waitUntil()` メソッドを提供しています。 `install` または `activate` イベント内でプロミスを指定してこのメソッドを呼び出すと、プロミスが正常に解決されるまで、 `fetch` や `push` などの関数イベントはサービスワーカーに配信されません。

最初の基本的な例をどのように構築するかについての完全なチュートリアルは、サービスワーカーの使用を読んでください。

その他の使用例
-------

サービスワーカーは次のような用途も想定しています。

* バックグラウンドのデータ同期
* 他のオリジンからのリソースのリクエストに対する応答
* 位置情報やジャイロスコープのような計算コストの高いデータの更新を集中的に受信して、複数のページがデータの一部を利用できるようにすること
* CoffeeScript, less, CJS/AMD モジュールなどの開発用途で、クライアント側のコンパイルや依存性管理
* バックグラウンドサービスのフック
* 特定の URL パターンに基づくテンプレートカスタマイズ
* パフォーマンスの改善、例えばユーザーが近く必要とするであろう、写真アルバムの次の数枚の写真などの先読み

近い将来、サービスワーカーはネイティブアプリで実現できることに近い、その他いくつもの便利なことを、ウェブプラットフォーム上でも実現する事ができるようになるでしょう。興味深いことに、次のような他の仕様書でも、サービスワーカーのコンテキストを利用できるようになってきています。

* バックグラウンド同期: ユーザーがサイトにいないときにもサービスワーカーを起動し、キャッシュを更新したりすることができます。
* プッシュメッセージへの応答: 新しいコンテンツが利用可能になった旨を伝えるためにユーザーにメッセージを送るためにサービスワーカーを起動します。
* 特定の日付・時刻に対する反応
* 特定の地理的範囲へ入った事を検知する
インターフェイス
--------

`Cache`

`ServiceWorker` のライフライクルの一部としてキャッシュされる、`Request` / `Response` オブジェクトのペアのためのストレージです。

`CacheStorage`

`Cache` オブジェクトのストレージです。これは `ServiceWorker` がアクセスできるすべての名前付きキャッシュのへの目録を提供し、文字列の名前から対応する `Cache` へのマップを保持します。

`Client`

サービスワーカークライアントのスコープを表します。サービスワーカークライアントは、ブラウザーコンテキスト内の文書または `SharedWorker` であり、アクティブワーカーによって制御されています。

`Clients`

`Client` オブジェクトのリストのためのコンテナーであり、現在のオリジンにある有効化されたサービスワーカークライアントにアクセスする主な方法です。

`ExtendableEvent`

`ServiceWorkerGlobalScope` で配信される `install` イベントや `activate` イベントのライフタイムを延ばします。これは、データベーススキーマの更新や使われなくなったキャッシュエントリーの削除などが終わるまで機能的イベント (Functional events) が `ServiceWorker` に配信されないことを保証します。

`ExtendableMessageEvent`

サービスワーカーで発生する `message` イベントのイベントオブジェクト（別のコンテキストから `ServiceWorkerGlobalScope` でチャンネルメッセージを受信した時）の有効期限を延長します。

`FetchEvent`

ハンドラー `onfetch` に渡される引数、 `FetchEvent` は `ServiceWorkerGlobalScope` で配信される読み取りアクションを表現しています。これは、リクエストと結果のレスポンスに関する情報を含み、`FetchEvent.respondWith()` メソッドを提供して、制御されたページに任意のレスポンスを返すことができます。

`InstallEvent`
非推奨

Non-standard

`oninstall` ハンドラーに渡される引数で、 `InstallEvent` インターフェースは `ServiceWorker` の `ServiceWorkerGlobalScope` に配信されるインストールアクションを表現します。 `ExtendableEvent` の子として、`FetchEvent` のような機能イベントがインストール中に配信されないことを保証しています。

`NavigationPreloadManager`

サービスワーカーによるリソースの先読みを管理するためのメソッドを提供します。

`Navigator.serviceWorker`

`ServiceWorker` オブジェクトを返します。これにより、関連ドキュメントに対する登録、削除、アップグレード、通信へのアクセスを提供します。

`NotificationEvent`

`onnotificationclick` ハンドラーに渡される引数で、`NotificationEvent` インターフェースは `ServiceWorker` で通知クリックイベントを表現します。

`ServiceWorker`

サービスワーカーを表します。複数の閲覧コンテキスト（例：ページ、ワーカーなど）を同じ `ServiceWorker` オブジェクトに関連付けることができます。

`ServiceWorkerContainer`

サービスワーカーの登録、登録解除、更新、サービスワーカーとその登録の状態へのアクセスなどの機能を含む、ネットワークエコシステムの全体ユニットとしてのサービスワーカーを表すオブジェクトを提供します。

`ServiceWorkerGlobalScope`

サービスワーカーのグローバル実行コンテキストを表します。

`MessageEvent`

`ServiceWorkerGlobalScope` に送られるメッセージを表します。

`ServiceWorkerRegistration`

サービスワーカーの登録を表します。

`SyncEvent`
Experimental

SyncEvent インターフェイスはサービスワーカーの `ServiceWorkerGlobalScope` で配信された同期アクションを表します。

`SyncManager`
Experimental

同期登録を登録、およびリストするためのインターフェイスを提供します。

`WindowClient`

アクティブなワーカーによって制御されるブラウザーコンテキスト内の文書であるサービスワーカークライアントのスコープを表します。

仕様書
---

| Specification |
| --- |
| Service Workers  |

関連情報
----

* ServiceWorker Cookbook (英語)
* サービスワーカーの使用
* Service workers basic code example (英語)
* Is ServiceWorker ready? (英語)
* `Promise`


TextEncoderStream - Web API

TextEncoderStream
=================

**`TextEncoderStream`** はエンコーディング API のインターフェイスで、文字列のストリームを UTF-8 エンコーディングのバイト列に変換します。これは `TextEncoder` と同等のストリームです。

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

`TextEncoderStream()`

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

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

`TextEncoderStream.encoding` 読取専用

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

`TextEncoderStream.readable` 読取専用

このオブジェクトが制御する `ReadableStream` インスタンスを返します。

`TextEncoderStream.writable` 読取専用

このオブジェクトが制御する `WritableStream` インスタンスを返します。

例
-

* 構造化データと HTML のストリーミングの例
* `TextEncoderStream` を使用してデータをアップロードするフェッチリクエストストリームの例.
仕様書
---

| Specification |
| --- |
| Encoding Standard # interface-textencoderstream |

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

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

関連情報
----

* `TextDecoderStream`
* ストリーム API の概念
* Experimenting with the Streams API


NetworkInformation - Web API

NetworkInformation
==================

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

**`NetworkInformation`** はネットワーク情報 API のインターフェイスで、端末がネットワークとの通信に使用している接続に関する情報を提供し、接続の種類が変更された場合にスクリプトに通知するための手段を提供します。
 `NetworkInformation` インターフェイスはインスタンスを生成できません。代わりに、`Navigator` インターフェイスの `connection` プロパティを通してアクセスします。

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

EventTarget

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

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

`NetworkInformation.downlink` 読取専用
Experimental

実効帯域幅の推定値をメガビット毎秒で返します。 25 キロビット毎秒の最も近い倍数に丸められた値です。

`NetworkInformation.downlinkMax` 読取専用
Experimental

基盤となる接続技術の下りの最大速度を、メガビット毎秒 (Mbps) 単位で返します。

`NetworkInformation.effectiveType` 読取専用
Experimental

'slow-2g', '2g', '3g', '4g' のいずれかを意味する接続の有効な種類を返します。この値は、最近観測されたラウンドトリップ時間とダウンリンク値の組合せを使用して決定されます。

`NetworkInformation.rtt` 読取専用
Experimental

推定有効ラウンドトリップ時間を、 25 ミリ秒の倍数に丸めた値で返します。

`NetworkInformation.saveData` 読取専用
Experimental

ユーザーがユーザーエージェントにデータ使用量の削減オプションを設定している場合、 `true` を返します。

`NetworkInformation.type` 読取専用
Experimental

端末がネットワーク通信に使用している接続の種類を返します。値は次のうちのいずれかです。

* `bluetooth`
* `cellular`
* `ethernet`
* `none`
* `wifi`
* `wimax`
* `other`
* `unknown`

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

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

### イベント

`change`
Experimental

接続情報が変更されたときに発行されるイベントです。

仕様書
---

| Specification |
| --- |
| Network Information API # networkinformation-interface |

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

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

関連項目
----

* オンライン／オフラインイベント


Keyboard - Web API

Keyboard
========

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

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

**`Keyboard`** はキーボード API のインターフェイスで、キーボードレイアウトマップを取得し、物理キーボードからのキー押下のキャプチャを切り替える関数を提供します。
 有効なコード値のリストは UI Events KeyboardEvent code Values 仕様にあります。

EventTarget

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

なし。

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

`Keyboard.getLayoutMap()`
Experimental

特定の物理キーに関連付けられた文字列を取得するための関数を持つ、マップ風のオブジェクトである `KeyboardLayoutMap` のインスタンスに解決するプロミス (`Promise`) を返します。

`Keyboard.lock()`
Experimental

物理キーボード上の任意のキーまたはすべてのキーのキー押下のキャプチャを有効にした後、 `Promise` を返します。

`Keyboard.unlock()`
Experimental

`lock()`メソッドでキャプチャしたすべてのキーのロックを解除し、同期的に返します。

例
-

次の例は、英語の QWERTY キーボードの 'W' キーに対応するキーに関連付けられた、場所またはレイアウト固有の文字列を取得する方法を示しています。

```js
if (navigator.keyboard) {
  const keyboard = navigator.keyboard;
  keyboard.getLayoutMap().then((keyboardLayoutMap) => {
    const upKey = keyboardLayoutMap.get("KeyW");
    window.alert(`Press ${upKey} to move up.`);
  });
} else {
  // Do something else.
}
```

仕様書
---

| Specification |
| --- |
| Keyboard Map # keyboard-interface |
| Keyboard Lock # keyboard-interface |

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

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


Location - Web API

Location
========

**`Location`** インターフェイスは、関連付けられたオブジェクトの場所 (URL) を表します。変更が行われると、関連するオブジェクトに反映されます。 `Document` および `Window` インターフェイスにはこのような関連付けられた `Location` があり、それぞれ `Document.location` および `Window.location` でアクセスできます。

Location の解剖
------------

下記 URL の各部分にポインターを当てると、その意味が強調されます。
```

<span id="href" title="href"
 ><span id="origin" title="origin"
 ><span id="protocol" title="protocol">https:</span>//<span
 id="host"
 title="host"
 ><span id="hostname" title="hostname">example.org</span>:<span
 id="port"
 title="port"
 >8080</span
 ></span
 ></span
 ><span id="pathname" title="pathname">/foo/bar</span
 ><span id="search" title="search">?q=baz</span
 ><span id="hash" title="hash">#bang</span></span
>
```

```
html {
  display: table;
  width: 100%;
}

body {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  font-family: Georgia;
  font-size: 175%;
  line-height: 1em;
  white-space: nowrap;
}

[title] {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  line-height: 2em;
  cursor: pointer;
  color: gray;
}

[title]::before {
  content: attr(title);
  font-family: monospace;
  position: absolute;
  top: 100%;
  width: 100%;
  left: 50%;
  margin-left: -50%;
  font-size: 60%;
  line-height: 1.5;
  background: black;
}

[title]:hover::before,
:target::before {
  background: black;
  color: yellow;
}

[title] [title]::before {
  margin-top: 1.5em;
}

[title] [title] [title]::before {
  margin-top: 3em;
}

[title] [title] [title] [title]::before {
  margin-top: 4.5em;
}

[title]:hover,
:target {
  position: relative;
  z-index: 1;
  outline: 50em solid rgba(255, 255, 255, 0.8);
}
```

```
document.body.addEventListener("click", (event) => {
  event.preventDefault();

  window.location.hash = event.target.hasAttribute("id")
    ? `#${event.target.getAttribute("id")}`
    : "";
});
```

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

`Location.ancestorOrigins`

静的な `DOMStringList` で、指定された `Location` オブジェクトに関連付けられた文書の、すべての祖先の閲覧コンテキストを逆順に保持します。

`Location.href`

URL 全体を収めた文字列を返す文字列化です。この値を変更すると、関連付けられた文書が新しいページへ移動します。この値は、関連付けられた文書のものとは異なるオリジンから設定できます。

`Location.protocol`

末尾の `':'` を含む、URL のプロトコルスキームを収めた文字列です。

`Location.host`

URL のホスト (すなわち*ホスト名*、`':'`、*ポート番号*) を収めた文字列です。

`Location.hostname`

URL のドメインを収めた文字列です。

`Location.port`

URL のポート番号を収めた文字列です。

`Location.pathname`

URL のパス部分で、先頭の `'/'` に続いて URL のパス部分が入ったもので、クエリー文字列やフラグメントを含めない文字列です。

`Location.search`

URL のうち、 `'?'` とそれに続く引数や「クエリー文字列」を収めた文字列です。最近のブラウザーは、クエリー文字列から引数を容易に解析するための URLSearchParams や URL.searchParams を提供しています。

`Location.hash`

URL のうち、 `'#'` とそれに続くフラグメント識別子を収めた文字列です。

`Location.origin` 読取専用

特定の位置のオリジンの正規形を収めた文字列です。

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

`Location.assign()`

引数で指定した URL のリソースを読み込みます。

`Location.reload()`

現在の URL のリソースを再読み込みします。

`Location.replace()`

現在のリソースを、指定した URL のリソースで置き換えます。 `assign()` メソッドとの違いは、`replace()` を使用した後は現在のページがセッションの `History` に保存されないことであり、ユーザーは*戻る*ボタンを使用して移動することができません。

`Location.toString()`

URL 全体を収めた文字列を返します。これは `Location.href` と同義ですが、こちらは値を変更するために使用できません。

例
-

```js
// location: https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
const loc = document.location;
console.log(loc.href); // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
console.log(loc.protocol); // https:
console.log(loc.host); // developer.mozilla.org:8080
console.log(loc.hostname); // developer.mozilla.org
console.log(loc.port); // 8080
console.log(loc.pathname); // /en-US/search
console.log(loc.search); // ?q=URL
console.log(loc.hash); // #search-results-close-container
console.log(loc.origin); // https://developer.mozilla.org:8080

location.assign("http://another.site"); // load another page
```

仕様書
---

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

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

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

関連情報
----

* 2 つの `Location` のプロパティ: `Window.location` および `Document.location`.
* URL を操作するインターフェイス: `URL`, `URLSearchParams`


XPathException - Web API

XPathException
==============

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

DOM XPath API において、 **XPathException`** インターフェイスは XPath の演算処理中に遭遇する例外条件を表します。

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

`XPathException.code` 読取専用

エラーコード定数のうちのいずれかの入った `short` を返します。

定数
--

| 定数 | 値 | 説明 |
| --- | --- | --- |
| `INVALID_EXPRESSION_ERR` | `51` | 構文エラーがあるなど、特定の `XPathEvaluator` (en-US) の規則に従った正当な式でない場合、またはこの実装では対応していない特殊な拡張関数や変数を格納している場合。 |
| `TYPE_ERR` | `52` | 指定した型を返すように式を変換できない場合。 |

仕様書
---

#### No specification found

No specification data found for `api.XPathException`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

関連情報
----

* `Document.createExpression()`
* `XPathExpression`


MessagePort - Web API

MessagePort
===========

Channel Messaging API の **`MessagePort`** インターフェースは、`MessageChannel` の 2 つのポートの一方を表し、片方のポートから送信されるメッセージをもう片方のポートで受信待機できます。

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

メソッド
----

*親である `EventTarget` からのメソッドを継承します。*

`MessagePort.postMessage`

ポートからメッセージを送信します。また、任意でオブジェクトの所有権を他のブラウジングコンテキストへ転送します。

`MessagePort.start`

ポート上で順番待ちのメッセージの送信を開始します。(`EventTarget.addEventListener` を使用する場合のみ必要です。`MessagePort.onmessage` を使用する場合は暗黙に実行されます。)

`MessagePort.close`

ポートとの接続を切断し、このポートはアクティブではなくなります。

イベントハンドラ
--------

*親である `EventTarget` からのイベントハンドラを継承します。*

`MessagePort.onmessage`

これは、`message` 型の `MessageEvent` がポート上で発動した時に呼び出される `EventListener` です。つまり、ポートがメッセージを受信した時に呼び出されます。

`MessagePort.onmessageerror`

ポートで `messageerror` 型の `MessageEvent` が発火すると呼び出されます。つまり、デシリアライズできないメッセージを受け取ったときです。

例
-

次のコードブロックには、`MessageChannel.MessageChannel` コンストラクタで作成された新しいチャンネルがあります。

Iframe が読み込まれると、`MessageChannel.port1` に `onmessage` ハンドラーを登録し、メッセージと共に `window.postMessage` を使用して IFrame に `MessageChannel.port2` を送信します。

IFrame からメッセージが返却されると。`onMessage` 関数でメッセージをパラグラフに出力します。
```

var channel = new MessageChannel();
var output = document.querySelector('.output');
var iframe = document.querySelector('iframe');

// Wait for the iframe to load
iframe.addEventListener("load", onLoad);

function onLoad() {
  // Listen for messages on port1
  channel.port1.onmessage = onMessage;

  // Transfer port2 to the iframe
  iframe.contentWindow.postMessage('Hello from the main page!', '*', [channel.port2]);
}

// Handle messages received on port1
function onMessage(e) {
  output.innerHTML = e.data;
}
```

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

仕様
--

| Specification |
| --- |
| HTML Standard # message-ports |

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

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

関連情報
----

* Using channel messaging


CSSSkew - Web API

CSSSkew
=======

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

**`CSSSkew`** は CSS 型付きオブジェクトモデルのインターフェイスで、 `CSSTransformValue` インターフェイスの一部です。これは CSS における個々の `transform` プロパティの `skew()` の値を表します。

CSSTransformComponent

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

`CSSSkew()`
Experimental

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

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

`ax`
Experimental

X 軸の値を返したり設定したりします。

`ay`
Experimental

Y 軸の値を返したり設定したりします。

例
-

To Do

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # cssskew |

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

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


CSS - Web API

CSS
===

**`CSS`** インターフェイス は CSS に関連した便利なメソッドを持っています。このインターフェイスにはオブジェクトは実装されていません。静的メソッドのみがあり、実用的なインターフェイスになっています。

### 静的プロパティ

`CSS.highlights`
Experimental

`HighlightRegistry` へのアクセスを提供します。これは任意のテキスト範囲を CSS Custom Highlight API (en-US) を使用してスタイル設定するために使用するものです。

`CSS.paintWorklet`
Experimental
 安全なコンテキスト用

描画に関するすべてのクラスを担当するワークレットへのアクセスを提供します。

メソッド
----

*CSS インターフェイスはユーティリティインターフェイスです。この型のオブジェクトは作成できません。静的メソッドのみが定義されています。*

### 静的メソッド

*継承している静的メソッドはありません。*

`CSS.registerProperty()`

`カスタムプロパティ`を登録し、プロパティ型のチェック、既定値、値の継承の有無を指定します。

`CSS.supports()`

引数で与えられた*プロパティと値*の組や条件に対応しているかどうかを示す論理値を返します。

`CSS.escape()`

主に CSS セレクターの一部として使用するための文字列をエスケープするのに使用できます。

`CSS ファクトリー関数`

使用したファクトリー関数のメソッドの名前を単位としてパラメーターの数値の値を持つ新しい `CSSUnitValue` (en-US) を返すために使用できます。

```js
CSS.em(3); // CSSUnitValue {value: 3, unit: "em"}
```

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

*CSS インターフェイスはユーティリティインターフェイスです。この型のオブジェクトは作成できません。静的プロパティのみが定義されています。*

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # namespacedef-css |
| CSS Properties and Values API Level 1  |

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

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


WebSocket - Web API

WebSocket
=========

`WebSocket` オブジェクトは、サーバーへの WebSocket 接続の作成と管理、および接続上のデータの送受信に使用する API を提供します。

`WebSocket` を構築するには、 `WebSocket()` コンストラクターを使用してください。

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

EventTarget

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

`WebSocket()`

新しく作成された `WebSocket` オブジェクトを返します。

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

`WebSocket.binaryType`

接続で使用されるバイナリデータ型。

`WebSocket.bufferedAmount` 読取専用

キューに入れられたデータのバイト数。

`WebSocket.extensions` 読取専用

サーバーによって選択された拡張機能。

`WebSocket.protocol` 読取専用

サーバーによって選択されたサブプロトコル。

`WebSocket.readyState` 読取専用

接続の現在の状態。

`WebSocket.url` 読取専用

WebSocket の絶対 URL。

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

`WebSocket.close()`

接続を閉じます。

`WebSocket.send()`

送信するデータをキューに入れます。

イベント
----

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

`close`

`WebSocket` による接続が閉じられたときに発生します。
 `onclose` プロパティからも利用できます。

`error`

`WebSocket` による接続が、データの一部が送信できなかったなどのエラーのために閉じた時に発生します。
 `onerror` プロパティからも利用できます。

`message`

`WebSocket` を通じてデータを受信したときに発生します。
 `onmessage` プロパティからも利用できます。

`open`

`WebSocket` による接続が開いたときに発生します。
 `onopen` プロパティからも利用できます。

例
-

```js
// WebSocket 接続を作成
const socket = new WebSocket("ws://localhost:8080");

// 接続が開いたときのイベント
socket.addEventListener("open", (event) => {
  socket.send("Hello Server!");
});

// メッセージの待ち受け
socket.addEventListener("message", (event) => {
  console.log("Message from server ", event.data);
});
```

仕様書
---

| Specification |
| --- |
| WebSockets Standard # the-websocket-interface |

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

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

関連情報
----

* WebSocket クライアントアプリケーションを書く


BarProp - Web API

BarProp
=======

**`BarProp`** は `Document Object Model` のインターフェイスで、ウェブページ内のスクリプトに公開されるウェブブラウザーのユーザーインターフェイス要素を表します。以下のインターフェイス要素はそれぞれ `BarProp` オブジェクトで表します。

`Window.locationbar`

ブラウザーのロケーションバーです。

`Window.menubar`

ブラウザーのメニューバーです。

`Window.personalbar`

ブラウザーの個人バーです

`Window.scrollbars`

ブラウザーのスクロールバーです。

`Window.statusbar`

ブラウザーのステータスバーです。

`Window.toolbar`

ブラウザーのツールバーです。

`BarProp` インターフェイスは直接アクセスするのではなく、これらの要素のいずれかを介してアクセスします。

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

`BarProp.visible` 読取専用

`Boolean` で、用いるインターフェイス要素で表すバーが可視であれば真になります。

例
-

次の例は、ロケーションバーを表す `BarProp` オブジェクトをコンソールに出力します。

```js
console.log(window.locationbar);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # barprop |

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

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


NavigatorUAData - Web API

NavigatorUAData
===============

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

**`NavigatorUAData`** はユーザーエージェントクライアントヒント API のインターフェイスで、ユーザーのブラウザーとオペレーティングシステムに関する情報を返します。

このオブジェクトのインスタンスは `Navigator.userAgentData` を呼び出すことによって返されます。そのため、このインターフェイスにはコンストラクターはありません。

**メモ:** 「高エントロピー」と「低エントロピー」という用語は、これらの値がブラウザーについて明らかにする情報の量を参照しています。プロパティとして返される値は、低エントロピーであり、ユーザーを特定する可能性が低いと判断されます。 `NavigatorUAData.getHighEntropyValues()` によって返される値は、より多くの情報を明らかにする可能性があります。そのため、これらの値は `Promise` によって取得され、ブラウザーがユーザーの許可を要求したり、他のチェックを行ったりするための時間を確保することができます。

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

`NavigatorUAData.brands` 読取専用
Experimental

ブラウザー名とバージョンを格納したブランド情報の配列を返します。

`NavigatorUAData.mobile` 読取専用
Experimental

ユーザーエージェントがモバイル端末で動作している場合は `true` を返します。

`NavigatorUAData.platform` 読取専用
Experimental

ユーザーエージェントが動作しているプラットフォームのブランドを返します。

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

`NavigatorUAData.getHighEntropyValues()`
Experimental

ユーザーエージェントが返す高エントロピー値を格納した辞書オブジェクトで解決する `Promise` を返します。

`NavigatorUAData.toJSON()`
Experimental

`NavigatorUAData` オブジェクトの低エントロピープロパティの JSON 表現を返すシリアライザーです。

例
-

### ブランド名の取得

以下の例は、 `NavigatorUAData.brands` の値をコンソールに表示するものです。

```js
console.log(navigator.userAgentData.brands);
```

### 高エントロピー値の返却

以下の値では、 `NavigatorUAData.getHighEntropyValues()` メソッドを使用して、多くのヒントをリクエストしています。プロミスが解決すると、この情報がコンソールに表示されます。

```js
navigator.userAgentData
  .getHighEntropyValues([
    "architecture",
    "model",
    "platform",
    "platformVersion",
    "fullVersionList",
  ])
  .then((ua) => {
    console.log(ua);
  });
```

仕様書
---

| Specification |
| --- |
| User-Agent Client Hints # navigatoruadata |

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

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

関連情報
----

* Improving user privacy and developer experience with User-Agent Client Hints


IDBKeyRange - Web API

IDBKeyRange
===========

IndexedDB API の **`IDBKeyRange`** インターフェイスは、キーとして使われるデータ型における 1 個の連続した範囲を表します。`IDBObjectStore` および `IDBIndex` のオブジェクトから、キーまたはキーの範囲を用いてレコードを取り出すことができます。下限および上限により、範囲を制限できます。たとえば、キーが A 〜 Z の範囲にある全ての値を反復できます。

キーの範囲は、単一の値、もしくは上限および下限 (端点ともいう) をもつ範囲になり得ます。キーの範囲が上限と下限の両方を持つ場合、*有界* と呼びます。境界が無い場合、*非有界* と呼びます。有界のキーの範囲は、開 (端点を含まない) にも閉 (端点を含む) にもなり得ます。特定の範囲のキーを全て取得するには、以下のコードの構成を用いることができます。

| 範囲 | コード |
| --- | --- |
| ≥ **x** の全キー | `IDBKeyRange.lowerBound` `(x)` |
| > **x** の全キー | `IDBKeyRange.lowerBound` `(x, true)` |
| ≤ **y** の全キー | `IDBKeyRange.upperBound` `(y)` |
| < **y** の全キー | `IDBKeyRange.upperBound` `(y, true)` |
| ≥ **x** && ≤ **y** の全キー | `IDBKeyRange.bound` `(x, y)` |
| > **x** && < **y** の全キー | `IDBKeyRange.bound` `(x, y, true, true)` |
| > **x** && ≤ **y** の全キー | `IDBKeyRange.bound` `(x, y, true, false)` |
| ≥ **x** && < **y** の全キー | `IDBKeyRange.bound` `(x, y, false, true)` |
| 特定のキー = **z** | `IDBKeyRange.only` `(z)` |

キーは、以下の条件を満たすとき、キーの範囲に含まれます。

* キーの範囲の `lower` の値が、以下のいずれかである
    + `undefined`
    + キーの値より小さい
    + `lowerOpen` が `false` であり、キーの値と等しい
* キーの範囲の `upper` の値が、以下のいずれかである
    + `undefined`
    + キーの値より大きい
    + `upperOpen` が `false` であり、キーの値と等しい

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

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

`IDBKeyRange.lower` 読取専用

キーの範囲の下限です。

`IDBKeyRange.upper` 読取専用

キーの範囲の上限です。

`IDBKeyRange.lowerOpen` 読取専用

下限の値がキーの範囲に含まれるとき、`false` を返します。

`IDBKeyRange.upperOpen` 読取専用

上限の値がキーの範囲に含まれるとき、`false` を返します。

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

`IDBKeyRange.bound()`

上限と下限を持つ新しいキーの範囲を生成します。

`IDBKeyRange.only()`

単一の値のみからなる新しいキーの範囲を生成します。

`IDBKeyRange.lowerBound()`

下限のみを持つ新しいキーの範囲を生成します。

`IDBKeyRange.upperBound()`

上限のみを持つ新しいキーの範囲を生成します。

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

`IDBKeyRange.includes()`

指定されたキーがこのキーの範囲に含まれるかを表す `boolean` を返します。

例
-

以下の例で、キーの範囲の使い方を示します。`"A"` と `"F"` の間の値を表す範囲として `keyRangeValue` を定義します。(`IDBTransaction` を用いて) トランザクションを開き、オブジェクトストアを開き、`IDBObjectStore.openCursor` を用いてカーソルを開きます。このとき、省略可能なキーの範囲の値として `keyRangeValue` を指定します。これにより、このカーソルはこの範囲に含まれるキーを持つレコードのみを取り出します。開区間にするよう指定していないので、この範囲は値 `"A"` および `"F"` を含みます。`IDBKeyRange.bound("A", "F", true, true);` を使った場合は、`"A"` と `"F"` は範囲に含まれず、その間の値のみが含まれます。

**メモ:** キーの範囲に関する実験ができるより完全な例は、IDBKeyRange-example レポジトリを参照してください。(動く例も見る)

```js
function displayData() {
  const keyRangeValue = IDBKeyRange.bound("A", "F");

  const transaction = db.transaction(["fThings"], "readonly");
  const objectStore = transaction.objectStore("fThings");

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

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

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # keyrange |

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

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

関連情報
----

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


SharedWorker - Web API

SharedWorker
============

**`SharedWorker`** インターフェイスは、ウィンドウ、iframe、ワーカーなど複数の閲覧コンテキストからアクセスできる、特定の種類のワーカーを表します。これらは専用ワーカーとは異なるインターフェイスを実装しており、異なるグローバルコンテキストである `SharedWorkerGlobalScope` を持ちます。

**メモ:** SharedWorkerが複数の閲覧コンテキストからアクセスできる場合、それらの閲覧コンテキストはすべて、まったく同じオリジン（同じプロトコル、ホスト、ポート）を共有している必要があります。

EventTarget

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

`SharedWorker()`

指定された URL のスクリプトを実行する共有ウェブワーカーを作成します。

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

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

`SharedWorker.port` 読取専用

共有ワーカーとの通信および制御に使用される `MessagePort` オブジェクトを返します。

イベント
----

`error`

共有ワーカーでエラーが発生したときに発行されます。

メソッド
----

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

例
-

基本的な共有ワーカーの例（共有ワーカーを実行）には 2 つの HTML ページがあり、それぞれでは JavaScript で単純な計算を行っています。異なるスクリプトが同じワーカーファイルを使用して計算を行っているため、ページが異なるウィンドウで実行されていても、どちらもアクセスすることができます。

以下のコードでは `SharedWorker` オブジェクトを、 `SharedWorker()` コンストラクターを使用して生成しています。どちらのスクリプトもこれを格納します。

```js
const myWorker = new SharedWorker("worker.js");
```

どちらのスクリプトも、`SharedWorker.port` プロパティを使用して作成された `MessagePort` オブジェクトを通してワーカーにアクセスします。addEventListener を使用して onmessage イベントが関連づけられている場合、ポートはその `start()` メソッドを使用して手動で開始されます。

```js
myWorker.port.start();
```

ポートが開始されると、どちらのスクリプトも `port.postMessage()` と `port.onmessage` を使用して、それぞれワーカーにメッセージを投稿し、ワーカーから送られたメッセージを処理します。

```js
first.onchange = () => {
  myWorker.port.postMessage([first.value, second.value]);
  console.log("Message posted to worker");
};

second.onchange = () => {
  myWorker.port.postMessage([first.value, second.value]);
  console.log("Message posted to worker");
};

myWorker.port.onmessage = (e) => {
  result1.textContent = e.data;
  console.log("Message received from worker");
};
```

ワーカー内部では `onconnect` ハンドラーを使用して、前述と同じポートに接続します。そのワーカーに関連するポートは `connect` イベントの `ports` プロパティでアクセスできます。それから `MessagePort` を使用して、ワーカーを開始します。ポートを始めるには `start()` メソッドを、メインスレッドから送られるメッセージを処理するには `onmessage` ハンドラーを使用します。

```js
onconnect = (e) => {
  const port = e.ports[0];

  port.addEventListener("message", (e) => {
    const workerResult = `Result: ${e.data[0] \* e.data[1]}`;
    port.postMessage(workerResult);
  });

  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # shared-workers-and-the-sharedworker-interface |

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

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

関連情報
----

* `Worker`


PromiseRejectionEvent - Web API

PromiseRejectionEvent
=====================

**`PromiseRejectionEvent`** インターフェイスは、 JavaScript の `Promise` が拒否されたときにグローバルスクリプトコンテキストに送信されるイベントを表します。これらのイベントは、測定やデバッグ目的に使用すると特に有益です。

プロミス拒否イベントについての詳細は、プロミスの拒否イベントを参照してください。

Event

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

`PromiseRejectionEvent()`

`PromiseRejectionEvent` イベントを、指定されたイベントの種類（`unhandledrejection` または `rejectionhandled`）およびその他の詳細を指定して作成します。

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

*親である `Event` のプロパティも継承しています。*

`PromiseRejectionEvent.promise` 読取専用

拒否された JavaScript の `Promise` です。

`PromiseRejectionEvent.reason` 読取専用

値、または `Object` で、 `Promise.reject()` に渡されたプロミスが拒否された理由を示します。

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

*このインターフェイスには固有のメソッドはありません。親である `Event` からメソッドを継承しています。*

イベント
----

`rejectionhandled`

JavaScript の `Promise` が拒否され、そのプロミスの拒否ハンドラーのコードが実行された後に発生します。

`unhandledrejection`

JavaScript の `Promise` が拒否されが、その拒否を処理する拒否ハンドラーがない場合に発生します。

例
-

この単純な例は、処理されなかったプロミスの拒否を捕捉し、デバッグのためにログ出力します。

```js
window.onunhandledrejection = (e) => {
  console.log(e.reason);
};
```

仕様書
---

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

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

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

関連情報
----

* プロミスの使用
* `Promise`
* `rejectionhandled`
* `unhandledrejection`


URLSearchParams - Web API

URLSearchParams
===============

**`URLSearchParams`** インターフェイスは URL のクエリー文字列の操作に役立つメソッドを定義します。

`URLSearchParams` を実装しているオブジェクトは、`for...of` 構造の中で直接使用して、キーと値のペアをクエリー文字列に現れるのと同じ順序で反復処理することができます。例えば次の 2 行は等価です。

```js
for (const [key, value] of mySearchParams) {
}
for (const [key, value] of mySearchParams.entries()) {
}
```

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

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

`URLSearchParams()`

`URLSearchParams` オブジェクトを返すコンストラクターです。

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

`size`

検索パラメーター項目の総数を示します。

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

`URLSearchParams.append()`

指定されたキーと値のペアを新しい検索パラメーターとして追加します。

`URLSearchParams.delete()`

指定された名前と値に一致する検索パラメーターを、検索パラメーターのリストからすべて削除します。

`URLSearchParams.entries()`

このオブジェクトに含まれるすべてのキーと値のペアを、クエリー文字列に現れるのと同じ順序で反復処理することができる`イテレーター`を返します。

`URLSearchParams.forEach()`

コールバック関数を介して、このオブジェクトに含まれるすべての値を反復処理します。

`URLSearchParams.get()`

指定された検索パラメーターに対応する最初の値を返します。

`URLSearchParams.getAll()`

指定された検索パラメーターに対応するすべての値を返します。

`URLSearchParams.has()`

指定されたパラメーター、またはパラメーターと値のペアが存在するかどうかを示す論理値を返します。

`URLSearchParams.keys()`

このオブジェクトに含まれるすべてのキーと値のペアのキーを反復処理する `イテレーター`を返します。

`URLSearchParams.set()`

指定された検索パラメーターに結び付けられた値を指定された値に設定します。複数の値が存在していた場合、他のものは削除されます。

`URLSearchParams.sort()`

すべてのキーと値のペアを、キーを基準にソートします。

`URLSearchParams.toString()`

URL で使用するのに適したクエリー文字列を返します。

`URLSearchParams.values()`

このオブジェクトに含まれるすべてのキーと値のペアの値を反復処理する `イテレーター`を返します。

例
-

```js
const paramsString = "q=URLUtils.searchParams&topic=api";
const searchParams = new URLSearchParams(paramsString);

// 検索パラメーターの列挙
for (const p of searchParams) {
  console.log(p);
}

console.log(searchParams.has("topic")); // true
console.log(searchParams.has("topic", "fish")); // false
console.log(searchParams.get("topic") === "api"); // true
console.log(searchParams.getAll("topic")); // ["api"]
console.log(searchParams.get("foo") === null); // true
console.log(searchParams.append("topic", "webdev"));
console.log(searchParams.toString()); // "q=URLUtils.searchParams&topic=api&topic=webdev"
console.log(searchParams.set("topic", "More webdev"));
console.log(searchParams.toString()); // "q=URLUtils.searchParams&topic=More+webdev"
console.log(searchParams.delete("topic"));
console.log(searchParams.toString()); // "q=URLUtils.searchParams"
```

```js
// 検索パラメーターはオブジェクトにすることもできる
const paramsObj = { foo: "bar", baz: "bar" };
const searchParams = new URLSearchParams(paramsObj);

console.log(searchParams.toString()); // "foo=bar&baz=bar"
console.log(searchParams.has("foo")); // true
console.log(searchParams.get("foo")); // "bar"
```

### 重複する検索パラメーター

```js
const paramStr = "foo=bar&foo=baz";
const searchParams = new URLSearchParams(paramStr);

console.log(searchParams.toString()); // "foo=bar&foo=baz"
console.log(searchParams.has("foo")); // true
console.log(searchParams.get("foo")); // bar （最初の値のみを返す）
console.log(searchParams.getAll("foo")); // ["bar", "baz"]
```

### URL の解釈なし

`URLSearchParams` コンストラクターは URL 全体を解釈しません。しかし、文字列から最初の `?` 以降が存在すれば、削除します。

```js
const paramsString1 = "http://example.com/search?query=%40";
const searchParams1 = new URLSearchParams(paramsString1);

console.log(searchParams1.has("query")); // false
console.log(searchParams1.has("http://example.com/search?query")); // true

console.log(searchParams1.get("query")); // null
console.log(searchParams1.get("http://example.com/search?query")); // "@" （decodeURIComponent('%40') と同じ）

const paramsString2 = "?query=value";
const searchParams2 = new URLSearchParams(paramsString2);
console.log(searchParams2.has("query")); // true

const url = new URL("http://example.com/search?query=%40");
const searchParams3 = new URLSearchParams(url.search);
console.log(searchParams3.has("query")); // true
```

### プラス記号の温存

`URLSearchParams` コンストラクターはプラス記号 (`+`) をスペースとして解釈します。以下の例では、16 進エスケープシーケンス を使って、URL 検索パラメーターに格納する必要のあるバイナリデータ（各バイトが情報を持つ）を含む文字列を模倣しています。`btoa()` でエンコードされた文字列は `+` を含んでおり、 `URLSearchParams` では温存されないことに注意してください。

```js
const rawData = "\x13à\x17@\x1F\x80";
const base64Data = btoa(rawData); // 'E+AXQB+A'

const searchParams = new URLSearchParams(`bin=${base64Data}`); // 'bin=E+AXQB+A'
const binQuery = searchParams.get("bin"); // 'E AXQB A', '+' はスペースに置き換えられる

console.log(atob(binQuery) === rawData); // false
```

You can avoid this by encoding the data with the `encodeURIComponent()`.

```js
const rawData = "\x13à\x17@\x1F\x80";
const base64Data = btoa(rawData); // 'E+AXQB+A'
const encodedBase64Data = encodeURIComponent(base64Data); // 'E%2BAXQB%2BA'

const searchParams = new URLSearchParams(`bin=${encodedBase64Data}`); // 'bin=E%2BAXQB%2BA'
const binQuery = searchParams.get("bin"); // 'E+AXQB+A'

console.log(atob(binQuery) === rawData); // true
```

### 空の値と値なし

`URLSearchParams` は `=` の後に何もないパラメーターと、`=` もないパラメーターの区別をしません。

```js
const emptyVal = new URLSearchParams("foo=&bar=baz");
console.log(emptyVal.get("foo")); // returns ''
const noEquals = new URLSearchParams("foo&bar=baz");
console.log(noEquals.get("foo")); // also returns ''
console.log(noEquals.toString()); // 'foo=&bar=baz'
```

仕様書
---

| Specification |
| --- |
| URL Standard # urlsearchparams |

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

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

関連情報
----

* `URLSearchParams` のポリフィル (`core-js`)
* `URL` インターフェイス。
* Google Developers: URLSearchParams を使用した簡単な URL 操作 (英語)


FileReaderSync - Web API

FileReaderSync
==============

`FileReaderSync` インターフェイスにより、`File` または `Blob` オブジェクトを同期的に読み込むことができます。

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

**警告:** このインターフェイスは、ブロックが発生する可能性がある同期 I/O を使用するため、ワーカー**でのみ**利用できます。

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

`FileReaderSync()`

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

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

このインターフェイスにはプロパティはありません。

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

`FileReaderSync.readAsArrayBuffer()`

このメソッドは、指定された `Blob` または `File` を、入力データをバイナリー文字列として表す `ArrayBuffer` に変換します。

`FileReaderSync.readAsBinaryString()`
非推奨

このメソッドは、指定された `Blob` または `File` を、入力データをバイナリー文字列として表す文字列に変換します。このメソッドは非推奨であり、代わりに `readAsArrayBuffer()` を使用することを検討してください。

`FileReaderSync.readAsText()`

このメソッドは、指定された `Blob` または `File` を、入力データをテキスト文字列として表す文字列に変換します。オプションの **`encoding`** 引数は、使用するエンコーディングを示します（iso-8859-1 や UTF-8 など）。これがない場合、このメソッドはエンコーディングの検出アルゴリズムを適用します。

`FileReaderSync.readAsDataURL()`

指定された `Blob` または `File` を、入力データをデータ URL として表す文字列に変換します。

仕様書
---

| Specification |
| --- |
| File API # FileReaderSync |

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

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

関連情報
----

* `FileReader`
* `Blob`
* `File`


通知 API - Web API

通知 API
======

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

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

通知 API を使えば、ウェブページがエンドユーザーに表示するシステム通知を制御できるようになります。これらのシステムは、最上位の閲覧コンテキストのビューポートの外にあるため、ユーザーがタブを切り替えたり、別のアプリに移動していても表示されます。また、この API は既存の通知システムと互換性を持つように設計されているので、異なるプラットフォームでも動作します。

概要と使い方
------

対応済みのプラットフォームでは、システム通知を表示するには、一般的に 2 つのことが必要です。まず、ユーザーが現在のオリジンに対してシステム通知を表示する許可を与える必要があります。これは一般的にアプリやサイトが初期化されたとき、 `Notification.requestPermission()` を使用して行われます。これは、例えばボタンをクリックするなど、ユーザーの操作に反応して行う必要があります。

```js
btn.addEventListener("click", function () {
  let promise = Notification.requestPermission();
  // wait for permission
});
```

これはベストプラクティスで、ユーザーが同意していない通知でユーザーに迷惑をかけるべきではありません。しかし、今後ブラウザーはユーザーの操作から起動されていない通知を明示的に拒否するようになるでしょう。例えば、 Firefox はバージョン 72 からすでにこれを行っています。

これは以下のようにリクエストダイアログを起動します。

![](/ja/docs/Web/API/Notifications_API/screen_shot_2019-12-11_at_9.59.14_am.png)

ここでは、ユーザーはこのオリジンからの通知を許可するかどうかを選択できます。一度決定がなされると、現在のセッションの間はその設定が保存されます。

**メモ:** Firefox 44 からは、通知とプッシュ通知の許可が統合されました。通知に許可が与えられれば、プッシュ通知も同時に有効になります。

つぎに、新しい通知は `Notification()` コンストラクターを使って作られます。このコンストラクターには、必須の title 引数と、オプションを指定する引数として options オブジェクトを与えることができます。オプションには、テキストの方向、本文テキスト、表示アイコン、通知サウンドなどが指定可能です。

さらに、通知 API の仕様には、いくつかのサービスワーカー API が定義されており、サービスワーカーが通知を発行できるようになっています。

**メモ:** 自分のアプリでの通知の詳しい使い方については、通知 API の使用を参照してください。

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

`Notification`

通知オブジェクトを定義します。

### サービスワーカーの追加要素

`ServiceWorkerRegistration`

`ServiceWorkerRegistration.showNotification()` および `ServiceWorkerRegistration.getNotifications()` メソッドが含まれており、通知の表示の制御に使用できます。

`ServiceWorkerGlobalScope`

`onnotificationclick` ハンドラーが含まれており、通知がクリックされた時にカスタム関数を実行させることができるようになります。

`NotificationEvent`

`ExtendableEvent` を基本とした、特定の型ののイベントオブジェクトです。すでに実行された通知を表現します。

仕様書
---

| Specification |
| --- |
| Notifications API Standard  |

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

### api.Notification

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

### api.ServiceWorkerRegistration.showNotification

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

### api.ServiceWorkerRegistration.getNotifications

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

関連情報
----

* 通知 API の使用


NDEFRecord - Web API

NDEFRecord
==========

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

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

**`NDEFRecord`** はウェブ NFC API のインターフェイスで、 NDEF に対応する NFC タグなど、互換性のある NFC 機器から読み取ったり、書き込んだりできるデータを提供します。

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

`NDEFRecord()`
Experimental

新しい `NDEFRecord` を返します。

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

`NDEFRecord.recordType`
Experimental
 読取専用

このレコードのレコード型を返します。レコードは標準のよく知られた型名を持つ必要があります。例えば `"empty"`, `"text"`, `"url"`, `"smart-poster"`, `"absolute-url"`, `"mime"`, `"unknown"` またはそれ以外に、ドメイン名で構成された外部型名や、コロン (":") で区切られたカスタム型名です。

`NDEFRecord.mediaType`
Experimental
 読取専用

このレコードの MIME タイプです。この値は `recordType` が `"mime"` と等しくない場合は `null` になります。

`NDEFRecord.id`
Experimental
 読取専用

レコード識別子、レコードを識別するために使用される絶対または相対 URL を返します。

**メモ:** 識別子の一意性は、レコードの生成者によってのみ強制されます。

`NDEFRecord.data`
Experimental
 読取専用

このレコードのペイロードの生のバイト列が入った `DataView` を返します。

`NDEFRecord.encoding`
Experimental
 読取専用

テキストペイロードのエンコーディングを返します。それ以外の場合は `null` です。

`NDEFRecord.lang`
Experimental
 読取専用

テキストペイロードの言語を返します。提供されていない場合は `null` です。

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

`NDEFRecord.toRecords()`
Experimental

`NDEFRecord.data` をレコードの並びに変換します。これにより、スマートポスターや外部型レコードなど、ネストしたレコードを含む可能性のあるレコードタイプのペイロードを解釈することができます。

仕様書
---

| Specification |
| --- |
| Web NFC API # dom-ndefrecord |

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

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


ConvolverNode - Web API

ConvolverNode
=============

`ConvolverNode` は `AudioNode` の一種で、与えられた `AudioBuffer` を用いて線形畳み込みを行います。リバーブの実装によく用いられます。 `ConvolverNode` は常に 1 つの入力と、1 つの出力を持ちます。

**メモ:** 線形畳み込みの理論的な側面については、Wikipedia の「畳み込み」を参照してください。

EventTarget

AudioNode

ConvolverNode

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

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

`ConvolverNode()` (en-US)

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

プロパティ
-----

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

`ConvolverNode.buffer` (en-US)

モノラル、ステレオ、 4 チャンネルの *`AudioBuffer`* で、 `ConvolververNode` がリバーブ効果を生成するために使用する（おそらくマルチチャンネルの）インパルス応答を含みます。

`ConvolverNode.normalize` (en-US)

論理値で、 `buffer` 属性が設定されているときに、バッファーからのインパルス応答を等力正規化でスケーリングするかどうかを制御します。

メソッド
----

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

ConvolverNode の例
----------------

次の例は、コンボルバーノードを作成するための AudioContext の基本的な使い方を示しています。

**メモ:** 以下の例を完成させるために、インパルス応答を求める必要があります。応用例はこちらの Codepen をご覧ください。

```js
let audioCtx = new window.AudioContext();

async function createReverb() {
    let convolver = audioCtx.createConvolver();

    // load impulse response from file
    let response     = await fetch("path/to/impulse-response.wav");
    let arraybuffer  = await response.arrayBuffer();
    convolver.buffer = await audioCtx.decodeAudioData(arraybuffer);

    return convolver;
}

...

let reverb = await createReverb();

// someOtherAudioNode -> reverb -> destination
someOtherAudioNode.connect(reverb);
reverb.connect(audioCtx.destination);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # ConvolverNode |

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

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

関連情報
----

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


MIDIPort - Web API

MIDIPort
========

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

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

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

EventTarget

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

`MIDIPort.id` 読取専用

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

`MIDIPort.manufacturer` 読取専用

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

`MIDIPort.name` 読取専用

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

`MIDIPort.type` 読取専用

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

`"input"`

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

`"output"`

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

`MIDIPort.version` 読取専用

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

`MIDIPort.state` 読取専用

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

`"disconnected"`

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

`"connected"`

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

`MIDIPort.connection` 読取専用

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

`"open"`

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

`"closed"`

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

`"pending"`

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

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

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

`MIDIPort.open()`

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

`MIDIPort.close()`

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

イベント
----

`MIDIPort.statechange_event`

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

例
-

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

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

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

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

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

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

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

仕様書
---

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

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

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


DOMError - Web API

DOMError
========

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

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

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

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

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

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

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

エラーの型
-----

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

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

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

関連情報
----

* `DOMException`


MediaStream - Web API

MediaStream
===========

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

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

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

EventTarget

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

`MediaStream()`

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

プロパティ
-----

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

`MediaStream.active` 読取専用

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

`MediaStream.id` 読取専用

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

メソッド
----

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

`MediaStream.addTrack()`

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

`MediaStream.clone()`

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

`MediaStream.getAudioTracks()`

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

`MediaStream.getTrackById()`

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

`MediaStream.getTracks()`

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

`MediaStream.getVideoTracks()`

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

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

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

イベント
----

`addtrack`

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

`removetrack`

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

`active`

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

`inactive`

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

仕様書
---

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

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

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

関連情報
----

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


HTMLSpanElement - Web API

HTMLSpanElement
===============

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

プロパティ
-----

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

メソッド
----

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

仕様書
---

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

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

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

関連情報
----

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


XRReferenceSpace - Web API

XRReferenceSpace
================

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

WebXR 機器 API の **`XRReferenceSpace`** インターフェイスは、指定された追跡の振る舞いを使用して、仮想世界内の特定の追跡対象のエンティティまたはオブジェクトの座標系を記述します。 追跡の振る舞いは、選択した参照空間型によって定義されます。 いくつかの異なる追跡の振る舞いのサポートを追加し、追跡対象オブジェクトと世界の別の場所との間のオフセット変換を記述する新しい参照空間を要求することにより、基本クラス `XRSpace` (en-US) を拡張します。

すべての参照空間（制限付き参照空間を除く）は、`XRReferenceSpace` タイプを使用して記述されます。 制限付き空間は、`XRBoundedReferenceSpace` オブジェクトとして実装されます。 これは、ビューアーが移動するのに「安全」な境界を確立できる特別な空間です。 実世界のカメラで移動を追跡するシステムなど、ユーザーが物理的に動き回ることができる XR システムの場合、この境界は、物理的な障害によるものか、XR ハードウェアの制限によるものかにかかわらず、ユーザーが動き回ることができる領域の縁を確立します。 ユーザーが物理的および仮想的な障害物と衝突しないようにするための境界の使用の詳細については、制限付き参照空間を使用したビューアーの保護 (en-US)の記事を参照してください。

EventTarget

XRSpace

(en-US)

XRReferenceSpaceプロパティ
-----

*`XRReferenceSpace` は `EventTarget` のプロパティを継承していますが、それ以外のプロパティは定義していません。*

メソッド
----

*`XRReferenceSpace` には以下のメソッド以外に、 `EventTarget` から継承したメソッドもあります。*

`getOffsetReferenceSpace()`

メソッドを呼び出したものと同じ型（つまり、`XRReferenceSpace` または `XRBoundedReferenceSpace`）の新しい参照空間オブジェクトを作成して返します。 新しい参照空間を使用して、メソッドが呼び出されたオブジェクトの参照空間から別の座標空間に座標を変換できます。 これは、レンダリング中にオブジェクトを配置したり、3D 空間でビューアーの位置や向きを変更するときに必要な変換を実行したりするのに役立ちます。

イベント
----

`reset`

`reset` イベントは、追跡対象オブジェクトの原点とユーザーの環境または場所の間で不連続性が発生したことをブラウザーが検出すると、 `XRReferenceSpace` オブジェクトに送信されます。 これは、例えば、ユーザーが XR 機器を再調整した後や、追跡を失って回復した後に機器が原点を自動的に調整した場合に発生する可能性があります。

参照空間型
-----

参照空間の種類を下表に示し、その使用例とどのインターフェースで実装されているかについての簡単な情報を示す。

`bounded-floor`

`XRBoundedReferenceSpace` で、 `local` 型と同様ですが、返されたオブジェクトの `boundsGeometry` によって指定された所定の境界の外にユーザーが移動することは想定されていません。

`local`

`XRReferenceSpace` で、セッションが作成された時の閲覧者の位置の近くに原点を持つ追跡空間です。正確な位置はプラットフォームと実装に依存します。ユーザーは開始位置からあまり動くことはないと思われますので、追跡はこの用途に最適化されています。 6 つの自由度 (6DoF) 追跡機能を持つ機器の場合、`local`参照空間は、環境に対して原点を安定に保とうとします。

`local-floor`

`local` 型に似た `XRReferenceSpace` で、開始位置が閲覧者が安全に立てる場所に置かれ、 y 軸の値が床面を 0 とすることを除きます。その床レベルが分からない場合、ユーザーエージェントは床レベルを推定します。推定された床レベルが 0 でない場合、ブラウザーはフィンガープリントを避けるような方法でそれを（おそらく最も近いセンチメートルに）丸めることが期待されています。

`unbounded`

`XRReferenceSpace` で、原点から非常に長い距離を自由に移動することができる追跡空間です。閲覧者は全く追跡されません。追跡はユーザーの現在位置の安定性のために最適化されており、ネイティブの原点はその必要性に応じてドリフトすることができます。

`viewer`

`XRReferenceSpace` で、閲覧者の位置と向きを原点として追跡する追跡空間です。これはユーザーが物理的に移動できる環境で使用され、没入型、インライン型問わず `XRSession` (en-US) の全てのインスタンスで対応していますが、インラインセッションで最も有用です。これは、閲覧者と入力の間の距離を決定するとき、またはオフセット空間を扱うときに特に便利です。それ以外では、通常、他の参照空間型のいずれかがより頻繁に使用されます。

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

XRReferenceSpace の作成
--------------------

`XRReferenceSpace` を取得する必要がある状況は2つあります。 1つ目は、シーンを設定し、`XRSession` (en-US) の期間中、世界に対するユーザーの視点を表す参照空間を取得する必要がある場合です。 これを行うには、`XRSession` (en-US) のメソッド `requestReferenceSpace()` を呼び出して、取得する参照空間型を指定します。

```js
xrSession.requestReferenceSpace("local").then((refSpace) => {
  xrReferenceSpace = refSpace;
  // …
});
```

新しい参照空間を取得する必要があるもう1つの状況は、原点を新しい位置に移動する必要がある場合です。 これは通常、例えば、あなたのプロジェクトで、ユーザーが XR 機器を介して接続されていないキーボード、マウス、タッチパッド、ゲームコントローラーなどの入力機器を使用して環境内を移動できる場合に行われます。 原点は通常、空間内のユーザーの位置であるため、原点を変更して、ユーザーの移動と方向の変更を反映する必要があります。

ユーザーの世界のビューを移動または回転するには、その視点を表すために使用される `XRReferenceSpace` を変更する必要があります。 ただし、`XRReferenceSpace` は不変であるため、代わりに、変更された視点を表す新しい参照空間を作成する必要があります。 これは、`getOffsetReferenceSpace()` メソッドを使用して簡単に実行できます。

```js
let offsetTransform = new XRRigidTransform(
  { x: 2, y: 0, z: 1 },
  { x: 0, y: 1, z: 0, w: 1 },
);
xrReferenceSpace = xrReferenceSpace.getOffsetReferenceSpace(offsetTransform);
```

これにより、`XRReferenceSpace` を新しいものに置き換えます。 その原点と向きは、新しい原点を現在の原点に対して (2, 0, 1) に配置するように調整し、前の世界の向きに対してビューアーを真上に向けるように空間を向ける単位クォータニオンを指定して回転します。

### ジオメトリー

`XRReferenceSpace` のネイティブ原点は、+X が右側、+Y が上向き、+Z が「後方」またはユーザーに向かっていると見なされるように常に構成されています。

仕様書
---

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

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

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

関連情報
----

* WebXR の基本
* WebXR の幾何学と参照空間
* 視点とビューアー: WebXR でのカメラのシミュレーション
* ウェブの行列計算
* 移動、向き、モーション
* 制限付き参照空間を使用したユーザーの保護 (en-US)


DOMRect - Web API

DOMRect
=======

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

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

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

DOMRectReadOnly

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

`DOMRect()`

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

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

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

`DOMRectReadOnly.x`

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

`DOMRectReadOnly.y`

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

`DOMRectReadOnly.width`

この `DOMRect` の幅です。

`DOMRectReadOnly.height`

この `DOMRect` の高さです。

`DOMRectReadOnly.top`

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

`DOMRectReadOnly.right`

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

`DOMRectReadOnly.bottom`

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

`DOMRectReadOnly.left`

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

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

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

`DOMRect.fromRect()`

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

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

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

仕様書
---

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

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

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

関連情報
----

* `DOMPoint`


HTMLTimeElement - Web API

HTMLTimeElement
===============

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

EventTarget

Node

Element

HTMLElement

HTMLTimeElementプロパティ
-----

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

`HTMLTimeElement.dateTime`

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

メソッド
----

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

仕様書
---

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

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

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

関連情報
----

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


PerformanceObserver - Web API

PerformanceObserver
===================

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

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

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

`PerformanceObserver()`

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

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

`PerformanceObserver.supportedEntryTypes` 読取専用

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

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

`PerformanceObserver.observe()`

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

`PerformanceObserver.disconnect()`

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

`PerformanceObserver.takeRecords()`

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

例
-

### PerformanceObserver の作成

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

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

仕様書
---

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

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

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

関連情報
----

* `MutationObserver`
* `ResizeObserver`
* `IntersectionObserver`


MediaQueryList - Web API

MediaQueryList
==============

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

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

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

プロパティ
-----

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

`matches`読取専用

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

`media`読取専用

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

メソッド
----

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

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

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

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

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

イベント
----

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

`change`

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

例
-

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

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

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

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

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

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

仕様書
---

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

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

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

関連情報
----

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


CSSPageRule - Web API

CSSPageRule
===========

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

CSSRule

CSSGroupingRule

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

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

`CSSPageRule.selectorText`

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

`CSSPageRule.style` 読取専用

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

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

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

例
-

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

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

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

仕様書
---

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

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

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


タッチイベント - Web API

タッチイベント
=======

タッチベースのユーザーインターフェイスを高度にサポートするため、端末やトラックパッドでの指（またはスタイラス）の動きを解釈する機能を、タッチイベントが提供します。

タッチイベントのインターフェイスは、2 本の指によるジェスチャーなどアプリケーション固有のマルチタッチ操作に対応するために使用できる、比較的低レベルの API です。マルチタッチ操作は、1 本の指（またはスタイラス）が始めにタッチ面へタッチしたときから始まります。その後に他の指をタッチすることができ、さらに任意でタッチ面上で動かします。指をタッチ面から離すと、操作が終了します。操作している間、アプリケーションは開始・移動・終了の各段階中にタッチイベントを受け取ります。

タッチイベントはマウスイベントに似ていますが、タッチ面上の異なる場所で同時に発生するタッチに対応することが異なります。 `TouchEvent` インターフェイスは、現在アクティブなすべてのタッチ点を包含します。 `Touch` インターフェイスはひとつのタッチ点を表し、ブラウザーのビューポートを基準にしたタッチ個所の位置などの情報を含みます。

定義
--

タッチ面

タッチに反応する面。画面であったりトラックパッドであったりする可能性があります。

タッチ点

タッチ面に接触した点。これは指（あるいはひじ、耳、鼻などでもよいのですが、たいてい指でしょう）またはスタイラスの可能性があります。

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

`TouchEvent`

タッチ面でタッチ状態が変化したときに発生するイベントを表します。

`Touch`

ユーザーとタッチタッチ面が接した点 1 個を表します。

`TouchList`

タッチのグループを表します。例えば、ユーザーが複数の指を同時にタッチ面上に置いた場合に使用します。

例
-

ここでは一度に複数のタッチ点を取得しており、ユーザーが一度に複数の指で `<canvas>` に描くことができるようになっています。このサンプルはタッチイベントに対応しているブラウザーのみで動作します。

**メモ:** ここからはタッチ面への接触を表すときに「指」という表現を使用しますが、当然ながらスタイラスなど他の接触法も使用できます。

### キャンバスの作成

```html
<canvas id="canvas" width="600" height="600" style="border:solid black 1px;">
  このブラウザーは canvas 要素に対応していません。
</canvas>
<br />
Log:
<pre id="log" style="border: 1px solid #ccc;"></pre>
```

```css
#log {
  height: 200px;
  width: 600px;
  overflow: scroll;
}
```

### イベントハンドラーの設定

 ページを読み込むとき、以下の `startup()` 関数が呼び出されます。
 ここで `<canvas>` 要素へすべてのイベントリスナーを設定しており、タッチイベントの発生に応じて扱うことができるようになります。

```js
function startup() {
  const el = document.getElementById("canvas");
  el.addEventListener("touchstart", handleStart);
  el.addEventListener("touchend", handleEnd);
  el.addEventListener("touchcancel", handleCancel);
  el.addEventListener("touchmove", handleMove);
  log("Initialized.");
}

document.addEventListener("DOMContentLoaded", startup);
```

#### 新たなタッチの追跡

進行中のタッチを追跡し続けます。

```js
const ongoingTouches = [];
```

タッチ面上で新たなタッチが発生したことを示す `touchstart` イベントが発生すると、`handleStart()` 関数を呼び出します。

```js
function handleStart(evt) {
  evt.preventDefault();
  log("touchstart.");
  const el = document.getElementById("canvas");
  const ctx = el.getContext("2d");
  const touches = evt.changedTouches;

  for (let i = 0; i < touches.length; i++) {
    log(`touchstart: ${i}.`);
    ongoingTouches.push(copyTouch(touches[i]));
    const color = colorForTouch(touches[i]);
    log(`color of touch with id ${touches[i].identifier} = ${color}`);
    ctx.beginPath();
    ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0, 2 \* Math.PI, false); // 最初に円を描く
    ctx.fillStyle = color;
    ctx.fill();
  }
}
```

ここでは、ブラウザーがタッチイベントの処理を続けないようにするため `event.preventDefault()` を呼び出します (また、マウスイベントの伝達も抑止します)。そしてコンテキストを取得して、イベントの `TouchEvent.changedTouches` プロパティから変化したタッチ点のリストを取り込みます。

その後に、リスト内のすべての `Touch` オブジェクトを走査してアクティブなタッチ点の配列に送り込み、描画を開始する位置に小さな丸印を描画します。この例では 4 ピクセル幅の線を使用しますので、半径 4 ピクセルの円がきれいに見えます。

#### タッチの移動に合わせた描画

1 本以上の指が移動するたびに `touchmove` イベントが発生しますので、その結果 `handleMove()` 関数が呼び出されます。これはキャッシュしたタッチ情報を更新して、タッチごとに以前の位置から現在の位置まで線を描画する役割を担っています。

```js
function handleMove(evt) {
  evt.preventDefault();
  const el = document.getElementById("canvas");
  const ctx = el.getContext("2d");
  const touches = evt.changedTouches;

  for (let i = 0; i < touches.length; i++) {
    const color = colorForTouch(touches[i]);
    const idx = ongoingTouchIndexById(touches[i].identifier);

    if (idx >= 0) {
      log(`continuing touch ${idx}`);
      ctx.beginPath();
      log(
        `ctx.moveTo( ${ongoingTouches[idx].pageX}, ${ongoingTouches[idx].pageY} );`,
      );
      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
      log(`ctx.lineTo( ${touches[i].pageX}, ${touches[i].pageY} );`);
      ctx.lineTo(touches[i].pageX, touches[i].pageY);
      ctx.lineWidth = 4;
      ctx.strokeStyle = color;
      ctx.stroke();

      ongoingTouches.splice(idx, 1, copyTouch(touches[i])); // swap in the new touch record
    } else {
      log("can't figure out which touch to continue");
    }
  }
}
```

これは同様に変更されたタッチに対して走査していますが、各タッチで新たに描画する線分の開始点を検出するために、各タッチの以前の情報についてキャッシュしたタッチ情報の配列を参照しています。これは、各タッチの `Touch.identifier` プロパティを確認して行います。このプロパティは各タッチで一意の識別子であり、指とタッチ面との接触が続いている間、値が固定されます。

これにより各タッチの前の位置の座標を取得して、2 つの点を結ぶ線分を描画するために適切なコンテキストメソッドを使用できます。

線分を描画した後、前のタッチ点の情報を `ongoingTouches` 配列内にある現在の情報に置き換えるため、`Array.splice()` を呼び出します。

#### タッチの終了を制御する

ユーザーがタッチ面から指を離すと `touchend` イベントが発生します。私たちはこれらの両方を、以下の `handleEnd()` 関数を呼び出すというひとつの方法で扱います。この関数の役割は、終了したタッチについて最後の線分を描画することと、継続中のタッチのリストからタッチ点を削除することです。

```js
function handleEnd(evt) {
  evt.preventDefault();
  log("touchend");
  const el = document.getElementById("canvas");
  const ctx = el.getContext("2d");
  const touches = evt.changedTouches;

  for (let i = 0; i < touches.length; i++) {
    const color = colorForTouch(touches[i]);
    let idx = ongoingTouchIndexById(touches[i].identifier);

    if (idx >= 0) {
      ctx.lineWidth = 4;
      ctx.fillStyle = color;
      ctx.beginPath();
      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
      ctx.lineTo(touches[i].pageX, touches[i].pageY);
      ctx.fillRect(touches[i].pageX - 4, touches[i].pageY - 4, 8, 8); // and a square at the end
      ongoingTouches.splice(idx, 1); // remove it; we're done
    } else {
      log("can't figure out which touch to end");
    }
  }
}
```

これは前の関数にとても似ていますが、終端を表す小さな四角形を描画することと、`Array.splice()` を呼び出して、更新後の情報を追加せずに継続中のタッチリストから古い項目を削除することが異なります。この結果、タッチ点の追跡を停止します。

#### 取り消されたタッチを制御する

ユーザーの指がブラウザーの UI に入り込んだり、その他にタッチをキャンセルしなければならないときには `touchcancel` イベントが発生して、以下の `handleCancel()` 関数が実行されます。

```js
function handleCancel(evt) {
  evt.preventDefault();
  log("touchcancel.");
  const touches = evt.changedTouches;

  for (let i = 0; i < touches.length; i++) {
    let idx = ongoingTouchIndexById(touches[i].identifier);
    ongoingTouches.splice(idx, 1); // remove it; we're done
  }
}
```

即座にタッチを取り消すという考え方から最終の線分を描画せずに、継続中のタッチリストから単純にタッチを削除します。

### 便利な関数

この例ではコードの残りの部分をより明確にすることを助ける、簡単に見ておくべきである 2 つの便利な関数を使用しています。

#### それぞれのタッチの色を選択する

それぞれのタッチの外見を区別して描画するために、タッチの一意な識別子を元に色を選択する `colorForTouch()` 関数を使用します。この識別子は不明瞭な数値ですが、少なくとも現在アクティブなタッチを区別することはできます。

```js
function colorForTouch(touch) {
  let r = touch.identifier % 16;
  let g = Math.floor(touch.identifier / 3) % 16;
  let b = Math.floor(touch.identifier / 7) % 16;
  r = r.toString(16); // make it a hex digit
  g = g.toString(16); // make it a hex digit
  b = b.toString(16); // make it a hex digit
  const color = `#${r}${g}${b}`;
  return color;
}
```

この関数の返値は、描画色を設定するために `<canvas>` 関数を呼び出すときに使用できる文字列です。例えば `Touch.identifier` の値が 10 であれば、返値は文字列 "#a31" になります。

#### touch オブジェクトのコピー

一部のブラウザー (例えばモバイル版 Safari) はイベント間で touch オブジェクトを再使用するため、オブジェクト全体を参照するよりも、関心がある部分をコピーするほうが最善です。

```js
function copyTouch({ identifier, pageX, pageY }) {
  return { identifier, pageX, pageY };
}
```

#### 継続中のタッチを見つける

以下の `ongoingTouchIndexById()` 関数は、指定した識別子に一致するタッチを見つけるために配列 `ongoingTouches` を探索して、そのタッチの配列内におけるインデックスを返します。

```js
function ongoingTouchIndexById(idToFind) {
  for (let i = 0; i < ongoingTouches.length; i++) {
    const id = ongoingTouches[i].identifier;

    if (id === idToFind) {
      return i;
    }
  }
  return -1; // 見つからない
}
```

#### 何を行っているか表示

```js
function log(msg) {
  const container = document.getElementById("log");
  container.textContent = `${msg} \n${container.textContent}`;
}
```

### 結果

この例は、下記のボックスをタッチすることで、モバイル端末でテストすることができます。

**メモ:** 一般的には、 この例はタッチイベントを提供するプラットフォームで動作します。
 このようなイベントをシミュレートできるデスクトッププラットフォームでテストすることができます。

* Firefox ではレスポンシブデザインモードの「タッチシミュレーション」を有効にしてください（ページの再読み込みが必要な場合があります）。
* Chrome ではデバイスモードを使用し、デバイスタイプをタッチイベントを送信するものに設定してください。

追加の豆知識
------

この章ではウェブアプリケーションでタッチイベントを扱う方法について、追加の豆知識を紹介します。

### クリックを制御する

`preventDefault()` を `touchstart` または一連の中で最初の `touchmove` で呼び出すと、対応するマウスイベントの発生を抑制できるため、 `preventDefault()` は `touchstart` よりも `touchmove` で呼び出すことが一般的です。この方法では従来どおりマウスイベントが発生して、リンクなどが引き続き動作します。代わりに一部のフレームワークでは同様の目的で、タッチイベントをマウスイベントとして再発生させています。（この例は過度に単純化しており、奇妙な動作になるかもしれません。ガイドとして掲載しているに過ぎません。）

```js
function onTouch(evt) {
  evt.preventDefault();
  if (
    evt.touches.length > 1 ||
    (evt.type === "touchend" && evt.touches.length > 0)
  )
    return;

  const newEvt = document.createEvent("MouseEvents");
  let type = null;
  let touch = null;

  switch (evt.type) {
    case "touchstart":
      type = "mousedown";
      touch = evt.changedTouches[0];
      break;
    case "touchmove":
      type = "mousemove";
      touch = evt.changedTouches[0];
      break;
    case "touchend":
      type = "mouseup";
      touch = evt.changedTouches[0];
      break;
  }

  newEvt.initMouseEvent(
    type,
    true,
    true,
    evt.originalTarget.ownerDocument.defaultView,
    0,
    touch.screenX,
    touch.screenY,
    touch.clientX,
    touch.clientY,
    evt.ctrlKey,
    evt.altKey,
    evt.shiftKey,
    evt.metaKey,
    0,
    null,
  );
  evt.originalTarget.dispatchEvent(newEvt);
}
```

### 2 番目のタッチのみで preventDefault() を呼び出す

ページ上で `pinchZoom` といった操作を防ぐテクニックのひとつとして、一連のタッチの 2 番目で `preventDefault()` を呼び出す方法があります。この動作はタッチイベントの仕様書で明示されておらず、ブラウザーによって結果が異なります (iOS ではズームを防ぎますが、パンは可能です。Android はズームが可能ですが、パンはできません。Opera および Firefox は現状、パンもズームも防ぎます)。現在、このケースで特定の動作に依存することは推奨されず、メタビューポートのズームを防ぐと考えてください。

仕様書
---

| Specification |
| --- |
| Touch Events  |

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

タッチイベントは通常、タッチ画面を備えた端末で使用できますが、多くのブラウザーは、タッチ画面を備えたものであっても、すべてのデスクトップ端末でタッチイベント API をできないようにしています。

これは、一部のウェブサイトで、タッチイベント API の一部が利用できることが、ブラウザーがモバイル端末で実行されていることを示す指標として使用されているためです。タッチイベント API が利用可能な場合、これらのウェブサイトはモバイル端末を想定し、モバイルに最適化されたコンテンツを配信します。その結果、タッチ画面を搭載したデスクトップ端末のユーザーにとっては、使い勝手が悪くなる可能性があります。

すべての種類の端末でタッチとマウスの両方に対応するには、代わりにポインターイベントを使用してください。

### api.Touch

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

### api.TouchEvent

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

### api.TouchList

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


VRFrameData - Web API

VRFrameData
===========

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

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

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

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

`VRFrameData()`
非推奨

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

プロパティ
-----

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

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

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

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

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

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

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

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

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

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

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

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

例
-

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

仕様書
---

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

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

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

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

関連情報
----

* WebVR API


ReadableStream - Web API

ReadableStream
==============

`ReadableStream` はストリーム API のインターフェイスで、バイトデータの読み取り可能なストリームを表します。 Fetch API は、 `ReadableStream` の具体的なインスタンスを`Response` オブジェクトの `body` プロパティを介して提供します。

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

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

`ReadableStream()`

指定されたハンドラーから読み取り可能なストリームのオブジェクトを作成して返します。

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

`ReadableStream.locked` 読取専用

論理値で、読み取り可能なストリームがリーダーにロックされているかどうかを返します。

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

`ReadableStream.from()`
Experimental

指定された反復可能オブジェクトまたは非同期反復可能オブジェクト（配列、集合、非同期ジェネレーターなど）から `ReadableStream` を返します。

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

`ReadableStream.cancel()`

ストリームがキャンセルされたときに解決する `Promise` を返します。このメソッドを呼び出されると、コンシューマーがストリームへの関心を失ったことを通知します。与えられた `reason` 引数は基になるソースに与えられ、使用する場合と使用しない場合があります。

`ReadableStream.getReader()`

リーダーを作成し、ストリームをロックします。 ストリームがロックされている間は、このリーダーが解放されるまで他のリーダーを取得できません。

`ReadableStream.pipeThrough()`

変換ストリームまたはその他の書き込み可能/読み取り可能なペアを介して、現在のストリームをパイプ接続するチェーン可能な方法を提供します。

`ReadableStream.pipeTo()`

現在の `ReadableStream` を指定された `WritableStream` に接続し、 `Promise` を返します。これはパイピングプロセスが正常に完了したときに履行され、エラーが発生した場合は拒否されます。

`ReadableStream.tee()`

`tee` メソッドは、この読み取り可能なストリームを tee し、結果の 2 つの分岐を含む 2 要素配列を新しい `ReadableStream` インスタンスとして返します。 これらの各ストリームは、同じ着信データを受信します。

非同期の反復処理
--------

`ReadableStream` は非同期反復可能プロトコルを実装しています。
 これにより、 `for await...of` 構文を使用して、ストリーム内のチャンクを非同期に反復処理することができます。

```js
const stream = new ReadableStream(getSomeSource());

for await (const chunk of stream) {
  // それぞれの 'chunk' で何かをする
}
```

 非同期イテレーターは、データがなくなるか、さもなければ終了するまでストリームを消費します。
 ループは `break`、`throw`、`return` ステートメントによって早期に終了することもできます。

 反復処理中は、他のコンシューマーがリーダーを取得できないようにストリームがロックされます（既にロックされているストリームを反復処理しようとすると `TypeError` が発生します）。
 このロックはループが終了すると解除されます。

 既定値では、ループを終了するとストリームも取り消される可能性があり、使用できなくなります。
 ループを抜けた後もストリームを使用し続けるには、ストリームの `values()` メソッドに `{ preventCancel: true }` を渡してください。

```js
for await (const chunk of stream.values({ preventCancel: true })) {
  // 'chunk' で何かをする
  break;
}
// ストリームのためのリーダーを取得し、読み取りを続ける ...
```

例
-

### ストリームのフェッチ

次の例では、別のリソースからフェッチした HTML の断片をブラウザーにストリーミングするために、人工的な `Response` が作成されます。

これは `Uint8Array` と組み合わせた `ReadableStream` の使用方法を示しています。

```js
fetch("https://www.example.org")
  .then((response) => response.body)
  .then((rb) => {
    const reader = rb.getReader();

    return new ReadableStream({
      start(controller) {
        // 次の関数は各データチャンクを処理します
        function push() {
          // done は論理値で、value は Uint8Array です
          reader.read().then(({ done, value }) => {
            // 読み取るデータがもうない場合
            if (done) {
              console.log("done", done);
              controller.close();
              return;
            }
            // データを取得し、コントローラー経由でブラウザーに送信します
            controller.enqueue(value);
            // コンソールにログを出力してチャンクを調べる
            console.log(done, value);
            push();
          });
        }

        push();
      },
    });
  })
  .then((stream) =>
    // ストリームで応答する
    new Response(stream, { headers: { "Content-Type": "text/html" } }).text(),
  )
  .then((result) => {
    // Do things with result
    console.log(result);
  });
```

### 非同期イテレーターをストリームへ変換

静的な `from()` メソッドは、イテレーターを変換します。例えば `Array` や `Map`, （非同期）イテレーターを読み取り可能なストリームへ変換します。

```js
const myReadableStream = ReadableStream.from(iteratorOrAsyncIterator);
```

`from()` メソッドに対応していないブラウザーでは、代わりに自分自身で独自の読み取り可能なストリームを作成して同じ結果を得ることができます。

```js
function iteratorToStream(iterator) {
  return new ReadableStream({
    async pull(controller) {
      const { value, done } = await iterator.next();

      if (done) {
        controller.close();
      } else {
        controller.enqueue(value);
      }
    },
  });
}
```

### for await...of を用いたストリームの非同期反復処理

この例では、 `fetch()` レスポンスを処理するために `for await...of` ループを使用して、到着したチャンクを反復処理する方法を示します。

```js
const response = await fetch("https://www.example.org");
let total = 0;

// Iterate response.body (a ReadableStream) asynchronously
for await (const chunk of response.body) {
  // Do something with each chunk
  // Here we just accumulate the size of the response.
  total += chunk.length;
}

// Do something with the total
console.log(total);
```

仕様書
---

| Specification |
| --- |
| Streams Standard # rs-class |

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

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

関連情報
----

* ストリーム API の概念
* 読み取り可能なストリームの使用
* 読み取り可能なバイトストリームの使用
* WHATWG Stream Visualizer: 読み取り可能なストリーム、書き込み可能なストリーム、および変換ストリームの基本的な視覚化。
* Web-streams-polyfill または sd-streams - ポリフィル


DeviceMotionEventRotationRate - Web API

DeviceMotionEventRotationRate
=============================

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

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

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

`DeviceMotionEventRotationRate.alpha` 読取専用

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

`DeviceMotionEventRotationRate.beta` 読取専用

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

`DeviceMotionEventRotationRate.gamma` 読取専用

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

仕様書
---

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

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

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


MIDIAccess - Web API

MIDIAccess
==========

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

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

EventTarget

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

`MIDIAccess.inputs` 読取専用

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

`MIDIAccess.outputs` 読取専用

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

`MIDIAccess.sysexEnabled` 読取専用

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

### イベント

`MIDIAccess.statechange_event`

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

例
-

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

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

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

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

仕様書
---

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

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

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


HTMLTemplateElement - Web API

HTMLTemplateElement
===================

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

EventTarget

Node

Element

HTMLElement

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

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

`content` 読取専用

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

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

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

仕様書
---

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

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

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


HTMLSourceElement - Web API

HTMLSourceElement
=================

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

EventTarget

Node

Element

HTMLElement

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

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

`HTMLSourceElement.media`

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

`HTMLSourceElement.sizes`

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

`HTMLSourceElement.src`

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

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

`HTMLSourceElement.srcset`

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

`HTMLSourceElement.type`

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

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

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

仕様書
---

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

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

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

関連情報
----

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


DOMStringMap - Web API

DOMStringMap
============

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

仕様書
---

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

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

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

関連情報
----

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


BlobEvent - Web API

BlobEvent
=========

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

Event

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

`BlobEvent()`

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

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

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

`BlobEvent.data` 読取専用

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

`BlobEvent.timecode` 読取専用

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

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

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

仕様書
---

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

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

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

関連情報
----

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


USBIsochronousOutTransferResult - Web API

USBIsochronousOutTransferResult
===============================

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

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

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

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

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

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

`USBIsochronousOutTransferResult()`
Experimental

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

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

`USBIsochronousOutTransferResult.packets` 読取専用
Experimental

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

仕様書
---

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

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

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


EcKeyGenParams - Web API

EcKeyGenParams
==============

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

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

`name`

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

`namedCurve`

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

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

例
-

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

仕様書
---

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

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

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

関連情報
----

* `SubtleCrypto.generateKey()`


Performance - Web API

Performance
===========

**`Performance`** インターフェイスは、現在のページのパフォーマンス関連情報へのアクセスを提供します。これは High Resolution Time API の一部ですが、Performance Timeline API、Navigation Timing API、User Timing API、および Resource Timing API によって拡張されています。

このタイプのオブジェクトは読み取り専用属性 `window.performance` を呼び出すことで取得できます。

**メモ:** このインターフェイスとそのメンバーは、以下に示されている場合を除き、Web Workers で利用可能です。 パフォーマンスマーカーと測定値はコンテキストごとにあることにも注意してください。メインスレッド (または他のワーカー) にマークを作成した場合、それを Worker スレッドには表示できません (その逆も同様)。

プロパティ
-----

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

非推奨 `performance.navigation` 読取専用

ページがロードかリフレッシュか、リダイレクトの発生回数など、`timing` にリストされている時間に含まれる操作に関する有用なコンテキストを提供するレガシー `PerformanceNavigation` オブジェクト。Worker では利用できません。

非推奨 `performance.timing` 読取専用

待ち時間関連のパフォーマンス情報を含むレガシー `PerformanceTiming` オブジェクト。Worker には利用できません。

`performance.memory` (en-US)
Non-standard

Chrome で追加された*非標準の*拡張子で、このプロパティは基本的なメモリ使用量情報を持つオブジェクトを提供します。*この非標準の API を**使うべきではありません***。

`performance.timeOrigin` 読取専用
Non-standard

パフォーマンス測定の開始時刻のハイレゾリューションタイムスタンプを返します。

メソッド
----

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

`performance.clearMarks()`

ブラウザーのパフォーマンスエントリバッファから指定された*マーク*を削除します。

`performance.clearMeasures()`

ブラウザーのパフォーマンスエントリバッファから指定された*数値*を削除します。

`performance.clearResourceTimings()`

ブラウザーのパフォーマンスデータバッファから "`resource`" の `entryType` を持つすべての `performance entries` を削除します。

`performance.getEntries()`

与えられた*フィルタ*に基づく `PerformanceEntry` オブジェクトのリストを返します。

`performance.getEntriesByName()`

指定された*名前*と*エントリタイプ*に基づいて `PerformanceEntry` オブジェクトのリストを返します。

`performance.getEntriesByType()`

与えられた*エントリタイプ*の `PerformanceEntry` オブジェクトのリストを返します。

`performance.mark()`

指定された名前でブラウザーの*パフォーマンスエントリバッファ*に`タイムスタンプ`を作成します。

`performance.measure()`

指定された 2 つのマーク (それぞれ*開始マーク*と*終了マーク*と呼ばれる) の間に、ブラウザーのパフォーマンスエントリバッファ内に名前付き`タイムスタンプ`を作成します。

`performance.now()`

参照時点から経過したミリ秒数を表す `DOMHighResTimeStamp` を返します。

`performance.setResourceTimingBufferSize()`

ブラウザーのリソースタイミングバッファサイズを、指定された数の "`resource`" `タイプ` `パフォーマンスエントリ` オブジェクトに設定します。

`performance.toJSON()`

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

イベント
----

`addEventListener()` を使用するか、このインターフェイスの `oneventname` プロパティにイベントリスナを割り当てることで、イベントを監視します。

`resourcetimingbufferfull`

ブラウザーのリソースタイミングバッファがいっぱいになったときに発生します。`onresourcetimingbufferfull` プロパティからも利用できます。

仕様書
---

| Specification |
| --- |
| High Resolution Time # sec-performance |
| Performance Timeline # extensions-to-the-performance-interface |
| Resource Timing # sec-extensions-performance-interface |
| User Timing # extensions-performance-interface |

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

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


Sensor - Web API

Sensor
======

Sensor APIs の **`Sensor`** インターフェイスは、ほかのすべてのセンサーインターフェイスのベースクラスです。このインターフェイスを直接使うことはできません。ですが、このインターフェイスは継承するインターフェイスがアクセスするプロパティ・イベントハンドラー・メソッドを提供します。

この機能はサーバーで設定された Permissions Policy によりブロックされる可能性があります。

EventTarget

Sensor
最初に生成されたとき、`Sensor` オブジェクトは測定を行わない *idle* 状態です。`start()` メソッドが呼ばれると、データを取得する準備をします。準備ができると `activate` イベントが送られ、センサーは *activated* 状態になります。その後は、新しいデータを取得するたびに `reading` イベントを送ります。

エラーが発生したときは、`error` イベントを送り、測定を停止し、`Sensor` オブジェクトは *idle* 状態に戻ります。新しいデータを取得するには、もう一度 `start()` メソッドを呼ぶ必要があります。

`Sensor` をベースとするインターフェイス
------------------------

以下が `Sensor` インターフェイスをベースとするインターフェイスの一覧です。

* `Accelerometer`
* `AmbientLightSensor`
* `GravitySensor`
* `Gyroscope`
* `LinearAccelerationSensor`
* `Magnetometer`
* `OrientationSensor`
インスタンスプロパティ
-----------

`Sensor.activated` 読取専用

センサーが作動中かどうかを表す `boolean` 値を返します。

`Sensor.hasReading` 読取専用

センサーが測定値を持っているかを表す `boolean` 値を返します。

`Sensor.timestamp` 読取専用

センサーの最新の測定値のタイムスタンプを返します。

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

`Sensor.start()`

`Sensor` をベースとするセンサーを 1 個動作開始させます。

`Sensor.stop()`

`Sensor` をベースとするセンサーを 1 個動作停止させます。

イベント
----

`activate`

センサーの動作が開始したとき発火します。

`error`

センサーで例外が発生したとき発火します。

`reading`

センサーで新しい測定値が得られたとき発火します。

仕様書
---

| Specification |
| --- |
| Generic Sensor API # the-sensor-interface |

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

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


VideoTrackList - Web API

VideoTrackList
==============

**`VideoTrackList`** インターフェイスは、`<video>` 要素内に含まれる映像トラックのリストを表すために使用します。 各トラックはリスト内の個別の `VideoTrack` オブジェクトで表します。

`HTMLMediaElement.videoTracks` を使用してこのオブジェクトのインスタンスを取得します。 個々のトラックは、配列構文または `forEach()` などの関数を使用してアクセスできます。

EventTarget

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

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

`length` 読取専用

リスト内のトラック数。

`selectedIndex` 読取専用

現在選択されているトラックがある場合はそのインデックス、それ以外の場合は `-1`。

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

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

`getTrackById()`

指定された文字列と `id` が一致する `VideoTrackList` 内で見つかった `VideoTrack` を返します。 一致が見つからない場合は、`null` を返します。

イベント
----

`addtrack`

 新しい映像トラックがメディア要素に追加されたときに発生します。
 `onaddtrack` プロパティからも利用できます。

`change`

 映像トラックがアクティブまたは非アクティブになったときに発生します。
 `onchange` プロパティからも利用できます。

`removetrack`

 映像トラックがメディア要素から取り除かれたときに発生します。
 `onremovetrack` プロパティからも利用できます。

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

`VideoTrackList` を使用すると、メディア要素にある映像トラックに直接アクセスできるだけでなく、`addtrack` および `removetrack` イベントにイベントハンドラーを設定することができるため、メディア要素のストリームにトラックが追加されたときまたは取り除かれたときを検出できます。

例
-

### メディア要素の映像トラックリストの取得

メディア要素の `VideoTrackList` を取得するには、その `videoTracks` プロパティを使用します。

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

### トラック数の変化の監視

この例では、利用可能なチャンネル数に関する情報を表示するアプリがあります。 それを最新に保つために、 `addtrack` および `removetrack` イベントのためのハンドラーが設定されています。

```js
videoTracks.onaddtrack = updateTrackCount;
videoTracks.onremovetrack = updateTrackCount;

function updateTrackCount(event) {
  trackCount = videoTracks.length;
  drawTrackCountIndicator(trackCount);
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # audiotracklist-and-videotracklist-objects |

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

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


AesKeyGenParams - Web API

AesKeyGenParams
===============

Web Crypto API の辞書 **`AesKeyGenParams`** は、AES 鍵、すなわちアルゴリズムとして AES-CBC, AES-CTR, AES-GCM, AES-KW のいずれかを指定する鍵を生成する際に `SubtleCrypto.generateKey()` の引数 `algorithm` として渡すべきオブジェクトを表します。

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

`name`

文字列。使用したいアルゴリズムにより、`AES-CBC`, `AES-CTR`, `AES-GCM`, `AES-KW` のいずれかに設定するべきです。

`length`

`Number`。生成する鍵の長さ (ビット数) です。128, 192, 256 のいずれかでなければなりません。

例
-

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

仕様書
---

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

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

`SubtleCrypto.generateKey()` メソッドにおいて AES ベースのアルゴリズムをどれかサポートしているブラウザーは、この型をサポートするはずです。

関連情報
----

* `SubtleCrypto.generateKey()`


CSSLayerBlockRule - Web API

CSSLayerBlockRule
=================

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

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

* Learn more
* See full compatibility
* Report feedback
**`CSSLayerBlockRule`** は `@layer` ブロックルールを表します。 これは、他のルールを含むことができる、すなわちグループ化アットルールであり、名前で識別される所定のカスケードレイヤーに関連付けられます。

CSSRule

CSSGroupingRule

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

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

* `CSSLayerBlockRule.name` 読取専用
    + 関連するカスケードレイヤーの名前を含む文字列です。
インスタンスメソッド
----------

*親インターフェイスである `CSSGroupingRule` から継承したメソッドもあります。*

例
-

### HTML

```html
<p>I am displayed in <code>color: rebeccapurple</code>.</p>
```

### CSS

```css
@layer special {
  p {
    color: rebeccapurple;
  }
}
```

### JavaScript

```js
const item = document.getElementsByTagName("p")[0];
const rules = document.styleSheets[1].cssRules;
// スタイルシート #1 はこの埋め込み例に関連するスタイルシートであり、
// スタイルシート #0 は MDN ページ全体に関連するスタイルシート。

const layer = rules[0]; // CSSLayerBlockRule

item.textContent = `この CSSLayerBlockRule は "${layer.name}" レイヤーのものです。`;
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Cascading and Inheritance Level 5 # csslayerblockrule |

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

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

関連情報
----

* `@layer`
* `CSSLayerStatementRule`
* CSS カスケードレイヤーの学習