CSSPropertyRule.initialValue - Web API

CSSPropertyRule.initialValue
============================

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
**`initialValue`** は `CSSPropertyRule` インターフェイスの読み取り専用プロパティで、 null にすることができます。 `@property` ルールで表されるカスタムプロパティ登録の初期値を返し、プロパティの初期値を制御します。

値
-

文字列で、 CSS 構文 3 で定義されている `<declaration-value>` です。

例
-

このスタイルシートには、単一の `@property` ルールが格納されています。最初に返される `CSSRule` は、このルールを表す `CSSPropertyRule` となります。 `initialValue` プロパティは、文字列 `"#c0ffee"` を返します。これは、 CSS の `initial-value` プロパティの値です。

```css
@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```

```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].initialValue); //the string "#c0ffee"
```

仕様書
---

| Specification |
| --- |
| CSS Properties and Values API Level 1 # dom-csspropertyrule-initialvalue |

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

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


HIDInputReportEvent.reportId - Web API

HIDInputReportEvent.reportId
============================

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

`HIDInputReportEvent` インターフェイスの **`reportId`** プロパティは、レポートを識別する 1 バイトの接頭辞、もしくは HID インターフェイスがレポート ID を用いていない場合 0 を返します。

値
-

識別用の 1 バイトの接頭辞です。

例
-

この例では、受信した Input レポートの `reportId` をコンソールに出力します。

```js
device.addEventListener("inputreport", (event) => {
  const { data, device, reportId } = event;
  console.log(reportId);
});
```

仕様書
---

| Specification |
| --- |
| WebHID API # dom-hidinputreportevent-reportid |

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

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


HIDInputReportEvent.device - Web API

HIDInputReportEvent.device
==========================

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

`HIDInputReportEvent` インターフェイスの **`device`** プロパティは、この Input レポートを送信した HID インターフェイスを表す `HIDDevice` のインスタンスを返します。

値
-

`HIDDevice` です。

例
-

この例では、`device` がレポートを送信したデバイスを表す `HIDDevice` のインスタンスです。このデバイスの `productName` をコンソールに出力します。

```js
device.addEventListener("inputreport", (event) => {
  const { data, device, reportId } = event;
  console.log(device.productName);
});
```

仕様書
---

| Specification |
| --- |
| WebHID API # dom-hidinputreportevent-device |

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

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


HIDInputReportEvent.data - Web API

HIDInputReportEvent.data
========================

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

`HIDInputReportEvent` インターフェイスの **`data`** プロパティは、Input レポートから読み取ったデータが入った `DataView` を返します。HID インターフェイスがレポート ID を用いている場合、`reportId` は含まれません。

値
-

`DataView` です。

例
-

この例では、返された `data` をコンソールに出力します。

```js
device.addEventListener("inputreport", (event) => {
  const { data, device, reportId } = event;
  console.log(data);
});
```

仕様書
---

| Specification |
| --- |
| WebHID API # dom-hidinputreportevent-data |

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

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


TransformStream: readable プロパティ - Web API

TransformStream: readable プロパティ
===============================

**`readable`** は `TransformStream` インターフェイスの読み取り専用プロパティで、この `TransformStream` が制御する `ReadableStream` インスタンスを返します。

値
-

`ReadableStream` です。

例
-

次の例は、新しい `TransformStream` を `textEncoderStream` として作成し、 `readable` の値をコンソールに出力します。

```js
const textEncoderStream = new TransformStream();
console.log(textEncoderStream.readable); // a ReadableStream
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-ts-readable② |

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

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


TransformStream: writable プロパティ - Web API

TransformStream: writable プロパティ
===============================

**`writable`** は `TransformStream` インターフェイスの読み取り専用プロパティで、この `TransformStream` が制御する `WritableStream` インスタンスを返します。

値
-

`WritableStream` です。

例
-

次の例は、新しい `TransformStream` を `textEncoderStream` として作成し、 `writable` の値をコンソールに出力します。

```js
const textEncoderStream = new TransformStream();
console.log(textEncoderStream.writable); // a WritableStream
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-ts-writable② |

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

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


TransformStream: TransformStream() コンストラクター - Web API

TransformStream: TransformStream() コンストラクター
===========================================

**`TransformStream()`** コンストラクターは、新しい `TransformStream` オブジェクトを作成します。このオブジェクトは、書き込み可能な端点を表す `WritableStream` と、読み取り可能な端点を表す `ReadableStream` の 2 つのストリームを表します。

構文
--

```js
new TransformStream()
new TransformStream(transformer)
new TransformStream(transformer, writableStrategy)
new TransformStream(transformer, writableStrategy, readableStrategy)
```

### 引数

`transformer` 省略可

`transformer` を表すオブジェクト。指定されなかった場合、ストリームは**同一変換ストリーム**となり、書き込み可能な端点に書き込まれたすべてのチャンクをそのまま読み取り可能な端点に転送します。

変換オブジェクトは以下のメソッドを持つことができます。各メソッドの、 `controller` は `TransformStreamDefaultController` のインスタンスです。

`start(controller)`

`TransformStream` が構築される際に呼び出されます。通常は `TransformStreamDefaultController.enqueue()` を使用してチャンクをキューに入れます。

`transform(chunk, controller)`

書き込み可能な端点に書き込まれたチャンクが変換される準備ができたときに呼び出され、変換ストリームの作業をします。書き込み処理の成功や失敗を指示するプロミスを返すことがあります。もし `transform()` メソッドが与えられなかった場合、ID 変換が使用され、チャンクは変更されずにキューに入れられます。

`flush(controller)`

書き込み可能な端点に書き込まれたチャンクがすべて正常に変換され、書き込み可能な端点が閉じられた後に呼び出されます。

`writableStrategy` 省略可

オプションでストリームのキューイング戦略を定義するオブジェクト。これは 2 つの引数を取ります。

`highWaterMark`

非負の整数。これは、背圧が適用される前に内部キューに格納することができるチャンクの総数を定義します。

`size(chunk)`

引数 `chunk` を取るメソッド。これは各チャンクに使用するサイズをバイト単位で示します。

`readableStrategy` 省略可

オプションでストリームのキューイング戦略を定義するオブジェクト。 2 つの引数を取ります。

`highWaterMark`

非負の整数。これは、背圧が適用される前に内部キューに格納することができるチャンクの総数を定義します。

`size(chunk)`

引数 `chunk` を取るメソッド。これは各チャンクに使用するサイズをバイト単位で示します。

**メモ:** 自分自身で独自の `readableStrategy` や `writableStrategy` を定義したり、オブジェクト値に対して `ByteLengthQueuingStrategy` や `CountQueuingStrategy` のインスタンスを使用したりすることができます。

例
-

### テキストを大文字に変換

次の例は、チャンクごとにテキストを大文字に変換します。この例は Streams—The Definitive Guide から引用したもので、異なる種類のストリームの例が数多く含まれています。

```js
function upperCaseStream() {
  return new TransformStream({
    transform(chunk, controller) {
      controller.enqueue(chunk.toUpperCase());
    },
  });
}

function appendToDOMStream(el) {
  return new WritableStream({
    write(chunk) {
      el.append(chunk);
    },
  });
}

fetch("./lorem-ipsum.txt").then((response) =>
  response.body
    .pipeThrough(new TextDecoderStream())
    .pipeThrough(upperCaseStream())
    .pipeTo(appendToDOMStream(document.body)),
);
```

### 同一変換ストリームの作成

引数 `transformer` を与えない場合は、書き込み可能な端点に書き込まれたチャンクを変更せずに読み取り可能な辺にすべて転送する同一変換ストリームになります。次の例では、パイプにバッファー機能を追加するために同一変換ストリームを使用しています。

```js
const writableStrategy = new ByteLengthQueuingStrategy({
  highWaterMark: 1024 \* 1024,
});
readableStream
  .pipeThrough(new TransformStream(undefined, writableStrategy))
  .pipeTo(writableStream);
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-ts-constructor④ |

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

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


CookieStoreManager: getSubscriptions() メソッド - Web API

CookieStoreManager: getSubscriptions() メソッド
===========================================

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

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

`CookieStoreManager` インターフェイスの **`getSubscriptions()`** メソッドは、この `ServiceWorkerRegistration` のすべての Cookie 変更購読のリストを返します。

構文
--

```js
getSubscriptions()
```

### 引数

なし

### 返値

オブジェクトのリストで解決する `promise` です。それぞれのオブジェクトは以下を持ちます。

`name`

Cookie の名前を表す文字列です。

`url`

Cookie を購読するのに用いるスコープの URL を表す文字列です。

例
-

`registration` で表される `ServiceWorkerRegistration` が既に何か Cookie 変更イベントを購読している場合は、`subscriptions` はそれらの Cookie の名前と URL が格納されたオブジェクトのリストで解決します。

```js
const subscriptions = await registration.cookies.getSubscriptions();
```

仕様書
---

| Specification |
| --- |
| Cookie Store API # dom-cookiestoremanager-getsubscriptions |

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

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


CookieStoreManager: unsubscribe() メソッド - Web API

CookieStoreManager: unsubscribe() メソッド
======================================

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

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

`CookieStoreManager` インターフェイスの **`unsubscribe()`** メソッドは、`ServiceWorkerRegistration` が以前購読していたイベントを受け取るのを止めます。

構文
--

```js
unsubscribe(subscriptions)
```

### 引数

`subscriptions`

以下が格納されたオブジェクトです。

`name`

Cookie の名前を表す文字列です。

`url`

この Cookie の購読に使用していたスコープの URL を表す文字列です。

### 返値

サービスワーカーの購読の解除が完了したら `undefined` で解決する `Promise` を返します。

### 例外

`TypeError`

`subscriptions` に渡された URL がサービスワーカーの登録の `scope` とマッチしないとき投げられます。

例
-

この例では、`registration` で表される `ServiceWorkerRegistration` が、名前が `"cookie1"` でスコープが `"/path1"` である Cookie の変更イベントの購読を解除します。

```js
const subscriptions = [{ name: "cookie1", url: `/path1` }];
await registration.cookies.unsubscribe(subscriptions);
```

仕様書
---

| Specification |
| --- |
| Cookie Store API # dom-cookiestoremanager-unsubscribe |

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

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


CookieStoreManager: subscribe() メソッド - Web API

CookieStoreManager: subscribe() メソッド
====================================

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

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

`CookieStoreManager` インターフェイスの **`subscribe()`** メソッドは、`ServiceWorkerRegistration` に Cookie 変更イベントを購読させます。

構文
--

```js
subscribe(subscriptions)
```

### 引数

`subscriptions`

以下が格納されたオブジェクトです。

`name`

Cookie の名前を表す文字列です。

`url`

Cookie のスコープの URL を表す文字列です。サービスワーカーの登録のスコープより狭くすることができます。

### 返値

購読が完了したら `undefined` で解決する `Promise` です。

### 例外

`TypeError`

`subscriptions` に渡された URL がサービスワーカーの登録の `scope` とマッチしないとき投げられます。

例
-

この例では、`registration` で表される `ServiceWorkerRegistration` が、名前が `"cookie1"` でスコープが `"/path1"` である Cookie の変更イベントを購読します。

```js
const subscriptions = [{ name: "cookie1", url: `/path1` }];
await registration.cookies.subscribe(subscriptions);
```

`subscribe()` メソッドに渡す URL は、サービスワーカーの登録のスコープより狭くすることができます。以下の例では、`/path/one/` を購読しているので、最初の Cookie の変更では変更イベントを受け取りますが、2 番目では受け取りません。

```js
registration.cookies.subscribe([{ name: "cookie1", url: "/path/one/" }]); // 購読
cookieStore.set({ name: "cookie1", value: "cookie-value", path: "/path/one/" }); // 変更イベントを受け取る
cookieStore.set({ name: "cookie1", value: "cookie-value", path: "/path/two/" }); // 変更イベントを受け取らない
```

仕様書
---

| Specification |
| --- |
| Cookie Store API # dom-cookiestoremanager-subscribe |

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

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


VideoTrack: selected プロパティ - Web API

VideoTrack: selected プロパティ
==========================

**`VideoTrack`** の **`selected`** プロパティは、特定の映像トラックがアクティブかどうかを制御します。

### 値

`selected` プロパティは、トラックがアクティブな場合に値が `true` になる論理値です。 同時にアクティブにできる映像トラックは 1 つだけなので、別のトラックがアクティブなときに、あるトラックでこのプロパティを `true` に設定すると、アクティブであったトラックは非アクティブになります。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-videotrack-selected-dev |

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

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


VideoTrack: language プロパティ - Web API

VideoTrack: language プロパティ
==========================

**`VideoTrack`** の **`language`** プロパティは読み取り専用で、映像トラックで使用されている言語を識別する文字列を返します。

複数の言語を含むトラック（他の言語で数行が話されている英語の映画など）の場合は、これが動画の主要言語になります。

### 値

映像トラックで使用される主要言語の BCP 47 (RFC 5646) 形式の言語タグを指定する文字列です。 言語が指定されていないか知られていない場合や、トラックに音声が含まれていない場合は空文字列 (`""`) です。

例えば、トラックで使用されている主要言語がアメリカ英語の場合、この値は `"en-US"` になります。 ブラジルポルトガル語の場合、値は `"pt-BR"` になります。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-videotrack-language-dev |

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

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


VideoTrack: sourceBuffer プロパティ - Web API

VideoTrack: sourceBuffer プロパティ
==============================

**`VideoTrack`** の **`sourceBuffer`** プロパティは読み取り専用で、トラックを作成した `SourceBuffer` を返します。 トラックが `SourceBuffer` によって作成されなかった場合、または `SourceBuffer` がその親メディアソースの `MediaSource.sourceBuffers` 属性から取り除かれた場合は null を返します。

### 値

`SourceBuffer` または null です。

仕様書
---

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

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

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


VideoTrack: label プロパティ - Web API

VideoTrack: label プロパティ
=======================

**`VideoTrack`** の **`label`** プロパティは読み取り専用で、映像トラックの判読可能なラベルがある場合はそれを指定する文字列を返します。 それ以外の場合は、空の文字列を返します。

### 値

トラックのメタデータで利用可能な場合は、トラックの判読可能なラベルを指定する文字列です。 それ以外の場合は、空の文字列（`""`）が返されます。

例えば、`kind` が `"sign"` のトラックには、`"手話通訳"` などの `label` が付いている場合があります。

例
-

この例では、指定されたメディア要素の映像トラックを選択するためにユーザーインターフェイスで使用される可能性のあるトラックの kind とラベルの配列を返します。 リストは、特定の kind のトラックのみを通過させるようにフィルタ処理されています。

```js
function getTrackList(el) {
  const trackList = [];
  const wantedKinds = ["main", "alternative", "commentary"];

  el.videoTracks.forEach((track) => {
    if (wantedKinds.includes(track.kind)) {
      trackList.push({
        id: track.id,
        kind: track.kind,
        label: track.label,
      });
    }
  });
  return trackList;
}
```

結果の `trackList` には、その `kind` が配列 `wantedKinds` の中の 1 つである映像トラックの配列を含み、各エントリはトラックの `id`、`kind`、および `label` を提供します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-videotrack-label-dev |

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

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


VideoTrack: kind プロパティ - Web API

VideoTrack: kind プロパティ
======================

**`kind`** プロパティは、**`VideoTrack`** に含まれる動画のカテゴリーを示す文字列を保持します。

この `kind` を使用して、特定のトラックを有効または無効にするシナリオを決定できます。 映像トラックで利用可能な kind の一覧については、映像トラックの kind 文字列を参照してください。

### 値

メディアが表すコンテンツの種類を指定する文字列です。 この文字列は、以下の映像トラックの kind 文字列にあるもののうちの 1 つです。

映像トラックの kind 文字列
----------------

映像トラックで利用可能な kind は次のとおりです。

`"alternative"`

メイントラックに代わる可能性のあるもの。 例えば、異なる動画テイクや、音楽だけで会話がないサウンドトラックのバージョンなど。

`"captions"`

キャプション付きのメイン映像トラックのバージョン。

`"main"`

プライマリ映像トラック。

`"sign"`

音声トラックの手話による通訳。

`"subtitles"`

字幕付きのメイン映像トラックのバージョン。

`"commentary"`

解説を含む映像トラック。 これは、例えば映画で監督の解説トラックを含めるために使用される場合があります。

`""`（空の文字列）

トラックに明確な kind がない、またはトラックのメタデータによって提供された kind がユーザーエージェントに認識されていません。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-videotrack-kind-dev |

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

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


VideoTrack: id プロパティ - Web API

VideoTrack: id プロパティ
====================

**`id`** プロパティは、**`VideoTrack`** によって表されるトラックを一意に識別する文字列を保持します。

この ID を `VideoTrackList.getTrackById()` メソッドと共に使用して、メディア要素に関連付けられたメディア内の特定のトラックを見つけることができます。

トラック ID は、特定のトラックをロードする URL のフラグメントとしても使用できます（メディアがメディアフラグメントに対応している場合）。

値
-

トラックを識別する文字列です。メディア要素の `videoTracks` プロパティで指定されたものなどの `VideoTrackList` で `getTrackById()` を呼び出すときに使用するのに適しています。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-videotrack-id-dev |

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

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


CSSKeyframeRule.style - Web API

CSSKeyframeRule.style
=====================

**`CSSKeyframeRule.style`** プロパティは `CSSStyleDeclaration` インターフェイスであり、 `CSSKeyframeRule` の宣言ブロックです。

値
-

`CSSStyleDeclaration` オブジェクトで、次のプロパティがあります。

readonly flag

未設定。

declarations

このルール内で宣言された宣言で、指定された順番であり、個別指定プロパティに展開された一括指定プロパティです。

parent CSS rule

コンテキストオブジェクトで、 this の別名です。

owner node

null です。

例
-

 この CSS には keyframes アットルールが記載されています。これは最初の `CSSRule` であり、 `document.styleSheets[0].cssRules` で返されます。
 `myRules[0]` は `CSSKeyframesRule` オブジェクトを返し、その中に各キーフレームに対応する個々の `CSSKeyFrame` オブジェクトが格納されます。

```css
@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}
```

```js
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // a CSSKeyframesRule
console.log(keyframes[0].style); // a CSSStyleDeclaration
```

仕様書
---

| Specification |
| --- |
| CSS Animations Level 1 # dom-csskeyframerule-style |

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

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


SpeechSynthesisUtterance: volume プロパティ - Web API

SpeechSynthesisUtterance: volume プロパティ
======================================

**`volume`** は `SpeechSynthesisUtterance` インターフェイスのプロパティで、発話の音量を取得および設定します。

未設定の場合、既定値の 1 が使用されます。

値
-

0 （最低）から 1 （最高）の間の浮動小数点数で、音量を表します。

SSML を使用している場合、この値はマークアップの韻律タグによって上書きされます。

例
-

```js
const synth = window.speechSynthesis;

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

