SpeechRecognition: error イベント - Web API

SpeechRecognition: error イベント
=============================

**`error`** はウェブ音声 API の
 `SpeechRecognition` オブジェクトのイベントで、音声認識のエラーが発生した時に発生します。

構文
--

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

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

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

イベント型
-----

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

Event

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

*以下に列挙したプロパティに加えて、親インターフェイスである `Event` から継承したプロパティも利用できます。*

`SpeechRecognitionErrorEvent.error` (en-US) 読取専用

発生したエラーの種類を示します。

`SpeechRecognitionErrorEvent.message` (en-US) 読取専用

エラーの詳細を説明するメッセージを返します。

例
-

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

```js
const recognition = new webkitSpeechRecognition() || new SpeechRecognition();

recognition.addEventListener("error", (event) => {
  console.error(`音声認識エラーが発生しました: ${event.error}`);
});
```

または `onerror` イベントハンドラープロパティを使用してください。

```js
recognition.onerror = (event) => {
  console.error(`音声認識エラーが発生しました: ${event.error}`);
};
```

仕様書
---

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

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

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

関連情報
----

* ウェブ音声 API


SpeechRecognition.grammars - Web API

SpeechRecognition.grammars
==========================

**`grammars`** は `SpeechRecognition` インターフェイスのプロバティで、現在の `SpeechRecognition` が理解できる文法を表す `SpeechGrammar` オブジェクトの集合を返します。

値
-

`SpeechGrammarList` (en-US) で、アプリの文法を表す`SpeechGrammar` オブジェクトが入っています。

例
-

下記のソースコードは Speech color changer を参考しています。

```js
const grammar =
  "#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;";
const recognition = new SpeechRecognition();
const speechRecognitionList = new SpeechGrammarList();
speechRecognitionList.addFromString(grammar, 1);
recognition.grammars = speechRecognitionList;
//recognition.continuous = false;
recognition.lang = "en-US";
recognition.interimResults = false;
recognition.maxAlternatives = 1;

// ...
```

仕様書
---

| Specification |
| --- |
| Web Speech API # dom-speechrecognition-grammars |

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

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

関連情報
----

* ウェブ音声 API


SpeechRecognition.abort() - Web API

SpeechRecognition.abort()
=========================

**`abort()`** はウェブ音声 API のメソッドで、音声認識サービスが、入ってくる音を待ち受けすることを停止し、 `SpeechRecognitionResult` (en-US) を返さないようにします。

構文
--

```js
abort()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

```js
const grammar =
  "#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;";
const recognition = new SpeechRecognition();
const speechRecognitionList = new SpeechGrammarList();
speechRecognitionList.addFromString(grammar, 1);
recognition.grammars = speechRecognitionList;

const diagnostic = document.querySelector(".output");
const bg = document.querySelector("html");

document.body.onclick = () => {
  recognition.start();
  console.log("色のコマンドを受け付ける準備ができました。");
};

abortBtn.onclick = () => {
  recognition.abort();
  console.log("音声認識が中止されました。");
};

