ウェブビデオテキストトラック形式 (WebVTT) - Web API

ウェブビデオテキストトラック形式 (WebVTT)
=========================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
**ウェブビデオテキストトラック形式 (WebVTT)** は、`<track>` 要素を使用して時間指定のテキストトラック（字幕やキャプションなど）を表示するための形式です。 WebVTT ファイルの主な目的は、テキストオーバーレイを `<video>` に追加することです。WebVTT はテキストベースの形式であり、UTF-8 を使用してエンコードする必要があります。スペースを使用できる場所では、タブも使用できます。これらのトラックと、正しい時刻にテキストの再生を実行するために必要なデータを表現および管理するために使用できる小さな API もあります。

WebVTT ファイル
-----------

WebVTT の MIME タイプは `text/vtt` です。

WebVTT ファイル（`.vtt`）にはキューが含まれています。キューは、次のように単一行または複数行になります。
```

WEBVTT

00:01.000 --> 00:04.000
- 液体窒素を絶対に飲まないでください。

00:05.000 --> 00:09.000
- それはあなたの胃に穴をあけます。
- あなたは死ぬ可能性があります。
```

WebVTT の本体
----------

WebVTT の構造は、以下のコンポーネントで構成されています。一部のコンポーネントはオプションです。

* オプションのバイトオーダーマーク (BOM)。
* 文字列 "`WEBVTT`"。
* `WEBVTT` の右側にあるオプションのテキストヘッダー。
    + `WEBVTT` の後には少なくとも 1 つのスペースが必要です。
    + これを使用してファイルに説明を追加できます。
    + 改行または文字列 "`-->`" を除いて、テキストヘッダーには何でも使用できます。
* 空白行。2 つの連続した改行に相当します。
* ゼロ個以上のキューまたはコメント。（訳注：これらのブロックは 1 つ以上の空白行で互いに区切られています。）
* ゼロ行以上の空白行。（訳注：ファイルの終りも空白行という扱いです。）
### 例

* 最も単純な WebVTT ファイル
```

WEBVTT
```

* テキストヘッダーを持つ非常に単純な WebVTT ファイル
```

WEBVTT - このファイルにはキューがありません。
```

* ヘッダーとキューを使用した一般的な WebVTT の例
```

WEBVTT - このファイルにはキューがあります。

14
00:01:14.815 --> 00:01:18.114
- What?
- Where are we now?

15
00:01:18.171 --> 00:01:20.991
- This is big bat country.

16
00:01:21.058 --> 00:01:23.868
- [ Bats Screeching ]
- They won't get in your hair. They're after the bugs.
```

### WebVTT ファイルの内部構造

前の例の 1 つを再検討し、キューの構造をもう少し詳しく見てみましょう。
```

WEBVTT

00:01.000 --> 00:04.000
- 液体窒素を絶対に飲まないでください。

00:05.000 --> 00:09.000
- それはあなたの胃に穴をあけます。
- あなたは死ぬ可能性があります。
```

各キューは、

* 最初の行は時刻で始まります。これは、下にあるテキストを表示するための開始時刻です。
* 同じ行に、`-->` という文字列があります。
* 最初の行を 2 つ目の時刻で終了します。これは、関連するテキストを表示するための終了時刻です。
* ハイフン (-) で始まる 1 行以上の行を表示できます。各行には表示するテキストトラックの一部が含まれています。

ファイルの一部に関する重要な情報を思い出すのに役立つように、`.vtt` ファイルにコメントを入れることもできます。これらは、文字列 `NOTE` で始まる別々の行にあるべきです。以下のセクションでこれらについての詳細を見つけるでしょう。

タイミング行とキュー本体の間など、キュー内で「余分な」空白行を使用しないことが重要です。WebVTT は行ベースで、空白行がキューを閉じます。

WebVTT のコメント
------------

コメントは、WebVTT ファイルに情報を追加するために使用できるオプションのコンポーネントです。コメントはファイルを読む人のためのものであり、ユーザーには見えません。コメントには改行を含めることができますが、空白行を含めることはできません。これは、連続する 2 行の改行と同じです。空白行はコメントの終わりを表します。

コメントには、文字列 "`-->`"、アンパサンド文字 (`&`)、小なり記号 (`<`) を含めることはできません。このような文字を使用したい場合は、アンパサンドには `&`、小なりには `<` を使用してエスケープする必要があります。タグとの混同を避けるために、大なり記号（`>`）の代わりに大なりエスケープシーケンス (`>`) を使用することをお勧めします。

コメントは次の 3 つの部分で構成されています。

* 文字列 `NOTE`。
* スペースまたは改行。
* 上記以外のゼロ個以上の文字。
### 例

* 一般的な WebVTT の例
```

NOTE これはコメントです
```

* 複数行のコメント
```

NOTE
複数行に
またがる別のコメント。

NOTE このように複数行にまたがって
コメントすることもできます。
```

* 一般的なコメントの使い方
```

WEBVTT - 好きな映画の翻訳

NOTE
何人かの友人が両親と一緒に見ることができるように、
Kyle が翻訳しました。

1
00:02:15.000 --> 00:02:20.000
- Ta en kopp varmt te.
- Det är inte varmt.

2
00:02:20.000 --> 00:02:25.000
- Har en kopp te.
- Det smakar som te.

NOTE この最後の行はうまく翻訳されていないかもしれません。

3
00:02:25.000 --> 00:02:30.000
- Ta en kopp
```

WebTT キューのスタイル設定
----------------

`::cue` 擬似要素に一致する要素を探すことで WebTT キューをスタイル設定することができます。

### サイトの CSS の中

```css
video::cue {
  background-image: linear-gradient(to 下端, dimgray, lightgray);
  color: papayawhip;
}

video::cue(b) {
  color: peachpuff;
}
```

ここでは、すべての動画要素は背景として灰色の線形グラデーションを使用するようにスタイル設定しており、前景色は `"papayawhip"` です。また、`<b>` 要素を使用して太字になっているテキストは、`"peachpuff"` で色づけしています。

以下の HTML スニペットは実際にメディア自体の表示を処理します。

```html
<video controls autoplay src="video.webm">
  <track default src="track.vtt" />
</video>
```

### WebVTT ファイル自体の中

WebVTT ファイルで直接スタイルを定義することもできます。この場合、CSS のルールをファイルに挿入します。次に示すように、各ルールの前には、すべてに一行のテキストで文字列 `"STYLE"` が付いています。
```

WEBVTT

STYLE
::cue {
  background-image: linear-gradient(to 下端, dimgray, lightgray);
  color: papayawhip;
}
/* スタイルブロックは空白行も "ハイフンハイフン大なり" も使用できません */

NOTE コメントブロックはスタイルブロックの間で使用できます。

STYLE
::cue(b) {
  color: peachpuff;
}

00:00:00.000 --> 00:00:10.000
- Hello <b>world</b>.

NOTE スタイルブロックは、最初のキューの後には出現できません。
```

WebVTT ファイル内で識別子を使用することもできます。これは、ファイル内の特定のキューに対する新しいスタイルを定義するために使用できます。転記テキスト (transcription text) を赤で強調表示し、他の部分を通常のままにしたい例は、CSS を使用して次のように定義できます。CSS が HTML のページで使用しているのと同じ方法でエスケープシーケンスを使用していることに注意する必要があります。
```

WEBVTT

1
00:00.000 --> 00:02.000
That's an, an, that's an L!

crédit de transcription
00:04.000 --> 00:05.000
Transcrit par Célestes™
```

```css
::cue(#\31) {
  color: lime;
}
::cue(#crédit\ de\ transcription) {
  color: red;
}
```

以下に示すように、キュー内のタイミングの後に位置情報を含めることで、テキストトラックの位置指定にも対応しています（詳細については、キュー設定を参照してください）。
```

WEBVTT

00:00:00.000 --> 00:00:04.000 position:10%,line-left align:left size:35%
Where did he go?

00:00:03.000 --> 00:00:06.500 position:90% align:right size:35%
I think he went down this lane.

00:00:04.000 --> 00:00:06.500 position:45%,line-right align:center size:35%
What are you waiting for?
```

WebVTT のキュー
-----------

キューは、単一の開始時刻、終了時刻、およびテキスト本体を持つ単一の字幕ブロックです。キューは次の 5 つの要素で構成されています。

* オプションのキュー識別子とそれに続く改行。
* キューのタイミング。
* 最初の設定の前と各設定の間に少なくとも 1 つのスペースを持つオプションのキュー設定。
* 1 つの改行。
* キュー本体のテキスト。

こちらがキューの例です。
```

1 - Title Crawl
00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
Some time ago in a place rather distant....
```

### キュー識別子

識別子は、キューを識別する名前です。スクリプトからキューを参照するために使用できます。改行を含むことはできず、文字列 "`-->`" を含むことはできません。それは単一の改行で終わらなければなりません。番号をつけるのが一般的ですが（例えば、1、2、3、...）、それらは一意である必要はありません。

いくつか例を紹介します。

* 基本的なキュー識別子
```

1 - Title Crawl
```

* 識別子の一般的な使い方
```

WEBVTT

1
00:00:22.230 --> 00:00:24.606
This is the first subtitle.

2
00:00:30.739 --> 00:00:34.074
This is the second.

3
00:00:34.159 --> 00:00:35.743
Third
```

### キューのタイミング

キューのタイミングは、キューがいつ表示されるかを示します。タイムスタンプで表される開始時刻と終了時刻があります。終了時刻は開始時刻より後でなければならず、開始時刻は前のすべての開始時刻より後でなければなりません。キューは、タイミングが重複するかもしれません。

WebVTT ファイルをチャプターに使用している場合（`<track>` の `kind` は `chapters` です）、ファイルは重複するタイミングを持つことはできません。

各キューのタイミングには次の 5 つの要素があります。

* 開始時刻のタイムスタンプ。
* 少なくとも 1 つのスペース。
* 文字列 "`-->`"。
* 少なくとも 1 つのスペース。
* 終了時刻のタイムスタンプ。開始時刻より後でなければなりません。

タイムスタンプは、次の 2 つの形式のいずれかになります。

* `mm:ss.ttt`
* `hh:mm:ss.ttt`

そのコンポーネントは次のように定義されています。

`hh`

時を表し、2 桁以上でなければなりません。2 桁を超えることがあります（例えば、9999:00:00.00）。

`mm`

分を表し、00 以上 59 以下でなければなりません。

`ss`

秒を表し、00 以上 59 以下でなければなりません。

`ttt`

ミリ秒を表し、000 以上 999 以下でなければなりません。

キューのタイミングの例をいくつか示します。

* 基本的なキューのタイミングの例
```

00:00:22.230 --> 00:00:24.606
00:00:30.739 --> 00:00:34.074
00:00:34.159 --> 00:00:35.743
00:00:35.827 --> 00:00:40.122
```

* 重複するキューのタイミングの例
```

00:00:00.000 --> 00:00:10.000
00:00:05.000 --> 00:01:00.000
00:00:30.000 --> 00:00:50.000
```

* 重複しないキューのタイミングの例
```

00:00:00.000 --> 00:00:10.000
00:00:10.000 --> 00:01:00.581
00:01:00.581 --> 00:02:00.100
00:02:01.000 --> 00:02:01.000
```

### キュー設定

キュー設定は、動画上にキュー本体のテキストを表示する位置を決めるために使用するオプションのコンポーネントです。これには、テキストを水平に表示するか垂直に表示するかが含まれます。それらは 0 個以上存在することができ、各設定が 2 回以上使用されない限り、それらは任意の順序で使用できます。

キュー設定は、キューのタイミングの右側に追加します。キューのタイミングと最初の設定の間、および各設定の間には 1 つ以上のスペースが必要です。設定の名前と値はコロンで区切ります。設定では大文字と小文字が区別されるため、次のように小文字を使用してください。次の 5 つのキュー設定があります。

`vertical`

一部のアジアの言語のように、テキストを水平ではなく垂直に表示することを示します。取りうる値は 2 つあります。

`rl`

記述方向は右から左

`lr`

記述方向は左から右

`line`

vertical が設定されていない場合は、テキストを垂直方向に表示する場所を指定します。vertical が設定されている場合、line はテキストを水平方向に表示する場所を指定します。値は次の何れかです。

行番号

数値は、映像に表示されるキューの最初の行の垂直位置です。正の数値はトップダウン、負の数値はボトムアップを示します。

パーセント値

0 から 100 までの整数（小数点を含まない）で、その後にパーセント記号 (%) を付けなければなりません。

| line | `vertical` を省略 | `vertical:rl` | `vertical:lr` |
| --- | --- | --- | --- |
| `line:0` | 上端 | 右端 | 左端 |
| `line:-1` | 下端 | 左端 | 右端 |
| `line:0%` | 上端 | 右端 | 左端 |
| `line:100%` | 下端 | 左端 | 右端 |

`position`

テキストを水平方向に表示する場所を指定します。vertical を設定している場合、position はテキストを垂直方向に表示する場所を指定します。値はパーセント値で、0 から 100 までの整数（小数点なし）でなければならず、その後にパーセント記号（`%`）を付ける必要があります。

| position | `vertical` を省略 | `vertical:rl` | `vertical:lr` |
| --- | --- | --- | --- |
| `position:0%` | 左端 | 上端 | 上端 |
| `position:100%` | 右端 | 下端 | 下端 |

`size`

テキスト領域の幅を指定します。vertical を設定している場合、size はテキスト領域の高さを指定します。値はパーセントで、0 から 100 までの整数（つまり、小数点なし）でなければならず、その後にパーセント記号 (`%`) を付ける必要があります。

| size | `vertical` omitted | `vertical:rl` | `vertical:lr` |
| --- | --- | --- | --- |
| `size:100%` | full width | full height | full height |
| `size:50%` | half width | half height | half height |

`align`

テキストの配置を指定します。設定している場合、テキストは size キュー設定で指定したスペース内に配置されます。

| align | `vertical` を省略 | `vertical:rl` | `vertical:lr` |
| --- | --- | --- | --- |
| `align:start` | 左端 | 上端 | 上端 |
| `align:center` | 水平方向に中央揃え | 垂直方向に中央揃え | 垂直方向に中央揃え |
| `align:end` | 右端 | 下端 | 下端 |

キュー設定の例を見てみましょう。

最初の行は設定がないことを示しています。2 行目は、サインやラベルの上にテキストを重ねるために使用します。3 行目はタイトルに使用できます。最後の行はアジアの言語に使われるかもしれません。
```

00:00:05.000 --> 00:00:10.000
00:00:05.000 --> 00:00:10.000 line:63% position:72% align:start
00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
00:00:05.000 --> 00:00:10.000 vertical:rt line:-1 align:end
```

### キュー本体

本体は、主な情報またはコンテンツを配置する場所です。通常の使用法では、本体には表示する字幕が含まれています。本体のテキストには改行を含めることができますが、空白行を含めることはできません。これは、2 つの連続する改行に相当します。空白行はキューの終わりを表します。

キュー本体のテキストには、文字列 `-->`、アンパサンド文字 (`&`)、小なり記号 (`<`) を含めることはできません。代わりに、アンパサンドにはエスケープシーケンス `&` を使用し、小なりには `<` を使用します。タグとの混同を避けるために、大なり記号 (`>`) の代わりに大なりエスケープシーケンス `>` を使用することをお勧めします。メタデータに WebVTT ファイルを使用している場合、これらの制限は適用されません。

上記の 3 つのエスケープシーケンスに加えて、他にも 4 つあります。以下の表に示します。

| 名前 | 文字 | エスケープシーケンス |
| --- | --- | --- |
| アンパサンド | `&` | `&` |
| 小なり | `<` | `<` |
| 大なり | `>` | `>` |
| 左書き | *なし* | `` |
| 右書き | *なし* | `` |
| 改行なしスペース |  | ` ` |

### キュー本体のテキストタグ

使用できるタグは `<b>` など多数あります。ただし、WebVTT ファイルが `<track>` 要素の中で使われていて、その属性 `kind` が `chapters` である場合は、タグを使うことができません。

タイムスタンプタグ