const voices = synth.getVoices();

// ...

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

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

仕様書
---

| Specification |
| --- |
| Web Speech API # dom-speechsynthesisutterance-volume |

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

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

関連情報
----

* ウェブ音声 API


SpeechSynthesisUtterance: lang プロパティ - Web API

SpeechSynthesisUtterance: lang プロパティ
====================================

**`lang`** は `SpeechSynthesisUtterance` インターフェイスのプロパティで、発話の言語を取得および設定します。

設定されていない場合、アプリ（すなわち `<html>` の `lang` 値）の言語が使用されるか、こちらも未設定であればユーザーエージェントの既定の言語が使用されます。

値
-

BCP 47 言語タグを表す文字列です。

例
-

```js
const synth = window.speechSynthesis;

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

const voices = synth.getVoices();

// ...

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

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

仕様書
---

| Specification |
| --- |
| Web Speech API # dom-speechsynthesisutterance-lang |

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

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

関連情報
----

* ウェブ音声 API


SpeechSynthesisUtterance: SpeechSynthesisUtterance() コンストラクター - Web API

SpeechSynthesisUtterance: SpeechSynthesisUtterance() コンストラクター
=============================================================

`SpeechSynthesisUtterance()` は `SpeechSynthesisUtterance` インターフェイスのコンストラクターで、新しい `SpeechSynthesisUtterance` オブジェクトのインスタンスを返します。

構文
--

```js
new SpeechSynthesisUtterance(text)
```

### 引数

`text`

発話時に合成されるテキストを格納した文字列です。

例
-

以下のスニペットは Speech synthesizer demo から抜粋したものです。

```js
const synth = window.speechSynthesis;

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

const voices = synth.getVoices();

// ...

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

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

仕様書
---

| Specification |
| --- |
| Web Speech API # dom-speechsynthesisutterance-speechsynthesisutterance |

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

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

関連情報
----

* ウェブ音声 API


SpeechSynthesisUtterance: mark イベント - Web API

SpeechSynthesisUtterance: mark イベント
===================================

**`mark`** はウェブ音声 API の `SpeechSynthesisUtterance` オブジェクトのイベントで、発話が SSML の名前付き "mark" タグに達したときに発生します。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("mark", (event) => {});

