全画面 API - Web API

全画面 API
=======

**全画面 API** は、特定の要素 (`Element`) （およびその子孫）を全画面モードで表示したり、必要なくなったときに全画面モードを抜けたりする方法を追加します。これによって、要求されたコンテンツ — オンラインゲームなど — がユーザーの画面全体で表示され、全画面モードが終了するまで、ブラウザーのユーザーインターフェイス要素や他のアプリケーションをすべて画面から排除することができます。

API の使い方についての詳細は、 全画面 API ガイドをご覧ください。

**メモ:** この API の対応はブラウザーによって、ベンダー接頭辞が必要かどうか、最新の仕様を実装しているかどうかがいくらか異なっています。この API の実装状況の詳細は、ブラウザーの互換性の節を参照してください。ベンダーに依存せずに全画面 API にアクセスできる Fscreen のようなライブラリのー使用を検討したほうが良いかもしれません。

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

*全画面 API 自体に独自のインターフェイスはありません。その代わりに、全画面機能を提供するために必要なメソッド、プロパティ、イベントハンドラーを数多くの他のインターフェイスに追加しています。これらは以下の節に挙げています。*

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

全画面 API は `Document` および `Element` インターフェイスにメソッドを追加して、全画面モードを起動したり終了したりすることができるようにしています。

### Document インターフェイスのインスタンスメソッド

`Document.exitFullscreen()`

ユーザーエージェントが全画面モードからウィンドウモードに切り替えることをリクエストします。返される `Promise` は、全画面モードが完全に終了したときに解決します。

### Element インターフェイスのインスタンスメソッド

`Element.requestFullscreen()`

ユーザーエージェントに対して、指定された要素 (および、子孫まで) を全画面モードに配置し、ブラウザーのユーザーインターフェイス要素や他のアプリケーションをすべて画面から排除します。返される `Promise` は、全画面モードが起動したときに解決します。

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

*`Document` インターフェイスはこのインターフェースは、全画面モードに対応していて利用できるかどうか、全画面モードが現在有効であれば、どの要素が画面を使用しているかを判断するために使用できるプロパティを提供します*。

`Document.fullscreenElement` / `ShadowRoot.fullscreenElement`

`fullscreenElement` プロパティで、現在全画面モードで表示されている DOM （またはシャドウ DOM）上の要素 (`Element`) が分かります。これが `null` の場合、文書（またはシャドウ DOM）は全画面モードになっていません。

`document.fullscreenEnabled`

`fullscreenEnabled` プロパティで、全画面モードになることができるかどうかが分かります。何らかの理由で全画面モードが利用できない場合（例えば `"fullscreen"` 機能が許可されていない、あるいは全画面モードが対応していない場合）、これは `false` となります。

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

`Document.fullscreen`
非推奨

論理値で、文書に現在全画面モードで表示されている要素があるのであれば `true`、 それ以外は `false` を返します。

**メモ:** 代わりに `Document` または `ShadowRoot` の `fullscreenElement` プロパティを使用してください。これが `null` ではない場合、現在全画面モードで表示されている `Element` を表します。

イベント
----

*全画面 API は 2 つのイベントを定義しており、全画面モードに移行したときと終了したとき、また全画面モードとウィンドウモードを切り替える途中でエラーが発生したことを検出するために利用することができます。*

`fullscreenchange`

全画面モードに移行したり、終了したりした時に、 `Element` に対して送られます。

`fullscreenerror`

全画面モードに切り替えたり、終了したりした際にエラーが発生した時に、 `Element` に対して送られます。

アクセス制御
------

全画面モードが利用可能であるかは、権限ポリシーを使用して制御することができます。全画面モードの機能は `"fullscreen"` の文字列によって識別され、既定の許可リストの値は `"self"` であり、最上位の文書コンテキストでは全画面モードが許可されており、最上位文書と同じオリジンから読み込まれた内側の閲覧コンテキストも同様です。

使用上のメモ
------

ユーザーは全画面モードを解除するのを、サイトやアプリがプログラム的に行うのを待つのではなく、 `ESC` または `F11` キーを押すことで抜けることを選択することができます。ユーザーインターフェイスの中で、これができることをユーザーに知らせるための適切なユーザーインターフェイス要素を、ユーザーインターフェイスのどこかで提供することを忘れないでください。

**メモ:** 全画面モードであるときに別のページへ移動する、タブを切り替える、あるいは別のアプリケーションに切り替える (例えば `Alt`-`Tab` を使用) と、同様に全画面モードを解除します。

例
-

### 単純な全画面の使用

この例では、ウェブページ内に動画が表示されます。 `Enter` キーを押すと、動画をウィンドウ内表示と全画面表示とで切り替えることができます。

ライブデモを表示

### Enter キーの監視

ページが読み込まれると、 `Enter` キーを監視するイベントリスナーを設定するコードが実行されます。

```js
document.addEventListener(
  "keydown",
  (e) => {
    if (e.key === "Enter") {
      toggleFullScreen();
    }
  },
  false,
);
```

### 全画面モードの切り替え

このコードは、ユーザーが `Enter` キーを押したときに呼び出されます。

```js
function toggleFullScreen() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else if (document.exitFullscreen) {
    document.exitFullscreen();
  }
}
```

これは `document` の `fullscreenElement` 属性の値を確認することから始まります。現実の配信では現時点で、接頭辞付きのバージョン (例えば `mozFullscreenElement`, `msFullscreenElement`, `webkitFullscreenElement`) をチェックしたほうがいいでしょう。値が `null` である場合は、文書がウィンドウモードであるので、全画面モードへ切り替えることが必要です。 `Element.requestFullscreen()` を呼び出して、全画面モードへ切り替えます。

すでに全画面モードが有効である (`fullscreenElement` が `null` ではない) 場合は、 `document` の `Document.exitFullscreen()` を呼び出すことで、全画面モードを終了します。

仕様書
---

| Specification |
| --- |
| Fullscreen API Standard # ref-for-dom-document-fullscreenelement① |
| Fullscreen API Standard # ref-for-dom-document-fullscreenenabled① |
| Fullscreen API Standard # ref-for-dom-document-exitfullscreen① |
| Fullscreen API Standard # ref-for-dom-element-requestfullscreen① |
| Fullscreen API Standard # dom-document-fullscreen |

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

### api.Document.fullscreenElement

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

### api.Document.fullscreenEnabled

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

### api.Document.exitFullscreen

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

### api.Element.requestFullscreen

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

### api.Document.fullscreen

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

関連情報
----

* `Element.requestFullscreen()`
* `Document.exitFullscreen()`
* `Document.fullscreen`
* `Document.fullscreenElement`
* `:fullscreen`, `::backdrop`
* `allowfullscreen`


MIDIOutput - Web API

MIDIOutput
==========

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

Web MIDI API の **`MIDIOutput`** インターフェイスは、出力デバイスのキューにメッセージを追加するメソッドと、メッセージのキューをクリアするメソッドを提供します。

EventTarget

MIDIPort

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

*このインターフェイスは固有のプロパティを実装していませんが、`MIDIPort` からプロパティを継承しています。*

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

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

`MIDIoutput.send()`

MIDI ポートに送信するメッセージをキューに追加します。

`MIDIOutput.clear()`

キュー上の送信待ち中のデータをすべてクリアします。

例
-

以下の例は、真ん中のドをすぐに MIDI チャンネル 1 に送信します。

```js
function sendMiddleC(midiAccess, portID) {
  const noteOnMessage = [0x90, 60, 0x7f]; // ノートオン、真ん中のド、フルベロシティー
  const output = midiAccess.outputs.get(portID);
  output.send(noteOnMessage); // メッセージを送信する
}
```

仕様書
---

| Specification |
| --- |
| Web MIDI API # MIDIOutput |

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

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


ExtendableEvent - Web API

ExtendableEvent
===============

**`ExtendableEvent`** インターフェイスは、サービスワーカーのライフサイクルの一部として、グローバルスコープに配信された `install` および `activate` イベントの存続期間を延長します。これにより、データベーススキーマがアップグレードされて古いキャッシュエントリーが削除されるまで、機能イベント（`FetchEvent` など）が送出されなくなります。

`waitUntil()` が `ExtendableEvent` ハンドラーの外で呼び出された場合、ブラウザーは `InvalidStateError` 例外を発生させます。 また、複数の呼び出しが積み重なり、その結果のプロミスが存続期間延長プロミスのリストに追加されることにも注意してください。

**メモ:** 上記の段落で説明した振る舞いは、Firefox 43 で修正されました（Firefox バグ 1180274 を参照）。

このインターフェイスは、 `Event` インターフェイスを継承しています。

Event

ExtendableEvent

**メモ:** このインターフェイスは、グローバルスコープが `ServiceWorkerGlobalScope` の場合にのみ使用できます。 `Window` または別の種類のワーカーのスコープの場合は使用できません。

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

`ExtendableEvent()`

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

プロパティ
-----

*特定のプロパティを実装していませんが、親である `Event` からプロパティを継承しています。*

メソッド
----

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

`ExtendableEvent.waitUntil()`

イベントの存続期間を延長します。 これは、インストール中 (`installing`) のワーカーの `install` (en-US) イベントハンドラー と、アクティブ (`active`) ワーカーの `activate` (en-US) イベントハンドラー で呼び出すためのものです。

例
-

このコードスニペットは、サービスワーカーのプリフェッチの例からのものです（プリフェッチの例をライブで見る）。 コードは `ServiceWorkerGlobalScope.install_event` で `ExtendableEvent.waitUntil()` を呼び出し、インストール中（`ServiceWorkerRegistration.installing`）のワーカーがインストール済み（installed）として扱われるのを、渡された Promise が正常に解決されるまで遅らせます。 Promise は、すべてのリソースがフェッチされてキャッシュされたとき、または例外が発生したときに解決します。

コードスニペットは、サービスワーカーが使用するキャッシュのバージョン管理のベストプラクティスも示しています。 この例ではキャッシュは 1 つしかありませんが、同じアプローチを複数のキャッシュに使用できます。 キャッシュの一括指定識別子を特定のバージョン管理されたキャッシュ名にマップします。

**メモ:** Chrome では、ログ文は、chrome://serviceworker-internals を介してアクセスされる関連サービスワーカーの "Inspect" インターフェイスを介して表示されます。

```js
const CACHE\_VERSION = 1;
const CURRENT\_CACHES = {
  prefetch: `prefetch-cache-v${CACHE\_VERSION}`,
};

self.addEventListener("install", (event) => {
  const urlsToPrefetch = [
    "./static/pre\_fetched.txt",
    "./static/pre\_fetched.html",
    "https://www.chromium.org/\_/rsrc/1302286216006/config/customLogo.gif",
  ];

  console.log(
    "Handling install event. Resources to pre-fetch:",
    urlsToPrefetch,
  );

  event.waitUntil(
    caches
      .open(CURRENT\_CACHES["prefetch"])
      .then((cache) => {
        return cache
          .addAll(
            urlsToPrefetch.map((urlToPrefetch) => {
              return new Request(urlToPrefetch, { mode: "no-cors" });
            }),
          )
          .then(() => {
            console.log("すべてのリソースをフェッチし、キャッシュしました。");
          });
      })
      .catch((error) => {
        console.error("プリフェッチに失敗:", error);
      }),
  );
});
```

**メモ:** リソースをフェッチするとき、リソースが CORS をサポートしていないサーバーから提供される可能性がある場合は、`{mode: 'no-cors'}` を使用することが非常に重要です。 この例では、 www.chromium.org は CORS をサポートしていません。

仕様書
---

| Specification |
| --- |
| Service Workers # extendableevent-interface |

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

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

関連情報
----

* サービスワーカーの使用
* サービスワーカーの基本的なコード例
* ServiceWorker の準備はできていますか？（英語）
* `Promise`
* ウェブワーカーの使用


MediaList - Web API

MediaList
=========

**`MediaList`** インターフェイスはスタイルシートのメディアクエリーを表します。例えば、 `<link>` 要素の `media` 属性で設定されるものです。

**メモ:** `MediaList` は生きたリストです。以下のプロパティやメソッドを使用して更新すると、直ちに文書の動作が更新されます。

プロパティ
-----

`MediaList.mediaText`

文字列化プロパティであり、 `MediaList` をテキストとして表す文字列を返し、また新しい `MediaList` を設定することができます。

`MediaList.length` (en-US) 読取専用

この `MediaList` にあるメディアクエリーの数を返します。

メソッド
----

`MediaList.appendMedium()` (en-US)

`MediaList` にメディアクエリーを追加します。

`MediaList.deleteMedium()` (en-US)

`MediaList` からメディアクエリーを削除します。

`MediaList.item()` (en-US)

メディアクエリーをテキストとして返すゲッターです。メディアクエリーの `MediaList` 内での位置を指定します。

例
-

以下は、現在の文書に適用された最初のスタイルシートの `MediaList` のテキスト表現をコンソールにログ出力するものです。

```css
const stylesheets = document.styleSheets;
let stylesheet = stylesheets[0];
console.log(stylesheet.media.mediaText);
```

仕様書
---

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

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

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


画面キャプチャ API - Web API

画面キャプチャ API
===========

画面キャプチャ API (Screen Capture API) は、既存のメディアキャプチャおよびストリーム API に追加して、ユーザーが画面または画面の一部（ウィンドウなど）を選択してメディアストリームとしてキャプチャできるようにしたものです。このストリームは、ネットワーク上で録画したり、他の人と共有したりすることができます。

画面キャプチャ API の概念と使用方法
--------------------

画面キャプチャ API は比較的簡単に使用することができます。唯一のメソッドは `MediaDevices.getDisplayMedia()` で、その仕事はユーザーにキャプチャする画面または画面の一部を選択するよう促し、 `MediaStream` 形式でキャプチャすることです。

画面から動画をキャプチャするには、 `getDisplayMedia()` を `Media` `navigator.mediaDevices` のインスタンス上で呼び出してください。

```js
captureStream =
  await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
```

`Promise` が `getDisplayMedia()` から返され、これはキャプチャされたメディアをストリーミングする `MediaStream` で解決します。

画面キャプチャ API を使用する方法については、画面キャプチャ API の使用の記事を参照してください。

既存インターフェイスへの追加
--------------

画面キャプチャ API は独自のインターフェイスを持たず、既存の `MediaDevices` インターフェイスに 1 つのメソッドを追加しています。

### MediaDevices インターフェイス

`MediaDevices.getDisplayMedia()`

`getDisplayMedia()` メソッドが `MediaDevices` インターフェイスに追加されています。 `getUserMedia()` と同様、このメソッドは、ユーザーが選択した表示領域を、指定されたオプションに一致する形式で含む `MediaStream` で解決するプロミスを作成します。

既存の辞書への追加
---------

画面キャプチャ API は、他の仕様書で定義された以下の辞書にプロパティを追加します。

### MediaTrackConstraints

`MediaTrackConstraints.cursor` (en-US)

`ConstrainDOMString` (en-US) で、カーソルをキャプチャした表示面のストリームに含めるかどうか、また、常に表示するか、マウスが動いている間だけ表示するかを指定します。

`MediaTrackConstraints.displaySurface` (en-US)

`ConstrainDOMString` (en-US) で、キャプチャする表示面の種類を指定します。値は `application`、`browser`、`monitor`、`window` のいずれかです。

`MediaTrackConstraints.logicalSurface` (en-US)

ストリームの映像が、論理的な表示面（つまり、画面上に完全に表示されていない、あるいは完全に画面外にある可能性のあるもの）を表しているかどうかを示します。値が `true` の場合、論理的な表示面をキャプチャすることを示します。