タイムスタンプは、キューの開始タイムスタンプより大きく、キュー本体内の前のタイムスタンプより大きく、キューの終了タイムスタンプより小さくなければなりません。*アクティブテキスト*は、タイムスタンプと次のタイムスタンプの間、または本体に別のタイムスタンプがない場合は本体の最後までのテキストです。本体内の*アクティブテキスト*より前のテキストはすべて*過去のテキスト*です。*アクティブテキスト*より後のテキストはすべて*将来のテキスト*です。これによりカラオケ風のキャプションが実現できます。
```

1
00:16.500 --> 00:18.500
When the moon <00:17.500>hits your eye

1
00:00:18.500 --> 00:00:20.500
Like a <00:19.000>big-a <00:19.500>pizza <00:20.000>pie

1
00:00:20.500 --> 00:00:21.500
That's <00:00:21.000>amore
```

次のタグは、キューで使用できる HTML タグで、開始タグと終了タグ（例えば、`<b>テキスト</b>`）が必要です。

* クラスタグ (`<c></c>`)
    + : CSS クラスを使用して含まれているテキストをスタイルします。
     xml
    ```xml
    <c.classname>text</c>

    ```
* イタリック体タグ (`<i></i>`)
    + : 含まれているテキストをイタリック体にします。
     xml
    ```xml
    <i>text</i>

    ```
* **太字タグ** (`<b></b>`)
    + : 含まれているテキストを太字にします。
     xml
    ```xml
    <b>text</b>

    ```
* 下線タグ (`<u></u>`)
    + : 含まれているテキストに下線を引きます。
     xml
    ```xml
    <u>text</u>

    ```
* ルビタグ (`<ruby></ruby>`)
    + : ルビ文字（すなわち、他の文字の上にある小さな注釈文字）を表示するためにルビテキストタグと共に使用します。
     xml
    ```xml
    <ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby>

    ```
* ルビテキストタグ (`<rt></rt>`)
    + : ルビ文字（つまり、他の文字の上にある小さな注釈文字）を表示するためにルビタグとともに使用します。
     xml
    ```xml
    <ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby>

    ```
* ボイスタグ (`<v></v>`)
    + クラスタグと同様に、CSS を使用して含まれているテキストをスタイルするためにも使用します。
     xml
    ```xml
    <v Bob>text</v>

    ```
インスタンスメソッドとプロパティ
----------------

WebVTT で使用するメソッドは、両方のインターフェイスの属性が異なるため、キューまたは領域を変更するために使用するものです。WebVTT の各インターフェイスに関する理解を深めるために、それらを分類することができます。

### VTTCue

* `VTTCue` インターフェイスで利用できるメソッドは次のとおりです。
* `getCueAsHTML()`: そのキューの HTML を取得します。
* コンストラクター、`VTTCue()` はこのインターフェイスの新しいインスタンスを生成します。

キューの位置、配置、サイズなど、キューの特性を読み取り、設定するためのさまざまなプロパティも用意されています。完全なリストは `VTTCue` を参照してください。

### VTTRegion

`VTTRegion` では、機能の説明とともにメソッドを提供します。特に、与えられた領域内に存在するすべてのノードのスクロール設定を調整することができます。

WebVTT ファイルの書き方に関するチュートリアル
--------------------------

簡単な WebVTT ファイルを作成するには、いくつかのステップを踏む必要があります。まず、メモ帳を使い、'.vtt' ファイルとして保存します。手順は以下の通りです。

* メモ帳を開きます。
* WebVTT の最初の行は、ファイルがファイルの種類を示し始めるときに他の言語ではヘッダーを配置するように要求されるのと同様に標準化されています。最初の 1 行は次のように書く必要があります。
```

WEBVTT
```

* 2 行目を空白のままにして、3 行目で最初のキューの時間を指定します。例えば、時間が 1 秒で始まり 5 秒で終わる最初のキューでは、次のようになります。
```

00:01.000 --> 00:05.000
```

* 次の行に、このキューのキャプションを書くことができます。キャプションは 1 秒から 5 秒までです。
* 同様の手順に従って、特定の動画または音声ファイル用の完全な WebVTT ファイルを作成できます。
CSS 擬似クラス
---------

CSS 擬似クラスを使用すると、他の種類のオブジェクトと区別したいオブジェクトの種類を分類できます。WebVTT ファイルでも HTML ファイルと同じように機能します。

WebVTT が備えている優れた機能には、ローカライズと class 要素の使用があります。class 要素は、HTML や CSS で特定の型のオブジェクトのスタイルを分類するために使われるのと同じように使用できますが、ここでは、以下のようにキューのスタイルと分類に使用されています。
```

WEBVTT

04:02.500 --> 04:05.000
J'ai commencé le basket à l'âge de 13, 14 ans

04:05.001 --> 04:07.800
Sur les <i.foreignphrase><lang en>playground</lang></i>, ici à Montpellier
```

上記の例では、キャプションの言語を定義するために識別子と擬似クラス名を使用できることがわかります。`<i>` タグはイタリック体のためのものです。

擬似クラスの型はそれを使用しているセレクターによって決定し、それは HTML で機能するのと同じように機能します。以下の CSS 擬似クラスを使用することができます。

* `lang` (Language): 例えば、`p:lang(it)`。
* `link`: 例えば、`a:link`。
* `nth-last-child`: 例えば、`p:nth-last-child(2)`。
* `nth-child(n)`: 例えば、`p:nth-child(2)`。

ここで、`p` と `a` はそれぞれ HTML で段落とリンクに使われるタグで、WebVTT ファイルの Cue に使われる識別子に置き換えることができます。

仕様書
---

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # the-vttcue-interface |
| HTML Standard # texttrack |
| WebVTT: The Web Video Text Tracks Format # the-vttregion-interface |

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

### api.VTTCue

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

### api.TextTrack

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

### api.VTTRegion

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

### メモ

Firefox 50 より前のバージョンでは、`AlignSetting` 列挙体（`VTTCue.align` に指定可能な値を表す）に、`"center"` ではなく `"middle"` という値が誤って含まれていました。これは修正されました。

WebVTT は Firefox 24 では `media.webvtt.enabled` の設定に隠されて実装されており、既定では無効になっています。この設定を `true` に設定することで有効にできます。WebVTT は Firefox 31 以降では既定で有効になっていますが、設定を `false` に設定することで無効にすることができます。

Firefox 58 より前のバージョンでは、`REGION` キーワードは `VTTRegion` オブジェクトを作成していましたが、使用していませんでした。Firefox 58 は現在 `VTTRegion` とその使用を完全にサポートしています。ただし、この機能は設定 `media.webvtt.regions.enabled` に隠されて既定で無効になっています。Firefox 58 で領域のサポートを有効にするには、`true` に設定してください。領域は Firefox 59 以降で既定で有効になっています（Firefox bug 1338030 および Firefox bug 1415805 のバグを参照）。

関連情報
----

* CSS の `::cue` および `::cue()` 擬似要素


ポップオーバー API - Web API

ポップオーバー API
===========

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

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

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

**ポップオーバー API** は、他のページコンテンツの上に表示するポップオーバーコンテンツを表示するための、標準的な、一貫性のある、柔軟な仕組みを開発者に提供します。ポップオーバーコンテンツは、HTML 属性を用いて宣言的に、または JavaScript を用いて制御することができます。

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

ウェブでは、他のコンテンツの上にコンテンツを示し、ユーザーにとって重要な情報や導くべき操作の詳細を示すというのが、とても一般的なパターンです。このコンテンツは、オーバーレイ、ポップアップ、ポップオーバー、ダイアログなど、さまざまな名称で呼ばれます。私たちは、このドキュメントを通して、これらをポップオーバーと呼ぶことにします。一般的に、これらは次のようなものがあります。

* **モーダル**というのは、ポップオーバーが示されている間、ページの残りの部分は、ポップオーバーが何らかのアクションを起こすまで（例えば、重要な選択がなされるまで）、反応しないようにレンダリングされるということです。
* **非モーダル**というのは、ポップオーバーが表示されている間も、ページの残りの部分が反応するようにするということです。

ポップオーバー API を使用して作成されたポップオーバーは常に非モーダルです。モーダルポップオーバーを作成したい場合は、`<dialog>` 要素を使うのが適切ですが、既定では `<dialog>` 要素は最上位レイヤー (en-US)には配置されないので注意してください。ポップオーバーはそうなります。2 つの間には明確な重複があります。ポップオーバーは、持続的なもので、宣言的な HTML を使用して制御したい場合などに作成します。ポップオーバーの制御と最上位の配置をダイアログの意味づけと組み合わせたい場合は、`<dialog>` 要素をポップオーバーすることもできます。

ポップオーバー API のよくある用途は、アクションメニュー、独自の「トースト」通知、フォーム要素のサジェスト、コンテンツピッカー、チュートリアル UI などのユーザーと対話する要素があります。

ポップオーバーは、2 つの異なる方法で作成することができます。

* 新しい一連の HTML 属性によって、宣言的に作成できます。トグルボタンを持つ単純なポップオーバーは、以下のコードで作成することができます。

```html
<button popovertarget="mypopover">ポップオーバーの切り替え</button>
<div id="mypopover" popover>ポップオーバーコンテンツ</div>
```

* JavaScript API から。例えば、`HTMLElement.togglePopover()` を使用してポップオーバーを表示と非表示のトグル切り替えができます。

また、ポップオーバーのトグルに反応する新しいイベントや、ポップオーバーのスタイル設定を支援する CSS 機能もあります。すべての新しい機能は以下の一覧に掲載されています。

ポップオーバー API の使用で、この API の詳細なガイドを参照してください。

HTML 属性
-------

`popover`

グローバル属性で、ある要素をポップオーバー要素にします。値としてポップオーバー状態（`"auto"` または `"manual"`）を取ります。

`popovertarget`

`<button>` または `<input>` 要素をポップオーバー制御ボタンにします。値として、制御するポップオーバー要素の ID を取ります。

`popovertargetaction`

制御ボタン（`<button>` または `<input>`）で制御しているポップオーバー要素に対して行う動作（`"hide"`、`"show"`、`"toggle"` の何れか）を指定します。

CSS 機能
------

`::backdrop`

擬似要素 `::backdrop` は、ポップオーバー要素の後ろに直接配置される全画面要素で、ポップオーバーの背後にあるページコンテンツに必要な効果を追加することができます（ぼかすなど）。

`:popover-open`

`popover-open` 擬似クラスは、ポップオーバー要素が表示状態にあるときのみ一致します。これは、ポップオーバー要素が表示されているときのスタイル設定に使用できます。

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

`ToggleEvent`

popover 要素の状態が表示と非表示の間で切り替わるときにユーザーに通知するイベントを表します。これは、`beforetoggle` と `toggle` イベント用のイベントオブジェクトで、ポップオーバーでその状態が変化するときに発行されます。

他のインターフェイスの拡張
-------------

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

`HTMLElement.popover`

要素のポップオーバー状態を JavaScript で取得または設定し（`"auto"` または `"manual"`）、機能検出にも使用することができます。HTML のグローバル属性である `popover` global を反映します。

`HTMLButtonElement.popoverTargetElement` および `HTMLInputElement.popoverTargetElement`

この制御ボタンで制御されるポップオーバー要素を取得または設定します。JavaScript において HTML の `popovertarget` 属性に相当するものです。

`HTMLButtonElement.popoverTargetAction` および `HTMLInputElement.popoverTargetAction`

この制御ボタンが制御するポップオーバー要素に対して行われるアクション（`"hide"`、`"show"`、`"toggle"` の何れか）を設定または取得します。HTML の `popovertargetaction` 属性を反映します。

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

`HTMLElement.hidePopover()`

ポップオーバー要素を最上位レイヤーから削除し、`display: none` でスタイル設定することにより、ポップオーバー要素を非表示にします。

`HTMLElement.showPopover()`

ポップオーバー要素を最上位レイヤーに追加して表示します。

`HTMLElement.togglePopover()`

ポップオーバー要素の表示状態と非表示状態を切り替えます。

### イベント

`HTMLElement` の `beforetoggle` イベント

ポップオーバー要素の表示と非表示の状態が変わる直前、またはその逆で発行されます。

`HTMLElement` の `toggle` イベント

ポップオーバー要素の状態が、表示と非表示、またはその逆に変化した直後に発行されます。このイベントは、`<details>` 要素の状態変化を指示するためにすでに存在しており、ポップオーバー要素のためにこれを拡張することは理にかなっていると考えられています。

例
-

ポップオーバー API の例のランディングページに、MDN のポップオーバーの完全な例にアクセスできます。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-popover |

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

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


BluetoothRemoteGATTDescriptor - Web API

BluetoothRemoteGATTDescriptor
=============================

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

Web Bluetooth API の `BluetoothRemoteGATTDescriptor` は、GATT ディスクリプターを提供します。これは、キャラクタリスティックの値に関する詳細情報を提供します。

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

`BluetoothRemoteGATTDescriptor.characteristic` 読取専用
Experimental

このディスクリプターが属する `BluetoothRemoteGATTCharacteristic` を返します。

`BluetoothRemoteGATTDescriptor.uuid` 読取専用
Experimental

 このキャラクタリスティックディスクリプターの UUID を返します。たとえば、theClient
 Characteristic Configuration descriptor は「`00002902-0000-1000-8000-00805f9b34fb`」です。

`BluetoothRemoteGATTDescriptor.value` 読取専用
Experimental

現在キャッシュされているディスクリプターの値を返します。この値はディスクリプターの値が読まれると更新されます。

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

`BluetoothRemoteGATTDescriptor.readValue()`
Experimental

利用可能で対応していれば `value` プロパティの複製が格納された `ArrayBuffer` で解決する `Promise` を返します。そうでない場合、エラーを投げます。

`BluetoothRemoteGATTDescriptor.writeValue()`
Experimental

`value` プロパティを `ArrayBuffer` に格納されたバイト列に設定し、`Promise` を返します。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # bluetoothgattdescriptor-interface |

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

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


HTMLTableSectionElement - Web API

HTMLTableSectionElement
=======================

**`HTMLTableSectionElement`** インターフェイスは、（継承元でもある通常の `HTMLElement` オブジェクトのインターフェイスのほかに） HTML の表におけるヘッダー、フッター、本体などのセクションのレイアウトと表現を操作するための特別なプロパティやメソッドを提供します。

EventTarget

Node

Element

HTMLElement

HTMLTableSectionElementプロパティ
-----

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

`HTMLTableSectionElement.align`
非推奨

文字列で、 `align` 属性を反映した列挙型の値が入ります。これは、周囲のコンテキストに対する要素の内容物の配置を示します。利用可能な値は `"left"`, `"right"`, `"center"` です。

`HTMLTableSectionElement.rows` 読取専用

セクション内の行を含む生きた `HTMLCollection` を返します。この `HTMLCollection` は生きており、行が追加または削除された際には自動的に更新されます。

`HTMLTableSectionElement.ch`
非推奨

単一の文字が入った文字列です。この文字は、列のすべてのセルを揃えるための文字です。これは `char` を反映したもので、既定値は言語に関連した小数点以下の値、例えば英語なら `'.'`、フランス語なら `','` になります。このプロパティは任意であり、あまり対応されていませんでした。

`HTMLTableSectionElement.chOff`
非推奨

文字列で、 `HTMLTableRowElement.ch` で定義された文字の右側（左書きの場合。右書きの場合は左側）に何文字残さなければならないかを示す整数です。このプロパティは任意であり、あまり対応されていませんでした。

`HTMLTableSectionElement.vAlign`
非推奨

文字列で、セルの内容物が垂直方向に配置される方法を示す列挙値を表します。これは `valign` 属性を反映し、 `"top"`, `"middle"`, `"bottom"`, `"baseline"` の何れかの値を取ります。

メソッド
----

*親である `HTMLElement` から継承したメソッドがあります。*

`HTMLTableSectionElement.deleteRow()`

引数で与えられた `index` に対応する行を、そのセクションから削除します。もし `index` の値が `-1` であれば、最後の行が削除されます。もし `-1` よりも小さいか、コレクション内の行数よりも大きい場合は、 `DOMException` が `IndexSizeError` の値で発生します。

`HTMLTableSectionElement.insertRow()`

セクションの新しい行を表す `HTMLTableRowElement` を返します。これは、指定された `index` の位置にある `<tr>` 要素の直前の行コレクションに挿入されます。 `index` が `-1` である場合、新しい行がコレクションに追加されます。もし `index` が `-1` よりも小さいか、コレクション内の行数よりも大きい場合は、値 `IndexSizeError` を持つ `DOMException` が発生します。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmltablesectionelement |

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

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

関連情報
----

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


Permissions - Web API

Permissions
===========

`Permissions` は権限 API のインターフェイスで、権限の照会や取り消しのためのメソッドなど、中心となる権限 API の機能を提供します。

