画面起動ロック API - Web API

画面起動ロック API
===========

画面起動ロック API は、アプリケーションの実行を継続する必要がある場合に、端末が画面を暗くしたり、ロックしたりするのを防ぐ方法を提供します。

概念と用途
-----

ほとんどの端末は、ハードウェアの寿命を延ばすために、一定時間が経過すると画面をオフにすることが既定になっています。最近の端末は、バッテリーの消費電力を節約するためにこれを行っています。これは有益な機能ですが、アプリケーションによっては、使いやすくするために画面が起動したままの状態にする必要があるものもあります。

画面起動ロック API は、画面の消灯、暗転、ロックを防止します。以前は電力を浪費する可能性がある方法でしか実現できないものでしたが、シンプルなプラットフォームベースの解決策を取ることができるようになりました。画面起動ロックを取得できるのは、表示されている（アクティブな）文書のみです。

画面を表示したままにする用途はたくさんあります。電子書籍の閲覧、地図ナビゲーション、レシピの確認、聴衆へのプレゼンテーション、 QR/バーコードのスキャン、（画面を表示し続けるためのよく使う）触覚入力ではなく音声やジェスチャーコントロールを使用するアプリケーションなどです。

`WakeLockSentinel` オブジェクトを取得するには、 `navigator.wakeLock.request()` を呼び出します。これはプラットフォームが許可していれば解決する `Promise` ベースのメソッドです。リクエストが拒否される理由はいくつかあります。例えば、システム設定（省電力モードやバッテリー残量が少ない場合など）、文書がアクティブでない、または表示されていないなどです。

基礎となるシステムの起動ロックには、見張り (sentinel) が割り当てられます。これは、バッテリーの残量が少なくなったり、文書がアクティブでなくなったり、または表示されなくなったりした場合などに、システムによって解放されます。また、 `WakeLockSentinel.release()` メソッドを使用して手動で解除することもできます。見張りオブジェクトへの参照を保存しておくと、後で解放を制御したり、必要に応じてロックを再取得することができます。

画面起動ロック API を使用して画面を表示したままにするのは、ユーザビリティを向上させる目的で行うべきです。インターフェイス上で画面ロックが有効になっているかどうかを表示したり、またはユーザーが望むならそれを無効にする方法を表示したりするのはいい考えです。

画面起動ロック API のインターフェイス
---------------------

`WakeLock`

**`WakeLock`** インターフェイスは、アプリケーションが実行し続ける必要があるときに画面が暗くなるのを防いだり、ロックされたりするのを防止します。

`WakeLockSentinel`

基礎となるプラットフォームの起動ロックへのハンドルを提供し、参照されている場合は、手動で解放および再取得することができます。このオブジェクトのインスタンスを取得するには、 `WakeLock.request` を呼び出してください。

`Navigator.wakelock`

`WakeLock` オブジェクトのインスタンスを返します。ここから他のすべての機能にアクセスできます。

例
-

### 機能検出

このコードは、起動ロックに対応しているかどうかをチェックし、それに応じて UI を更新します。

```js
if ("wakeLock" in navigator) {
  isSupported = true;
  statusElem.textContent = "起動ロック API に対応しています。";
} else {
  wakeButton.disabled = true;
  statusElem.textContent = "このブラウザーは起動ロックに対応していません。";
}
```

### 起動ロックの要求

次の例は、 `WakeLockSentinel` オブジェクトを要求する方法を示しています。`WakeLock.request` メソッドは `Promise` ベースなので、非同期関数を作成し、 UI を更新して起動ロックが有効であることを反映させることができます。

```js
// 起動ロックの参照を作成
let wakeLock = null;

// 非同期関数を作成して起動ロックをリクエスト
try {
  wakeLock = await navigator.wakeLock.request("screen");
  statusElem.textContent = "起動ロックが有効です。";
} catch (err) {
  // 起動ロックのリクエストに失敗。ふつうはバッテリーなどのシステム関連
  statusElem.textContent = `${err.name}, ${err.message}`;
}
```

### 起動ロックの解放

以下の例は、以前取得した起動ロックを開放する方法を示しています。

```js
wakeLock.release().then(() => {
  wakeLock = null;
});
```

### 起動ロック解放の表示

この例では、何らかの方法で起動ロックが解放された場合（アクティブウィンドウやタブから移動した場合など）に UI を更新します。

```js
wakeLock.addEventListener("release", () => {
  // 起動ロックが解放
  statusElem.textContent = "起動ロックが解放されました";
});
```

### 起動ロックの再取得

以下のコードは、文書の可視性が変化し、起動ロックが解除された場合に、起動ロックを再取得するものです。

```js
document.addEventListener("visibilitychange", async () => {
  if (wakeLock !== null && document.visibilityState === "visible") {
    wakeLock = await navigator.wakeLock.request("screen");
  }
});
```

### すべてをまとめる

GitHub にある完全なコードはこちらにあります。デモでは、ボタンで起動ロックの取得と解除を行い、 UI を更新しています。また、何らかの理由で起動ロックが自動的に解除された場合も UI が更新されます。チェックボックスがあり、これをオンにすると、文書の表示状態が変化して再び表示されるようになった場合に、起動ロックを自動的に再取得することができます。

### パフォーマンスの考慮事項

* 常時画面を表示する必要があったアクティビティが終了した時点で、画面起動ロックを解除してください。例えば、 QR コードを使ってチケット情報を送信するチケット販売アプリでは、 QR コードを表示している間は（コードの読み取りを成功させるために）画面起動ロックを取得しても良いのですが、終わったら解除してください。プレゼンテーションアプリでは、プレゼンテーションがアクティブな間のみロックを保持し、プレゼンテーションの編集中はロックを保持しないようにしてください。
* アプリが長時間ダウンロードを行う場合は、バックグラウンドフェッチの使用を検討してください。
* アプリがリモートサーバーからデータを同期している場合は、バックグラウンド同期を使用することを検討してください。
* アクティブな文書のみがスクリーン起動ロックを取得でき、文書が非アクティブになると、以前に取得したロックは自動的に解放されます。したがって、文書がアクティブになったら、必要に応じてスクリーン起動ロックを再取得するようにしてください（visibilitychange イベントを待ち受けます）。
機能ポリシーの統合
---------

画面起動ロック API へのアクセスは、機能ポリシーの `screen-wake-lock` ディレクティブによって制御されています。使用方法のリファレンスは機能ポリシーの使用を参照してください。

仕様書
---

| 仕様書 |
| --- |
| Screen Wake Lock API |

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

### api.WakeLock

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

### api.WakeLockSentinel

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

関連情報
----

* An introductory article on the Screen Wake Lock API
* A Screen Wake Lock API demo on glitch
* 機能ポリシーの `screen-wake-lock` ディレクティブ


XMLSerializer - Web API

XMLSerializer
=============

`XMLSerializer` インターフェイスは `serializeToString()` メソッドを提供します。これにより、 DOM ツリーを表す XML 文字列を構築することができます。

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

`serializeToString()`

文字列の形にシリアライズされたサブツリーを返します。

例
-

### XML を文字列にシリアライズ

最初の基本的な例は、文書全体を XML を含む文字列にシリアライズします。

```js
const s = new XMLSerializer();
const d = document;
const str = s.serializeToString(d);
saveXML(str);
```

このコードは、新しい `XMLSerializer` オブジェクトを作成し、シリアライズされる `Document` を `serializeToString()` に渡します。これは、渡した文書と同等の XML を返します。

### XML を基にした DOM にノードを挿入する

この例は、`Element.insertAdjacentHTML()` メソッドを使用して新しい DOM `Node` を `Document` の body に挿入します。これは、`Element` オブジェクトをシリアライズすることにより作成された XML を基にしています。

**メモ:** 実際は、`importNode()` メソッドを呼び出して新しいノードを DOM に挿入する代わりに、以下のいずれかのメソッドを呼び出して DOM ツリーに追加することになるでしょう。

* `Element.append()` / `Element.prepend()` および `Document.append()` (en-US) / `Document.prepend()` (en-US) メソッド
* `Element.replaceWith()` メソッド（既存のノードを新しいノードと置き換えるため）
* `Document.insertAdjacentElement()` および `Element.insertAdjacentElement()` メソッド

`insertAdjacentHTML()` は文字列を受け入れるますが、2 番目の引数として `Node` を受け入れないため、`XMLSerializer` を使用して先にノードを文字列に変換します。

```js
const inp = document.createElement("input");
const XMLS = new XMLSerializer();
const inp_xmls = XMLS.serializeToString(inp); // まず DOM ノードを文字列に変換

// 新たに作成されたノードを文書の body に挿入
document.body.insertAdjacentHTML("afterbegin", inp_xmls);
```

このコードは、`Document.createElement()` を呼び出して新しい `<input>` 要素を作成し、`serializeToString()` を使用して XML にシリアライズします。

完了したら、`insertAdjacentHTML()` を使用して `<input>` 要素を DOM に挿入します。

仕様書
---

| Specification |
| --- |
| DOM Parsing and Serialization # the-xmlserializer-interface |

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

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

関連情報
----

* XML の解釈とシリアライズ
* `XMLHttpRequest`
* `DOMParser`


RsaHashedKeyGenParams - Web API

RsaHashedKeyGenParams
=====================

Web Crypto API の辞書 **`RsaHashedKeyGenParams`** は、RSA ベース、すなわちアルゴリズムとして RSASSA-PKCS1-v1\_5, RSA-PSS, RSA-OAEP のいずれかを指定する鍵ペアを生成する際に `SubtleCrypto.generateKey()` の引数 `algorithm` として渡すべきオブジェクトを表します。

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

`name`

文字列。使用したいアルゴリズムにより、`RSASSA-PKCS1-v1_5`, `RSA-PSS`, `RSA-OAEP` のいずれかに設定するべきです。

`modulusLength`

`Number`。RSA の法の長さ (ビット数) です。最低でも 2,048 にするべきです。 SP 800-131A Rev. 2 の例を参照してください。現在、4,096 にすることを薦めている組織もあります。

`publicExponent`

`Uint8Array`。公開指数です。他の値を用いるいい理由が無い限り、65,537 ( `[0x01, 0x00, 0x01]` ) を指定してください。

`hash`

用いるダイジェスト関数の名前を表す文字列です。`SHA-256`, `SHA-384`, `SHA-512` のうちのいずれかを指定できます。

**警告:** 技術的にはここに `SHA-1` を指定することもできますが、SHA-1 は脆弱であるとみなされているため強く非推奨です。

例
-

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

仕様書
---

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

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

`SubtleCrypto.generateKey()` メソッドにおいて RSA ベースのアルゴリズムをどれかサポートしているブラウザーは、この型をサポートするはずです。

関連情報
----

* `SubtleCrypto.generateKey()`


PerformanceTiming - Web API

PerformanceTiming
=================

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

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

**`PerformanceTiming`** インターフェイスは、下位互換性のために維持されている古いインターフェイスであり、現在のページの読み込み中および使用中に発生するさまざまなイベントに関するパフォーマンスタイミング情報を提供するプロパティを含みます。ページを記述する `PerformanceTiming` オブジェクトは `window.performance.timing` プロパティを使用して取得します。

プロパティ
-----

*`PerformanceTiming` インターフェイスに継承したプロパティはありません。*

これらのプロパティはそれぞれ、ページの読み込みプロセスにおいて特定のポイントに到達した時刻を表します。 DOM イベントに対応しているものもあれば、特徴的なブラウザーの内部操作が行われた時刻を記述するものもあります。

それぞれの時刻は符号なし 64 ビット整数 (`unsigned long long`) として提供され、 UNIX 元期からのミリ秒単位でその時点を表しています。

これらのプロパティは、ナビゲーション処理中に発生する順番に並べられています。

`PerformanceTiming.navigationStart` (en-US) 読取専用
非推奨

アンロードのプロンプトが、同じ閲覧コンテキスト内の前の文書で終了した時刻。前の文書が存在しない場合、この値は `PerformanceTiming.fetchStart` と同じになります。

`PerformanceTiming.unloadEventStart` (en-US) 読取専用
非推奨

イベント `unload` が発生したとき、ウィンドウ内の前の文書がアンロードを開始した時刻を示す。前の文書が存在しない場合、または前の文書や必要なリダイレクトが同じオリジンでない場合、返される値は `0` です。

`PerformanceTiming.unloadEventEnd` (en-US) 読取専用
非推奨

domxref("Window/unload\_event", "unload")}} イベントハンドラーが終了した時刻。前の文書が存在しない場合、または前の文書や必要なリダイレクトのいずれかが同じオリジンでない場合、返される値は `0` である。

`PerformanceTiming.redirectStart` (en-US) 読取専用
非推奨

最初の HTTP リダイレクトが開始された時刻。リダイレクトがない場合、あるいはリダイレクトのひとつが同じオリジンでない場合、返される値は `0` になります。

`PerformanceTiming.redirectEnd` (en-US) 読取専用
非推奨

最後の HTTP リダイレクトが完了した時刻、すなわち HTTP レスポンスの最後のバイトを受信した時刻です。リダイレクトがない場合、あるいはリダイレクトに同一オリジンでないものが含まれている場合、返される値は `0` になります。

`PerformanceTiming.fetchStart` (en-US) 読取専用
非推奨

ブラウザーが HTTP リクエストを使用して文書を取得する準備ができた時刻。この時点は、アプリケーションのキャッシュがチェックされる*前*です。

`PerformanceTiming.domainLookupStart` (en-US) 読取専用
非推奨

ドメイン検索を開始した時刻。持続的な接続を使用している場合、または情報がキャッシュやローカルリソースに保存されている場合、この値は `PerformanceTiming.fetchStart` と同じになります。

`PerformanceTiming.domainLookupEnd` (en-US) 読取専用
非推奨

ドメイン検索が終了した時刻。持続的な接続を使用している場合、または情報がキャッシュやローカルリソースに保存されている場合、この値は `PerformanceTiming.fetchStart` と同じになります。

`PerformanceTiming.connectStart` (en-US) 読取専用
非推奨

接続を開く要求をネットワークに送信した時刻。トランスポート層がエラーを報告し、接続確立が再び開始された場合、最後の接続確立開始時刻が与えられます。持続的な接続を使用している場合、この値は `PerformanceTiming.fetchStart` と同じになります。

`PerformanceTiming.connectEnd` (en-US) 読取専用
非推奨

接続がネットワークで開いた時刻。トランスポート層がエラーを報告し、接続の確立が再び開始された場合、最後の接続の確立に終了した時刻が与えられます。持続的な接続を使用している場合、この値は `PerformanceTiming.fetchStart` と同じになります。すべての安全な接続ハンドシェイク、または SOCKS 認証が終了すると、接続が開かれたとみなされます。

`PerformanceTiming.secureConnectionStart` (en-US) 読取専用
非推奨

安全な接続のハンドシェイクが開始された時刻。そのような接続が要求されていない場合は、 `0` を返します。

`PerformanceTiming.requestStart` (en-US) 読取専用
非推奨

ブラウザーが実際の文書を取得するために、サーバーまたはキャッシュからリクエストを送信した時刻。リクエスト開始後にトランスポート層に障害が発生し、接続が再開された場合は、このプロパティには新たなリクエストに対応する時刻が設定されます。

`PerformanceTiming.responseStart` (en-US) 読取専用
非推奨

ブラウザーがレスポンスの最初のバイトを受信した時刻。サーバーからキャッシュ、またはローカルリソースから受信した時刻。

`PerformanceTiming.responseEnd` (en-US) 読取専用
非推奨

ブラウザーがサーバー、キャッシュ、ローカルリソースからレスポンスの最後のバイトを受信した時刻、またはこれが最初に発生した場合は接続が閉じられた時刻。

`PerformanceTiming.domLoading` (en-US) 読取専用
非推奨

パーサーが処理を開始し、その `Document.readyState` が `'loading'` に変わり、対応する `readystatechange` イベントが発行された時刻。

`PerformanceTiming.domInteractive` (en-US) 読取専用
非推奨

パーサーがメイン文書の処理を終了し、その `Document.readyState` が `'interactive'` に変わり、対応する `readystatechange` イベントが発行された時刻。

`PerformanceTiming.domContentLoadedEventStart` (en-US) 読取専用
非推奨

パーサーが `DOMContentLoaded` イベントを送信する直前、つまり解釈処理直後に実行する必要があるすべてのスクリプトの実行が完了した時刻。

`PerformanceTiming.domContentLoadedEventEnd` (en-US) 読取専用
非推奨

一刻も早く実行する必要のあるスクリプトが、順不同にかかわらず、すべて実行が完了した時刻。

`PerformanceTiming.domComplete` (en-US) 読取専用
非推奨

パーサーがメイン文書の処理を終了し、その `Document.readyState` が `'complete'` に変わり、対応する `readystatechange` イベントが発行された時刻。

`PerformanceTiming.loadEventStart` (en-US) 読取専用
非推奨