### MediaTrackSettings

`MediaTrackSettings.cursor` (en-US)

文字列で、現在キャプチャしている表示面にマウスカーソルが含まれているかどうか、含まれている場合はマウスが動いている間だけ見えるのか、常に見えているのかを示します。値は `always`、`motion`、`never` のいずれかです。

`MediaTrackSettings.displaySurface` (en-US)

文字列で、現在キャプチャしている表示面の種類を示します。値は `application`、`browser`、`monitor`、`window` のいずれかです。

`MediaTrackSettings.logicalSurface` (en-US)

論理値で、キャプチャした映像が、画面上の単一の表示領域に直接対応していない場合に `true` となります。

### MediaTrackSupportedConstraints

`MediaTrackSupportedConstraints.cursor` (en-US)

論理値で、 `true` であればユーザーエージェントと機器が `MediaTrackConstraints.cursor` (en-US) 制約に対応していることを示します。

`MediaTrackSupportedConstraints.displaySurface` (en-US)

論理値で、 `true` であれば現在の環境が `MediaTrackConstraints.displaySurface` (en-US) 制約に対応していることを示します。

`MediaTrackSupportedConstraints.logicalSurface` (en-US)

論理値で、 `true` であれば現在の環境が `MediaTrackConstraints.logicalSurface` (en-US) 制約に対応していることを示します。

辞書
--

以下の辞書が画面キャプチャ API で定義されています。

`CursorCaptureConstraint`

列挙文字列型で、設定と制約の `cursor` プロパティの値を提供するために使用されます。指定できる値は `always`、`motion`、`never` です。

`DisplayCaptureSurfaceType`

列挙文字列型で、キャプチャするディスプレイ表面の種類を識別するために使用されます。この型は、制約と設定オブジェクトの `displaySurface` プロパティに使用され、`application`, `browser`, `monitor`, `window` という値を持つことが可能です。

機能ポリシーの検証
---------

ユーザーエージェントのうち（HTTP の `Feature-Policy` ヘッダーまたは `<iframe>` 属性を使用する）機能ポリシーをに対応するものは、ポリシー制御ディレクティブ `display-capture` によってが画面キャプチャ API 使用の希望を指定することができます。

```html
<iframe allow="display-capture" src="/some-other-document.html"></iframe>
```

既定の許可リストは `self` で、文書内の任意のコンテンツに画面キャプチャを使用させることができます。

機能ポリシーをどのように使うかについてのより深い解説については、機能ポリシーの使用を参照してください。

仕様書
---

| 仕様書 |
| --- |
| Screen Capture |

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

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

関連情報
----

* 画面キャプチャ API の使用
* `MediaDevices.getDisplayMedia()`


HTMLMeterElement - Web API

HTMLMeterElement
================

HTML の `<meter>` 要素は **`HTMLMeterElement`** インターフェイスを公開します。これは（継承によって利用できる `HTMLElement` オブジェクトのインターフェイス以外に）`<meter>` 要素のレイアウトや表現を操作するためのプロパティやメソッドを提供します。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLMeterElement.high`

`double` で、`high` 属性を反映し、上の境界値を表します。

`HTMLMeterElement.low`

`double` で、`low` 属性を反映し、下の境界値を表します。

`HTMLMeterElement.max`

`double` で、`max` 属性を反映し、最大値を表します。

`HTMLMeterElement.min`

`double` で、`min` 属性を反映し、最小値を表します。

`HTMLMeterElement.optimum`

`double` で、`optimum` 属性を反映し、最適な値を表します。

`HTMLMeterElement.value`

`double` で、`value` 属性を反映し、現在の値を表します。

`HTMLMeterElement.labels` 読取専用

`NodeList` で、この要素に関連付けられた `<label>` 要素群を表します。

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

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlmeterelement |

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

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

関連情報
----

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


ResizeObserver - Web API

ResizeObserver
==============

**`ResizeObserver`** インターフェイスは、要素 (`Element`) のコンテンツまたは境界ボックス、または `SVGElement` のバウンディングボックスの大きさが変化したことを報告します。

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

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

`ResizeObserver()`

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

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

なし。

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

`ResizeObserver.disconnect()`

特定のオブザーバーの監視対象の `Element` をすべて監視解除します。

`ResizeObserver.observe()`

指定された `Element` の監視を開始します。

`ResizeObserver.unobserve()`

指定された `Element` の監視を終了します。

例
-

resize-observer-text.html （ソースを参照）の例では、スライダーの値が変更され、それを含む `<div>` の幅が変更されると、リサイズオブザーバーを使用してヘッダーと段落の `font-size` を変更します。これは、ビューポートに影響がない要素のサイズの変化にも応答することができることを示しています。

また、オブザーバーをオフやオンにするためのチェックボックスも用意しています。オフにすると、 `<div>` の幅が変化してもテキストは変化しません。

JavaScript は次のようになります。

```js
const h1Elem = document.querySelector("h1");
const pElem = document.querySelector("p");
const divElem = document.querySelector("body > div");
const slider = document.querySelector('input[type="range"]');
const checkbox = document.querySelector('input[type="checkbox"]');

divElem.style.width = "600px";

slider.addEventListener("input", () => {
  divElem.style.width = `${slider.value}px`;
});

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      const contentBoxSize = entry.contentBoxSize[0];
      h1Elem.style.fontSize = `${Math.max(
 1.5,
 contentBoxSize.inlineSize / 200,
 )}rem`;
      pElem.style.fontSize = `${Math.max(
 1,
 contentBoxSize.inlineSize / 600,
 )}rem`;
    } else {
      h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentRect.width / 200,
 )}rem`;
      pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
    }
  }

  console.log("Size changed");
});

resizeObserver.observe(divElem);

checkbox.addEventListener("change", () => {
  if (checkbox.checked) {
    resizeObserver.observe(divElem);
  } else {
    resizeObserver.unobserve(divElem);
  }
});
```

監視エラー
-----

仕様に従う実装では、描画前（つまり、フレームがユーザーに表示される前）にリサイズイベントを呼び出します。リサイズ イベントがあった場合、スタイルとレイアウトが再評価され、さらにリサイズイベントが発生する可能性があります。循環的な依存関係による無限ループは、それぞれの反復処理中に DOM のより深い要素のみを処理することで対処します。この条件を満たさないリサイズイベントは次の描画に延期され、エラーイベントが `Window` オブジェクトに定義されたメッセージ文字列とともに発行されます。

**ResizeObserver loop completed with undelivered notifications.**

これはユーザーエージェントのロックを防ぐだけで、無限ループそのものを防ぐわけではないことに注意してください。例えば、次の例では divElem の幅が無限に広がり、コンソールに上記のようなエラーメッセージが毎フレーム発生します。

```js
const divElem = document.querySelector("body > div");

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    entry.target.style.width = entry.contentBoxSize[0].inlineSize + 10 + "px";
  }
});

window.addEventListener("error", function (e) {
  console.error(e.message);
});
```

エラーイベントがいつまでも発行されない限り、リサイズオブザーバーは決定し、安定した、おそらく正しいレイアウトを生成します。しかし、訪問者は、単一のフレームで起こるはずの一連の変更が、複数のフレームにわたって起こるため、壊れたレイアウトがフラッシュして見えるかもしれません。

仕様書
---

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

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

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

関連情報
----

* ボックスモデル
* `PerformanceObserver`
* `IntersectionObserver` （交差オブザーバー API の一部）
* 今後リリースされるコンテナークエリーは、レスポンシブデザインを実装するための有効な選択肢になるかもしれません。


AnimationPlaybackEvent - Web API

AnimationPlaybackEvent
======================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
AnimationPlaybackEvent はウェブアニメーション API のインターフェイスで、アニメーションイベントを表します。

アニメーションの再生時、これらはアニメーションイベントを通して `playState` の変化を報告します。

Event

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

`AnimationPlaybackEvent()`

新しい `AnimationPlaybackEvent` オブジェクトインスタンスを構築します。

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

`AnimationPlaybackEvent.currentTime` 読取専用

イベントを生成したアニメーションの現在時刻。

`AnimationPlaybackEvent.timelineTime` 読取専用

イベントを生成したアニメーションのタイムラインの時刻値。

仕様書
---

| Specification |
| --- |
| Web Animations # the-animationplaybackevent-interface |

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

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

関連情報
----

* ウェブアニメーション API
* `Animation.playState`


HTMLBRElement - Web API

HTMLBRElement
=============

**`HTMLBRElement`** インターフェイスはは HTML 改行要素 (`<br>`) を表現します。`HTMLElement` から継承しています。

EventTarget

Node

Element

HTMLElement

HTMLBRElement属性
--

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

`HTMLBRElement.clear`
非推奨

文字列で、浮動オブジェクトを回り込むテキストの流れを示します。

メソッド
----

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlbrelement |

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

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

関連情報
----

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


RTCDataChannelEvent - Web API

RTCDataChannelEvent
===================

**`RTCDataChannelEvent`** インターフェイスは、特定の `RTCPeerConnection` に関連するイベントを表します。

Event

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

`RTCDataChannelEvent()` (en-US)

新しい `RTCDataChannelEvent` を作成します。

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

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

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

このイベントに関連付けられた `RTCDataChannel` を返します。

例
-

この例では、 `datachannel` イベントハンドラーを設定して、データチャンネルの参照を保存し、監視する必要があるイベントのハンドラーを設定しています。 `channel` (en-US) プロパティは、他にもピアへの接続を表す `RTCDataChannel` を提供しています。

```js
pc.ondatachannel = (event) => {
  inboundDataChannel = event.channel;
  inboundDataChannel.onmessage = handleIncomingMessage;
  inboundDataChannel.onopen = handleChannelOpen;
  inboundDataChannel.onclose = handleChannelClose;
};
```

データチャンネルを使用する、より完全な別の例は、単純な RTCDataChannel の例 (en-US)を参照してください。

仕様書
---

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

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

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

関連情報
----

* WebRTC
* `RTCDataChannel`
* 単純な RTCDataChannel の例 (en-US)
* `RTCPeerConnection` （`datachannel` (en-US) イベントのターゲットインターフェイス）


Lock - Web API

Lock
====

Web Locks API の **`Lock`** インターフェイスは、ロックの名前とモードを提供します。これは `LockManager.request()` のコールバックが受け取る新しく要求されたロックのことも、`LockManager.query()` が返した動作中もしくは待機中のロックの記録のこともあります。

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

`Lock.mode` 読取専用

ロックの要求時に `LockManager.request()` に渡されたアクセスモードを返します。モードは `"exclusive"` (デフォルト) か `"shared"` のいずれかです。

`Lock.name` 読取専用

ロックの要求時に `LockManager.request()` に渡された名前を返します。

例
-

以下の例では、`LockManager.request()` の呼び出し時にプロパティ `mode` および `name` がどのように渡されるかを示します。`LockManager` は `navigator.locks` が返すオブジェクトです。

```js
navigator.locks.request("net\_db\_sync", show_lock_properties);
navigator.locks.request(
  "another\_lock",
  { mode: "shared" },
  show_lock_properties,
);

function show\_lock\_properties(lock) {
  console.log(`ロック名: ${lock.name}`);
  console.log(`ロックモード: ${lock.mode}`);
}
```

仕様書
---

| Specification |
| --- |
| Web Locks API # api-lock |

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

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


MIDIOutputMap - Web API

MIDIOutputMap
=============

Web MIDI API の読み取り専用インターフェイス **`MIDIOutputMap`** は、現在利用可能な MIDI 出力ポートの集合を提供します。

`MIDIOutputMap` のインスタンスは、キーを MIDI 出力の ID 文字列、対応する値を対応する `MIDIOutput` オブジェクトとする読み取り専用の `Map` 風オブジェクトです。

仕様書
---

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

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

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


Window - Web API

Window
======

**`Window`** インターフェイスは、 DOM 文書を収めるウィンドウを表します。 `document` プロパティは、そのウィンドウに読み込まれた DOM の document オブジェクト を指します。

特定の文書が属するウィンドウは、 `document.defaultView` プロパティを使用して取得できます。

グローバル変数の `window` は、スクリプトを実行しているウィンドウを表しており、 JavaScript コードに公開されます。

`Window` インターフェイスは、ユーザーインターフェイスのウィンドウの概念とは必ずしも直接関連づかない、さまざまな関数、名前空間、オブジェクト、コンストラクターのホームです。一方、 `Window` インターフェイスはグローバルで使用可能であることが必要な、さまざまなアイテムを含むのに適した場所です。これらの多くは JavaScript リファレンス や DOM リファレンス で文書化しています。

タブブラウザーでは、それぞれのタブが個々の `Window` オブジェクトで表されます。タブ内で実行している JavaScript から見えるグローバルの `window` は、常にコードを実行しているタブを表します。しかし、タブブラウザーであっても `resizeTo()` や `innerHeight` のように、タブを含むウィンドウ全体に適用されるプロパティやメソッドがあります。一般に、タブに所属することができない合理的な理由があるものは、代わりにウィンドウに属します。

EventTarget

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

DOM インターフェイスもご覧ください。

`DOMParser`

`DOMParser` は文字列で保存された XML や HTML ソースを DOM Document に解釈することができます。 `DOMParser` は DOM Parsing and Serialization で定められています。

`Image` (en-US)

`HTMLImageElement` を生成します。

`Option` (en-US)

`HTMLOptionElement` を生成します。

`StaticRange`
Experimental
 読取専用

`StaticRange` オブジェクトを作成する `StaticRange()` コンストラクターを返します。

`Worker`

ウェブワーカーを生成します。

`XMLSerializer`

DOM ツリーを XML または HTML ソースに変換します。

プロパティ
-----

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

オブジェクトであるプロパティ（例えば、組み込み要素のプロトタイプを上書きするためのもの）は、後述の個別セクションに記載しています。

`Window.clientInformation` 読取専用

`Window.navigator` の別名です。

`Window.closed` 読取専用

このプロパティは、現在のウィンドウが閉じているかどうかを示します。

`Window.console` 読取専用

ブラウザーのデバッグコンソールへアクセスするための console オブジェクトへの参照を返します。

`Window.customElements` 読取専用

`CustomElementRegistry` オブジェクトへの参照を返します。これは新しいカスタム要素の登録や、以前に登録したカスタム要素の情報を取得するために使用できます。

`Window.crypto` 読取専用

ブラウザーの crypto オブジェクトを返します。

`Window.devicePixelRatio` 読取専用

現在のディスプレイの、物理ピクセルと端末非依存ピクセルの比率を返します。

`Window.document` 読取専用

指定ウィンドウにある文書への参照を返します。

`Window.event`
非推奨
 読取専用

**現在のイベント**を返します。これは現在 JavaScript のコードのコンテキストが処理しているイベントです。また、現在処理しているイベントがない場合は `undefined` を返します。可能な限り、イベントハンドラーに直接渡した `Event` オブジェクトを代わりに使用してください。

`Window.external` (en-US)
非推奨
 読取専用

外部の検索プロバイダーをブラウザーに追加するための関数を持つオブジェクトを返します。

`Window.frameElement` 読取専用

ウィンドウが埋め込まれた要素を返します。ウィンドウが埋め込まれていない場合は、 null を返します。

`Window.frames` 読取専用

現在のウィンドウでのサブフレームの配列を返します。

`Window.fullScreen`

このプロパティはウィンドウが全画面で表示されているかどうかを示します。

`Window.history` 読取専用

history オブジェクトへの参照を返します。

`Window.innerHeight` 読取専用

ブラウザーウィンドウのコンテンツ領域の高さを取得し、もしあれば、水平スクロールバーを含みます。

`Window.innerWidth` 読取専用