メソッド
----

`Permissions.query()`

指定された API の権限の状態を返します。

`Permissions.request()`
Experimental

指定された API を使用する権限を要求します。 これは現在どのブラウザーも対応していません。

`Permissions.requestAll()`
Experimental

Non-standard

指定された API 群の使用許可を要求します。これは現在、どのブラウザーも対応していません。

`Permissions.revoke()`
非推奨

指定された API に現在設定されている権限を取り消します。

例
-

```js
navigator.permissions.query({ name: " geolocation" }).then((result) => {
  if (result.state === "granted") {
    showLocalNewsWithGeolocation();
  } else if (result.state === "prompt") {
    showButtonToEnableLocalNews();
  }
  // 権限が拒否された場合は何もしないでください。
});
```

仕様書
---

| Specification |
| --- |
| Permissions # permissions-interface |

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

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


ファイルシステム API - Web API

ファイルシステム API
============

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

ファイルシステム API は - ファイルシステムアクセス API を介して提供される拡張機能により - 端末のファイルシステム上のファイルにアクセスし、読み取り、書き込み、ファイル管理機能を使用することができます。

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

この API を用いると、ユーザーのローカルデバイス上のファイルや、ユーザーがアクセス可能なネットワークファイルシステムを操作することができます。この API の基本機能として、ファイルの読み込み、ファイルの書き込み（保存）、ディレクトリー構造へのアクセスがあります。

ファイルやディレクトリーの操作のほとんどは、ハンドルを介して行います。親クラスの `FileSystemHandle` の補助により `FileSystemFileHandle` および `FileSystemDirectoryHandle` の 2 個の子クラスが定義されており、それぞれファイルおよびディレクトリーの操作に用います。

ハンドルは、ユーザーのシステム上のファイルやディレクトリーを表します。まず、`window.showOpenFilePicker()` や `window.showDirectoryPicker()` などのメソッドを用いてユーザーにファイルピッカーまたはディレクトリーピッカーを表示し、ファイルやディレクトリーへのアクセス権を得ることができます。これらのメソッドが呼ばれると、ファイルピッカーが現れ、ユーザーがファイルまたはディレクトリーを選択します。この流れがうまくいくと、ハンドルが返されます。

以下の方法によりファイルハンドルへのアクセス権を得ることもできます。

* HTML ドラッグ＆ドロップ API の `DataTransferItem.getAsFileSystemHandle()` メソッド
* ファイルハンドリング API

それぞれのハンドルが自身の機能を提供し、どっちを使っているかによって少し違いがあります（詳細は、インターフェイスの節を参照してください）。ファイルのデータや、選択されたディレクトリーの情報（子を含む）にアクセスできます。この API により、ウェブに欠けていた潜在的な機能への道が開きます。それでも、セキュリティは API の設計時に最大限考慮するべきことであり、ファイルやディレクトリーのデータへのアクセスはユーザーが特に許可しない限り禁止されています（これは、ユーザーから見えないオリジンプライベートファイルシステムの場合とは異なります）。

**メモ:** API の機能を使う際に投げられる可能性がある例外は、仕様書での定義に沿って関連するページに一覧が載っています。しかし、 API と下層のオペレーティングシステムの相互作用により、状況はより複雑になります。仕様書でエラーの対応関係を一覧にするための提案がなされており、ここに有用な関連情報があります。

**メモ:** `FileSystemHandle` をベースとするオブジェクトは、IndexedDB のデータベースのインスタンスにシリアライズしたり、`postMessage()` を介して転送したりできます。

### オリジンプライベートファイルシステム

オリジンプライベートファイルシステム (OPFS) は、ページのオリジン固有のストレージのエンドポイントであり、パフォーマンスに高度に最適化された特別な種類のファイルへのアクセスを選択可能です。例えば、ファイルの内容をその場 (in-place) で排他的に書き換えることができます。

使い方の説明は、オリジンプライベートファイルシステムを読んでください。

### ファイルの保存

* 非同期ハンドルでは、`FileSystemWritableFileStream` インターフェイスを使います。保存したいデータを `Blob`、`String` オブエクト、文字列リテラル、`buffer` のいずれかの形式にしたら、ストリームを開いてデータをファイルに保存できます。既存のファイルも新しいファイルも保存先にできます。
* 同期的に `FileSystemSyncAccessHandle` では、`write()` メソッドを用いて変更をファイルに書き込みます。特定のタイミングで変更をディスクに書き込みたい場合は、`flush()` を呼ぶことができます。(これを呼ばない場合、下層のオペレーティングシステムに任せて都合のいいときに処理させることができ、ほとんどの場合はこれでいいでしょう)
インターフェイス
--------

`FileSystemHandle`

**`FileSystemHandle`** インターフェイスは、項目を表すオブジェクトです。複数のハンドルが同じ項目を表すことがあります。ほとんどの場面では、`FileSystemHandle` を直接扱うことはなく、子インターフェイスの `FileSystemFileHandle` や `FileSystemDirectoryHandle` を扱うことになるでしょう。

`FileSystemFileHandle`

ファイルシステムの項目を表すハンドルを提供します。

`FileSystemDirectoryHandle`

ファイルシステムのディレクトリーを表すハンドルを提供します。

`FileSystemSyncAccessHandle`

ディスク上の単一のファイルをその場 (in-place) で操作する、ファイルシステムの項目への同期的にハンドルを提供します。このファイルの読み書きを同期的に行える性質は、WebAssembly などの非同期操作が大きなオーバーヘッドに繋がる場面における重要なメソッドで処理効率を高めることを可能にします。このクラスは、それ用のウェブワーカー内でオリジンプライベートファイルシステム内のファイルを扱う場合のみ使用可能です。

`FileSystemWritableFileStream`

ディスク上の単一のファイルを操作する便利な関数が追加された `WritableStream` です。

例
-

### ファイルにアクセスする

以下のコードで、ユーザーにファイルピッカーでファイルを選ばせることができます。

```js
async function getFile() {
  // ファイルピッカーを開き、結果を分解して最初のハンドルを取り出す
  const [fileHandle] = await window.showOpenFilePicker();
  const file = await fileHandle.getFile();
  return file;
}
```

以下の非同期関数は、ファイルピッカーを開き、ファイルが選ばれたら `getFile()` メソッドを用いて内容を取得します。

```js
const pickerOpts = {
  types: [
    {
      description: "Images",
      accept: {
        "image/\*": [".png", ".gif", ".jpeg", ".jpg"],
      },
    },
  ],
  excludeAcceptAllOption: true,
  multiple: false,
};

async function getTheFile() {
  // ファイルピッカーを開き、結果を分解して最初のハンドルを取り出す
  const [fileHandle] = await window.showOpenFilePicker(pickerOpts);

  // ファイルの内容を得る
  const fileData = await fileHandle.getFile();
}
```

### ディレクトリーにアクセスする

以下の例では、名前を指定したディレクトリーハンドルを返します。指定のディレクトリーが存在しない場合は、作成されます。

```js
const dirName = "directoryToGetName";

// 'currentDirHandle' というディレクトリーハンドルがあると仮定している
const subDir = currentDirHandle.getDirectoryHandle(dirName, { create: true });
```

以下の非同期関数は、`resolve()` を用いて選ばれたファイルの指定のディレクトリーからの相対パスを求めます。

```js
async function returnPathDirectories(directoryHandle) {
  // ファイルピッカーを開き、ファイルハンドルを得る
  const [handle] = await self.showOpenFilePicker();
  if (!handle) {
    // ユーザーがキャンセルしたか、ファイルを開くのに失敗した
    return;
  }

  // ハンドルが手元のディレクトリーハンドルが表すディレクトリー内にあるかをチェックする
  const relativePaths = await directoryHandle.resolve(handle);

  if (relativePaths === null) {
    // ディレクトリーハンドル内に無い
  } else {
    // relativePaths は、相対パスを表す名前の配列

    for (const name of relativePaths) {
      // 各項目を記録する
      console.log(name);
    }
  }
}
```

### ファイルに書き込む

以下の非同期関数は保存用のファイルピッカーを開き、これはファイルが選択されると `FileSystemFileHandle` を返します。その後、`FileSystemFileHandle.createWritable()` メソッドにより書き込み可能なストリームを生成します。

そして、ユーザー定義の `Blob` をストリームに書き込み、続いてストリームを閉じます。

```js
async function saveFile() {
  // 新しいハンドルを生成する
  const newHandle = await window.showSaveFilePicker();

  // 書き込み先となる FileSystemWritableFileStream を生成する
  const writableStream = await newHandle.createWritable();

  // ファイルを書き込む
  await writableStream.write(imgBlob);

  // ファイルを閉じ、内容をディスクに書き込む
  await writableStream.close();
}
```

以下は、`write()` メソッドに渡すことができるオプションの異なる例です。

```js
// データのみを渡す (オプションなし)
writableStream.write(data);

// ストリームに指定の位置からデータを書き込む
writableStream.write({ type: "write", position, data });

// 現在のファイルカーソルの位置を指定の位置に更新する
writableStream.write({ type: "seek", position });

// ファイルを size バイトにリサイズする
writableStream.write({ type: "truncate", size });
```

### OPFS 内のファイルを同期的に読み書きする

この例では、オリジンプライベートファイルシステム内のファイルを同期的に読み書きします。

以下の非同期のイベントハンドラー関数は、ウェブワーカー内にあります。メインスレッドからメッセージを受信した時、以下の処理をします。

* 同期的にファイルアクセスハンドルを生成する
* ファイルのサイズを取得し、格納するための `ArrayBuffer` を生成する
* ファイルの内容をバッファーに読み込む
* メッセージをエンコードし、ファイルの最後に書き込む
* 変更内容をデイスクに保存し、アクセスハンドルを閉じる

```js
onmessage = async (e) => {
  // メインスレッドから送られた処理対象のメッセージを取得する
  const message = e.data;

  // OPFS 内の draft ファイルのハンドルを得る
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle("draft.txt", { create: true });
  // 同期的にアクセスハンドルを得る
  const accessHandle = await draftHandle.createSyncAccessHandle();

  // ファイルのサイズを得る
  const fileSize = accessHandle.getSize();
  // ファイルの内容をバッファーに読み込む
  const buffer = new DataView(new ArrayBuffer(fileSize));
  const readBuffer = accessHandle.read(buffer, { at: 0 });

  // メッセージをファイルの最後に書き込む
  const encoder = new TextEncoder();
  const encodedMessage = encoder.encode(message);
  const writeBuffer = accessHandle.write(encodedMessage, { at: readBuffer });

  // 変更をディスクに保存する
  accessHandle.flush();

  // 完了したら、いつも FileSystemSyncAccessHandle を閉じる
  accessHandle.close();
};
```

**メモ:** 仕様書の以前のバージョンでは、`close()`、`flush()`、`getSize()`、`truncate()` は人間工学に反して非同期メソッドとされていました。これは現在では変更されていますが、まだ非同期バージョンをサポートしているブラウザーもあります。

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemhandle |
| File System Standard # api-filesystemfilehandle |

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

### api.FileSystemHandle

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

### api.FileSystemFileHandle

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

関連情報
----

* The File System Access API: simplifying access to local files (web.dev)
* The origin private file system (web.dev)


CryptoKey - Web API

CryptoKey
=========

**`CryptoKey`** インターフェイスは、特定の鍵アルゴリズムによりもたらされる暗号鍵を表します。

`CryptoKey` オブジェクトは、`SubtleCrypto.generateKey()` または `SubtleCrypto.deriveKey()`、`SubtleCrypto.importKey()` を使用して取得できます。

プロパティ
-----

*このインターフェイスはどのプロパティも継承しません。*

`CryptoKey.type` (en-US)

鍵の種類と、(対称アルゴリズムでは) 秘密鍵、(非対称アルゴリズムでは) 公開鍵またはプライベートキーを表す列挙値を返します。

`CryptoKey.extractable` (en-US)

生の情報がアプリケーションにエクスポートされるかどうかを示す `Boolean` を返します。

`CryptoKey.algorithm` (en-US)

鍵が使用される特定の暗号法を表す透過オブジェクトを返します。

`CryptoKey.usages` (en-US)

どの用途で使用される鍵かを示す列挙値の配列を返します。

メソッド
----

*このインターフェイスはどのメソッドも定義または継承しません。*

仕様
--

| Specification |
| --- |
| Web Cryptography API # cryptokey-interface |

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

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

関連情報
----

* `Crypto` および `Crypto.subtle`。


ElementInternals - Web API

ElementInternals
================

**`ElementInternals`** は Document Object Model のインターフェイスで、カスタム要素を HTML フォームに完全に参加させる方法をウェブ開発者に提供します。標準的な HTML フォーム要素を扱うのと同じように、これらの要素を扱うためのユーティリティを提供し、 Accessibility Object Model も要素で使えるようにします。

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

このインターフェイスにはコンストラクターがありません。 `ElementInternals` オブジェクトは `HTMLElement.attachInternals()` を呼び出したときに返されます。

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

`ElementInternals.shadowRoot` (en-US) 読取専用

この要素に関連付けられた `ShadowRoot` オブジェクトを返します。

`ElementInternals.form` 読取専用

この要素に関連付けられた `HTMLFormElement` を返します。

`ElementInternals.states` (en-US) 読取専用
Experimental

この要素に関連付けられた `CustomStateSet` (en-US) を返します。

`ElementInternals.willValidate` (en-US) 読取専用

論理値で、要素が制約検証の候補である送信可能要素である場合に true を返します。

`ElementInternals.validity` (en-US) 読取専用

このオブジェクトは、制約検証に関して、その要素が取りうるさまざまな有効性の状態を表します。

`ElementInternals.validationMessage` (en-US) 読取専用

文字列で、この要素の検証メッセージが入ります。

`ElementInternals.labels` 読取専用

この要素に関連付けられているすべてのラベル要素の `NodeList` を返します。

### ARIA から取り込まれたインスタンスプロパティ

`ElementInternals` インターフェイスには以下のプロパティがあり、`ARIAMixin` ミックスインで定義されています。

**メモ:** これらは、カスタム要素に既定のアクセシビリティ上の意味を定義できるようにするために取り込まれています。これらは作者が定義した属性によって上書きされる可能性がありますが、作者が属性を削除したり追加しなかったりした場合でも、既定の意味が保持されるようにします。詳しくは、 Accessibility Object Model explainer を参照してください。

`ElementInternals.ariaAtomic` (en-US)

`aria-atomic` 属性を反映した文字列で、`aria-relevant` (en-US)属性で定義された変更通知に基づいて、支援技術が変更された領域のすべてを提示するか、一部のみを提示するかを示します。

`ElementInternals.ariaAutoComplete` (en-US)

`aria-autocomplete` 属性を反映した文字列で、テキスト入力が、コンボボックス、検索ボックス、またはテキストボックスに対するユーザーの意図する値の 1 つまたは複数の予測を表示するトリガーとなり得るかどうかを示し、予測が行われた場合にどのように表示されるかを指定します。

`ElementInternals.ariaBusy` (en-US)

`aria-busy` (en-US) 属性を反映した文字列で、要素が変更されているかどうかを示すもので、支援技術はユーザーに公開する前に変更が完了するまで待ちたい場合があります。

`ElementInternals.ariaChecked` (en-US)

`aria-checked` (en-US) 属性を反映した文字列で、チェックボックス、ラジオボタン、その他のチェック状態を持つウィジェットの現在の「チェックされた」状態を示します。

`ElementInternals.ariaColCount` (en-US)

`aria-colcount` (en-US) 属性を反映した文字列で、テーブル、グリッド、ツリーグリッドの列数を定義します。

`ElementInternals.ariaColIndex` (en-US)

`aria-colindex` (en-US) 属性を反映した文字列で、テーブル、グリッド、ツリーグリッド内の列の総数に対する要素の列インデックスまたは位置を定義します。

`ElementInternals.ariaColSpan` (en-US)

`aria-colspan` (en-US) 属性を反映した文字列で、テーブル、グリッド、ツリーグリッド内のセルやグリッドセルにまたがる列の数を定義します。

`ElementInternals.ariaCurrent` (en-US)

`aria-current` (en-US) 属性を反映した文字列で、コンテナーや関連する要素の集合の中で、現在のアイテムを表す要素を表します。

`ElementInternals.ariaDescription` (en-US)

`aria-description` (en-US) 属性を反映した文字列で、現在の ElementInternals を説明または注釈する文字列値を定義します。