現在の文書に対して `load` イベントが送信された時刻。このイベントがまだ送信されていない場合は、 `0` を返します。

`PerformanceTiming.loadEventEnd` (en-US) 読取専用
非推奨

`load` イベントハンドラーが終了した時刻、すなわち load イベントが完了した時刻です。このイベントがまだ送信されていない場合、またはまだ完了していない場合、 `0` を返します。

メソッド
----

*`PerformanceTiming` インターフェイスに継承したメソッドはありません。*

非推奨 `PerformanceTiming.toJSON()` (en-US)
Non-standard

JSON オブジェクト で、この `PerformanceTiming` オブジェクトを表します。

仕様書
---

Navigation Timing 仕様書 がこの機能を非推奨としたため、この機能は標準化される予定はありません。
 代わりに `PerformanceNavigationTiming` インターフェイスを使用してください。

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

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

関連情報
----

* このオブジェクトを生成する `Performance.timing` プロパティ


Storage - Web API

Storage
=======

**`Storage`** はウェブストレージ API のインターフェイスで、特定のドメインのセッションストレージまたはローカルストレージへのアクセス機能を提供して、例えば保存されているデータアイテムを追加、変更、削除することができます。

例えば、ドメインのセッションストレージを操作したい場合は、`Window.sessionStorage` メソッドを呼び出してください。ドメインのローカルストレージを操作したい場合は、`Window.localStorage` を呼び出してください。

プロパティ
-----

`Storage.length` 読取専用

`Storage` オブジェクトに保存されているデータアイテムの数を表す整数を返します。

メソッド
----

`Storage.key()`

数値 n を渡すと、ストレージ内で n 番目のキーの名称を返します。

`Storage.getItem()`

キーの名称を渡すと、キーに対する値を返します。

`Storage.setItem()`

キーの名称と値を渡すと、ストレージにキーを追加し、または既存のキーに対する値を更新します。

`Storage.removeItem()`

キーの名称を渡すと、ストレージからキーを削除します。

`Storage.clear()`

ストレージからすべてのキーを消去します。

例
-

ここでは、`localStorage` を呼び出して `Storage` オブジェクトにアクセスしています。始めに `!localStorage.getItem('bgcolor')` というコードを使用して、ローカルストレージにデータアイテムが含まれているかを確認します。含まれている場合は、`Storage.getItem()` を使用してデータアイテムを取得して、さらにそのデータを使用してページのスタイルを更新する `setStyles()` 関数を実行します。含まれていない場合は `populateStorage()` 関数を実行します。こちらは `Storage.setItem()` を使用してアイテムの値を設定してから、`setStyles()` 関数を実行します。

```js
if (!localStorage.getItem("bgcolor")) {
  populateStorage();
} else {
  setStyles();
}

function populateStorage() {
  localStorage.setItem("bgcolor", document.getElementById("bgcolor").value);
  localStorage.setItem("font", document.getElementById("font").value);
  localStorage.setItem("image", document.getElementById("image").value);

  setStyles();
}

function setStyles() {
  const currentColor = localStorage.getItem("bgcolor");
  const currentFont = localStorage.getItem("font");
  const currentImage = localStorage.getItem("image");

  document.getElementById("bgcolor").value = currentColor;
  document.getElementById("font").value = currentFont;
  document.getElementById("image").value = currentImage;

  htmlElem.style.backgroundColor = `#${currentColor}`;
  pElem.style.fontFamily = currentFont;
  imgElem.setAttribute("src", currentImage);
}
```

**メモ:** 完全に動作する例として実行する様子を見るために、Web Storage Demo をご覧ください。

仕様書
---

| Specification |
| --- |
| HTML Standard # storage |

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

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

関連情報
----

* ウェブストレージ API の使用
* `Window.localStorage`
* `Window.sessionStorage`
* `CacheStorage`


Headers - Web API

Headers
=======

**`Headers`** はフェッチ API のインターフェイスで、 HTTP リクエスト／レスポンスヘッダー上のさまざまなアクションを実行します。アクションとしては、リクエストヘッダーのリストに対するヘッダーの取得、設定、追加、削除などがあります。

`Headers` オブジェクトは、初期状態では空で 0 個以上の名前と値のペアで構成される関連するヘッダーの連想リストを持っています。 `append()` （例を見てください）のようなメソッドを使用して、ヘッダーを追加することができます。このインターフェイスのすべてのメソッドで、ヘッダー名は大文字小文字を区別しないバイト列として照合されます。

セキュリティ上の理由から、いくつかのヘッダーはユーザーエージェントでしか制御できません。これには、禁止ヘッダー名と禁止レスポンスヘッダー名があります。

ヘッダーは関連するガードも持っています。ガードは `immutable`、`request`、`request-no-cors`、`response`、`none` のいずれかの値を取ります。これはヘッダーを変更する `set()` メソッドと `delete()` メソッド、`append()` メソッドに影響を与えます。詳細はガードを見てください。

`Headers` オブジェクトは `Request.headers` および `Response.headers` プロパティ経由で取得することができ、また新しい `Headers` オブジェクトを `Headers()` コンストラクターで生成することもできます。

`Headers` を実装したオブジェクトは、`entries()` の代わりに直接 `for...of` 構文で使用することができます。 `for (const p of myHeaders)` と `for (const p of myHeaders.entries())` は同等です。

**メモ:** 利用できるヘッダーについてはHTTP ヘッダー を参照してください。

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

`Headers()`

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

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

`Headers.append()`

`Headers` オブジェクト内の既存のヘッダーに新しい値を追加するか、まだ存在しない場合はヘッダーを追加します。

`Headers.delete()`

`Headers` オブジェクトからヘッダーを削除します。

`Headers.entries()`

このオブジェクトに含まれるすべてのキー/値のペアを通して処理するための `iterator` を返します。

`Headers.forEach()`

指定された関数を、この `Headers` オブジェクトのキー/値のペアそれぞれに対して一度ずつ実行します。

`Headers.get()`

`Headers` オブジェクトにある指定された名前を持つ、ヘッダーのすべての値を示す文字列の配列を返します。

`Headers.has()`

`Headers` オブジェクトが特定のヘッダーを含むかどうかを示す値を、論理値で返します。

`Headers.keys()`

このオブジェクトに含まれるキー/値のペアのすべてのキーを通して処理するための イテレーターを返します。

`Headers.set()`

オブジェクト内の既存のヘッダーに新しい値を設定するか、まだ存在しない場合はヘッダーを追加する。

`Headers.values()`

このオブジェクトに含まれるキー/値のペアのすべての値を通して処理するためのイテレーターを返します。

**メモ:** `Headers.set()` と `Headers.append()` の明確な違いは、複数の値を受け入れる特定のヘッダーが既に存在しているときの挙動です。`Headers.set()` は既存の値を新しい値で上書きしますが、`Headers.append()` は既存の値の末尾に新しい値を追加します。サンプルコードはそれぞれの専用ページで確認してください。

**メモ:** すべての Headers メソッドで、有効な HTTP ヘッダー名 ではない名前の参照を渡そうとすると `TypeError` が発生します。ヘッダーに immutable ガードがある場合、変更操作をしようとすると `TypeError` が発生します。します。そのほかの場外の場合は、単に失敗します。

**メモ:** ヘッダーを反復処理する時は、自動的に辞書順への並び替えが行われ、重複する名前は結合されます。

例
-

次のコードスニペットでは、`Headers()` コンストラクターを使用して新しいヘッダーを生成し、`append()` を使用して新しいヘッダーを追加しています。その後、 `get()` を使用してヘッダーの値を返します。

```js
const myHeaders = new Headers();

myHeaders.append("Content-Type", "text/xml");
myHeaders.get("Content-Type"); // 'text/xml' を返す。
```

同じことがコンストラクターにオブジェクトリテラルか配列リテラルの配列リテラルを渡すことでできます。

```js
let myHeaders = new Headers({
  "Content-Type": "text/xml",
});

// or, using an array of arrays:
myHeaders = new Headers([["Content-Type", "text/xml"]]);

myHeaders.get("Content-Type"); // should return 'text/xml'
```

仕様書
---

| Specification |
| --- |
| Fetch Standard # headers-class |

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

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

関連項目
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP


HTMLStyleElement - Web API

HTMLStyleElement
================

**`HTMLStyleElement`** インターフェイスは `<style>` 要素を表します。これは親である `HTMLElement` からプロパティとメソッドを継承しています。

このインターフェイスでは、（ほとんどの場合）保持している CSS を操作することはできません。CSS を操作するには、DOM を使用して指定された CSS プロパティを操作するために使用するオブジェクトの概要について、動的なスタイル情報の利用を参照してください。

EventTarget

Node

Element

HTMLElement

HTMLStyleElementプロパティ
-----

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

`HTMLStyleElement.media`

スタイル情報の意図する出力先媒体を表す HTML 属性を反映した文字列です。

`HTMLStyleElement.type`
非推奨

この文で適用されるスタイルの種類を表す HTML 属性を反映する文字列です。

`HTMLStyleElement.disabled`

論理値で、関連するスタイルシートが無効かどうかを示します。

`HTMLStyleElement.sheet` 読取専用

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

メソッド
----

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlstyleelement |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: `<style>`
* 動的なスタイル情報の利用で CSS を操作する方法を確認してください


MediaSource - Web API

MediaSource
===========

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

**`MediaSource`**`インターフェイスは、``HTMLMediaElement`のデータを扱っています。MediaSource をオブジェクトは、ユーザが再生する`HTMLMediaElement`につけることができます。

プロパティ
-----

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

`MediaSource.sourceBuffers`読取専用

`SourceBufferList`から成り立っています。

`MediaSource.activeSourceBuffers` 読取専用

`SourceBufferList` から成り立っています。

`MediaSource.readyState` 読取専用

値を列挙します。

*`MediaSource.duration`*

浮動小数点型です。

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

`MediaSource()` 読取専用

コンストラクタはソースバッファと関連しない MediaSource オブジェクトを返します

Static なメソッド
------------

`MediaSource.isTypeSupported()`

与えられた MIME タイプが完全に実行できるかどうかの`Boolean`型を返します。

メソッド
----

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

`MediaSource.addSourceBuffer()`

`MediaSource` オブジェクトに関連づけて作成し、 , `SourceBuffer` に与えられた MIME タイプを返します。

`MediaSource.removeSourceBuffer()`

メディアソースオブジェクトから、与えられた `SourceBuffer` を削除します。

`MediaSource.endOfStream()`

ストリームの終わりを合図します。最後には error を発するでしょう。

仕様書
---

| Specification |
| --- |
| Media Source Extensions™ # mediasource |

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

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

関連項目
----

* 関連するインターフェイス: `SourceBuffer` と`SourceBufferList`.


HTMLPictureElement - Web API

HTMLPictureElement
==================

**`HTMLPictureElement`** インタフェースは、HTML の `<picture>` 要素を表します。これは固有のプロパティやメソッドを実装していません。

EventTarget

Node

Element

HTMLElement

HTMLPictureElementプロパティ
-----

*固有のプロパティはありませんが、親要素である `HTMLElement` から継承したプロパティがあります。*

メソッド
----

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlpictureelement |

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

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

関連情報
----

* これを実装している `<picture>` HTML 要素。
* `HTMLImageElement` と `HTMLSourceElement` は、しばしば `<picture>` 要素と同時に使用されます。


CharacterData - Web API

CharacterData
=============

**`CharacterData`** は抽象インターフェイスで、文字を包含する `Node` オブジェクトを表します。これは抽象インターフェイスであり、`CharacterData` 型のオブジェクトは存在しません。抽象ではない `Text`、`Comment`、`CDATASection`、`ProcessingInstruction` といったインターフェイスによって実装されています。

EventTarget

Node

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

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

`CharacterData.data`

当該オブジェクトが包含するテキストデータを表す文字列です。

`CharacterData.length` 読取専用

このオブジェクトに格納された文字列のサイズを表す数値を返します。

`CharacterData.nextElementSibling` 読取専用

親要素の子のリストで、指定した要素の*直後*の兄弟である `Element` を返します。

`CharacterData.previousElementSibling` 読取専用

親要素の子のリストで、指定した要素の*直前*の兄弟である `Element` を返します。

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

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

`CharacterData.after()`

一連の `Node` オブジェクトまたは文字列を、この `CharacterData` の親ノードの子リストの中、この `CharacterData` オブジェクトの直後に挿入します。

`CharacterData.appendData()`

指定した文字列を `CharacterData.data` の文字列に追加します。このメソッドから戻ると、`data` には結合した文字列が入ります。

`CharacterData.before()`

一連の `Node` オブジェクトまたは文字列を、この `CharacterData` の親ノードの子リストの中、この `CharacterData` オブジェクトの直前に挿入します。

`CharacterData.deleteData()`

`CharacterData.data` の文字列の指定したオフセット位置から、指定した数の文字を削除します。このメソッドから戻ると、 `data` には短縮された文字列になります。

`CharacterData.insertData()`

`CharacterData.data` の文字列の指定したオフセット位置に、指定した文字を挿入します。このメソッドから戻ると、 `data` には変更された文字列になります。

`CharacterData.remove()`

親要素の子のリストから、オブジェクトを削除します。

`CharacterData.replaceData()`

指定したオフセット位置から指定した量の文字列を、指定した文字列に置き換えます。このメソッドから戻ると、 `data` には変更された文字列になります。

`CharacterData.replaceWith()`

親ノードの子リストの文字を `Node` オブジェクトまたは文字列の集合で置き換えます。

`CharacterData.substringData()`

指定された長さの `CharacterData.data` の部分を含む、指定されたオフセットから始まる文字列を返します。

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-characterdata |

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

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

関連情報
----

* DOM 概要ページ.
* このインターフェイスを実装している具象インターフェイス: `Text`, `CDATASection`, `ProcessingInstruction`, `Comment`


XPathResult - Web API

XPathResult
===========

**`XPathResult`** インターフェイスは、指定されたノードのコンテキスト内で XPath 式を評価して発生した結果を表します。

XPath 式はさまざまな結果型を発生させる可能性があるため、このインターフェイスを使用すると、結果の型と値を決定して処理することが可能になります。

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

`XPathResult.booleanValue` 読取専用

論理値で、 `resultType` が `BOOLEAN_TYPE` の場合に、結果の値を表します。

`XPathResult.invalidIteratorState` 読取専用

イテレータが無効になったことを示します。 `resultType` が `UNORDERED_NODE_ITERATOR_TYPE` または `ORDERED_NODE_ITERATOR_TYPE` で、この結果を返してから文書が変更された場合は `true` となります。

`XPathResult.numberValue` 読取専用

数値で、 `resultType` が `NUMBER_TYPE` の場合に、結果の値を表します。

`XPathResult.resultType` 読取専用

型定数を定義した、結果の型を表す数値のコードです。

`XPathResult.singleNodeValue` 読取専用

単一ノードの結果の値を表す `Node` です。 `null` になることもあります。

`XPathResult.snapshotLength` 読取専用

結果スナップショットのノード数です。

`XPathResult.stringValue` 読取専用

文字列で、 `resultType` が `STRING_TYPE` の場合に、結果の値を表します。

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

`XPathResult.iterateNext()`

結果がノード集合の場合、このメソッドはそれを反復処理し、次のノードを返すか、ノードがない場合は `null` を返します。

`XPathResult.snapshotItem()`

スナップショット集合のアイテムを返すか、インデックスがノードの範囲にない場合は `null` を返します。イテレーターの結果とは異なり、スナップショットは無効にはなりませんが、変化した場合には現在の文書に対応しなくなる可能性があります。

定数
--

| 結果の定義済みの型定数 | 値 | 説明 |
| --- | --- | --- |
| `ANY_TYPE` | `0` | 式を評価した結果として自然に得られる型を格納した結果集合です。結果がノード集合の場合、 `UNORDERED_NODE_ITERATOR_TYPE` が常に結果として得られる型であることに注意してください。 |
| `NUMBER_TYPE` | `1` | 単一の数値を格納した結果です。この例は、例えば `count()` 関数を使用した XPath 式の中で有益です。 |
| `STRING_TYPE` | `2` | 単一の文字列を格納した結果です。 |
| `BOOLEAN_TYPE` | `3` | 1 つの論理値を格納した結果です。これは例えば、`not()`関数を使用した XPath 式の中で有益なものです。 |
| `UNORDERED_NODE_ITERATOR_TYPE` | `4` | 式に一致するすべてのノードを格納した結果ノード集合です。ノードは必ずしも文書内の順序とは限りません。 |
| `ORDERED_NODE_ITERATOR_TYPE` | `5` | 式に一致するすべてのノードを格納した結果ノード集合です。結果セットのノードは、文書内のノードと同じ順序で現れます。 |
| `UNORDERED_NODE_SNAPSHOT_TYPE` | `6` | 式に一致するすべてのノードのスナップショットを含む結果ノード集合です。ノードは必ずしも文書内の順序とは限りません。 |
| `ORDERED_NODE_SNAPSHOT_TYPE` | `7` | 式に一致するすべてのノードのスナップショットを含む結果ノード集合です。結果セットのノードは、文書内のノードと同じ順序で現れます。 |
| `ANY_UNORDERED_NODE_TYPE` | `8` | 式に一致する単一のノードを格納した結果ノード集合です。このノードは、必ずしも文書内の式に一致する最初のノードであるとは限りません。 |
| `FIRST_ORDERED_NODE_TYPE` | `9` | 式に一致する文書内の最初のノードを格納した結果ノード集合です。 |

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-xpathresult |

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

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

関連情報
----

* `Document.evaluate()`
* `XPathExpression`
* Dottoro Web Reference - XPathResult object


FocusEvent - Web API

FocusEvent
==========

**`FocusEvent`** はフォーカスに関するイベント、例えば `focus`、`blur`、`focusin`、`focusout` などを表します。

Event

UIEvent

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

`FocusEvent()`

指定した引数に基づいて、`FocusEvent` イベントを作成します。

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

*このインターフェイスは親である `UIEvent` および間接的に `Event` から、プロパティを継承しています*。

`FocusEvent.relatedTarget`

このイベントのセカンダリーターゲットを表す `EventTarget` です。一部の場合（タブ移動でページに出入りするときなど）では、セキュリティ上の理由からこのプロパティが `null` に設定されます。

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

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

イベントの順序
-------

*UI イベント* 仕様書では、フォーカスイベントは互いに相対的に 設定された順序で発生する と記載されており、さらに、要素 A から要素 B にフォーカスが移動したときに発行される典型的なイベントのシーケンスが記述されています。

1. `focusout`: 要素 A がフォーカスを失う前に送られます。
2. `focusin`: 要素 B がフォーカスを受け取る前に送られます。
3. `blur`: 要素 A がフォーカスを失った後に送られます。
4. `focus`: 要素 B がフォーカスを受け取った後に送られます。

しかし、現在のブラウザー実装では、この 4 つのイベントを異なる形で発行しています。

1. `blur`: 要素 A がフォーカスを失った後に送られます。
2. `focusout`: `blur` イベントが送られた後で送られます。
3. `focus`: 要素 B がフォーカスを失った後に送られます。
4. `focusin`: `focus` イベントが送られた後で送られます。
仕様書
---

| Specification |
| --- |
| UI Events # interface-focusevent |

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

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

関連情報
----

* `Event` 基本インターフェイス


StyleSheetList - Web API

StyleSheetList
==============

`StyleSheetList` インターフェイスは `StyleSheet` のリストを表します。

これは配列風のオブジェクトですが、 `Array` のメソッドを適用しての反復処理はできません。しかし標準の `for` ループと添字による反復処理、もしくは `Array` への変換ができます。

例
-

### for ループを使用して document の styleSheet オブジェクトを取得

```js
for (let i = 0; i < document.styleSheets.length; i++) {
  let styleSheet = document.styleSheets[i];
}
```

### Array のメソッドを適用してすべての CSS ルールを取得
```