ブラウザーウィンドウのコンテンツ領域の幅を取得し、もしあれば、垂直スクロールバーを含みます。

`isSecureContext`
Experimental
 読取専用

コンテキストが、安全なコンテキストを必要とする機能を使用することができるかどうかを表します。

`Window.length` 読取専用

ウィンドウ内のフレームの数を返します。 `window.frames` も参照してください。

`Window.location`

window オブジェクトのロケーション、または現在の URL を取得 / 設定します。

`Window.locationbar` 読取専用

ウィンドウ内で表示 / 非表示の切り替え (トグル) が可能な locationbar オブジェクトを返します。

`Window.localStorage` 読取専用

生成元のオリジンからのみアクセスが可能なデータを保存するために使用する、ローカルストレージオブジェクトへの参照を返します。

`Window.menubar` 読取専用

ウィンドウ内で表示 / 非表示の切り替え (トグル) が可能な menubar オブジェクトを返します。

`Window.messageManager`
Non-standard

このウィンドウの message manager オブジェクトを返します。

`Window.mozInnerScreenX` 読取専用
Non-standard

スクリーン座標系でウィンドウのビューポートの左上隅の水平 (X) 座標を返します。この値は CSS ピクセルで表します。必要に応じて画面のピクセルに換算するための係数については、`nsIDOMWindowUtils` の `mozScreenPixelsPerCSSPixel` をご覧ください。

`Window.mozInnerScreenY` 読取専用
Non-standard

スクリーン座標系で、ウィンドウビューポートの左上隅の垂直 (Y) 座標を返します。この値は CSS ピクセルで表します。必要に応じて画面のピクセルに換算するための係数については `mozScreenPixelsPerCSSPixel` をご覧ください。

`Window.name`

ウィンドウ名を取得 / 設定します。

`Window.navigator` 読取専用

navigator オブジェクトへの参照を返します。

`Window.opener`

現在のウィンドウを開いたウィンドウへの参照を返します。

`Window.outerHeight` 読取専用

ブラウザーウィンドウの外側の高さを取得します。

`Window.outerWidth` 読取専用

ブラウザーウィンドウの外側の幅を取得します。

`Window.pageXOffset` 読取専用

`window.scrollX` のエイリアスです。

`Window.pageYOffset` 読取専用

`window.scrollY` のエイリアスです。

`Window.parent` 読取専用

現在のウィンドウまたはサブフレームの親ウィンドウへの参照を返します。

`Window.performance` 読取専用

`Performance` オブジェクトを返します。これは `timing` や `navigation` 属性が含まれており、それぞれが パフォーマンス関連 (en-US) のデータを提供するオブジェクトです。詳細情報や使用例はナビゲーションタイミングの使用 (en-US)をご覧ください。

`Window.personalbar` 読取専用

ウィンドウ内で表示/非表示の切り替え (トグル) が可能な、 personalbar オブジェクトを返す

`Window.screen` 読取専用

ウィンドウに関連付けられた screen オブジェクトへの参照を返す

`Window.screenX` および `Window.screenLeft` (en-US) 読取専用

どちらのプロパティも、ユーザーのブラウザーのビューポートの左端から画面の左端までの水平方向の距離を返します。

`Window.screenY` および `Window.screenTop` (en-US) 読取専用

どちらのプロパティも、ユーザーのブラウザーのビューポートの上端から画面の上端までの垂直方向の距離を返します。

`Window.scrollbars` 読取専用

ウィンドウ内で表示 / 非表示の切り替え (トグル) が可能な、 scrollbars オブジェクトを返す

`Window.scrollMaxX`
Non-standard
 読取専用

ウィンドウが水平スクロールされ得る最大オフセット、すなわち、文書の幅からビューポートの幅を引いたものです。

`Window.scrollMaxY`
Non-standard
 読取専用

ウィンドウが垂直スクロールされ得る最大オフセット (すなわち、文書の高さからビューポートの高さを引いたもの) です。

`Window.scrollX` 読取専用

文書が現在水平にスクロールされているピクセル数を返します。

`Window.scrollY` 読取専用

文書が現在垂直にスクロールされているピクセル数を返します。

`Window.self` 読取専用

window オブジェクト自身へのオブジェクト参照を返す

`Window.sessionStorage`

生成元のオリジンからのみアクセスが可能なデータを保存するために使用する、セッションストレージへの参照を返します。

`Window.sidebar`
非推奨

Non-standard
 読取専用

サイドバーの window オブジェクトへの参照を返します。

`Window.speechSynthesis` 読取専用

`SpeechSynthesis` オブジェクトを返します。これは、ウェブ発声 API の音声合成機能を使用するためのエントリーポイントです。

`Window.status`
非推奨

ブラウザー下部のステータスバーのテキストを取得 / 設定します。

`Window.statusbar` 読取専用

ウィンドウ内で表示 / 非表示の切り替え (トグル) が可能な statusbar オブジェクトを返します。

`Window.toolbar` 読取専用

ウィンドウ内で表示 / 非表示の切り替え (トグル) が可能な toolbar オブジェクトを返します。

`Window.top` 読取専用

ウィンドウ階層における最上位のウィンドウへの参照を返します。このプロパティは読み取り専用です。

`Window.visualViewport` 読取専用

指定したウィンドウの視覚的なビューポートを表す `VisualViewport` (en-US) オブジェクトを返します。

`Window.window` 読取専用

現在のウィンドウへの参照を返します。

`window[0]`、`window[1]` など

フレーム内の `window` オブジェクトへの参照を返します。詳しくは `Window.frames` をご覧ください。

### 他のところで実装されているプロパティ

`caches` 読取専用

現在のコンテキストに関連付けられた `CacheStorage` オブジェクトを返します。このオブジェクトはオフラインで使用する資産を格納したり、リクエストに対して独自のレスポンスを生成したりするような機能が利用できます。

`indexedDB` 読取専用

Indexed データベースにアプリケーションが非同期にアクセスできる仕組みを提供します。このプロパティは `IDBFactory` オブジェクトを返します。

`origin` 読取専用

グローバルオブジェクトのオリジンを、文字列としてシリアライズして返します。

`Window.scheduler` (en-US) 読取専用

 現在のコンテキストに関連付けられた `Scheduler` (en-US) オブジェクトを返します。
 この点は、優先タスクスケジューリング API (en-US) を使用するためのエントリーポイントです。

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

`Window.content` および `Window._content`
Non-standard

非推奨
 読取専用

現在のウィンドウでのコンテンツ要素への参照を返します。 Firefox 57 より (当初は Nightly のみ) どちらも chrome (特権付き) コードに限り使用でき、ウェブでは使用できません。

`Window.defaultStatus`
非推奨

指定ウィンドウのステータスバーのテキストを取得 / 設定

`Window.orientation` (en-US) 読取専用
非推奨

`window.personalbar` と同義

`Window.returnValue`
非推奨

ウィンドウをモーダルダイアログとして表示する `window.showModalDialog()` メソッドを呼び出した関数へ返却される返値です。

メソッド
----

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

`Window.alert()`

警告ダイアログを表示します。

`Window.blur()`

ウィンドウからフォーカスを外します。

`Window.cancelAnimationFrame()`
Experimental

`Window.requestAnimationFrame` によって過去にスケジューリングされたコールバックをキャンセルできます。

`Window.cancelIdleCallback()` (en-US)
Experimental

`Window.requestIdleCallback` によって過去にスケジューリングされたコールバックをキャンセルできます。

`Window.clearImmediate()` (en-US)

`setImmediate` で設定した繰り返し処理をキャンセルします。

`Window.close()`

現在のウィンドウを閉じます。

`Window.confirm()`

ユーザーの応答が必要なメッセージを持つダイアログを表示します。

`Window.dump()`
Non-standard

コンソールにメッセージを出力します。

`Window.find()`

ウィンドウ内で指定された文字列を検索します。

`Window.focus()`

現在のウィンドウにフォーカスを当てます。

`Window.getComputedStyle()`

特定の要素の計算済みスタイルを取得します。計算済みスタイルは、要素のすべての CSS プロパティの計算値を示します。

`Window.getDefaultComputedStyle()` (en-US)
Non-standard

特定の要素について、作者のスタイルシートを無視したデフォルトの計算済みスタイルを取得します。

`Window.getSelection()`

選択されたアイテムを表す、セレクションオブジェクトを返します。

`Window.matchMedia()`

指定したメディアクエリ文字列を表す `MediaQueryList` オブジェクトを返します。

`Window.moveBy()`

現在のウィンドウを指定した距離移動します。

`Window.moveTo()`

ウィンドウを指定した位置に移動します。

`Window.open()`

新しいウィンドウを開きます。

`Window.postMessage()`

あるウィンドウから別のウィンドウへ、安全にデータ文字列を送信する手段を提供します。送信先ウィンドウは、送信元と同じドメインでなくてもかまいません。

`Window.print()`

現在の文書を印刷するためのダイアログを開きます。

`Window.prompt()`

ユーザーが入力ダイアログに入力したテキストを返します。

`Window.requestAnimationFrame()`

アニメーションが進行中であることをブラウザーに伝えて、次のアニメーションフレームのためにウィンドウの再描画を予定するよう要求します。

`Window.requestIdleCallback()`
Experimental

ブラウザーがアイドル状態であるときに実行するタスクをスケジューリングします。

`Window.resizeBy()`

現在のウィンドウを、指定した大きさの分だけ変更します。

`Window.resizeTo()`

ウィンドウを動的にリサイズします。

`Window.scroll()`

ウィンドウを文書内の特定の位置にスクロールします。

`Window.scrollBy()`

ウィンドウ内の文書を、指定した距離の分だけスクロールします。

`Window.scrollByLines()`
Non-standard

文書を指定した行数分、スクロールします。

`Window.scrollByPages()`
Non-standard

文書を指定したページ数分、スクロールします。

`Window.scrollTo()`

文書内の特定の位置に、ウィンドウをスクロールします。

`Window.setImmediate()` (en-US)
Non-standard

ブラウザーで他の高負荷なタスクが完了した後に、関数を実行します。

`Window.setResizable()` (en-US)
Non-standard

ユーザーがウィンドウをリサイズできるかを切り替えます。

`Window.sizeToContent()`
Non-standard

コンテンツに応じてウィンドウのサイズを調整します。

`Window.showOpenFilePicker()`

ユーザーがファイルまたは複数のファイルを選択できるファイルピッカーを表示します。

`Window.showSaveFilePicker()`

ユーザーがファイルを保存するためのファイルピッカーを表示します。

`Window.showDirectoryPicker()`

ディレクトリーを選択するピッカーが表示されます。

`Window.stop()`

ウィンドウの読み込み処理を停止します。

`Window.updateCommands()`
Non-standard

現在の chrome ウィンドウ (UI) のコマンドの状態を更新します。

### 他のところで実装されているメソッド

`EventTarget.addEventListener()`

ウィンドウの特定の種類のイベントにイベントハンドラーを登録します。

`EventTarget.dispatchEvent()`

イベントを動作させるために使用します。

`atob()`

Base64 エンコーディングを使用してエンコードされたデータの文字列をデコードします。

`btoa()`

バイナリデータを Base64 でエンコードした ASCII 文字列を生成します。

`clearInterval()`

`setInterval()` で繰り返し実行されるよう設定された命令をキャンセルします。

`clearTimeout()`

`setTimeout()` で遅延実行するよう設定した命令をキャンセルします。

`createImageBitmap()`

さまざまな画像ソースを受け入れて、`ImageBitmap` に解決される `Promise` を返します。任意で、始点 *(sx, sy)* から幅 sw、高さ sh の長方形でソースを切り抜くことができます。

`fetch()`

ネットワークからリソースを取り込む処理を開始します。

`EventTarget.removeEventListener()`

window からイベントリスナーを削除します。

`setInterval()`

ミリ秒単位で指定した時間が経過するたびに関数を実行するようスケジューリングします。

`setTimeout()`

指定した時間が経過したら関数を実行するようスケジューリングします。

`reportError()`

処理されない例外をエミュレートして、スクリプトのエラーを報告します。

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

`Window.back()`
Non-standard

非推奨

ウィンドウの履歴をひとつ戻ります。このメソッドは廃止されました。代わりに `window.history.back()` を使用してください。

`Window.captureEvents()`
Non-standard

非推奨

特定のタイプのイベントをすべてキャプチャするよう、ウィンドウに登録します。

`Window.forward()`
Non-standard

非推奨

履歴でひとつ先の文書に移動します。このメソッドは廃止されました。代わりに `window.history.forward()` を使用してください。

`Window.home()`
Non-standard

非推奨

ブラウザーのホームページに戻ります。

`Window.openDialog()` (en-US)
Non-standard

非推奨

新しいダイアログウィンドウを開きます。

`Window.releaseEvents()`
Non-standard

非推奨

特定のタイプのイベントのキャプチャを解放します。

`Window.showModalDialog()`
Non-standard

非推奨

モーダルダイアログを表示します。

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

これらは window オブジェクトのプロパティで、ウィンドウで発生する可能性がある、関心事となる可能性がある様々な出来事に対するイベントハンドラーを設定して有効にすることができます。

*このインターフェイスは、 `EventTarget` インターフェイスからイベントハンドラーを継承しています。*

`Window.onuserproximity`
非推奨

ユーザーの近接イベントのためのイベントハンドラープロパティです（`UserProximityEvent` を参照してください）。

### 他で実装されているイベントハンドラー

`GlobalEventHandlers.onabort`

ユーザーが読み込み処理中にキャンセルしたなど、リソースの読み込みが異常終了した際に呼び出されます。

`GlobalEventHandlers.oncontextmenu` (en-US)

右マウスボタンを押したときに呼び出されます。

`GlobalEventHandlers.onerror` (en-US)

リソースの読み込みが失敗したとき、あるいは実行時にエラーが発生したときに呼び出されます。 `error` イベントをご覧ください。

`GlobalEventHandlers.onload`

すべてのリソースおよび DOM が完全に読み込まれた後に呼び出されます。戻るボタンなどで、キャッシュからページが読み込まれたときは呼び出されません。

イベント
----

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

`error`

 リソースの読み込みに失敗したか、利用できないときに発生します。例えば、スクリプトに実行エラーがあった場合や、画像が見つからなかったり、無効であったりした場合です。
 `onerror` (en-US) プロパティからも利用できます。

`languagechange`

ユーザーの推奨される言語が変更されたときに、グローバルスコープオブジェクトに発生します。

`orientationchange`
非推奨

端末の向きが変化したときに発生します。

`devicemotion`

定期的に発生し、利用できる場合は、端末にかかっている物理的な加速度の量と傾きを示します。

`deviceorientation`

現在の端末の向きを地球の座標軸と比較する時期包囲センサーから新しいデータが利用できるようになったときに発生します。

`resize`

 ウィンドウのサイズが変更されたときに発行されます。
 `onresize` プロパティからも利用できます。

`storage`

ストレージ領域 (`localStorage` または `sessionStorage`) が他の文書のコンテキストから変更されたときに発生します。

`vrdisplayconnect`
非推奨

対応する VR 機器が接続されている場合に発行されます。

`vrdisplaydisconnect`
非推奨

対応する VR 機器がコンピューターから切り離されたときに発行されます。

`vrdisplayactivate`
非推奨

ディスプレイが表示できるようになったときに発行されます。

`vrdisplaydeactivate`
非推奨

ディスプレイが表示されなくなったときに発行されます。

`vrdisplayblur`
非推奨

ブラウザー、OS、VR ハードウェアの何らかの理由でディスプレイへの表示が一時停止されたときに発行されます。