`ElementInternals.ariaDisabled`

`aria-disabled` 属性を反映した文字列で、その要素が知覚可能であるが無効であり、編集やその他の操作ができないことを示します。

`ElementInternals.ariaExpanded` (en-US)

`aria-expanded` (en-US) 属性を反映した文字列で、この要素が所有または制御するグループ化要素が展開されているか、折りたたまれているかを示します。

`ElementInternals.ariaHasPopup` (en-US)

`aria-haspopup` (en-US) 属性を反映した文字列で、 ElementInternals によって起動される、メニューやダイアログのような操作可能なポップアップ要素の有無と種類を示します。

`ElementInternals.ariaHidden` (en-US)

`aria-hidden` (en-US) 属性を反映した文字列で、その要素がアクセシビリティ API に公開されているかどうかを示します。

`ElementInternals.ariaKeyShortcuts` (en-US)

`aria-keyshortcuts` (en-US) 属性を反映した文字列で、作者が ElementInternals をアクティブにしたりフォーカスを与えたりするために実装したキーボードショートカットを示します。

`ElementInternals.ariaLabel` (en-US)

`aria-label` (en-US) 属性を反映した文字列で、現在の ElementInternals にラベルを付ける文字列値を定義します。

`ElementInternals.ariaLevel` (en-US)

`aria-level` (en-US) 属性を反映した文字列で、構造内の要素の階層レベルを定義します。

`ElementInternals.ariaLive` (en-US)

`aria-live` (en-US) 属性を反映した文字列で、要素が更新されることを示し、ユーザエージェント、支援技術、ユーザーがライブ領域から期待できる更新の種類を記述します。

`ElementInternals.ariaModal` (en-US)

`aria-modal` (en-US) 属性を反映した文字列で、要素が表示されたときにモーダルであるかどうかを示します。

`ElementInternals.ariaMultiline` (en-US)

`aria-multiline` (en-US) 属性を反映した文字列で、テキストボックスが複数行の入力を受け付けるか、 1 行のみの入力を受け付けるかを示します。

`ElementInternals.ariaMultiSelectable` (en-US)

`aria-multiselectable` (en-US) 属性を反映した文字列で、ユーザーが現在の選択可能な子孫から複数のアイテムを選択できることを示します。

`ElementInternals.ariaOrientation` (en-US)

`aria-orientation` (en-US) 属性を反映した文字列で、要素の向きが水平であるか、垂直であるか、不明または曖昧であるかを示します。

`ElementInternals.ariaPlaceholder` (en-US)

`aria-placeholder` (en-US) 属性を反映した文字列で、コントロールに値がない場合に、ユーザーのデータ入力を補助するための短いヒントを定義します。

`ElementInternals.ariaPosInSet` (en-US)

`aria-posinset` (en-US) 属性を反映した文字列で、現在のリストアイテムまたはツリーアイテムの集合における要素の番号または位置を定義します。

`ElementInternals.ariaPressed` (en-US)

`aria-pressed` (en-US) 属性を反映した文字列で、トグルボタンの現在の「押されている」状態を示します。

`ElementInternals.ariaReadOnly` (en-US)

`aria-readonly` (en-US) 属性を反映した文字列で、その要素が編集可能ではないが、それ以外は操作可能であることを示します。

`ElementInternals.ariaRelevant` (en-US)
Non-standard

`aria-relevant` (en-US) 属性を反映した文字列で、ライブ領域内のアクセシビリティツリーが変更されたときに、ユーザーエージェントがどのような通知を行うかを示します。これは、 `aria-live` 領域内のどのような変更が関連性があり、通知されるべきかを記述するために使用されます。

`ElementInternals.ariaRequired` (en-US)

`aria-required` (en-US) 属性を反映した文字列で、これは、フォームを送信する前に、その要素でユーザー入力が必要であることを示します。

`ElementInternals.role` (en-US)

ARIA ロールを含む文字列です。 ARIA ロールの完全なリストは ARIA 技術のページにあります。

`ElementInternals.ariaRoleDescription` (en-US)

`aria-roledescription` (en-US) 属性を反映した文字列で、要素のロールのための、人間が読める、作者がローカライズした説明を定義します。

`ElementInternals.ariaRowCount` (en-US)

`aria-rowcount` (en-US) 属性を反映した文字列で、これは、テーブル、グリッド、ツリーグリッドの行の総数を定義します。

`ElementInternals.ariaRowIndex` (en-US)

`aria-rowindex` (en-US) 属性を反映した文字列で、テーブル、グリッド、ツリーグリッド内の行の総数に対する要素の行インデックスまたは位置を定義します。

`ElementInternals.ariaRowSpan` (en-US)

`aria-rowspan` (en-US) 属性を反映した文字列で、これは、テーブル、グリッド、ツリーグリッド内のセルまたはグリッドセルがまたがる行の数を定義します。

`ElementInternals.ariaSelected` (en-US)

`aria-selected` (en-US) 属性を反映した文字列で、選択状態を持つ要素の現在の「選択されている」状態を示します。

`ElementInternals.ariaSetSize` (en-US)

`aria-setsize` (en-US) 属性を反映した文字列で、現在のリストアイテムまたはツリーアイテムのセットに含まれるアイテムの数を定義します。

`ElementInternals.ariaSort` (en-US)

`aria-sort` (en-US) 属性を反映した文字列で、テーブルやグリッドのアイテムが昇順でソートされているか降順でソートされているかを示します。

`ElementInternals.ariaValueMax` (en-US)

`aria-valueMax` (en-US) 属性を反映した文字列で、これは範囲ウィジェットの最大許容値を定義します。

`ElementInternals.ariaValueMin` (en-US)

`aria-valueMin` (en-US) 属性を反映した文字列で、これは範囲ウィジェットの最小許容値を定義します。

`ElementInternals.ariaValueNow` (en-US)

`aria-valueNow` (en-US) 属性を反映した文字列で、範囲ウィジェットの現在値を定義します。

`ElementInternals.ariaValueText` (en-US)

`aria-valuetext` (en-US) 属性を反映した文字列で、 これは、範囲ウィジェットの aria-valuenow の代替となる人間が読めるテキストを定義します。

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

`ElementInternals.setFormValue()`

要素の送信値と状態を設定し、これらをユーザーエージェントに伝えます。

`ElementInternals.setValidity()`

要素の有効性を設定します。

`ElementInternals.checkValidity()`

要素が、制約検証ルールを満たしているかどうかをチェックします。

`ElementInternals.reportValidity()`

要素が制約検証ルールを満たしているかどうかをチェックし、ユーザエージェントに検証メッセージを送信します。

例
-

次の例は、カスタムフォーム関連要素を `HTMLElement.attachInternals` で作成する方法を示しています。

```js
class CustomCheckbox extends HTMLElement {
  static formAssociated = true;

  constructor() {
    super();
    this.internals_ = this.attachInternals();
  }

  // …
}

window.customElements.define("custom-checkbox", CustomCheckbox);

let element = document.createElement("custom-checkbox");
let form = document.createElement("form");

// フォームに要素を追加して関連付ける
form.appendChild(element);

console.log(element.internals_.form);
// expected output: <form><custom-checkbox></custom-checkbox></form>
```

仕様書
---

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

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

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

関連情報
----

* More capable form controls
* Creating custom form controls with ElementInternals
* ElementInternals polyfill


PushEvent - Web API

PushEvent
=========

**`PushEvent`** はプッシュ API のインターフェイスで、受け取ったプッシュメッセージを表します。このイベントは、`ServiceWorker` の グローバルスコープに送信されます。これは、アプリケーションサーバーから `PushSubscription` に送信された情報を含みます。

Event

ExtendableEvent

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

`PushEvent()`

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

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

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

`PushEvent.data` 読取専用

`PushSubscription` に送信されたデータを含む `PushMessageData` オブジェクトへの参照を返します。

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

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

例
-

次の例は、`PushEvent` からデータを取得して、すべてのサービスワーカークライアントで表示しています。

```js
self.addEventListener("push", (event) => {
  if (!(self.Notification && self.Notification.permission === "granted")) {
    return;
  }

  const data = event.data?.json() ?? {};
  const title = data.title || "Something Has Happened";
  const message =
    data.message || "Here's something you might want to check out.";
  const icon = "images/new-notification.png";

  const notification = new self.Notification(title, {
    body: message,
    tag: "simple-push-demo-notification",
    icon,
  });

  notification.addEventListener("click", () => {
    clients.openWindow(
      "https://example.blog.com/2015/03/04/something-new.html",
    );
  });
});
```

仕様書
---

| Specification |
| --- |
| Push API # pushevent-interface |

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

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

関連項目
----

* プッシュ API
* サービスワーカー API


PublicKeyCredential - Web API

PublicKeyCredential
===================

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

**`PublicKeyCredential`** インターフェイスは、パスワードの代わりにフィッシングやデータ消去に耐性のある非対称の鍵ペアを使用してサービスにログインするための資格情報である、公開鍵と秘密鍵のペアについての情報を提供します。これは `Credential` を継承しており、ウェブ認証 API が資格情報管理 API へ拡張された際に作成されました。 `Credential` を継承している他のインターフェイスとしては、 `PasswordCredential` (en-US) や `FederatedCredential` があります。

Credential

PublicKeyCredential

**メモ:** このインターフェイスは最上位のコンテキストに限定されています。 `<iframe>` 要素の中で使用しても、何も効果がありません。

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

`PublicKeyCredential.type` 読取専用  安全なコンテキスト用

`Credential` から継承しています。 `PublicKeyCredential` インスタンスの場合は、常に `public-key` に設定されています。

`PublicKeyCredential.id` 読取専用  安全なコンテキスト用

`Credential` から継承しており、 `PublicKeyCredential.rawId` の base64url 符号化になるようオーバーライドしています。

`PublicKeyCredential.rawId` 読取専用  安全なコンテキスト用

`ArrayBuffer` で、この `PublicKeyCredential` のグローバルに固有な識別子を保持します。この識別子は今後の `CredentialsContainer.get` (en-US) の呼び出しにおいて、資格情報を検索するのに使用することができます。

`PublicKeyCredential.response` 読取専用  安全なコンテキスト用

`AuthenticatorResponse` オブジェクトのインスタンスです。これは `PublicKeyCredential` が `navigator.credentials.create()` の呼び出しの結果だった場合であった場合は `AuthenticatorAttestationResponse` 型に、 `PublicKeyCredential` が `navigator.credentials.get()` (en-US) の呼び出しの結果であった場合は `AuthenticatorAssertionResponse` 型になります。

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

`PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable()` 安全なコンテキスト用

静的メソッドで、認証機器が所属するプラットフォームがユーザーを*検証*する能力を持っているならば `true` で解決する `Promise` を返します。

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

`PublicKeyCredential.getClientExtensionResults()` 安全なコンテキスト用

何らかの拡張機能がリクエストされた場合、このメソッドはその拡張機能が処理した結果を返します。

例
-

### PublicKeyCredential の新しいインスタンスを生成

ここでは、 `navigator.credentials.create()` を用いて新しい資格情報を生成します。

```js
const publicKey = {
  challenge: new Uint8Array([
    21, 31, 105 /\* 29 more random bytes generated by the server \*/,
  ]),
  rp: {
    name: "Example CORP",
    id: "login.example.com",
  },
  user: {
    id: new Uint8Array(16),
    name: "canand@example.com",
    displayName: "Carina Anand",
  },
  pubKeyCredParams: [
    {
      type: "public-key",
      alg: -7,
    },
  ],
};

navigator.credentials
  .create({ publicKey })
  .then((newCredentialInfo) => {
    const response = newCredentialInfo.response;
    const clientExtensionsResults =
      newCredentialInfo.getClientExtensionResults();
  })
  .catch((err) => {
    console.error(err);
  });
```

### PublicKeyCredential の既存のインスタンスを取得

ここでは、 `navigator.credentials.get()` (en-US) を用いて認証機器から既存の資格情報を読み取ります。

```js
const options = {
  challenge: new Uint8Array([
    /\* bytes sent from the server \*/
  ]),
};

navigator.credentials
  .get({ publicKey: options })
  .then((credentialInfoAssertion) => {
    // send assertion response back to the server
    // to proceed with the control of the credential
  })
  .catch((err) => {
    console.error(err);
  });
```

仕様書
---

| Specification |
| --- |
| Web Authentication: An API for accessing Public Key Credentials - Level 3 # iface-pkcredential |

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

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

関連情報
----

* 親インターフェイスの `Credential`


FileList - Web API

FileList
========

この型のオブジェクトは、 HTML の `<input>` 要素の `files` プロパティで返されます。これにより、 `<input type="file">` 要素で選択されているファイルのリストにアクセスすることができます。また、ドラッグ＆ドロップ API を使用している場合は、ウェブコンテンツにドロップされたファイルのリストにも使用されます。使用方法の詳細は `DataTransfer` オブジェクトを見てください。

**メモ:** Gecko 1.9.2 より前は、input 要素は一度に 1 つのファイルだけ選択することができます。すなわち、 FileList に入るファイルは 1 つだけです。 Gecko 1.9.2 から、 input 要素の multiple 属性が true の場合、 FileList に複数のファイルが入ります。

ファイルリストの使用
----------

すべての `<input>` 要素のノードには `files` 属性があり、これが `FileList` 型なので、リスト中の項目にアクセスすることができます。例えば、HTML に以下のファイル入力があるとします。

```html
<input id="fileItem" type="file" />
```

次のコードの行は、ノードのファイルリスト内の最初のファイルを `File` オブジェクトとして取得します。

```js
var file = document.getElementById("fileItem").files[0];
```

メソッドの概要
-------

|  |
| --- |
| `File item(index);` |

プロパティ
-----

|  |  |  |
| --- | --- | --- |
| 属性 | 型 | 説明 |
| `length` | `integer` | 読み取り専用で、リスト内のファイル数を示します。 |

メソッド
----

### item()

ファイルリスト内の指定された位置にあるファイルを表す `File` オブジェクトを返します。
```

File item(
  index
);
```

#### 引数

`index`

リストから受け取るファイルの 0 から始まる位置です。

#### 返値

要求されたファイルを表す `File` です。

例
-

この例では、`input` 要素を使用してユーザーが選択したすべてのファイルを反復処理します。

```js
// fileInput は HTML の input 要素 <input type="file" id="myfileinput" multiple> です。
var fileInput = document.getElementById("myfileinput");

// files は FileList オブジェクトです (NodeList と同様)
var files = fileInput.files;
var file;

// files を反復処理
for (var i = 0; i < files.length; i++) {
  // get item
  file = files.item(i);
  //or
  file = files[i];

  alert(file.name);
}
```

こちらが完全な例です。

```html
<!doctype html>
<html>
  <head> </head>
  <body>
    <!-- multiple を設定して、複数のファイルが選択できるようにしています -->

    <input id="myfiles" multiple type="file" />
  </body>

  <script>
 var pullfiles = function () {
 // querySelector が好き
 var fileInput = document.querySelector("#myfiles");
 var files = fileInput.files;
 // files.length をキャッシュ
 var fl = files.length;
 var i = 0;

 while (i < fl) {
 // ループ内のファイル var をローカライズ
 var file = files[i];
 alert(file.name);
 i++;
 }
 };

 // input 要素の onchange を設定し pullfiles を呼び出すようにします。
 document.querySelector("#myfiles").onchange = pullfiles;

 //a.t
 </script>
</html>
```

仕様書
---

| Specification |
| --- |
| File API # filelist-section |
| HTML Standard # dom-input-files-dev |

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

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

関連情報
----

* ウェブアプリケーションからのファイルの使用
* `File`
* `FileReader`


MediaStreamAudioDestinationNode - Web API

MediaStreamAudioDestinationNode
===============================

`MediaStreamAudioDestinationNode` インターフェイスは、単一の `AudioMediaStreamTrack` を持つ WebRTC `MediaStream` からなる音声の出力先を表します。これは、`navigator.mediaDevices.getUserMedia()` で取得した `MediaStream` と同様に用いることができます。

これは音声の出力先としてふるまう `AudioNode` であり、`AudioContext.createMediaStreamDestination()` メソッドで生成できます。

EventTarget

AudioNode

MediaStreamAudioDestinationNode

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

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

`MediaStreamAudioDestinationNode()`

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

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

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

`MediaStreamAudioDestinationNode.stream`