const allCSS = [...document.styleSheets]
  .map(styleSheet => {
    try {
      return [...styleSheet.cssRules]
        .map(rule => rule.cssText)
        .join('');
    } catch (e) {
      console.log('Access to stylesheet %s is denied. Ignoring...', styleSheet.href);
    }
  })
  .filter(Boolean)
  .join('\n');
```

仕様書
---

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

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

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


MediaStream 収録 API - Web API

MediaStream 収録 API
==================

**MediaStream 収録 API** (MediaStream Recording API) は、単に *Media Recording API* または *MediaRecorder API* と呼ばれることもありますが、メディアキャプチャとストリーム API および WebRTC API と密接に関係しています。 MediaStream 収録 API を使用すると、`MediaStream` オブジェクトまたは `HTMLMediaElement` オブジェクトによって生成されたデータを分析、処理、またはディスクへの保存のためにキャプチャすることができます。 また、驚くほど簡単に作業できます。

基本概念
----

MediaStream 収録 API は、`MediaRecorder` という 1 つの主要なインターフェイスで構成されており、これが `MediaStream` からデータを取得して処理のためにユーザーに配信するというすべての作業を行います。 データは、`MediaRecorder` の作成時にすでに指定した形式で、一連の `dataavailable` イベントによって配信されます。 その後、データをさらに処理するか、必要に応じてファイルに書き込むことができます。

### 収録プロセスの概要

ストリームを収録（recording、録音、録画）するプロセスは簡単です。

1. メディアデータのソースとして機能する `MediaStream` または `HTMLMediaElement`（`<audio>` 要素または `<video>` 要素の形式）を設定します。
2. ソースストリームと必要なオプション（コンテナの MIME タイプやトラックの必要なビットレートなど）を指定して、`MediaRecorder` オブジェクトを作成します。
3. `ondataavailable` に `dataavailable` イベントのイベントハンドラを設定します。 データが利用可能になるたびにこれが呼び出されます。
4. ソースメディアが再生され、動画を録画する準備が整ったら、`MediaRecorder.start()` を呼び出して録画を開始します。
5. `dataavailable` イベントハンドラは準備ができたデータがあるたびに呼ばれます。 イベントは、`data` 属性を持ち、その値はメディアデータを含む `Blob` です。 あなたは `dataavailable` イベントを発生させることができ、それによって最新のサウンドをあなたに届けるので、それをフィルターにかけたり、それを保存したりすることができます。
6. ソースメディアの再生が停止すると、録画は自動的に停止します。
7. `MediaRecorder.stop()` を呼び出すことで、いつでも録画を停止できます。

**メモ:** 収録されたメディアのスライスを含む個々の `Blob` は、必ずしも個別に再生できるわけではありません。 再生する前にメディアを組み立て直す必要があります。

収録中に問題が発生した場合は、 `error` イベントが `MediaRecorder` に送られます。 `onerror` イベントハンドラーを設定することで `error` イベントを監視できます。

ここでの例では、 `MediaStream` のソースとして HTML キャンバスを利用し、9 秒後に録画を停止します。

```js
const canvas = document.querySelector("canvas");

// Optional frames per second argument.
const stream = canvas.captureStream(25);
const recordedChunks = [];

console.log(stream);
const options = { mimeType: "video/webm; codecs=vp9" };
const mediaRecorder = new MediaRecorder(stream, options);

mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();

function handleDataAvailable(event) {
  console.log("data-available");
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
    console.log(recordedChunks);
    download();
  } else {
    // …
  }
}
function download() {
  const blob = new Blob(recordedChunks, {
    type: "video/webm",
  });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  document.body.appendChild(a);
  a.style = "display: none";
  a.href = url;
  a.download = "test.webm";
  a.click();
  window.URL.revokeObjectURL(url);
}

// demo: to download after 9sec
setTimeout((event) => {
  console.log("stopping");
  mediaRecorder.stop();
}, 9000);
```

### レコーダーの状態を調べて制御する

`MediaRecorder` オブジェクトのプロパティを使用して収録プロセスの状態を決定したり、`pause()` および `resume()` メソッドを使用してソースメディアの収録を一時停止したり再開したりすることもできます。

特定の MIME タイプがサポートされているかどうかを確認する必要がある場合は、それも可能です。 `MediaRecorder.isTypeSupported()` を呼び出すだけです。

### 見込みがある入力ソースの調査

カメラやマイクの入力を収録することが目的の場合は、`MediaRecorder` の構築プロセスを開始する前に、使用可能な入力機器を調べてください。 そのためには、`navigator.mediaDevices.enumerateDevices()` を呼び出して利用可能なメディア機器のリストを取得する必要があります。 その後、そのリストを調べて見込みがある入力ソースを特定し、さらに必要な基準に基づいてリストをフィルタリングすることもできます。

このコードスニペットでは、`enumerateDevices()` を使用して使用可能な入力機器を調べ、音声入力機器であるものを見つけて、`<option>` 要素を作成し、それを入力ソースピッカーを表す `<select>` 要素に追加します。

```js
navigator.mediaDevices.enumerateDevices().then((devices) => {
  devices.forEach((device) => {
    const menu = document.getElementById("inputdevices");
    if (device.kind === "audioinput") {
      const item = document.createElement("option");
      item.textContent = device.label;
      item.value = device.deviceId;
      menu.appendChild(item);
    }
  });
});
```

これと同じようなコードを使用して、ユーザーが使用したい機器のセットを制限することができます。

### 詳細については

MediaStream 収録 API の使用方法の詳細については、MediaStream 収録 API の使用を参照してください。 これは、API を使用してオーディオクリップを収録する方法を示します。 2 番目の記事のメディア要素の収録では、`<audio>` 要素または `<video>` 要素からストリームを受信してキャプチャしたストリームを使用する方法（この場合は収録してローカルディスクに保存する方法）について説明します。

リファレンス
------

`BlobEvent`

メディアデータのチャンク（chunk、大きな塊）が収録され終えるたびに、`dataavailable` 型の `BlobEvent` を使用して `Blob` 形式で消費者に配信されます。

`MediaRecorder`

MediaStream 収録 API を実装する主要インターフェイス。

`MediaRecorderErrorEvent`

MediaStream 収録 API によって投げられたエラーを表すインターフェイス。 その `error` プロパティは、エラーが発生したことを示す `DOMException` です。

仕様書
---

| Specification |
| --- |
| MediaStream Recording  |

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

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

関連情報
----

* MediaStream 収録 API の使用
* メディア要素の収録
* simpl.info の MediaStream Recording のデモ、Sam Dutton 著（英語）
* `navigator.mediaDevices.getUserMedia()`
* Chrome および Firefox で動作中の HTML5 の Media Recorder API（英語）
* Safari および Edge 用の MediaRecorder ポリフィル（英語）
* TutorRoom: getUserMedia および MediaRecorder API を使用した HTML 動画のキャプチャ/再生/ダウンロード（GitHub のソース）（英語）
* 簡単な動画録画デモ
* 高度なメディアストリームレコーダーのサンプル（英語）
* OpenLang: MediaDevices と MediaStream 収録 API を動画の録画に使用する HTML5 動画言語ラボウェブアプリ（GitHub のソース）（英語）
* Safari 技術プレビュー 73 で MediaStream 収録 API が利用可能に（英語）


CSS 型付きオブジェクトモデル API - Web API

CSS 型付きオブジェクトモデル API
====================

CSS 型付きオブジェクトモデル API (CSS Typed Object Model API) は、 CSS の値を文字列ではなく、型付き JavaScript オブジェクトとして提供することにより、CSS のプロパティ操作を簡略化するものです。これは CSS の操作を単純化するだけでなく、 `HTMLElement.style` と比較して、パフォーマンスへの悪影響も軽減できます。

一般的に、 CSS の値は JavaScript で文字列として読み書きすることができますが、これは遅くて煩わしい場合があります。 CSS 型付きオブジェクトモデル API は、文字列の解析と連結に比べてより簡単に、より確実に操作と理解ができる特殊な JS オブジェクトで値を表現することにより、基礎となる値と対話するためのインターフェイスを提供します。これは開発者にとって扱いがより簡単です（例えば、数値が実際の JS の数値に反映され、そこに定義されている単位を考慮した数値演算ができます）。また、 CSS の文字列の構築と解析の両方を行うことなく、値を直接操作し、安価に元の値に戻すことができるため、一般に高速に処理することができます。

CSS 型付きオブジェクトモデルは、 CSS のプロパティに割り当てられた値を効率的に操作できるとともに、より理解しやすく書きやすい保守性の高いコードを実現します。

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

### `CSSStyleValue`

`CSSStyleValue` は CSS 型付きオブジェクトモデル API のインターフェイスで、型付きオブジェクトモデル API を通してアクセスできるすべての CSS 値の基底クラスとなるものです。このクラスのインスタンスは、文字列が期待される場所であればどこでも使用することができます。

`CSSStyleValue.parse(property, cssText)`

parse() は CSSStyleValue インターフェイスのメソッドで、 CSS 文字列から CSSNumericValue を構築することができます。これは、特定の CSS プロパティを指定された値に設定し、最初の値を CSSStyleValue オブジェクトとして返します。

`CSSStyleValue.parseAll()`

parseAll() は CSSStyleValue インターフェイスのメソッドで、特定の CSS プロパティを指定された値に設定し、CSSStyleValue オブジェクトの配列を返すもので、それぞれが指定された値の一つを含んでいます。

### `StylePropertyMap`

`StylePropertyMap` は CSS 型付きオブジェクトモデル API のインターフェイスで、 CSSStyleDeclaration の代替となる CSS 宣言ブロックの表現を提供します。

`StylePropertyMap.set()`

StylePropertyMap インターフェイスのメソッドで、指定されたプロパティを持つ CSS 宣言を指定された値に変更します。

`StylePropertyMap.append()`

指定されたプロパティと値による新しい CSS 宣言を、この StylePropertyMap に追加するメソッドです。

`StylePropertyMap.delete()`

指定されたプロパティを持つ CSS 宣言を、この StylePropertyMap から削除するメソッドです。

`StylePropertyMap.clear()`

StylePropertyMap からすべての宣言を削除するメソッドです。

### `CSSUnparsedValue`

`CSSUnparsedValue` は CSS 型付きオブジェクトモデル API のインターフェイスで、カスタムプロパティを参照するプロパティ値を表します。文字列の断片と変数の参照のリストから成ります。

`CSSUnparsedValue()` コンストラクター

カスタムプロパティを参照するプロパティ値を表す新しい CSSUnparsedValue オブジェクトを生成します。

`CSSUnparsedValue.entries()`

このオブジェクト自身の列挙可能なプロパティの [key, value] ペアの配列を for...in ループで提供されるのと同じ順序で返すメソッドです（for-in ループはプロトタイプチェーン内のプロパティも列挙する点が異なります）。

`CSSUnparsedValue.forEach()`

CSSUnparsedValue の各要素に対して、提供された関数を一回ずつ実行するメソッドです。

`CSSUnparsedValue.keys()`

配列のそれぞれのインデックスのキーを含む、新しい配列イテレーターオブジェクトを返すメソッドです。

### `CSSKeywordValue` シリアライズ

`CSSKeywordValue` は CSS 型付きオブジェクトモデル API のインターフェイスで、 CSS キーワードやその他の識別子を表現するためのオブジェクトを作成します。

`CSSKeywordValue()` コンストラクター

CSS キーワードなどの識別子を表す新しい `CSSKeywordValue()` オブジェクトを作成するコンストラクターです。

`CSSKeywordValue.value()`

CSSKeywordValue インターフェイスのプロパティで、CSSKeywordValue の値を返すか設定します。

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

CSSStyleValue は、すべての CSS 値が表現される基本クラスです。サブクラスは以下の通りです。

`CSSImageValue` オブジェクト

画像を取るプロパティ、例えば `background-image`, `list-style-image`, `border-image-source` の値を表すインターフェイスです。

`CSSKeywordValue`

CSS のキーワードやその他の識別子を表現するオブジェクトを生成する インターフェイスです。文字列が期待される場所で使用された場合、 CSSKeyword.value の値を返します。

`CSSMathValue` (en-US)

単一の値や単位よりも複雑な数値を表すサブクラスのツリーで、次のようなものがあります。

* `CSSMathInvert` (en-US) - CSS の `calc()` 値を `calc(1 / <value>)` のように使用したものを表現します。
* `CSSMathMax` (en-US) - CSS の `max()` 関数を表します。
* `CSSMathMin` (en-US) - CSS の `min()` 関数を表します。
* `CSSMathNegate` (en-US) - 渡された値を否定します。
* `CSSMathProduct` (en-US) - `CSSNumericValue` に対して `add()`, `sub()`, `toSum()` を実行した結果を表します。
* `CSSMathSum` (en-US) - `CSSNumericValue` に対して `add()`, `sub()`, `toSum()` を実行した結果を表します。

`CSSNumericValue`

すべての数値が実行可能な操作を表すインターフェイスです。

* `CSSNumericValue.add` - 与えられた数字を `CSSNumericValue` に加算します。
* `CSSNumericValue.sub` - 与えられた数値を `CSSNumericValue` から減算します。
* `CSSNumericValue.mul` - 与えられた数値を `CSSNumericValue` に乗算します。
* `CSSNumericValue.div` - 与えられた数値を他の数値で割り、0 の場合はエラーが発生します。
* `CSSNumericValue.min` - 渡された値の最小値を返します。
* `CSSNumericValue.max` - 渡された値の最大値を返します。
* `CSSNumericValue.equals` - すべての値がまったく同じ型と値で、同じ順序である場合には true を返します。そうでなければ、 false を返します。
* `CSSNumericValue.to` - `value` を指定された*単位*の別の値に変換する。
* `CSSNumericValue.toSum`
* `CSSNumericValue.type`
* `CSSNumericValue.parse` - CSS の文字列から解釈された数値を返します。

`CSSPositionValue` (en-US)

object-position など、位置を取るプロパティの値を表します。

`CSSTransformValue`

`transform` のリスト値を表すインターフェイスです。これらは 1 つ以上の `CSSTransformComponent` を含んでおり、個々の `transform` 関数値を表します。

`CSSUnitValue` (en-US)

単一の単位、または名前付き数値とパーセントで表現できる数値を表すインターフェイスです。

`CSSUnparsedValue`

カスタムプロパティを参照するプロパティ値を表します。文字列の断片と変数参照のリストで構成されます。

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # stylevalue-objects |
| CSS Typed OM Level 1 # the-stylepropertymap |
| CSS Typed OM Level 1 # cssunparsedvalue |
| CSS Typed OM Level 1 # keywordvalue-objects |

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

### api.CSSStyleValue

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

### api.StylePropertyMap

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

### api.CSSUnparsedValue

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

### api.CSSKeywordValue

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

関連情報
----

* CSS 描画 API
* CSS 型付きオブジェクトモデルの使用
* CSS Houdini


Worker - Web API

Worker
======

**`Worker`** はウェブワーカー API のインターフェイスで、スクリプトで生成することができるバックグラウンドタスクを表し、作成元にメッセージを送り返すことができます。

ワーカーは `Worker("path/to/worker/script")` コンストラクターを呼び出すことで生成されます。

ワーカーは同じ親ページの同一オリジン内でホストされている限り、他の新しいワーカーを生成することができます（メモ: 入れ子になったワーカーは WebKit では未実装です）。

利用可能なすべてのインターフェイスと関数がすべて `Worker` の中で利用できるとは限りません。ワーカーはネットワーク通信のために `XMLHttpRequest` を使うことができますが、 `responseXML` 属性と `channel` 属性は常に `null` になります。（`fetch` も利用可能であり、このような制限はありません。）

EventTarget

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

`Worker()`

指定された URL にあるスクリプトを実行する専用ウェブワーカーのインスタンスを生成します。また、 Blob URL を用いてワーカーを生成することもできます。

プロパティ
-----

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

メソッド
----

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

`Worker.postMessage()`

ワーカーの内部スコープに、あらゆる JavaScript オブジェクトの形式のメッセージも送ることができます。

`Worker.terminate()`

ワーカーを直ちに終了させます。ワーカーに終了処理を行わせず、直ちに終了させます。 `ServiceWorker` のインスタンスはこのメソッドを備えていません。

イベント
----

`error`

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

`message`

ワーカーの親が、そのワーカーからメッセージを受信したときに発行されます。

`messageerror`

`Worker` オブジェクトが シリアライズ解除できないというメッセージを受け取ったときに発行されます。

`rejectionhandled`

プロミス (`Promise`) が拒否されるたびに発行されます。拒否を処理するハンドラーがあるかどうかは問いません。

`unhandledrejection`

拒否を処理するハンドラーのないプロミス (`Promise`) が拒否されたときに発行されます。

例
-

次のコード例では、 `Worker` オブジェクトを、 `Worker()` コンストラクターを用いて生成しています。

```js
const myWorker = new Worker("/worker.js");
const first = document.querySelector("input#number1");
const second = document.querySelector("input#number2");

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