`vrdisplayfocus`
非推奨

不鮮明であったディスプレイへの表示が再開されたときに発行されます。

`vrdisplaypresentchange`
非推奨

VR 機器の表示状態が変化したとき（表示から非表示、または非表示から非表示になったとき）に発行されます。

### アニメーションイベント

`animationcancel`

 アニメーションが予期せず中断されたときに発生します。
 `onanimationcancel` (en-US) プロパティからも利用できます。

`animationend`

 アニメーションが正常に終了したときに発生します。
 `onanimationend` (en-US) プロパティからも利用できます。

`animationiteration`

 アニメーションが一巡したときに発生します。
 `onanimationiteration` (en-US) プロパティからも利用できます。

`animationstart`

 アニメーションが開始されたときに発生します。
 `onanimationstart` (en-US) プロパティからも利用できます。

### クリップボードイベント

`copy`

 ブラウザーのユーザーインターフェイスからユーザーがコピー操作を行ったときに発生します。
 `oncopy` プロパティからも利用できます。

`cut`

 ブラウザーのユーザーインターフェイスからユーザーが切り取り操作を行ったときに発生します。
 `oncut` プロパティからも利用できます。

`paste`

 ブラウザーのユーザーインターフェイスからユーザーが貼り付け操作を行ったときに発生します。
 `onpaste` プロパティからも利用できます。

### 接続イベント

`offline`

ブラウザーがネットワークへのアクセスから切断され、 `navigator.onLine` の値が `false` に変わったときに発生します。

`online`

ブラウザーがネットワークへのアクセスに接続され、 `navigator.onLine` の値が `true` に変わったときに発生します。

### フォーカスイベント

`blur`

 要素がフォーカスを失ったときに発生します。
 `onblur` プロパティからも利用できます。

`focus`

 要素がフォーカスを得たときに発生します。
 `onfocus` プロパティからも利用できます。

### ゲームパッドイベント

`gamepadconnected`

ゲームパッドが接続された、またはゲームパッドのボタンや軸が初めて使用されたことをブラウザーが検出したときに発生します。

`gamepaddisconnected`

ゲームパッドが切断されたことをブラウザーが検出したときに発生します。

### 履歴イベント

`hashchange`

URL のフラグメント識別子 (URL の中で `#` 記号で始まり、それに続く部分) が変化したときに発生します。

`pagehide`

ブラウザーが現在の文書を非表示にして、その場所にセッションの履歴とは異なる文書を表示するよう切り替えているときに送信されます。これはたとえば、ユーザーが「戻る」ボタンをクリックしたとき、または「進む」ボタンをクリックしてセッション履歴を先に進めたときに発生します。

`pageshow`

ページが最初に読み込まれたときだけでなく、ユーザーが同じタブ内で別のページに移動した後にページに戻ったときなど、ナビゲーションタスクのためにブラウザーが文書を表示するときに送信されます。

`popstate`

アクティブな履歴項目が変化したときに発生します。

### ロード・アンロードイベント

`beforeunload`

ウィンドウ、文書、そのリソースがアンロードされるときに発生します。

`DOMContentLoaded`

文書が完全に読み込まれて解析されたときに、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに発生します。

`load`

 スタイルシートや画像などの依存するすべてのリソースを含め、ページ全体の読み込みが完了したときに発生します。
 `onload` プロパティからも利用できます。

`unload`

文書や子リソースがアンロードされるときに発生します。

### マニフェストイベント

`appinstalled`

ブラウザーがページをアプリケーションとしてインストールすることに成功したときに発生します。

`beforeinstallprompt` (en-US)

ウェブアプリケーションをインストールすることをユーザーに問い合わせようとするときに発生します。

### メッセージイベント

`message`

ウィンドウがメッセージを受け取ったとき、例えば他のブラウザーのコンテキストから `Window.postMessage()` が呼び出された時に発生します。

`messageerror`

`Window` オブジェクトが復元できないメッセージを受信したときに発生します。

### 印刷イベント

`afterprint`

関連づけられた文書の印刷が始まったか、印刷プレビューが閉じた後に発生します。

`beforeprint`

関連づけられた文書の印刷が始まるか、印刷プレビューが表示されるときに発生します。

### プロミス拒否イベント

`rejectionhandled`

拒否を処理するハンドラーがあるかどうかにかかわらず、 JavaScript の `Promise` が拒否されるたびに送られます。

`unhandledrejection`

JavaScript の `Promise` が拒否されたものの、拒否を処理するハンドラーがないときに送られます。

### トランジションイベント

`transitioncancel`

CSS トランジションが中止されたときに発生します。
 `ontransitioncancel` プロパティからも利用できます。

`transitionend`

CSS トランジションが完了したときに発生します。
 `ontransitionend` プロパティからも利用できます。

`transitionrun`

CSS トランジションが初めて作成されたときに発生します。
 `ontransitionrun` プロパティからも利用できます。

`transitionstart`

CSS トランジションが実際に開始されたときに発生します。
 `ontransitionstart` プロパティからも利用できます。

### WebVR イベント

`vrdisplayactivate`

 VR ディスプレイが表示する準備ができたとき、例えば HMD がスタンバイ状態に移行したり、装着して準備ができたときに発生します。
 `onvrdisplayactivate` (en-US) プロパティからも利用できます。

`vrdisplayblur`

 ブラウザー、 OS、 VR ハードウェアの何れかが原因で、 VR ディスプレイの表示が停止したときに発生します。
 `onvrdisplayblur` (en-US) プロパティからも利用できます。

`vrdisplayconnect`

 互換性のある VR ディスプレイがコンピューターに接続されたときに発生します。
 `onvrdisplayconnect` (en-US) プロパティからも利用できます。

`vrdisplaydeactivate`

 VR ディスプレイが表示をやめる可能性があるとき、例えば HMD が一定時間使用されなかったためにスタンバイまたはスリープモードに入ったときなどに発生します。
 `onvrdisplaydeactivate` (en-US) プロパティからも利用できます。

`vrdisplaydisconnect`

 互換性のある VR ディスプレイがコンピュータから切り離されたときに発生します。
 `onvrdisplaydisconnect` (en-US) プロパティからも利用できます。

`vrdisplayfocus`

 VR ディスプレイへの表示を休んだ後で復帰したときに発生します。
 `onvrdisplayfocus` (en-US) プロパティからも利用できます。

`vrdisplaypresentchange`

 VR ディスプレイの表示状態が変化したときに発生します。 — すなわち、表示を始めたり、表示を消したり、などです。
 `onvrdisplaypresentchange` (en-US) プロパティからも利用できます。

`vrdisplaypointerrestricted`

 VR ディスプレイのポインター入力の消費が pointerlocked 要素によって抑止されたときに発生します。
 `onvrdisplaypointerrestricted` (en-US) プロパティからも利用できます。

`vrdisplaypointerunrestricted`

 VR ディスプレイのポインター入力の消費が pointerlocked 要素によって抑止が解除されたときに発生します。
 `onvrdisplaypointerunrestricted` (en-US) プロパティからも利用できます。

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

DOM リファレンスをご覧ください。

仕様書
---

| Specification |
| --- |
| HTML Standard # the-window-object |

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

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


SVGFontElement - Web API

SVGFontElement
==============

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

`SVGFontElement` インタフェースは、SVG の `<font>` (en-US) 要素に対応するインタフェースです。

SVG の DOM 経由での `<font>` (en-US) 要素の属性へのオブジェクト指向アクセスは出来ません。

プロパティ
-----

`SVGFontElement` インタフェースは固有のプロパティを持ちませんが、親である `SVGElement` のプロパティを継承し、また`SVGExternalResourcesRequired` と `SVGStylable` (en-US) からプロパティを実装しています。

メソッド
----

`SVGFontElement` インタフェースは固有のメソッドを持ちませんが親である `SVGElement` のメソッドを継承し、また`SVGExternalResourcesRequired` と `SVGStylable` (en-US) からメソッドを実装しています。

仕様
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # InterfaceSVGFontElement |

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

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

関連情報
----

* `<font>` (en-US) SVG 要素


MediaStream Image Capture API - Web API

MediaStream Image Capture API
=============================

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

**MediaStream Image Capture API** は、写真デバイスから画像やビデオをキャプチャするための API です。データをキャプチャするだけでなく、画像サイズ、赤目軽減、フラッシュの有無、現在の設定などのデバイス機能に関する情報を取得することもできます。逆に、API では、デバイスが許可する制限内で機能を設定できます。

MediaStream image capture の概念と使用方法
----------------------------------

画像またはビデオストリームを検索するプロセスは、以下のように行われます。サンプルコードは、Chrome の Image Capture の例を基にしています。

まず、`MediaDevices.getUserMedia()` を呼び出してデバイスへの参照を取得します。`getUserMedia()` メソッドではより詳細な機能を要求できますが、以下の例では単に利用可能な任意のビデオデバイスを要求しています。このメソッドは、`MediaStream` オブジェクトで解決する `Promise` を返します。

```js
navigator.mediaDevices.getUserMedia({ video: true }).then((mediaStream) => {
  // ストリームについて何らかの処理を行う
});
```

次に、メディアストリームから映像部分を分離します。これは、`MediaStream.getVideoTracks()` を呼ぶことで行います。これは `MediaStreamTrack` オブジェクトの配列を返します。以下のコードでは、`MediaStreamTrack` の配列の最初のアイテムが使いたいものだと仮定しています。`MediaStreamTrack` オブジェクトのプロパティを用いて使いたいものを選ぶことができます。

```js
const track = mediaStream.getVideoTracks()[0];
```

この時点で、映像を取得する前にデバイスの機能の設定をしたいかもしれません。これは、他の操作をする前にトラックオブジェクトの `applyConstraints()` (en-US) を呼ぶことでできます。

```js
let zoom = document.querySelector("#zoom");
const capabilities = track.getCapabilities();
// ズームに対応しているかをチェックする
if (!capabilities.zoom) {
  return;
}
track.applyConstraints({ advanced: [{ zoom: zoom.value }] });
```

最後に、`MediaStreamTrack` オブジェクトを `ImageCapture()` (en-US) コンストラクターに渡します。`MediaStream` にはいくつかのトラックの種類があり、それらを取得する複数の方法を提供していますが、`ImageCapture` コンストラクターは `MediaStreamTrack.kind` が `"video"` でない場合、種類が `NotSupportedError` である `DOMException` を投げます。

```js
let imageCapture = new ImageCapture(track);
```

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

`ImageCapture` (en-US)

有効な `MediaStreamTrack` を通じて参照される写真デバイスから画像をキャプチャするためのインターフェイス。

`PhotoCapabilities` (en-US)

接続されている写真デバイスに利用可能な設定オプションを提供します。`ImageCapture.getPhotoCapabilities()` (en-US) を呼び出して `PhotoCapabilities` オブジェクトを取得します。

仕様書
---

| Specification |
| --- |
| MediaStream Image Capture # imagecaptureapi |

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

### ImageCapture

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

### PhotoCapabilities

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

関連情報
----

* `MediaStream`
* `MediaStreamTrack`


Text - Web API

Text
====

**`Text`** インターフェイスは、 DOM ツリー内でテキストノード (`node`) を表します。

EventTarget

Node

CharacterData

Text
テキストノードが何であるかを理解するために、以下の文書を考えてみてください。

```html
<html lang="en" class="e">
  <head>
    <title>Aliens?</title>
  </head>
  <body>
    Why yes.
  </body>
</html>
```

この文書には 5 つのテキストノードがあり、以下のような内容になっています。

* `"\n "`（`<head>` 開始タグの後、改行に続いて 4 つの空白）
* `"Aliens?"`（`title` 要素の内容）
* `"\n "`（`</head>` 終了タグの後、改行に続いて 2 つの空白）
* `"\n "`（`<body>` 開始タグの後、改行に続いて 2 つの空白）
* `"\n Why yes.\n \n\n"` （`body` 要素の内容）

これらのテキストノードは、それぞれがこの記事で説明されているプロパティとメソッドを持つオブジェクトです。

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

`Text()`

引数をテキストコンテンツとして持つ、新しい `Text` ノードを返します。

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

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

`Text.assignedSlot` 読取専用

ノードが挿入されている `<slot>` を表す `HTMLSlotElement` を返します。

`Text.wholeText` 読取専用

文字列で、この `Node` に論理的に隣接しているすべての `Text` ノードのテキストを、文書内で現れる順に結合して返します。

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

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

`Text.splitText`

指定したオフセット位置で、ノードを 2 つに分割します。

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-text |

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

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

関連情報
----

* DOM API


FormData - Web API

FormData
========

**`FormData`** インターフェイスは、フォームフィールドおよびそれらの値から表現されるキーと値のペアのセットを簡単に構築する手段を提供します。これは `fetch()`、`XMLHttpRequest.send()`、`navigator.sendBeacon()` の各メソッドを用いることで送信が可能です。エンコーディング型を `"multipart/form-data"` に設定した場合にフォームが使用するものと同じ形式を使用します。

単純な `GET` の送信を用いる `<form>` が行うようなクエリー引数を生成したい場合は、`URLSearchParams` コンストラクターに直接渡すことも可能です。

`FormData` を実装したオブジェクトは、`entries()` の代わりに `for...of` 構造の内部で直接使用できます。`for (const p of myFormData)` は `for (const p of myFormData.entries())` と等価です。

**メモ:** この機能はウェブワーカーで使用できます。

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

`FormData()`

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

メソッド
----

`FormData.append()`

`FormData` オブジェクト内の既存のキーに新たな値を追加するか、キーが存在しない場合はキーを追加します。

`FormData.delete()`

`FormData` オブジェクトからキーと値のペアを削除します。

`FormData.entries()`

この `FormData` に含まれているすべてのキーと値のペアを走査するイテレーターを返します。

`FormData.get()`

`FormData` オブジェクトの中から、指定したキーに関連付けられた最初の値を返します。

`FormData.getAll()`

`FormData` の中から、指定したキーに関連付けられたすべての値の配列を返します。

`FormData.has()`

`FormData` オブジェクトがあるキーと値のペアを持っているかを示す論理値を返します。

`FormData.keys()`

オブジェクト内に存在するキーと値のペアから、すべてのキーを走査できるようにするためのイテレーターを返します。

`FormData.set()`

`FormData` オブジェクト内の既存のキーに新たな値を設定するか、キーが存在しない場合はキーと値のペアを追加します。

`FormData.values()`

オブジェクト内に存在するキーと値のペアから、すべての値を走査できるようにするためのイテレーターを返します。

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # interface-formdata |

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

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

関連情報
----

* FormData オブジェクトの使用
* `<form>`


DOMPointReadOnly - Web API

DOMPointReadOnly
================

**`DOMPointReadOnly`** インターフェイスは、 `DOMPoint` が座標系で 2D または 3D の点を定義するために使用する座標フィールドと透視図フィールドを指定するものです。

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

新しい `DOMPointReadOnly` インスタンスを作成するには、 2 つの方法があります。まず、コンストラクターを使用し、各次元の引数の値、そしてオプションで視点位置を渡すことができます。

```js
/\* 2D \*/
const point2D = new DOMPointReadOnly(50, 50);

/\* 3D \*/
const point3D = new DOMPointReadOnly(50, 50, 25);

/\* 3D で視点位置付き \*/
const point3DPerspective = new DOMPointReadOnly(100, 100, 100, 1.0);
```

もう一つの選択肢は、静的な `DOMPointReadOnly.fromPoint()` メソッドを使用する方法です。

```js
const point = DOMPointReadOnly.fromPoint({ x: 100, y: 100, z: 50, w: 1.0 });
```

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

`DOMPointReadOnly()`