`kind` が `audio` であり、ノードと同じ数のチャンネルを持つ単一の `MediaStreamTrack` からなる `MediaStream` です。このプロパティを用いて、ストリームを音声グラフから取り出し、Media Recorder などの他の構築に供給できます。

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

*親の `AudioNode` からメソッドを継承します。*

例
-

`AudioContext.createMediaStreamDestination()` に、`MediaStreamAudioDestinationNode` を生成し、それを録音する音声の音源として用いるサンプルコードがあります。

仕様書
---

| Specification |
| --- |
| Web Audio API # MediaStreamAudioDestinationNode |

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

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

関連情報
----

* Web Audio API の使用


BackgroundFetchRegistration - Web API

BackgroundFetchRegistration
===========================

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

Background Fetch API の **`BackgroundFetchRegistration`** インターフェイスは個々のバックグラウンドフェッチを表します。

`BackgroundFetchRegistration` インスタンスは、`BackgroundFetchManager.fetch()` メソッド、または `BackgroundFetchManager.get()` メソッドによって返されるため、コンストラクターは存在しません。

EventTarget

BackgroundFetchRegistrationプロパティ
-----

以下のプロパティは、`BackgroundFetchRegistration` インスタンスからコピーされた便利なプロパティとして、同期的に利用できます。

`BackgroundFetchRegistration.id` 読取専用
Experimental

バックグラウンドフェッチのIDを示す文字列。

`BackgroundFetchRegistration.uploadTotal` 読取専用
Experimental

アップロードされる総バイト数を表す `number`。

`BackgroundFetchRegistration.uploaded` 読取専用
Experimental

送信に成功したバイト数を表す `number`。初期値は `0`。

`BackgroundFetchRegistration.downloadTotal` 読取専用
Experimental

ダウンロード全体のバイト数を表す `number`。これはバックグラウンドフェッチの登録時に設定される値です。設定されなかった場合は `0` となります。

`BackgroundFetchRegistration.downloaded` 読取専用
Experimental

今までにダウンロードされたバイト数を表す `number`。初期値は `0`。

`BackgroundFetchRegistration.result` 読取専用
Experimental

初期状態では空文字列。完了時には `"success"` または `"failure"` という文字列。

`BackgroundFetchRegistration.failureReason` 読取専用
Experimental

下記文字列のいずれかの値をとります。

`""`

バックグラウンドフェッチが完了していない、もしくは成功したとき。

`"aborted"`

ユーザーによって操作がキャンセルされたとき、または `abort()` が呼び出されたとき。

`"bad-status"`

応答ステータスが OK ではないとき ( 200 ~ 299 の範囲外のとき)

`"fetch-error"`

その他の理由によりフェッチが失敗したとき。例えば、CORS 違反や、ネットワーク障害が理由の場合です。

`"quota-exceeded"`

途中でストレージ容量の上限に達したとき。

`"download-total-exceeded"`

バックグラウンドフェッチの登録時に指定された `downloadTotal` を超過したとき。

`BackgroundFetchRegistration.recordsAvailable` 読取専用
Experimental

`recordsAvailable` フラグが設定されているかどうかを表す `boolean`。

メソッド
----

`BackgroundFetchRegistration.abort()`
Experimental

バックグラウンドフェッチを中止します。フェッチの中止が成功したときに `true` で解決される `Promise` を返します。

`BackgroundFetchRegistration.match()`
Experimental

引数に対して最初にマッチした `BackgroundFetchRecord` オブジェクトを 1 つ返します。

`BackgroundFetchRegistration.matchAll()`
Experimental

リクエストと応答を含む `BackgroundFetchRecord` オブジェクトの配列で解決される `Promise` を返します。

イベント
----

`addEventListener()` を用いて、または、このインターフェイスの `oneventname` プロパティにイベントリスナーを割り当てて、これらイベントの発生を待ち受けてください。

`progress`
Experimental

 次のプロパティのいずれかに変化があったとき、発火されます。:
 `uploaded` 、
 `downloaded` 、
 `result` または
 `failureReason` 。

例
-

以下のコードは、`"my-fetch"` という `id` を持つ `BackGroundFetchRegistration` を `bgFetch` として作成しています。

```js
navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.fetch(
    "my-fetch",
    ["/ep-5.mp3", "ep-5-artwork.jpg"],
    {
      title: "Episode 5: Interesting things.",
      icons: [
        {
          sizes: "300x300",
          src: "/ep-5-icon.png",
          type: "image/png",
        },
      ],
      downloadTotal: 60 \* 1024 \* 1024,
    },
  );
});
```

`id` をコンソールにログ出力すると、`"my-fetch"` が出力されます。

```js
console.log(bgFetch.id); // "my-fetch"
```

`match()` メソッドを使って、registration の要素である `BackgroundFetchRecord` から特定の 1 つを探すことができます。

```js
bgFetch.match("/ep-5.mp3").then(async (record) => {
  if (!record) {
    console.log("レコードは見つかりませんでした。");
    return;
  }

  console.log(`リクエスト： `, record.request);
  const response = await record.responseReady;
  console.log(`応答： `, response);
});
```

仕様書
---

| Specification |
| --- |
| Background Fetch # background-fetch-registration |

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

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


PushSubscription - Web API

PushSubscription
================

`PushSubscription` はプッシュ API のインターフェイスで、サブスクリプションの URL エンドポイントを提供し、ここからプッシュサービスの登録を脱退できます。

このインターフェイスのインスタンスはシリアライズできます。

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

`PushSubscription.endpoint` 読取専用

文字列で、このプッシュサブスクリプションに関連づけられたエンドポイントが入ります。

`PushSubscription.expirationTime` 読取専用

`DOMHighResTimeStamp` で、存在すれば、プッシュサブスクリプションに関連付いたサブスクリプションの期限です。存在しない場合は `null` です。

`PushSubscription.options` 読取専用

サブスクリプションを作成するために用いられるオプションを含むオブジェクト。

`PushSubscription.subscriptionId`
非推奨
 読取専用

文字列で、このプッシュサブスクリプションに関連したサブスクリプション ID が入ります。

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

`PushSubscription.getKey()`

サーバーに送信されてプッシュメッセージの暗号化に使用される、クライアントの公開鍵を含む `ArrayBuffer` を返します。

`PushSubscription.toJSON()`

標準シリアライザーです。サブスクリプションプロパティの JSON 記法を返します。

`PushSubscription.unsubscribe()`

プッシュサービスのサブスクリプションを脱退する非同期プロセスを開始します。現在のサブスクリプションが成功裏に脱退できた場合、論理値で解決される `Promise` を返します。

例
-

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

仕様書
---

| Specification |
| --- |
| Push API # pushsubscription-interface |

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

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

関連項目
----

* プッシュ API
* サービスワーカー API


パフォーマンス API - Web API

パフォーマンス API
===========

パフォーマンス API は、ウェブアプリケーションのパフォーマンスを測定するために使用される一連の規格です。

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

ウェブアプリケーションを高速に動作させるためには、さまざまなパフォーマンス指標を測定・分析することが重要です。パフォーマンス API は、重要な組み込み指標と、ブラウザーのパフォーマンスタイムラインに自分自身で測定値を追加する機能を提供します。パフォーマンスタイムラインには高精度のタイムスタンプが含まれ、開発者ツールで表示することができます。また、このデータを分析エンドポイントに送信して、パフォーマンス指標を時刻とともに記録することもできます。

それぞれのパフォーマンス指標は単一の `PerformanceEntry` で表されます。パフォーマンス項目には `name`, `duration`, `startTime`, そして `type` があります。すべてのパフォーマンス指標は `PerformanceEntry` インターフェイスを拡張し、さらにそれを修飾しています。

パフォーマンス項目のほとんどは、何もしなくても記録され、`Performance.getEntries()` または `PerformanceObserver` からアクセスできます。例えば、 `PerformanceEventTiming` (en-US) の項目は、設定された閾値より時間がかかるイベントに対して記録されます。しかし、パフォーマンス API では `PerformanceMark` や `PerformanceMeasure` インターフェイスを使用して、自分自身でカスタムイベントを定義したり記録したりすることも可能です。

主となる `Performance` インターフェイスは `self.performance` を使用して各グローバルで使用でき、独自のパフォーマンス項目を追加したり、パフォーマンス項目をクリアしたり、パフォーマンス項目を取得したりすることが可能です。

このインターフェイスでは、さまざまな種類のパフォーマンス項目が記録されるときに、それを待ち受けするために使用することができます。

![パフォーマンス API の UML 図](/ja/docs/Web/API/Performance_API/diagram.svg)

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

`EventCounts` (en-US)

`performance.eventCounts` (en-US) によって返される、イベント種別毎に発送されたイベント数を保持する読み取り専用のマップです。

`LargestContentfulPaint` (en-US)

ビューポート内に表示される最大の画像またはテキストブロックのレンダリング時間を、ページの最初の読み込みを開始した時点から記録して測定します。

`Performance`

パフォーマンス測定にアクセスするためのメインインターフェイスです。ウィンドウとワーカーのコンテキストで `self.performance` を使用することで利用することができます。

`PerformanceElementTiming`

特定の要素のレンダリングタイムスタンプを測定します。

`PerformanceEntry`

単一のパフォーマンス指標をカプセル化したパフォーマンスタイムライン上の項目です。すべてのパフォーマンス指標はこのインターフェイスを継承します。

`PerformanceEventTiming` (en-US)

イベントの遅延時間、最初の入力遅延 (FID) を測定します。

`PerformanceLongTaskTiming`

レンダリングを占有し、他のタスクの実行を妨害する長時間のタスクを検出します。

`PerformanceMark`

パフォーマンスタイムライン上に自分自身で記入するためのカスタムマーカー。

`PerformanceMeasure`

2 つのパフォーマンス項目間の時刻をカスタム測定します。

`PerformanceNavigationTiming`

文書を読み込むのにかかる時間など、文書内のナビゲーションイベントを測定します。

`PerformanceObserver`

パフォーマンスタイムラインに記録される新しいパフォーマンス項目を待ち受けします。

`PerformanceObserverEntryList`

パフォーマンスオブザーバーで観測された項目のリスト。

`PerformancePaintTiming`

ウェブページ構築時のレンダリング処理を測定します。

`PerformanceResourceTiming`

画像、スクリプト、フェッチ呼び出しなどのリソースのリダイレクト開始・終了時刻、フェッチ開始時刻、 DNS ルックアップ開始・終了時刻、レスポンス開始・終了時刻などのネットワーク負荷の指標を測定します。

`PerformanceServerTiming` (en-US)

HTTP の `Server-Timing` ヘッダーのレスポンスで送られてくるサーバー指標を示します。

`TaskAttributionTiming`

タスクの種類と、長時間のタスクを担当するコンテナーを特定します。

ガイドとチュートリアル
-----------

* パフォーマンス API の使用
* パフォーマンスタイムラインの使用
* ユーザータイミング API の使用 (en-US)
* ナビゲーションタイミング API の使用 (en-US)
* リソースタイミング API の使用
仕様書
---

| Specification |
| --- |
| Element Timing API  |
| Event Timing API  |
| High Resolution Time  |
| Largest Contentful Paint  |
| Layout Instability  |
| Long Tasks API  |
| Navigation Timing Level 2  |
| Paint Timing  |
| Performance Timeline  |
| Resource Timing  |
| Server Timing  |
| User Timing  |

関連情報
----

* ウェブパフォーマンス
* 学習: ウェブパフォーマンス


ProgressEvent - Web API

ProgressEvent
=============

**`ProgressEvent`** インターフェイスは、プロセスの進捗、例えば HTTP リクエスト（`XMLHttpRequest`、または `<img>`, `<audio>`, `<video>`, `<style>`, `<link>` のような基本的なリソースの読み込み）などを計測するイベントを表します。

Event

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

`ProgressEvent()`

指定した引数で `ProgressEvent` イベントを作成します。

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

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

`ProgressEvent.lengthComputable` 読取専用

論理値のフラグで、基礎となるプロセスで行われる作業の合計と、既に行われた作業の量が計算可能かどうかを示します。言い換えれば、進捗が測定可能かどうかを示します。

`ProgressEvent.loaded` 読取専用

64 ビット符号なし整数値で、基礎となるプロセスで既に実行された作業の量を示す。行われた作業の比率は、 `total` でこのプロパティの値を割ることで計算できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

`ProgressEvent.total` 読取専用

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表す。 HTTP でリソースをダウンロードする場合、これは `Content-Length` （メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。

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

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

例
-

以下の例は `ProgressEvent` を新しい `XMLHTTPRequest` に追加し、リクエストの状態を表示するために使用します。

```js
const progressBar = document.getElementById("p"),
  client = new XMLHttpRequest();
client.open("GET", "magical-unicorns");
client.onprogress = (pe) => {
  if (pe.lengthComputable) {
    progressBar.max = pe.total;
    progressBar.value = pe.loaded;
  }
};
client.onloadend = (pe) => {
  progressBar.value = pe.loaded;
};
client.send();
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # interface-progressevent |

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

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

関連情報
----

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


StaticRange - Web API

StaticRange
===========

DOM の **`StaticRange`** インターフェイスは `AbstractRange` を拡張し、 DOM ツリー内で発生した変更を反映しない、 DOM 内のコンテンツの範囲を指定するメソッドを提供します。

このインターフェイスは `AbstractRange` と同じプロパティとメソッドの集合を提供します。

`AbstractRange` と `StaticRange` はウェブワーカーからは利用できません。

AbstractRange

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

`StaticRange()`

プロパティの既定値を指定したオブジェクトを指定して、新しい `StaticRange` オブジェクトを作成します。

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

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

`StaticRange.collapsed` 読取専用

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

`endContainer` 読取専用

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

`StaticRange.endOffset` 読取専用

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

`StaticRange.startContainer` 読取専用

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

`StaticRange.startOffset` 読取専用

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

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

DOM 範囲は文書内のコンテンツの範囲を指定します。あるノード（または要素）の内部で始まり、別のノード（または要素）の内部で終わる可能性があります。 `Range` とは異なり、 `StaticRange` はその時点で固定された範囲を表します。文書が変更されても、変更されずに同じ範囲を維持しようとします。DOM に何らかの変更が加えられた場合、 `StaticRange` で指定した範囲に格納する実際のデータは変更される可能性があります。これにより、ユーザーエージェントは、ウェブアプリケーションやウェブサイトがライブ更新される範囲を必要としない場合、不必要な多くの作業を避けることができます。

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-staticrange |

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

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

関連情報
----

* ライブで更新される DOM 内のコンテンツ範囲: `Range`
* `AbstractRange`: すべての範囲が派生する抽象インターフェイス


AmbientLightSensor - Web API

AmbientLightSensor
==================

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

Sensor APIs の **`AmbientLightSensor`** インターフェイスは、現在の光レベル、すなわちホストデバイス周辺の環境光の照度を返します。

このセンサーを使用するには、ユーザーが Permissions API により `'ambient-light-sensor'` デバイスセンサーを使用する許可を与える必要があります。

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

EventTarget

Sensor

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

`AmbientLightSensor()`
Experimental

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

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

`AmbientLightSensor.illuminance`
Experimental

ホストデバイス周辺の環境光のルクス単位のレベルを、現在の光レベルとして返します。

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

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

イベント
----

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

例
-

```js
if ("AmbientLightSensor" in window) {
  const sensor = new AmbientLightSensor();
  sensor.addEventListener("reading", (event) => {
    console.log("現在の光レベル:", sensor.illuminance);
  });
  sensor.addEventListener("error", (event) => {
    console.log(event.error.name, event.error.message);
  });
  sensor.start();
}
```

仕様書
---

| Specification |
| --- |
| Ambient Light Sensor # ambient-light-sensor-interface |

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

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


AuthenticatorResponse - Web API

AuthenticatorResponse
=====================

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

**`AuthenticatorResponse`** は Web Authentication API のインターフェイスで、キーペアを信頼する暗号化ルートを提供するインターフェイスの基本インターフェイスです。子インターフェイスでは、チャレンジのオリジンなどのブラウザーからの情報を含み、 `PublicKeyCredential.response` から返されることがあります。

AuthenticatorResponse に基づくインターフェイス
----------------------------------

以下のインターフェイスは AuthenticatorResponse インターフェイスに基づいています。

* `AuthenticatorAssertionResponse`
* `AuthenticatorAttestationResponse`
プロパティ
-----

`AuthenticatorResponse.clientDataJSON` (en-US)

JSON 文字列が入った `ArrayBuffer` で、 `CredentialsContainer.create()` または `CredentialsContainer.get()` (en-US) に渡されたクライアントデータを表します。

メソッド
----

なし。

例
-

### AuthenticatorAssertionResponse の取得

```js
var options = {
  challenge: new Uint8Array([
    /\* bytes sent from the server \*/
  ]),
};