完全な例は、 Basic dedicated worker example (専用ワーカーを実行) を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # dedicated-workers-and-the-worker-interface |

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

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

ワーカーの種類に応じて対応状況が異なります。詳しくは、それぞれの種類のワーカーのページをご覧ください。

### オリジンをまたいだワーカーのエラーの動作

古いバージョンのブラウザーでは、オリジンをまたいでワーカーのスクリプトを読み込もうとすると、 `SecurityError` が発生していました。最近は、 `error` イベントが発行されるようになりました。

関連情報
----

* ウェブワーカーの使用
* ウェブワーカーで使用可能な関数一覧
* 他の種類のワーカー: `SharedWorker`、サービスワーカー
* `OffscreenCanvas` (en-US) インターフェイス


IDBIndex - Web API

IDBIndex
========

IndexedDB API の `IDBIndex` インターフェイスは、データベース内のインデックスへの非同期アクセスを提供します。インデックスはオブジェクトストアの一種で、参照先オブジェクトストアと呼ばれる別のオブジェクトストア内のレコードを検索するためのものです。データを取り出すためにこのインターフェイスを使用します。

オブジェクトストア内のレコードは、主キーを使用して取り出すことも、インデックスを使用して取り出すこともできます。インデックスにより、オブジェクトストア内のレコードに格納されている主キー以外の値の性質を用いてオブジェクトストアからレコードを検索できるようになります。

インデックスは永続的なキー-値ストレージで、そのレコードの値の部分は参照先オブジェクトストア内のレコードのキーの部分になります。参照先オブジェクトストアでレコードが挿入・更新・削除されると、そのたびにインデックス内でもレコードが自動で作成されます。あるインデックス内のレコードはそれぞれ参照先オブジェクトストア内のレコード 1 個だけを指すことができますが、複数のインデックスが同じオブジェクトストアを参照することができます。オブジェクトストアが変更されると、そのオブジェクトストアを参照する全てのインデックスが自動で更新されます。

ある範囲に含まれるキーの集合を得ることができます。詳しくは、`IDBKeyRange` を参照してください。

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

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

`IDBIndex.isAutoLocale` 読取専用
Non-standard

Experimental

インデックスの作成時に `locale` の値が `auto` に設定されたかを表す `boolean` 値を返します。(`createIndex()` の引数 `options` を参照してください)

`IDBIndex.locale` 読取専用
Non-standard

Experimental

作成時に `locale` の値が指定されていれば、インデックスのロケール (たとえば `en-US` や `pl`) を返します。(`createIndex()` の引数 `options` を参照してください)

`IDBIndex.name`

このインデックスの名前です。

`IDBIndex.objectStore` 読取専用

このインデックスが参照するオブジェクトストアの名前です。

`IDBIndex.keyPath` 読取専用

このインデックスのキーパスです。`null` である場合は、このインデックスは自動で作成されません。

`IDBIndex.multiEntry` 読取専用

インデックスのキーパスを評価した結果が配列になったとき、インデックスがどのようにふるまうかを変更します。`true` の場合は、インデックスにキーの配列内の各アイテムに対応するレコードをそれぞれ作成します。`false` の場合は、配列であるキーに対応するレコード 1 個を作成します。

`IDBIndex.unique` 読取専用

`true` の場合は、このインデックスはあるキーに対応する値の重複を許しません。

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

EventTarget から継承します。

`IDBIndex.count()`

`IDBRequest` オブジェクトを返し、別のスレッドでキーの範囲に含まれるレコードの数を返します。

`IDBIndex.get()`

`IDBRequest` オブジェクトを返し、別のスレッドで参照先オブジェクトストア内の指定されたキーに対応する値、もしくは `key` が `IDBKeyRange` のときは対応する最初の値を検索します。

`IDBIndex.getKey()`

`IDBRequest` オブジェクトを返し、指定されたキーに対応する主キー、もしくは `key` が `IDBKeyRange` のときは対応する最初の主キーを別のスレッドで検索します。

`IDBIndex.getAll()`

`IDBRequest` オブジェクトを返し、指定されたキー、もしくは `key` が `IDBKeyRange` の場合はキーの範囲に対応する参照先オブジェクトストア内の全ての値を別のスレッドで検索します。

`IDBIndex.getAllKeys()`

`IDBRequest` オブジェクトを返し、指定されたキー、もしくは `key` が `IDBKeyRange` の場合はキーの範囲に対応する参照先オブジェクトストア内の全てのキーを別のスレッドで検索します。

`IDBIndex.openCursor()`

`IDBRequest` オブジェクトを返し、指定されたキーの範囲を走査するためのカーソルを別のスレッドで作成します。

`IDBIndex.openKeyCursor()`

`IDBRequest` オブジェクトを返し、指定されたキーの範囲をこのインデックスの順番で走査するためのカーソルを別のスレッドで作成します。

例
-

以下の例では、トランザクションとオブジェクトストアを開き、シンプルな連絡先データベースからインデックス `lName` を取得します。そして、`IDBIndex.openCursor` を用いてそのインデックスで基本的なカーソルを開きます。これは、返されるレコードが主キーではなくこのインデックスによりソートされること以外、`IDBObjectStore.openCursor` を用いて `ObjectStore` で直接カーソルを開いたときと同じように動作します。

最後に、レコードを走査し、データを HTML テーブルに追加します。動く例全体は、IndexedDB-examples demo レポジトリを参照してください。(動く例を見る)

```js
function displayDataByIndex() {
  tableEntry.innerHTML = "";
  const transaction = db.transaction(["contactsList"], "readonly");
  const objectStore = transaction.objectStore("contactsList");

  const myIndex = objectStore.index("lName");
  myIndex.openCursor().onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const tableRow = document.createElement("tr");
      tableRow.innerHTML =
        `<td>${cursor.value.id}</td>` +
        `<td>${cursor.value.lName}</td>` +
        `<td>${cursor.value.fName}</td>` +
        `<td>${cursor.value.jTitle}</td>` +
        `<td>${cursor.value.company}</td>` +
        `<td>${cursor.value.eMail}</td>` +
        `<td>${cursor.value.phone}</td>` +
        `<td>${cursor.value.age}</td>`;
      tableEntry.appendChild(tableRow);

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

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # index-interface |

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

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

関連情報
----

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


PopStateEvent - Web API

PopStateEvent
=============

**`PopStateEvent`** は `popstate` イベントのインターフェイスです。

`popstate` イベントは、同じ文書内の 2 つの履歴項目の間でアクティブな履歴項目が変更されるたびにウィンドウに配信されます。アクティブになる履歴項目が `history.pushState()` の呼び出しによって作成されたものであるか、 `history.replaceState()` の呼び出しによって変更された場合、 `popstate` イベントの `state` プロパティには履歴項目の状態オブジェクトのコピーが格納されます。

Event

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

`PopStateEvent()`

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

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

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

`PopStateEvent.state` 読取専用

`pushState()` または `replaceState()` に指定された情報のコピーを返します。

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

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

仕様書
---

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

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

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

関連情報
----

* `popstate` イベント
* `hashchange` イベント


SpeechSynthesisErrorEvent - Web API

SpeechSynthesisErrorEvent
=========================

**`SpeechSynthesisErrorEvent`** はウェブ音声 API のインターフェイスで、発話サービスの `SpeechSynthesisUtterance` オブジェクトの処理中に発生したエラーに関する情報を保持します。

Event

SpeechSynthesisEvent

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

`SpeechSynthesisErrorEvent()`

新しい `SpeechSynthesisErrorEvent` イベントを生成します。

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

*`SpeechSynthesisErrorEvent` は `SpeechSynthesisEvent` インターフェイスから派生しており、親インターフェイスである `Event` からプロパティを継承しています。*

`SpeechSynthesisErrorEvent.error` 読取専用

音声合成に失敗したことを示すエラーコードを返します。

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

*`SpeechSynthesisErrorEvent` は `SpeechSynthesisEvent` インターフェイスから派生しており、親インターフェイスである `Event` からメソッドを継承しています。*

例
-

```js
const synth = window.speechSynthesis;

const inputForm = document.querySelector("form");
const inputTxt = document.querySelector("input");
const voiceSelect = document.querySelector("select");

const voices = synth.getVoices();

// ...