座標と視点位置を指定して、新しい `DOMPointReadOnly` オブジェクトを作成します。オブジェクトを使用して点を作成する場合は、代わりに `DOMPointReadOnly.fromPoint()` を使用することができます。

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

`DOMPointReadOnly.x` 読取専用

この点の水平座標である `x` です。

`DOMPointReadOnly.y` 読取専用

この点の垂直座標である `y` です。

`DOMPointReadOnly.z` 読取専用

この点の奥行座標である `z` です。

`DOMPointReadOnly.w` 読取専用

この点の視点位置である `w` です。

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

`DOMPointReadOnly.fromPoint()`

指定されたオブジェクトの座標を指定して、新しい `DOMPointReadOnly` オブジェクトを作成する静的メソッドです。

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

`matrixTransform()`

オブジェクトとして指定された行列変換を `DOMPointReadOnly` オブジェクトに適用します。

`toJSON()`

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

仕様書
---

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

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

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

関連情報
----

* `DOMPoint`
* `DOMRect`
* `DOMMatrix`


HIDConnectionEvent - Web API

HIDConnectionEvent
==================

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

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

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

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

`WebHID API` の **`HIDConnectionEvent`** インターフェイスは、HID の接続イベントを表します。このイベント型は、Input レポートを受信した際に `HID.onconnect` や `HID.ondisconnect` に渡される型です。

Event

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

`HIDConnectionEvent()`
Experimental

新しい `HIDConnectionEvent` オブジェクトを返します。通常は、イベントは Input レポートを受信した際に生成されるため、このコンストラクターは使用されません。

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

*`Event` から継承したプロパティもあります。*

`HIDConnectionEvent.device` 読取専用
Experimental

この接続イベントに関係する `HIDDevice` のインスタンスを返します。

例
-

この例では、`connect` イベントと `disconnect` イベントにイベントリスナーを登録します。そして、コンソールに `HIDDevice.productName` を出力します。

```js
navigator.hid.addEventListener("connect", ({ device }) => {
  console.log(`HID が接続されました : ${device.productName}`);
});

navigator.hid.addEventListener("disconnect", ({ device }) => {
  console.log(`HID が切断されました : ${device.productName}`);
});
```

仕様書
---

| Specification |
| --- |
| WebHID API # dom-hidconnectionevent |

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

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


InstallEvent - Web API

InstallEvent
============

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

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

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

このインターフェイスは `ExtendableEvent` インターフェイスを継承しています。

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

`InstallEvent()`
非推奨

Non-standard

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

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

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

`InstallEvent.activeWorker` 読取専用
非推奨

Non-standard

現在ページを制御している `ServiceWorker` を返します。

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

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

例
-

このコードスニペットは、サービスワーカーの先読みサンプルのものです（先読みのライブ実行を参照してください）。このコードは `ServiceWorkerGlobalScope.oninstall` で `ServiceWorkerRegistration.installing` ワーカーをインストールしたとみなすことを、渡されたプロミスが正常に解決するまで遅らせています。プロミスは、すべてのリソースのフェッチとキャッシュが完了したとき、または何らかの例外が発生したときに解決します。

このコードスニペットでは、サービスワーカーが使用するキャッシュをバージョン管理するためのベストプラクティスも示しています。この例ではキャッシュを 1 つしか保有していませんが、この手法を複数のキャッシュに使用することができます。このコードでは、キャッシュの一括指定と、バージョン管理された固有のキャッシュ名とを割り当てています。

**メモ:** Google Chromeでは、chrome://serviceworker-internals 経由でアクセスした関連サービスワーカーの "Inspect" インターフェイスでログ出力します。

```js
const CACHE\_VERSION = 1;
const CURRENT\_CACHES = {
  prefetch: `prefetch-cache-v${CACHE\_VERSION}`,
};

self.addEventListener("install", (event) => {
  const urlsToPrefetch = [
    "./static/pre\_fetched.txt",
    "./static/pre\_fetched.html",
    "https://www.chromium.org/\_/rsrc/1302286216006/config/customLogo.gif",
  ];

  console.log(
    "Handling install event. Resources to pre-fetch:",
    urlsToPrefetch,
  );

  event.waitUntil(
    caches
      .open(CURRENT\_CACHES["prefetch"])
      .then((cache) => {
        return cache
          .addAll(
            urlsToPrefetch.map((urlToPrefetch) => {
              return new Request(urlToPrefetch, { mode: "no-cors" });
            }),
          )
          .then(() => {
            console.log("All resources have been fetched and cached.");
          });
      })
      .catch((error) => {
        console.error("Pre-fetching failed:", error);
      }),
  );
});
```

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

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

関連情報
----

* `NotificationEvent`
* `Promise`
* フェッチ API


DecompressionStream - Web API

DecompressionStream
===================

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

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

`DecompressionStream()`

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

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

`DecompressionStream.readable`

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

`DecompressionStream.writable`

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

例
-

この例では、blob を gzip 圧縮を用いて展開します。

```js
const ds = new DecompressionStream("gzip");
const decompressedStream = blob.stream().pipeThrough(ds);
```

仕様書
---

| Specification |
| --- |
| Compression Streams # decompression-stream |

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

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


Screen Orientation API - Web API

Screen Orientation API
======================

**Screen Orientation API** は、画面の向きに関する情報を提供します。

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

* `ScreenOrientation`
仕様書
---

| Specification |
| --- |
| Screen Orientation # screenorientation-interface |

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

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


Plugin - Web API

Plugin
======

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

Plugin` インターフェイスは、 ブラウザーのプラグインに関する情報を提供します。

**メモ:** 最新のブラウザーでは、 `Plugin` オブジェクトのプロパティを列挙することができなくなりました。

プロパティ
-----

`Plugin.description` 読取専用

人間の読みやすい形式の、プラグインに関する説明。

`Plugin.filename` 読取専用

プラグインのファイルのファイル名。

`Plugin.name` 読取専用

プラグインの名称。

`Plugin.version` 読取専用

プラグインのバージョン番号文字列。

メソッド
----

`Plugin.item`

対応するコンテンツ型の MIME タイプを返します。対応する型のリストへのインデックス番号を指定します。

`Plugin.namedItem`

対応している項目の MIME タイプを返します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-plugin |

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

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


SourceBuffer - Web API

SourceBuffer
============

**`SourceBuffer`** インターフェイスは、`MediaSource` オブジェクトを介して `HTMLMediaElement` に渡されて再生されるメディアのチャンク（大きな塊）を表します。 これは、1 つまたは複数のメディアセグメントで構成できます。

EventTarget

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

`SourceBuffer.appendWindowEnd`

追加ウィンドウの終わりのタイムスタンプを制御します。

`SourceBuffer.appendWindowStart`

追加ウィンドウ（append window）の始まりのタイムスタンプを制御します。 これは、`SourceBuffer` に追加されるメディアデータをフィルタリングするために使用できるタイムスタンプの範囲です。 この範囲内のタイムスタンプを持つコード化されたメディアフレームは追加されますが、範囲外のものは除外されます。

`SourceBuffer.audioTracks` 読取専用

`SourceBuffer` 内に現在含まれている音声トラックのリスト。

`SourceBuffer.buffered` 読取専用

`SourceBuffer` に現在バッファーされている時間範囲を返します。

`SourceBuffer.mode`

`SourceBuffer` 内のメディアセグメントの順序を、任意の順序で追加できるか、または厳密な順序で保持する必要があるかを制御します。

`SourceBuffer.textTracks` 読取専用
Experimental

`SourceBuffer` 内に現在含まれているテキストトラックのリストです。

`SourceBuffer.timestampOffset`

その後 `SourceBuffer` に追加されるメディアセグメント内のタイムスタンプに適用されるオフセットを制御します。

`SourceBuffer.updating` 読取専用

論理値で、`SourceBuffer` が現在更新されているかどうか、つまり `SourceBuffer.appendBuffer()` または `SourceBuffer.remove()` の操作が現在進行中かどうかを示します。

`SourceBuffer.videoTracks` 読取専用

`SourceBuffer` 内に現在含まれている動画トラックのリストです。。

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

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

`SourceBuffer.abort()`

現在のセグメントを中止し、セグメントパーサーをリセットします。

`SourceBuffer.appendBuffer()`

`ArrayBuffer`、`TypedArray`、`DataView` のいずれかのオブジェクトからのメディアセグメントデータを `SourceBuffer` に追加します。

`SourceBuffer.appendBufferAsync()`
Non-standard

Experimental

指定されたバッファーを `SourceBuffer` に非同期的に追加するプロセスを開始します。 バッファが追加されると満たされる `Promise` を返します。

`SourceBuffer.changeType()`

今後の `appendBuffer()` の呼び出しで、新しいデータが準拠することを期待する MIME タイプを変更します。

`SourceBuffer.remove()`

`SourceBuffer` から特定の時間範囲内のメディアセグメントを削除します。

`SourceBuffer.removeAsync()`
Non-standard

Experimental

指定された範囲のメディアセグメントを `SourceBuffer` から非同期的に削除するプロセスを開始します。 一致するすべてのセグメントが削除されると満たされる `Promise` を返します。

イベント
----

`abort`

`SourceBuffer.appendBuffer()` または `SourceBuffer.appendStream()` が `SourceBuffer.abort()` の呼び出しによって終了するたびに発生します。 `SourceBuffer.updating` は `true` から `false` に変更されます。

`error`

`SourceBuffer.appendBuffer()` 中または `SourceBuffer.appendStream()` 中にエラーが発生するたびに発生します。 `SourceBuffer.updating` は `true` から `false` に変更されます。

`update`

`SourceBuffer.appendBuffer()` メソッドまたは `SourceBuffer.remove()` が完了するたびに発生します。 `SourceBuffer.updating` は `true` から `false` に変更されます。 このイベントは、`onupdateend` の前に発生します。

`updateend`

`SourceBuffer.appendBuffer()` メソッドまたは `SourceBuffer.remove()` が終了するたびに発生します。 このイベントは、`onupdate` の後に発生します。

`updatestart`

`SourceBuffer.updating` の値が `false` から `true` に遷移するたびに発生します。

例
-

次の簡単な例では、動画をチャンクごとに可能な限り高速でロードし、できるだけ早く再生します。 この例は Nick Desaulniers によって作成され、ここでライブで見ることができます（さらに調査するためにソースをダウンロードすることもできます）。

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

const assetURL = "frag\_bunny.mp4";
// Blink はコーデックに関して特定する必要がある
// ./mp4info frag\_bunny.mp4 | grep Codec
const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) {
  const mediaSource = new MediaSource();
  console.log(mediaSource.readyState); // closed
  video.src = URL.createObjectURL(mediaSource);
  mediaSource.addEventListener("sourceopen", sourceOpen);
} else {
  console.error(
    `${mimeCodec} の MIME タイプまたはコーデックには対応していません`,
    mimeCodec,
  );
}

function sourceOpen() {
  console.log(this.readyState); // open
  const mediaSource = this;
  const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  fetchAB(assetURL, (buf) => {
    sourceBuffer.addEventListener("updateend", () => {
      mediaSource.endOfStream();
      video.play();
      console.log(mediaSource.readyState); // ended
    });
    sourceBuffer.appendBuffer(buf);
  });
}

function fetchAB(url, cb) {
  console.log(url);
  const xhr = new XMLHttpRequest();
  xhr.open("get", url);
  xhr.responseType = "arraybuffer";
  xhr.onload = () => {
    cb(xhr.response);
  };
  xhr.send();
}
```

仕様書
---

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

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

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

関連情報
----

* `MediaSource`
* `SourceBufferList`


HTMLLegendElement - Web API

HTMLLegendElement
=================

**`HTMLLegendElement`** は、`<legend>` 要素のプロパティにアクセスできるようにするインターフェイスです。 `HTMLElement` インターフェイスからプロパティとメソッドを継承しています。

EventTarget

Node

Element

HTMLElement

HTMLLegendElementプロパティ
-----

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

`HTMLLegendElement.form` 読取専用

この凡例 (legend) が所属するフォームフォームを表す `HTMLFormElement` です。この凡例の親が fieldset 要素であれば、この属性は親 fieldset 要素の **form** 属性と同じ値を返します。それ以外の場合は、null を返します。

`HTMLLegendElement.accessKey`

文字列で、この要素にアクセスするための単一の文字のアクセスキーを表します。

`HTMLLegendElement.align`
非推奨

文字列で、フォームのセットに対する相対的な配置を表します。

メソッド
----

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmllegendelement |

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

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

関連情報
----

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


SpeechRecognitionAlternative - Web API

SpeechRecognitionAlternative
============================

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

Web Speech API の **`SpeechRecognitionAlternative`** インターフェイスは、音声認識サービスにより認識されている一つの単語を表します。

プロパティ
-----

`SpeechRecognitionAlternative.transcript` 読取専用

認識された単語の transcript を含む文字列を返します。

`SpeechRecognitionAlternative.confidence` (en-US) 読取専用

音声認識システムの認識の正しさの信頼度を表す評価を数値で返します。

例
-

このコードは、私たちの Speech color changer の例から抜粋しました。

```js
recognition.onresult = function (event) {
  // The SpeechRecognitionEvent results property returns a SpeechRecognitionResultList object
  // The SpeechRecognitionResultList object contains SpeechRecognitionResult objects.
  // It has a getter so it can be accessed like an array
  // The first [0] returns the SpeechRecognitionResult at position 0.
  // Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects that contain individual results.
  // These also have getters so they can be accessed like arrays.
  // The second [0] returns the SpeechRecognitionAlternative at position 0.
  // We then return the transcript property of the SpeechRecognitionAlternative object
  var color = event.results[0][0].transcript;
  diagnostic.textContent = "Result received: " + color + ".";
  bg.style.backgroundColor = color;
};
```

仕様
--

| Specification |
| --- |
| Web Speech API # speechreco-alternative |

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

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

### Firefox OS の許可設定

アプリ内で音声認識を使用するには、manifest ファイルに次の許可設定を指定する必要があります:

```json
"permissions": {
  "audio-capture" : {
    "description" : "Audio capture"
  },
  "speech-recognition" : {
    "description" : "Speech recognition"
  }
}
```

特権アプリも必要なため、以下も同様に含める必要があります:

```json
  "type": "privileged"
```

関連項目
----

* Web Speech API


ReadableStreamDefaultReader - Web API

ReadableStreamDefaultReader
===========================

**`ReadableStreamDefaultReader`** はストリーム API のインターフェイスで、ネットワークから提供されたストリームデータ（フェッチリクエストなど）を読み取るために使用できる既定のリーダーを表します。

`ReadableStreamDefaultReader` は、任意の種類の基盤ソースを持つ `ReadableStream` からの読み取りに使用することができます（基盤バイトソースを持つ読み取り可能なストリームにのみ使用することができる `ReadableStreamBYOBReader` とは異なります）。

 ただし、基盤ソースからのゼロコピー移譲は、バッファーを自動割り当てするバイトソースにのみ対応していることに注意してください。
 言い換えれば、ストリームは構築時に、`type="bytes"` と `autoAllocateChunkSize` の両方が指定されたものでなければなりません。他にも基盤ソースがある場合、ストリームは常に内部キューからのデータで読み取りリクエストを満たします。

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

`ReadableStreamDefaultReader()`

`ReadableStreamDefaultReader` オブジェクトのインスタンスを作成して返します。

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

`ReadableStreamDefaultReader.closed` 読取専用

ストリーミングプロセスの終了に応答するコードを記述できます。 ストリームが閉じられた場合、またはリーダーのロックが解除された場合に履行されるプロミスを返します。 ストリームがエラーの場合は拒否されます。

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