navigator.credentials
  .get({ publicKey: options })
  .then(function (credentialInfoAssertion) {
    var assertionResponse = credentialInfoAssertion.response;
    // send assertion response back to the server
    // to proceed with the control of the credential
  })
  .catch(function (err) {
    console.error(err);
  });
```

### AuthenticatorAttestationResponse の取得

```js
var publicKey = {
  challenge: /\* from the server \*/,
  rp: {
    name: "Example CORP",
    id  : "login.example.com"
  },
  user: {
    id: new Uint8Array(16),
    name: "jdoe@example.com",
    displayName: "John Doe"
  },
  pubKeyCredParams: [
    {
      type: "public-key",
      alg: -7
    }
  ]
};

navigator.credentials.create({ publicKey })
  .then(function (newCredentialInfo) {
    var attestationResponse = newCredentialInfo.response;
  }).catch(function (err) {
     console.error(err);
  });
```

仕様書
---

| Specification |
| --- |
| Web Authentication: An API for accessing Public Key Credentials - Level 3 # authenticatorresponse |

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

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

関連情報
----

* `AuthenticatorAttestationResponse`
* `AuthenticatorAssertionResponse`
* `PublicKeyCredential.response`


BluetoothRemoteGATTCharacteristic - Web API

BluetoothRemoteGATTCharacteristic
=================================

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

Web Bluetooth API の `BluetoothRemoteGattCharacteristic` インターフェイスは、GATT キャラクタリスティックを表します。これは、周辺機器のサービスに関する詳細情報を提供する基本的なデータ要素です。

EventTarget

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

`BluetoothRemoteGATTCharacteristic.service` 読取専用
Experimental

このキャラクタリスティックが属する `BluetoothRemoteGATTService` を返します。

`BluetoothRemoteGATTCharacteristic.uuid` 読取専用
Experimental

このキャラクタリスティックの UUID を表す文字列を返します。たとえば、Heart Rate Measurement characteristic は `'00002a37-0000-1000-8000-00805f9b34fb'` です。

`BluetoothRemoteGATTCharacteristic.properties` 読取専用
Experimental

このキャラクタリスティックのプロパティを返します。

`BluetoothRemoteGATTCharacteristic.value` 読取専用
Experimental

現在キャッシュされているキャラクタリスティックの値です。この値は、キャラクタリスティックの値が読まれるか、ノーティフィケーションやインディケーションによって更新されると更新されます。

### イベント

`oncharacteristicvaluechanged`
Experimental

`characteristicvaluechanged` イベント用のイベントハンドラーです。

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

`BluetoothRemoteGATTCharacteristic.getDescriptor()`
Experimental

指定のディスクリプター UUID に対応する最初の `BluetoothRemoteGATTDescriptor` で解決する `Promise` を返します。

`BluetoothRemoteGATTCharacteristic.getDescriptors()`
Experimental

指定のディスクリプター UUID に対応するすべての `BluetoothRemoteGATTDescriptor` オブジェクトの `Array` で解決する `Promise` を返します。

`BluetoothRemoteGATTCharacteristic.readValue()`
Experimental

利用可能で対応していれば、`value` プロパティの複製が格納された `DataView` で解決する `Promise` を返します。そうでない場合は、エラーを投げます。

`BluetoothRemoteGATTCharacteristic.writeValue(value)`
非推奨

`value` プロパティを渡された `ArrayBuffer` に格納されたバイト列に設定し、`WriteCharacteristicValue`(*this*=`this`, *value=value*, *response*=`"optional"`) を呼び出し、結果の `Promise` を返します。

`BluetoothRemoteGATTCharacteristic.writeValueWithResponse(value)`
Experimental

`value` プロパティを渡された `ArrayBuffer` に格納されたバイト列に設定し、`WriteCharacteristicValue`(*this*=`this`, *value=value*, *response*=`"required"`) を呼び出し、結果の `Promise` を返します。

`BluetoothRemoteGATTCharacteristic.writeValueWithoutResponse(value)`
Experimental

`value` プロパティを渡された `ArrayBuffer` に格納されたバイト列に設定し、`WriteCharacteristicValue`(*this*=`this`, *value=value*, *response*=`"never"`) を呼び出し、結果の `Promise` を返します。

`BluetoothRemoteGATTCharacteristic.startNotifications()`
Experimental

`navigator.bluetooth` が活動中のノーティフィケーションコンテキストに追加されたら解決する `Promise` を返します。

`BluetoothRemoteGATTCharacteristic.stopNotifications()`
Experimental

`navigator.bluetooth` が活動中のノーティフィケーションコンテキストから削除されたら解決する `Promise` を返します。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # bluetoothgattcharacteristic-interface |

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

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


PerformancePaintTiming - Web API

PerformancePaintTiming
======================

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

Paint Timing の **`PerformancePaintTiming`** インタフェースは、Web ページ構築中の "paint" ("render" とも呼ばれる) 操作に関するタイミング情報を提供します。「ペイント」とは、レンダリングツリーを画面上のピクセルに変換することです。

アプリケーションは、"`paint`" `パフォーマンスエントリタイプ` に対して `PerformanceObserver` を登録することができ、オブザーバーはペイントイベントが発生した時間を取得することができます。この情報を使用して、優れたユーザーエクスペリエンスを提供するのに時間がかかりすぎる領域を特定するのに役立ちます。

PerformanceEntry

PerformancePaintTimingプロパティ
-----

このインタフェースにはプロパティはありませんが、次のようにプロパティを修飾および制約することで、次の `PerformanceEntry` プロパティ ("`paint`"`パフォーマンスエントリタイプ` 用) を拡張します。

`PerformanceEntry.entryType`

"`paint`" を返します。

`PerformanceEntry.name`

`"first-paint"` または `"first-contentful-paint"` を返します。

`PerformanceEntry.startTime`

描画が行われたときに `タイムスタンプ` を返します。

`PerformanceEntry.duration`

0 を返します。

メソッド
----

このインターフェイスにはメソッドがありません。

例
-

```js
function showPaintTimings() {
  if (window.performance) {
    let performance = window.performance;
    let performanceEntries = performance.getEntriesByType("paint");
    performanceEntries.forEach((performanceEntry, i, entries) => {
      console.log(
        "The time to " +
          performanceEntry.name +
          " was " +
          performanceEntry.startTime +
          " milliseconds.",
      );
    });
  } else {
    console.log("Performance timing isn't supported.");
  }
}
```

上記のコードは、次のようなコンソール出力を生成します。
```