onmark = (event) => {};
```

イベント型
-----

`SpeechSynthesisEvent` です。 `Event` を継承しています。

Event

SpeechSynthesisEventイベントプロパティ
---------

*以下に挙げたプロパティに加え、親インターフェイスである `Event` のプロパティが利用可能です。*

`charIndex` 読取専用

イベントが発生したときに発話されていた `SpeechSynthesisUtterance.text` 内の文字のインデックス位置を返します。

`elapsedTime` 読取専用

イベントが発生した時点の `SpeechSynthesisUtterance.text` が話し始めてからの経過時間（秒）を返します。

`name` 読取専用

`SpeechSynthesisUtterance.text` が発話される際に発生する特定の種類のイベントに関連する名前を返します。 `mark` イベントの場合は到達した SSML マーカーの名前、 `boundary` イベントの場合は到達した境界の種類です。

`utterance` 読取専用

イベントが発生した `SpeechSynthesisUtterance` インスタンスを返します。

例
-

`mark` イベントを `addEventListener` メソッドで使用することができます。

```js
utterThis.addEventListener("mark", (event) => {
  console.log(`A mark was reached: ${event.name}`);
});
```

または `onmark` イベントハンドラープロパティで使用することができます。

```js
utterThis.onmark = (event) => {
  console.log(`A mark was reached: ${event.name}`);
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # eventdef-speechsynthesisutterance-mark |
| Web Speech API # dom-speechsynthesisutterance-onmark |

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

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

関連情報
----

* ウェブ音声 API


SpeechSynthesisUtterance: rate プロパティ - Web API

SpeechSynthesisUtterance: rate プロパティ
====================================

**`rate`** は `SpeechSynthesisUtterance` インターフェイスのプロパティで、発話をする速度を取得および設定します。

未設定の場合、既定値の 1 が使用されます。

値
-

 浮動小数点数でレート値を表します。
 範囲は 0.1 （最低値）から 10 （最高値）で、既定値では 1 が現在のプラットフォームや音声のレートとなり、通常の会話速度に相当します。
 他の値はこの値に対する相対的なパーセント値として動作するため、例えば 2 は 2 倍の速さ、0.5 は半分の速さなどです。

 音声合成エンジンや音声によっては、最小レートや最大レートがさらに制約される場合があります。
 SSML を使用している場合、この値はマークアップの韻律タグによって上書きされます。

例
-

### 再生レートの調整

この例では、スライダーを使って再生速度を調整し、「再生」ボタンで発話を再生します。

#### HTML

```html
<p id="text">暗く嵐の夜でした。</p>

<div id="rate-control">
  <label for="rate">Rate:</label>
  <input type="range" min="0.5" max="2" value="1" step="0.1" id="rate" />
</div>

<button id="play">再生</button>
```

#### CSS

```css
body {
  font-family: sans-serif;
}

#rate-control {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
}
```

#### JavaScript

```js
const synth = window.speechSynthesis;

const text = document.querySelector("#text");
const play = document.querySelector("#play");
const rate = document.querySelector("#rate");

function speak() {
  if (synth.speaking) {
    synth.cancel();
  }
  const utterThis = new SpeechSynthesisUtterance(text.textContent);
  utterThis.addEventListener("error", () => {
    console.error("SpeechSynthesisUtterance error");
  });
  utterThis.rate = rate.value;
  synth.speak(utterThis);
}

play.addEventListener("click", speak);
```

#### 出力

仕様書
---

| Specification |
| --- |
| Web Speech API # dom-speechsynthesisutterance-rate |

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

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

関連情報
----

* ウェブ音声 API


SpeechSynthesisUtterance: boundary イベント - Web API

SpeechSynthesisUtterance: boundary イベント
=======================================

**`boundary`** は ウェブ音声 API のイベントで、発話が胡屋分の境界に達したときに発生します。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("boundary", (event) => {});

onboundary = (event) => {};
```

イベント型
-----

`SpeechSynthesisEvent` です。 `Event` を継承しています。

Event

SpeechSynthesisEventイベントプロパティ
---------

*以下に挙げたプロパティに加え、親インターフェイスである `Event` のプロパティが利用可能です。*

`charIndex` 読取専用

イベントが発生したときに発話されていた `SpeechSynthesisUtterance.text` 内の文字のインデックス位置を返します。

`elapsedTime` 読取専用

イベントが発生した時点の `SpeechSynthesisUtterance.text` が話し始めてからの経過時間（秒）を返します。

`name` 読取専用

`SpeechSynthesisUtterance.text` が発話される際に発生する特定の種類のイベントに関連する名前を返します。 `mark` イベントの場合は到達した SSML マーカーの名前、 `boundary` イベントの場合は到達した境界の種類です。

`utterance` 読取専用

イベントが発生した `SpeechSynthesisUtterance` インスタンスを返します。

例
-

`boundary` イベントを `addEventListener` メソッドで使用することができます。

```js
utterThis.addEventListener("boundary", (event) => {
  console.log(
    `${event.name} boundary reached after ${event.elapsedTime} seconds.`,
  );
});
```

または `onboundary` イベントハンドラープロパティで使用することができます。

```js
utterThis.onboundary = (event) => {
  console.log(
    `${event.name} boundary reached after ${event.elapsedTime} seconds.`,
  );
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # eventdef-speechsynthesisutterance-boundary |
| Web Speech API # dom-speechsynthesisutterance-onboundary |

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

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

関連情報
----

* ウェブ音声 API


SpeechSynthesisUtterance: start イベント - Web API

SpeechSynthesisUtterance: start イベント
====================================

**`start`** は ウェブ音声 API の `SpeechSynthesisUtterance` オブジェクトのイベントで、発話が始まったときに発行されます。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("start", (event) => {});

onstart = (event) => {};
```

イベント型
-----

`SpeechSynthesisEvent` です。 `Event` を継承しています。

Event

SpeechSynthesisEventイベントプロパティ
---------

*以下に挙げたプロパティに加え、親インターフェイスである `Event` のプロパティが利用可能です。*

`charIndex` 読取専用

イベントが発生したときに発話されていた `SpeechSynthesisUtterance.text` 内の文字のインデックス位置を返します。

`elapsedTime` 読取専用

イベントが発生した時点の `SpeechSynthesisUtterance.text` が話し始めてからの経過時間（秒）を返します。

`name` 読取専用

`SpeechSynthesisUtterance.text` が発話される際に発生する特定の種類のイベントに関連する名前を返します。 `mark` イベントの場合は到達した SSML マーカーの名前、 `boundary` イベントの場合は到達した境界の種類です。

`utterance` 読取専用

イベントが発生した `SpeechSynthesisUtterance` インスタンスを返します。

例
-

`start` イベントを `addEventListener` メソッドで使用することができます。

```js
utterThis.addEventListener("start", (event) => {
  console.log(`We have started uttering this speech: ${event.utterance.text}`);
});
```

または `onstart` イベントハンドラープロパティで使用することができます。

```js
utterThis.onstart = (event) => {
  console.log(`We have started uttering this speech: ${event.utterance.text}`);
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # eventdef-speechsynthesisutterance-start |
| Web Speech API # dom-speechsynthesisutterance-onstart |

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

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

関連情報
----

* ウェブ音声 API


SpeechSynthesisUtterance: end イベント - Web API

SpeechSynthesisUtterance: end イベント
==================================

**`end`** は ウェブ音声 API の `SpeechSynthesisUtterance` オブジェクトのイベントで、発生が終了したときに発生します。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("end", (event) => {});

onend = (event) => {};
```

イベント型
-----

`SpeechSynthesisEvent` です。 `Event` を継承しています。

Event

SpeechSynthesisEventイベントプロパティ
---------

*以下に挙げたプロパティに加え、親インターフェイスである `Event` のプロパティが利用可能です。*

`charIndex` 読取専用

イベントが発生したときに発話されていた `SpeechSynthesisUtterance.text` 内の文字のインデックス位置を返します。

`elapsedTime` 読取専用

イベントが発生した時点の `SpeechSynthesisUtterance.text` が話し始めてからの経過時間（秒）を返します。

`name` 読取専用

`SpeechSynthesisUtterance.text` が発話される際に発生する特定の種類のイベントに関連する名前を返します。 `mark` イベントの場合は到達した SSML マーカーの名前、 `boundary` イベントの場合は到達した境界の種類です。

`utterance` 読取専用

イベントが発生した `SpeechSynthesisUtterance` インスタンスを返します。

例
-

`end` イベントを `addEventListener` メソッドで使用することができます。

```js
utterThis.addEventListener("end", (event) => {
  console.log(
    `Utterance has finished being spoken after ${event.elapsedTime} seconds.`,
  );
});
```

または `onend` イベントハンドラープロパティで使用することができます。

```js
utterThis.onend = (event) => {
  console.log(
    `Utterance has finished being spoken after ${event.elapsedTime} seconds.`,
  );
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # eventdef-speechsynthesisutterance-end |
| Web Speech API # dom-speechsynthesisutterance-onend |

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

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

関連情報
----

* ウェブ音声 API


SpeechSynthesisUtterance: pause イベント - Web API

SpeechSynthesisUtterance: pause イベント
====================================

**`pause`** はウェブ音声 API の `SpeechSynthesisUtterance` オブジェクトのイベントで、 is fired when the utterance is paused part way through.

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("pause", (event) => {});

onpause = (event) => {};
```

イベント型
-----

`SpeechSynthesisEvent` です。 `Event` を継承しています。

Event

SpeechSynthesisEventイベントプロパティ
---------

*以下に挙げたプロパティに加え、親インターフェイスである `Event` のプロパティが利用可能です。*

`charIndex` 読取専用

イベントが発生したときに発話されていた `SpeechSynthesisUtterance.text` 内の文字のインデックス位置を返します。

`elapsedTime` 読取専用

イベントが発生した時点の `SpeechSynthesisUtterance.text` が話し始めてからの経過時間（秒）を返します。

`name` 読取専用

`SpeechSynthesisUtterance.text` が発話される際に発生する特定の種類のイベントに関連する名前を返します。 `mark` イベントの場合は到達した SSML マーカーの名前、 `boundary` イベントの場合は到達した境界の種類です。

`utterance` 読取専用

イベントが発生した `SpeechSynthesisUtterance` インスタンスを返します。

例
-

`pause` イベントを `addEventListener` メソッドで使用することができます。

```js
utterThis.addEventListener("pause", (event) => {
  console.log(`Speech paused after ${event.elapsedTime} seconds.`);
});
```

または `onpause` イベントハンドラープロパティで使用することができます。

```js
utterThis.onpause = (event) => {
  console.log(`Speech paused after ${event.elapsedTime} seconds.`);
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # eventdef-speechsynthesisutterance-pause |
| Web Speech API # dom-speechsynthesisutterance-onpause |

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

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

関連情報
----

* ウェブ音声 API


SpeechSynthesisUtterance: voice プロパティ - Web API

SpeechSynthesisUtterance: voice プロパティ
=====================================

**`voice`** は `SpeechSynthesisUtterance` インターフェイスのプロパティで、発話に使用する音声を取得および設定します。

 これは `SpeechSynthesis.getVoices()` (en-US) が返す `SpeechSynthesisVoice` (en-US) オブジェクトのいずれかに設定する必要があります。
 発話時点までに設定されていない場合、使用する音声は発話の `lang` 設定で利用できる最も適した既定値になります。

値
-

`SpeechSynthesisVoice` (en-US) オブジェクトです。

例
-

```js
const synth = window.speechSynthesis;

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

const voices = synth.getVoices();

// ...

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

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

仕様書
---

| Specification |
| --- |
| Web Speech API # dom-speechsynthesisutterance-voice |

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

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

関連情報
----

* ウェブ音声 API


SpeechSynthesisUtterance: resume イベント - Web API

SpeechSynthesisUtterance: resume イベント
=====================================

**`resume`** はウェブ音声 API の `SpeechSynthesisUtterance` オブジェクトのイベントで、一時停止していた発話が再開されたときに発生します。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("resume", (event) => {});

onresume = (event) => {};
```

イベント型
-----

`SpeechSynthesisEvent` です。 `Event` を継承しています。

Event

SpeechSynthesisEventイベントプロパティ
---------

*以下に挙げたプロパティに加え、親インターフェイスである `Event` のプロパティが利用可能です。*

`charIndex` 読取専用

イベントが発生したときに発話されていた `SpeechSynthesisUtterance.text` 内の文字のインデックス位置を返します。

`elapsedTime` 読取専用

イベントが発生した時点の `SpeechSynthesisUtterance.text` が話し始めてからの経過時間（秒）を返します。

`name` 読取専用

`SpeechSynthesisUtterance.text` が発話される際に発生する特定の種類のイベントに関連する名前を返します。 `mark` イベントの場合は到達した SSML マーカーの名前、 `boundary` イベントの場合は到達した境界の種類です。

`utterance` 読取専用

イベントが発生した `SpeechSynthesisUtterance` インスタンスを返します。

例
-

`resume` イベントを `addEventListener` メソッドで使用することができます。

```js
utterThis.addEventListener("resume", (event) => {
  console.log(`Speech resumed after ${event.elapsedTime} seconds.`);
});
```

または `onresume` イベントハンドラープロパティで使用することができます。

```js
utterThis.onresume = (event) => {
  console.log(`Speech resumed after ${event.elapsedTime} seconds.`);
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # eventdef-speechsynthesisutterance-resume |
| Web Speech API # dom-speechsynthesisutterance-onresume |

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

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

関連情報
----

* ウェブ音声 API


SpeechSynthesisUtterance: pitch プロパティ - Web API

SpeechSynthesisUtterance: pitch プロパティ
=====================================

**`pitch`** は `SpeechSynthesisUtterance` インターフェイスのプロパティで、発話が行われるピッチ（音程）を取得および設定します。

未設定の場合、既定値の 1 が使用されます。

値
-

 浮動小数点数で音程値を表します。
 0 （最低）から 2 （最高）の範囲で指定でき、1 が現在のプラットフォームまたは音声の既定値です。音声合成エンジンや音声によっては、最小レートと最大レートがさらに制約される場合があります。
 SSML を使用している場合、この値はマークアップ内の韻律タグによって上書きされます。

例
-

```js
const synth = window.speechSynthesis;

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

const voices = synth.getVoices();

// ...

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

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

仕様書
---

| Specification |
| --- |
| Web Speech API # dom-speechsynthesisutterance-pitch |

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

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

関連情報
----

* ウェブ音声 API


SpeechSynthesisUtterance: error イベント - Web API

SpeechSynthesisUtterance: error イベント
====================================

**`error`** はウェブ音声 API の `SpeechSynthesisUtterance` オブジェクトのイベントで、エラーが発生して正常に発話ができなかったときには発生します。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("error", (event) => {});

onerror = (event) => {};
```

イベント型
-----

`SpeechSynthesisErrorEvent` です。 `SpeechSynthesisEvent` および `Event` を継承しています。

Event

SpeechSynthesisEvent

SpeechSynthesisErrorEventイベントプロパティ
---------

*以下に挙げたプロパティに加え、親インターフェイスである `Event` のプロパティが利用可能です。*

`charIndex` 読取専用

イベントが発生したときに発話されていた `SpeechSynthesisUtterance.text` 内の文字のインデックス位置を返します。

`elapsedTime` 読取専用

イベントが発生した時点の `SpeechSynthesisUtterance.text` が話し始めてからの経過時間（秒）を返します。

`error` 読取専用

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

`name` 読取専用

`SpeechSynthesisUtterance.text` が発話される際に発生する特定の種類のイベントに関連する名前を返します。 `mark` イベントの場合は到達した SSML マーカーの名前、 `boundary` イベントの場合は到達した境界の種類です。

`utterance` 読取専用

イベントが発生した `SpeechSynthesisUtterance` インスタンスを返します。

例
-

`error` イベントを `addEventListener` メソッドで使用することができます。

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

または `onerror` イベントハンドラープロパティで使用することができます。

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

仕様書
---

| Specification |
| --- |
| Web Speech API # eventdef-speechsynthesisutterance-error |
| Web Speech API # dom-speechsynthesisutterance-onerror |

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

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

関連情報
----

* ウェブ音声 API


SpeechSynthesisUtterance: text プロパティ - Web API

SpeechSynthesisUtterance: text プロパティ
====================================

**`text`** は `SpeechSynthesisUtterance` インターフェイスのプロパティで、発話時に合成されるテキストを取得および設定します。

 テキストはプレーンテキストか、整形された SSML 文書として提供されます。
 SSML タグは SSML に対応していない端末では取り除かれます。

値
-

 合成するテキストを表す文字列です。
 各発話で発話できるテキストの最大長は 32,767 文字です。

例
-

```js
const synth = window.speechSynthesis;

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

const voices = synth.getVoices();

// ...

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

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

仕様書
---

| Specification |
| --- |
| Web Speech API # dom-speechsynthesisutterance-text |

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

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

関連情報
----

* ウェブ音声 API


Geolocation: clearWatch() メソッド - Web API

Geolocation: clearWatch() メソッド
==============================

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

**`Geolocation.clearWatch()`** メソッドは、以前 `Geolocation.watchPosition()` によって登録された位置情報/エラーの監視ハンドラーを解除するために使用します。

構文
--

```js
clearWatch(id)
```

### 引数

`id`

解除したいハンドラーの登録時に `Geolocation.watchPosition()` メソッドから返された ID 番号です。

### 返値

なし (`undefined`)。

例
-

```js
let id;
let target;
let options;

function success(pos) {
  const crd = pos.coords;

  if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
    console.log("Congratulations, you've reached the target!");
    navigator.geolocation.clearWatch(id);
  }
}

function error(err) {
  console.error(`ERROR(${err.code}): ${err.message}`);
}

target = {
  latitude: 0,
  longitude: 0,
};

options = {
  enableHighAccuracy: false,
  timeout: 5000,
  maximumAge: 0,
};

id = navigator.geolocation.watchPosition(success, error, options);
```

仕様書
---

| Specification |
| --- |
| Geolocation API # clearwatch-method |

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

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

関連情報
----

* 位置情報の使用
* `Geolocation`
* `Geolocation.watchPosition()`
* `Geolocation.getCurrentPosition()`


Geolocation: watchPosition() メソッド - Web API

Geolocation: watchPosition() メソッド
=================================

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

`Geolocation` の **`watchPosition()`** メソッドは、端末の位置が変化するたびに自動的に呼び出されるハンドラー関数を登録するために用いられます。また必要に応じてエラー処理コールバック関数を指定することができます。

構文
--

```js
watchPosition(success)
watchPosition(success, error)
watchPosition(success, error, options)
```

### 引数

`success`

コールバック関数で、 `GeolocationPosition` オブジェクトを入力引数として受け取るものです。

`error` 省略可

任意のコールバック関数で、 `GeolocationPositionError` オブジェクトを入力引数として受け取るものです。

`options` 省略可

 任意のオブジェクトで、位置を監視する構成オプションを提供します。
 利用可能なオプションについての詳細は `Geolocation.getCurrentPosition()` を参照してください。

### 返値

登録されたハンドラーを識別する ID を返します。この ID を `Geolocation.clearWatch()` メソッドに渡してハンドラーの登録を解除することができます。

例
-

```js
let id;
let target;
let options;

function success(pos) {
  const crd = pos.coords;

  if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
    console.log("Congratulations, you reached the target");
    navigator.geolocation.clearWatch(id);
  }
}

function error(err) {
  console.error(`ERROR(${err.code}): ${err.message}`);
}

target = {
  latitude: 0,
  longitude: 0,
};

options = {
  enableHighAccuracy: false,
  timeout: 5000,
  maximumAge: 0,
};

id = navigator.geolocation.watchPosition(success, error, options);
```

仕様書
---

| Specification |
| --- |
| Geolocation API # watchposition-method |

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

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

関連情報
----

* 位置情報 API の使用
* 所属するインターフェイス `Geolocation` と、アクセス方法である `Navigator.geolocation`。
* 反対の操作: `Geolocation.clearWatch()`
* 類似のメソッド: `Geolocation.getCurrentPosition()`


Geolocation: getCurrentPosition() メソッド - Web API

Geolocation: getCurrentPosition() メソッド
======================================

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

**`Geolocation.getCurrentPosition()`** メソッドは、端末の現在位置を取得するために使われます。

構文
--

```js
getCurrentPosition(success)
getCurrentPosition(success, error)
getCurrentPosition(success, error, options)
```

### 引数

`success`

コールバック関数で、 `GeolocationPosition` オブジェクトを唯一の入力引数として受け取ります。

`error` 省略可

オプションのコールバック関数で、 `GeolocationPositionError` オブジェクトを唯一の入力引数として受け取ります。

`options` 省略可

オプションのオブジェクトで、以下の引数を含みます。

`maximumAge`

正の `long` 値で、キャッシュされた位置を返すことが可能な最大時間をミリ秒単位で表します。 `0` に設定した場合、端末はキャッシュされた位置を使用できず、実際の現在位置を取得する必要があることを意味します。 `Infinity` に設定した場合、端末はキャッシュされた位置をその古さに関係なく返さなければなりません。既定値は 0 です。

`timeout`

正の `long` 値で、端末が位置を返すために掛けることができる最大時間をミリ秒単位で表します。既定値は `Infinity` で、 `getCurrentPosition()` は位置を取得できるまで返さないという意味です。

`enableHighAccuracy`

論理値で、アプリケーションが可能な限り正確な結果を受け取ることを望んでいることを示します。もし `true` で、端末がより正確な位置を提供できる場合は、そのようにします。この場合、応答時間が遅くなったり、消費電力が増加したりすることに注意してください（たとえば、モバイル端末の GPS チップを使用する場合など）。一方、 `false` の場合、端末はより速く反応したり、より少ない電力を使用することで、リソースを節約することができます。既定値は `false` です。

### 返値

なし (`undefined`)。

例
-

```js
const options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0,
};

function success(pos) {
  const crd = pos.coords;

  console.log("Your current position is:");
  console.log(`Latitude : ${crd.latitude}`);
  console.log(`Longitude: ${crd.longitude}`);
  console.log(`More or less ${crd.accuracy} meters.`);
}

function error(err) {
  console.warn(`ERROR(${err.code}): ${err.message}`);
}

navigator.geolocation.getCurrentPosition(success, error, options);
```

仕様書
---

| Specification |
| --- |
| Geolocation API # getcurrentposition-method |

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

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

関連情報
----

* 位置情報 API の使用
* `Navigator.geolocation`


WheelEvent: WheelEvent() コンストラクター - Web API

WheelEvent: WheelEvent() コンストラクター
=================================

**`WheelEvent()`** コンストラクターは新しい `WheelEvent` オブジェクトを返します。

**メモ:** このコンストラクターを使用して合成イベントを作成した場合、セキュリティ上の理由から、そのイベントは信頼されません。
 ブラウザーが生成した `WheelEvent` オブジェクトだけが信頼され、信頼されたイベントだけが既定で発生します。

構文
--

```js
new WheelEvent(type)
new WheelEvent(type, options)
```

### 引数

`type`

 イベント名の文字列です。
 大文字と小文字は区別され、ブラウザーは常に `wheel` に設定します。

`options` 省略可

*`MouseEvent()` で定義するプロパティに加え*、以下のプロパティを持つことができるオブジェクトです。

`deltaX` 省略可

 浮動小数点数で、水平スクロール量を `deltaMode` の単位で表します。
 既定値は `0.0` です。

`deltaY` 省略可

 浮動小数点数で、垂直スクロール量を `deltaMode` の単位で表します。
 既定値は `0.0` です。

`deltaZ` 省略可

 浮動小数点数で、 Z 軸のスクロール量を `deltaMode` の単位で表します。
 既定値は `0.0` です。

`deltaMode` 省略可

デルタ値のスクロール量の単位を表す整数です。既定値は `0x00` です。指定できる値は以下の通りです。

| 定数 | 値 | 説明 |
| --- | --- | --- |
| `DOM_DELTA_PIXEL` | `0x00` | デルタ値はピクセル数で指定されます。 |
| `DOM_DELTA_LINE` | `0x01` | デルタ値は行数で指定されます。 |
| `DOM_DELTA_PAGE` | `0x02` | デルタ値はページ数で指定されます。 |

### 返値

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

仕様書
---

| Specification |
| --- |
| UI Events # dom-wheelevent-wheelevent |

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

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

関連情報
----

* 所属先の `WheelEvent` インターフェイスです。


WheelEvent: deltaZ プロパティ - Web API

WheelEvent: deltaZ プロパティ
========================

**`WheelEvent.deltaZ`** は読み取り専用のプロパティで、 `WheelEvent.deltaMode` 単位での Z 軸のスクロール量を表す `double` です。

値
-

数値です。

例
-

```js
const syntheticEvent = new WheelEvent("syntheticWheel", {
  deltaZ: 4,
  deltaMode: 0,
});

console.log(syntheticEvent.deltaZ);
```

仕様書
---

| Specification |
| --- |
| UI Events # dom-wheelevent-deltaz |

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

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

関連情報
----

* `wheel`
* `WheelEvent`


WheelEvent: deltaMode プロパティ - Web API

WheelEvent: deltaMode プロパティ
===========================

**`WheelEvent.deltaMode`** は読み取り専用のプロパティで、デルタ値のスクロール量の単位を表す `unsigned long` を返します。
 取りうる値は次の通りです。

| 定数 | 値 | 説明 |
| --- | --- | --- |
| `DOM_DELTA_PIXEL` | `0x00` | デルタ値はピクセル数で指定されます。 |
| `DOM_DELTA_LINE` | `0x01` | デルタ値は行数で指定されます。 |
| `DOM_DELTA_PAGE` | `0x02` | デルタ値はページ数で指定されます。 |

値
-

`unsigned long` です。

例
-

```js
const syntheticEvent = new WheelEvent("syntheticWheel", {
  deltaX: 4,
  deltaMode: 0,
});

console.log(syntheticEvent.deltaMode);
```

仕様書
---

| Specification |
| --- |
| UI Events # dom-wheelevent-deltamode |

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

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

関連情報
----

* `wheel`
* `WheelEvent`


WheelEvent: deltaX プロパティ - Web API

WheelEvent: deltaX プロパティ
========================

**`WheelEvent.deltaX`** は読み取り専用のプロパティで、 `WheelEvent.deltaMode` 単位での水平スクロール量を表す `double` です。

値
-

数値です。

例
-

```js
const syntheticEvent = new WheelEvent("syntheticWheel", {
  deltaX: 4,
  deltaMode: 0,
});

console.log(syntheticEvent.deltaX);
```

仕様書
---

| Specification |
| --- |
| UI Events # dom-wheelevent-deltax |

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

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

関連情報
----

* `wheel`
* `WheelEvent`


WheelEvent: deltaY プロパティ - Web API

WheelEvent: deltaY プロパティ
========================

**`WheelEvent.deltaY`** は読み取り専用のプロパティで、 `WheelEvent.deltaMode` 単位での垂直スクロール量を表す `double` です。

値
-

数値です。

例
-

```js
const syntheticEvent = new WheelEvent("syntheticWheel", {
  deltaY: 4,
  deltaMode: 0,
});

console.log(syntheticEvent.deltaY);
```

仕様書
---

| Specification |
| --- |
| UI Events # dom-wheelevent-deltay |

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

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

関連情報
----

* `wheel`
* `WheelEvent`


MediaStream 収録 API の使用 - Web API

MediaStream 収録 API の使用
======================

MediaStream 収録 API を使用すると、音声や動画のストリームを簡単に記録できます。 `navigator.mediaDevices.getUserMedia()` と一緒に使用すると、ユーザーの入力機器から記録して結果を即座にウェブアプリで使用するための簡単な方法が提供されます。

音声と映像の両方を別々にまたは一緒に記録することができます。 この記事では、この API を提供する `MediaRecorder` インターフェースの使用方法に関する基本的なガイドを提供することを目的としています。

サンプルアプリ: ウェブディクタフォン
-------------------

![ウェブディクタフォンのサンプルアプリの画像 - 正弦波のサウンドの視覚化、次に録音と停止ボタン、そして再生可能な録音済みトラックの音声ジュークボックス。](/ja/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API/web-dictaphone.png)

MediaStream 収録 API の基本的な使い方を説明するために、ウェブベースのディクタフォン (dictaphone) を作りました。 それは音声の断片を録音してからそれらを再生することを可能にします。ウェブオーディオ API を使用して、機器のサウンド入力を視覚化することもできます。 この記事では録音と再生の機能に集中します。

このデモがライブで実行されているのを見ることも、 GitHub でソースコードを入手することもできます。

CSS のおいしいところ
------------

このアプリでは HTML は非常に単純なので、ここでは説明しません。 言及する価値がある、もう少し興味深い CSS がいくつかありますので、それらについて以下で説明します。 CSS に興味がなく、JavaScript に直行したいのであれば、基本的なアプリの設定のセクションに進んでください。

### calc() で、機器の高さに関係なく、インターフェイスをビューポートに制限

`calc()` 関数は、CSS でまとめられた便利で小さなユーティリティ機能の 1 つで、最初はあまり見かけませんが、すぐに「うわー、以前これがなかったのはなぜ？ CSS2 のレイアウトが厄介だったのはなぜ？」とあなたに考えさせ始めます。 それはプロセスで異なる単位を混合して、CSS 単位の計算値を決定するための計算をすることを可能にします。

例えば、ウェブディクタフォンには、3 つの主要な UI 領域が縦に積み重ねられています。 最初の 2 つ（ヘッダーとコントロール）の高さを固定したいと思いました。

```css
header {
  height: 70px;
}

.main-controls {
  padding-bottom: 0.7rem;
  height: 170px;
}
```

ただし、機器の高さに関係なく、3 番目の領域（再生できる録音済みサンプルが含まれている領域）に、残っているスペースをすべて確保したいと考えました。 フレックスボックスがここでの答えかもしれませんが、それはそのような単純なレイアウトのために少しやり過ぎです。 代わりに、次のように 3 番目のコンテナーの高さを親の高さの 100% から、他の 2 つの高さとパディングを引いたものに等しくすることで、問題を解決しました。

```css
.sound-clips {
  box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.7);
  background-color: rgba(0, 0, 0, 0.1);
  height: calc(100% - 240px - 0.7rem);
  overflow: scroll;
}
```

### 表示/非表示のチェックボックスのハック

これはすでにかなりよく文書化されていますが、チェックボックスのハックについて言及したいと思います。 これは、チェックボックスの `<label>` をクリックしてオン/オフを切り替えることができるという事実を乱用します。 ウェブディクタフォンでは、これにより情報画面が表示され、この画面は、右上隅にある疑問符アイコンをクリックすると表示/非表示になります。 まず最初に、次のように `<label>` を好きなようにスタイルして、他の要素の上に常に収まるように十分な `z-index` があり、したがってフォーカス可能/クリック可能になるようにします。

```css
label {
  font-family: "NotoColorEmoji";
  font-size: 3rem;
  position: absolute;
  top: 2px;
  right: 3px;
  z-index: 5;
  cursor: pointer;
}
```

次に、次のように実際のチェックボックスを非表示にします。 これは、UI を混乱させたくないためです。

```css
input[type="checkbox"] {
  position: absolute;
  top: -100px;
}
```

次に、（`<aside>` 要素で囲まれた）情報画面に希望のスタイルを設定し、レイアウトフローに表示されずメイン UI に影響しないように固定の位置を指定し、既定で収まって欲しい位置に変換し、スムーズな表示/非表示のための遷移を与えます。

```css
aside {
  position: fixed;
  top: 0;
  left: 0;
  text-shadow: 1px 1px 1px black;
  width: 100%;
  height: 100%;
  transform: translateX(100%);
  transition: 0.6s all;
  background-color: #999;
  background-image: linear-gradient(
    to top right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.5)
  );
}
```

最後に、チェックボックスをオンにすると（ラベルをクリックまたはフォーカスすると）、隣接する `<aside>` 要素の水平方向の平行移動値が変更され、スムーズにビューに遷移するという規則を書きます。

```css
input[type="checkbox"]:checked ~ aside {
  transform: translateX(0);
}
```

基本的なアプリの設定
----------

キャプチャしたいメディアストリームを入手するには、`getUserMedia()` を使用します。 その後、MediaStream 収録 API を使用してストリームを記録し、記録された各スニペットを生成された `<audio>` 要素のソースに出力して、再生できるようにします。

次のように録音ボタンと停止ボタン、および生成された音声プレーヤーを含む `<article>` の変数をいくつか宣言します。

```js
const record = document.querySelector(".record");
const stop = document.querySelector(".stop");
const soundClips = document.querySelector(".sound-clips");
```

このセクションの最後に、次のように基本的な `getUserMedia` 構造体を設定します。

```js
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  console.log("getUserMedia supported.");
  navigator.mediaDevices
    .getUserMedia(
      // 制約 - 音声のみがこのアプリでは必要
      {
        audio: true,
      },
    )

    // 成功コールバック
    .then((stream) => {})

    // エラーコールバック
    .catch((err) => {
      console.error(`The following getUserMedia error occurred: ${err}`);
    });
} else {
  console.log("getUserMedia not supported on your browser!");
}
```

他のことを実行する前に、すべてが `getUserMedia` がサポートされているかどうかをチェックするテストに包まれています。 次に、`getUserMedia()` を呼び出し、その内部で次のように定義します。

* **制約**: 音声だけがディクタフォンにキャプチャされます。
* **成功コールバック**: このコードは、`getUserMedia` の呼び出しが正常に完了した後に実行されます。
* **エラーコールバック**: 何らかの理由で `getUserMedia` の呼び出しが失敗した場合、このコードが実行されます。

**メモ:** 以下のコードはすべて `getUserMedia` の Success callback 内にあります。

メディアストリームのキャプチャ
---------------

`getUserMedia` がメディアストリームを正常に作成したら、`MediaRecorder()` コンストラクタを使用して新しい Media Recorder のインスタンスを作成し、それに直接ストリーム (stream)を渡します。 これが MediaStream 収録 API を使用するためのエントリーポイントです。 これで、ストリームをブラウザーの既定のエンコード形式で `Blob` にキャプチャする準備ができました。

```js
const mediaRecorder = new MediaRecorder(stream);
```

`MediaRecorder` インターフェイスには、メディアストリームの記録を制御できる一連のメソッドがあります。 ウェブディクタフォンでは、その内の 2 つを利用して、いくつかのイベントを待ち受けしています。 まず、録音ボタンを押すと `MediaRecorder.start()` を使用してストリームの録音を開始します。

```js
record.onclick = () => {
  mediaRecorder.start();
  console.log(mediaRecorder.state);
  console.log("recorder started");
  record.style.background = "red";
  record.style.color = "black";
};
```

`MediaRecorder` が録音しているとき、`MediaRecorder.state` プロパティは "recording" の値を返します。

録音が進むにつれて、音声データを収集する必要があります。 `ondataavailable` を使用してこれを行うためのイベントハンドラーを登録します。

```js
let chunks = [];

mediaRecorder.ondataavailable = (e) => {
  chunks.push(e.data);
};
```

**メモ:** ブラウザーは必要に応じて `dataavailable` イベントを発生させますが、この間隔を制御するために `start()` メソッドを呼び出すときにタイムスライス（例えば `start(10000)` ）を含めることも、必要なときに `MediaRecorder.requestData()` を呼び出してイベントを発生させることもできます。

最後に、停止ボタンが押されたときに `MediaRecorder.stop()` メソッドを使用して録音を停止し、アプリの他の場所で使用できるように `Blob` を完成させます。

```js
stop.onclick = () => {
  mediaRecorder.stop();
  console.log(mediaRecorder.state);
  console.log("recorder stopped");
  record.style.background = "";
  record.style.color = "";
};
```

メディアストリームが終了すると（例えば、曲のトラックを入手してトラックが終了した場合や、ユーザーがマイクの共有を停止した場合）、録音も自然に停止することがあることに注意してください。

blob を入手して使う
------------

録音が停止すると、`state` プロパティは `"inactive"` の値を返し、`stop` イベントが発生します。 `onstop` を使用してこれのイベントハンドラーを登録し、受け取ったすべてのチャンク (chunks) から `blob` を確定します。

```js
mediaRecorder.onstop = (e) => {
  console.log("recorder stopped");

  const clipName = prompt("Enter a name for your sound clip");

  const clipContainer = document.createElement("article");
  const clipLabel = document.createElement("p");
  const audio = document.createElement("audio");
  const deleteButton = document.createElement("button");

  clipContainer.classList.add("clip");
  audio.setAttribute("controls", "");
  deleteButton.innerHTML = "Delete";
  clipLabel.innerHTML = clipName;

  clipContainer.appendChild(audio);
  clipContainer.appendChild(clipLabel);
  clipContainer.appendChild(deleteButton);
  soundClips.appendChild(clipContainer);

  const blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
  chunks = [];
  const audioURL = window.URL.createObjectURL(blob);
  audio.src = audioURL;

  deleteButton.onclick = (e) => {
    let evtTgt = e.target;
    evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
  };
};
```

上記のコードを見て、何が起こっているのかを見てみましょう。

まず、ユーザーにクリップに名前を付けるように求めるプロンプトを表示します。

次に、次のような HTML 構造を作成し、それをクリップコンテナーに挿入します。 これは `<article>` 要素です。

```html
<article class="clip">
  <audio controls></audio>
  <p>your clip name</p>
  <button>Delete</button>
</article>
```

その後、録音した音声チャンクから結合された `Blob` を作成し、それを指すオブジェクト URL を `window.URL.createObjectURL(blob)` を使用して作成します。 次に、`<audio>` 要素の `src` 属性の値をオブジェクト URL に設定して、音声プレーヤーの再生ボタンが押されたときに `Blob` を再生するようにします。

最後に、削除ボタンに `onclick` ハンドラーを設定して、クリップの HTML 構造全体を削除する関数にします。

仕様書
---

| Specification |
| --- |
| MediaStream Recording # mediarecorder-api |

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

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

関連情報
----

* MediaStream 収録 API のランディングページ
* `Navigator.getUserMedia()`
* MediaStream 収録 API がウェブサイトのユーザーの 65% でサポートされるようになりました（英語）


メディア要素での収録 - Web API

メディア要素での収録
==========

MediaStream 収録 API の使用の記事では、 `MediaRecorder` インターフェイスを使用して `navigator.mediaDevices.getUserMedia()` からたハードウェアデバイスによって生成された `MediaStream` をキャプチャする方法について説明しましたが、記録する `MediaStream` のソースとして HTML メディア要素（`<audio>` または `<video>`）も使用できます。 この記事では、それを実現する例を見ていきます。

メディア要素の収録の例
-----------

### HTML
```

<p>
  Click the "Start Recording" button to begin video recording for a few seconds.
  You can stop recording by clicking the "Stop Recording" button. The "Download"
  button will download the received data (although it's in a raw, unwrapped form
  that isn't very useful).
</p>
<br />
```

まずは HTML の要点を見てみましょう。 これ以上のものはありませんが、アプリのコア操作の一部ではなく、単なる情報提供です。

```html
<div class="left">
  <div id="startButton" class="button">Start Recording</div>
  <h2>Preview</h2>
  <video id="preview" width="160" height="120" autoplay muted></video>
</div>
```

2 つの欄で主要なインターフェースを提示します。 左欄には、Start（開始）ボタンと動画プレビューを表示する `<video>` 要素があります。 これは、ユーザーのカメラが見ている動画です。 `autoplay` 属性は、カメラからストリームが到着したらすぐに表示するために使用し、`muted` 属性は、ユーザーのマイクからの音声をスピーカーに出力しないように使用していることに注意してください。 出力すると醜いフィードバックループ（ハウリング）を引き起こします。

```html
<div class="right">
  <div id="stopButton" class="button">Stop Recording</div>
  <h2>Recording</h2>
  <video id="recording" width="160" height="120" controls></video>
  <a id="downloadButton" class="button"> Download </a>
</div>
```

右欄には、Stop（停止）ボタンと収録された動画の再生に使用する `<video>` 要素があります。 再生パネルには `autoplay` を設定せずに（メディアが到着しても再生が開始されない）、`controls` を設定して、再生や一時停止などのユーザーコントロールを表示するように指示しています。

再生要素の下には、収録した動画をダウンロードするためのボタンがあります。
```

<div class="bottom">
  <pre id="log"></pre>
</div>
```

```
body {
  font:
    14px "Open Sans",
    "Arial",
    sans-serif;
}

video {
  margin-top: 2px;
  border: 1px solid black;
}

.button {
  cursor: pointer;
  display: block;
  width: 160px;
  border: 1px solid black;
  font-size: 16px;
  text-align: center;
  padding-top: 2px;
  padding-bottom: 4px;
  color: white;
  background-color: darkgreen;
  text-decoration: none;
}

h2 {
  margin-bottom: 4px;
}

.left {
  margin-right: 10px;
  float: left;
  width: 160px;
  padding: 0px;
}

.right {
  margin-left: 10px;
  float: left;
  width: 160px;
  padding: 0px;
}

.bottom {
  clear: both;
  padding-top: 10px;
}
```

それでは、JavaScript コードを見てみましょう。 結局のところ、これがアクションの大部分が起こるところです！

### グローバル変数の設定

必要なグローバル変数をいくつか設定することから始めます。

```js
let preview = document.getElementById("preview");
let recording = document.getElementById("recording");
let startButton = document.getElementById("startButton");
let stopButton = document.getElementById("stopButton");
let downloadButton = document.getElementById("downloadButton");
let logElement = document.getElementById("log");

let recordingTimeMS = 5000;
```

これらのほとんどは、私たちが取り組む必要がある要素への参照です。 最後の `recordingTimeMS` は 5000 ミリ秒（5 秒）に設定されています。 これは、収録する動画の長さを指定します。

### ユーティリティ関数

次に、後で使用するユーティリティ関数をいくつか作成します。

```js
function log(msg) {
  logElement.innerHTML += `${msg}\n`;
}
```

`log()` 関数は、ユーザーと情報を共有できるように、テキスト文字列を `<div>` に出力するために使用します。 それほどきれいではありませんが、この仕事は私たちの目的のために行われます。

```js
function wait(delayInMS) {
  return new Promise((resolve) => setTimeout(resolve, delayInMS));
}
```

`wait()` 関数は、指定したミリ秒数が経過すると解決する新しい `Promise` を返します。 タイムアウトハンドラー関数としてプロミスの解決ハンドラーを指定して、`setTimeout()` を呼び出すアロー関数を使用して動作します。 これにより、タイムアウトを使用するときにプロミス構文を使用できます。 これは、後で説明するように、プロミスを連鎖させるときに非常に便利です。

### メディア収録の開始

`startRecording()` 関数は収録プロセスの開始を処理します。

```js
function startRecording(stream, lengthInMS) {
  let recorder = new MediaRecorder(stream);
  let data = [];

  recorder.ondataavailable = (event) => data.push(event.data);
  recorder.start();
  log(`${recorder.state} for ${lengthInMS / 1000} seconds…`);

  let stopped = new Promise((resolve, reject) => {
    recorder.onstop = resolve;
    recorder.onerror = (event) => reject(event.name);
  });

  let recorded = wait(lengthInMS).then(() => {
    if (recorder.state === "recording") {
      recorder.stop();
    }
  });

  return Promise.all([stopped, recorded]).then(() => data);
}
```

`startRecording()` は 2 つの入力引数を取ります。 収録元の `MediaStream` と記録するミリ秒単位の長さです。 指定されたミリ秒数以下のメディアを常に収録しますが、その時間に達する前にメディアが停止すると、`MediaRecorder` も自動的に収録を停止します。

2 行目

入力ストリーム (`stream`) の収録を処理する `MediaRecorder` を作成します。

3 行目

空の配列 `data` を作成します。 これは、`ondataavailable` イベントハンドラーに提供されたメディアデータの `Blob` を保持するために使用します。

5 行目

`dataavailable` イベントのハンドラーを設定します。 受信したイベントの `data` プロパティはメディアデータを含む `Blob` です。 イベントハンドラーは単純に `Blob` を `data` 配列にプッシュ（末尾に追加）します。

6〜7 行目

`recorder.start()` を呼び出して収録処理を開始し、`recorder` の更新された状態と収録される秒数とともにメッセージをログに出力します。

9〜12 行目

`stopped` という名前の新しい `Promise` を作成します。 これは、`MediaRecorder` の `onstop` イベントハンドラーが呼び出されると解決し、 `onerror` イベントハンドラーが呼び出されると拒否します。 拒否ハンドラーは、発生したエラーの名前を入力として受け取ります。

14〜16 行目

`recorded` という名前の新しい `Promise` を作成します。 これは、指定されたミリ秒数が経過すると解決します。 解決すると、`MediaRecorder` が収録中の場合は停止します。

18〜22 行目

これらの行は、2 つの `Promise`（`stopped` と `recorded`）の両方が解決したときに満たされる新しい `Promise` を作成します。 それが解決すると、配列データは `startRecording(`) によってその呼び出し元に返されます。

### 入力ストリームの停止

`stop()` 関数は単に入力メディアを停止します。

```js
function stop(stream) {
  stream.getTracks().forEach((track) => track.stop());
}
```

これは `MediaStream.getTracks()` を呼び出し、`forEach()` を使用してストリーム内の各トラックの `MediaStreamTrack.stop()` を呼び出すことによって機能します。

### 入力ストリームを取得してレコーダーを設定

それでは、この例で最も複雑なコードを見てみましょう。 開始ボタンをクリックしたときのイベントハンドラーです。

```js
startButton.addEventListener(
  "click",
  () => {
    navigator.mediaDevices
      .getUserMedia({
        video: true,
        audio: true,
      })
      .then((stream) => {
        preview.srcObject = stream;
        downloadButton.href = stream;
        preview.captureStream =
          preview.captureStream || preview.mozCaptureStream;
        return new Promise((resolve) => (preview.onplaying = resolve));
      })
      .then(() => startRecording(preview.captureStream(), recordingTimeMS))
      .then((recordedChunks) => {
        let recordedBlob = new Blob(recordedChunks, { type: "video/webm" });
        recording.src = URL.createObjectURL(recordedBlob);
        downloadButton.href = recording.src;
        downloadButton.download = "RecordedVideo.webm";

        log(
          `Successfully recorded ${recordedBlob.size} bytes of ${recordedBlob.type} media.`,
        );
      })
      .catch((error) => {
        if (error.name === "NotFoundError") {
          log("Camera or microphone not found. Can't record.");
        } else {
          log(error);
        }
      });
  },
  false,
);
```

`click` イベントが発生すると、次のようになります。

2〜4 行目

`MediaDevices.getUserMedia` は、動画トラックと音声トラックの両方を持つ新しい `MediaStream` を要求するために呼び出します。 これが収録するストリームです。

5〜9 行目

`getUserMedia()` から返されたプロミスが解決すると、プレビューの `<video>` 要素の `srcObject` プロパティを入力ストリームに設定し、ユーザーのカメラでキャプチャしている動画をプレビューボックスに表示します。 `<video>` 要素はミュートしているので、音声は再生しません。 "Download"（ダウンロード）ボタンのリンクも、ストリームを参照するように設定します。 次に、8 行目では、 `preview.captureStream()` で `preview.mozCaptureStream()` を呼び出すように手配して、コードが Firefox で動作するようにします。 `HTMLMediaElement.captureStream()` メソッドが接頭辞付きだからです。その後、プレビュー動画の再生開始時に解決する新しい `Promise` を作成して返します。

10 行目

プレビュー動画の再生が開始されると、収録するメディアがあることがわかります。 したがって、先ほど作成した `startRecording()` 関数を呼び出し、プレビュー動画ストリーム（収録するソースメディアとして）と、 `recordingTimeMS`（収録するメディアのミリ秒数として）を渡します。 前述のように、`startRecording()` は、収録が完了すると、解決ハンドラーが呼び出される `Promise`（収録されたメディアデータのチャンクを含む `Blob` オブジェクトの配列を入力として受け取る）を返します。

11〜15 行目

収録プロセスの解決ハンドラーは、ローカルに `recordedChunks` として知られるメディアデータの `Blob` の配列を入力として受け取ります。 最初にすることは、`Blob()` コンストラクターがオブジェクトの配列を 1 つのオブジェクトに連結するという事実を利用して、チャンクを MIME タイプが `"video/webm"` の単一の `Blob` にマージすることです。 次に、`URL.createObjectURL()` を使用して `Blob` を参照する URL を作成します。 これは、ダウンロードされた動画再生要素の `src` 属性の値（`Blob` から動画を再生できるようにする）とダウンロードボタンのリンクのターゲットになります。

その後、ダウンロードボタンの `download` 属性が設定されます。 `download` 属性は論理値にすることができますが、ダウンロードするファイルの名前として使用する文字列に設定することもできます。 そのため、ダウンロードリンクの `download` 属性を `"RecordedVideo.webm"` に設定することで、ボタンをクリックすると内容が収録された動画である `"RecordedVideo.webm"` という名前のファイルをダウンロードするようにブラウザーに指示します。

17〜18 行目

記録されたメディアのサイズと種類は、2 つの動画とダウンロードボタンの下のログ領域に出力されます。

20 行目

すべての `Promise` の `catch()` は、`log()` 関数を呼び出すことによってエラーをロギング領域に出力します。

### 停止ボタンの処理

最後のコードでは、`addEventListener()` を使用して停止ボタンの `click` イベントのハンドラーを追加します。

```js
stopButton.addEventListener(
  "click",
  () => {
    stop(preview.srcObject);
  },
  false,
);
```

これは先ほど説明した `stop()` 関数を呼び出すだけです。

### 結果

残りの HTML と上に示されていない CSS をすべてまとめると、次のようになり、動作します。

こちらでデモ全体を見ることができ、ブラウザの開発者ツールを使ってページを検査し、 API が使用されている方法の説明には重要ではないので上に表示されない部分も含めて、すべてのコードを見てみることができます。

関連情報
----

* MediaStream 収録 API
* MediaStream 収録 API の使用
* メディアキャプチャとストリーム API


Screen.unlockOrientation() - Web API

Screen.unlockOrientation()
==========================

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

**`Screen.unlockOrientation()`** メソッドは、ページやアプリによって設定されているすべての画面のロックを除去します。代わりに `ScreenOrientation.unlock()` を使用してください。

**警告:** この機能は非推奨であり、代わりに `ScreenOrientation.unlock()` メソッドを使用してください。

**メモ:** このメソッドはインストールされたウェブアプリまたは全画面モードのウェブページでのみ動作します。

構文
--

```js
unlockOrientation();
```

### 引数

なし。

### 返値

向きの固定の解除が成功した場合に `true` が、解除されなかった場合に `false` が返されます。

例
-

```js
var unlockOrientation =
  screen.unlockOrientation ||
  screen.mozUnlockOrientation ||
  screen.msUnlockOrientation ||
  (screen.orientation && screen.orientation.unlock);

if (unlockOrientation()) {
  // 向きのロックが解除されました
} else {
  // 向きのロックの解除に失敗しました
}
```

仕様書
---

この機能は、どの仕様書にも含まれていません。標準化される予定はありません。

代わりに `ScreenOrientation.lock()` を使用してください。

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

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

関連情報
----

* `Screen.orientation`
* `Screen.lockOrientation()`
* `orientationchange` イベント
* 画面の向きの制御 (en-US)


Screen.colorDepth - Web API

Screen.colorDepth
=================

**`Screen.colorDepth`** は読み取り専用プロパティで、画面の色震度を返します。 CSSOM により、互換性の理由から `24` を返す実装もあります。そうでないものについては、ブラウザーの互換性の節を参照してください。

値
-

数値です。

例
-

```js
// 画面の色深度を確認
if (window.screen.colorDepth < 8) {
  // 少色版のページを使用
} else {
  // 通常の多色のページを使用
}
```

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-screen-colordepth |

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

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

関連情報
----

* `Screen.pixelDepth`


Screen.lockOrientation() - Web API

Screen.lockOrientation()
========================

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

**`lockOrientation()`** は `Screen` インターフェイスのメソッドで、画面を特定の方向にロックします。

**警告:** この機能は非推奨であり、仕様をさけてください。代わりに `ScreenOrientation.lock()` メソッドを使用してください。

**メモ:** このメソッドはインストールされたウェブアプリまたは全画面モードのウェブページでのみ動作します。

構文
--

```js
lockOrientation(orientation);
```

### 引数

`orientation`

画面をロックする向きです。文字列または文字列の配列で指定します。複数の文字列を渡したときは、選択した向きでのみ回転できるようになります。

以下の文字列表現が向きとして指定できます。

`portrait-primary`

 第一ポートレートモードである画面の向きを表します。
 第一ポートレートモードとは、端末を通常の向きが縦向きの場合と、端末の通常の位置が横向きの場合に時計回りに 90° 回転させた向きの場合です。どの向きが通常の向きであるかは、端末によって異なります。

`portrait-secondary`

 第二ポートレートモードである画面の向きを表します。
 第二ポートレートモードとは、端末を通常の向きが縦向きでそこから 180° 回転させた場合と、端末の通常の位置が横向きの場合に反時計回りに 90° 回転させた向きの場合です。どの向きが通常の向きであるかは、端末によって異なります。

`landscape-primary`

 第一ランドスケープモードである画面の向きを表します。
 第一ランドスケープモードとは、端末を通常の向きが横向きの場合と、端末の通常の位置が縦向きの場合に時計回りに 90° 回転させた向きの場合です。どの向きが通常の向きであるかは、端末によって異なります。

`landscape-secondary`

 第二ランドスケープモードである画面の向きを表します。
 第二ランドスケープモードとは、端末を通常の向きが横向きでそこから 180° 回転させた場合と、端末の通常の位置が縦向きの場合に反時計回りに 90° 回転させた向きの場合です。どの向きが通常の向きであるかは、端末によって異なります。

`portrait`

`portrait-primary` と `portrait-secondary` の両方を表します。

`landscape`

`landscape-primary` と `landscape-secondary` の両方を表します。

`default`

端末に自然な向きによって `portrait-primary` または `landscape-primary` が選ばれます。たとえば、ディスプレイの解像度が 1280\*800 なら、 `default` は `landscape` になるでしょうし、800\*1280 なら、 `default` は `portrait` になるでしょう。

**メモ:** 複数のロックが同時に指定されることがあります。そのため、 1 つの向きにのみロックがセットされた場合には、画面の向きはロックが解除されるまで決して変更されません。もしそうでなければ、端末がロックされた向きを含む複数の向きの間で、画面の向きが 1 つの向きから別の向きへと移り変わってしまうことになります。

### 返値

向きの固定が許可された場合には `true` が返り、向きのロックが拒否された場合には `false` が返ります。返値は、必ずしも画面の向きが実際にロックされていることを示すわけではないことに注意してください。遅延がある可能性があるからです。

例
-

### 文字列引数での使用方法

```js
screen.lockOrientationUniversal =
  screen.lockOrientation ||
  screen.mozLockOrientation ||
  screen.msLockOrientation;

if (screen.lockOrientationUniversal("landscape-primary")) {
  // 向きがロックされた
} else {
  // 向きのロックに失敗した
}
```

### `Array` 引数での使用方法

```js
screen.lockOrientationUniversal =
  screen.lockOrientation ||
  screen.mozLockOrientation ||
  screen.msLockOrientation;

if (
  screen.lockOrientationUniversal(["landscape-primary", "landscape-secondary"])
) {
  // 向きがロックされた
} else {
  // 向きのロックに失敗した
}
```

仕様書
---

この機能は、どの仕様書にも含まれていません。標準化される予定はありません。

代わりに `ScreenOrientation.lock()` を使用してください。

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

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

関連情報
----

* `Screen.orientation`
* `Screen.unlockOrientation()`
* `orientationchange` イベント
* 画面の向きの管理 (en-US)


Screen.height - Web API

Screen.height
=============

**`Screen.height`** は読み取り専用プロパティで、画面の高さをピクセル数で返します。

値
-

数値です。

例
-

```js
if (window.screen.availHeight !== window.screen.height) {
  // 何かが画面を占拠している
}
```

メモ
--

このプロパティによって与えられる高さのすべてがウィンドウに利用できるわけではないことに注意してください。タスクバーなどのウィジェットや、 OS と統合された他の特殊なアプリケーションウィンドウ（例えば、ウィンドウの上で追加のツールバーのように動作するように最小化された Spinner プレイヤーなど）は、ブラウザーウィンドウや他のアプリケーションに利用可能な空間の量を減らすことがあります。

Internet Explorer は、画面の高さを報告する際に拡大率の設定を考慮します。拡大率が 100% に設定されている場合のみ、実際の画面の高さを返します。

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-screen-height |

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

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


Screen.mozEnabled - Web API

Screen.mozEnabled
=================

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

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

これは論理値で、端末の画面を制御します。 `false` に設定すると画面をオフにします。

値
-

論理値です。

仕様書
---

仕様書の一部ではありません。

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

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


Screen: orientationchange イベント - Web API

Screen: orientationchange イベント
==============================

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

`orientationchange` イベントは、端末の向きが変化したときに発行されます。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

```js
addEventListener("orientationchange", (event) => {});

onorientationchange = (event) => {};
```

イベント型
-----

一般的な `Event` です。

仕様書
---

この機能は、どの仕様にも含まれていません。標準化の予定はありません。

代わりに `ScreenOrientation.onchange` (en-US) を使用してください。

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

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

関連情報
----

* 画面の向きの管理


Screen.availHeight - Web API

Screen.availHeight
==================

`Screen` インターフェイスの **`availHeight`** プロパティは読み取り専用で、画面のウェブコンテンツに利用することができる範囲の高さを、 CSS ピクセル単位で返します。 `Screen` は `Window` インターフェイスの `window.screen` プロパティから得ることができますので、 `availHeight` は `window.screen.availHeight` を使用してアクセスすることができます。

同様に、 `Screen.availWidth` を使用すると、ブラウザーがウェブコンテンツに利用することができる水平方向のピクセル数を取得することができます。

値
-

画面の利用可能な空間の高さを示す CSS ピクセル数を示す数値。これは、 `window.screen.height` の値よりも大きくすることはできず、端末やユーザーエージェントがそれ自身のために垂直方向の空間を確保している場合は、より小さくなります。

例えば、 Dock が画面の一番下（これが既定）にある Mac の場合、 `availHeight` の値は、下図のように、 `height` (CSS ピクセル単位の画面全体の高さ) から Dock とメニューバーの高さを差し引いた値になります。

![Screen.availHeight が Screen.height と画面の内容にどのように関係しているかを示す図](/ja/docs/Web/API/Screen/availHeight/availheight-diagram.svg)

例
-

ウェブアプリケーションで新しいウィンドウを開く必要がある場合、例えば複数のパネルを含むことができるツールパレットのように、それが利用可能な垂直方向のスペース全体を占めるように配置したい場合、ここで見られるものと同様のコードを使用して行うことができます。

メインウィンドウでは、パネルを開くときに以下のようなコードを使用します。

```js
let paletteWindow = window.open(
  "panels.html",
  "Panels",
  "left=0, top=0, width=200",
);
```

Panels ウィンドウの HTML (`panels.html`) には、独自の JavaScript コードがあり、ウィンドウが作成されるとすぐに実行されます。このコードは、特定のイベント（あらゆるイベント）を待つ必要もありません。このコードは、利用可能な空間に基づいてウィンドウの寸法の変更を処理します。

```js
window.outerHeight = window.screen.availHeight;
```

結果は以下のようになります。パネルウィンドウが画面の左にある垂直方向の空間をすべて埋めていることに注意してください。

![Screen.availHeight の例のスクリーンショット](/ja/docs/Web/API/Screen/availHeight/screen-availheight.png)

Windows システムでは、タスクバーや空間を必要とする他のインターフェイス要素のための空間を残して、利用可能なすべての垂直方向の空間を使用するようにウィンドウを開き、垂直方向に寸法を調整することで、同様に機能します。

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-screen-availheight |

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

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

関連情報
----

* `Window`
* `Screen`
* `Screen.availWidth`
* `Window.innerHeight`


Screen.pixelDepth - Web API

Screen.pixelDepth
=================

画面のビット深度を返します。 CSSOM により、互換性の理由から `24` を返す実装もあります。そうでないものについては、ブラウザーの互換性の節を参照してください。

値
-

数値です。

例
-

```js
// ビット深度が十分でない場合、
// より簡単な色を選択します。
if (window.screen.pixelDepth > 8) {
  document.style.color = "#FAEBD7";
} else {
  document.style.color = "#FFFFFF";
}
```

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-screen-pixeldepth |

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

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

関連情報
----

* `Screen.colorDepth`


Screen.width - Web API

Screen.width
============

**`Screen.width`** は読み取り専用のプロパティで、画面の幅を CSS ピクセル単位で返します。

値
-

数値です。

例
-

```js
// Crude way to check that the screen is at least 1024x768
if (window.screen.width >= 1024 && window.screen.height >= 768) {
  // Resolution is 1024x768 or above
}
```

メモ
--

このプロパティによって与えられた幅のすべてがウィンドウ自体に利用できるとは限らないことに注意してください。他のウィジェットが `window` オブジェクトで使用できない空間を占有している場合は、 `window.screen.width` と `window.screen.availWidth` に違いがあります。 `screen.height` も参照してください。

Internet Explorer は、画面の幅を報告する際に拡大率の設定を考慮します。拡大率が 100% に設定されている場合のみ、実際の画面の幅を返します。

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-screen-width |

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

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


Screen.availWidth - Web API

Screen.availWidth
=================

**`Screen.availWidth`** プロパティは、ウィンドウで利用可能な水平方向の空間をピクセル数で返します。

値
-

数値です。

例
-

```js
var screenAvailWidth = window.screen.availWidth;

console.log(screenAvailWidth);
```

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-screen-availwidth |

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

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


Screen.mozBrightness - Web API

Screen.mozBrightness
====================

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

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

画面のバックライトの明るさを、 0 (とても暗い) から 1 (完全に明るい) の範囲で示します。この値は倍精度浮動小数点数です。

この属性は、画面が無効化されていても読み書きできますが、画面が無効化されている間はバックライトが消灯しています。この属性に X の値を書き込むと、後で読み込んだときに同じ X の値になっていない場合があります。ほとんどの画面は倍精度の 0 と 1 の数だけ輝度レベルがあるわけではありません。値を格納する前に、値の精度が低下する可能性があります。

値
-

数値です。

仕様書
---

仕様書の一部ではありません。

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

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


Screen.orientation - Web API

Screen.orientation
==================

**`orientation`** は `Screen` インターフェイスの読み取り専用プロパティで、現在の画面の向きを返します。

値
-

画面の向きを表す `ScreenOrientation` のインスタンスです。

なお、古い接頭辞付きのものは文字列で `ScreenOrientation.type` と同等のものを返していました。

例
-

```js
var orientation =
  (screen.orientation || {}).type ||
  screen.mozOrientation ||
  screen.msOrientation;

if (orientation === "landscape-primary") {
  console.log("良い感じですね。");
} else if (orientation === "landscape-secondary") {
  console.log("うーん…。画面が上下逆です！");
} else if (
  orientation === "portrait-secondary" ||
  orientation === "portrait-primary"
) {
  console.log("うーん…。スクリーンを横向きにした方がいいですよ");
} else if (orientation === undefined) {
  console.log("このブラウザーは画面方向 API に対応していません :(");
}
```

仕様書
---

仕様書の一部ではありません。

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

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

関連情報
----

* `ScreenOrientation`
* `orientationchange` イベント
* 画面の方向の制御


TrackEvent.track - Web API

TrackEvent.track
================

**`track`** は `TrackEvent` インターフェイスの読み取り専用プロパティで、イベントが適用されるメディアトラックオブジェクトを指定します。

メディアトラックは `AudioTrack`、`VideoTrack`、`TextTrack` のいずれかのオブジェクトになります。

値
-

トラックで表されるメディアの種類に応じて、`AudioTrack`、`VideoTrack`、`TextTrack` のいずれかの型のオブジェクトです。 これは、イベントが適用されるトラックを識別します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-trackevent-track-dev |

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

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


TrackEvent() - Web API

TrackEvent()
============

**`TrackEvent()`** コンストラクターは、トラックのリスト（`AudioTrackList`、`VideoTrackList`、`TextTrackList` (en-US) の何れか）で発生したイベントを記述する新しい `TrackEvent` オブジェクトを作成して返します。

構文
--

```js
new TrackEvent(type)
new TrackEvent(type, options)
```

### 引数

`type`

 文字列で、このイベントの名前です。
 大文字小文字の区別があり、ブラウザーは `addtrack` または`removetrack` を設定します。

`options` 省略可

オブジェクトで、 *`Event()` で定義されたプロパティに加え*、以下のプロパティを設定することができます。

`track` 省略可

イベントが参照するトラック。 これは既定では `null` ですが、トラックの種類に応じて `VideoTrack`、`AudioTrack`、`TextTrack` の何れかに設定する必要があります。

### 返値

新しく作成された `TrackEvent` オブジェクト。 コンストラクターへの入力の説明に従って初期化されます。

仕様書
---

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

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

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


VRPose.linearAcceleration - Web API

VRPose.linearAcceleration
=========================

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

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

**`linearAcceleration`** は `VRPose` インターフェイスの読み取り専用プロパティで、現在の `VRPose.timestamp` における `VRDisplay` の直線加速度ベクトルを表す配列を、メートル/秒/秒単位で返します。

**メモ:** このプロパティは古い WebVR API の一部でした。これは WebXR 機器 API に置き換えられました。

言い換えれば、 `x`、`y`、`z` 軸に沿ったセンサーの現在の加速度です。

値
-

`Float32Array` です。または、VRセンサーが直線加速度データを提供できない場合は `null` です。

例
-

```js
// rendering loop for a VR scene
function drawVRScene() {
  // WebVR: Request the next frame of the animation
  vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene);

  // Populate frameData with the data of the next frame to display
  vrDisplay.getFrameData(frameData);

  // Retrieve the linear acceleration values for use in rendering
  // curFramePose is a VRPose object
  const curFramePose = frameData.pose;
  const linAcc = curFramePose.linearAcceleration;
  const lax = linAcc[0];
  const lay = linAcc[1];
  const laz = linAcc[2];

  // render the scene
  // …

  // WebVR: submit the rendered frame to the VR display
  vrDisplay.submitFrame();
}
```

仕様書
---

このプロパティは古い WebVR API の一部であり、これは WebXR 機器 API で置き枯れられました。標準規格になる見込みはありません。

すべてのブラウザーが新しい WebXR API を実装するまで、 A-Frame、Babylon.js、Three.js などのフレームワークを使用するか、ポリフィルを使用することが、すべてのブラウザーで動作する WebXR アプリを開発する上で推奨されます。[1]

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

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

関連情報
----

* WebVR API


VRPose.orientation - Web API

VRPose.orientation
==================

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

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

**`orientation`** は `VRPose` インターフェイスの読み取り専用プロパティで、現在の `VRPose.timestamp` におけるセンサーの方向を、クォータニオン値として返します。

**メモ:** このプロパティは古い WebVR API の一部でした。これは WebXR 機器 API に置き換えられました。

値は `Float32Array` で、以下の値から構成されます。

* pitch — X 軸を中心とした回転。
* yaw — Y 軸を中心とした回転。
* roll — Z 軸を中心とした回転。
* w — 4 つ目の次元（ふつうは 1）。

yaw （y 軸周りの回転）の方向は、センサーを最初に読み込んだときの初期値、または`VRDisplay.resetPose()`が最後に呼び出された時点でのセンサーの yaw を基準としています。

値
-

`Float32Array` です。または VR センサーが方向データを提供できない場合は `null` になります。

例
-

コード例については `VRDisplay.getFrameData()` を参照してください。

**メモ:** `{ x: 0, y: 0, z: 0, w: 1 }` の方向は「前方」と考えられています。

仕様書
---

このプロパティは古い WebVR API の一部であり、これは WebXR 機器 API で置き枯れられました。標準規格になる見込みはありません。

すべてのブラウザーが新しい WebXR API を実装するまで、 A-Frame、Babylon.js、Three.js などのフレームワークを使用するか、ポリフィルを使用することが、すべてのブラウザーで動作する WebXR アプリを開発する上で推奨されます。[1]

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

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

関連情報
----

* WebVR API


VRPose.angularVelocity - Web API

VRPose.angularVelocity
======================

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

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

**`angularVelocity`** は `VRPose` インターフェイスの読み取り専用プロパティで、現在の `VRPose.timestamp` における `VRDisplay` の角速度ベクトルを表す配列を、ラジアン/秒単位で返します。

**メモ:** このプロパティは古い WebVR API の一部でした。これは WebXR 機器 API に置き換えられました。

言い換えれば、センサーが `x`、`y`、`z` 軸を中心に回転したときの現在の速度です。

値
-

`Float32Array` です。または、 VR センサーが角速度情報を提供できない場合は `null` になります。

例
-

```js
// rendering loop for a VR scene
function drawVRScene() {
  // WebVR: Request the next frame of the animation
  vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene);

  // Populate frameData with the data of the next frame to display
  vrDisplay.getFrameData(frameData);

  // Retrieve the angular velocity values for use in rendering
  // curFramePose is a VRPose object
  const curFramePose = frameData.pose;
  const angVel = curFramePose.angularVelocity;
  const avx = angVel[0];
  const avy = angVel[1];
  const avz = angVel[2];

  // render the scene
  // …

  // WebVR: submit the rendered frame to the VR display
  vrDisplay.submitFrame();
}
```

仕様書
---

このプロパティは古い WebVR API の一部であり、これは WebXR 機器 API で置き枯れられました。標準規格になる見込みはありません。

すべてのブラウザーが新しい WebXR API を実装するまで、 A-Frame、Babylon.js、Three.js などのフレームワークを使用するか、ポリフィルを使用することが、すべてのブラウザーで動作する WebXR アプリを開発する上で推奨されます。[1]

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

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

関連情報
----

* WebVR API


VRPose.angularAcceleration - Web API

VRPose.angularAcceleration
==========================

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

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

**`angularAcceleration`** は `VRPose` インターフェイスのプロパティで、現在の `VRPose.timestamp` における `VRDisplay` の角加速度ベクトルを表す配列を、メートル/秒/秒単位で返します。

**メモ:** このプロパティは古い WebVR API の一部でした。これは WebXR 機器 API に置き換えられました。

言い換えれば、センサーが `x`、`y`、`z` 軸を中心に回転したときの現在の加速度です。

値
-

`Float32Array` です。または VR センサーが角加速度情報を提供できない場合は `null` を指定します。

例
-

```js
// rendering loop for a VR scene
function drawVRScene() {
  // WebVR: Request the next frame of the animation
  vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene);

  // Populate frameData with the data of the next frame to display
  vrDisplay.getFrameData(frameData);

  // Retrieve the angular acceleration values for use in rendering
  // curFramePose is a VRPose object
  const curFramePose = frameData.pose;
  const angAcc = curFramePose.angularAcceleration;
  const aax = angAcc[0];
  const aay = angAcc[1];
  const aaz = angAcc[2];

  // render the scene
  // …

  // WebVR: submit the rendered frame to the VR display
  vrDisplay.submitFrame();
}
```

仕様書
---

このプロパティは古い WebVR API の一部であり、これは WebXR 機器 API で置き枯れられました。標準規格になる見込みはありません。

すべてのブラウザーが新しい WebXR API を実装するまで、 A-Frame、Babylon.js、Three.js などのフレームワークを使用するか、ポリフィルを使用することが、すべてのブラウザーで動作する WebXR アプリを開発する上で推奨されます。[1]

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

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

関連情報
----

* WebVR API


VRPose.position - Web API

VRPose.position
===============

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

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

**`position`** は `VRPose` インターフェイスの読み取り専用プロパティで、 現在の `VRPose.timestamp` の位置を 3D ベクトルで返します。

**メモ:** このプロパティは古い WebVR API の一部でした。これは WebXR 機器 API に置き換えられました。

座標系は次の通りです。

* 正の X はユーザーから見て右です。
* 正の Y は上です。
* 正の Z はユーザーの背後です。

位置は原点からのメートル単位で、この点はセンサーの最初の読み取り位置か、 `VRDisplay.resetPose()` が最後に呼び出された時点のセンサーの位置のどちらかとなります。

**メモ:** 既定では、すべての位置は座ったままの空間位置として指定されます。この点を `VRStageParameters.sittingToStandingTransform` で変換すると（例えばルームディスプレイで作業する場合）、この点は立っている空間の位置に変換されます。

値
-

`Float32Array` です。または VR センサーが位置データを提供できない場合は null になります。

**メモ:** ユーザーエージェントは、ネックモデリングなどの技術によってエミュレートされた 位置値を提供することがあります。 その場合も `VRDisplayCapabilities.hasPosition` を false として報告する必要があります。

例
-

コード例については `VRDisplay.getFrameData()` を参照してください。

仕様書
---

このプロパティは古い WebVR API の一部であり、これは WebXR 機器 API で置き枯れられました。標準規格になる見込みはありません。

すべてのブラウザーが新しい WebXR API を実装するまで、 A-Frame、Babylon.js、Three.js などのフレームワークを使用するか、ポリフィルを使用することが、すべてのブラウザーで動作する WebXR アプリを開発する上で推奨されます。[1]

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

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

関連情報
----

* WebVR API


VRPose.linearVelocity - Web API

VRPose.linearVelocity
=====================

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

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

**`linearVelocity`** は `VRPose` インターフェイスの読み取り専用プロパティで、 現在の `VRPose.timestamp` における `VRDisplay` の線速度ベクトルを表す配列を、メートル/秒の単位で返します。

**メモ:** このプロパティは古い WebVR API の一部でした。これは WebXR 機器 API に置き換えられました。

言い換えれば、センサーが `x`, `y`, `z` 軸に沿って移動している現在の速度です。

値
-

`Float32Array` です。または VR センサーが直線速度データを提供できない場合は `null` です。

例
-

```js
// rendering loop for a VR scene
function drawVRScene() {
  // WebVR: Request the next frame of the animation
  vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene);

  // Populate frameData with the data of the next frame to display
  vrDisplay.getFrameData(frameData);

  // Retrieve the linear velocity values for use in rendering
  // curFramePose is a VRPose object
  const curFramePose = frameData.pose;
  const linVel = curFramePose.linearVelocity;
  const lvx = linVel[0];
  const lvy = linVel[1];
  const lvz = linVel[2];

  // render the scene
  // …

  // WebVR: submit the rendered frame to the VR display
  vrDisplay.submitFrame();
}
```

仕様書
---

このプロパティは古い WebVR API の一部であり、これは WebXR 機器 API で置き枯れられました。標準規格になる見込みはありません。

すべてのブラウザーが新しい WebXR API を実装するまで、 A-Frame、Babylon.js、Three.js などのフレームワークを使用するか、ポリフィルを使用することが、すべてのブラウザーで動作する WebXR アプリを開発する上で推奨されます。[1]

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

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

関連情報
----

* WebVR API


BluetoothRemoteGATTService: isPrimary プロパティ - Web API

BluetoothRemoteGATTService: isPrimary プロパティ
===========================================

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

読み取り専用プロパティ **`BluetoothGATTService.isPrimary`** は、これがプライマリーサービスかを表す論理値を返します。プライマリーサービスでなければ、セカンダリーサービスです。

値
-

論理値です。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothremotegattservice-isprimary |

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

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


BluetoothRemoteGATTService: getCharacteristic() メソッド - Web API

BluetoothRemoteGATTService: getCharacteristic() メソッド
====================================================

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

**`BluetoothGATTService.getCharacteristic()`** メソッドは、指定の universally unique identifier (UUID) に対応する `BluetoothRemoteGATTCharacteristic` のインスタンスで解決する `Promise` を返します。

構文
--

```js
getCharacteristic(characteristic)
```

### 引数

`characteristic`

キャラクタリスティックの UUID です。たとえば、Heart Rate Measurement characteristic は `'00002a37-0000-1000-8000-00805f9b34fb'` です。

### 返値

`BluetoothRemoteGATTCharacteristic` のインスタンスで解決する `Promise` です。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothremotegattservice-getcharacteristic |

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

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


BluetoothRemoteGATTService: device プロパティ - Web API

BluetoothRemoteGATTService: device プロパティ
========================================

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

読み取り専用プロパティ **`BluetoothGATTService.device`** は、`BluetoothDevice` のインスタンスを通じて、この Bluetooth デバイスの情報を返します。

値
-

`BluetoothDevice` のインスタンスです。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothremotegattservice-device |

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

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


BluetoothRemoteGATTService: uuid プロパティ - Web API

BluetoothRemoteGATTService: uuid プロパティ
======================================

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

読み取り専用プロパティ **`BluetoothGATTService.uuid`** は、このサービスの UUID を表す文字列を返します。

値
-

文字列です。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothremotegattservice-uuid |

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

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


BluetoothRemoteGATTService: getCharacteristics() メソッド - Web API

BluetoothRemoteGATTService: getCharacteristics() メソッド
=====================================================

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

**`BluetoothGATTService.getCharacteristics()`** メソッドは、指定の universally unique identifier (UUID) に対応する `BluetoothRemoteGATTCharacteristic` のインスタンスのリストで解決する `Promise` を返します。

構文
--

```js
getCharacteristics(characteristics)
```

### 引数

`characteristics`

キャラクタリスティックの UUID です。たとえば、Heart Rate Measurement characteristic は `'00002a37-0000-1000-8000-00805f9b34fb'` です。

### 返値

`BluetoothRemoteGATTCharacteristic` のインスタンスの `Array` で解決する `Promise` を返します。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothremotegattservice-getcharacteristics |

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

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


CompressionStream() - Web API

CompressionStream()
===================

**`CompressionStream()`** コンストラクターは、データのストリームを圧縮する新しい `CompressionStream` オブジェクトを生成します。

構文
--

```js
new CompressionStream(format)
```

### 引数

`format`

以下の使用可能な圧縮形式のうちのいずれかです。

* `"gzip"`
* `"deflate"`
* `"deflate-raw"`

例外
--

`TypeError`

コンストラクターに渡された形式がサポートされていないとき投げられます。

例
-

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

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

仕様書
---

| Specification |
| --- |
| Compression Streams # dom-compressionstream-compressionstream |

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

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


CompressionStream.writable - Web API

CompressionStream.writable
==========================

`CompressionStream` インターフェイスの読み取り専用プロパティ **`writable`** は、`WritableStream` を返します。

値
-

`WritableStream` です。

例
-

この例では、`CompressionStream` から `WritableStream` を返します。

```js
let stream = new CompressionStream("gzip");
console.log(stream.writeable); // WritableStream
```

仕様書
---

| Specification |
| --- |
| Streams Standard # dom-generictransformstream-writable |

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

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


CompressionStream.readable - Web API

CompressionStream.readable
==========================

`CompressionStream` インターフェイスの読み取り専用プロパティ **`readable`** は、`ReadableStream` を返します。

値
-

`ReadableStream` です。

例
-

この例では、`CompressionStream` から `ReadableStream` を返します。

```js
let stream = new CompressionStream("gzip");
console.log(stream.readable); // ReadableStream
```

仕様書
---

| Specification |
| --- |
| Streams Standard # dom-generictransformstream-readable |

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

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


URLSearchParams: keys() メソッド - Web API

URLSearchParams: keys() メソッド
============================

**`keys()`** は `URLSearchParams` インターフェイスのメソッドで、このオブジェクトに含まれるすべてのキーを反復処理できる`イテレーター`を返します。 キーは文字列です。

**メモ:** このメソッドはウェブワーカーで利用できます。

構文
--

```js
keys()
```

### 引数

なし。

### 返値

`イテレーター`を返します。

例
-

```js
// テスト用の URLSearchParams オブジェクトの作成
const searchParams = new URLSearchParams("key1=value1&key2=value2");

// キーの表示
for (const key of searchParams.keys()) {
  console.log(key);
}
```

結果は次のとおりです。
```

key1
key2
```

仕様書
---

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

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

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

関連項目
----

* `URL` インターフェイス


URLSearchParams: set() メソッド - Web API

URLSearchParams: set() メソッド
===========================

**`set()`** は `URLSearchParams` インターフェイスのメソッドで、指定された検索パラメーターに関連付けられた値を指定された値に設定します。一致する値が複数ある場合、このメソッドは他の値を削除します。 検索パラメーターが存在しない場合、このメソッドはそれを作成します。

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

構文
--

```js
set(name, value)
```

### 引数

`name`

設定するパラメーターの名前。

`value`

設定するパラメーターの値。

### 返値

なし (`undefined`)。

例
-

```js
let url = new URL("https://example.com?foo=1&bar=2");
let params = new URLSearchParams(url.search);

// 3 つ目のパラメーターを追加
params.set("baz", 3);
params.toString(); // "foo=1&bar=2&baz=3"
```

仕様書
---

| Specification |
| --- |
| URL Standard # dom-urlsearchparams-set |

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

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


URLSearchParams: size プロパティ - Web API

URLSearchParams: size プロパティ
===========================

**`URLSearchParams.size`** は読み取り専用のプロパティで、検索パラメーターの項目の総数を示します。

値
-

数値で、`URLSearchParams` オブジェクト内の検索パラメーターの項目の総数を示します。

例
-

### 検索パラメーターの項目数の取得

検索パラメーターの項目の総数を取得するには、次のようにします。

```js
const searchParams = new URLSearchParams("c=4&a=2&b=3&a=1");
searchParams.size; // 4
```

`a` 引数が 2 回与えられますが、 `size` は 3 ではなく、与えられたすべての項目の数 (4) を返すことに注意してください。固有のキーの数を取得するには、`Set` などを使用してください。

```js
[...new Set(searchParams.keys())].length; // 3
```

### 検索パラメーターが存在するかどうかをチェック

size` プロパティは、検索パラメーターがあるかどうかをチェックするのに便利です。

```js
const url = new URL("https://example.com?foo=1&bar=2");

if (url.searchParams.size) {
  console.log("URL has search parameters!");
}
```

仕様書
---

| Specification |
| --- |
| URL Standard # dom-urlsearchparams-size |

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

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

関連情報
----

* `URL.searchParams`
* `URLSearchParams` のポリフィル (`core-js`)


URLSearchParams: toString() メソッド - Web API

URLSearchParams: toString() メソッド
================================

**`toString()`** は `URLSearchParams` インターフェイスのメソッドで、URL での使用に適したクエリー文字列を返します。

**メモ:** このメソッドは、疑問符のないクエリー文字列を返します。これは、それを含む window.location.search とは異なります。

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

構文
--

```js
toString()
```

### 引数

なし。

### 返値

疑問符を除いた文字列です。（検索パラメーターが設定されていない場合は空文字列を返します。）

例
-

```js
const url = new URL("https://example.com?foo=1&bar=2");
const params = new URLSearchParams(url.search);

// 2番目の foo パラメーターの追加
params.append("foo", 4);
console.log(params.toString()); // 'foo=1&bar=2&foo=4' と表示
```

仕様書
---

| Specification |
| --- |
| URL Standard # urlsearchparams-stringification-behavior |

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

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

関連項目
----

* `URL` インターフェイス。
* Google Developers: URLSearchParams を使用した簡単な URL 操作（英語）


URLSearchParams: forEach() メソッド - Web API

URLSearchParams: forEach() メソッド
===============================

**`forEach()`** は `URLSearchParams` インターフェイスのメソッドを使用すると、コールバック関数を介してこのオブジェクトに含まれるすべての値を反復処理できます。

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

構文
--

```js
forEach(callback)
forEach(callback, thisArg)
```

### 引数

`callback`

それぞれの要素に対して実行される関数で、以下の引数が渡されます。

`value`

`URLSearchParams` オブジェクトで現在処理中の項目の値です。

`key`

`URLSearchParams` オブジェクトで現在処理中の項目のキーです。

`searchParams`

`forEach()` が呼び出された `URLSearchParams` オブジェクトです。

`thisArg` 省略可

`callback` の実行中に `this` として使用される値です。

### 返値

なし (`undefined`)。

例
-

```js
// テスト用の URLSearchParams オブジェクトの作成
const searchParams = new URLSearchParams("key1=value1&key2=value2");

// 値の記録
searchParams.forEach((value, key) => {
  console.log(value, key);
});
```

結果は次のとおりです。
```

value1 key1
value2 key2
```

仕様書
---

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

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

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

関連項目
----

* `URL` インターフェイス。


URLSearchParams: append() メソッド - Web API

URLSearchParams: append() メソッド
==============================

**`append()`** は `URLSearchParams` インターフェイスのメソッドで、指定されたキー/値のペアを新しい検索パラメーターとして追加します。

下にある例に示すように、同じキーが複数回追加された場合、各値がパラメーター文字列に複数回現れます。

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

構文
--

```js
append(name, value)
```

### 引数

name

追加するパラメーターの名前。

value

追加するパラメーターの値。

### 返値

なし (`undefined`)。

例
-

```js
let url = new URL("https://example.com?foo=1&bar=2");
let params = new URLSearchParams(url.search);

// 2番目の foo パラメーターを追加します。
params.append("foo", 4);
// クエリー文字列はこうなる: 'foo=1&bar=2&foo=4'
```

仕様書
---

| Specification |
| --- |
| URL Standard # dom-urlsearchparams-append |

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

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

関連項目
----

* `URL`
* Google Developers: URLSearchParams を使用した簡単な URL 操作（英語）


URLSearchParams: getAll() メソッド - Web API

URLSearchParams: getAll() メソッド
==============================

**`getAll()`** は `URLSearchParams` インターフェイスのメソッドで、指定された検索パラメーターに関連付けられたすべての値を配列として返します。

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

構文
--

```js
getAll(name)
```

### 引数

`name`

返すパラメーターの名前。

### 返値

文字列の配列です。

例
-

```js
let url = new URL("https://example.com?foo=1&bar=2");
let params = new URLSearchParams(url.search);

// 2 つ目の foo パラメーターを追加します。
params.append("foo", 4);

console.log(params.getAll("foo")); // ["1","4"] を表示します。
```

仕様書
---

| Specification |
| --- |
| URL Standard # dom-urlsearchparams-getall |

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

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


URLSearchParams: values() メソッド - Web API

URLSearchParams: values() メソッド
==============================

**`values()`** は `URLsearchParams` インターフェイスのメソッドで、このオブジェクトに含まれるすべての値を反復処理できる`イテレーター`を返します。 値は文字列です。

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

構文
--

```js
values()
```

### 引数

なし。

### 返値

`イテレーター`を返します。

例
-

次の例では、`URLSearchParams` コンストラクターに URL 検索文字列を渡し、`values()` が返すイテレーターを使って値をコンソールに表示します。

```js
const searchParams = new URLSearchParams("key1=value1&key2=value2");

for (const value of searchParams.values()) {
  console.log(value);
}
```

結果は次のとおりです。
```

value1
value2
```

この例も上記とほぼ同じですが、先にイテレーターを配列にキャストしています。

```js
const searchParams = new URLSearchParams("key1=value1&key2=value2");

console.log(Array.from(searchParams.values()));
```

結果は次の通りです。
```

['value1', 'value2']
```

仕様書
---

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

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

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

関連情報
----

* `URL` インターフェイス