`ReadableStreamDefaultReader.cancel()`

ストリームをキャンセルし、コンシューマーがストリームに興味を失ったことを通知します。 提供された引数 `reason` は、基盤ソースに与えられ、使用する場合もしない場合もあります。

`ReadableStreamDefaultReader.read()`

ストリームの内部キュー内の次のチャンクへのアクセスを提供するプロミスを返します。

`ReadableStreamDefaultReader.releaseLock()`

ストリームのリーダーのロックを解除します。

例
-

次の例では、別のリソースから取得した HTML の断片をブラウザーにストリーミングするために、人工的な `Response` を作成します。

これは `Uint8Array` と組み合わせた `ReadableStream` の使用方法を示します。

```js
fetch("https://www.example.org/").then((response) => {
  const reader = response.body.getReader();
  const stream = new ReadableStream({
    start(controller) {
      // 次の関数は各データチャンクを処理します
      function push() {
        // done は Boolean で、value は Uint8Array です
        return reader.read().then(({ done, value }) => {
          // 読み取るデータはもうありませんか？
          if (done) {
            // データの送信が完了したことをブラウザーに伝えます
            controller.close();
            return;
          }

          // データを取得し、コントローラー経由でブラウザーに送信します
          controller.enqueue(value);
          push();
        });
      }

      push();
    },
  });

  return new Response(stream, { headers: { "Content-Type": "text/html" } });
});
```

仕様書
---

| Specification |
| --- |
| Streams Standard # default-reader-class |

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

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

関r根情報
-----

* ストリーム API の概念
* 読み取り可能なストリームの使用
* `ReadableStream`
* WHATWG Stream Visualizer, for a basic visualization of readable, writable, and transform streams.
* Web-streams-polyfill or sd-streams - polyfills


ChannelSplitterNode - Web API

ChannelSplitterNode
===================

`ChannelSplitterNode` インターフェイスは、よく反対の `ChannelMergerNode` とともに用いられ、音声入力のそれぞれのチャンネルをモノラル出力の組に分離します。これは、各チャンネルに別々にアクセスするのに便利です。たとえば、各チャンネルのゲインを別々に制御する必要があるチャンネルミキシングを行うのに便利です。

![1 個の入力を 6 個のモノラル出力に分離するデフォルトの ChannelSplitterNode](/ja/docs/Web/API/ChannelSplitterNode/webaudiosplitter.png)

`ChannelSplitterNode` の入力が常に 1 個だけの場合、出力の数はコンストラクターや `AudioContext.createChannelSplitter()` の引数によって決まります。値が指定されなかった場合は、既定の `6` になります。入力のチャンネル数が出力数より少ない場合は、余った出力は無音になります。

EventTarget

AudioNode

ChannelSplitterNode

|  |  |
| --- | --- |
| 入力数 | `1` |
| 出力数 | 可変。既定値は`6` です。 |
| チャンネルカウントモード | `"explicit"` 古い実装では、仕様書の以前のバージョンに従って
 `"max"` が使用されます。
  |
| チャンネル数 |
 出力数に固定されます。古い実装では、仕様書の以前のバージョンに従って
 `2` が使用されます。(既定のカウントモードでは使用されません)
  |
| チャンネルの意味 | `"discrete"` |

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

`ChannelSplitterNode()`

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

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

*専用のプロパティはありません。親の `AudioNode` からプロパティを継承します。*

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

*専用のメソッドはありません。親の `AudioNode` からメソッドを継承します。*

例
-

`BaseAudioContext.createChannelSplitter()` にサンプルコードがあります。

仕様書
---

| Specification |
| --- |
| Web Audio API # ChannelSplitterNode |

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

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

関連情報
----

* Web Audio API の使用


SVGRect - Web API

SVGRect
=======

**`SVGRect`** は矩形を表します。矩形は、最小の x の値と最小の y の値を特定する x と y の座標の対と、幅と、高さから構成されており、これらは、非負であるものと考えられます。

**`SVGRect`** オブジェクトは、読み取り専用だと指定することができます。そのことは、そのオブジェクトをいじろうとする試みによって、例外が投げられるという結果になるだろう、ということを意味します。

属性
--

`SVGRect.x`

この座標の厳密な結果は、各要素に依存します。もしこの属性が指定済みでなければ、結果は、あたかも `0` という値が指定されているかのようになります。

`SVGRect.y`

この座標の厳密な結果は、各要素に依存します。もしこの属性が指定済みでなければ、結果は、あたかも `0` という値が指定されているかのようになります。

`SVGRect.width`

これは矩形の幅を表します。負の値はエラーを招きます。0 という値は要素の描画を無効にします。

`SVGRect.height`

これは矩形の高さを表します。負の値はエラーを招きます。0 という値は要素の描画を無効にします。

メソッド
----

*このインタフェースは、親から、すなわち* *`SVGGeometryElement` (en-US) から、メソッドを継承しています。*

仕様
--

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

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

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


AbstractRange - Web API

AbstractRange
=============

**`AbstractRange`** は抽象インターフェイスで、すべての DOM の範囲型を定義するための基本クラスです。 **range** は、文書内のコンテンツの区間の開始点と終了点を示すオブジェクトです。

**メモ:** 抽象インターフェイスなので、 `AbstractRange` タイプのオブジェクトを直接インスタンス化することはありません。代わりに `Range` または `StaticRange` インターフェイスを使用してください。これら 2 つのインターフェイスの異なる点を理解し、自分のニーズに合ったものを選ぶには、それぞれのインターフェイスのドキュメントを参照してください。

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

`collapsed` 読取専用

論理値で、範囲が折りたたまれている場合は `true` となります。折りたたまれた範囲とは、開始位置と末尾位置が同じで、 0 文字の長さの範囲です。

`endContainer` 読取専用

`endOffset` プロパティで指定された範囲の末尾がある場所の `Node` オブジェクトです。

`endOffset` 読取専用

ノードの内容の先頭から、この範囲オブジェクトで表す範囲の先頭までのオフセットを文字数で表した整数値です。この値は `endContainer` ノードの長さよりも小さくなければなりません。

`startContainer` 読取専用

`startOffset` プロパティで指定された範囲の先頭がある場所の `Node` オブジェクトです。

`startOffset` 読取専用

ノードの内容の先頭から、範囲オブジェクトが参照する内容の先頭の文字までのオフセットを文字数で表した整数値です。この値は `startContainer` で示すノードの長さよりも小さくなければなりません。

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

*`AbstractRange` メソッドを提供していません。*

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

### Range 型

`文書`内のコンテンツの範囲は、すべて `AbstractRange` に基づくインターフェイスのインスタンスを使用して記述します。このようなインターフェイスは 2 つあります。

`Range`

`Range` インターフェイスは長い間存在していましたが、他にも範囲データを定義する必要性が生じたため、最近になって `AbstractRange` をベースに再定義されました。 `Range` は範囲の端点を変更するメソッドや、範囲を比較するメソッド、範囲間の交差を検出するメソッドなどを提供します。

`StaticRange`

`StaticRange` は一度作成した範囲を変更することができない基本的な範囲です。つまり、ノードツリーが変化しても範囲は変更されません。より複雑な `Range` インターフェイスのパフォーマンスやリソースへの影響を避けることができるので、一度だけ使用する範囲を指定する必要がある場合に有益です。

### 要素の内容

要素の内容にアクセスする場合、要素自体もノードですが、要素内のテキストもノードであることに注意してください。要素のテキスト内に範囲端点を設定するには、必ず要素内のテキストノードを探してください。

```js
const startElem = document.querySelector("p");
const endElem = startElem.querySelector("span");
const range = document.createRange();

range.setStart(startElem, 0);
range.setEnd(endElem, endElem.childNodes[0].length / 2);
const contents = range.cloneContents();

document.body.appendChild(contents);
```

この例では、新しい範囲 `range` を作成し、その始点をクラスが `elementclass` である最初の要素の 3 つ目の子ノードに設定します。終点は span の最初の子の中央に設定し、その後、範囲のコンテンツをコピーするために使用しています。

### 範囲と DOM の階層構造

文書内の文字の範囲を定義する際に、 0 個以上のノード境界をまたぐことが可能で、 DOM の変化にできるだけ強い方法で定義するために、 HTML 内の最初の文字と最後の文字のオフセットを指定することはできません。それにはいくつか理由があります。

最初に、ページが読み込まれた後、ブラウザーは HTML の観点で考えていません。読み込まれた後のページは DOM の `Node` オブジェクトのツリーなので、範囲の先頭とあ末尾の位置をノードとノード内の位置で指定する必要があります。

2 つ目に、 DOM ツリーの変更可能性に可能な限り対応するために、文書全体の中でのグローバルな位置ではなく、ツリー内のノードとの相対的な位置を表す方法が必要です。文書内の点を指定されたノード内のオフセットとして定義すれば、 DOM ツリー内でノードが追加されたり除去されたり移動したりしても、その位置はコンテンツと矛盾しません。かなり明白な制限がありますが（ノードが範囲の終点の後に移動された場合や、ノードのコンテンツが大きく変更された場合など）、何もしないよりははるかにましです。

3 つ目に、ノード相対位置を使用して開始位置と終了位置を定義すると、一般的にパフォーマンスが向上しやすくなります。グローバルオフセットが何を参照しているのか DOM と交渉する必要がなく、ユーザーエージェント（ブラウザー）は開始位置で示されるノードに直接移動してそこから開始し、指定されたオフセットに達するまで終了ノードに進むことができます。

これを示すために、下記の HTML を考えてみましょう。

```html
<div class="container">
  <div class="header">
    <img src="" class="sitelogo" />
    <h1>The Ultimate Website</h1>
  </div>
  <article>
    <section class="entry" id="entry1">
      <h2>Section 1: An interesting thing…</h2>
      <p>A <em>very</em> interesting thing happened on the way to the forum…</p>
      <aside class="callout">
        <h2>Aside</h2>
        <p>An interesting aside to share with you…</p>
      </aside>
    </section>
  </article>
  <pre id="log"></pre>
</div>
```

HTML を読み込んで文書の DOM 表現を構築すると、結果の DOM ツリーは次のようになります。

![単純なウェブページの DOM 図](/ja/docs/Web/API/AbstractRange/simpledom.svg)

この図では、 HTML 要素を表すノードを緑色で表示しています。その下の各行は、 DOM ツリーの次の階層を表示させます。青いノードはテキストノードで、画面に表示させるテキストを格納します。各要素のコンテンツはツリーの下記でリンクされており、要素が他の要素やテキストノードを含めるために、その下に一連の分岐を生む可能性があります。

もし `<p>` 要素のコンテンツが `"A <em>very</em> interesting thing happened on the way to the forum…"` である範囲を作成したい場合は、次のようにします。

```js
const pRange = document.createRange();
pRange.selectNodeContents(document.querySelector("#entry1 p"));
```

`<p>` 要素の子孫を含めるために、そのコンテンツ全体を選択したいので、これはうまく動作します。

代わりに `<section>` の見出し（h2 要素）から `<em>` の "ve "の終わりを通り、その下の段落に "An interesting thing…" というテキストをコピーしたい場合、以下のコードで動作します。

```js
const range = document.createRange();
const startNode = document.querySelector("section h2").childNodes[0];
range.setStart(startNode, 11);

const endNode = document.querySelector("#entry1 p em").childNodes[0];
range.setEnd(endNode, 2);

const fragment = range.cloneContents();
```

ここで興味深い問題が発生します。DOM階層の異なるレベルにある複数のノードからコンテンツをキャプチャし、そのうちの一部だけをキャプチャしているのです。結果はどのように見ていけばいいのでしょうか？

幸いなことに、 DOM 仕様はこの課題に的確に対応しています。例えば、この例では `cloneContents()` を範囲に呼び出して、指定した範囲のコンテンツを複製する DOM サブツリーを提供する新しい `DocumentFragment` オブジェクトを作成しています。これを行うために、`cloneContents()` は示す範囲の構造を保持するために必要なすべてのノードを構築しますが、必要以上のノードは構築しません。

この例では、指定する範囲の先頭は節の見出しの下のテキストノード内に得られます。つまり、新しい `DocumentFragment` は h2 を持ち、その下にテキストノードを格納する必要があります。

範囲の終わりは `<p>` 要素の下記なので、新しいフラグメント内で必要になります。 "A" という単語を格納するテキストノードも範囲に含めるために必要です。最後に、 `<em>` とその下のテキストノードが、同様に `<p>` の下に追加されます。

テキストノードの内容は `setStart()` と `setEnd()` を呼び出すときに指定されたテキストノードへのオフセットによって決まります。見出しのテキストに 11 のオフセットが指定された場合、そのノードは "An interesting thing…" を格納します。同様に、終わりノードの最初の2文字のリクエストが指定された場合、最後のテキストノードには "ve" が格納されます。

できあがった文書フラグメントは次のようになります。

![複製したコンテンツを表す DocumentFragment](/ja/docs/Web/API/AbstractRange/dom-fragment.svg)

このフラグメントの内容はすべて、その中の最上位ノードの共有された共通の親の下にあることに特に注意してください。親である `<section>` は複製された内容を複製するために必要ではないので、含まれていません。

例
-

この単純な HTML の断片を考えてみましょう。

```html
<p><strong>This</strong> is a paragraph.</p>
```

`Range` を使用して、ここから "paragraph" という単語を抽出することを想像してみてください。そのためのコードは以下のようになります。

```js
const paraNode = document.querySelector("p");
const paraTextNode = paraNode.childNodes[1];

const range = document.createRange();
range.setStart(paraTextNode, 6);
range.setEnd(paraTextNode, paraTextNode.length - 1);

const fragment = range.cloneContents();
document.body.appendChild(fragment);
```

最初に、段落ノード自体への参照と、段落内の 2 番目の子ノードへの参照を取得します。最初の子は `<strong>` 要素です。 2 つ目の子はテキストノード " is a paragraph." です。

テキストノードの参照を手に入れたら、 `Document` 自体に対して `createRange()` を呼び出して新しい `Range` オブジェクトを作成します。範囲の始める位置にはテキストノードの文字列の 6 文字目を設定し、終わりの位置にはテキストノードの文字列の長さから 1 を引いた値を設定します。これにより、 "paragraph" という単語を含む範囲が設定されます。

そして、 `Range` に対して `cloneContents()` を呼び出して、範囲に含まれる文書部分を格納した新しい `DocumentFragment` オブジェクトを作成して完了です。その後、 `appendChild()` を使用して、 `document.body` から取得した文書本体の最後にそのフラグメントを追加します。

結果はこのようになります。

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-abstractrange |

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

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


CSSStyleValue - Web API

CSSStyleValue
=============

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

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

CSSStyleValue を基底とするインターフェイス
----------------------------

`CSSStyleValue` インターフェイスを基底とするインターフェイスの一覧です。

* `CSSImageValue`
* `CSSKeywordValue`
* `CSSNumericValue`
* `CSSPositionValue` (en-US)
* `CSSTransformValue`
* `CSSUnparsedValue`
インスタンスメソッド
----------

`CSSStyleValue.parse()`
Experimental

特定の CSS プロパティを指定された値に設定し、最初の値を `CSSStyleValue` オブジェクトとして返します。

`CSSStyleValue.parseAll()`
Experimental

出現したすべての特定の CSS プロパティを指定された値に設定し、それぞれが与えられた値の 1 つを格納した `CSSStyleValue` オブジェクトの配列を返します。

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # stylevalue-objects |

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

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


資格情報管理 API - Web API

資格情報管理 API
==========