inputForm.onsubmit = (event) => {
  event.preventDefault();

  const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  const selectedOption =
    voiceSelect.selectedOptions[0].getAttribute("data-name");
  for (let i = 0; i < voices.length; i++) {
    if (voices[i].name === selectedOption) {
      utterThis.voice = voices[i];
    }
  }

  synth.speak(utterThis);

  utterThis.onerror = (event) => {
    console.log(
      `An error has occurred with the speech synthesis: ${event.error}`,
    );
  };

  inputTxt.blur();
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # speechsynthesiserrorevent |

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

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

関連情報
----

* ウェブ音声 API


DOMMatrixReadOnly - Web API

DOMMatrixReadOnly
=================

**`DOMMatrixReadOnly`** インターフェイスは、 2D および 3D 演算に適した読み取り専用の 4×4 行列を表します。 `DOMMatrix` インタフェースは、 `DOMMatrixReadOnly` をベースとして変更可能にしており、作成後に行列を変更することができます。

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

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

`DOMMatrixReadOnly()`

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

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

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

`is2D` 読取専用

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

`isIdentity` 読取専用

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

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

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

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

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

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

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

*このインターフェイスが継承しているメソッドはありません。以下のメソッドはいずれも元の行列を変更しません。*

`DOMMatrixReadOnly.flipX()`

入力行列を X 軸で反転して作成した、新しい `DOMMatrix` を返します。これは、行列に `DOMMatrix(-1, 0, 0, 1, 0, 0)` を乗算することと等価です。元の行列は変更されません。

`DOMMatrixReadOnly.flipY()`

元の行列を Y 軸で反転して作成した、新しい `DOMMatrix` を返します。これは、行列に `DOMMatrix(1, 0, 0, -1, 0, 0)` を乗算することと等価です。元の行列は変更されません、

`DOMMatrixReadOnly.inverse()`

元の行列を反転して作成された新しい `DOMMatrix` を返します。行列を反転できない場合、新しい行列の成分はすべて `NaN` に設定され、 `is2D` プロパティは `false` に設定されます。元の行列は変更されません。

`DOMMatrixReadOnly.multiply()`

指定した行列と入力行列の内積を計算して作成した、新しい `DOMMatrix` を返します。`A・B`。乗数として行列が指定されなかった場合、行列は右下隅とそのすぐ上と左にある要素 `m33` と `m34` を除くすべての要素が `0` である行列と乗算されます。これらは既定値では `1` です。元の行列は変更されません。

`DOMMatrixReadOnly.rotateAxisAngle()`

指定されたベクトルを中心に、指定された角度だけ元の行列を回転させて作成した新しい `DOMMatrix` を返します。元の行列は変更されません。

`DOMMatrixReadOnly.rotate()`

元の行列を、指定した度数だけ回転させて作成した新しい `DOMMatrix` を返します。元の行列は変更されません。

`DOMMatrixReadOnly.rotateFromVector()`

指定したベクトルと `(1, 0)` とのなす角度だけ回転させた新しい `DOMMatrix` を返します。元の行列は変更されません。

`DOMMatrixReadOnly.scale()`

指定された原点を中心として、各軸で指定された量だけ拡大縮小して作成された新しい `DOMMatrix` を返します。既定では、X 軸と Z 軸は `1` 倍に縮小され、Y 軸には既定値がありません。既定の原点は `(0, 0, 0)`` です。元の行列は変更されません。

`DOMMatrixReadOnly.scale3d()`

指定された原点を中心として、元の 3D 行列をすべて指定された係数で拡大縮小して作成された新しい `DOMMatrix` を返します。既定値は `(0, 0, 0)`` です。元の行列は変更されません。

`DOMMatrixReadOnly.scaleNonUniform()`
非推奨

指定された原点を中心とした X, Y, Z 軸に、指定しただけ拡大縮小して作成した新しい `DOMMatrix` を返します。既定では、 Y 軸と Z 軸のスケール係数はどちらも `1` ですが、 X 軸のスケール係数を指定する必要があります。既定値は `(0, 0, 0)` です。元の行列は変更されません。

`DOMMatrixReadOnly.skewX()`

入力行列に対して、指定した歪み変換を X 軸方向に適用して作成した、新しい `DOMMatrix` を返します。元の行列は変更されません。

`DOMMatrixReadOnly.skewY()`

入力行列に対して、指定した歪み変換を Y 軸方向に適用して作成した、新しい `DOMMatrix` を返します。元の行列は変更されません。

`DOMMatrixReadOnly.toFloat32Array()`

行列を構成する 16 個の要素（`m11`, `m12`, `m13`, `m14`, `m21`, `m22`, `m23`, `m24`, `m31`, `m32`, `m33`, `m34`, `m41`, `m42`, `m43`, `m44`）をすべて格納した新しい `Float32Array` を返します。各要素は単精度浮動小数点数で配列に格納され、列優先順 (colexographical access、"colex") で格納されます。（言い換えると、最初の列を上から下へ、次の列を下から上へという順です。）

`DOMMatrixReadOnly.toFloat64Array()`

行列を構成する 16 個の要素（`m11`, `m12`, `m13`, `m14`, `m21`, `m22`, `m23`, `m24`, `m31`, `m32`, `m33`, `m34`, `m41`, `m42`, `m43`, `m44`）をすべて格納した新しい `Float32Array` を返します。各要素は倍精度浮動小数点数で配列に格納され、列優先順 (colexographical access、"colex") で格納されます。（言い換えると、最初の列を上から下へ、次の列を下から上へという順です。）

`DOMMatrixReadOnly.toJSON()`

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

`DOMMatrixReadOnly.toString()`

適切な CSS 行列記法を使用して、CSS 行列構文による行列の文字列表現を格納した文字列オブジェクトを作成し、返します。この構文の詳細については、 CSS の `matrix()` 関数を参照してください。

2D 行列の場合、要素 `a` から `f` までの合計 6 つの値が掲載されて、 `matrix(a, b, c, d, e, f)` という形式を取ります。

3D 行列の場合、返される文字列は 16 個の要素をすべて含み、 `matrix3d(m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44)` という形式を取ります。 3D 記法の構文の詳細については、CSS の `matrix3d()` 関数を参照してください。

行列の要素のいずれかが有限ではない場合（2D 行列の場合、その有限ではない値が 2D 行列表現で使用されない要素に含まれる場合であっても）、 `InvalidStateError` 例外が発生します。

`DOMMatrixReadOnly.transformPoint()`

行列を使用して指定した点を変換し、変換後の点を格納した新しい `DOMPoint` オブジェクトを返します。行列も元の点も変更されません。

`DOMMatrixReadOnly.translate()`

指定したベクトルを用いて変換元の行列に対応させた行列を格納した、新しい `DOMMatrix` を返します。既定値では、このベクトルは `(0, 0, 0)` です。元の行列は変更されません。

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

`fromFloat32Array()`

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

`fromFloat64Array()`

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

`fromMatrix()`

既存の行列、あるいはそのプロパティの値を提供する `DOMMatrixInit` 辞書が指定された場合、新しい変更可能な `DOMMatrix` オブジェクトを作成します。行列が指定されなかった場合、行列は右下隅とそのすぐ上と左にある要素 `m33` と `m34` を除くすべての要素を `0` に設定した状態で初期化されます。これらは既定値で `1` が保有されます。

仕様書
---

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

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

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

関連情報
----

* これをベースとした変更可能な行列型である `DOMMatrix`
* このインターフェイスから CSS の `matrix()` および `matrix3d()` 関数記法を生成し、 CSS の `transform` で使用することができます。


CSSNumericValue - Web API

CSSNumericValue
===============

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

**`CSSNumericValue`** は CSS 型付きオブジェクトモデル APIのインターフェイスで、すべての数値型が実行することができる操作を表します。

CSSStyleValue

CSSNumericValueCSSNumericValue ベースのインターフェイス
----------------------------

以下は、 CSSNumericValue インターフェイスをベースとするインターフェイスの一覧です。

* `CSSMathClamp`
* `CSSMathInvert` (en-US)
* `CSSMathMax` (en-US)
* `CSSMathMin` (en-US)
* `CSSMathNegate` (en-US)
* `CSSMathProduct` (en-US)
* `CSSMathSum` (en-US)
* `CSSMathValue` (en-US)
* `CSSNumericArray` (en-US)
* `CSSUnitValue` (en-US)
プロパティ
-----

なし。

メソッド
----

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

`CSSNumericValue.add`

提供された数値を `CSSNumericValue` へ加算します。

`CSSNumericValue.sub`

提供された数値を `CSSNumericValue` から減算します。

`CSSNumericValue.mul`

`CSSNumericValue` に提供された数値を乗算します。

`CSSNumericValue.div`

`CSSNumericValue` を提供された数値で除算します。

`CSSNumericValue.min`

渡された最小値を返します。

`CSSNumericValue.max`

渡された最大値を返します。

`CSSNumericValue.equals`

すべての値がまったく同じ型と値で、同じ順序であれば *true* です。そうでなければ、*false* です。

`CSSNumericValue.to`

`value` を指定された単位に変換します。

`CSSNumericValue.toSum`

既存の `CSSNumericValue` を指定された単位の値の `CSSMathSum` (en-US) オブジェクトへ変換します。

`CSSNumericValue.type`

`CSSNumericValue` の型を、 `angle`, `flex`, `frequency`, `length`, `resolution`, `percent`, `percentHint`, `time` の何れかから返します。

### 静的メソッド

`CSSNumericValue.parse`

`CSSNumericValue` を CSS の文字列から直接構築します。

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # numeric-value |

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

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

関連情報
----

* `CSSImageValue`
* `CSSKeywordValue`
* `CSSPositionValue` (en-US)
* `CSSTransformValue`
* `CSSUnparsedValue`


MediaDeviceInfo - Web API

MediaDeviceInfo
===============

**`MediaDeviceInfo`** インターフェイスは、単一のメディア入力または出力機器を示す情報を持ちます。

`navigator.mediaDevices.enumerateDevices()` の呼び出しによって取得できる機器の一覧は、`MediaDeviceInfo` オブジェクトの配列であり、1 つのメディア機器が 1 つに対応します。

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

`MediaDeviceInfo.deviceId` 読取専用

文字列で、セッションをまたいで維持される機器を表す識別子を返します。他のアプリケーションからは推測できず、呼び出されたアプリケーションのオリジンで固有のものです。ユーザーがクッキーを消去するとリセットされます（プライベートブラウジングの場合は、セッションをまたいで維持されない異なる識別子を使用します）。

`MediaDeviceInfo.groupId` 読取専用

文字列で、グループ識別子を返します。2 つの機器が同一のグループ識別子を持つ場合、それらの機器は同一の物理機器に属していることになります。例えば、モニターに内蔵カメラとマイクが付いている場合などです。

`MediaDeviceInfo.kind` 読取専用

`"videoinput"`、`"audioinput"`、`"audiooutput"` の何れかの列挙値を返します。

`MediaDeviceInfo.label` 読取専用

この機器を記述する文字列を返します（例えば "External USB Webcam"）。

**メモ:** セキュリティのため、`label` フィールドはアクティブなメディアストリームが存在するか、メディア機器への継続的な権限をユーザーが付与しない限り、常に空欄になります。機器ラベルの組み合わせによって、ユーザーを識別するためのフィンガープリントの一部として利用することができてしまいます。

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

`MediaDeviceInfo.toJSON()`

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

例
-

ここでは、機器の一覧を取得するために `enumerateDevices()` を使用しています。

```js
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
  console.log("enumerateDevices() not supported.");
} else {
  // カメラとマイクを一覧にする。
  navigator.mediaDevices
    .enumerateDevices()
    .then((devices) => {
      devices.forEach((device) => {
        console.log(`${device.kind}: ${device.label} id = ${device.deviceId}`);
      });
    })
    .catch((err) => {
      console.log(`${err.name}: ${err.message}`);
    });
}
```

コンソールには次のように表示されるでしょう。

```bash
videoinput: id = csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
audioinput: id = RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
audioinput: id = r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
```

もしくは、1 つ以上のメディアストリームが有効の場合や、継続的な許可が与えられている場合は、次のように表示されるでしょう。

```bash
videoinput: FaceTime HD Camera (Built-in) id=csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
audioinput: default (Built-in Microphone) id=RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
audioinput: Built-in Microphone id=r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
```

仕様
--

| Specification |
| --- |
| Media Capture and Streams # device-info |

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

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

関連項目
----

* WebRTC API
* `navigator.mediaDevices.enumerateDevices()`
* `navigator.mediaDevices.getUserMedia()`


Console API - Web API

Console API
===========

Console API（コンソール API）には、開発者がデバッグ作業（メッセージ、コード内の設定点での変数の値、操作の完了にかかった時間などの記録）を実行できるようにする機能が用意されています。

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

Console API は、一貫性のない方法ではありますが、さまざまなブラウザーで実装されている、大部分が独自の API として始まりました。 Console API 仕様は、一貫した振る舞いを定義するために作成されました。 すべての最新のブラウザーは、最終的にこの振る舞いの実装に落ち着きましたが、一部の実装には独自の機能がまだ追加されています。 これらについては、次をご覧ください。

* Google Chrome の開発ツールの実装
* Safari の開発ツールの実装

使用方法は非常に簡単です — `console` オブジェクト — `window.console` またはワーカーの `WorkerGlobalScope.console` を介して利用できます。 `console` のみを使用してアクセスできます — 基本的なデバッグ作業を実行するために呼び出すことができる多くのメソッドが含まれています。 通常は、ブラウザーのウェブコンソールにさまざまな値を記録することに焦点を当てています。

最も一般的に使用されるメソッドは `console.log` で、特定の変数に含まれる現在の値を記録するために使用します。

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

`console`

記録、スタックトレース、タイマー、カウンターなどの基本的なデバッグ機能を提供します。

例
-

```js
let myString = "Hello world";

// "Hello world" をコンソールに出力
console.log(myString);
```

その他の例については、`console` のリファレンスページを参照してください。

仕様
--

| Specification |
| --- |
| Console Standard # console-namespace |

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

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

関連情報
----

* 開発ツール
* ウェブコンソール — Firefox のウェブコンソールが Console API の呼び出しを処理する方法
* リモートデバッグ — デバッグ対象がモバイルデバイスである場合のコンソール出力の表示方法


MouseEvent - Web API

MouseEvent
==========

**`MouseEvent`** インターフェイスは、ポインティングデバイス (マウスなど) によるユーザーの操作によって発行されたイベントを表します。
 このインターフェイスを使用する一般的なイベントとして `click`, `dblclick`, `mouseup`, `mousedown` があります。

`MouseEvent` は `UIEvent` から派生しており、これはさらに `Event` から派生しています。後方互換性のために `MouseEvent.initMouseEvent()` メソッドは維持されていますが、 `MouseEvent` オブジェクトを作成する際は `MouseEvent()` コンストラクターを使用するべきです。

`MouseEvent` からは、 `WheelEvent`、`DragEvent`、`PointerEvent` などの特定用途向けイベントが派生しています。

Event

UIEvent

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

`MouseEvent()`

`MouseEvent` オブジェクトを生成します。

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

`MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN`
Non-standard
 読取専用

通常のクリックに必要な最小圧力。

`MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN`
Non-standard
 読取専用

強めのクリック (force click) に必要な最小圧力。

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

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

`MouseEvent.altKey` 読取専用

マウスイベントが発行されたときに `alt` キーが押下されていれば `true` を返します。

`MouseEvent.button` 読取専用

マウスイベントが発行されたときに押下されたボタンの番号 (もしあれば) です。

`MouseEvent.buttons` 読取専用

マウスイベントが発行されたときに離されていたボタンの番号 (もしあれば) です。

`MouseEvent.clientX` 読取専用

ローカル (DOM コンテンツ) 座標における、マウスポインターの X 座標です。

`MouseEvent.clientY` 読取専用

ローカル (DOM コンテンツ) 座標における、マウスポインターの Y 座標です。

`MouseEvent.ctrlKey` 読取専用

マウスイベントが発行されたときに `control` キーが押下されていれば、 `true` を返します。

`MouseEvent.layerX`
Non-standard
 読取専用

現在のレイヤーを基準としたイベントの水平座標を返します。

`MouseEvent.layerY`
Non-standard
 読取専用

現在のレイヤーを基準としたイベントの垂直座標を返します。

`MouseEvent.metaKey` 読取専用

マウスイベントが発行されたときに `meta` キーが押下されていれば、 `true` を返します。

`MouseEvent.movementX` 読取専用

直前の `mousemove` イベントの位置から相対的な、マウスポインターの X 座標です。

`MouseEvent.movementY` 読取専用

直前の `mousemove` イベントの位置から相対的な、マウスポインターの Y 座標です。

`MouseEvent.offsetX` 読取専用

対象ノードのパディング辺の位置に対して相対的なマウスポインターの X 座標です。

`MouseEvent.offsetY` 読取専用

対象ノードのパディング辺の位置に対して相対的なマウスポインターの Y 座標です。

`MouseEvent.pageX` 読取専用

文書全体に対して相対的な、マウスポインターの X 座標です。

`MouseEvent.pageY` 読取専用

文書全体に対して相対的な、マウスポインターの Y 座標です。

`MouseEvent.relatedTarget` 読取専用

イベントのセカンダリターゲットがあれば、それを表します。

`MouseEvent.screenX` 読取専用

グローバル (スクリーン) 座標における、マウスポインターの X 座標。

`MouseEvent.screenY` 読取専用

グローバル (スクリーン) 座標における、マウスポインターの Y 座標。

`MouseEvent.shiftKey` 読取専用

マウスイベントが発行されたときに `shift` キーが押下されていれば、`true` を返します。

`MouseEvent.mozInputSource`
Non-standard
 読取専用

 イベントを生成した機器の種類 (`MOZ_SOURCE_*` 定数のいずれか)。
 これにより、例えばマウスイベントが実際のマウスによって発行されたのか、あるいはタッチイベントによって発行されたのかを識別できます (これは、イベントに関連する座標を解釈する際の正確さに影響を与えるでしょう)。

`MouseEvent.webkitForce`
Non-standard
 読取専用

クリック時に与えられた圧力。

`MouseEvent.x` 読取専用

`MouseEvent.clientX` の別名。

`MouseEvent.y` 読取専用

`MouseEvent.clientY` の別名。

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

*このインターフェイスは、親インターフェイスである `UIEvent` および `Event` のメソッドも継承しています。*

`MouseEvent.getModifierState()`

指定した修飾キーの現在の状態を返します。詳しくは `KeyboardEvent.getModifierState`() をご覧ください。

`MouseEvent.initMouseEvent()`
非推奨

作成した `MouseEvent` の値を初期化します。イベントがすでに発行されている場合は、何も行いません。

例
-

 この例では、 DOM メソッドを使ってチェックボックスのクリック（プログラムによるクリックイベントの生成）をシミュレートしています。
 イベントの状態（キャンセルされたかどうか）は、メソッド `EventTarget.dispatchEvent()` の返値で判断されます。

### HTML

```html
<p>
  <label><input type="checkbox" id="checkbox" /> チェック</label>
</p>
<p>
  <button id="button">
    クリックすると MouseEvent をチェックボックスに送信します
  </button>
</p>
```

### JavaScript

```js
function simulateClick() {
  // クリックイベントを送るために要素を取得
  const cb = document.getElementById("checkbox");

  // クリックイベントの MouseEvent を合成
  let evt = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window,
  });

  // イベントをチェックボックス要素に送信
  cb.dispatchEvent(evt);
}
document.getElementById("button").addEventListener("click", simulateClick);
```

### 結果

仕様書
---

| Specification |
| --- |
| UI Events # interface-mouseevent |
| CSSOM View Module # extensions-to-the-mouseevent-interface |
| Pointer Lock 2.0 # extensions-to-the-mouseevent-interface |

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

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

関連情報
----

* 直近の親である `UIEvent`
* `PointerEvent`: マルチタッチを含む拡張されたポインターイベント


HTMLTextAreaElement - Web API

HTMLTextAreaElement
===================

**`HTMLTextAreaElement`** インターフェイスは、 `<textarea>` 要素のレイアウトや表示を操作するための特別なプロパティやメソッドを提供します。

EventTarget

Node

Element

HTMLElement

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

|  |  |
| --- | --- |
| `accessKey` | `*文字列*:` この要素の
 `accesskey` 属性を取得／設定します。
  |
| `autocapitalize`
Experimental
 | `*文字列*:` この要素がユーザーの入力を大文字化する動作を取得／設定します。有効な値は、 `none`, `off`, `characters`, `words`, `sentences` です。 |
| `autocomplete`
Experimental
 |  |
| `autofocus` | `*論理値*:` この要素の
 `autofocus` 属性を取得／設定します。これはページ読み込み時にこのコントロールにフォーカスを当てるか否かを示します。
  |
| `cols` | `*unsigned long*:` この要素の
 `cols` 属性を取得／設定します。このテキストエリアの表示上の幅を示します。
  |
| `defaultValue` | `*文字列*:` このコントロールの既定値を取得／設定します。 `Node.textContent` プロパティと同様に動作します。 |
| `disabled` | `*論理値*:` この要素の
 `disabled` 属性を取得／設定します。このコントロールを操作不可にするかどうかを示します。
  |
| `form` 読取専用  | `*オブジェクト*:` 親フォーム要素への参照を返します。この要素がフォーム要素配下にない場合、任意の `<form>` 要素の `id` 属性もしくは `null` 値になります。 |
| `inputMode`
Experimental
 |  |
| `maxLength` | `*long*:` この要素の
 `maxlength` 属性を取得／設定します。これはユーザーが入力できる最大文字数を示します。この制約は値が変更されたときのみ評価されます。
  |
| `minLength` | `*long*:` この要素の
 `minlength` 属性を取得／設定します。これはユーザーが入力できる最小文字数を表示します。この制約は値が変更されたときのみ評価されます。
  |
| `name` | `*文字列*:` この要素の
 `name` 属性を取得／設定します。このコントロールの名前が入ります。
  |
| `placeholder` | `*文字列*:` この要素の `placeholder` 属性を取得／設定します。これは利用者がこのコントロールに入力するに当たっての助言が入ります。 |
| `readOnly` | `*論理値*:` この要素の `readonly` 属性を取得／設定します。ユーザーがこのコントロールの値を変更できないことを示します。 |
| `required` | `*論理値*:` この要素の `required` 属性を取得／設定します。これはユーザーがフォームを送信する前に値を指定しなければならないことを示します。 |
| `rows` | `*unsigned long*:` この要素の `rows` 属性を取得／設定します。このコントロールに表示できるテキストの行数を示します。 |
| `selectionDirection` | `*文字列*:` 選択が行われた方向を取得／設定します。これは選択が現在のロケールで先頭から末尾の方向に行われた場合は "`forward`"、逆方向ならば "`backward`" です。方向が不明であれば "`none`" になることもあります。 |
| `selectionEnd` | `*unsigned long*:` 選択中のテキストの終了位置を取得／設定します。テキストが選択されていない場合は、入力カーソルの次の文字の位置が入ります。値を設定すると、コントロールは `setSelectionRange()` がこの値を第 2 引数として、 `selectionStart` を第 1 引数として呼び出されたかのように動作します。 |
| `selectionStart` | `*unsigned long*:` 選択中のテキストの開始位置を取得／設定します。テキストが選択されていない場合は、入力カーソルの次の文字の位置が入ります。値を設定すると、コントロールは `setSelectionRange()` がこの値を第1引数として、 `selectionEnd` を第 2 引数として呼び出されたかのように動作します。 |
| `tabIndex` | `*long*:` 現在の文書でタブキーを用いた移動順の中での要素の位置を取得／設定します。 |
| `textLength` 読取専用  | `*long*:` このコントロールの `value` のコードポイント長を返します。 `value.length` 値を読むのと同じです。 |
| `type` 読取専用  | `*文字列*:` `textarea` という文字列を返します。 |
| `validationMessage` 読取専用  | `*文字列*:` コントロールが満たさない検証制約（ある場合）を記述したローカライズされたメッセージを返します。
 コントロールが制約検証の候補でない（`willValidate` が `false` の）場合、または制約を満たしている場合、これは空の文字列となります。
  |
| `validity` 読取専用  | `*`ValidityState` オブジェクト*:` この要素の検証の状態を返します。 |
| `value` | `*文字列*:` このコントロール内の生の値を取得／設定します。 |
| `willValidate` 読取専用  | `*論理値*:` この要素が制約検証の対象となるかどうかを返します。何か制約検証を妨げる条件があれば `false` となります。これには `readOnly` や `disabled` プロパティの値が `true` である場合も含みます。 |
| `wrap` | `*文字列*:` HTML の `wrap` 属性を取得／設定します。このコントロールでのテキストの折り返し方法を示します。 |
| `HTMLTextAreaElement.labels` 読取専用  | `NodeList`: この要素に関連付けられたラベル要素のリストを返します。 |

`tabIndex` と `accessKey` の 2 つのプロパティは、 HTML5 では `HTMLElement` から継承していますが、 DOM Level 2 HTML および早期の仕様書では `HTMLTextAreaElement` で定義されていました。

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

|  |  |
| --- | --- |
| `blur()` | コントロールからフォーカスを外します。以降のキー入力はどこへも行きません。 |
| `focus()` | コントロールにフォーカスを与えます。以降のキー入力はこの要素に入ります。 |
| `select()` | コントロールの内容を選択します。 |
| `setRangeText()` | 要素のテキストのある範囲を新しいテキストで置き換えます。 |
| `setSelectionRange()` | 要素のテキストのある範囲を選択します (ただし、フォーカスを与えません)。 |
| `checkValidity()` | この要素が制約検証の対象であり、制約を満たしていない場合は `false` を返します。この場合、キャンセル可能な `invalid` イベントもコントロール上に発生します。このコントロールが制約検証の対象でない場合や、制約を満たしている場合は `true` を返します。 |
| `reportValidity()` | このメソッドは要素上の制約の問題がもしあれば、ユーザーに報告します。問題があれば、キャンセル可能な `invalid` イベントを発生させ、 `false` を返します。問題がなければ、 `true` を返します。 |
| `setCustomValidity(DOMstring)` | 要素に独自の検証メッセージを設定します。このメッセージが空文字列でない場合は、要素は独自の検証エラーに陥っており、検証が成功しません。 |

`blur()` と `focus()` の 2 つのメソッドは、`HTMLElement` から継承しています。

イベント
----

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

`input` イベント

`<input>`, `<select>`, `<textarea>` の各要素の `value` が変化したときに発生します。

`selectionchange` イベント
Experimental

`<textarea>` 要素のテキスト選択範囲が変更されたときに発行されます。

例
-

### 自動拡張するテキストエリアの例

入力していくとテキストエリアが自動拡張するようにします。

#### JavaScript

```js
function autoGrow(oField) {
  if (oField.scrollHeight > oField.clientHeight) {
    oField.style.height = `${oField.scrollHeight}px`;
  }
}
```

#### CSS

```css
textarea.noscrollbars {
  overflow: hidden;
  width: 300px;
  height: 100px;
}
```

#### HTML

```html
<form>
  <fieldset>
    <legend>Your comments</legend>
    <p><textarea class="noscrollbars" onkeyup="autoGrow(this);"></textarea></p>
    <p><input type="submit" value="Send" /></p>
  </fieldset>
</form>
```

### HTML タグを挿入する例

いくつかの HTML タグや、*顔文字*や、カスタムテキストをテキストエリアに挿入します。

#### JavaScript

```js
function insert(startTag, endTag) {
  const textArea = document.myForm.myTxtArea;
  const selectionStart = textArea.selectionStart;
  const selectionEnd = textArea.selectionEnd;
  const oldText = textArea.value;

  const prefix = oldText.substring(0, selectionStart);
  const inserted =
    startTag + oldText.substring(selectionStart, selectionEnd) + endTag;
  const suffix = oldText.substring(selectionEnd);
  textArea.value = `${prefix}${inserted}${suffix}`;

  const newSelectionStart = selectionStart + startTag.length;
  const newSelectionEnd = selectionEnd + startTag.length;
  textArea.setSelectionRange(newSelectionStart, newSelectionEnd);

  textArea.focus();
}

function insertURL() {
  const newURL = prompt("Enter the full URL for the link");
  if (newURL) {
    insert(`<a href="${newURL}">`, "</a>");
  } else {
    document.myForm.myTxtArea.focus();
  }
}

const strong = document.querySelector("#format-strong");
const em = document.querySelector("#format-em");
const link = document.querySelector("#format-link");
const code = document.querySelector("#format-code");

strong.addEventListener("click", (e) => insert("<strong>", "</strong>"));
em.addEventListener("click", (e) => insert("<em>", "</em>"));
link.addEventListener("click", (e) => insertURL());
code.addEventListener("click", (e) => insert("\n<code>\n", "\n</code>\n"));
```

#### CSS

内部の span をリンクのように動作させるよう装飾する CSS です。

```css
.intLink {
  cursor: pointer;
  text-decoration: underline;
  color: #0000ff;
}
```

HTML:

```html
<form name="myForm">
  <p>
    [
    <span class="intLink" id="format-strong"><strong>Bold</strong></span> |
    <span class="intLink" id="format-em"><em>Italic</em></span> |
    <span class="intLink" id="format-link">URL</span> |
    <span class="intLink" id="format-code">code</span>  ]
  </p>

  <p>
    <textarea name="myTxtArea" rows="10" cols="50">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis, arcu vitae adipiscing placerat, nisl lectus accumsan nisi, vitae iaculis sem neque vel lectus. Praesent tristique commodo lorem quis fringilla. Sed ac tellus eros. Sed consectetur eleifend felis vitae luctus. Praesent sagittis, est eget bibendum tincidunt, ligula diam tincidunt augue, a fermentum odio velit eget mi. Phasellus mattis, elit id fringilla semper, orci magna cursus ligula, non venenatis lacus augue sit amet dui. Pellentesque lacinia odio id nisi pulvinar commodo tempus at odio. Ut consectetur eros porttitor nunc mollis ultrices. Aenean porttitor, purus sollicitudin viverra auctor, neque erat blandit sapien, sit amet tincidunt massa mi ac nibh. Proin nibh sem, bibendum ut placerat nec, cursus et lacus. Phasellus vel augue turpis. Nunc eu mauris eu leo blandit mollis interdum eget lorem.
    </textarea>
  </p>
</form>
```

### 長さと行数の制限の例

1 行あたりの最大文字数と最大行数のあるテキストエリアを作成します。

最初に、テキストフィールドと入力時のキーイベントを取り、何れかの制限に達したかどうかを判断する関数を作成します。判断に達していなければ、そのキーを返します。

```js
function checkRows(oField, oKeyEvent) {
  let nKey = (
      oKeyEvent ||
      /\* old IE \*/ window.event || /\* check is not supported! \*/ { keyCode: 38 }
    ).keyCode,
    // 行の最大文字数をここに入力
    nCols = 30,
    // 最大行数をここに入力
    nRows = 5,
    nSelS = oField.selectionStart,
    nSelE = oField.selectionEnd,
    sVal = oField.value,
    nLen = sVal.length,
    nBackward = nSelS >= nCols ? nSelS - nCols : 0,
    nDeltaForw =
      sVal
        .substring(nBackward, nSelS)
        .search(new RegExp(`\\n(?!.{0,${String(nCols - 2)}}\\n)`)) + 1,
    nRowStart = nBackward + nDeltaForw,
    aReturns = (
      sVal.substring(0, nSelS) + sVal.substring(nSelE, sVal.length)
    ).match(/\n/g),
    nRowEnd = nSelE + nRowStart + nCols - nSelS,
    sRow =
      sVal.substring(nRowStart, nSelS) +
      sVal.substring(nSelE, nRowEnd > nLen ? nLen : nRowEnd),
    bKeepCols =
      nKey === 13 ||
      nLen + 1 < nCols ||
      /\n/.test(sRow) ||
      ((nRowStart === 0 || nDeltaForw > 0 || nKey > 0) &&
        (sRow.length < nCols ||
          (nKey > 0 && (nLen === nRowEnd || sVal.charAt(nRowEnd) === "\n"))));

  return (
    (nKey !== 13 || (aReturns ? aReturns.length + 1 : 1) < nRows) &&
    ((nKey > 32 && nKey < 41) || bKeepCols)
  );
}
```

HTML では、この関数を `onkeypress` イベントでフックし、テキストエリアが貼り付けを受け付けないように設定します。

```html
<form>
  <p>
    Textarea with fixed number of characters per line:<br />
    <textarea
 cols="50"
 rows="10"
 onkeypress="return checkRows(this, event);"
 onpaste="return false;"></textarea>
  </p>
</form>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # htmltextareaelement |

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

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


HmacKeyGenParams - Web API

HmacKeyGenParams
================

Web Crypto API の辞書 **`HmacKeyGenParams`** は、HMAC アルゴリズム用の鍵を生成する際に `SubtleCrypto.generateKey()` の引数 `algorithm` として渡すべきオブジェクトを表します。

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

`name`

文字列。`HMAC` に設定するべきです。

`hash`

使用するダイジェスト関数の名前を表す文字列。`SHA-1`, `SHA-256`, `SHA-384`, `SHA-512` のいずれかを指定できます。

`length` 省略可

`Number`。鍵の長さ (ビット数) を表します。省略された場合、鍵の長さは選択したハッシュ関数のブロックサイズと等しくなります。異なる長さを用いるいい理由が無い限り、このプロパティは省略してデフォルトの値を用いてください。

例
-

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

仕様書
---

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

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

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

関連情報
----

* `SubtleCrypto.generateKey()`


Response - Web API

Response
========

**`Response`** はフェッチ API のインターフェイスで、リクエストのレスポンスを表します。

`Response` オブジェクトは `Response()` コンストラクターを用いて生成することができますが、他の API 操作の結果として返される `Response` オブジェクトに出会う可能性が高いでしょう。例えば、サービスワーカーの `FetchEvent.respondWith` や、単純な `fetch()` などです。

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

`Response()`

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

プロパティ
-----

`Response.body` 読取専用

本文のコンテンツの `ReadableStream` です。

`Response.bodyUsed` 読取専用

本文がレスポンスで使用されたかどうかを定義する論理値が格納されます。

`Response.headers` 読取専用

レスポンスに関連した `Headers` オブジェクトが入ります。

`Response.ok` 読取専用

レスポンスが成功 (`200`–`299` の範囲のステータス) したか否かを通知する論理値が入ります。

`Response.redirected` 読取専用

レスポンスがリダイレクトの結果である (つまり、その URL リストには複数のエントリーがある) かどうかを示します。

`Response.status` 読取専用

このレスポンスのステータスコードを返します (成功ならば `200` になります)。

`Response.statusText` 読取専用

ステータスコードに対応したステータスメッセージが入ります (たとえば `200` ならば `OK`)。

`Response.trailers`

`Promise` であり、 `Headers` オブジェクトを返します。これは `Response.headers` にある HTTP の `Trailer` (en-US) ヘッダーの値です。

`Response.type` 読取専用

レスポンスの種類です。 (例えば `basic`, `cors`)

`Response.url` 読取専用

レスポンスの URL を返します。

メソッド
----

`Response.arrayBuffer()`

レスポンスの本体を表す `ArrayBuffer` で解決するプロミスを返します。

`Response.blob()`

レスポンスの本体を表す `Blob` で解決するプロミスを返します。

`Response.clone()`

`Response` オブジェクトの複製を生成します。

`Response.error()`

ネットワークエラーに関連した新しい `Response` オブジェクトを返します。

`Response.formData()`

レスポンスの本体を表す `FormData` で解決するプロミスを返します。

`Response.json()`

レスポンスの本体のテキストを `JSON` として解釈した結果で解決するプロミスを返します。

`Response.redirect()`

異なる URL で新しいレスポンスを生成します。

`Response.text()`

レスポンスの本体のテキスト表現で解決するプロミスを返します。

例
-

### 画像のフェッチ

basic fetch example (例をライブで実行) では画像を取得するために単純な `fetch()` を使用し、それを `<img>` タグの中に入れて表示しています。`fetch()` を呼び出すとプロミスを返します。これは、このリソースフェッチ操作に関連付けられた `Response` オブジェクトで解決します。

画像をリクエストされているので、レスポンスに正しい MIME タイプを与えるために `Response.blob` を実行する必要があることにお気づきでしょう。

```js
const image = document.querySelector(".my-image");
fetch("flowers.jpg")
  .then((response) => response.blob())
  .then((blob) => {
    const objectURL = URL.createObjectURL(blob);
    image.src = objectURL;
  });
```

`Response()` コンストラクターを使用して、独自の `Response` オブジェクトを生成することもできます。

```js
const response = new Response();
```

### Ajax 呼び出し

ここで JSON 文字列を生成する PHP のプログラムファイルを呼び出し、結果として JSON の値を表示します。簡単なエラー処理も含んでいます。

```js
// Ajax 呼び出しを行う関数
const doAjax = async () => {
  const response = await fetch("Ajax.php"); // Response オブジェクトを生成する
  if (response.ok) {
    const jsonValue = await response.json(); // レスポンスの本体から JSON の値を取得
    return Promise.resolve(jsonValue);
  } else {
    return Promise.reject("\*\*\* PHP file not found");
  }
};

// 関数を呼び出され、値やエラーメッセージをコンソールに出力する
doAjax().then(console.log).catch(console.log);
```

仕様書
---

| Specification |
| --- |
| Fetch Standard # response-class |

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

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

関連情報
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP


NDEFReader - Web API

NDEFReader
==========

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

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

**`NDEFReader`** はウェブ NFC APIのインターフェイスで、互換性のある NFC 機器、たとえば NDEF に対応している NFC タグなどがリーダーの磁気誘導範囲にあるときに、これらの機器からデータを読み取ったり、書き込んだりするために使用されます。

EventTarget

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

`NDEFReader()`
Experimental

新しい `NDEFReader` オブジェクトです。

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

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

`NDEFReader.scan()`
Experimental

読み取り機器をアクティブにして `Promise` を返します。このプロミスは NFC タグの読み取り操作がスケジュールされたときに解決し、ハードウェアまたは権限のエラーが発生したときは拒否されます。このメソッドは、 "nfc" の権限が事前に許可されていない場合は、許可を問い合わせるプロンプトを起動します。

`NDEFReader.write()`
Experimental

NDEF メッセージをタグに書き込む操作を行い、 `Promise` を返します。このプロミスは、タグへのメッセージの書き込みが完了した場合は解決し、ハードウェアまたは権限のエラーが発生したときは拒否されます。このメソッドは、 "nfc" の権限が事前に許可されていない場合は、許可を問い合わせるプロンプトを起動します。

イベント
----

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

`reading`
Experimental

互換性のある NFC 機器から読み取りができるようになったときに発行されます。

`readingerror`
Experimental

タグが読み取り装置の近くにあるにもかかわらず、読み取れなかった場合に発行されます。

例
-

### 書き込み前の読み取りを扱う

以下の例では、一般的な読み取りハンドラーと、単一の書き込みに特化したハンドラーの間で調整する方法を示しています。書き込みを行うためには、タグを発見し、読み取る必要があります。これにより、実際に書き込みたいタグであるかどうかをチェックすることができます。そのため、読み取りイベントから `write()` を呼び出すことが推奨されます。

```js
const ndef = new NDEFReader();
let ignoreRead = false;

ndef.onreading = (event) => {
  if (ignoreRead) {
    return; // write pending, ignore read.
  }

  console.log("We read a tag, but not during pending write!");
};

function write(data) {
  ignoreRead = true;
  return new Promise((resolve, reject) => {
    ndef.addEventListener(
      "reading",
      (event) => {
        // Check if we want to write to this tag, or reject.
        ndef
          .write(data)
          .then(resolve, reject)
          .finally(() => (ignoreRead = false));
      },
      { once: true },
    );
  });
}

await ndef.scan();
try {
  await write("Hello World");
  console.log("We wrote to a tag!");
} catch (err) {
  console.error("Something went wrong", err);
}
```

仕様書
---

| Specification |
| --- |
| Web NFC API # the-ndefreader-object |

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

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


GravitySensor - Web API

GravitySensor
=============

Sensor APIs の **`GravitySensor`** インターフェイスは、デバイスの 3 軸それぞれにかかっている重力の測定値を提供します。

このセンサーを使用するには、ユーザーが Permissions API により `'accelerometer'` デバイスセンサーを使用する許可を与える必要があります。さらに、この機能はサーバーで設定された Permissions Policy でブロックされる可能性があります。

EventTarget

Sensor

Accelerometer

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

`GravitySensor()`

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

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

*祖先の `Accelerometer`、`Sensor`、`EventTarget` からプロパティを継承しています。*

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

*`GravitySensor` には独自のメソッドはありません。しかし、親インターフェイスの `Sensor` および `EventTarget` からメソッドを継承しています。*

イベント
----

*`GravitySensor` には独自のイベントはありません。しかし、親インターフェイスの `Sensor` からイベントを継承しています。*

例
-

重力は通常 `reading` イベントコールバックで取得します。以下の例では、これを 1 秒に 60 回行います。

```js
let gravitySensor = new GravitySensor({ frequency: 60 });

gravitySensor.addEventListener("reading", (e) => {
  console.log(`X 軸方向の重力 ${gravitySensor.x}`);
  console.log(`Y 軸方向の重力 ${gravitySensor.y}`);
  console.log(`Z 軸方向の重力 ${gravitySensor.z}`);
});

gravitySensor.start();
```

仕様書
---

| Specification |
| --- |
| Accelerometer # gravitysensor-interface |

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

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


RTCPeerConnectionIceEvent - Web API

RTCPeerConnectionIceEvent
=========================

**`RTCPeerConnectionIceEvent`** インターフェイスは、通常 `RTCPeerConnection`の ICE 候補に関連して発生するイベントを表現します。

この型のイベントは、 `icecandidate` (en-US) の 1 つだけです。

Event

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

*`RTCPeerConnectionIceEvent` は `Event` の一種であり、このイベントはそのプロパティも実装しています。*

`RTCPeerConnectionIceEvent.candidate` 読取専用

イベントに関連付けられた候補を含む `RTCIceCandidate` (en-US) を格納し、このイベントがこれ以上来る候補がないことを示す場合は `null` を格納します。

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

`RTCPeerConnectionIceEvent()`

新しい `RTCPeerConnectionIceEvent` を返します。このコンストラクターは 2 つの引数を持ち、最初の引数はイベントの種類を表す文字列であり、 2 つ目は `RTCIceCandidate` (en-US) を含む辞書です。

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

*`RTCPeerConnectionIceEvent` は `Event` の一種であり、このイベントはそのプロパティも実装しています。 `RTCDataChannelEvent` に固有のメソッドはありません。*

例
-

```js
pc.onicecandidate = (ev) => {
  console.log(
    `The ICE candidate (trsp addr: '${ev.candidate.candidate}') added to connection.`,
  );
};
```

仕様書
---

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

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

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

関連情報
----

* WebRTC
* このイベントの通常ターゲット: `RTCPeerConnection`


CompressionStream - Web API

CompressionStream
=================

Compression Streams API の **`CompressionStream`** インターフェイスは、データのストリームの圧縮を行う API です。

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

`CompressionStream()`

新しい `CompressionStream` を生成します。

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

`CompressionStream.readable`

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

`CompressionStream.writable`

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

例
-

この例では、ストリームを gzip 圧縮を用いて圧縮します。

```js
const compressedReadableStream = inputReadableStream.pipeThrough(
  new CompressionStream("gzip"),
);
```

仕様書
---

| Specification |
| --- |
| Compression Streams # compression-stream |

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

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


Sensor APIs - Web API

Sensor APIs
===========

**Sensor APIs** は、デバイスのセンサーを一貫した形でウェブプラットフォームから利用可能にする、共通の設計で作られたインターフェイスの集合です。

Sensor APIs の概念と使用法
-------------------

Generic Sensor API の仕様では `Sensor` インターフェイスが定義されていますが、ウェブ開発者がこれを用いることはないでしょう。かわりに、特定の種類のセンサーからデータを取得するために、そのサブクラスを用いることになります。たとえば、`Accelerometer` インターフェイスは取得時にデバイスの 3 軸それぞれにかかっている加速度を返します。

センサーは、デバイスの物理的なセンサーに完全に対応していることも、対応していないこともあります。たとえば、`Gyroscope` インターフェイスはデバイスの物理的なインターフェイスに完全に対応しています。一方、`AbsoluteOrientationSensor` インターフェイスは 2 個以上のデバイスセンサーの情報をアルゴリズムにより組み合わせた情報を提供します。これらのセンサーの種類は、それぞれ *低レベル* および *高レベル* と呼ばれます。後者の種類のセンサーは、フュージョンセンサー (または、仮想センサー、合成センサー) とも呼ばれます。

### 機能の検出

センサーインターフェイスは、対応するデバイスセンサーのプロキシーでしかありません。そのため、センサーの機能の検出は他の API より複雑になります。センサー API が存在するからといって、API が実際のハードウェアセンサーに接続されているか、センサーが動作するか、センサーの接続が維持されているか、ユーザーがセンサーへのアクセスを許可したかはわかりません。これらすべての情報を常に利用可能にしておくことは、パフォーマンスと電池の持ちに負担をかけます。

そのため、センサー API の機能を検出するには、API そのものを検出した上で、防衛的プログラミングの戦略 (後述) をとらなければいけません。

以下の例では、センサー API を検出する 3 通りの方法を示します。さらに、オブジェクトの生成を `try...catch` ブロックの中で行う方法もあります。なお、`Navigator` インターフェイスを用いた検出は利用可能な選択肢に含まれないことに注意してください。

```js
if (typeof Gyroscope === "function") {
  // ぐるぐる回る…
}

if ("ProximitySensor" in window) {
  // 注意！
}

if (window.AmbientLightSensor) {
  // 暗闇へ…
}
```

### 防衛的プログラミング

機能の検出の節で言及したように、特定のセンサー API が使えるかをチェックするだけでは機能の検出には不十分です。実際のセンサーが存在することも確認しなければいけません。このために防衛的プログラミングが必要です。防衛的プログラミングには、3 個の戦略が必要です。

* センサーオブジェクトを生成するとき、投げられるエラーをチェックする。
* 使用時に投げられるエラーを監視する。
* エラーをきれいに処理し、ユーザー体験が損なわれず拡充されるようにする。

以下のコード例で、これらの原則を説明します。`try...catch` ブロックにより、センサーの生成時に投げられるエラーをキャッチします。`error` イベントを監視することで、使用時に投げられるエラーをキャッチします。ユーザーに何かが提示されるのは、許可の要求が必要なときと、デバイスがこのセンサーの種類に対応していないときだけです。

さらに、この機能はサーバーで設定された Permissions Policy によりブロックされる可能性があります。

```js
let accelerometer = null;
try {
  accelerometer = new Accelerometer({ referenceFrame: "device" });
  accelerometer.addEventListener("error", (event) => {
    // 実行時のエラーを処理する
    if (event.error.name === "NotAllowedError") {
      // 許可を要求するコードに飛ぶ
    } else if (event.error.name === "NotReadableError") {
      console.log("センサーに接続できません。");
    }
  });
  accelerometer.addEventListener("reading", () => reloadOnShake(accelerometer));
  accelerometer.start();
} catch (error) {
  // 生成時のエラーを処理する
  if (error.name === "SecurityError") {
    // 前述の Permissions Policy に関するメモを参照
    console.log(
      "センサーの生成が Permissions Policy によりブロックされました。",
    );
  } else if (error.name === "ReferenceError") {
    console.log("このユーザーエージェントはセンサーに対応していません。");
  } else {
    throw error;
  }
}
```

### 許可と Permissions Policy

センサーの計測値は、Permissions API によりユーザーが特定のセンサーの種類を用いる許可を与え、かつサーバーの `Permissions-Policy` でブロックされていない場合のみ参照できます。

以下の例では、センサーを使用しようとする前にユーザーに許可を要求する方法を示します。

```js
navigator.permissions.query({ name: "accelerometer" }).then((result) => {
  if (result.state === "denied") {
    console.log("加速度計センサーを使う許可が得られませんでした。");
    return;
  }
  // センサーを使用する
});
```

別の方法として、センサーを使用しようとして、`SecurityError` を監視することもできます。

```js
const sensor = new AbsoluteOrientationSensor();
sensor.start();
sensor.addEventListener("error", (error) => {
  if (event.error.name === "SecurityError")
    console.log("AbsoluteOrientationSensor を使用する許可がありません。");
});
```

以下の表では、それぞれのセンサーの種類について、Permissions API、`<iframe>` 要素の `allow` 属性、`Permissions-Policy` ディレクティブで必要な名前を示します。

| センサー | Permission Policy 名 |
| --- | --- |
| `AbsoluteOrientationSensor` | `'accelerometer'` と `'gyroscope'` と `'magnetometer'` |
| `Accelerometer` | `'accelerometer'` |
| `AmbientLightSensor` | `'ambient-light-sensor'` |
| `GravitySensor` | `'accelerometer'` |
| `Gyroscope` | `'gyroscope'` |
| `LinearAccelerationSensor` | `'accelerometer'` |
| `Magnetometer` | `'magnetometer'` |
| `RelativeOrientationSensor` | `'accelerometer'` と `'gyroscope'` |

### 計測値

センサーの計測値は、すべてのセンサーの種類で継承されている `reading` イベントコールバックを通じて取得できます。取得の頻度はセンサーのコンストラクターに渡すオプションで使用者が設定します。このオプションは、1 秒あたり何回取得するかを表す数値です。整数または小数を使用することができ、小数は 1 秒に 1 回未満の頻度を設定するとき用います。実際の取得頻度はデバイスのハードウェアに依存し、設定より少なくなる可能性があります。

以下の例では、`Magnetometer` センサーを用いてこれを説明します。

```js
let magSensor = new Magnetometer({ frequency: 60 });

magSensor.addEventListener("reading", (e) => {
  console.log(`X 軸方向の磁場 ${magSensor.x}`);
  console.log(`Y 軸方向の磁場 ${magSensor.y}`);
  console.log(`Z 軸方向の磁場 ${magSensor.z}`);
});
magSensor.addEventListener("error", (event) => {
  console.log(event.error.name, event.error.message);
});
magSensor.start();
```

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

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

地球の参照用座標系に対するデバイスの物理的な向きを表します。

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

デバイスの 3 軸それぞれにかかっている加速度を提供します。

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

現在の光レベル、すなわちホストデバイスの周囲の環境光の照度を返します。

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

デバイスの 3 軸それぞれにかかっている重力を提供します。

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

デバイスの 3 軸それぞれの角速度を提供します。

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

デバイスの 3 軸それぞれにかかっている加速度を、重力の影響を除いて提供します。

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

デバイスのプライマリー磁気センサーで検出される磁場の情報を提供します。

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

`AbsoluteOrientationSensor` のベースクラスです。このインターフェイスを直接用いることはできませんが、継承するインターフェイスがアクセスするプロパティとメソッドを提供します。

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

地球の参照用座標系は考慮せず、デバイスの物理的な向きを表します。

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

他のセンサーインターフェイスすべてのベースクラスです。このインターフェイスを直接用いることはできませんが、継承するインターフェイスがアクセスするプロパティ・イベントハンドラー・メソッドを提供します。

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

`Sensor` や関連するインターフェイスから投げられたエラーの情報を提供します。

仕様書
---

| Specification |
| --- |
| Generic Sensor API # the-sensor-interface |

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

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


ポインターイベント - Web API

ポインターイベント
=========

今日のウェブコンテンツの多くは、ユーザーのポインティング機器がマウスであることを前提としています。しかし、多くの端末がペンやスタイラス、タッチ面のような他の種類のポインティング入力機器に対応しているので、既存のポインティング機器のイベントモデルへの拡張が必要であり、そしてポインターイベントはその必要性に応じます。

**メモ:** ポインターイベントはウェブワーカーでは*利用できません*。

ポインターイベントは、ポインティング機器に対して発生する DOM イベントです。 これらは、マウス、ペンやスタイラス、（1 本以上の指でなどの）タッチなどのポインティング入力機器を処理する単一の DOM イベントモデルを作成するように設計されています。

ポインターは、特定の画面座標セットをターゲットにできるハードウェアにとらわれない機器です。 ポインターに単一のイベントモデルを使用すると、ウェブサイトやウェブアプリの作成が簡単になり、ユーザーのハードウェアに関係なく優れた使い勝手を提供できます。しかし、機器固有の処理が必要なシナリオのために、ポインターイベントはイベントを生成した機器の種類を調べるための `pointerType` プロパティを定義しています。

一般的なポインター入力を処理するために必要なイベントは、`マウスイベント`に似ています（`mousedown`/`pointerdown`、`mousemove`/`pointermove` など）。 したがって、ポインターイベント種別は意図的にマウスイベント種別と似せています。

さらに、ポインターイベントには、マウスイベントに存在する通常のプロパティ（クライアント座標、ターゲット要素、ボタンの状態など）、およびその他の入力形式のための新しいプロパティ（圧力、接触ジオメトリー、傾きなど）が含まれています。 実際、`PointerEvent` インターフェイスはすべての `MouseEvent` のプロパティを継承しているため、マウスイベントからポインターイベントへのコンテンツの移行は容易です。

用語
--

### アクティブボタン状態

ポインターが `buttons` プロパティに対してゼロ以外の値を持つ場合の条件。 例えば、ペンの場合は、ペンがデジタイザーと物理的に接触しているか、ホバー中に少なくとも 1 つのボタンが押されているときです。

### アクティブポインター

イベントを生成できる任意のポインターの入力機器。 ポインターがそれ以上のイベントを生成する可能性がある場合、ポインターはアクティブと見なされます。 例えば、ペンが持ち上げられたり動かされたりすると追加のイベントが発生する可能性があるため、ペンがダウン状態であるとアクティブであると見なされます。

### デジタイザー

接触を検出できる表面を備えた検知機器。 最も一般的な検知機器は、ペン、スタイラス、または指などの入力機器からの入力を検知することができるタッチ対応画面です。 検知機器の中には、入力機器の近接を検出できるものもあり、その状態をマウスにならってホバーと表現します。

### ヒットテスト

ブラウザーがポインターイベントのターゲット要素を決定するために使用するプロセス。 通常、これはポインターの位置と、画面媒体上の文書内の要素の視覚的なレイアウトを考慮して決定されます。

### ポインター

画面上の特定の座標（または座標のセット）をターゲットにできる、入力機器のハードウェアにとらわれない表現。 ポインター入力機器の例としては、マウス、ペン/スタイラス、タッチ接触などがあります。

### ポインターキャプチャ

ポインターキャプチャでは、ポインターイベントをポインターの位置による通常のヒットテストの結果以外の特定の要素にターゲットしなおすことができます。

### ポインターイベント

ポインターに対して発生した DOM `イベント`。

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

主なインターフェイスは `PointerEvent` インターフェイスで、これにはコンストラクターといくつかのイベント種別および関連するグローバルイベントハンドラーがあります。

この標準には、 `Element` および `Navigator` インターフェイスの拡張も含まれています。

以下の項では、各インターフェイスとプロパティについて簡単に説明します。

### PointerEvent インターフェイス

`PointerEvent` インターフェイスは `MouseEvent` インターフェイスを拡張したもので、以下のプロパティがあります。（以下のプロパティはすべて 読取専用  です。）

`pointerId`

イベントの原因となっているポインターの一意の識別子。

`width`

ポインターの接触ジオメトリーの幅（X 軸上の大きさ、CSS ピクセル単位）。

`height`

ポインターの接触ジオメトリーの高さ（Y 軸上の大きさ、CSS ピクセル単位）。

`pressure`

0 から 1 までの範囲のポインター入力の正規化された圧力。 ここで、0 と 1 は、それぞれハードウェアが検出できる最小圧力と最大圧力を表します。

`tangentialPressure`

ポインター入力の正規化された接線圧力（バレル圧力またはシリンダー応力（cylinder stress）とも呼ばれます）は -1 から 1 の範囲で、0 はコントロールの中立位置です。

`tiltX`

Y-Z 平面と、ポインター（ペン/スタイラスなど）の軸と Y 軸の両方を含む平面との間の平面角度（度単位で、 `-90` から `90` の範囲）。

`tiltY`

X-Z 平面と、ポインター（ペン/スタイラスなど）の軸と X 軸の両方を含む平面との間の平面角度（度単位で、 `-90` から `90` の範囲）。

`twist`

ポインター（ペン/スタイラスなど）の長軸を中心とした時計回りの回転の角度（`0` から `359` の範囲の値）。

`pointerType`

イベントの原因となった機器タイプ（マウス、ペン、タッチなど）を示します。

`isPrimary`

ポインターがこのポインタータイプの主ポインターを表すかどうかを示します。

### イベント種別とグローバルイベントハンドラー

ポインターイベントには 10 のイベント種別があり、そのうち 7 つ（`down`、`up`、`move`、`over`、`out`、`enter`、`leave`）はマウスイベントと同等の意味を持ちます。

以下は、各イベント種別の簡単な説明です。

| イベント | 説明 |
| --- | --- |
| `pointerover` | ポインターが要素のヒットテスト領域内に移動したときに発生します。 |
| `pointerenter` | ポインターが要素またはその子孫の 1 つのヒットテスト領域内に移動したときに発生します。 これには、ホバーに対応していない機器からの `pointerdown` イベントの結果も含まれます（`pointerdown` を参照）。 |
| `pointerdown` | ポインターが*アクティブボタン状態*になったときに発生します。 |
| `pointermove` | ポインターが座標を変更したときに発生します。 また、ポインターの状態の変化がこれ以外のイベントで報告できない場合もこのイベントが使われます。 |
| `pointerup` | ポインターが*アクティブボタン状態*でなくなったときに発生します。 |
| `pointercancel` | ブラウザーは、ポインターがイベントを生成できなくなったと判断した場合（例えば、関連機器が無効になった場合）、このイベントを発行します。 |
| `pointerout` | いくつかの理由で発生します。ポインターが要素のヒットテスト領域外に移動した場合、ホバーに対応していない機器で pointerup イベントが発生した場合（pointerup を参照）、 `pointercancel` イベントの発生後（`pointercancel` を参照）、ペン/スタイラスがデジタイザーで検出可能なホバー範囲を離脱したときなどです。 |
| `pointerleave` | ポインターが要素のヒットテスト領域外に移動したときに発生します。ペン機器の場合、このイベントは、スタイラスがデジタイザーで検出可能なホバー範囲を離脱したときに発生します。 |
| `gotpointercapture` | 要素がポインターキャプチャを受け取ったときに発生します。 |
| `lostpointercapture` | ポインターに対するポインターキャプチャが解放された後に発生します。 |

### Element の拡張

`Element` インターフェイスには次の 3 つの拡張があります。

`setPointerCapture()`

このメソッドは、将来のポインターイベントの*キャプチャターゲット*として特定の要素を指定します。

`releasePointerCapture()`

このメソッドは、特定のポインターイベントに対して以前に設定された*ポインターキャプチャ*を解放（停止）します。

### Navigator の拡張

`Navigator.maxTouchPoints` プロパティは、任意の時点で対応している同時タッチポイントの最大数を決定するために使用します。

例
-

この節では、ポインターイベントのインターフェイスを使用した基本的な使い方の例を紹介します。

### イベントハンドラーの登録

この例では、特定の要素のすべてのイベント種別に対してハンドラーを登録します。

```html
<html lang="en">
  <script>
 function over\_handler(event) {}
 function enter\_handler(event) {}
 function down\_handler(event) {}
 function move\_handler(event) {}
 function up\_handler(event) {}
 function cancel\_handler(event) {}
 function out\_handler(event) {}
 function leave\_handler(event) {}
 function gotcapture\_handler(event) {}
 function lostcapture\_handler(event) {}

 function init() {
 const el = document.getElementById("target");
 // ポインターイベントハンドラーの登録
 el.onpointerover = over\_handler;
 el.onpointerenter = enter\_handler;
 el.onpointerdown = down\_handler;
 el.onpointermove = move\_handler;
 el.onpointerup = up\_handler;
 el.onpointercancel = cancel\_handler;
 el.onpointerout = out\_handler;
 el.onpointerleave = leave\_handler;
 el.gotpointercapture = gotcapture\_handler;
 el.lostpointercapture = lostcapture\_handler;
 }
 </script>
  <body onload="init();">
    <div id="target">Touch me…</div>
  </body>
</html>
```

### イベントのプロパティ

この例では、ポインターイベントのすべてのプロパティにアクセスする方法を示します。

```html
<html lang="en">
  <script>
 const id = -1;

 function process\_id(event) {
 // イベントの識別子に基づいて、このイベントを処理する
 }
 function process\_mouse(event) {
 // マウスポインターイベントを処理する
 }
 function process\_pen(event) {
 // ペンポインターイベントを処理する
 }
 function process\_touch(event) {
 // タッチポインターイベントを処理する
 }
 function process\_tilt(tiltX, tiltY) {
 // 傾斜データハンドラー
 }
 function process\_pressure(pressure) {
 // 圧力ハンドラー
 }
 function process\_non\_primary(event) {
 // 非主ハンドラー
 }

 function down\_handler(ev) {
 // タッチポイントの接触面積を計算する
 const area = ev.width \* ev.height;

 // キャッシュされた id とこのイベントの id を比較し、それに応じて処理する
 if (id === ev.identifier) process\_id(ev);

 // 適切なポインタータイプのハンドラーを呼び出す
 switch (ev.pointerType) {
 case "mouse":
 process\_mouse(ev);
 break;
 case "pen":
 process\_pen(ev);
 break;
 case "touch":
 process\_touch(ev);
 break;
 default:
 console.log(`pointerType ${ev.pointerType} には対応していません`);
 }

 // 傾斜ハンドラーを呼び出す
 if (ev.tiltX !== 0 && ev.tiltY !== 0) process\_tilt(ev.tiltX, ev.tiltY);

 // 圧力ハンドラーを呼び出す
 process\_pressure(ev.pressure);

 // このイベントが主ではない場合は、非主ハンドラーを呼び出す
 if (!ev.isPrimary) process\_non\_primary(ev);
 }

 function init() {
 const el = document.getElementById("target");
 // pointerdown ハンドラーの登録
 el.onpointerdown = down\_handler;
 }
 </script>
  <body onload="init();">
    <div id="target">Touch me…</div>
  </body>
</html>
```

主ポインターの決定
---------

シナリオによっては、複数のポインター（例えば、タッチ画面とマウスの両方を備えた機器）やポインターが複数の接触点に対応している（例えば、複数の指でのタッチに対応しているタッチ画面）ことがあります。 アプリは、`isPrimary` プロパティを使用して、各ポインタータイプの*アクティブポインター*のセットの中からマスターポインターを識別できます。 アプリが主ポインターのみに対応したい場合は、主ではないすべてのポインターイベントを無視することできます。

マウスの場合、ポインターは 1 つだけなので、常に主ポインターになります。 タッチ入力の場合、他にアクティブなタッチがなかったときにユーザーが画面にタッチした場合、ポインターは主と見なされます。ペンとスタイラスの入力では、他のアクティブなペンが画面に接触していないときにユーザーのペンが最初に画面に接触した場合、ポインターは主と見なされます。

ボタンの状態の判断
---------

マウスやペンなどの一部のポインター機器は複数のボタンに対応しており、ボタンの押下で*和音を弾く*ことができます。 すなわち、ポインター機器上の別のボタンが既に押されている間に、追加のボタンを押すことができます。

ボタンが押された状態を判断するために、ポインターイベントは（`PointerEvent` の継承元の）`MouseEvent` インターフェイスの `button` プロパティおよび `buttons` プロパティを使用します。

次の表は、さまざまな機器ボタンの状態に対応する `button` および `buttons` の値を示しています。

| 機器のボタンの状態 | button | buttons |
| --- | --- | --- |
| 最後のイベント以降、ボタンもタッチ/ペンの接触も変化がなかった | `-1` | — |
| ボタンを押さずにマウスを動かした、ボタンを押さずにホバー中にペンを動かした | — | `0` |
| マウスの左ボタン、タッチ接触、ペン接触 | `0` | `1` |
| マウスの中ボタン | `1` | `4` |
| マウスの右ボタン、ペンのバレルボタン | `2` | `2` |
| マウスの X1 （戻る）ボタン | `3` | `8` |
| マウスの X2 （進む）ボタン | `4` | `16` |
| ペンの消しゴムボタン | `5` | `32` |

**メモ:** `button` プロパティは、ボタンの状態の変化を示していることに注意してください。ただし、タッチの場合のように、 1 つのイベントに伴って複数のイベントが発生する場合は、それらはすべて同じ値になります。

ポインターキャプチャ
----------

ポインターキャプチャは、特定のポインターイベントに対するイベントを、ポインターの位置で通常のヒットテストを行う代わりに、特定の要素に再ターゲットすることを可能にします。これは、ポインターデバイスの接点が要素から（スクロールなどで）移動しても、要素がポインターイベントを受信し続けることを保証するために使用できます。

次の例では、要素にポインターキャプチャを設定しています。

```html
<html lang="en">
  <script>
 function downHandler(ev) {
 let el = document.getElementById("target");
 // 要素 'target' はそれ以上のイベントを受信/キャプチャします
 el.setPointerCapture(ev.pointerId);
 }

 function init() {
 let el = document.getElementById("target");
 el.onpointerdown = downHandler;
 }
 </script>
  <body onload="init();">
    <div id="target">Touch me…</div>
  </body>
</html>
```

次の例は、（`pointercancel` イベントが発生したときに）ポインターキャプチャを解放しています。 `pointerup` イベントや `pointercancel` イベントが発生すると、ブラウザーはこれを自動的に行います。

```html
<html lang="en">
  <script>
 function downHandler(ev) {
 let el = document.getElementById("target");
 // 要素 "target" はそれ以上のイベントを受信/キャプチャします
 el.setPointerCapture(ev.pointerId);
 }

 function cancelHandler(ev) {
 let el = document.getElementById("target");
 // ポインターキャプチャを解放する
 el.releasePointerCapture(ev.pointerId);
 }

 function init() {
 let el = document.getElementById("target");
 // pointerdown と pointercancel のハンドラーの登録
 el.onpointerdown = downHandler;
 el.onpointercancel = cancelHandler;
 }
 </script>
  <body onload="init();">
    <div id="target">Touch me…</div>
  </body>
</html>
```

touch-action プロパティ
------------------

CSS の `touch-action` プロパティは、ブラウザーが既定の（*ネイティブの*）タッチの振る舞い（ズームやパンなど）を領域に適用するかどうかを指定するために使用します。 このプロパティは、置換されていないインライン要素、テーブル行、行グループ、テーブル列、および列グループを除くすべての要素に適用できます。

`auto` の値は、ブラウザーがその既定のタッチの振る舞いを（指定された領域に）自由に適用できることを意味し、`none` の値はブラウザーのその領域に対する既定のタッチの振る舞いを無効にします。 値 `pan-x` および `pan-y` は、指定された領域で始まるタッチがそれぞれ水平スクロールおよび垂直スクロール専用であることを意味します。 値 `manipulation` は、ブラウザーがその要素から始まるタッチをスクロールとズームのみを考慮していることを意味します。

次の例では、ブラウザーの既定のタッチの振る舞いは `div` 要素に対して無効になります。

```html
<html lang="en">
  <body>
    <div style="touch-action:none;">Can't touch this…</div>
  </body>
</html>
```

次の例では、一部の `button` 要素では既定のタッチの振る舞いが無効になります。

```css
button#tiny {
  touch-action: none;
}
```

次の例では、`target` 要素にタッチすると、水平方向にのみパンします。

```css
#target {
  touch-action: pan-x;
}
```

マウスイベントとの互換性
------------

ポインターイベントのインターフェイスを使用すると、アプリはポインター対応機器で高度なユーザーエクスペリエンスを作成できますが、現実での今日のウェブコンテンツの大部分はマウス入力でのみ機能するように設計されています。 その結果、ブラウザーがポインターイベントをサポートしていても、マウスのみの入力が直接変更せずにそのまま機能することを前提として、ブラウザーはマウスイベントを処理する必要があります。 理想的には、ポインター対応アプリはマウス入力を明示的に処理する必要はありません。 ただし、ブラウザーはマウスイベントを処理する必要があるため、対処する必要がある互換性の問題がいくつかあるかもしれません。 この節では、ポインターイベントとマウスイベントの相互作用、およびアプリ開発者への影響について説明します。

ブラウザーは、*マウスベースのコンテンツとの互換性のために、汎用ポインター入力をマウスイベントにマッピングすることができます*。 このイベントのマッピングは、*互換性マウスイベント*と呼ばれます。 作成者は `pointerdown` イベントをキャンセルすることで特定の互換性マウスイベントの生成を防ぐことができますが、次の点に注意してください。

* マウスイベントは、ポインターがダウンしているときにのみ防ぐことができます。
* ホバーしているポインター（例えばボタンが押されていないマウス）は、それらのマウスイベントを防ぐことができません。
* `mouseover`、`mouseout`、`mouseenter`、`mouseleave` の各イベントが防止されることはありません（ポインターがダウンしている場合でも）。
ベストプラクティス
---------

ポインターイベントを使用する際に考慮すべき、いくつかの*ベストプラクティス*は次のとおりです。

* イベントハンドラーで行われる作業量を最小限に抑えます。
* イベントハンドラーを特定のターゲット要素に追加します（ドキュメント全体またはドキュメントツリーの上位のノードではなく）。
* ターゲット要素（ノード）は、（通常は指で触れた）最大接触表面積を収容するのに十分な大きさであるべきです。 ターゲット領域が小さすぎる場合、それに触れると隣接する要素に対して他のイベントが発生する可能性があります。
仕様書
---

| Specification |
| --- |
| Pointer Events  |

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

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

`CSS touch-action` プロパティに追加のいくつかの値が Pointer Events 仕様書の一部として定義されていますが、現在それらの値は実装の対応が限定されています。

デモと例
----

* タッチ/ポインターのテストとデモ（Patrick H. Lauke 著、英語）
コミュニティ
------

* ポインターイベントのワーキンググループ（英語）
* メールリスト（英語）
* W3C の #pointerevents IRC チャンネル（英語）
関連トピックとリソース
-----------

* タッチイベント標準（英語）


ClipboardEvent - Web API

ClipboardEvent
==============

**`ClipboardEvent`** インターフェイスは、 クリップボードの変更に関連する情報を提供するイベントを表します。すなわち、`cut`、`copy`、`paste` イベントです。

Event

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

`ClipboardEvent()`

指定した引数で `ClipboardEvent` イベントを生成します。

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

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

`ClipboardEvent.clipboardData` 読取専用

ユーザーが開始した `cut`、`copy`、`paste` 操作によって影響を受けたデータとその MIME タイプを含む `DataTransfer` オブジェクト。

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

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

仕様書
---

| Specification |
| --- |
| Clipboard API and events # clipboard-event-interfaces |

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

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

関連情報
----

* Copy 関連イベント： `copy`, `cut`, `paste`
* クリップボード API
* Async Clipboard API demo on Glitch
* Image support for Async Clipboard article


CookieChangeEvent - Web API

CookieChangeEvent
=================

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

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

「Cookie Store API」の **`CookieChangeEvent`** インターフェイスは、Cookie が何か変更された時 `CookieStore` で発火する `change` イベントのイベント型です。Cookie の変更は、Cookie と種類 (`"changed"` または `"deleted"`) からなります。

`CookieChangeEvent` を発生させる Cookie の変更は、以下のものがあります。

* Cookie が新規作成され、すぐには削除されません。この場合の `type` は `"changed"` です。
* Cookie が新規作成され、すぐに削除されます。この場合の `type` は `"deleted"` です。
* Cookie が削除されます。この場合の `type` は `"deleted"` です。

**メモ:** 同じ名前・ドメイン・パスの他の Cookie が挿入されることにより置き換えられる Cookie は無視され、変更イベントを発生させません。

Event

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

`CookieChangeEvent()`
Experimental

新しい `CookieChangeEvent` を生成します。

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

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

`CookieChangeEvent.changed` 読取専用
Experimental

1 個以上の変更された Cookie が格納された配列を返します。

`CookieChangeEvent.deleted` 読取専用
Experimental

1 個以上の削除された Cookie が格納された配列を返します。

例
-

この例では、Cookie が設定されると、イベントリスナーがイベントをコンソールに記録します。これは今設定されたばかりの Cookie を表すオブジェクトが格納された `changed` プロパティを持つ `CookieChangeEvent` オブジェクトです。

```js
cookieStore.addEventListener("change", (event) => {
  console.log(event);
});

const one_day = 24 \* 60 \* 60 \* 1000;
cookieStore.set({
  name: "cookie1",
  value: "cookie1-value",
  expires: Date.now() + one_day,
  domain: "example.com",
});
```

仕様書
---

| Specification |
| --- |
| Cookie Store API # CookieChangeEvent |

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

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