The time to first-paint was 2785.915 milliseconds.
The time to first-contentful-paint was 2787.460 milliseconds.
```

仕様書
---

| Specification |
| --- |
| Paint Timing # sec-PerformancePaintTiming |

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

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


HTMLScriptElement - Web API

HTMLScriptElement
=================

HTML の `<script>` 要素は **`HTMLScriptElement`** インターフェイスを公開しています。これは（通常の `HTMLElement` から継承によって利用できるものに加えて） `<script>` 要素の動作や実行を操作するための特別なプロパティやメソッドを提供します。

JavaScript ファイルは `application/javascript` の MIME タイプで提供されますが、 しかし、ブラウザーは寛大で、スクリプトが画像型 (`image/*`)、動画型 (`video/*`)、音声型 (`audio/*`)、または `text/csv` で提供されている場合のみブロックされます。スクリプトがブロックされた場合、その要素は `error` イベントを受け取ります。それ以外の場合は、`load` イベントを受け取ります。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLScriptElement.type`

文字列で、スクリプトの MIME タイプを表します。これは `type` 属性を反映します。

`HTMLScriptElement.src`

文字列で、外部スクリプトの URL を表します。これは `src` 属性を反映します。

`HTMLScriptElement.event`
非推奨

文字列です。 HTML 文書で要素にイベントハンドラーを設定するための廃止された方法です。

`HTMLScriptElement.charset`
非推奨

文字列で、外部スクリプトの文字エンコーディングを表します。これは `charset` 属性を反映します。

`HTMLScriptElement.async`, `HTMLScriptElement.defer`

`async` および `defer` 属性は論理属性で、スクリプトの実行方法を制御します。 **`defer` および `async` 属性は、`src` 属性がないときには指定しないでください。**

取りうる実行モードは 3 種類あります。

1. `async` 属性が存在した場合、スクリプトはダウンロードされ次第、非同期に実行されます。
2. `async` 属性がなく `defer` 属性が存在した場合、スクリプトはページの解釈の終了時に実行されます。
3. どちらの属性もなかった場合、スクリプトは直ちに読み取られて実行され、ページの解釈はブロックされます。

`defer` 属性は `async` 属性と共に指定することができます。 `defer` のみに対応している（そして `async` には対応していない）ブラウザーでは、既定のブロックが発生する動作の代わりに `defer` で代替することができます。

**メモ:** これらの属性における正確な処理の詳細は、 HTML の多くの異なる側面を含むため複雑であり、そのため仕様全体に散らばっています。これらのアルゴリズムは、核となる考えを記述していますが、 `<script>` の開始および終了タグの HTML、外部コンテンツ、XMLにおける解釈ルール、 `document.write()` メソッドのルール、スクリプティングの扱い、などによります。

`HTMLScriptElement.crossOrigin` (en-US)

文字列で、 script 要素の CORS 設定 を反映します。他のオリジンのスクリプトについては、エラー情報が公開されるかどうかを制御します。

`HTMLScriptElement.text`

この `<script>` 要素の中にあるすべての `Text` ノード（コメントなどの他のノードを除く）の内容をツリー順で連結した文字列です。設定すると、 `textContent` IDL 属性と同様に動作します。

**メモ:** `document.write()` メソッドで挿入された場合、 `<script>` 要素は（ふつう同期的に）実行されますが、 `innerHTML` または `outerHTML` を使用して挿入された場合は実行されません。

`HTMLScriptElement.fetchPriority`
Experimental

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

`HTMLScriptElement.noModule`

論理値で、 true ならば ES モジュールに対応したブラウザーにおいてスクリプトの実行を停止します。 — JavaScript モジュールに対応して*いない*古いブラウザーで代替スクリプトを実行するために使用します。

`HTMLScriptElement.referrerPolicy`

文字列で、 HTML 属性 `referrerPolicy` を反映し、スクリプトを取得する際、そのスクリプトの取得が完了した時にどのリファラーを使用するかを示します。

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

`HTMLScriptElement.supports_static`

 ブラウザーが指定された種類のスクリプトに対応している場合は `true` を、それ以外の場合は `false` を返します。
 このメソッドは、スクリプト関連の機能検出のためのシンプルで統一された方法を提供します。

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

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

イベント
----

*独自のイベントはありません。親である `HTMLElement` からイベントを継承しています。*

例
-

### スクリプトの動的なインポート

文書内の新しいスクリプトをインポートする関数を作成しましょう。次のコードをホストする `<script>` の直前に `<script>` ノードを作成します（`document.currentScript` を使用）。これらのスクリプトは**非同期**で実行されます。詳細については、 `defer` および `async` プロパティを参照してください。

```js
function loadError(oError) {
  throw new URIError(`The script ${oError.target.src} didn't load correctly.`);
}

function prefixScript(url, onloadFunction) {
  const newScript = document.createElement("script");
  newScript.onerror = loadError;
  if (onloadFunction) {
    newScript.onload = onloadFunction;
  }
  document.currentScript.parentNode.insertBefore(
    newScript,
    document.currentScript,
  );
  newScript.src = url;
}
```

次の関数は、新しいスクリプトを `document.currentScript` 要素の直前に追加するのではなく、 `<head>` タグの子として追加するものです。

```js
function loadError(oError) {
  throw new URIError(`The script ${oError.target.src} didn't load correctly.`);
}

function affixScriptToHead(url, onloadFunction) {
  const newScript = document.createElement("script");
  newScript.onerror = loadError;
  if (onloadFunction) {
    newScript.onload = onloadFunction;
  }
  document.head.appendChild(newScript);
  newScript.src = url;
}
```

サンプルの使用法:

```js
affixScriptToHead("myScript1.js");
affixScriptToHead("myScript2.js", () => {
  alert('The script "myScript2.js" has been correctly loaded.');
});
```

### あるスクリプト種別に対応しているかどうかをチェック

`HTMLScriptElement.supports_static` は、ブラウザーが特定の種類のスクリプトに対応しているかどうかをチェックする統一的な仕組みを提要します。

以下の例では、 `noModule` 属性の存在を代替として使用して、モジュールの対応をチェックする方法を示しています。

```js
function checkModuleSupport() {
  if ("supports" in HTMLScriptElement) {
    return HTMLScriptElement.supports("module");
  }
  return "noModule" in document.createElement("script");
}
```

クラシックスクリプトはすべてのブラウザーで対応していると想定できます。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlscriptelement |

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

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

関連情報
----

* HTML の `<script>` 要素
* HTML の `<noscript>` 要素
* `document.currentScript`
* ウェブワーカー （script と似たコードの断片だが、別なグローバルコンテキストで実行されるもの）


TextTrackCue - Web API

TextTrackCue
============

**`TextTrackCue`** は抽象クラスで、 `VTTCue` などの派生キュー型の基礎として使用されます。代わりに、これらの派生型を使用して作業することになります。これらのキューは、 `TextTrack` の再生中にある時間だけ表示される文字列を表します。キューには、開始時刻（テキストが表示される時刻）と終了時刻（テキストが表示されなくなる時刻）、およびその他の情報を記載します。

EventTarget

TextTrackCueプロパティ
-----

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

`TextTrackCue.track` 読取専用

このキューが属する `TextTrack`。 いずれにも属さない場合は `null`。

`TextTrackCue.id`

文字列で、キューを識別します。

`TextTrackCue.startTime`

`double` で、キューが表示を開始する動画時刻を、秒単位で指定します。

`TextTrackCue.endTime`

`double` で、キューの表示を停止する動画時刻を、秒単位で指定します。

`TextTrackCue.pauseOnExit`

このキューが表示されなくなったときに動画を一時停止するかどうかを示す論理型です。

### イベント

`enter`

キューがアクティブになったときに発行されます。

`exit`

キューがアクティブではなくなったときに発行されます。

仕様書
---

| Specification |
| --- |
| HTML Standard # texttrackcue |

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

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


Serial - Web API

Serial
======

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

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

`Web Serial API` の `Serial` インターフェイスは、ウェブページがシリアルポートを検出し、接続するためのプロパティやメソッドを提供します。

EventTarget

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

`Serial.requestPort()`
Experimental

ユーザーが選んだデバイスを表す `SerialPort` のインスタンスで解決するか、デバイスが選択されなかった場合は拒否される `Promise` を返します。

このメソッドは、ユーザーによる有効化に伴って呼ぶ必要があります。

`Serial.getPorts()`
Experimental

接続されており、かつオリジンにアクセス許可があるシリアルポートを表す `SerialPort` の配列で解決する `Promise` を返します。

イベント
----

`SerialPort` からのイベントバブリングにより、`Serial` では以下のイベントが利用可能です。

`SerialPort` `connect` イベント

デバイスにポートが接続された時に発火するイベントです。

`SerialPort` `disconnect` イベント

デバイスからポートが切断された時に発火するイベントです。

例
-

この例では、利用可能なポートを調べ、ユーザーが他のポートへのアクセスを許可できるようにする方法を示します。

`load` イベントの受信時に `connect` および `disconnect` イベントにリスナーを追加することで、デバイスが接続された時や切断された時にサイトが反応できるようにします。`getPorts()` メソッドを呼ぶことで、接続されたポートが既にサイトからのアクセスが許可されたものかどうかを調べることができます。

接続されたポートの中にサイトからアクセスできるものが無い場合、ユーザーが有効化するのを待つ必要があります。この例では、このためにボタンの `click` イベントハンドラーを用います。`requestPort()` に USB ベンダー ID を入れたフィルターを渡し、ユーザーに提示するデバイスのリストを特定の生産者によって作られた USB デバイスのみに絞り込んでいます。

```js
navigator.serial.addEventListener("connect", (e) => {
  // `e.target` に接続する、すなわち利用可能なポートのリストに加えます。
});

navigator.serial.addEventListener("disconnect", (e) => {
  // `e.target` を利用可能なポートのリストから外します。
});

navigator.serial.getPorts().then((ports) => {
  // ページの読み込み時、`ports` を用いて利用可能なポートのリストを初期化します。
});

button.addEventListener("click", () => {
  const usbVendorId = 0xabcd;
  navigator.serial
    .requestPort({ filters: [{ usbVendorId }] })
    .then((port) => {
      // `port` に接続する、すなわち利用可能なポートのリストに加えます。
    })
    .catch((e) => {
      // ユーザーがポートを選択しませんでした。
    });
});
```

仕様書
---

| Specification |
| --- |
| Web Serial API # serial-interface |

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

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


CSSVariableReferenceValue - Web API

CSSVariableReferenceValue
=========================

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

**`CSSVariableReferenceValue`** は CSS Typed Object Model API のインターフェイスで、組み込み CSS 値のカスタム名を作成することができます。このオブジェクトは機能的に「CSS 変数」と呼ばれることがあり、 `var()` 関数と同じ用途を提供します。カスタム名は 2 本のダッシュで始める必要があります。

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

`CSSVariableReferenceValue.CSSVariableReferenceValue()`

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

プロパティ
-----

`CSSVariableReferenceValue.variable`

コンストラクターに渡されたカスタム名を返します。

`CSSVariableReferenceValue.fallback` 読取専用

カスタム名の組み込み CSS 値を返します。

メソッド
----

なし。

仕様書
---

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

ブラウザーの対応
--------

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


CDATASection - Web API

CDATASection
============

**`CDATASection`** インターフェイスは CDATA セクションを表します。これにより、XML 内でエスケープされていないテキストの拡張部分を入れることができます。
 CDATA セクションの内部では、記号 `<` と `&` は通常のようにエスケープする必要がありません。

XML では、CDATA セクションは次のようになります。

```xml
<![CDATA[ … ]]>
```

実際の使用例を以下に示します。

```html
<foo>
  次の部分は CDATA セクションです: <![CDATA[ < > & ]]>
  ですべての種類のエスケープされていないテキストを記述できます。
</foo>
```

CDATA セクションに許可されていない唯一の文字の並びは、閉じる文字の並びである `]]>` です。

**メモ:** CDATA セクションは HTML 内で使用すべきではありません。コメントと見なされ表示されません。

EventTarget

Node

CharacterData

Text

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

*このインターフェイスに固有のプロパティは存在せず、親である `Text` で実装しています。*

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

*このインターフェイスに固有のメソッドは存在せず、親である `Text` で実装しています。*

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-cdatasection |

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

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

関連情報
----

* `Document.createCDATASection()`


HTMLParagraphElement - Web API

HTMLParagraphElement
====================

**`HTMLParagraphElement`** インターフェイスは、（通常の `HTMLElement` から継承によって利用できるものに加えて） `<p>` 要素を操作するためのプロパティやメソッドを提供します。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLParagraphElement.align`
非推奨

文字列で、列挙型の属性で周囲のコンテキストに対する要素の内容の配置を示します。指定可能な値は `"left"`, `"right"`, `"justify"`, `"center"` です。

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

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

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlparagraphelement |

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

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

関連情報
----

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


CSSImageValue - Web API

CSSImageValue
=============

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

**`CSSImageValue`** は CSS 型付きオブジェクトモデル API のインターフェイスで、 `background-image`, `list-style-image`, `border-image-source` のような画像を取るプロパティの値を表します。

CSSImageValue オブジェクトは `<image>` のうち URL に関わるもの、例えば `url()` や `image()` を表しますが、 `linear-gradient()` や `element()` は表しません。

CSSStyleValue

CSSImageValueプロパティ
-----

なし。

メソッド
----

*`CSSStyleValue` からメソッドを継承しています。*

例
-

次のような要素を作成します。

```html
<button>Magic Wand</button>
```

バイナリーファイルを要求する背景画像など、いくつかの CSS を追加しています。

```css
button {
  display: inline-block;
  min-height: 100px;
  min-width: 100px;
  background: no-repeat 5% center url(magicwand.png) aqua;
}
```

その要素のスタイルマップを取得します。そして、スタイルマップから background-image を取得し、文字列化します。

```js
// 要素を取得
const button = document.querySelector("button");

// computedStyleMap()ですべての計算済みスタイルを取得
const allComputedStyles = button.computedStyleMap();

// CSSImageValue を返す例
console.log(allComputedStyles.get("background-image"));
console.log(allComputedStyles.get("background-image").toString());
```

仕様書
---

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

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

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

関連情報
----

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


DOMRectReadOnly - Web API

DOMRectReadOnly
===============

**`DOMRectReadOnly`** インターフェイスは（`DOMRect` でも使用される）標準プロパティを設定し、すべてのプロパティが変更不可の矩形を定義します。

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

`DOMRectReadOnly()`

新しい `DOMRectReadOnly` オブジェクトを生成するために定義されています。

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

`DOMRectReadOnly.x` 読取専用

この `DOMRectReadOnly` の原点の X 座標を返します。

`DOMRectReadOnly.y` 読取専用

この `DOMRectReadOnly` の原点の Y 座標を返します。

`DOMRectReadOnly.width` 読取専用

この `DOMRectReadOnly` の幅を返します。

`DOMRectReadOnly.height` 読取専用

この `DOMRectReadOnly` の高さを返します。

`DOMRectReadOnly.top` 読取専用

この `DOMRectReadOnly` の上端の座標値を返します（ふつうは `y` と同じです）。

`DOMRectReadOnly.right` 読取専用

この `DOMRectReadOnly` の右端の座標値を返します（ふつうは `x + width` と同じです）。

`DOMRectReadOnly.bottom` 読取専用

この `DOMRectReadOnly` の下端の座標値を返します（ふつうは `y + height` と同じです）。

`DOMRectReadOnly.left` 読取専用

この `DOMRectReadOnly` の左端の座標値を返します（ふつうは `x` と同じです）。

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

`DOMRectReadOnly.fromRect()`

指定された位置と大きさで、新しい `DOMRectReadOnly` オブジェクトを生成します。

仕様書
---

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

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

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

関連情報
----

* `DOMPoint`


Selection API - Web API

Selection API
=============

**メモ:** この API は Web Workers では *使用できません*。(`WorkerNavigator` 経由では公開されていません)

**Selection API** は、開発者がドキュメントのユーザーに選択されている部分にアクセスしたり操作したりできるようにします。

`Window.getSelection()` および `Document.getSelection()` メソッドは、ドキュメントのユーザーに選択されている部分を表す `Selection` オブジェクトを返します。`Selection` オブジェクトは、以下を行うメソッドを提供します。

* 現在選択されているノードにアクセスする。
* 現在の選択を変更する。選択を伸ばしたり、縮めたり、ドキュメントのまったく異なる部分を選択したりする。
* DOM から現在選択されている部分を削除する。

Selection API は、`Document` で発火する 2 種類のイベントも提供します。

* `selectstart` イベントは、ユーザーが新しく選択を開始したとき発火します。
* `selectionchange` イベントは、現在の選択範囲が変更されたとき発火します。
インターフェイス
--------

`Selection`

ドキュメントのユーザーによって選択されている部分、またはキャレットの現在の位置を表すインターフェイスです。

`Document.getSelection()`

現在の選択範囲、またはキャレットの現在の位置を表す `Selection` オブジェクトを返すメソッドです。

`Window.getSelection()`

現在の選択範囲、またはキャレットの現在の位置を表す `Selection` オブジェクトを返すメソッドです。

`Document.selectionchange`

現在の選択範囲が変更されたとき発火するイベントです。

`Node.selectstart`

ユーザーが新しく選択を開始したとき発火するイベントです。

仕様書
---

| Specification |
| --- |
| Selection API # selection-interface |


CSSLayerStatementRule - Web API

CSSLayerStatementRule
=====================

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

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

* Learn more
* See full compatibility
* Report feedback
**`CSSLayerStatementRule`** は `@layer` 文のルールを表します。 `CSSLayerBlockRule`とは異なり、他のコンテナーのルールを格納せず、単に 1 つまたは複数のレイヤーの名前を提供して定義します。

このルールで、 CSS ファイルの先頭に見かけ上あるレイヤーの順序を明示的に宣言することができます。レイヤーの順序は、各レイヤー名の最初の出現順序によって定義されます。文で宣言することで、読者はレイヤーの順序を理解することができます。また、 `CSSLayerBlockRule` 構文を使用する場合には不可能な、インラインレイヤーとインポートレイヤーの挿入も可能になります。

CSSRule

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

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

* `CSSLayerStatementRule.nameList` 読取専用
    + ルールによる各カスケードレイヤーの名前を表す文字列の配列です。
例
-

### HTML

```html
<p></p>
```

### CSS

```css
@layer layerName, layerName2;
```

### JavaScript

```js
const item = document.getElementsByTagName("p")[0];
const rules = document.styleSheets[1].cssRules;
// スタイルシート #1 はこの埋め込み例に関連するスタイルシートであり、
// スタイルシート #0 は MDN ページ全体に関連するスタイルシート。

const layer = rules[0]; // CSSLayerStatementRule

item.textContent = `この CSS の @layer 文は、 ${layer.nameList.join(
 ", ",
)} レイヤーを宣言しています。`;
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Cascading and Inheritance Level 5 # csslayerstatementrule |

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

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

関連情報
----

* `@layer`
* 名前付きレイヤーのための @layer 文のアットルール
* `CSSLayerBlockRule`


HTMLModElement - Web API

HTMLModElement
==============

**`HTMLModElement`** インターフェイスは、（継承によって `HTMLElement` を通じて利用できる通常のメソッドやプロパティに加えて）改変 (modification) 要素、すなわち `<del>` と `<ins>` を操作するための特有のプロパティを提供します。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLModElement.cite`

文字列で、 HTML の `cite` 属性の値を反映します。変更点についての説明を含むリソースの URI が入ります。

`HTMLModElement.dateTime`

文字列で、 HTML の `datetime` 属性の値を反映します。変更されたタイムスタンプを示す日時文字列が入ります。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlmodelement |

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

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

関連情報
----

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


CSSMediaRule - Web API

CSSMediaRule
============

**`CSSMediaRule`** は、単一の CSS の `@media` ルールを表すインターフェイスです。

CSSRule

CSSGroupingRule

CSSConditionRule

CSSMediaRuleプロパティ
-----

*祖先である `CSSConditionRule`、`CSSGroupingRule`、`CSSRule` から継承したプロパティもあります。*

`CSSMediaRule.media` 読取専用

スタイル情報の出力先メディアを表す `MediaList` を返します。

メソッド
----

*固有のメソッドはありません。祖先である `CSSConditionRule`、`CSSGroupingRule`、`CSSRule` から継承したメソッドがあります。*

例
-

 この CSS には、単一のスタイルルールを持つメディアクエリーが含まれています。これは `document.styleSheets[0].cssRules` が返す最初の CSSRule になります。
 したがって、 `myRules[0]` は `CSSMediaRule` オブジェクトを返します。

```css
@media (min-width: 500px) {
  body {
    color: blue;
  }
}
```

```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0]); // a CSSMediaRule representing the media query.
```

仕様書
---

| Specification |
| --- |
| CSS Conditional Rules Module Level 3 # the-cssmediarule-interface |

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

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


TextDecoder - Web API

TextDecoder
===========

**`TextDecoder`** インターフェイスは、特定のテキストエンコーディング、例えば `UTF-8`、`ISO-8859-2`、`KOI8-R`、`GBK` などのデコーダーを表します。デコーダーは入力としてバイトストリームを受け取り、コードポイントのストリームを出力します。

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

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

`TextDecoder()`

新たに生成した `TextDecoder` を返します。これは、引数で指定したデコード方式を使用して連続したコードポイントを生成します。

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

*`TextDecoder` インターフェイスは、何もプロパティを継承していません。*

`TextDecoder.encoding` 読取専用

デコーダーの名称を持つ文字列であり、これは `TextDecoder` が使用する方式を表す文字列です。

`TextDecoder.fatal` 読取専用

エラーモードが fatal であるかを示す論理値です。

`TextDecoder.ignoreBOM` 読取専用

バイトオーダーマークを無視するかどうかを示す論理値です。

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

*`TextDecoder` インターフェイスは、何もメソッドを継承していません。*

`TextDecoder.decode()`

特定の `TextDecoder` オブジェクトの方式でデコードされたテキストを含む文字列を返します。

例
-

### 型付き配列でのテキスト表現

この例では、中国語/日本語の文字
 ![「吉」を表す漢字](/ja/docs/Web/API/TextDecoder/2019-05-21_191907.png) を、異なる 5 種類の型付き配列、 `Uint8Array`, `Int8Array`, `Uint16Array`, `Int16Array`, `Int32Array` で表します。

```js
let utf8decoder = new TextDecoder(); // default 'utf-8' or 'utf8'

let u8arr = new Uint8Array([240, 160, 174, 183]);
let i8arr = new Int8Array([-16, -96, -82, -73]);
let u16arr = new Uint16Array([41200, 47022]);
let i16arr = new Int16Array([-24336, -18514]);
let i32arr = new Int32Array([-1213292304]);

console.log(utf8decoder.decode(u8arr));
console.log(utf8decoder.decode(i8arr));
console.log(utf8decoder.decode(u16arr));
console.log(utf8decoder.decode(i16arr));
console.log(utf8decoder.decode(i32arr));
```

### UTF-8 ではないテキストの扱い

この例では、ロシア語の "Привет, мир!"、 "Hello, world." という意味のテキストをデコードします。 `TextDecoder()` コンストラクターでは、キリル語の文字に適した Windows-1251 文字エンコーディングを指定します。

```js
const win1251decoder = new TextDecoder("windows-1251");
const bytes = new Uint8Array([
  207, 240, 232, 226, 229, 242, 44, 32, 236, 232, 240, 33,
]);
console.log(win1251decoder.decode(bytes)); // Привет, мир!
```

仕様書
---

| Specification |
| --- |
| Encoding Standard # interface-textdecoder |

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

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

関連情報
----

* 逆の操作を表す `TextEncoder` インターフェイス。
* 対応していないブラウザーでもこのインターフェイスを使用可能にする shim。
* Node.js supports global export from v11.0.0


ビュートランジション API - Web API

ビュートランジション API
==============

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

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

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

**ビュートランジション API** は、異なる DOM 状態間のアニメーション遷移を簡単に作成する仕組みを提供し、同時に DOM コンテンツも単一の手順で更新します。

概念と使い方
------

ビュートランジションは、ユーザーがアプリケーションの状態またはビューの間を移動する際に、ユーザーの認知的負荷を縮小し、コンテキストにとどまることを支援し、読み込み待ちの知覚時間を短縮するための有力な設計の選択肢です。

しかし、ウェブ上でビュートランジションを作成するのは、過去には困難なことでした。単一のページアプリ (SPA) で状態間の遷移を行うには、かなりの CSS と JavaScript を書かなければならない傾向があります。

* 古いコンテンツと新しいコンテンツの読み込みと位置決めを処理します。
* 古い状態と新しい状態をアニメーション化して、トランジションを作成します。
* 古いコンテンツを誤ってユーザーが操作して問題が発生しないようにします。
* トランジションが完了したら、古いコンテンツを除去します。

また、新しいコンテンツと古いコンテンツが同時に DOM に存在することで、読み上げ位置の喪失、フォーカスの混乱、奇妙なライブ領域のアナウンス動作といったアクセシビリティの課題も生じます。さらに、文書間の（つまり、 SPA ではない通常のウェブサイトの異なるページ間の）ビュートランジションは不可能です。

ビュートランジション API は、要求される DOM の変更とトランジションアニメーションをより簡単に処理する方法を提供します。

**メモ:** ビュートランジション API は、現在のところ文書間のビュートランジションを可能にするものではありませんが、これは将来の仕様レベルで計画されており、活発に作業されています。

### 基本的なビュートランジションの作成

例えば、ナビゲーションリンクがクリックされたり、サーバーから更新がプッシュされたりといった何らかのイベントに応答して、新しいコンテンツを取得して DOM を更新する機能を SPA に含めることができます。この基本的なビュートランジションのデモでは、クリックされたサムネイルに基づいて新しいフルサイズの画像を表示する `displayNewImage()` 関数に単純化しました。これを `updateView()` 関数内にカプセル化し、ブラウザーの対応している場合にのみビュートランジション API を呼び出すようにしています。

```js
function updateView(event) {
  // <a> と <img> のどちらにイベントが発生するかの違いを扱う
  const targetIdentifier = event.target.firstChild || event.target;

  const displayNewImage = () => {
    const mainSrc = `${targetIdentifier.src.split("\_th.jpg")[0]}.jpg`;
    galleryImg.src = mainSrc;
    galleryCaption.textContent = targetIdentifier.alt;
  };

  // ビュートランジションに対応していないブラウザー用のフォールバック
  if (!document.startViewTransition) {
    displayNewImage();
    return;
  }

  // ビュートランジションで
  const transition = document.startViewTransition(() => displayNewImage());
}
```

このコードだけで表示画像の切り替えを処理することができます。対応しているブラウザーでは、古い画像から新しい画像とキャプションへの変更をスムーズなクロスフェード（ビュートランジションの既定値）として表示させます。対応していないブラウザーでも動作しますが、アニメーションは表示されません。

`startViewTransition()` は `ViewTransition` インスタンスを返しますが、このインスタンスにはいくつかのプロミスが含まれており、ビュートランジションプロセスの異なる部分に到達するためにコードを実行することができます。

### ビュートランジションのプロセス

これがどのように動作するのかを見ていきましょう。

1. `document.startViewTransition()` が呼び出されると、 API は現在のページのスクリーンショットを撮ります。
2. 次に `startViewTransition()` に渡したコールバック（この場合は `displayNewImage`）を呼び出し、これが DOM を変更します。
 コールバックが正常に実行されると、 `ViewTransition.updateCallbackDone` のプロミスが履行され、 DOM の更新に応答できるようになります。
3. API はページの新しい状態をライブ表現として取り込みます。
4. API は以下のような構造の擬似要素ツリーを構築します。
```

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)
```

    * `::view-transition` はビュートランジションオーバーレイのルートで、すべてのビュートランジションを収め、他のすべてのページコンテンツの上に配置されます。
    * `::view-transition-old` は古いページ表示のスクリーンショットで、 `::view-transition-new` は新しいページ表示のライブ表示です。どちらも `<img>` や `<video>` と同じように置換コンテンツとしてレンダリングされ、 `object-fit` や `object-position` のような便利なプロパティでスタイル設定できることを意味しています。トランジションアニメーションが実行されるとき、 `ViewTransition.ready` プロミスが履行され、例えば既定のアニメーションではなく独自の JavaScript アニメーションを実行して対応することができます。
5. 古いページ表示の `opacity` を 1 から 0 へアニメーションさせる一方、新しい表示の `opacity` を 0 から 1 までアニメーションします。これは既定のクロスフェードを作成するものです。
6. トランジションアニメーションが終了状態に達すると、 `ViewTransition.finished` プロミスが履行され、応答できるようになります。
### 要素ごとに異なるトランジション

現時点では、 DOM 更新時に変化する異なる要素はすべて同じアニメーションを使用してトランジションします。異なる要素を既定で「ルート」アニメーションとは異なる形でアニメーションさせたい場合は、 `view-transition-name` プロパティを使用してそれらを区切ることができます。例えば、以下のようにします。

```css
figcaption {
  view-transition-name: figure-caption;
}
```

`<figcaption>` 要素に `figure-caption` という `view-transition-name` を指定したのは、ビュートランジションでページの他の部分と区別するためです。

この CSS を適用すると、擬似要素ツリーは次のようになります。
```

::view-transition
├─ ::view-transition-group(root)
│ └─ ::view-transition-image-pair(root)
│     ├─ ::view-transition-old(root)
│     └─ ::view-transition-new(root)
└─ ::view-transition-group(figure-caption)
  └─ ::view-transition-image-pair(figure-caption)
      ├─ ::view-transition-old(figure-caption)
      └─ ::view-transition-new(figure-caption)
```

2 つ目の擬似要素が存在することで、 `<figcaption>` だけに別個のビュートランジションスタイル設定を適用することができます。異なる新旧のページビューのキャプチャは完全に別個のものとして処理されます。

`view-transition-name` の値は `none` 以外であれば何らかの値を指定することができます。`none` はその要素がビュートランジションに参加しないことを意味します。

**メモ:** `view-transition-name` は一意でなければなりません。 2 つのレンダリング要素が同時に同じ `view-transition-name` がある場合、 `ViewTransition.ready` は拒否され、トランジションはスキップされます。

### アニメーションのカスタマイズ

ビュートランジションの擬似要素には既定で CSS アニメーションが適用されています（詳しくは参照ページを参照してください）。

特に、 `height`、`width`、`position`、`transform` のトランジションはスムーズなクロスフェードアニメーションを使用しません。その代わりに、height と width のトランジションでは拡大縮小するアニメーションが適用されます。一方、position と transform のトランジションは要素に滑らかな移動アニメーションを適用します。

既定のアニメーションは、通常の CSS を使用して自由に変更することができます。

例えば、そのスピードを変えるには次のようにします。

```css
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
}
```

もっと面白いものを見ていきましょう。 `<figcaption>` のカスタムアニメーションです。

```css
@keyframes grow-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes shrink-x {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

::view-transition-old(figure-caption),
::view-transition-new(figure-caption) {
  height: auto;
  right: 0;
  left: auto;
  transform-origin: right center;
}

::view-transition-old(figure-caption) {
  animation: 0.25s linear both shrink-x;
}

::view-transition-new(figure-caption) {
  animation: 0.25s 0.25s linear both grow-x;
}
```

ここでは、独自の CSS アニメーションを作成し、それを `::view-transition-old(figure-caption)` および `::view-transition-new(figure-caption)` 擬似要素に適用しています。他にも、同じ配置を維持し、既定値のスタイル設定がカスタムアニメーションの邪魔をしないようにするために、両方にスタイルを追加しています。

なお、上記よりもシンプルで、より良い結果をもたらす別のトランジションオプションも見つけました。最終的な `<figcaption>` のビュートランジションはこのようになりました。

```css
figcaption {
  view-transition-name: figure-caption;
}

::view-transition-old(figure-caption),
::view-transition-new(figure-caption) {
  height: 100%;
}
```

これは既定では `::view-transition-group` が古いビューと新しいビューの間で幅と高さを遷移させるのでうまくいきます。これはうまくいくために、両方の状態で固定された `height` を設定する必要がありました。

**メモ:** ビュートランジション API によるスムーズでシンプルなトランジションには、いくつかの他のカスタマイズ例があります。

### JavaScript によるアニメーションの制御

`document.startViewTransition()` メソッドは `ViewTransition` オブジェクトインスタンスを返します。このオブジェクトインスタンスには、いくつかのプロミスメンバーが含まれており、トランジションの様々な状態に達したことに応答して JavaScript を実行することができます。例えば、 `ViewTransition.ready` は擬似要素ツリーが作成され、アニメーションが始まろうとすると履行され、 `ViewTransition.finished` はアニメーションが完了し、新しいページビューがユーザーに表示され操作できるようになると履行されます。

例えば、次の例では、ウェブアニメーション API によって指定されたアニメーションで、クリック時のユーザーカーソルの位置から発せられる円形の明らかになるビュー遷移を作成するために、以下の JavaScript を使用することができます。

```js
// 最後のクリックイベントを格納
let lastClick;
addEventListener("click", (event) => (lastClick = event));

function spaNavigate(data) {
  // この API に対応していないブラウザーのためのフォールバック
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // クリック位置を取得するか、画面の中央へフォールバックする
  const x = lastClick?.clientX ?? innerWidth / 2;
  const y = lastClick?.clientY ?? innerHeight / 2;
  // 最も遠いコーナーまでの距離を取得
  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y),
  );

  // トランジションを作成
  const transition = document.startViewTransition(() => {
    updateTheDOMSomehow(data);
  });

  // 擬似要素が作成されるのを待つ
  transition.ready.then(() => {
    // ルートの新しいビューをアニメーション
    document.documentElement.animate(
      {
        clipPath: [
          `circle(0 at ${x}px ${y}px)`,
          `circle(${endRadius}px at ${x}px ${y}px)`,
        ],
      },
      {
        duration: 500,
        easing: "ease-in",
        // アニメーションさせる擬似要素を指定
        pseudoElement: "::view-transition-new(root)",
      },
    );
  });
}
```

このアニメーションには以下の CSS も必要です。CSS の既定のアニメーションをオフにし、新しい状態と古い状態を混合しないようにします（新しい状態はトランジションするのではなく、古い状態のすぐ上に「ワイプ」されます）。

```css
::view-transition-image-pair(root) {
  isolation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
  display: block;
}
```

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

`ViewTransition`

ビュートランジションを表します。トランジションが異なる状態（アニメーションを実行する準備ができている、アニメーションが完了したなど）に達したり、トランジションを完全にスキップしたりする機能を提供します。

他のインターフェイスの拡張
-------------

`Document.startViewTransition()`

新しいビュートランジションを開始し、それを表す `ViewTransition` オブジェクトを返します。

CSS の追加
-------

### プロパティ

`view-transition-name`

選択された要素に別な識別名を提供し、ルートのビュートランジションとは別のビュートランジションに参加させます。 `none` の値が指定された場合はビュートランジションに参加させません。

### 擬似要素

`::view-transition`

ビュートランジションオーバーレイのルートで、すべてのビュートランジションを格納し、他のすべてのページコンテンツの上に配置されます。

`::view-transition-group()`

単一のビュートランジションのルートです。

`::view-transition-image-pair()`

ビュートランジションの新旧ビュー（トランジション前とトランジション後）のコンテナーです。

`::view-transition-old()`

ビュートランジション移行前の静止スクリーンショットです。

`::view-transition-new()`

ビュートランジション後の新しいビューのライブ表現です。

例
-

* Basic View Transitions demo: 基本的な画像ギャラリーのデモで、古い画像と新しい画像、古いキャプションと新しいキャプションの間に別個のトランジションがあります。
* HTTP 203 playlist: ビュートランジション API によるスムーズでシンプルなトランジションでは、その多くが説明されています。異なる多くのビュートランジション機能を備えた、より洗練された動画プレーヤーのデモアプリです。
仕様書
---

| Specification |
| --- |
| CSS View Transitions Module Level 1 # dom-document-startviewtransition |

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

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

関連情報
----

* ビュートランジション API によるスムーズでシンプルなトランジション
* View Transitions API: Creating Smooth Page Transitions


SpeechSynthesisEvent - Web API

SpeechSynthesisEvent
====================

**`SpeechSynthesisEvent`** はウェブ音声 API のインターフェイスで、は、発話サービスで処理された `SpeechSynthesisUtterance` オブジェクトの現在の状態に関する情報を保持します。

Event

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

`SpeechSynthesisEvent()`

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

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

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

`SpeechSynthesisEvent.charIndex` 読取専用

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

`SpeechSynthesisEvent.charLength` 読取専用

発話エンジンが対応している場合、 `charIndex` 位置の後に発話できる残りの文字数を返します。発話エンジンが情報を提供できない場合は 0 を返します。

`SpeechSynthesisEvent.elapsedTime` 読取専用

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

`SpeechSynthesisEvent.name` 読取専用

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

`SpeechSynthesisEvent.utterance` 読取専用

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

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

*以下に挙げたメソッドに加え、親インターフェイスである `Event` のメソッドが利用可能です。*

例
-

```js
utterThis.onpause = (event) => {
  const char = event.utterance.text.charAt(event.charIndex);
  console.log(
    `Speech paused at character ${event.charIndex} of "${event.utterance.text}", which is "${char}".`,
  );
};

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

仕様書
---

| Specification |
| --- |
| Web Speech API # speechsynthesisevent |

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

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

関連情報
----

* ウェブ音声 API


ServiceWorkerRegistration - Web API

ServiceWorkerRegistration
=========================

**`ServiceWorkerRegistration`** は サービスワーカー API のインターフェイスで、サービスワーカー登録を表します。 同じオリジンを共有している 1 つ以上のページを制御するサービスワーカーを登録します。

サービスワーカー登録の存続期間は、対応するサービスワーカークライアントの存続期間内でそれらを表す `ServiceWorkerRegistration` オブジェクトの存続期間を超えています。 ブラウザーは、アクティブな `ServiceWorkerRegistration` オブジェクトの永続的なリストを維持します。

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

EventTarget

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

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

`ServiceWorkerRegistration.active` 読取専用

状態がアクティブ化中 (`activating`) またはアクティブ化済み (`activated`) のサービスワーカーを返します。 これは最初は `null` に設定されています。 クライアントの URL が登録のスコープ内にある場合、アクティブワーカーは `Client` を制御します（`ServiceWorkerContainer.register` を最初に呼び出したときに設定した `scope` オプション）。

`ServiceWorkerRegistration.backgroundFetch` 読取専用
Experimental

バックグラウンドフェッチ操作を管理する `BackgroundFetchManager` オブジェクトへの参照を返します。

`ServiceWorkerRegistration.index` 読取専用

`ContentIndex` (en-US) インターフェイスの参照を返し、これによってオフライン表示のコンテンツの索引付けを管理します。

`ServiceWorkerRegistration.installing` 読取専用

状態がインストール中 (`installing`) のサービスワーカーを返します。 これは最初は `null` に設定されています。

`ServiceWorkerRegistration.navigationPreload` 読取専用

現在のサービスワーカー登録に関連する `NavigationPreloadManager` のインスタンスを返します。

`ServiceWorkerRegistration.paymentManager`
Experimental

決済アプリの様々な機能を管理するために使用する、決済アプリの `PaymentManager` (en-US) のインスタンスを返します。

`ServiceWorkerRegistration.pushManager` 読取専用

購読申し込み、アクティブな購読の取得、プッシュの許可状況へのアクセスなど、プッシュの購読を管理するための `PushManager` インターフェイスへの参照を返します。

`ServiceWorkerRegistration.scope` 読取専用

サービスワーカー登録の一意の識別子を返します。 これは、`ServiceWorker` を登録する文書と同じオリジンにある必要があります。

`ServiceWorkerRegistration.sync` 読取専用
Experimental

バックグラウンド同期プロセスを管理する `SyncManager` インターフェイスへの参照を返します。

`ServiceWorkerRegistration.waiting` 読取専用

状態がインストール済み (`installed`) のサービスワーカーを返します。 これは最初は `null` に設定されています。

`ServiceWorkerRegistration.updateViaCache` 読取専用

サービスワーカースクリプトを更新する際に使用するキャッシュ戦略を示す文字列を返します。 `imports`, `all`, `none` の何れかとなります。

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

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

`ServiceWorkerRegistration.getNotifications()`

`Notification` オブジェクトの配列に解決される `Promise` を返します。

`ServiceWorkerRegistration.showNotification()`

要求したタイトルの通知を表示します。

`ServiceWorkerRegistration.unregister()`

サービスワーカー登録を解除し、`Promise` を返します。 サービスワーカーは、登録が解除される前に進行中の操作を完了します。

`ServiceWorkerRegistration.update()`

サービスワーカーの更新されたバージョンを、キャッシュを調べずに、サーバーでチェックします。

イベント
----

`updatefound`

タイプが `updatefound` のイベントが発生するたびに呼び出される /ja/docs/Web/API/EventListener のプロパティ。 `ServiceWorkerRegistration.installing` プロパティが新しいサービスワーカーを取得するたびに発生します。

例
-

この例では、コードはまずブラウザーがサービスワーカーをサポートしているかどうかをチェックし、サポートしている場合はそれを登録します。 次に、`updatefound` リスナーを追加します。 このリスナーでは、サービスワーカー登録を使用して、サービスワーカーの状態のさらなる変更をリッスンします。 サービスワーカーが最後に登録されてから変更されていない場合、`updatefound` イベントは発生しません。

```js
if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("/sw.js")
    .then((registration) => {
      registration.addEventListener("updatefound", () => {
        // updatefound が発生した場合は、新しいサービスワーカーを
        // インストールしていることを意味します。
        const installingWorker = registration.installing;
        console.log(
          "新しいサービスワーカーをインストールしています:",
          installingWorker,
        );

        // インストール中のサービスワーカーの状態の変更を、
        // installingWorker.onstatechange を介して待ち受けできます
      });
    })
    .catch((error) => {
      console.error(`サービスワーカーの登録に失敗しました: ${error}`);
    });
} else {
  console.error("サービスワーカーに対応していません。");
}
```

仕様書
---

| Specification |
| --- |
| Service Workers # serviceworkerregistration-interface |
| Push API # extensions-to-the-serviceworkerregistration-interface |

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

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

関連情報
----

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