資格情報管理 API を使用すると、ウェブサイトがユーザー、連携アカウント、公開鍵の資格情報を保存および取得することができます。これらの機能により、ユーザーはパスワードを入力せずにログインしたり、サイトへのログインに使用した連携アカウントを確認したり、期限切れのセッションに明示的なログインの手続きなしでセッションを再開したりすることができます。

資格情報管理の概念と使用方法
--------------

この API により、ウェブサイトがユーザーエージェントのパスワードシステムと直接対話できるようになるため、ウェブサイトはサイトの資格情報を統一した方法で扱うことができ、ユーザーエージェントは資格情報の管理でより良い支援を提供することができるようになります。例えば、ユーザエージェントは、連合アイデンティティプロバイダーや、ユーザー名とパスワードだけでなく、それ以上のものを使用する難解なログインメカニズムを扱うのに特に苦労しています。

これらの問題に対処するために、資格情報管理 API は、ウェブサイトがさまざまな種類の資格情報を保存したり取得したりする方法を提供しています。これによりユーザーは、サイトにログインするために使用した連携アカウントを確認したり、期限切れのセッションに明示的なログインの手続きなしでセッションを再開したりすることができます。

**メモ:** この API は最上位のコンテキストのみに制限されています。 `get()` や `store()` を `<iframe>` 要素の中で呼び出すと、何もせずに解決します。

### サブドメイン間で共有される資格情報

より新しい版の仕様では、別のサブドメインから資格情報を取得できるようになっています。例えば、 `login.example.com` に保存されているパスワードを使用して `www.example.com` にログインすることができます。これを利用するには、`CredentialsContainer.store()` (en-US) を呼び出してパスワードを明示的に格納する必要があります。これは、公開接尾辞リスト (PSL) 照合と呼ばれることもあるりますが、仕様では、資格情報の有効なスコープを決定するために PSL を使用することを推奨しているだけです。必須ではありません。そのため、ブラウザーによって実装が異なる場合があります。

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

`Credential`

信頼の決定の前提条件として、エンティティに関する情報を提供します。

`CredentialsContainer` (en-US)

ログインやログアウトの成功などの興味深いイベントが発生したときに、資格情報を要求し、ユーザーエージェントに通知するメソッドを公開します。このインターフェイスは `navigator.credentials` からアクセスできます。

`FederatedCredential`

ウェブサイトがユーザーを正しく認証するために信頼するエンティティである、連合アイデンティティプロバイダーからの資格情報に関する情報を提供し、また、そのための API を提供します。 OpenID Connect はそのようなフレームワークの一例です。

`PasswordCredential` (en-US)

ユーザー名/パスワードの組に関する情報を提供します。

`PublicKeyCredential`

パスワードの代わりに、フィッシング不可能でデータ侵害に強い非対称キーペアを使用してログインするための資格情報を提供します。

仕様書
---

| Specification |
| --- |
| Credential Management Level 1 # the-credential-interface |

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

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


Accelerometer - Web API

Accelerometer
=============

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

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

このセンサーを使用するには、ユーザーが Permissions API により `'accelerometer'` デバイスセンサーの使用を許可することが必要です。

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

EventTarget

Sensor

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

`Accelerometer()`
Experimental

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

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

*以下のプロパティに加え、`Accelerometer` は親インターフェイスの `Sensor` および `EventTarget` からプロパティを継承しています。*

`Accelerometer.x` 読取専用
Experimental

デバイスの x 軸方向にかかっている加速度を表す `double` 値を返します。

`Accelerometer.y` 読取専用
Experimental

デバイスの y 軸方向にかかっている加速度を表す `double` 値を返します。

`Accelerometer.z` 読取専用
Experimental

デバイスの z 軸方向にかかっている加速度を表す `double` 値を返します。

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

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

イベント
----

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

例
-

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

```js
const acl = new Accelerometer({ frequency: 60 });
acl.addEventListener("reading", () => {
  console.log(`X 軸方向の加速度 ${acl.x}`);
  console.log(`Y 軸方向の加速度 ${acl.y}`);
  console.log(`Z 軸方向の加速度 ${acl.z}`);
});

acl.start();
```

仕様書
---

| Specification |
| --- |
| Accelerometer # accelerometer-interface |

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

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


IIRFilterNode - Web API

IIRFilterNode
=============

**`IIRFilterNode`** はウェブオーディオ API のインターフェイスで、`AudioNode` プロセッサーであり、一般の **無限インパルス応答** (IIR) フィルターを実装します。この種類のフィルターは、トーンコントロール機器やグラフィックイコライザーを実装するためにも使用することができます。フィルター応答の引数を指定しますので、必要に応じてチューニングすることができます。

EventTarget

AudioNode

IIRFilterNode

|  |  |
| --- | --- |
| 入力数 | `1` |
| 出力数 | `1` |
| チャンネルカウントモード | `"max"` |
| チャンネルカウント | 入力と同じ |
| チャンネル補間 | `"speakers"` |

一般的に、高次フィルターを実装するためには `BiquadFilterNode` (en-US) インターフェイスを使用するのが最適です。それにはいくつかの理由があります：

* バイカッドフィルターは、一般的に数値の変化にあまり敏感ではない。
* バイカッドフィルターのフィルター引数は自動化できる。
* 偶数次 IIR フィルターはすべて `BiquadFilterNode` (en-US) を使用して作成することができる。

しかし、奇数順の IIR フィルターを作成する必要がある場合は、`IIRFilterNode`を使用する必要があります。また、自動化を使用しない場合や、他にもこのインターフェイスが有益であることが分かるかもしれません。

**メモ:** ノードが作成されると、その係数を変更することはできません。

`IIRFilterNode` はテールタイム参照があります。入力がゼロでも静音でない音声を出力し続けます。IIR フィルターとして、ゼロでない入力が永遠に続き、出力が十分にゼロに近づいたとき、これは実際にはある有限の時間の後に制限することができます。実際にかかる時間は、指定されたフィルター係数に依存します。

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

`IIRFilterNode()`

IIRFilterNode オブジェクトの新しいインスタンスを作成します。

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

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

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

*メソッドを親である `AudioNode` から継承しています。加えて以下のメソッドもあります。*

`getFrequencyResponse()`

フィルターの現在のパラメーターの設定を用いて、提供された周波数の配列で指定された周波数のレスポンスを計算します。

例
-

単純な IIR フィルターのデモをライブで Codepen で見ることができます。また、GitHub でソースコードも参照してください。様々なローパス周波数に対して様々な係数の値を含めることができます。定数 `filterNumber` の値を 0 から 3 の間の値に変更して、利用できる効果を調べることができます。

また、詳しい説明は、IIR フィルターの使用 (en-US) ガイドをご覧ください。

仕様書
---

| Specification |
| --- |
| Web Audio API # IIRFilterNode |

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

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

関連情報
----

* ウェブオーディオ API の使用
* `AudioNode`
* `BiquadFilterNode` (en-US)


BluetoothUUID - Web API

BluetoothUUID
=============

`Web Bluetooth API` の **`BluetoothUUID`** インターフェイスは、Bluetooth SIG が管理しているレジストリーから Universally Unique Identifier (UUID) の値を名前で検索する方法を提供します。

説明
--

 UUID 文字列は、`00001818-0000-1000-8000-00805f9b34fb` などの 128 ビットの UUID です。
 Bluetooth レジストリーには、16 ビットおよび 32 ビットのエイリアスと名前に加え、UUID で識別されるディスクリプター、サービス、キャラクタリスティックのリストも格納されています。

`BluetoothUUID` インターフェイスは、これらの 128 ビットの UUID を取得するメソッドを提供します。

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

`BluetoothUUID.canonicalUUID()`
Experimental

16 ビットまたは 32 ビットの UUID エイリアスを受け取り、128 ビットの UUID を返します。

`BluetoothUUID.getCharacteristic()`
Experimental

名前、もしくは 16 ビットまたは 32 ビットの UUID エイリアスを受け取り、登録されたキャラクタリスティックを表す 128 ビットの UUID を返します。

`BluetoothUUID.getDescriptor()`
Experimental

名前、もしくは 16 ビットまたは 32 ビットの UUID エイリアスを受け取り、登録されたディスクリプターを表す 128 ビットの UUID を返します。

`BluetoothUUID.getService()`
Experimental

名前、もしくは 16 ビットまたは 32 ビットの UUID エイリアスを受け取り、登録されたサービスを表す 128 ビットの UUID を返します。

例
-

この例では、`device_information` という名前のサービスを表す UUID が返され、コンソールに出力されます。

```js
let result = BluetoothUUID.getService("device\_information");
console.log(result); // "0000180a-0000-1000-8000-00805f9b34fb"
```

仕様書
---

| Specification |
| --- |
| Web Bluetooth # bluetoothuuid |

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

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


CSSUnparsedValue - Web API

CSSUnparsedValue
================

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

カスタムプロパティは `CSSUnparsedValue` と `var()` の参照（これは `CSSVariableReferenceValue` で参照される）で表現されます。

CSSStyleValue

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

`CSSUnparsedValue()`

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

プロパティ
-----

`CSSUnparsedValue.length`

`CSSUnparsedValue` オブジェクトの項目数を返します。

メソッド
----

`CSSUnparsedValue.entries()`

指定されたオブジェクトの列挙可能なプロパティ `[key, value]` の組の配列を、 `for...in` ループで提供されるのと同じ順序で返します（違いは for-in ループがプロトタイプチェーン上のプロパティも列挙することです）。

`CSSUnparsedValue.forEach()`

指定された関数を、 `CSSUnparsedValue` オブジェクトのそれぞれの要素に対して実行します。

`CSSUnparsedValue.keys()`

`CSSUnparsedValue` オブジェクト内のそれぞれの位置におけるキーを持つ新しい配列イテレーターオブジェクトを返します。

`CSSUnparsedValue.values()`

`CSSUnparsedValue` オブジェクト内のそれぞれの位置における値を持つ新しい配列イテレーターオブジェクトを返します。

仕様書
---

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

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

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

関連情報
----

* `CSSImageValue`
* `CSSKeywordValue`
* `CSSNumericValue`
* `CSSPositionValue` (en-US)
* `CSSTransformValue`
* CSS 型付きオブジェクトモデルの使用
* CSS 型付きオブジェクトモデル API


clearTimeout() - Web API

clearTimeout()
==============

グローバルの **`clearTimeout()`** メソッドは、 `setTimeout()` の呼び出しによって以前に確立されたタイムアウトを解除します。

指定された引数で前回確立されたアクションを識別できなかった場合、このメソッドは何も行いません。

構文
--

```js
clearTimeout(timeoutID)
```

### 引数

`timeoutID`

解除したいタイムアウトの識別子です。この ID は対応する `setTimeout()` から返されたものです。

注目すべきは、 `setTimeout()` および `setInterval()` で使用される ID のプールは共有されますので、技術的には `clearTimeout()` および `clearInterval()` は互いに交換できます。しかし、明確化のため、そのようなことは避けてください。

### 返値

なし (`undefined`)。

例
-

ウェブページのコンテキストで以下のスクリプトを実行し、ページを一度クリックしてください。１秒後にメッセージがポップアップします。１秒間に複数回ページをクリックしても、アラートは一度しか表示されません。

```js
const alarm = {
  remind(aMessage) {
    alert(aMessage);
    this.timeoutID = undefined;
  },

  setup() {
    if (typeof this.timeoutID === "number") {
      this.cancel();
    }

    this.timeoutID = setTimeout(
      (msg) => {
        this.remind(msg);
      },
      1000,
      "Wake up!",
    );
  },

  cancel() {
    clearTimeout(this.timeoutID);
  },
};
window.addEventListener("click", () => alarm.setup());
```

メモ
--

`clearTimeout()` へ妥当ではない ID を渡しても、何の効果もありません。例外は発生しません。

仕様書
---

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

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

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

関連情報
----

* `setTimeout()`
* `setInterval()`
* `clearInterval()`
* `Window.requestAnimationFrame()`


TransformStreamDefaultController - Web API

TransformStreamDefaultController
================================

**TransformStreamDefaultController`** はストリーム API のインターフェイスで、関連する `ReadableStream` と `WritableStream` を操作するメソッドを提供します。

`TransformStream` を作成すると、 `TransformStreamDefaultController` が作成されます。そのため、コンストラクターはありません。 `TransformStreamDefaultController` のインスタンスを取得するには、 `TransformStream()` のコールバックメソッドを使用します。

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

`TransformStreamDefaultController.desiredSize` 読取専用

ストリームの内部キューの読み取り可能な側を埋めるために必要なサイズを返します。

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

`TransformStreamDefaultController.enqueue()`

ストリームの読み取り可能な側にチャンク（単一のデータ）をキューに入れます。

`TransformStreamDefaultController.error()`

変換ストリームの読み取り可能な側と書き込み可能な側の両方をエラーを発生させます。

`TransformStreamDefaultController.terminate()`

ストリームの読み取り可能な側を閉じ、書き込み可能な側にエラーを発生させます。

例
-

次の例では、変換ストリームは、 `error()` メソッドと `enqueue()` メソッドを使用して、受信したチャンクをすべて `Uint8Array` 値として渡します。

```js
const transformContent = {
  start() {}, // required.
  async transform(chunk, controller) {
    chunk = await chunk;
    switch (typeof chunk) {
      case "object":
        // just say the stream is done I guess
        if (chunk === null) {
          controller.terminate();
        } else if (ArrayBuffer.isView(chunk)) {
          controller.enqueue(
            new Uint8Array(chunk.buffer, chunk.byteOffset, chunk.byteLength),
          );
        } else if (
          Array.isArray(chunk) &&
          chunk.every((value) => typeof value === "number")
        ) {
          controller.enqueue(new Uint8Array(chunk));
        } else if (
          typeof chunk.valueOf === "function" &&
          chunk.valueOf() !== chunk
        ) {
          this.transform(chunk.valueOf(), controller); // hack
        } else if ("toJSON" in chunk) {
          this.transform(JSON.stringify(chunk), controller);
        }
        break;
      case "symbol":
        controller.error("Cannot send a symbol as a chunk part");
        break;
      case "undefined":
        controller.error("Cannot send undefined as a chunk part");
        break;
      default:
        controller.enqueue(this.textencoder.encode(String(chunk)));
        break;
    }
  },
  flush() {
    /\* do any destructor work here \*/
  },
};

class AnyToU8Stream extends TransformStream {
  constructor() {
    super({ ...transformContent, textencoder: new TextEncoder() });
  }
}
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ts-default-controller-class |

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

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


HTMLHeadingElement - Web API

HTMLHeadingElement
==================