recognition.onspeechend = () => {
  recognition.stop();
  console.log("音声認識サービスが停止されました。");
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # dom-speechrecognition-abort |

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

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

関連情報
----

* ウェブ音声 API


SpeechRecognition: result イベント - Web API

SpeechRecognition: result イベント
==============================

**`result`** はウェブ音声 API のイベントで、音声認識サービスが結果を返したとき、つまり単語やフレーズが正の値で認識され、それがアプリに伝達されたときに発行されます。

構文
--

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

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

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

イベント型
-----

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

Event

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

*以下に列挙したプロパティに加えて、親インターフェイスである `Event` から継承したプロパティも利用できます。*

`SpeechRecognitionEvent.emma` 読取専用

結果の EMMA (Extensible MultiModal Annotation markup language) - XML - 表現を返します。

`SpeechRecognitionEvent.interpretation` 読取専用

ユーザーが言ったことの意味づけを返します。

`SpeechRecognitionEvent.resultIndex` 読取専用

実際に変更された `SpeechRecognitionResultList` (en-US) 「配列」の中で最もインデックス値の小さい結果を返します。

`SpeechRecognitionEvent.results` 読取専用

現在のセッションのすべての音声認識結果を表す `SpeechRecognitionResultList` (en-US) オブジェクトを返します。

例
-

下記のソースコードは Speech color changer の例を参考しています

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

```js
const recognition = new SpeechRecognition();

recognition.addEventListener("result", (event) => {
  const color = event.results[0][0].transcript;
  diagnostic.textContent = `結果を受信しました: ${color}.`;
  bg.style.backgroundColor = color;
});
```

または `onresult` イベントハンドラープロパティを使用してください。

```js
recognition.onresult = (event) => {
  const color = event.results[0][0].transcript;
  diagnostic.textContent = `結果を受信しました: ${color}.`;
  bg.style.backgroundColor = color;
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # eventdef-speechrecognition-result |
| Web Speech API # dom-speechrecognition-onresult |

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

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

関連情報
----

* ウェブ音声 API


SpeechRecognition: audiostart イベント - Web API

SpeechRecognition: audiostart イベント
==================================

**`audiostart`** はウェブ音声 API のイベントで、ユーザーエージェントが音声認識のためのオーディオキャプチャを開始したときに発生します。

構文
--

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

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

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

イベント型
-----

一般的な `Event` であり、追加のプロパティはありません。

例
-

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

```js
const recognition = new webkitSpeechRecognition() || new SpeechRecognition();

recognition.addEventListener("audiostart", () => {
  console.log("音声キャプチャを開始しました。");
});
```

または `onaudiostart` イベントハンドラープロパティを使用してください。

```js
recognition.onaudiostart = () => {
  console.log("音声キャプチャを開始しました。");
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # eventdef-speechrecognition-audiostart |
| Web Speech API # dom-speechrecognition-onaudiostart |

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

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

関連情報
----

* ウェブ音声 API


SpeechRecognition.interimResults - Web API

SpeechRecognition.interimResults
================================

**`interimResults`** は `SpeechRecognition` インターフェイスのプロパティで、中間の結果を返す (`true`) か返さない (`false`) か制御します。中間の結果は最終的ではない結果になります（例えば `SpeechRecognitionResult.isFinal` プロパティは `false` となります）。

**`interimResults`** の既定値は `false` です。

### 値

論理値で、現在の `SpeechRecognition` の中間結果の状態を表します。 `true` の場合は中間の結果を返すことができ、 `false` の場合は返すことができません。

例
-

下記のソースコードは Speech color changer を参考しています

```js
const grammar =
  "#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;";
const recognition = new SpeechRecognition();
const speechRecognitionList = new SpeechGrammarList();
speechRecognitionList.addFromString(grammar, 1);
recognition.grammars = speechRecognitionList;
//recognition.continuous = false;
recognition.lang = "en-US";
recognition.interimResults = false;
recognition.maxAlternatives = 1;

// ...
```

仕様書
---

| Specification |
| --- |
| Web Speech API # dom-speechrecognition-interimresults |

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

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

関連情報
----

* ウェブ音声 API


SpeechRecognition() - Web API

SpeechRecognition()
===================

**`SpeechRecognition()`** コンストラクターは、 `SpeechRecognition` のオブジェクトインスタンスを作成します。

構文
--

```js
new SpeechRecognition()
```

### 引数

なし。

例
-

このコードは、 Speech color changer から引用しています。

```js
const grammar =
  "#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;";
const recognition = new SpeechRecognition();
const speechRecognitionList = new SpeechGrammarList();
speechRecognitionList.addFromString(grammar, 1);
recognition.grammars = speechRecognitionList;
//recognition.continuous = false;
recognition.lang = "en-US";
recognition.interimResults = false;
recognition.maxAlternatives = 1;

// ...
```

仕様書
---

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

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

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

関連情報
----

* ウェブ音声 API


SpeechRecognition: audioend イベント - Web API

SpeechRecognition: audioend イベント
================================

**`audioend`** はウェブ音声 API のイベントで、ユーザーエージェントが音声認識のためのオーディオキャプチャを終了したときに発生します。

構文
--

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

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

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

イベント型
-----

一般的な `Event` であり、追加のプロパティはありません。

例
-

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

```js
const recognition = new webkitSpeechRecognition() || new SpeechRecognition();

recognition.addEventListener("audioend", () => {
  console.log("音声認識が終了しました。");
});
```

または `onaudioend` イベントハンドラープロパティを使用してください。

```js
recognition.onaudioend = () => {
  console.log("Audio capturing ended");
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # eventdef-speechrecognition-audioend |
| Web Speech API # dom-speechrecognition-onaudioend |

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

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

関連情報
----

* ウェブ音声 API


SpeechRecognition.start() - Web API

SpeechRecognition.start()
=========================

**`start()`** はウェブ音声 API のメソッドで、 `SpeechRecognition` に関連する文法を認識する意図をもって、着信される音声を認識する音声認識サービスを開始します。

構文
--

```js
start()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

```js
const grammar =
  "#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;";
const recognition = new SpeechRecognition();
const speechRecognitionList = new SpeechGrammarList();
speechRecognitionList.addFromString(grammar, 1);
recognition.grammars = speechRecognitionList;

const diagnostic = document.querySelector(".output");
const bg = document.querySelector("html");

document.body.onclick = () => {
  recognition.start();
  console.log("色のコマンドを受け付ける準備ができました。");
};

abortBtn.onclick = () => {
  recognition.abort();
  console.log("音声認識が中止されました。");
};

recognition.onspeechend = () => {
  recognition.stop();
  console.log("音声認識サービスが停止されました。");
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # dom-speechrecognition-start |

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

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

関連情報
----

* ウェブ音声 API


SpeechRecognition.stop() - Web API

SpeechRecognition.stop()
========================

**`stop()`** はウェブ音声 API のメソッドで、入ってくる音声の待ち受けする認識サービスを停止し、今まで認識した音声を `SpeechRecognitionResult` (en-US) として返します。

構文
--

```js
stop()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

```js
const grammar =
  "#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;";
const recognition = new SpeechRecognition();
const speechRecognitionList = new SpeechGrammarList();
speechRecognitionList.addFromString(grammar, 1);
recognition.grammars = speechRecognitionList;

const diagnostic = document.querySelector(".output");
const bg = document.querySelector("html");

document.body.onclick = () => {
  recognition.start();
  console.log("色のコマンドを受け付ける準備ができました。");
};

abortBtn.onclick = function () {
  recognition.abort();
  console.log("音声認識が中止されました。");
};

recognition.onspeechend = function () {
  recognition.stop();
  console.log("音声認識サービスが停止されました。");
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # dom-speechrecognition-stop |

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

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

関連情報
----

* ウェブ音声 API


SpeechRecognition: start イベント - Web API

SpeechRecognition: start イベント
=============================

**`speechstart`** はウェブ音声 API の `SpeechRecognition` オブジェクトのイベントで、これは、音声認識サービスが、現在の `SpeechRecognition` に関連する文法を認識するために、入力される音声を聞き始めたときに発行されます。

構文
--

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

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

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

イベント型
-----

一般的な `Event` であり、追加のプロパティはありません。

例
-

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

```js
const recognition = new webkitSpeechRecognition() || new SpeechRecognition();

recognition.addEventListener("start", () => {
  console.log("音声認識サービスが開始しました");
});
```

または `onstart` イベントハンドラープロパティを使用してください。

```js
recognition.onstart = () => {
  console.log("音声認識サービスが開始しました");
};
```

仕様書
---

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

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

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

関連情報
----

* ウェブ音声 API


SpeechRecognition: end イベント - Web API

SpeechRecognition: end イベント
===========================

**`end`** はウェブ音声 API の
 `SpeechRecognition` オブジェクトのイベントで、音声認識サービスが切断された時に発生します。

構文
--

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

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

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

イベント型
-----

一般的な `Event` であり、追加のプロパティはありません。

例
-

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

```js
const recognition = new webkitSpeechRecognition() || new SpeechRecognition();

recognition.addEventListener("end", () => {
  console.log("音声認識サービスを切断しました。");
});
```

または `onend` イベントハンドラープロパティを使用してください。

```js
recognition.onend = () => {
  console.log("音声認識サービスを切断しました。");
};
```

仕様書
---

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

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

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

関連情報
----

* ウェブ音声 API


SpeechRecognition: soundstart イベント - Web API

SpeechRecognition: soundstart イベント
==================================

**`soundstart`** はウェブ音声 API のイベントで、何らかの音（認識できる音声、できない音声にかかわらず）が検出できた時に発生します。

構文
--

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

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

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

イベント型
-----

一般的な `Event` であり、追加のプロパティはありません。

例
-

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

```js
const recognition = new webkitSpeechRecognition() || new SpeechRecognition();

recognition.addEventListener("soundstart", () => {
  console.log("音を受信し始めました");
});
```

または `onsoundstart` イベントハンドラープロパティを使用してください。

```js
recognition.onsoundstart = () => {
  console.log("音を受信し始めました");
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # eventdef-speechrecognition-soundstart |
| Web Speech API # dom-speechrecognition-onsoundstart |

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

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

関連情報
----

* ウェブ音声 API


SpeechRecognition.maxAlternatives - Web API

SpeechRecognition.maxAlternatives
=================================

**`maxAlternatives`** は `SpeechRecognition` インターフェイスのプロパティで、 `SpeechRecognitionResult` (en-US) ごとに提供される `SpeechRecognitionAlternative` の最大数を設定します。

既定値は `1` です

値
-

数値で、それぞれの結果に対して返される選択肢の最大値を表します。

例
-

下記のソースコードは Speech color changer を参考しています。

```js
const grammar =
  "#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;";
const recognition = new SpeechRecognition();
const speechRecognitionList = new SpeechGrammarList();
speechRecognitionList.addFromString(grammar, 1);
recognition.grammars = speechRecognitionList;
//recognition.continuous = false;
recognition.lang = "en-US";
recognition.interimResults = false;
recognition.maxAlternatives = 1;

// ...
```

仕様書
---

| Specification |
| --- |
| Web Speech API # dom-speechrecognition-maxalternatives |

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

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

関連情報
----

* ウェブ音声 API


SpeechRecognition.continuous - Web API

SpeechRecognition.continuous
============================

**`continuous`** は `SpeechRecognition` インターフェイスのプロパティで、認識が行われるたびに、継続的に結果を返すのか、あるいは単一の結果のみ返すのかを制御します。

既定では単一の結果 (`false`) です。

### 値

論理値で、現在の `SpeechRecognition` の継続の状態を表します。`true` の場合は継続的で、`false` の場合は継続的ではありません（単一の結果を都度返します）。

例
-

下記のソースコードは Speech color changer を参考しています。

```js
const grammar =
  "#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;";
const recognition = new SpeechRecognition();
const speechRecognitionList = new SpeechGrammarList();
speechRecognitionList.addFromString(grammar, 1);
recognition.grammars = speechRecognitionList;
recognition.continuous = false;
recognition.lang = "en-US";
recognition.interimResults = false;
recognition.maxAlternatives = 1;

// ...
```

仕様書
---

| Specification |
| --- |
| Web Speech API # dom-speechrecognition-continuous |

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

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

関連情報
----

* ウェブ音声 API


SpeechRecognition: speechstart イベント - Web API

SpeechRecognition: speechstart イベント
===================================

**`speechstart`** はウェブ音声 API のイベントで、音声認識サービスにより音声として認識された音が検出されたときに発行されます。

構文
--

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

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

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

イベント型
-----

一般的な `Event` であり、追加のプロパティはありません。

例
-

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

```js
const recognition = new webkitSpeechRecognition() || new SpeechRecognition();

recognition.addEventListener("speechstart", () => {
  console.log("音声が検出されました");
});
```

または `onspeechstart` イベントハンドラープロパティを使用してください。

```js
recognition.onspeechstart = () => {
  console.log("音声が検出されました");
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # eventdef-speechrecognition-speechstart |
| Web Speech API # dom-speechrecognition-onspeechstart |

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

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

関連情報
----

* ウェブ音声 API


SpeechRecognition: speechend イベント - Web API

SpeechRecognition: speechend イベント
=================================

**`speechend`** はウェブ音声 API のイベントで、音声認識サービスで認識された音声が検出されなくなったときに発行されます。

構文
--

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

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

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

イベント型
-----

一般的な `Event` であり、追加のプロパティはありません。

例
-

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

```js
const recognition = new webkitSpeechRecognition() || new SpeechRecognition();

recognition.addEventListener("speechend", () => {
  console.log("音声が検出されなくなりました");
});
```

または `onspeechend` イベントハンドラープロパティを使用してください。

```js
recognition.onspeechend = () => {
  console.log("音声が検出されなくなりました");
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # eventdef-speechrecognition-speechend |
| Web Speech API # dom-speechrecognition-onspeechend |

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

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

関連情報
----

* ウェブ音声 API


SpeechRecognition: soundend イベント - Web API

SpeechRecognition: soundend イベント
================================

**`soundend`** はウェブ音声 API のイベントで、何らかの音（認識できる音声、できない音声にかかわらず）が検出し終えた時に発生します。

構文
--

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

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

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

イベント型
-----

一般的な `Event` であり、追加のプロパティはありません。

例
-

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

```js
const recognition = new webkitSpeechRecognition() || new SpeechRecognition();

recognition.addEventListener("soundend", (event) => {
  console.log("音が受信できなくなりました");
});
```

または `onsoundend` イベントハンドラープロパティを使用してください。

```js
recognition.onsoundend = (event) => {
  console.log("音が受信できなくなりました");
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # eventdef-speechrecognition-soundend |
| Web Speech API # dom-speechrecognition-onsoundend |

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

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

関連情報
----

* ウェブ音声 API


SpeechRecognition.lang - Web API

SpeechRecognition.lang
======================

**`lang`** は `SpeechRecognition` インターフェイスのプロパティで、現在の `SpeechRecognition` の言語を返します。指定されていない場合、 HTML の `lang` 属性を返し、またそれも指定されていない場合、ユーザーエージェントの言語の設定を返します。
### 値

文字列で、現在の `SpeechRecognition` での BCP 47 言語タグを表します。

例
-

下記のソースコードは Speech color changer を参考しています

```js
const grammar =
  "#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;";
const recognition = new SpeechRecognition();
const speechRecognitionList = new SpeechGrammarList();
speechRecognitionList.addFromString(grammar, 1);
recognition.grammars = speechRecognitionList;
//recognition.continuous = false;
recognition.lang = "en-US";
recognition.interimResults = false;
recognition.maxAlternatives = 1;

// ...
```

仕様書
---

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

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

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

関連情報
----

* ウェブ音声 API


Client: url プロパティ - Web API

Client: url プロパティ
=================

**`url`** は `Client` インターフェイスの読み取り専用プロパティで、現在のサービスワーカークライアントの URL を返します。

### 値

文字列です。

例
-

```js
self.addEventListener("notificationclick", (event) => {
  console.log("On notification click: ", event.notification.tag);
  event.notification.close();

  // これは、クライアントが既に開いているかどうかを確認し、
  // 開いている場合にフォーカスを合わせます
  event.waitUntil(
    clients
      .matchAll({
        type: "window",
      })
      .then((clientList) => {
        for (const client of clientList) {
          if (client.url === "/" && "focus" in client) {
            return client.focus();
          }
        }
        if (clients.openWindow) {
          return clients.openWindow("/");
        }
      }),
  );
});
```

仕様
--

| Specification |
| --- |
| Service Workers # client-url |

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

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


Client: frameType プロパティ - Web API

Client: frameType プロパティ
=======================

**`frameType`** は `Client` インターフェイスの読み取り専用プロパティで、現在の `Client` の閲覧コンテキストの種類を示します。この値は、`"auxiliary"`、`"top-level"`、`"nested"`、`"none"` の何れかです。

値
-

4 つの文字列、`"auxiliary"`、`"top-level"`、`"nested"`、`"none"` の何れかになります。

仕様書
---

| Specification |
| --- |
| Service Workers # client-frametype |

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

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


Client: postMessage() メソッド - Web API

Client: postMessage() メソッド
==========================

**`postMessage()`** は `Client` インターフェイスのメソッドで、サービスワーカーがクライアント (`Window`, `Worker`, `SharedWorker`) にメッセージを送信することができます。メッセージは、`navigator.serviceWorker` の "`message`" イベントで受信されます。

構文
--

```js
postMessage(message)
postMessage(message, transferables)
```

### 引数

`message`

クライアントに送信するメッセージです。これは、任意の構造化複製可能型にすることができます。

`transfer` 省略可

メッセージとともに転送されるオブジェクトのシーケンスです。 これらのオブジェクトの所有権は宛先側に与えられ、送信側では使用できなくなります。

### 返値

なし (`undefined`)。

例
-

サービスワーカーからクライアントへのメッセージの送信

```js
addEventListener("fetch", (event) => {
  event.waitUntil(
    (async () => {
      // クライアントにアクセスできない場合は、早期に終了します。
      // 例えば、クロスオリジンの場合。
      if (!event.clientId) return;

      // クライアントを取得します。
      const client = await clients.get(event.clientId);
      // クライアントを取得できない場合は、早期に終了します。
      // 例えば、閉じている場合。
      if (!client) return;

      // クライアントにメッセージを送信します。
      client.postMessage({
        msg: "私はあなたからフェッチされましたよ！",
        url: event.request.url,
      });
    })(),
  );
});
```

そのメッセージの受け取り

```js
navigator.serviceWorker.addEventListener("message", (event) => {
  console.log(event.data.msg, event.data.url);
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # dom-client-postmessage-message-options |

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

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


Client: type プロパティ - Web API

Client: type プロパティ
==================

**`type`** は `Client` インターフェイスの読み取り専用プロパティで、サービスワーカーが制御しているクライアントの種類を示します。

### 値

クライアントの種類を表す文字列。 値は次のいずれかです。

* `"window"`
* `"worker"`
* `"sharedworker"`
例
-

```js
// サービスワーカークライアント（文書など）
function sendMessage(message) {
  return new Promise((resolve, reject) => {
    // これは ServiceWorker.postMessage バージョンであることに注意してください
    navigator.serviceWorker.controller.postMessage(message);
    window.serviceWorker.onMessage = (e) => {
      resolve(e.data);
    };
  });
}

// 制御するサービスワーカー
self.addEventListener("message", (e) => {
  // e.source はクライアントオブジェクトです
  e.source.postMessage(`こんにちは！ あなたのメッセージは: ${e.data}`);
  // type 値も投稿してクライアントに戻しましょう
  e.source.postMessage(e.source.type);
});
```

仕様
--

| Specification |
| --- |
| Service Workers # client-type |

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

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


Client: id プロパティ - Web API

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

**`id`** は `Client` インターフェイスの読み取り専用プロパティで、`Client` オブジェクトの汎用一意識別子を返します。

値
-

固有にオブジェクトを識別する文字列です。

仕様書
---

| Specification |
| --- |
| Service Workers # client-id |

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

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


HTMLCollection: item() メソッド - Web API

HTMLCollection: item() メソッド
===========================

`HTMLCollection` の `item()` メソッドは、この集合の中で指定された位置にあるノードを返します。

**メモ:** `HTMLCollection` の中身はライブであるため、その背景にある DOM が変化すると、子の集合内にある個々のノードの位置は変化する可能性があり、インデックス値が指定されたノードを差し続けなくなる可能性があります。

構文
--

```js
item(index)
```

### 引数

`index`

返す `Node` の位置。要素は `HTMLCollection` 内で、文書内のソースに現れる順序と同じ順序で現れます。

### 返値

指定したインデックスにある `Node`、または `index` が 0 より小さいか length プロパティ以上の場合は `null` です。

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

`item()` メソッドは `HTMLCollection` から番号付けされた要素を返します。JavaScript で `HTMLCollection` を配列として扱い、配列記法を使用してインデックスを作成する方が簡単です。下記の例を参照してください。

例
-

```js
const images = document.images; // これは HTMLCollection
const img0 = images.item(0); // このように item() メソッドを使うことができる
const img1 = images[1]; // ただし、この記述方がより易しく一般的
```

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

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

関連情報
----

* `NodeList.item()`


HTMLCollection: namedItem() メソッド - Web API

HTMLCollection: namedItem() メソッド
================================

**`namedItem()`** は `HTMLCollection` インターフェイスのメソッドで、この集合の中で `id` または `name` 属性が指定された名前に一致する `Element` の先頭のものを返します。一致する要素がなければ `null` を返します。

JavaScript では、配列のブラケット記法を`文字列`で `collection["value"]` のように使用すると、`collection.namedItem("value")` と同等になります。

構文
--

```js
namedItem(key)
```

### 引数

* `key` は文字列で、探している要素の `id` または `name` 属性の値を表します。
### 返値

* `item` は `HTMLCollection` の中で *key* に一致する最初の `Element` です。または、存在しない場合は `null` です。
例
-

### HTML

```html
<div id="personal">
  <span name="title">Dr.</span>
  <span name="firstname">Carina</span>
  <span name="lastname">Anand</span>
  <span id="degree">(MD)</span>
</div>
```

### JavaScript

```js
const container = document.getElementById("personal");

// "title" という名前の HTMLSpanElement を返す。そのような要素が存在しない場合は null を返す。
const titleSpan = container.children.namedItem("title");

// 以下の変化形は、name や id が一致する要素がない場合、null ではなく undefined を返す
const firstnameSpan = container.children["firstname"];
const lastnameSpan = container.children.lastname;

// id が "degree" である span 要素を返す
const degreeSpan = container.children.namedItem("degree");

const output = document.createElement("div");
output.textContent = `Result: ${titleSpan.textContent} ${firstnameSpan.textContent} ${lastnameSpan.textContent} ${degreeSpan.textContent}`;

container.insertAdjacentElement("afterend", output);
```

### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-htmlcollection-nameditem-key |

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

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


HTMLCollection: length プロパティ - Web API

HTMLCollection: length プロパティ
============================

**`HTMLCollection.length`** プロパティは、`HTMLCollection` の中にあるアイテム数を返します。

値
-

整数の値で、`HTMLCollection` の中にあるアイテムの数を表します。

例
-

`length` プロパティは DOM プログラミングで有益なことが多いです。リストがすべて存在するかどうかを確認するために、リストの長さをテストするために良く使用されます。また、この例のように `for` ループのイテレーターとしてもよく使用されます。

```js
// 文書内でクラス ".test" を持つすべての要素
const items = document.getElementsByClassName("test");

// リスト内の各テスト項目について、要素全体をHTMLの文字列として追加します。
let gross = "";
for (let i = 0; i < items.length; i++) {
  gross += items[i].innerHTML;
}

// gross は test 要素の HTML になります。
```

仕様書s
----

| Specification |
| --- |
| DOM Standard # ref-for-dom-htmlcollection-length① |

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

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


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

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

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

**`MIDIMessageEvent()`** コンストラクターは、新しい `MIDIMessageEvent` オブジェクトを生成します。イベントは `MIDIInput` が 1 個以上の MIDI メッセージの受信を完了した時に生成されるため、通常このコンストラクターは使用されません。

構文
--

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

### 引数

`type`

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

`options` 省略可

*`Event()` で定義されたプロパティに加えて*、以下のプロパティを持ちうるオブジェクトです。

`data`

MIDI メッセージのデータバイト列が格納された `Uint8Array` のインスタンスです。

### 返値

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

仕様書
---

| Specification |
| --- |
| Web MIDI API # dom-midimessageevent-constructor |

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

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


MIDIMessageEvent: data プロパティ - Web API

MIDIMessageEvent: data プロパティ
============================

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

`MIDIMessageEvent` インターフェイスの読み取り専用プロパティ **`data`** は、1 個の MIDI メッセージの MIDI データバイト列を返します。

値
-

`Uint8Array` です。

例
-

以下の例では、すべての入力ポートで `midimessage` イベントを監視します。メッセージを受信したら、`data` の値をコンソールに出力します。

```js
inputs.forEach((input) => {
  input.onmidimessage = (message) => {
    console.log(message.data);
  };
});
```

仕様書
---

| Specification |
| --- |
| Web MIDI API # dom-midimessageevent-data |

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

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


PointerEvent.width - Web API

PointerEvent.width
==================

**`width`** は `PointerEvent` インターフェイスの読み取り専用プロパティで、CSS ピクセルで測定された、x 軸に沿ったポインターの接触形状の幅を表します。 ポインター機器のソース（指など）に応じて、特定のポインターに対して、各イベントは異なる値を生成することがあります。

入力ハードウェアが接触形状をブラウザーに報告できない場合、幅の既定値は `1` です。

値
-

このイベントの接触領域の幅（CSS ピクセル単位）。

例
-

この例では、`PointerEvent` インターフェイスの `width` プロパティと `height` プロパティを使用して接触面積を計算する方法を示します。

```js
target.addEventListener(
  "pointerdown",
  (ev) => {
    // 接触面積を計算する
    const area = ev.width \* ev.height;
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Pointer Events # dom-pointerevent-width |

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

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


PointerEvent.getCoalescedEvents() - Web API

PointerEvent.getCoalescedEvents()
=================================

**`getCoalescedEvents()`** は `PointerEvent` インターフェイスのメソッドで、送出された `pointermove` イベントに合成されるすべての `PointerEvent` インスタンスの列を返します。

構文
--

```js
getCoalescedEvents()
```

### 引数

なし。

### 返値

`PointerEvent` インスタンスの列。

仕様書
---

| Specification |
| --- |
| Pointer Events # dom-pointerevent-getcoalescedevents |

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

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


PointerEvent() - Web API

PointerEvent()
==============

**`PointerEvent()`** コンストラクターは、新しい信頼できない合成 `PointerEvent` オブジェクトのインスタンスを作成します。

構文
--

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

### 引数

`type`

文字列で、イベントの名前を表します（PointerEvent のイベントの種類を参照）。

`options` 省略可

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

`pointerId`

数値で、既定値は `0` であり、インスタンスの `PointerEvent.pointerId` の値を設定します。

`width`

数値で、既定値は `1` であり、インスタンスの `PointerEvent.width` の値を設定します。

`height`

数値で、既定値は `1` であり、インスタンスの `PointerEvent.height` の値を設定します。

`pressure`

数値で、既定値は `0` であり、インスタンスの `PointerEvent.pressure` の値を設定します。

`tangentialPressure`

数値で、既定値は `0` であり、インスタンスの `PointerEvent.tangentialPressure` の値を設定します。

`tiltX`

数値で、既定値は `0` であり、インスタンスの `PointerEvent.tiltX` の値を設定します。

`tiltY`

数値で、既定値は `0` であり、インスタンスの `PointerEvent.tiltY` の値を設定します。

`twist`

数値で、既定値は `0` であり、インスタンスの `PointerEvent.twist` の値を設定します。

`pointerType`

文字列で、既定値は `""` であり、インスタンスの `PointerEvent.pointerType` の値を設定します。

`isPrimary`

論理値で、既定値は `false` であり、インスタンスの `PointerEvent.isPrimary` の値を設定します。

### 返値

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

例
-

```js
const moveEvent = new PointerEvent("pointermove");

const downEvent = new PointerEvent("pointerdown", {
  pointerId: 1,
  bubbles: true,
  cancelable: true,
  pointerType: "touch",
  width: 100,
  height: 100,
  isPrimary: true,
});
```

仕様書
---

| Specification |
| --- |
| Pointer Events # dom-pointerevent-constructor |

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

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


PointerEvent.isPrimary - Web API

PointerEvent.isPrimary
======================

**`isPrimary`** は `PointerEvent` インターフェイスの読み取り専用プロパティで、イベントを生成したポインター機器が*主*ポインターであるかどうかを示します。 イベントの発生原因となったポインターが主機器である場合は `true` を返し、それ以外の場合は `false` を返します。

マルチポインターのシナリオ（複数のタッチ点に対応するタッチ画面など）では、このプロパティを使用して、各種類のアクティブなポインターの集合から*マスターポインター*を識別します。 主ポインターのみが*互換マウスイベント*を生成します。 単一のポインターによる操作のみを希望する場合は、主ポインターではないものを無視することによって実現することができます。

ポインターがマウスを表している場合、そのポインターが主と見なされます。 ペン入力を表すポインターは、その `pointerdown` イベントが、ペン入力を表す他のアクティブなポインターがないときに送出された場合、主ペン入力と見なされます。タッチ入力を表すポインターは、その `pointerdown` イベントが、タッチ入力を表す他のアクティブなポインターが存在しないときに送出された場合、主タッチ入力と見なされます。

2 種類以上のポインター機器が同時に使用されている場合、複数のポインター（`pointerType` ごとに 1 つ）が主と見なされます。 例えば、タッチ接触とマウスカーソルが同時に動かされると、両方とも主と見なされるポインターが生成されます。 複数の主ポインターがある場合、これらのポインターはすべて*互換マウスイベント*を生成します（ポインター、マウス、およびタッチの相互作用の詳細については、ポインターイベント を参照）。

値
-

論理値で、このイベントのポインターが主ポインターである場合は `true` を返し、そうでない場合は `false` を返します。

例
-

この例は、`isPrimary` の値を使用して、適切な処理関数を呼び出す方法を示しています。

```js
target.addEventListener(
  "pointerdown",
  (event) => {
    if (event.isPrimary) {
      process\_primary\_pointer(event);
    } else {
      process\_secondary\_pointer(event);
    }
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Pointer Events # dom-pointerevent-isprimary |

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

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


PointerEvent.height - Web API

PointerEvent.height
===================

`PointerEvent` インターフェイスの読み取り専用プロパティである **`height`** は、ポインターの接触ジオメトリーの高さを y 軸に従って表します (CSS ピクセル単位)。またポインターデバイスのソース (指など) によっては、与えられたポインターに対して、各イベントが異なる値を生成することがあります。

入力ハードウェアが接触ジオメトリーをブラウザーに報告できない場合、高さはデフォルトで `1` になります。

値
-

イベントの接触ジオメトリーの高さ (CSS ピクセル単位)。

例
-

このプロパティの例は PointerEvent.width の例に含まれています。

仕様
--

| Specification |
| --- |
| Pointer Events # dom-pointerevent-height |

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

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


PointerEvent.pressure - Web API

PointerEvent.pressure
=====================

**`pressure`** は `PointerEvent` インターフェイスの読み取り専用プロパティで、ポインター入力の正規化された圧力を示します。

値
-

ポインター入力の `0` から `1` までの範囲に正規化された圧力。ここで、`0` と `1` は、それぞれハードウェアが検出できる最小圧力と最大圧力を表します。 マウスなど、圧力に対応していないハードウェアの場合、値はポインターのボタンの状態がアクティブであるときは `0.5`、それ以外のときは `0` です。

例
-

このスニペットでは、`pointerdown` イベントが発生すると、そのイベントの `pressure` プロパティの値に応じてさまざまな関数が呼び出されます。

```js
someElement.addEventListener(
  "pointerdown",
  (event) => {
    if (event.pressure === 0) {
      // 圧力なし
      process\_no\_pressure(event);
    } else if (event.pressure === 1) {
      // 最大圧力
      process\_max\_pressure(event);
    } else {
      // デフォルト
      process\_pressure(event);
    }
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Pointer Events # dom-pointerevent-pressure |

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

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

関連情報
----

* `Touch.force`


PointerEvent.tiltX - Web API

PointerEvent.tiltX
==================

**`tiltX`** は `PointerEvent` インターフェイスの読み取り専用プロパティで、ポインターの *Y-Z 平面*と画面との間の角度（度単位）です。 このプロパティは通常、ペン/スタイラス型のポインターにのみ役立ちます。

このプロパティの説明については、仕様の図 2 を参照してください。

値
-

ポインター（スタイラス）の Y-Z 平面と画面の間の角度（度単位）。 値の範囲は `-90` から `90` です。 ここで、正の値は右への傾きです。 このプロパティに対応していない機器の場合、値は `0` です。

例
-

この例は、`tiltX` プロパティおよび `tiltY` プロパティへの簡単なアクセスを示しています。

```js
someElement.addEventListener(
  "pointerdown",
  (event) => {
    process\_tilt(event.tiltX, event.tiltY);
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Pointer Events # dom-pointerevent-tiltx |

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

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


PointerEvent.twist - Web API

PointerEvent.twist
==================

**`twist`** は `PointerEvent` インターフェイスの読み取り専用プロパティで、ポインター（ペンやスタイラスなど）の主軸を中心とした時計回りの回転を度数で表します。

値
-

トランスデューサー（ポインター）に適用される、ねじれの量を度数で表す `long` 値。 値の範囲は `0` から `359` です。 `twist` を報告しない機器の場合、値は `0` です。

例
-

`pointerdown` イベントが発生すると、イベントの `twist` プロパティの値に応じてさまざまな関数が呼び出されます。

```js
someElement.addEventListener(
  "pointerdown",
  (event) => {
    if (event.twist === 0) {
      // ねじれなし
      process\_no\_twist(event);
    } else {
      // デフォルト
      process\_twist(event);
    }
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Pointer Events # dom-pointerevent-twist |

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

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

関連情報
----

* `Touch.force`


PointerEvent.pointerId - Web API

PointerEvent.pointerId
======================

**`pointerId`** `PointerEvent` インターフェイスの読み取り専用プロパティで、特定のポインターのイベントに割り当てられた識別子です。 識別子は一意であり、他のすべてのアクティブポインターのイベントの識別子と異なります。 値はランダムに生成される可能性があるため、特定の意味を伝えることは保証されません。

値
-

数値です。

例
-

次のコードスニペットは、以前に保存された `pointerId` と、発生したばかりの `pointerdown` イベントのものとを比較します。

```js
let id; // これが以前に保存された pointerId であると仮定しましょう

target.addEventListener(
  "pointerdown",
  (event) => {
    // キャッシュされた前のイベントの ID を現在の
    // イベントの ID と比較し、それに応じて処理する
    if (id === event.pointerId) process\_event(event);
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Pointer Events # dom-pointerevent-pointerid |

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

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


PointerEvent.tangentialPressure - Web API

PointerEvent.tangentialPressure
===============================

**`tangentialPressure`** は `PointerEvent` インターフェイスの読み取り専用プロパティで、ポインター入力の正規化された接線方向の圧力（バレル圧力またはシリンダー応力（cylinder stress）とも呼ばれます）を表します。

値
-

ポインター入力の正規化された接線方向の圧力を表す `-1` から `1` の範囲の `float` 値。ここで、`0` はコントロールの中立位置です。

ハードウェアによっては、`0` から `1` の範囲の正の値しかサポートしない場合があることに注意してください。 接線方向の圧力をサポートしないハードウェアの場合、値は `0` になります。

例
-

このスニペットでは、 `pointerdown` イベントが発生すると、イベントの `tangentialPressure` プロパティの値に応じてさまざまな関数が呼び出されます。

```js
someElement.addEventListener(
  "pointerdown",
  (event) => {
    if (event.tangentialPressure === 0) {
      // 圧力なし
      process\_no\_tanPressure(event);
    } else if (event.tangentialPressure === 1) {
      // 最大圧力
      process\_max\_tanPressure(event);
    } else {
      // デフォルト
      process\_tanPressure(event);
    }
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Pointer Events # dom-pointerevent-tangentialpressure |

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

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

関連情報
----

* `Touch.force`


PointerEvent.pointerType - Web API

PointerEvent.pointerType
========================

**`pointerType`** は `PointerEvent` インターフェイスの読み取り専用プロパティで、特定のポインターイベントを引き起こした機器の種類（マウス、ペン、またはタッチ）を示します。

値
-

このイベントのポインターの種類です。対応している値は以下の文字列です。

`"mouse"`

このイベントはマウス機器によって生成されました。

`"pen"`

このイベントはペン機器またはスタイラス機器によって生成されました。

`"touch"`

このイベントは指などのタッチによって生成されました。

機器の種類がブラウザーで検出できない場合、値は空の文字列 (`""`) になります。 ブラウザーが上記以外のポインター機器の種類に対応している場合は、他の種類の機器と名前が競合しないように、値に *ベンダー接頭辞* をつける必要があります。

例
-

この例は、`pointerType` プロパティの値を使用して適切なポインターの種類の処理関数を呼び出す方法を示しています。

```js
targetElement.addEventListener(
  "pointerdown",
  (event) => {
    // 適切なポインターの種類のハンドラーを呼び出す
    switch (event.pointerType) {
      case "mouse":
        process\_pointer\_mouse(event);
        break;
      case "pen":
        process\_pointer\_pen(event);
        break;
      case "touch":
        process\_pointer\_touch(event);
        break;
      default:
        console.log(`pointerType ${event.pointerType} には対応していません`);
    }
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Pointer Events # dom-pointerevent-pointertype |

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

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


PointerEvent.tiltY - Web API

PointerEvent.tiltY
==================

**`tiltY`** は `PointerEvent` インターフェイスの読み取り専用プロパティで、ポインターの *X-Z 平面*と画面の間の角度（度単位）です。 このプロパティは通常、ペン/スタイラス型のポインターのみ役立ちます。

このプロパティの説明については、仕様の図 3 を参照してください。

値
-

ポインター（スタイラス）の X-Z 平面と画面の間の角度（度単位）。 値の範囲は `-90` から `90` です。 ここで、正の値はユーザーの方への傾きです。 このプロパティをサポートしていないデバイスの場合、値は `0` です。

例
-

この例は、`tiltX` プロパティおよび `tiltY` プロパティへの簡単なアクセスを示しています。

```js
someElement.addEventListener(
  "pointerdown",
  (event) => {
    process\_tilt(event.tiltX, event.tiltY);
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Pointer Events # dom-pointerevent-tilty |

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

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


PushSubscription: expirationTime プロパティ - Web API

PushSubscription: expirationTime プロパティ
======================================

**`expirationTime`** は `PushSubscription` インターフェイスの読み取り専用プロパティで、プッシュサブスクリプションに関連付けられたサブスクリプションの有効期限を `DOMHighResTimeStamp` で返します。存在しなければ `null` を返します。

値
-

`DOMHighResTimeStamp` です。

仕様書
---

| Specification |
| --- |
| Push API # dom-pushsubscription-expirationtime |

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

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


PushSubscription: options プロパティ - Web API

PushSubscription: options プロパティ
===============================

**`options`** は `PushSubscription` インターフェイスの読み取り専用プロパティで、サブスクリプションを作成するために用いられたオプションが入ったオブジェクトです｡

値
-

以下の値が入った読み取り専用の `PushSubscriptionOptions` オブジェクトです。

`userVisibleOnly`

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

`applicationServerKey`

プッシュサーバーがプッシュサーバーを通じてクライアントアプリケーションにメッセージを送信するのに用いる公開鍵です。この値は、アプリケーションサーバーで生成された署名用鍵ペアの一部であり、P-256 曲線上での楕円曲線デジタル署名 (ECDSA) で利用可能です。

仕様書
---

| Specification |
| --- |
| Push API # dom-pushsubscription-options |

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

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


PushSubscription: subscriptionId プロパティ - Web API

PushSubscription: subscriptionId プロパティ
======================================

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

**`subscriptionId`** は `PushSubscription` インターフェイスの読み取り専用プロパティで、このプッシュサブスクリプションに関連するサブスクリプション ID が入った文字列を返します。

**警告:** この機能の代わりに、同じインターフェイスの `PushSubscription.endPoint` プロパティを使用してください。

値
-

文字列です。

仕様書
---

この機能は、プッシュ API の仕様書から削除されました。もう標準化を目指していません。

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

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


PushSubscription: getKey() メソッド - Web API

PushSubscription: getKey() メソッド
===============================

`getKey()` は `PushSubscription` インターフェイスのメソッドで、サーバーに送信されてプッシュメッセージのデータを暗号化するために使用される、クライアントの公開鍵を表す `ArrayBuffer` を返します。

構文
--

```js
getKey(name)
```

### 引数

`method`

クライアントの公開鍵の生成に使用される暗号化方式です。取りうる値は以下の通りです。

`p256dh`

P-256 曲線（つまり、NIST secp256r1 楕円曲線）の楕円曲線ディフィー・ヘルマン公開鍵です。結果として得られるキーは、ANSI X9.62 フォーマットで非圧縮ポイントとなります。

`auth`

Message Encryption for Web Push で記述されている認証秘密です。

### 返値

`ArrayBuffer`。

例
-

```js
reg.pushManager.getSubscription().then((subscription) => {
  // プッシュメッセージからサブスクライブ / アンサブスクライブ
  // する任意の UI を有効にする

  subBtn.disabled = false;

  if (!subscription) {
    console.log("Not yet subscribed to Push");
    // プッシュを購読していない場合、ユーザーがプッシュできるように
    // UI を設定する。
    return;
  }

  // プッシュメッセージを購読していることを表示するように
  // UI を設定する。
  subBtn.textContent = "Unsubscribe from Push Messaging";
  isPushEnabled = true;

  // 購読ステータスのための UI 要素の設定を含んで状態を初期化し、
  // プッシュ経由でサブスクライバーを更新する。
  const endpoint = subscription.endpoint;
  const key = subscription.getKey("p256dh");
  const auth = subscription.getKey("auth");

  // ...
});
```

仕様書
---

| Specification |
| --- |
| Push API # dom-pushsubscription-getkey |

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

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


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

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

`unsubscribe()` は `PushSubscription` インターフェイスのメソッドで、現在のサブスクリプションから脱退に成功したときに論理値で解決される `Promise` を返します。

構文
--

```js
unsubscribe()
```

### 引数

なし。

### 返値

現在のサブスクリプションから脱退に成功したときに論理値で解決される `Promise` です。

例
-

```js
navigator.serviceWorker.ready.then((reg) => {
  reg.pushManager.getSubscription().then((subscription) => {
    subscription
      .unsubscribe()
      .then((successful) => {
        // 登録脱退が成功
      })
      .catch((e) => {
        // 登録脱退が失敗
      });
  });
});
```

仕様書
---

| Specification |
| --- |
| Push API # dom-pushsubscription-unsubscribe |

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

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

関連項目
----

* `PushManager.getSubscription`


PushSubscription: toJSON() メソッド - Web API

PushSubscription: toJSON() メソッド
===============================

**`toJSON()`** は `PushSubscription` インターフェイスの メソッドで、標準のシリアライザーです。これは、このサブスクリプションのプロパティの JSON 表現を返す、便利なショートカットを提供します。

構文
--

```js
toJSON()
```

### 引数

なし。

### 返値

JSON オブジェクトです。現在は、`endpoint` メンバーとしてサブスクリプションエンドポイントのみを含みます。

例
-

```js
navigator.serviceWorker.ready.then((reg) => {
  reg.pushManager.getSubscription().then((subscription) => {
    const mySubscription = subscription.toJSON();
    // サブスクリプションの詳細を使用して何かを実行する
  });
});
```

仕様書
---

| Specification |
| --- |
| Push API # dom-pushsubscription-tojson |

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

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


PushSubscription: endpoint プロパティ - Web API

PushSubscription: endpoint プロパティ
================================

**`endpoint`** は `PushSubscription` インターフェイスの読み取り専用プロパティで、プッシュサブスクリプションに関連するエンドポイントの入った文字列を返します。

エンドポイントはカスタム URL の形式を取り、プッシュサービスに加入している特定のサービスワーカーにプッシュメッセージを送信するために使用するプッシュサーバーを指します。このため、他者がこれをハイジャックしてプッシュ機能を乱用しないように、エンドポイントは秘匿しておくことが大切です。

値
-

文字列です。

例
-

```js
navigator.serviceWorker.ready.then((reg) => {
  reg.pushManager.subscribe({ userVisibleOnly: true }).then((subscription) => {
    console.log(subscription.endpoint);

    // この時点で、サブスクリプションエンドポイントをサーバーに送信し、
    // 保存した後、後でプッシュメッセージを送信するために使用します。
  });
});
```

仕様書
---

| Specification |
| --- |
| Push API # dom-pushsubscription-endpoint |

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

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


動的なスタイル情報の利用 - Web API

動的なスタイル情報の利用
============

DOM の一部である CSS Object Model (CSSOM) では、 CSS に関する様々な情報を操作するインターフェイスを公開しています。これらは *DOM Level 2 Style* 勧告で定義されたのち、現在ではそれを置き換える *CSS Object Model (CSSOM)* で規格化されています。

多くの場面で、可能であれば `className` プロパティを使ってクラスを操作することが推奨されます。最終的なスタイルをひとつのスタイルシートで制御できる上、JavaScript コードはスタイルの詳細を気にすることなく、正確な詳細はスタイルシートに任せたまま、作成・操作する各セクションの全体的な意味づけに注目できます。しかしながら（スタイルシート全体もしくはある要素についての）個々のルールを操作する方が便利なこともあり、以下でさらに詳しく説明します。なおスタイルシートを操作するといっても物理的な文書を操作するわけではなく、要素の DOM スタイルのような内部表現を操作しているだけということに注意してください。

基本となる `style` オブジェクトは `Stylesheet` インターフェイスと `CSSStylesheet` インターフェイスを公開しています。これらのインターフェイスが備える `insertRule`, `selectorText`, `parentStyleSheet` などのメンバーを使うことで、CSS スタイルシートを構成する個々のスタイルにアクセス・操作できます。

`document` から `style` オブジェクトの集合を取得するには `document.styleSheets` プロパティを使い、インデックスを付けることで個々のオブジェクトにアクセスできます (ドキュメント内の最初のスタイルシートなら `document.styleSheets[0]` といった具合に)。

CSSOM を使ってスタイルシートを変更する
----------------------

```html
<html lang="en">
  <head>
    <title>Modifying a stylesheet rule with CSSOM</title>
    <style>
 body {
 background-color: red;
 }
 </style>
    <script>
 const stylesheet = document.styleSheets[0];
 stylesheet.cssRules[0].style.backgroundColor = "aqua";
 </script>
  </head>
  <body>
    body の背景色に対するスタイルシートを JavaScript で変更しています。
  </body>
</html>
```

### 結果

DOM の `style` プロパティで利用可能なプロパティの一覧は DOM CSS プロパティリスト に載っています。

CSS の構文を使って文書のスタイルを変更したい場合は、ルールを追加するか、`innerHTML` に CSS を設定した `<style>` を挿入してください。

要素のスタイルを変更する
------------

要素の `style` プロパティ（後述する "DOM Style オブジェクト" も参照）を使って個々の要素のスタイルを取得または設定することもできます。ただしこのプロパティはインラインに指定された style 属性しか考慮しません。つまり `<td style="background-color: lightblue">` であれば "`background-color:lightblue`" という文字列、もしくは `element.style.propertyName` を通してこのスタイルにアクセスできますが、スタイルシートで定義された他のスタイルの存在は考慮されません。

また要素のこのプロパティの設定値は、よそでこの要素に定義されたスタイルよりも優先されます。 例えばここで `border` プロパティを設定した場合、 その要素に対して head 部や外部のスタイルシートで定義されていた `border` プロパティの指定を上書きすることになります。しかし、その要素に適用される他のプロパティ、 padding や margin や font などには影響を与えません。

具体的な要素のスタイルを変更するには、スタイル設定したい要素に対して以下の例を適用します。

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style example</title>

    <script>
 function alterStyle(elem) {
 elem.style.background = "green";
 }

 function resetStyle(elemId) {
 const elem = document.getElementById(elemId);
 elem.style.background = "white";
 }
 </script>
    <style>
 #p1 {
 border: solid blue 2px;
 }
 </style>
  </head>

  <body>
    <!-- スタイルを変える要素のオブジェクトとして 'this' を渡す -->
    <p id="p1" onclick="alterStyle(this);">クリックして背景色を変更</p>

    <!-- スタイルを変える要素の ID 'p1' を渡す -->
    <button onclick="resetStyle('p1');">背景色をリセット</button>
  </body>
</html>
```

`document.defaultView` オブジェクトの `getComputedStyle()` メソッドは、その要素に対して計算された全てのスタイルを返します。

DOM スタイルオブジェクト
--------------

`style` オブジェクトは、個々のスタイル設定を表します。スタイルオブジェクトは `document` からも、そのスタイルが適用される要素からもアクセスすることができます。これは、具体的な要素の*インライン*スタイルを表します。
 オブジェクトは独立したスタイル指定です。

### style プロパティの設定

この記事で例示した CSS プロパティに限らず、 `style` オブジェクトを通して要素のスタイルを個別に操作できるという点が重要です。

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Style Property Example</title>
    <link rel="StyleSheet" href="example.css" />
    <script>
 function setStyle() {
 document.getElementById("d").style.color = "orange";
 }
 function resetStyle() {
 document.getElementById("d").style.color = "black";
 }
 </script>
  </head>

  <body>
    <div id="d" class="thunder">Thunder</div>
    <button onclick="setStyle()">テキストの色を変える</button>
    <button onclick="resetStyle()">テキストの色を元に戻す</button>
  </body>
</html>
```

スタイルの **media** や **type** は存在しないこともあります。

### setAttribute メソッドの利用

なお、要素のスタイルを変更するには、その要素の参照を取得し、その要素の `setAttribute` メソッドを使用してCSSプロパティとその値を指定することも可能です。

```js
const el = document.getElementById("some-element");
el.setAttribute("style", "background-color:darkblue;");
```

`setAttribute` を使うと要素の `style` オブジェクトで定義されていた既存の `style` プロパティの指定は全て失われることに注意が必要です。もし上の例に使った `some-element` 要素の `style` 属性がインラインで `style="font-size: 18px"` のように指定されていた場合、この指定は `setAttribute` を使うことで失われます。


要素の寸法の決定 - Web API

要素の寸法の決定
========

要素の幅と高さを決定するために見ることがあるプロパティはいくつかあり、どれがニーズに適しているかを特定するのが難しい場合があります。この記事は、その決定に役立つように作られています。これらのプロパティはすべて読み取り専用であることに注意してください。要素の幅と高さを設定する場合は、 `width` と `height`、またはそれをオーバーライドする `min-width` と `max-width`、および `min-height` と `max-height` プロパティを使用してください。

どれくらいの空間を占めるのか
--------------

表示されているコンテンツの幅、スクロールバー (存在する場合)、パディング、境界を含んだ、要素が占める空間の合計量を知る必要がある場合は、`HTMLElement.offsetWidth` プロパティと `HTMLElement.offsetHeight` プロパティを使用します。 ほとんどの場合、要素に適用される変換がなければ、これらは `Element.getBoundingClientRect()` の幅と高さと同じです。変換がある場合、`offsetWidth` および `offsetHeight` は要素のレイアウトの幅と高さを返し、`getBoundingClientRect()` はレンダリングの幅と高さを返します。例として、要素に `width: 100px;` と `transform: scale(0.5);` がある場合 `getBoundingClientRect()` は幅として 50 を返し、`offsetWidth` は 100 を返します。

![offsetWidth、offsetHeight プロパティの決定方法について、パディング、境界、マージンサイズを考慮する。](/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements/dimensions-offset.png)

表示されるコンテンツの大きさ
--------------

パディングを含み、境界、マージン、スクロールバーは含まない、実際に表示されるコンテンツが占める空間を知る必要がある場合は、 `Element.clientWidth` プロパティと `Element.clientHeight` プロパティを使用します。

![パディング、境界、マージンサイズを考慮した clientWidth と clientHeight プロパティの決定方法](/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements/dimensions-client.png)

コンテンツの大きさはどれくらいか
----------------

コンテンツの実際のサイズを知る必要がある場合は、現在どれだけ表示されているかに関係なく、`Element.scrollWidth` プロパティと `Element.scrollHeight` プロパティを使用する必要があります。 これらは、スクロールバーの使用により現在一部のみが表示されている場合でも、要素のコンテンツ全体の幅と高さを返します。

例えば、 600x400 ピクセルの要素が 300x300 ピクセルのスクロールボックス内に表示されている場合、`scrollWidth` は 600 を返し、`scrollHeight` は 400 を返します。

関連情報
----

* https://www.w3.org/TR/cssom-view-1/
* MSDN: 要素の寸法と位置の測定


画面の向きの制御 - Web API

画面の向きの制御
========

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

画面の向きとは、ブラウザーのビューポートがランドスケープモード（つまり、ビューポートの幅がその高さよりも大きい）か、そうでなければポートレートモード（ビューポートの高さがその幅よりも大きい）であるかを参照するものです。

CSS は `orientation` というメディア特性を提供し、画面の向きに応じてレイアウトを調整できるようにしています。

画面方向 API は、画面の内側へ作業するためのプログラム的な JavaScript API を提供します。これには、ビューポートを特定の方向に固定する機能が含まれます。

向きに基づいてレイアウトを調整する
-----------------

向きの変化についてのもっとも一般的なケースのひとつが、端末の向きに基づいてコンテンツのレイアウトを変更したいときです。例えば、端末のディスプレイで最長の寸法に沿ってボタンバーを引き伸ばしたいでしょう。メディアクエリーを使用して、簡単かつ自動的にこれを行うことができます。

以下の HTML コードによる例を見てみましょう。

```html
<ul id="toolbar">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec
  sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt
  leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut
  interdum tristique dapibus. Nullam quis malesuada est.
</p>
```

画面の向きに応じて固有のスタイルを扱うために、CSS で orientation メディアクエリーに頼ります。

```css
/\* 始めに、共通のスタイルを定義しましょう \*/

html,
body {
  width: 100%;
  height: 100%;
}

body {
  border: 1px solid black;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

p {
  font: 1em sans-serif;
  margin: 0;
  padding: 0.5em;
}

ul {
  list-style: none;

  font: 1em monospace;
  margin: 0;
  padding: 0.5em;

  -moz-box-sizing: border-box;
  box-sizing: border-box;

  background: black;
}

li {
  display: inline-block;
  margin: 0;
  padding: 0.5em;
  background: white;
}
```

共通のスタイルを定義したら、続いて向きに対して特有のケースの定義を始めましょう。

```css
/\* 縦長の場合はツールバーを上に置きたい \*/

@media screen and (orientation: portrait) {
  #toolbar {
    width: 100%;
  }
}

/\* 横長の場合はツールバーを左端に付けたい \*/

@media screen and (orientation: landscape) {
  #toolbar {
    position: fixed;
    width: 2.65em;
    height: 100%;
  }

  p {
    margin-left: 2em;
  }

  li + li {
    margin-top: 0.5em;
  }
}
```

結果は以下のとおりです。

| 縦長 | 横長 |
| --- | --- |
|  |  |

**メモ:** orientation メディアクエリーは、実際は端末の向きではなくブラウザーウィンドウ (または iframe) の向きに応じて適用されます。

画面の向きを固定する
----------

一部の端末（主にモバイル端末）は、画面に表示している内容をいつでも読めるようにするため、端末の向きに基づいて画面の向きを動的に変更できます。この動作はテキストコンテンツにはとても適していますが、そのような変化を好まないコンテンツも存在します。例えば端末の向きに基づくゲームでは、そのような向きの変化によって混乱してしまうでしょう。

画面方向 API は、そのような変化を抑制したり制御したりするものです。

### 向きの変化の監視

`orientationchange` イベントは、端末が画面の向きを変更する度に発生します。また、向きそのものを `Screen.orientation` プロパティで読み取ることが可能です。

```js
screen.addEventListener("orientationchange", () => {
  console.log(`The orientation of the screen is: ${screen.orientation}`);
});
```

### 向きの変更を抑制する

どのウェブアプリケーションでも、必要に応じて画面をロックすることができます。画面のロックは `screen.orientation.lock()` メソッドを使用して行い、ロック解除は `screen.orientation.unlock()` メソッドを使用して行います。

`screen.orientation.lock()` は、適用するロック方式を定義する文字列として、`any`、`natural`、`portrait-primary`、`portrait-secondary`、`landscape-primary`、`landscape-secondary`、`portrait`、`landscape` のいずれかを受け入れます。

```js
screen.orientation.lock();
```

ロックに成功した後に解決されるプロミスを返します。

**メモ:** 画面のロックはウェブアプリケーションに依存します。アプリケーション A が `landscape` に固定し、アプリケーション B が `portrait` に固定した場合は、アプリケーション A から B に、または B から A に切り替えても `orientationchange` イベントは発生しません。これは、双方のアプリケーションが自身の向きを維持しているためです。

ただし、ロックの要求を満たすために向きを変更しなければならない場合は、向きをロックすることでで `orientationchange` イベントが発生する可能性があります。

関連情報
----

* `screen.orientation`
* `ScreenOrientation`
* `orientationchange` イベント
* orientation メディアクエリー


CSS 宣言 - Web API

CSS 宣言
======

**CSS 宣言**は、 DOM でオブジェクトに公開されない抽象的な概念です。 CSS プロパティと値の組を表します。

CSS 宣言には、以下の関連するプロパティがあります。

プロパティ名

宣言のプロパティ名。例: `background-color`

値

コンポーネント値のリストとして宣言された値。

important フラグ

設定または未設定

case-sensitive フラグ

プロパティ名が仕様に従って大文字と小文字を区別するように定義されている場合は設定され、そうでない場合は設定されない。

基本的な例
-----

以下の例は、<h1> 要素に対する CSS 宣言ブロック による CSS ルールを示しています。 CSS 宣言ブロックは中括弧で囲まれた行で、 2 つの CSS 宣言を含んでいます。ひとつは `font-style` で、もうひとつは `color` です。

```css
h1 {
  font-style: italic;
  color: rebeccapurple;
}
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # css-declarations |


CSS 宣言ブロック - Web API

CSS 宣言ブロック
==========

**CSS 宣言ブロック**は、 CSS のプロパティと値を順番に集めたものです。 DOM では `CSSStyleDeclaration` として表現されます。

それぞれのプロパティと値の組は、CSS 宣言 として知られています。 CSS 宣言ブロックには、以下の関連するプロパティがあります。

computed フラグ

`CSSStyleDeclaration` オブジェクトが指定されたスタイルではなく、計算されたスタイルである場合に設定されます。既定では未設定です。

宣言

このオブジェクトに関連付けられた CSS 宣言です。

親 CSS ルール

CSS 宣言ブロックが関連付けられている `CSSRule` です。

オーナーノード

この CSS 宣言ブロックが関連付けられている要素。それ以外は null。

更新フラグ

この CSS 宣言ブロックがオーナーノードの `style` 属性を更新している場合に設定されます。

`CSSStyleDeclaration` が CSS Object Model (CSSOM) インターフェイスによって返されると、これらのプロパティは、仕様によって定義された適切な値に設定されます。

基本的な例
-----

以下の例は、 <h1> 要素に対する宣言ブロックを持つ CSS ルールを示しています。 CSS の宣言ブロックは、中括弧で囲まれた行です。

```css
h1 {
  margin: 0 auto;
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-style: italic;
  color: rebeccapurple;
}
```

この CSS 宣言ブロックを表す `CSSStyleDeclaration` を `CSSStyleRule.style` で使用することで返すことができます。

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

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # css-declaration-blocks |


TransformStreamDefaultController: error() メソッド - Web API

TransformStreamDefaultController: error() メソッド
==============================================

**`error()`** は `TransformStreamDefaultController` インターフェイスのメソッドで、両側のストリームをエラーにします。これ以上何か操作をすると、指定されたエラーメッセージとともに失敗するようになり、キュー内のチャンクは破棄されます。

構文
--

```js
error(reason)
```

### 引数

`reason`

それ以降のストリームの操作において返されるエラーメッセージを格納した文字列。

### 返値

なし (`undefined`)。

例
-

この例では、チャンクが変換できなかったときに `error()` メソッドを使用しています。

```js
const transformContent = {
  start() {
    /\* … \*/
  },
  async transform(chunk, controller) {
    try {
      chunk = await applyMyTransformation(chunk);
    } catch (err) {
      controller.error(`Unable to transform chunk: ${err}`);
    }
    // …
  },
  // …
};
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ts-default-controller-error |

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

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


TransformStreamDefaultController: desiredSize プロパティ - Web API

TransformStreamDefaultController: desiredSize プロパティ
===================================================

**`desiredSize`** は `TransformStreamDefaultController` インターフェイスの読み取り専用プロパティで、関連付けられた `ReadableStream` のキューを埋めるのに必要なサイズを返します。

`ReadableStream` の内部キューには、キューに入れられたがまだ読み込まれていないチャンクが格納されます。ブラウザーはストリームを埋めるために **必要なサイズ** を決定し、この値が `desiredSize` プロパティによって返されます。

もし `desiredSize` が `0` ならば、キューは満杯です。従って、この情報を使用して手動で背圧をかけることでキューを管理することができます。

値
-

必要なサイズ。

例
-

次の例では、 `desiredSize` をコンソールに出力します。

```js
console.log(controller.desiredSize);
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ts-default-controller-desired-size |

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

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


TransformStreamDefaultController: enqueue() メソッド - Web API

TransformStreamDefaultController: enqueue() メソッド
================================================

**`enqueue()`** は `TransformStreamDefaultController` インターフェイスのメソッドで、このストリームの読み取り可能側にある指定されたチャンクをキューに入れます。

読み取り可能なストリームとチャンクについて詳しくは、読み取り可能なストリームの使用を参照してください。

構文
--

```js
enqueue(chunk)
```

### 引数

`chunk`

キューに入れられるチャンク。チャンクとは単一のデータのことです。データの種類は問いません。ストリームは様々な型のチャンクを格納することができます。

### 返値

なし (`undefined`)。

### 例外

`TypeError`

 ストリームが読み取り可能ではありません。
 これは、ストリームが `controller.error()` によってエラーになった場合や、コントローラーの `controller.close()` メソッドが名付けられずに閉じられた場合に発生します。

例
-

この例では、エンコードされたチャンクが `enqueue()` メソッドを使用してキューに渡されます。

```js
const textEncoderStream = new TransformStream({
  transform(chunk, controller) {
    controller.enqueue(new TextEncoder().encode(chunk));
  },
  flush(controller) {
    controller.terminate();
  },
});
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ts-default-controller-enqueue |

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

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


TransformStreamDefaultController: terminate() メソッド - Web API

TransformStreamDefaultController: terminate() メソッド
==================================================

**`terminate()`** は `TransformStreamDefaultController` インターフェイスのメソッドで、このストリームの読み取り可能側を閉じ、書き込み可能側をエラーにします。

構文
--

```js
terminate()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

下記の例では、 `TransformStreamDefaultController` で `terminate()` メソッドを呼び出しています。

```js
controller.terminate();
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ts-default-controller-terminate |

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

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


InputEvent: isComposing プロパティ - Web API

InputEvent: isComposing プロパティ
=============================

Baseline 2023
-------------

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

* Learn more
* See full compatibility
* Report feedback
**`InputEvent.isComposing`** は読み取り専用プロパティで、このイベントが `compositionstart` の後、かつ `compositionend` の前に発生したかどうかを示す論理値を返します。

値
-

論理値です。

例
-

```js
const inputEvent = new InputEvent("syntheticInput", false);
console.log(inputEvent.isComposing); // return false
```

仕様書
---

| Specification |
| --- |
| UI Events # dom-inputevent-iscomposing |

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

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

関連情報
----

* `compositionstart` および `compositionend`
* `InputEvent`


InputEvent: data プロパティ - Web API

InputEvent: data プロパティ
======================

Baseline 2023
-------------

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

* Learn more
* See full compatibility
* Report feedback
**`data`** は `InputEvent` インターフェイスの読み取り専用プロパティで、挿入された文字を文字列で返します。挿入されるテキストがない変更の場合、例えば文字が削除された場合は、これは空文字列になることがあります。

値
-

文字列です。

例
-

以下の例では、イベントリスナーが input イベントを受信します。 `<input>` 要素に対してテキストの変更が行われると、 `InputEvent.data` によって取得し、 `Node.textContent` プロパティを使用して段落に挿入します。

```html
<p>テキストをコピーおよび貼り付けしてください。</p>

<input type="text" />

<p class="result"></p>
```

```js
const editable = document.querySelector("input");
const result = document.querySelector(".result");

editable.addEventListener("input", (e) => {
  result.textContent = `入力テキスト: ${e.data}`;
});
```

仕様書
---

| Specification |
| --- |
| Input Events Level 2 # dfn-data |

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

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


InputEvent: dataTransfer プロパティ - Web API

InputEvent: dataTransfer プロパティ
==============================

Baseline 2023
-------------

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

* Learn more
* See full compatibility
* Report feedback
**`dataTransfer`** は `InputEvent` インターフェイスの読み取り専用プロパティで、 このプロパティは、編集可能なコンテンツに追加または削除されたリッチテキストまたはプレーンテキストデータに関する情報を含む `DataTransfer` オブジェクトを返します。

値
-

`DataTransfer` オブジェクトです。

例
-

次の単純な例では、input イベントにイベントリスナーを設定して、コンテンツが contenteditable の `<p>` 要素に貼り付けられると、その HTML ソースを `InputEvent.dataTransfer.getData()` メソッドを介して取得して入力欄の下に続く段落で報告するようにしています。

指定されたコンテンツの一部をコピー＆ペーストして、その効果を確かめてみてください。

```html
<p><span style="font-weight: bold; color: blue">Whoa, bold blue text!</span></p>
<p>
  <span style="font-style: italic; color: red">Exciting: italic red text!</span>
</p>
<p>Boring normal text ;-(</p>

<hr />

<p contenteditable="true">
  Go on, try pasting some content into this editable paragraph and see what
  happens!
</p>

<p class="result"></p>
```

```js
const editable = document.querySelector("p[contenteditable]");
const result = document.querySelector(".result");

editable.addEventListener("input", (e) => {
  result.textContent = e.dataTransfer.getData("text/html");
});
```

仕様書
---

| Specification |
| --- |
| Input Events Level 2 # dom-inputevent-datatransfer |

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

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


InputEvent: getTargetRanges() メソッド - Web API

InputEvent: getTargetRanges() メソッド
==================================

Baseline 2023
-------------

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

* Learn more
* See full compatibility
* Report feedback
**`getTargetRanges()`** は `InputEvent` インターフェイスのメソッドで、入力イベントが取り消されない限り DOM の変更に影響される静的範囲を配列で返します。

これにより、ウェブアプリケーションは、ブラウザーが DOM ツリーを変更する前にテキスト編集の動作を上書きすることができ、パフォーマンスを向上させるために入力イベントの制御をより強化することができます。

構文
--

```js
getTargetRanges()
```

### 引数

なし。

### 返値

`StaticRange` オブジェクトの配列です。

例
-

### 機能検出

以下の関数は、`beforeinput`、つまり `getTargetRanges` に対応している場合に true を返します。

```js
function isBeforeInputEventAvailable() {
  return (
    window.InputEvent &&
    typeof InputEvent.prototype.getTargetRanges === "function"
  );
}
```

### 基本的な使い方

以下の例では、 `contentitable` 要素を選択して、 `beforeinput` イベントを利用して `getTargetRanges()` の結果をログ出力しています。

```js
const editableElem = document.querySelector('[contenteditable="true"]');

editableElem.addEventListener("beforeinput", (e) => {
  const targetRanges = e.getTargetRanges();
  console.log(targetRanges);
});
```

仕様書
---

| Specification |
| --- |
| Input Events Level 2 # dom-inputevent-gettargetranges |

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

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


InputEvent: inputType プロパティ - Web API

InputEvent: inputType プロパティ
===========================

Baseline 2023
-------------

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

* Learn more
* See full compatibility
* Report feedback
**`inputType`** は `InputEvent` インターフェイスの読み取り専用プロパティで、編集可能なコンテンツの変更が行われた種別を返します。変更は例えば挿入、削除、テキスト整形などがあります。

値
-

入力された入力種別を含む文字列です。`insertText`、`deleteContentBackward`、`insertFromPaste`、`formatBold` など、多くの値を取り得ます。利用可能な入力種別の完全なリストは、Input Events Level 1 仕様の Attributes の章を参照してください。

例
-

この例は編集可能な `<div>` の入力イベント の `inputType` をログ出力します。

### HTML

```html
<p id="log">入力種別:</p>
<div
 contenteditable="true"
 style="margin: 20px;padding: 20px;border:2px dashed red;">
  <p>
    いくつかのサンプルテキストです。改行を入れたり、異なる形でテキストを削除したり、異なるコンテンツを貼り付けたりしてみてください。
  </p>
  <hr />
  <ul>
    <li>サンプルの</li>
    <li>箇条書き</li>
    <li>リスト</li>
  </ul>
  <p>他の段落</p>
</div>
```

### JavaScript

```js
const log = document.getElementById("log");
const editable = document.querySelector("div[contenteditable]");
editable.addEventListener("input", logInputType);

function logInputType(event) {
  log.textContent = `入力種別: ${event.inputType}`;
}
```

### 結果

`<div>` 内のテキストを編集して、どうなるかを試してみてください。

**メモ:** もっと詳細な例として Masayuki Nakano's InputEvent test suite も参照してください。

仕様書
---

| Specification |
| --- |
| UI Events # dom-inputevent-inputtype |

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

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


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

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

Baseline 2023
-------------

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

* Learn more
* See full compatibility
* Report feedback
**`InputEvent()`** コンストラクターは、新しい `InputEvent` オブジェクトを作成します。

構文
--

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

### 引数

`type`

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

`options` 省略可

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

`inputType` 省略可

文字列で、テキストの挿入、削除、書式設定など、編集可能なコンテンツに対する変更の種類を指定します。

`data` 省略可

 文字列で、挿入する文字を保持します。
 これは、変更がテキストを挿入しない場合（例えば、文字を削除する場合など）、空文字列になることがあります。

`isComposing` 省略可

論理値で、そのイベントが変換セッションの一部であることを示します。つまり、 `compositionstart` イベントの後で、 `compositionend` イベントの前にあることを意味します。既定では、 `false` です。

### 返値

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

仕様書
---

| Specification |
| --- |
| UI Events # dom-inputevent-inputevent |

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

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

関連情報
----

* `InputEvent`: 構築するオブジェクトのインスタンスです。


HTMLFormElement: method プロパティ - Web API

HTMLFormElement: method プロパティ
=============================

**`HTMLFormElement.method`** プロパティは、`<form>` を送信するために使用される HTTP メソッドを表します。

明示的に指定されなかった場合、既定のメソッドは 'get' です。

値
-

文字列です。

例
-

```js
document.forms["myform"].method = "post";

const formElement = document.createElement("form"); // フォームを生成
document.body.appendChild(formElement);
console.log(formElement.method); // 'get'
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-fs-method |

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

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


HTMLFormElement: action プロパティ - Web API

HTMLFormElement: action プロパティ
=============================

**`HTMLFormElement.action`** プロパティは、この `<form>` 要素のアクションを表します。

フォームのアクションは、フォームが送信されたときにサーバー上で実行されるプログラムです。このプロパティは、取得または設定することができます。

構文
--

文字列です。

例
-

```js
form.action = "/cgi-bin/publish";
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-fs-action |

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

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


HTMLFormElement: reset イベント - Web API

HTMLFormElement: reset イベント
===========================

**`reset`** イベントは `<form>` がリセットされたときに発行されます。

構文
--

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

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

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

イベント型
-----

一般的な `Event` です。

例
-

この例は `EventTarget.addEventListener()` を使用してフォームがリセットされるのを、実行されたときに現在の `Event.timeStamp` をログ出力します。

### HTML

```html
<form id="form">
  <label>Test field: <input type="text" /></label>
  <br /><br />
  <button type="reset">Reset form</button>
</form>
<p id="log"></p>
```

### JavaScript

```js
function logReset(event) {
  log.textContent = `Form reset! Timestamp: ${event.timeStamp}`;
}

const form = document.getElementById("form");
const log = document.getElementById("log");
form.addEventListener("reset", logReset);
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # event-reset |

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

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

関連情報
----

* HTML の `<form>` 要素


HTMLFormElement: acceptCharset プロパティ - Web API

HTMLFormElement: acceptCharset プロパティ
====================================

**`HTMLFormElement.acceptCharset`** プロパティは、指定された `<form>` 要素で対応している文字エンコーディング の一覧を表します。このリストは、カンマ区切りまたはスペース区切りで記述することができます。

値
-

文字列です。

例
-

```js
let inputs = document.forms["myform"].acceptCharset;
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-form-acceptcharset |

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

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


HTMLFormElement: reset() メソッド - Web API

HTMLFormElement: reset() メソッド
=============================

**`HTMLFormElement.reset()`** メソッドは、フォーム要素の既定値を復元します。このメソッドはフォームの `<input type="reset">` コントロールをクリックするのと同じことを行います。

もしあるフォームコントロール（リセットボタンなど）が *reset* という形の名前か ID を持っていると、フォームの reset メソッドを隠してしまいます。これは `disabled` のような、入力の他の属性をリセットするものではありません。

もし `setAttribute()` を呼び出して特定の属性の値を設定した場合、その後に `reset()` を呼び出してもその属性は既定値にリセットされず、代わりに `setAttribute()` を呼び出して設定した値を維持することに注意ください。

構文
--

```js
reset()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

```js
document.getElementById("myform").reset();
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-form-reset-dev |

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

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


HTMLFormElement: target プロパティ - Web API

HTMLFormElement: target プロパティ
=============================

**`target`** は `HTMLFormElement` インターフェイスのプロパティで、このフォームのアクションのターゲット（すなわち、出力結果が描画されるフレーム）を表します。

値
-

文字列です。

例
-

```js
myForm.target = document.frames[1].name;
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-fs-target |

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

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


HTMLFormElement: submit() メソッド - Web API

HTMLFormElement: submit() メソッド
==============================

**`HTMLFormElement.submit()`** メソッドは、このフォーム (`<form>`) を送信します。

このメソッドは、フォームの送信 `<button>` をアクティブにするのと似ていますが、同じではありません。ただ、このメソッドを直接呼び出す場合は、

* `submit` イベントは発生しません。特に、フォームの `onsubmit` イベントハンドラーは実行されません。
* 制約検証は行われません。

`HTMLFormElement.requestSubmit()` メソッドはフォームの送信ボタン (`<button>`) を使用にするのと同じで、これらの相違点はありません。

フォームコントロール（送信ボタンなど）に `name` または `id` が `submit` のものがある場合、`submit` メソッドがマスクされます。`myForm.submit();` を呼び出そうとすると "submit is not a function" のエラーが発生します。この場合、`submit` が `name` または `id` が `submit` であるコントロールを参照しているからです。

`<input>` で type="submit" の属性を持つものは **`HTMLFormElement.submit()`** ではフォームと一緒に送信されませんが、本来の HTML フォームの送信で行う場合は送信されます。

構文
--

```js
submit()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

```js
document.forms["myform"].submit();
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-form-submit-dev |

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

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


HTMLFormElement: formdata イベント - Web API

HTMLFormElement: formdata イベント
==============================

**`formdata`** イベントは、フォームのデータを表す項目リストが構築された後に発行されます。このイベントは、フォームが送信されたときに発行されますが、 `FormData()` コンストラクターが呼び出されたときにも発行されます。

このイベントはキャンセル不可で、バブリングしません。

構文
--

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

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

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

イベント型
-----

`FormDataEvent` です。 `Event` から継承しています。

Event

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

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

`FormDataEvent.formData`

イベントが発行されたときにフォームに含まれていたデータを表す `FormData` オブジェクトが格納されています。

例
-

```js
// フォームの参照を得る

const formElem = document.querySelector("form");

// submit ハンドラー

formElem.addEventListener("submit", (e) => {
  // フォームの送信時、既定の動作を抑止
  e.preventDefault();

  console.log(formElem.querySelector('input[name="field1"]')); // FOO
  console.log(formElem.querySelector('input[name="field2"]')); // BAR

  // FormData オブジェクトを構築し、 formdata イベントが発行される
  const formData = new FormData(formElem);
  // formdata は formdata イベントで変更されます。
  console.log(formData.get("field1")); // foo
  console.log(formData.get("field2")); // bar
});

// データを受け取るための formdata ハンドラー

formElem.addEventListener("formdata", (e) => {
  console.log("formdata fired");

  // イベントオブジェクトからフォームデータを取得する
  const formData = e.formData;
  // formdata イベントでフォームデータを変更する
  formData.set("field1", formData.get("field1").toLowerCase());
  formData.set("field2", formData.get("field2").toLowerCase());
});
```

`onformdata` 版はこのようになります。

```js
formElem.onformdata = (e) => {
  console.log("formdata fired");

  // フォームデータを変更
  const formData = e.formData;
  formData.set("field1", formData.get("field1").toLowerCase());
  formData.set("field2", formData.get("field2").toLowerCase());
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-formdata |

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

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

関連情報
----

* HTML の `<form>` 要素
* `FormDataEvent`


HTMLFormElement: reportValidity() メソッド - Web API

HTMLFormElement: reportValidity() メソッド
======================================

Baseline 2023
-------------

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

* Learn more
* See full compatibility
* Report feedback

**`HTMLFormElement.reportValidity()`** メソッドは、この要素の子コントロールが制約検証を満たしていれば `true` を返します。
 `false` が返された場合、キャンセル可能な
 `invalid` イベントが無効な子要素それぞれについて発行され、ユーザーに検証の問題を報告します。

構文
--

```js
reportValidity()
```

### 返値

`true` または `false`

例
-

```js
document.forms["myform"].addEventListener(
  "submit",
  () => {
    document.forms["myform"].reportValidity();
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-cva-reportvalidity-dev |

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

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


HTMLFormElement: name プロパティ - Web API

HTMLFormElement: name プロパティ
===========================

**`HTMLFormElement.name`** プロパティは、現在の `<form>` 要素の名前を文字列で表します。

`<form>` 要素の中に *name* という名前の要素があると、その要素は `form.name` プロパティを上書きするので、それにアクセスすることはできません。

値
-

文字列です。

例
-

```js
const form1name = document.getElementById("form1").name;

if (form1name !== document.form.form1) {
  // ブラウザーがこの形の参照に対応していない
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-form-name |

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

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


HTMLFormElement: enctype プロパティ - Web API

HTMLFormElement: enctype プロパティ
==============================

**`HTMLFormElement.enctype`** プロパティは、サーバーにフォームを送信するために使用されるコンテンツの MIME タイプを指定します。使用可能な値は以下の通りです。

* `application/x-www-form-urlencoded`: 初期値（既定値）です。
* `multipart/form-data`: `<input>` 要素にファイルデータをアップロードできるようにする型。
* `text/plain`: 形式があいまいで、人間が読み取り可能なコンテンツであり、コンピューターで確実に解釈できるとは限りません。

この値は `formenctype` 属性を `<button>` または `<input>` 要素に指定することで上書きすることができます。

値
-

文字列です。

例
-

```js
form.enctype = "application/x-www-form-urlencoded";
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-fs-enctype |

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

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


HTMLFormElement: length プロパティ - Web API

HTMLFormElement: length プロパティ
=============================

**`HTMLFormElement.length`** は読み取り専用のプロパティで、 `<form>` 要素に含まれるコントロールの数を返します。

フォームのコントロールの一覧には `elements` プロパティを使用してアクセスすることができます。

これは `<form>` 要素の子孫である要素、および `form` プロパティを使用してフォームのメンバーになった要素の両方が含まれます。

このプロパティで扱われる要素は、 `<button>`, `<fieldset>`, `<input>` （ただし、 "image" 型のものは、歴史的な理由によって除外されます）、`<object>`, `<output>`, `<select>`, `<textarea>` です。

値
-

数値です。

例
-

```js
if (document.getElementById("form1").length > 1) {
  // 複数のフォームコントロールがある場合
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-form-length-dev |

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

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


HTMLFormElement: encoding プロパティ - Web API

HTMLFormElement: encoding プロパティ
===============================

**`HTMLFormElement.encoding`** プロパティは、 DOM の `HTMLFormElement` オブジェクトの `enctype` 要素の別名です。

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

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


HTMLFormElement: elements プロパティ - Web API

HTMLFormElement: elements プロパティ
===============================

`HTMLFormElement` の **`elements`** プロパティは、 `HTMLFormControlsCollection` で `<form>` 要素に含まれているすべてのフォームコントロールを列挙して返します。

これとは別に、 `length` プロパティを使用してフォームコントロールの数だけを取得することができます。

返された集合の中の特定のフォームコントロールにアクセスするには、添字か要素の `name` または `id` 属性のいずれかを使用します。

HTML 5 より前のバージョンでは、返されるオブジェクトは `HTMLCollection` でした。 `HTMLFormControlsCollection` これに基づいています。

**メモ:** 同様に、指定された文書内のすべてのフォームの一覧を取得するには、その文書の `forms` プロパティを使用してください。

値
-

 フォームに含まれるすべての非画像コントロールが入った `HTMLFormControlsCollection` です。
 これは生きた集合です。フォームコントロールがフォームに追加されたりフォームから削除されたりすると、この集合はその変更を反映するために更新されます。

 返されたコレクション内のフォームコントロールは、ツリーの前順、深さ優先の順序に従うことで、フォームに現れるのと同じ順序になります。
 これは、**ツリー順**と呼ばれます。

以下の要素のみが返されます。

* `<button>`
* `<fieldset>`
* `<input>` （ただし、 `type` が `"image"` であるものは、過去の経緯から除外されています）。
* `<object>`
* `<output>`
* `<select>`
* `<textarea>`
例
-

### 構文の例

この例では、フォームコントロールの一覧を取得する方法と、添字と名前または ID でそのメンバーにアクセスする方法について説明します。

```html
<form id="my-form">
  <label>
    ユーザー名:
    <input type="text" name="username" />
  </label>
  <label>
    フルネーム:
    <input type="text" name="full-name" />
  </label>
  <label>
    パスワード:
    <input type="password" name="password" />
  </label>
</form>
```

```js
const inputs = document.getElementById("my-form").elements;
const inputByIndex = inputs[0];
const inputByName = inputs["username"];
```

### フォームコントロールへのアクセス

この例では、フォームの要素リストを取得し、そのリストを反復処理して、何らかの処理を行えるように `"text"` 型の `<input>` 要素を探すものです。

```js
const inputs = document.getElementById("my-form").elements;

// Iterate over the form controls
for (let i = 0; i < inputs.length; i++) {
  if (inputs[i].nodeName === "INPUT" && inputs[i].type === "text") {
    // Update text input
    inputs[i].value.toLocaleUpperCase();
  }
}
```

### フォームの無効化

```js
const inputs = document.getElementById("my-form").elements;

// Iterate over the form controls
for (let i = 0; i < inputs.length; i++) {
  // Disable all form controls
  inputs[i].setAttribute("disabled", "");
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-form-elements-dev |

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

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


HTMLFormElement: submit イベント - Web API

HTMLFormElement: submit イベント
============================

**`submit`** イベントは `<form>` が送信されたときに発生します。

`submit` イベントは `<form>` 要素自身で発生するものであり、その中の `<button>` や <input type="submit"> で発生するものではないことに注意してください。しかし、フォームの送信が起動されたことを示すために送信される `SubmitEvent` には、送信リクエストがどのボタンで起動されたかを `submitter` プロパティが含まれています。

`submit` イベントは、ユーザーが送信ボタンを押したり、 `Enter` キーをフォーム内のフィールド（例えば <input type="text">）の編集中に押したりしたときに発生します。このイベントは `form.submit()` メソッドを呼び出した場合には送信されません。

**メモ:** フォームの検証に合格していないフォームを送信しようとすると、 `invalid` イベントが発生します。この場合、フォーム検証が送信を阻止しますので、 `submit` イベントは発生しません。

構文
--

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

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

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

イベント型
-----

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

Event

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

*以下に列挙したプロパティに加えて、このインターフェイスは親インターフェイスである `Event` を継承しています。*

`submitter` 読取専用

`HTMLElement` オブジェクトで、フォームの送信を起動するために関わったボタンやその他の要素を示します。

例
-

この例は `EventTarget.addEventListener()` を使用してフォームの送信を待受けし、実行されたときに現在の `Event.timeStamp` をログ出力し、それからフォームを送信する既定の動作を阻止します。

### HTML

```html
<form id="form">
  <label>Test field: <input type="text" /></label>
  <br /><br />
  <button type="submit">Submit form</button>
</form>
<p id="log"></p>
```

### JavaScript

```js
function logSubmit(event) {
  log.textContent = `Form Submitted! Timestamp: ${event.timeStamp}`;
  event.preventDefault();
}

const form = document.getElementById("form");
const log = document.getElementById("log");
form.addEventListener("submit", logSubmit);
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # event-submit |
| HTML Standard # handler-onsubmit |

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

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

関連情報
----

* HTML の `<form>` 要素
* 関連イベント: `invalid`


HTMLFormElement: requestSubmit() メソッド - Web API

HTMLFormElement: requestSubmit() メソッド
=====================================

`HTMLFormElement` の **`requestSubmit()`** メソッドは、特定の送信ボタンでフォームを送信することをリクエストします。

構文
--

```js
requestSubmit()
requestSubmit(submitter)
```

### 引数

`submitter` 省略可

このフォームのメンバーである送信ボタンです。

`submitter` が `form*` 属性を指定している場合、このフォームの送信動作を上書きします（`formmethod="POST"` など）。

`submitter` に `name` 属性があるか`<input type="image">` であった場合、フォームの送信時にそのデータが含まれます（`btnName=btnValue` など）。

`submitter` 引数を省略した場合、このフォーム要素自身が送信者として使用されます。

### 返値

なし (`undefined`)。

### 例外

`TypeError`

指定された `submitter` が送信ボタンでなかった場合に発生します。

`NotFoundError` `DOMException`

指定された `submitter` が、 `requestSubmit()` が呼び出されたフォームのメンバーでない場合に発生します。submitter は form 要素の子孫であるか、フォームを参照する `form` 属性を持たなければなりません。

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

 明らかな疑問は、なぜこのメソッドが存在するのかということです。
 `submit()` メソッドがあったのに、なぜこのメソッドが存在するのでしょうか？

答えは簡単です。`submit()` はフォームを送信しますが、それだけです。一方、`requestSubmit()` は、あたかも送信ボタンがクリックされたかのように動作します。フォームのコンテンツが検証され、検証が成功した場合にのみフォームが送信されます。フォームが送信されると、`submit` イベントがフォームオブジェクトに返送されます。

例
-

以下の例では、`requestSubmit()` が利用できる場合はそれを使用してリクエストの送信を試みることで、フォームを送信しています。 `main-submit` という ID の送信ボタンが得られた場合は、そのボタンを使用してフォームを送信します。そうでない場合は、 `submitter` 引数を指定せずに、フォーム自身から直接送信されます。

一方で、 `requestSubmit()` が利用できない場合、このコードは代わりにフォームの `submit()` メソッドを呼び出すことで送信を行います。

```js
let myForm = document.querySelector("form");
let submitButton = myForm.querySelector("#main-submit");

if (myForm.requestSubmit) {
  if (submitButton) {
    myForm.requestSubmit(submitButton);
  } else {
    myForm.requestSubmit();
  }
} else {
  myForm.submit();
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-form-requestsubmit-dev |

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

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


ポインターイベントの使用 - Web API

ポインターイベントの使用
============

このガイドでは、ポインターイベントと HTML の `<canvas>` 要素を使用してマルチタッチ対応の描画アプリを作成する方法について説明します。この例は、ポインターイベントの入力イベントモデルを使用する点を除いて、タッチイベントの概要の例に基づいています。 もう 1 つの違いは、ポインターイベントはポインターデバイスに依存しないため、アプリは同じコードを使用してマウス、ペン、または指先からの座標ベースの入力を受け入れることです。

このアプリは、ポインターイベントに対応しているブラウザーでのみ動作します。

このアプリのライブ版は GitHub で利用できます。 ソースコードは Github で入手でき、プルリクエストやバグレポートは大歓迎です。

定義
--

表面

タッチを感知できる表面。 これは、トラックパッド、タッチ画面、あるいは物理的な画面とユーザーの机の表面（またはマウスパッド）の仮想的なマッピングかもしれません。

タッチ点

表面との接点。 これは、指（または肘、耳、鼻など何でも、しかし通常は指）、スタイラス、マウス、または表面上の単一の点を指定するための他の任意の方法かもしれません。

例
-

**メモ:** 以下のテキストでは、表面との接触を説明するときに「指」という用語を使用していますが、もちろんスタイラス、マウス、その他の場所を指す方法でもかまいません。

### キャンバスの作成

ブラウザーが既定のタッチの振る舞いをアプリに適用しないようにするには、`touch-action` プロパティを `none` に設定します。

```html
<canvas
 id="canvas"
 width="600"
 height="600"
 style="border:solid black 1px; touch-action:none">
  お使いのブラウザーは canvas 要素に対応していません。
</canvas>
<br />
<button onclick="startup()">Initialize</button>
<br />
Log:
<pre id="log" style="border: 1px solid #ccc;"></pre>
```

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

ページが読み込まれると、以下に示す `startup()` 関数が `<body>` 要素の `onload` 属性によって呼び出されます（ただし、MDN ライブサンプルシステムの制限により、この例ではボタンを使用して起動します）。

```js
function startup() {
  const el = document.getElementsByTagName("canvas")[0];
  el.addEventListener("pointerdown", handleStart, false);
  el.addEventListener("pointerup", handleEnd, false);
  el.addEventListener("pointercancel", handleCancel, false);
  el.addEventListener("pointermove", handleMove, false);
  log("初期化されました。");
}
```

これは単に `<canvas>` 要素のすべてのイベントリスナーを設定するので、タッチイベントが発生したときに処理できます。

### 新しいタッチの追跡

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

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

`pointerdown` イベントが発生すると、表面上で新しいタッチが発生したことを示し、次の `handleStart()` 関数が呼び出されます。

```js
function handleStart(evt) {
  log("pointerdown.");
  const el = document.getElementsByTagName("canvas")[0];
  const ctx = el.getContext("2d");

  log(`pointerdown: id = ${evt.pointerId}`);
  ongoingTouches.push(copyTouch(evt));
  const color = colorForTouch(evt);
  ctx.beginPath();
  ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0, 2 \* Math.PI, false); // a circle at the start
  ctx.arc(evt.clientX, evt.clientY, 4, 0, 2 \* Math.PI, false); // a circle at the start
  ctx.fillStyle = color;
  ctx.fill();
}
```

イベントの処理の一部を後で処理するために `ongoingTouches` に格納した後、開始点を小さな円として描画します。 4 ピクセル幅の線を使用しているので、 4 ピクセルの半径の円が見栄えよく表示されます。

#### ポインターの動きに合わせて描画

1つ以上のポインターが移動するたびに、 `pointermove` イベントが配信され、その結果、次の `handleMove()` 関数が呼び出されます。 この例におけるその役割は、キャッシュされたタッチ情報を更新し、各タッチの前の位置から現在の位置まで線を引くことです。

```js
function handleMove(evt) {
  const el = document.getElementsByTagName("canvas")[0];
  const ctx = el.getContext("2d");
  const color = colorForTouch(evt);
  const idx = ongoingTouchIndexById(evt.pointerId);

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

    ongoingTouches.splice(idx, 1, copyTouch(evt)); // swap in the new touch record
    log(".");
  } else {
    log(`can't figure out which touch to continue: idx = ${idx}`);
  }
}
```

この関数はキャッシュされたタッチ情報配列で各タッチに関する以前の情報を探して、描画する各タッチの新しい線分の開始点を決定します。 これは各タッチの `PointerEvent.pointerId` プロパティを見ることによって行われます。 このプロパティは、各ポインターイベントに対して一意の整数であり、各指が表面と接触している間、各イベントに対して一貫性を保ちます。

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

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

### タッチの終わりの処理

ユーザーが表面から指を離すと、 `pointerup` イベントが送信されます。 次の `handleEnd()` 関数を呼び出すことによってこのイベントを処理します。 その仕事は終わったタッチのための最後の線分を引き、進行中のタッチリストからタッチ点を取り除くことです。

```js
function handleEnd(evt) {
  log("pointerup");
  const el = document.getElementsByTagName("canvas")[0];
  const ctx = el.getContext("2d");
  const color = colorForTouch(evt);
  const idx = ongoingTouchIndexById(evt.pointerId);

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

これは前の関数と非常によく似ています。 唯一の大きな違いは、終わりを示すために小さな正方形を描くことと、`Array.splice()` を呼び出すときに、更新された情報を追加せずに、進行中のタッチリストから古い項目を削除することです。 その結果、そのタッチ点の追跡をやめます。

#### キャンセルされたタッチの処理

ユーザーの指がブラウザーの UI にぶつかったり、あるいはタッチをキャンセルする必要がある場合は、 `pointercancel` イベントが送信され、次の `handleCancel()` 関数を呼び出します。

```js
function handleCancel(evt) {
  log(`pointercancel: id = ${evt.pointerId}`);
  const idx = ongoingTouchIndexById(evt.pointerId);
  ongoingTouches.splice(idx, 1); // remove it; we're done
}
```

タッチを即座に中止するため、最後の線分を描かずに進行中のタッチリストから削除しています。

### 便利な関数

この例では、コードの残りの部分をより明確にするために簡単に説明する必要がある、いくつかの便利な関数を使用しています。

#### タッチごとの色の選択

各タッチの描画を異なるように見せるために、 `colorForTouch()` 関数を使用して、タッチの一意の識別子に基づいて色を選びます。 この識別子は不透明な数字ですが、少なくとも現在アクティブなタッチ間で異なることを頼れます。

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

この関数の結果は、描画色を設定するために `<canvas>` の関数を呼び出すときに使用できる文字列です。 例えば、`PointerEvent.pointerId` の値が `10` の場合、結果の文字列は `"#aaa"` です。

#### タッチオブジェクトのコピー

ブラウザーによっては、イベント間でタッチオブジェクトを再利用することがあるので、オブジェクト全体を参照するのではなく、気になる部分をコピーするのが最善です。

```js
function copyTouch(touch) {
  return {
    identifier: touch.pointerId,
    pageX: touch.clientX,
    pageY: touch.clientY,
  };
}
```

#### 進行中のタッチの検索

次の `ongoingTouchIndexById()` 関数は、`ongoingTouches` 配列をスキャンして、指定された識別子と一致するタッチを見つけ、そのタッチの配列におけるインデックスを返します。

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

    if (id === idToFind) {
      return i;
    }
  }
  return -1; // not found
}
```

#### 何が起こっているのかを示す

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

仕様書
---

| Specification |
| --- |
| Pointer Events # pointerevent-interface |

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

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

関連情報
----

* ポインターイベント
* タッチイベント