**`HTMLHeadingElement`** インターフェイスは、 `<h1>` から `<h6>` まで様々な見出し要素を表します。 `HTMLElement` インターフェイスからメソッドとプロパティを継承しています。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLHeadingElement.align`
非推奨

文字列で、列挙型の属性で周囲のコンテキストに対する見出しの配置を示します。指定可能な値は `"left"`, `"right"`, `"justify"`, `"center"` です。

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

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlheadingelement |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: h1, h2, h3, h4, h5, h6


ウェブワーカー API - Web API

ウェブワーカー API
===========

**ウェブワーカー** (Web Worker) とは、ウェブアプリケーションにおけるスクリプトの処理をメインとは別のスレッドに移し、バックグラウンドでの実行を可能にする仕組みのことです。時間のかかる処理を別のスレッドに移すことが出来るため、 UI を担当するメインスレッドの処理を中断・遅延させずに実行できるという利点があります。

ウェブワーカーの概念と使い方
--------------

ワーカーオブジェクトはコンストラクター（`Worker()` など）を用いて生成され、名前を持つ JavaScript ファイルを実行します。このファイルにはワーカースレッドで実行されるコードが書かれています。

ワーカースレッドの中では、 JavaScript の標準の一連の関数（`String`、`Array`、`Object`、`JSON`、など）に加え、任意のコードのほとんどを実行することができます。いくつかの例外があります。例えば、ワーカー内から直接 DOM を操作することはできません。また、 `window` オブジェクトの既定のメソッドやプロパティには使用できないものがあります。実行できるコードについては、以下のワーカーグローバルコンテキストと関数や利用可能な Web API を参照してください。

ワーカーとメインスレッドとの間では、メッセージのシステムを通してデータがやり取りされます。両者は `postMessage()` メソッドを使ってメッセージを送信したり、受け取ったメッセージには `onmessage` イベントハンドラーで返信したりします（メッセージは`メッセージ`イベントの `data` 属性に格納されます）。なお、データは共有されるのではなく複製されます。

ワーカーが親ページと同じオリジン内でホスティングされるのであれば、新しいワーカーをいくつも起動することができます。また、ワーカーはネットワーク I/O において `XMLHttpRequest` を使用しますが、 `XMLHttpRequest` における `responseXML` および `channel` 属性は必ず `null` を返す点が通常と異なります。

### ワーカーの種類

ワーカーにはいくつもの種類があります。

* 専用ワーカー (dedicated worker) は、単一のスクリプトで利用されるワーカーです。このコンテキストは `DedicatedWorkerGlobalScope` オブジェクトで表現されます。
* 共有ワーカー (shared worker) は、ワーカーと同じドメイン内にある限り、異なるウィンドウや iframe などで動作する複数のスクリプトで利用できるワーカーです。専用ワーカーよりも少し複雑で、スクリプトはアクティブなポートを介して通信する必要があります。
* サービスワーカーは、基本的に複数のウェブアプリケーション間やブラウザー、（利用可能なら）ネットワークの間でプロキシーサーバーとして動くものです。他にも、効果的なオフライン操作を実現したり、ネットワークリクエストを遮断してネットワークが利用できるかどうかで適切なアクションを取ったり、サーバーにある資産を更新したりすることなどを目的としています。また、プッシュ通知やバックグラウンド同期APIへのアクセスも可能になる予定です。

**メモ:** Web workers 仕様書によれば、ワーカーのエラーイベントはバブリングすべきではありません（Firefox バグ 1188141 を参照。これは Firefox 42 で実装されました）。

### ワーカーグローバルコンテキストと関数

ワーカーは現在の `window` とは異なるグローバルなコンテキストで実行されます。 `Window` はワーカーから直接利用できませんが、同じメソッドの多くは共有されるミックスイン (`WindowOrWorkerGlobalScope`) で定義され、各自の `WorkerGlobalScope` から派生したコンテキストを通じてワーカーが利用できるようにします。

* `DedicatedWorkerGlobalScope` （専用ワーカー向け）
* `SharedWorkerGlobalScope` （共有ワーカー向け）
* `ServiceWorkerGlobalScope` （サービスワーカー向け）

すべてのワーカーとメインスレッドで共通の関数（`WindowOrWorkerGlobalScope` からのもの）には、`atob()`、`btoa()`、`clearInterval()`、`clearTimeout()`、`dump()`
Non-standard
、`setInterval()`、`setTimeout()` などがあります。

以下の関数はワーカーでのみ利用することができます。

* `WorkerGlobalScope.importScripts()` （すべてのワーカー）
* `DedicatedWorkerGlobalScope.postMessage` （専用ワーカーのみ）
### 利用可能な Web API

**メモ:** 掲載されている API が特定のバージョンのプラットフォームで対応している場合、一般的にウェブワーカーでも利用可能とみなされます。また、 https://worker-playground.glitch.me/ を使用して特定のオブジェクト/関数の 対応をテストすることもできます。

ワーカーで利用可能な Web APIは、バーコード検出 API、放送チャンネル API、キャッシュ API、チャンネルメッセージ API、コンソール API, ウェブ暗号化 API (`Crypto`)、`CustomEvent`、エンコーディング API (`TextEncoder`、`TextDecoder`、など）、フェッチ API、`FileReader`、`FileReaderSync` （ワーカーでのみ動作）、`FormData`、`ImageData`、`IndexedDB`, ネットワーク情報 API, 通知 API、パフォーマンス API （`Performance`、`PerformanceEntry`、`PerformanceMeasure`、`PerformanceMark`、`PerformanceObserver`、`PerformanceResourceTiming`、など)、`Promise`、サーバー送信イベント、`ServiceWorkerRegistration`、URL API （`URL` など)、WebGL （`OffscreenCanvas` (en-US) による）、`WebSocket`、`XMLHttpRequest` です。

ワーカーは他のワーカーを起動することができ、そのために `Worker`、`WorkerGlobalScope`、`WorkerLocation`、`WorkerNavigator` も利用可能です。

ウェブワーカーのインターフェイス
----------------

`Worker`

実行しているワーカーのスレッドを表します。実行しているワーカーのコードへメッセージを送る際に用います。

`WorkerLocation`

`Worker` で実行されるスクリプトの絶対位置を定義します。

`SharedWorker`

複数の閲覧コンテキスト（すなわちウィンドウ、タブ、iframe）や他のワーカーからアクセス可能な特定の種類のワーカーを表します。

`WorkerGlobalScope`

あらゆるワーカーの一般的なスコープを表します（通常のウェブコンテンツに対して `Window` が行うのと同じ役割をします）。それぞれの種類のワーカーには、このインターフェイスを継承し、より具体的な機能を追加したスコープオブジェクトがあります。

`DedicatedWorkerGlobalScope`

専用ワーカーのスコープを表します。 `WorkerGlobalScope` を継承しており、独自の機能がいくつか加えられています。

`SharedWorkerGlobalScope`

共有ワーカーのスコープを表します。 `WorkerGlobalScope` を継承しており、独自の機能がいくつか加えられています。

`WorkerNavigator`

ユーザーエージェント（クライアント）に関する識別名と状態を表します。

例
-

簡単なデモと基本的な使い方は以下を参照してください。

* 基本的な専用ワーカーの例（専用ワーカーを実行）
* 基本的な共有ワーカーの例（共有ワーカーを実行）
* OffscreenCanvas ワーカーの例（OffscreenCanvas ワーカーを実行）

これらのデモの動く仕組みを詳しく知りたい場合は。ウェブワーカーの使用を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # workers |

関連情報
----

* ウェブワーカーの使用
* `Worker` インターフェイス
* `SharedWorker` インターフェイス
* サービスワーカー API


CSSNamespaceRule - Web API

CSSNamespaceRule
================

**`CSSNamespaceRule`** インターフェイスは単一の CSS `@namespace` アットルールを記述します。

CSSRule

CSSNamespaceRuleプロパティ
-----

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

`CSSNamespaceRule.namespaceURI`

指定された名前空間の URI のテキストを含む文字列を返します。

`CSSNamespaceRule.prefix`

この名前空間に関連付けられた接頭辞の名前を文字列で返します。そのような接頭辞がない場合は、空文字列を返します。

メソッド
----

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

例
-

このスタイルシートは、唯一のルールとして名前空間を記載しています。したがって、最初に返される `CSSRule` は `CSSNamespaceRule` となります。

```css
@namespace url(http://www.w3.org/1999/xhtml);
```

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

仕様書
---

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

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

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


CSSStyleSheet - Web API

CSSStyleSheet
=============

**`CSSStyleSheet`** インターフェイスは、1 枚の CSS スタイルシートを表し、そのスタイルシートに含まれるルールのリストを調べたり変更したりすることができます。これは、その親の `StyleSheet` からプロパティとメソッドを継承しています。

StyleSheet

CSSStyleSheet
スタイルシートは、そのスタイルシート内のそれぞれのルールを表す一連の `CSSRule` オブジェクトの集合から成ります。それらのルールには `CSSRuleList` があり、これはそのスタイルシートの `cssRules` プロパティから取得することができます。

例えば、1 つの `CSSStyleRule` オブジェクトが保持するスタイルは次のようなものです。

```css
h1,
h2 {
  font-size: 16pt;
}
```

他にもアットルール、例えば `@import` や `@media` になることもあります。

スタイルシートの取得の節で `CSSStyleSheet` オブジェクトを取得するための様々な方法について説明しています。`CSSStyleSheet` オブジェクトは直接構築することもできます。コンストラクターと `CSSStyleSheet.replace()`, `CSSStyleSheet.replaceSync()` メソッドは新しい追加仕様で、スタイルシートの構築を行うことができます。

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

`CSSStyleSheet()`

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

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

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

* `CSSStyleSheet.cssRules` 読取専用
    + : 生きた `CSSRuleList` を返します。これは、スタイルシートを構成する `CSSRule` オブジェクトの最新リストを維持します。
**メモ:** 一部のブラウザーでは、スタイルシートが異なるドメインから読み込まれた場合、`cssRules` にアクセスすると `SecurityError` が発生します。
* `CSSStyleSheet.ownerRule` 読取専用
    + : これが `@import` ルールを使用して文書にインポートされたスタイルシートである場合、`ownerRule` は、その `CSSImportRule` を返します。そうでない場合、`null` を返します。
インスタンスメソッド
----------

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

`CSSStyleSheet.deleteRule()`

スタイルシートから、指定した位置のルールを削除します。

`CSSStyleSheet.insertRule()`

スタイルシート内の指定した位置に、テキスト表現で与えられた新しいルールを挿入します。

`CSSStyleSheet.replace()`

非同期にスタイルシートの内容を置き換え、更新された `CSSStyleSheet` で解決する `Promise` を返します。

`CSSStyleSheet.replaceSync()`

同期的にスタイルシートのコンテンツを置き換えます。

古いプロパティ
-------

*これらのプロパティは、Microsoft が導入した古いプロパティで、既存のサイトとの互換性を保つために維持されています。*

`rules` 読取専用
非推奨

`rules` プロパティは機能的に標準の `cssRules` プロパティと同等です。生きた `CSSRuleList` を返します。これは、スタイルシートを構成するすべてのルールの最新リストを維持します。

古いメソッド
------

*これらのメソッドは、Microsoft が導入した古いメソッドであり、既存のサイトとの互換性を保つために維持されています。*

`addRule()`
非推奨

スタイルシートに、スタイルが適用されるセレクターと、一致する要素に適用するスタイルブロックを指定して、新しいルールを追加します。

これは、単一の文字列としてルール全体のテキスト表現を取る `insertRule()` とは異なります。

`removeRule()`
非推奨

機能的には `deleteRule()` と等しく、このスタイルシートのルールリストから指定された位置のルールを削除します。

スタイルシートの取得
----------

スタイルシートは、多くても 1 つの `Document` と関連付けられ、これに適用されます（disabled でない限り）。指定された文書の `CSSStyleSheet` オブジェクトのリストは、`Document.styleSheets` プロパティを使用して取得できます。それぞれのスタイルシートは、もしあれば、そのオーナーオブジェクト（`Node` または `CSSImportRule`）からもアクセスできます。

`CSSStyleSheet` オブジェクトは、文書でスタイルシートが読み込まれた時に、ブラウザーによって自動的に作成され、その文書の `Document.styleSheets` リストに挿入されます。

スタイルシートを文書と関連付ける方法のリスト（おそらく不完全）は次のとおりです。

| スタイルシートが文書と関連付けられる理由 | `document.styleSheets` リストに出現 | 指定されたスタイルシートオブジェクトのオーナー要素/ルールの取得 | オーナーオブジェクトのインターフェイス | オーナーからの CSSStyleSheet オブジェクトの取得 |
| --- | --- | --- | --- | --- |
| 文書内の `<style>` および `<link>` 要素 | はい | `.ownerNode` | `HTMLLinkElement`、`HTMLStyleElement`、`SVGStyleElement` (en-US) の何れか | `HTMLLinkElement.sheet`、`HTMLStyleElement.sheet`、`SVGStyleElement.sheet` (en-US) の何れか |
|
 文書に適用された他のスタイルシート内の CSS `@import` ルール
 the document
  | はい | `.ownerRule` | `CSSImportRule` | `.styleSheet` |
| （HTML でない）文書の `<?xml-stylesheet ?>` 処理命令 | はい | `.ownerNode` | `ProcessingInstruction` | `.sheet` |
| HTTP の Link ヘッダー | はい | *なし* | なし | なし |
| （既定の）ユーザーエージェントスタイルシート | いいえ | なし | なし | なし |

仕様書
---

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

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

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

関連情報
----

* CSS オブジェクトモデル
* 動的なスタイル情報の利用


EventTarget - Web API

EventTarget
===========

**`EventTarget`** インターフェイスは、イベントを受け取ることや、リスナーを持つことができるオブジェクトが実装します。
 言い換えると、イベントのターゲットはすべて、このインターフェイスに関する 3 つのメソッドを実装しています。

`Element` とその子、`Document`、`Window` は、最も一般的なイベントターゲットですが、他のオブジェクトも、例えば `XMLHttpRequest`、`AudioNode`、`AudioContext` などもイベントターゲットになります。

多くのイベントターゲット (要素、文書、ウィンドウを含む) は、イベントハンドラーを設定するのに `onイベント名` プロパティや属性を使用することもできます。

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

`EventTarget()`

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

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

`EventTarget.addEventListener()`

特定のイベント種別のイベントハンドラーを `EventTarget` に登録します。

`EventTarget.removeEventListener()`

`EventTarget` からイベントリスナーを削除します。

`EventTarget.dispatchEvent()`

この `EventTarget` にイベントを送出します。

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-eventtarget |

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

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

関連情報
----

* イベントリファレンス - プラットフォームで利用可能なイベント。
* イベント開発者ガイド
* `Event` インターフェイス


GainNode - Web API

GainNode
========

`GainNode` インターフェイスは、音量の変更を表します。これは `AudioNode` 音声処理モジュールで、入力データが出力に伝搬する前に指定のゲインを適用します。`GainNode` は常にちょうど 1 個の入力と 1 個の出力を持ち、入力と出力のチャンネル数は同じです。

ゲインは単位の無い値で、時間とともに変化し、全入力チャンネルの対応するサンプルに乗算されます。ゲインが変更されると、新しいゲインは即座に適応され、出力の音声に不快な「クリック」が発生します。これを回避するためには、値を直接変更せず、`AudioParam` インターフェイスの指数関数的に変化させるメソッドを用いるといいです。

![GainNode が出力のゲインを上げています。](/ja/docs/Web/API/GainNode/webaudiogainnode.png)

EventTarget

AudioNode

GainNode

|  |  |
| --- | --- |
| 入力数 | `1` |
| 出力数 | `1` |
| チャンネルカウントモード | `"max"` |
| チャンネル数 | `2` (既定のカウントモードでは未使用) |
| チャンネルの意味 | `"speakers"` |

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

`GainNode()`

新しい `GainNode` オブジェクトを作成して返します。別の方法として、`BaseAudioContext.createGain()` ファクトリーメソッドを使うこともできます。AudioNode の生成を参照してください。

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

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

`GainNode.gain` 読取専用

適用するゲインを表す a-rate の `AudioParam` です。適用するゲインを変更するには、`AudioParam.value` を設定するか、`AudioParam` のメソッドを用いる必要があります。

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

*専用のメソッドはありません。親の `AudioNode` からメソッドを継承します。*

例
-

`BaseAudioContext.createGain()` に`AudioContext` を用いて `GainNode` を生成するサンプルコードがあります。

仕様書
---

| Specification |
| --- |
| Web Audio API # GainNode |

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

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

関連情報
----

* Web Audio API の使用