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

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

**`StaticRange()`** コンストラクターは、 DOM 内のコンテンツの範囲を表す新しい `StaticRange` オブジェクトを作成します。

このコンストラクターは、範囲の開始位置と終了位置を示すプロパティと、範囲が**折りたたまれている**（つまり空である）かどうかを示す論理値を含みます。

構文
--

```js
new StaticRange(rangeSpec)
```

### 引数

`rangeSpec`

要求される `rangeSpec` 引数は、以下の 4 つのプロパティを格納したオブジェクトです。

`startContainer`

範囲の始点がある `Node` です。

`startOffset`

範囲の最初の文字が見つかる開始ノード内のオフセットです。

`endContainer`

範囲の終点がある `Node` です。

`endOffset`

`endOffset` で示される、ノード内で範囲内の最後の文字がある位置のオフセットです。

### 返値

`rangeSpec` オブジェクトで指定された値で初期化された新しい `StaticRange` オブジェクト。

### 例外

`InvalidNodeTypeError`

`startContainer` と `endContainer` のどちらか、または両方が範囲を含めることができないノード種別である場合に `DOMException` が発生します。これらのノード種別は `Node.DOCUMENT_TYPE_NODE` （例えば、HTMLの `doctype` プリアンブルを使用して識別された DTD から派生した `DocumentType` ノードを表します）と DOM 上の要素の属性を記述する `Attr` ノードです。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-staticrange-staticrange① |

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

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


StaticRange: startContainer プロパティ - Web API

StaticRange: startContainer プロパティ
=================================

**`startContainer`** は `StaticRange` インターフェイスの読み取り専用プロパティで、範囲の先頭の `Node` を返します。

値
-

範囲の開始位置が内部にある `Node` です。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-startcontainer① |

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

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


StaticRange: endOffset プロパティ - Web API

StaticRange: endOffset プロパティ
============================

**`endOffset`** は `StaticRange` インターフェイスの読み取り専用プロパティで、範囲の終了位置の最後のノードの中のオフセットを返します。

値
-

範囲の最後の文字が位置する `endContainer` が示す `Node` 内の文字数を示す整数値です。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-endoffset① |

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

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


StaticRange: endContainer プロパティ - Web API

StaticRange: endContainer プロパティ
===============================

**`endContainer`** は `StaticRange` インターフェイスの読み取り専用プロパティで、範囲の末尾がある `Node` を返します。

値
-

範囲の最後の文字を含む `Node` です。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-endcontainer① |

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

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


StaticRange: collapsed プロパティ - Web API

StaticRange: collapsed プロパティ
============================

**`collapsed`** は `StaticRange` インターフェイスの読み取り専用プロパティで、範囲の開始位置と終了位置が同じであれば `true` を返します。

値
-

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

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-collapsed① |

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

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


StaticRange: startOffset プロパティ - Web API

StaticRange: startOffset プロパティ
==============================

**`startOffset`** は `StaticRange` インターフェイスの読み取り専用プロパティで、開始ノードにおける範囲の開始位置のオフセットを返します。

値
-

範囲の最初の文字が位置を `startContainer` が示す `Node` 内の文字数で示す整数値です。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-startoffset① |

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

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


Window.requestAnimationFrame() - Web API

Window.requestAnimationFrame()
==============================

**`window.requestAnimationFrame()`** メソッドは、ブラウザーにアニメーションを行いたいことを知らせ、指定した関数を呼び出して次の再描画の前にアニメーションを更新することを要求します。このメソッドは、再描画の前に呼び出されるコールバック 1 個を引数として取ります。

**メモ:** 次の再描画時に別のフレームをアニメーションさせたいときは、コールバックルーチン自身で `requestAnimationFrame()` を呼び出さなければなりません。 `requestAnimationFrame()` は 1 ショットです。

このメソッドは、いつでも画面上でアニメーションの更新準備が整った時に呼び出してください。これにより、ブラウザーの次の再描画が実行される前にアニメーション関数が呼び出されることを要求します。このコールバックの回数は、たいてい毎秒 60 回ですが、一般的に多くのブラウザーでは W3C の勧告に従って、ディスプレイのリフレッシュレートに合わせて行われます。ただし、コールバックの確率は、バックグラウンドのタブや隠れた `<iframe>` では、パフォーマンス向上やバッテリー消費を減らすために低くなるでしょう。

 コールバックメソッドには、1 個の引数 `DOMHighResTimeStamp` が渡されます。これは現在の時刻を（time originからの経過ミリ秒数で）示します。
 `requestAnimationFrame()` によってキューに入れられた複数のコールバックが 1 つのフレームで起動し始めると、以前のすべてのコールバックのワークロードの計算中に時間が経過しても、それぞれが同じタイムスタンプを受け取ります（以下のコード例では、タイムスタンプが変化したとき、つまり最初のコールバックでフレームを動作させています）。このタイムスタンプは、ミリ秒単位の小数ですが、最小精度は 1ms（1000μs）です。

**警告:** アニメーションが 1 フレームでどれだけ進んだかを計算する場合、常に第 1 引数（または現在時刻を取得する他の方法）を使用するようにしてください、**そうしないと、アニメーションはリフレッシュレートの高い画面では速く実行されます**。これを行う方法については、以下の例を参照してください。

構文
--

```js
requestAnimationFrame(callback)
```

### 引数

`callback`

次の再描画でアニメーションを更新する時に呼び出す関数を指定します。コールバック関数は 1 個の引数 `DOMHighResTimeStamp` を受け取ります。この引数は、`requestAnimationFrame` がコールバックの呼び出しを開始した時点の時刻、すなわち `performance.now()` から返された時刻を示します。

返値
--

`long` の整数値で、リクエスト ID、コールバックリスト内のエントリーを一意に識別するためのリクエスト ID を返します。この値は非ゼロ値ですが、値そのものを推定することはできないでしょう。この値を `window.cancelAnimationFrame()` に渡すことで、コールバック関数の更新を中止できます。

例
-

この例では、ある要素を 2 秒間（2000 ミリ秒）動作させています。要素は 0.1px/ms の速度で右に移動するので、その相対位置（CSS ピクセル単位）はアニメーションの開始からの経過時間（ミリ秒）の関数として `0.1 * elapsed` で計算することができます。要素の最終的な位置は、初期位置から右へ 200px （`0.1 * 2000`）となります。

```js
const element = document.getElementById("some-element-you-want-to-animate");
let start, previousTimeStamp;
let done = false;

function step(timestamp) {
  if (start === undefined) {
    start = timestamp;
  }
  const elapsed = timestamp - start;

  if (previousTimeStamp !== timestamp) {
    // ここで Math.min() を使用して、要素がちょうど 200px で止まるようにします。
    const count = Math.min(0.1 \* elapsed, 200);
    element.style.transform = `translateX(${count}px)`;
    if (count === 200) done = true;
  }

  if (elapsed < 2000) {
    // Stop the animation after 2 seconds
    previousTimeStamp = timestamp;
    if (!done) {
      window.requestAnimationFrame(step);
    }
  }
}

window.requestAnimationFrame(step);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-animationframeprovider-requestanimationframe |

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

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

関連情報
----

* `Window.cancelAnimationFrame()`
* mozRequestAnimationFrame - ブログ投稿
* requestAnimationFrame for smart animating - ブログ投稿
* Animating with JavaScript: from setInterval to requestAnimationFrame - ブログ投稿
* TestUFO: Test your web
browser for requestAnimationFrame() Timing Deviations
* Paul Irish: requestAnimationFrame API: now with sub-millisecond precision
* ポリフィル


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

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

**`LinearAccelerationSensor()`** コンストラクターは、デバイスの 3 軸それぞれにかかっている加速度の測定値を、重力の影響を除いて提供する新しい `LinearAccelerationSensor` オブジェクトを生成します。

構文
--

```js
new LinearAccelerationSensor()
new LinearAccelerationSensor(options)
```

### 引数

`options` 省略可

以下のオプションがあります。

`frequency`

1 秒間にサンプルを何回取得したいかであり、`reading` イベントが呼ばれる 1 秒あたりの回数になります。整数または小数が使用でき、小数は 1 秒に 1 回未満の頻度を設定するのに用います。実際の取得頻度はデバイスハードウェアに依存するので、要求値より少なくなる可能性があります。

`referenceFrame`

`'device'` または `'screen'` です。デフォルトは `'device'` です。

### 例外

`SecurityError` `DOMException`

この機能の使用が Permissions Policy によりブロックされました。

仕様書
---

| Specification |
| --- |
| Accelerometer # dom-linearaccelerationsensor-linearaccelerationsensor |

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

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

関連情報
----

* `reading` イベント


IDBTransaction: commit() メソッド - Web API

IDBTransaction: commit() メソッド
=============================

`IDBTransaction` インターフェイスの **`commit()`** メソッドは、実行中のトランザクションで呼ばれると、トランザクションをコミットします。

なお、`commit()` は通常呼ばれる *必要は* ありません。未完了の要求がすべて完了し、新しい要求がなされないとき、トランザクションは自動でコミットされます。`commit()` は未完了の要求に関するイベントが発火するのを待たずにコミットプロセスを開始するために使用できます。

実行中でないトランザクションで呼ばれたときは、`InvalidStateError` `DOMException` を投げます。

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

構文
--

```js
commit()
```

### 引数

なし

### 返値

なし (`undefined`)

### 例外

`InvalidStateError` `DOMException`

トランザクションの状態が実行中でないとき投げられます。

例
-

```js
const note = document.getElementById("notifications");

// データベースの読み書きトランザクションを開き、データを追加する準備をする
const transaction = db.transaction(["myDB"], "readwrite");

// トランザクションを開くのに成功したら報告する
transaction.oncomplete = (event) => {
  note.innerHTML +=
    "<li>トランザクション完了: データベースの変更が完了しました。</li>";
};

transaction.onerror = (event) => {
  note.innerHTML +=
    "<li>トランザクションはエラーのため開けませんでした。アイテムは重複させられません。</li>";
};

// トランザクション上でオブジェクトストアを生成する
const objectStore = transaction.objectStore("myObjStore");

// オブジェクトストアに newItem オブジェクトを追加する
const objectStoreRequest = objectStore.add(newItem[0]);

objectStoreRequest.onsuccess = (event) => {
  // 要求の成功を報告する (これは、アイテムがデータベースにに正常に格納されたことを意味しません。
  // これを知るには、transaction.onsuccess を用いる必要があります)
  note.innerHTML += "<li>要求に成功しました。</li>";
};

// 今すぐ変更をデータベースにコミットさせる
transaction.commit();
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbtransaction-commit② |

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

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

関連情報
----

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


IDBTransaction: error イベント - Web API

IDBTransaction: error イベント
==========================

`error` イベントは、リクエストがエラーを返し、そのイベントがトランザクションオブジェクトにバブリングしたとき `IDBTransaction` で発火します。

**メモ:** トランザクションのすべての失敗を扱うには、かわりに `abort` イベントを監視することを検討してください。

構文
--

イベント名を `addEventListener()` のようなメソッドで用いるか、イベントハンドラープロパティを設定します。

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

イベント型
-----

汎用の `Event` です。

バブリング
-----

このイベントは `IDBDatabase` にバブリングします。`event.target` プロパティは、バブリング元の `IDBTransaction` オブジェクトへの参照です。

詳しくは、イベントのバブリングとキャプチャリングを参照してください。

例
-

以下の例では、データベースを開き、`add()` 操作の `error` イベントを監視しながら、レコードを追加しようとします。(たとえば、指定した `taskTitle` を持つレコードが既に存在する場合、エラーが発生します)

```js
// データベースを開く
const dBOpenRequest = window.indexedDB.open("toDoList", 4);

dBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;

  // このデータベース用の objectStore を作成する
  const objectStore = db.createObjectStore("toDoList", {
    keyPath: "taskTitle",
  });

  // objectStore に保存するデータアイテムを定義する
  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });
};

dBOpenRequest.onsuccess = (event) => {
  const db = dBOpenRequest.result;

  // データベースの読み書きトランザクションを開き、データを追加する準備をする
  const transaction = db.transaction(["toDoList"], "readwrite");

  transaction.addEventListener("error", () => {
    console.log(`新規アイテム ${newItem.taskTitle} の追加エラー`);
  });

  const objectStore = transaction.objectStore("toDoList");
  const newItem = {
    taskTitle: "my task",
    hours: 10,
    minutes: 10,
    day: 10,
    month: "January",
    year: 2020,
  };

  const objectStoreRequest = objectStore.add(newItem);
};
```

同じ例ですが、`addEventListener()` のかわりに `onerror` プロパティを用います。

```js
// データベースを開く
const dBOpenRequest = window.indexedDB.open("toDoList", 4);

dBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;

  // このデータベース用の objectStore を作成する
  const objectStore = db.createObjectStore("toDoList", {
    keyPath: "taskTitle",
  });

  // objectStore に保存するデータアイテムを定義する
  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });
};

dBOpenRequest.onsuccess = (event) => {
  const db = dBOpenRequest.result;

  // データベースの読み書きトランザクションを開き、データを追加する準備をする
  const transaction = db.transaction(["toDoList"], "readwrite");

  transaction.onerror = () => {
    console.log(`新規アイテム ${newItem.taskTitle} の追加エラー`);
  };

  const objectStore = transaction.objectStore("toDoList");
  const newItem = {
    taskTitle: "my task",
    hours: 10,
    minutes: 10,
    day: 10,
    month: "January",
    year: 2020,
  };

  const objectStoreRequest = objectStore.add(newItem);
};
```

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

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

関連情報
----

* IndexedDB の使用


IDBTransaction: error プロパティ - Web API

IDBTransaction: error プロパティ
===========================

`IDBTransaction` インターフェイスの **`IDBTransaction.error`** プロパティは、トランザクションが失敗したときにエラーの種類を返します。

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

値
-

関連するエラーが入った `DOMException` を返すか、エラーが無いときは `null` を返します。

エラーを発生させた要求オブジェクトと同じエラーの参照であることも、トランザクションの失敗 (`QuotaExceededError` など) であることもあります。

トランザクションが完了していないか、正常にコミットして完了した場合は、このプロパティは `null` です。

例
-

以下のコード断片では、データベースの読み書きトランザクションを開き、オブジェクトストアにデータを追加します。トランザクションのイベントハンドラーに設定した関数により、成功時または失敗時にトランザクションを開いた結果を報告する点にも注目してください。`transaction.onerror = (event) => { };` ブロックに注目してください。これは、トランザクションの失敗時何がいけなかったのかを報告する助けとして `transaction.error` を用いています。動く例全体は、To-do Notifications アプリケーションを参照してください。(動く例を見る)

```js
const note = document.getElementById("notifications");

// IDB データを保存する db オブジェクトのインスタンス
let db;

// データベースを開く
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

DBOpenRequest.onsuccess = (event) => {
  note.innerHTML += "<li>データベースを初期化しました。</li>";

  // データベースを開いた結果を変数 db に保存する
  // これは後でよく使う
  db = DBOpenRequest.result;

  // addData() 関数を実行し、データベースにデータを追加する
  addData();
};

function addData() {
  // IDB に挿入できる新しいオブジェクトを生成する
  const newItem = [
    {
      taskTitle: "Walk dog",
      hours: 19,
      minutes: 30,
      day: 24,
      month: "December",
      year: 2013,
      notified: "no",
    },
  ];

  // データベースの読み書きトランザクションを開き、データを追加する準備をする
  const transaction = db.transaction(["toDoList"], "readwrite");

  // トランザクションを開くのに成功したら報告する
  transaction.oncomplete = (event) => {
    note.innerHTML +=
      "<li>トランザクション完了: データベースの変更が完了しました。</li>";
  };

  transaction.onerror = (event) => {
    note.innerHTML += `<li>以下のエラーによりトランザクションを開けませんでした: ${transaction.error}</li>`;
  };

  // トランザクション上でオブジェクトストアを生成する
  const objectStore = transaction.objectStore("toDoList");

  // オブジェクトストアに newItem オブジェクトを追加する
  const objectStoreRequest = objectStore.add(newItem[0]);

  objectStoreRequest.onsuccess = (event) => {
    // 要求の成功を報告する (これは、アイテムがデータベースにに正常に格納されたことを意味しません。
    // これを知るには、transaction.onsuccess を用いる必要があります)
    note.innerHTML += "<li>要求に成功しました。</li>";
  };
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbtransaction-error① |

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

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

関連情報
----

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


IDBTransaction: objectStoreNames プロパティ - Web API

IDBTransaction: objectStoreNames プロパティ
======================================

`IDBTransaction` インターフェイスの読み取り専用プロパティ **`objectStoreNames`** は、`IDBObjectStore` オブジェクトの名前の `DOMStringList` を返します。

値
-

`IDBObjectStore` オブジェクトの名前の `DOMStringList` を返します。

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbtransaction-objectstorenames① |

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

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

関連情報
----

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


IDBTransaction: mode プロパティ - Web API

IDBTransaction: mode プロパティ
==========================

`IDBTransaction` インターフェイスの読み取り専用プロパティ **`mode`** は、トランザクションの対象におけるオブジェクトストア内のデータにアクセスする現在のモードを返します。(すなわち、モードが読み取り専用なのか、オブジェクトストアに書き込みを行いたいか) デフォルト値は `readonly` です。

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

値
-

 現在のオブジェクトストア内のデータへのアクセスを分離するためのモードを定義するオブジェクトです。
 すなわち、現在のオブジェクトストア内のデータへのアクセスを分離するためのモードを定義する文字列です。
 以下の値をとりえます。

`readonly`

データの読み込みはできますが、変更はできません。

`readwrite`

変更対象の既存のデータストア内のデータの読み書きができます。

`versionchange`

 オブジェクトストアやインデックスの削除と作成を含む、任意の操作ができます。
 このモードは、`IDBDatabase.setVersion()` により開始されたトランザクションでバージョン番号を更新する用です。
 このモードのトランザクションは、他のトランザクションと並行で実行することはできません。
 このモードのトランザクションは、*アップグレードトランザクション* として知られています。

例
-

以下のコード断片では、データベースの読み書きトランザクションを開き、オブジェクトストアにデータを追加します。トランザクションのイベントハンドラーに設定された関数により、成功時または失敗時にトランザクションを開いた結果を報告する点にも注目してください。最後に、`mode` を用いて現在のトランザクションのモードを記録します。動く例全体は、To-do Notifications アプリケーションを参照してください。(動く例を見る)

```js
const note = document.getElementById("notifications");

// IDB データを保存する用の db オブジェクトのインスタンス
let db;

// データベースを開く
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

DBOpenRequest.onsuccess = (event) => {
  note.innerHTML += "<li>データベースを初期化しました。</li>";

  // データベースを開いた結果を変数 db に格納する
  // これは後でよく使う
  db = DBOpenRequest.result;

  // addData() 関数を実行し、データをデータベースに追加する
  addData();
};

function addData() {
  // IDB に挿入できる新しいオブジェクトを生成する
  const newItem = [
    {
      taskTitle: "Walk dog",
      hours: 19,
      minutes: 30,
      day: 24,
      month: "December",
      year: 2013,
      notified: "no",
    },
  ];

  // データベースの読み書きトランザクションを開き、データを追加する準備をする
  const transaction = db.transaction(["toDoList"], "readwrite");

  // トランザクションを開くのに成功したら報告する
  transaction.oncomplete = (event) => {
    note.innerHTML +=
      "<li>トランザクション完了: データベースの変更が完了しました。</li>";
  };

  transaction.onerror = (event) => {
    note.innerHTML +=
      "<li>トランザクションはエラーのため開けませんでした。アイテムは重複させられません。</li>";
  };

  // トランザクション上でオブジェクトストアを生成する
  const objectStore = transaction.objectStore("toDoList");

  // オブジェクトストアに newItem オブジェクトを追加する
  const objectStoreRequest = objectStore.add(newItem[0]);

  objectStoreRequest.onsuccess = (event) => {
    // 要求の成功を報告する (これは、アイテムがデータベースにに正常に格納されたことを意味しません。
    // これを知るには、transaction.onsuccess を用いる必要があります)
    note.innerHTML += "<li>要求に成功しました。</li>";
  };

  // トランザクションが開かれたモードを返す (この場合は "readwrite" のはず)
  transaction.mode;
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbtransaction-mode① |

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

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

関連情報
----

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


IDBTransaction: abort() メソッド - Web API

IDBTransaction: abort() メソッド
============================

`IDBTransaction` インターフェイスの **`abort()`** メソッドは、このトランザクションに関連するデータベース内のオブジェクトへのすべての変更をロールバックします。

このトランザクション中に生成されたすべての実行待ちの `IDBRequest` オブジェクトは、`IDBRequest.error` 属性を `AbortError` `DOMException` に設定されます。

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

構文
--

```js
abort()
```

### 引数

なし

### 返値

なし (`undefined`)

### 例外

`InvalidStateError` `DOMException`

トランザクションが既にコミットまたはアボートされているとき投げられます。

例
-

以下のコード断片では、データベースの読み書きトランザクションを開き、オブジェクトストアにデータを追加します。トランザクションのイベントハンドラーに設定された関数により、成功時または失敗時にトランザクションを開いた結果を報告する点にも注目してください。最後に、`abort()` を用いて現在のトランザクションにおけるすべてのアクティビティをアボートします。動く例全体は、To-do Notifications アプリケーションを参照してください。(動く例を見る)

```js
const note = document.getElementById("notifications");

// IDB データを保存する用の db オブジェクトのインスタンス
let db;

// データベースを開く
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

DBOpenRequest.onsuccess = (event) => {
  note.innerHTML += "<li>データベースを初期化しました。</li>";

  // データベースを開いた結果を変数 db に格納する。これは後でよく使う
  db = DBOpenRequest.result;

  // データをデータベースに追加するため、addData() 関数を実行する
  addData();
};

function addData() {
  // IDB に挿入できる新しいオブジェクトを生成する
  const newItem = [
    {
      taskTitle: "Walk dog",
      hours: 19,
      minutes: 30,
      day: 24,
      month: "December",
      year: 2013,
      notified: "no",
    },
  ];

  // データベースの読み書きトランザクションを開き、データを追加する準備をする
  const transaction = db.transaction(["toDoList"], "readwrite");

  // トランザクションを開くのに成功したら報告する
  transaction.oncomplete = (event) => {
    note.innerHTML +=
      "<li>トランザクション完了: データベースの変更が完了しました。</li>";
  };

  transaction.onerror = (event) => {
    note.innerHTML +=
      "<li>トランザクションはエラーのため開けませんでした。アイテムは重複させられません。</li>";
  };

  // トランザクション上でオブジェクトストアを生成する
  const objectStore = transaction.objectStore("toDoList");

  // オブジェクトストアに newItem オブジェクトを追加する
  const objectStoreRequest = objectStore.add(newItem[0]);

  objectStoreRequest.onsuccess = (event) => {
    // 要求の成功を報告する (これは、アイテムがデータベースにに正常に格納されたことを意味しません。
    // これを知るには、transaction.onsuccess を用いる必要があります)
    note.innerHTML += "<li>要求に成功しました。</li>";
  };

  // 今行ったトランザクションをアボートする
  transaction.abort();
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbtransaction-abort② |

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

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

関連情報
----

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


IDBTransaction: db プロパティ - Web API

IDBTransaction: db プロパティ
========================

`IDBTransaction` インターフェイスの読み取り専用プロパティ **`db`** は、このトランザクションが紐づいたデータベース接続を返します。

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

値
-

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

例
-

以下のコード断片では、データベースの読み書きトランザクションを開き、オブジェクトストアにデータを追加します。トランザクションのイベントハンドラーに設定された関数により、成功時または失敗時にトランザクションを開いた結果を報告する点にも注目してください。最後に、`db` を用いて紐づいたデータベース接続を返します。動く例全体は、To-do Notifications アプリケーションを参照してください。(動く例を見る)

```js
const note = document.getElementById("notifications");

// IDB データを保存する用の db オブジェクトのインスタンス
let db;

// データベースを開く
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

DBOpenRequest.onsuccess = (event) => {
  note.innerHTML += "<li>データベースを初期化しました。</li>";

  // データベースを開いた結果を変数 db に格納する
  // これは後でよく使う
  db = DBOpenRequest.result;

  // addData() 関数を実行し、データをデータベースに追加する
  addData();
};

function addData() {
  // IDB に挿入できる新しいオブジェクトを生成する
  const newItem = [
    {
      taskTitle: "Walk dog",
      hours: 19,
      minutes: 30,
      day: 24,
      month: "December",
      year: 2013,
      notified: "no",
    },
  ];

  // データベースの読み書きトランザクションを開き、データを追加する準備をする
  const transaction = db.transaction(["toDoList"], "readwrite");

  // トランザクションを開くのに成功したら報告する
  transaction.oncomplete = (event) => {
    note.innerHTML +=
      "<li>トランザクション完了: データベースの変更が完了しました。</li>";
  };

  transaction.onerror = (event) => {
    note.innerHTML +=
      "<li>トランザクションはエラーのため開けませんでした。アイテムは重複させられません。</li>";
  };

  // トランザクション上でオブジェクトストアを生成する
  const objectStore = transaction.objectStore("toDoList");

  // オブジェクトストアに newItem オブジェクトを追加する
  const objectStoreRequest = objectStore.add(newItem[0]);

  objectStoreRequest.onsuccess = (event) => {
    // 要求の成功を報告する (これは、アイテムがデータベースにに正常に格納されたことを意味しません。
    // これを知るには、transaction.onsuccess を用いる必要があります)
    note.innerHTML += "<li>要求に成功しました。</li>";
  };

  // このトランザクションが紐づいているデータベース (IDBDatabase) 接続を返す
  transaction.db;
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbtransaction-db① |

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

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

関連情報
----

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


complete - Web API

complete
========

`complete` イベントはトランザクションが成功裏に終了した場合に発生します。

|  |  |
| --- | --- |
| バブリング | なし |
| キャンセル | 不可 |
| インターフェイス | `Event` |
| イベントハンドラープロパティ | `oncomplete` (en-US) |

例
-

`addEventListener()` を使用:

```js
// データベースを開く
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

DBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;

  db.onerror = () => {
    console.log("データベース作成エラー");
  };

  // このデータベースの objectStore を作成
  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });

  // define what data items the objectStore will contain
  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });
};

DBOpenRequest.onsuccess = (event) => {
  const db = DBOpenRequest.result;

  // DB の読み書きトランザクションを開き、データを追加する準備をする
  const transaction = db.transaction(["toDoList"], "readwrite");

  // `complete` のためのリスナーを追加
  transaction.addEventListener("complete", (event) => {
    console.log("トランザクション完了");
  });

  const objectStore = transaction.objectStore("toDoList");
  const newItem = {
    taskTitle: "my task",
    hours: 10,
    minutes: 10,
    day: 10,
    month: "January",
    year: 2019,
  };
  const objectStoreRequest = objectStore.add(newItem);
};
```

`oncomplete` (en-US) プロパティを使用:

```js
// データベースを開く
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

DBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;

  db.onerror = () => {
    console.log("データベース作成エラー");
  };

  // このデータベースの objectStore を作成
  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });

  // objectStore がどのようなデータアイテムを含むかを定義
  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });
};

DBOpenRequest.onsuccess = (event) => {
  const db = DBOpenRequest.result;

  // DB の読み書きトランザクションを開き、データを追加する準備ができる
  const transaction = db.transaction(["toDoList"], "readwrite");

  // `complete` のためのリスナーを追加
  transaction.oncomplete = (event) => {
    console.log("トランザクション完了");
  };

  const objectStore = transaction.objectStore("toDoList");
  const newItem = {
    taskTitle: "my task",
    hours: 10,
    minutes: 10,
    day: 10,
    month: "January",
    year: 2019,
  };
  const objectStoreRequest = objectStore.add(newItem);
};
```

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

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

関連情報
----

* IndexedDB の使用
* `oncomplete` (en-US) イベントハンドラープロパティ


IDBTransaction: durability プロパティ - Web API

IDBTransaction: durability プロパティ
================================

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

`IDBTransaction` の読み取り専用プロパティ **`durability`** は、トランザクションの生成時に設定された永続性のヒントを返します。これは、トランザクションをコミットする際にパフォーマンスを重視するか永続性を重視するかのユーザーエージェントへのヒントです。

このプロパティの値は、`IDBDatabase.transaction()` を用いてトランザクションを生成する際に `options` パラメーターで定義されます。

値
-

以下の `strings` リテラルのいずれかです。

`"strict"`

ユーザーエージェントは、すべての変更が永続的な保存メディアへに正常に書き込まれたことを確認した後でのみ、トランザクションが正常にコミットされたとみなすことができます。

`"relaxed"`

ユーザーエージェントは、すべての変更をオペレーティングシステムに書き込んだ後ただちに、追加の検証を行わず、トランザクションが正常にコミットされたとみなすことができます。

`"default"`

ユーザーエージェントは、保存領域の永続性に関するデフォルトの動作をするべきです。これは、別に指定していないトランザクション用のデフォルトです。

例
-

動く例全体は、To-do Notifications アプリケーションを参照してください。(動く例を見る)

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # dom-idbtransaction-durability |

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

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


IDBTransaction: objectStore() メソッド - Web API

IDBTransaction: objectStore() メソッド
==================================

`IDBTransaction` インターフェイスの **`objectStore()`** メソッドは、トランザクションの対象に追加済のオブジェクトストアを返します。

同じトランザクションオブジェクトで、同じ名前を指定して呼び出した場合、このメソッドを何回呼び出しても同じ `IDBObjectStore` インスタンスを返します。別のトランザクションオブジェクトで呼び出した場合、別の `IDBObjectStore` インスタンスを返します。

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

構文
--

```js
objectStore(name)
```

### 引数

`name`

要求するオブジェクトストアの名前です。

### 返値

オブジェクトストアにアクセスする用の `IDBObjectStore` オブジェクトを返します。

### 例外

`NotFoundError` `DOMException`

要求されたオブジェクトストアがトランザクションの対象に無いとき投げられます。

`InvalidStateError` `DOMException`

要求が削除されたか取り除かれたソースオブジェクトに対してなされたか、トランザクションが終了済みのとき投げられます。

例
-

以下のコード断片では、データベースの読み書きトランザクションを開き、オブジェクトストアにデータを追加します。トランザクションのイベントハンドラーに設定された関数により、成功時または失敗時にトランザクションを開いた結果を報告する点にも注目してください。動く例全体は、To-do Notifications アプリケーションを参照してください。(動く例を見る)

```js
const note = document.getElementById("notifications");

// IDB データを保存する用の db オブジェクトのインスタンス
let db;

// データベースを開く
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

DBOpenRequest.onsuccess = (event) => {
  note.innerHTML += "<li>データベースを初期化しました。</li>";

  // データベースを開いた結果を変数 db に格納する
  // これは後でよく使う
  db = DBOpenRequest.result;

  // addData() 関数を実行し、データをデータベースに追加する
  addData();
};

function addData() {
  // IDB に挿入できる新しいオブジェクトを生成する
  const newItem = [
    {
      taskTitle: "Walk dog",
      hours: 19,
      minutes: 30,
      day: 24,
      month: "December",
      year: 2013,
      notified: "no",
    },
  ];

  // データベースの読み書きトランザクションを開き、データを追加する準備をする
  const transaction = db.transaction(["toDoList"], "readwrite");

  // トランザクションを開くのに成功したら報告する
  transaction.oncomplete = (event) => {
    note.innerHTML +=
      "<li>トランザクション完了: データベースの変更が完了しました。</li>";
  };

  transaction.onerror = (event) => {
    note.innerHTML +=
      "<li>トランザクションはエラーのため開けませんでした。アイテムは重複させられません。</li>";
  };

  // トランザクション上でオブジェクトストアを生成する
  const objectStore = transaction.objectStore("toDoList");

  // オブジェクトストアに newItem オブジェクトを追加する
  const objectStoreRequest = objectStore.add(newItem[0]);

  objectStoreRequest.onsuccess = (event) => {
    // 要求の成功を報告する (これは、アイテムがデータベースにに正常に格納されたことを意味しません。
    // これを知るには、transaction.onsuccess を用いる必要があります)
    note.innerHTML += "<li>要求に成功しました。</li>";
  };
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbtransaction-objectstore① |

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

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

関連情報
----

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


IDBTransaction: abort イベント - Web API

IDBTransaction: abort イベント
==========================

`abort` イベントは `IndexedDB` のトランザクションがアボートされたとき発火します。

これは、以下のいずれかの理由により起こります。

* 悪い要求 (たとえば、同じキーを 2 回挿入しようとする、キーに一意性制約があるときに同じインデックスキーを挿入するなど)
* 明示的な `abort()` の呼び出し
* 要求の成功ハンドラーやエラーハンドラーにおける補足されなかった例外
* I/O エラー (ディスクが取り外されたり、OS やハードウェアのその他の故障など、実際にディスクに書き込むのに失敗した)
* 制限の超過

これはキャンセル不可のイベントで、対応する `IDBDatabase` オブジェクトにバブリングします。

構文
--

イベント名を `addEventListener()` のようなメソッドで用いるか、イベントハンドラープロパティを設定します。

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

イベント型
-----

汎用の `Event` です。

バブリング
-----

このイベントは `IDBDatabase` にバブリングします。`event.target` プロパティは、バブリング元の `IDBTransaction` オブジェクトへの参照です。

詳しくは、イベントのバブリングとキャプチャリングを参照してください。

例
-

この例ではデータベースを開き (存在しない場合はデータベースを作成し)、トランザクションを開き、`abort` イベントのリスナーを追加し、トランザクションをアボートすることによりイベントを発火させます。

```js
// データベースを開く
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

DBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;

  db.onerror = () => {
    console.log("データベース作成エラー");
  };

  // このデータベース用の objectStore を作成する
  const objectStore = db.createObjectStore("toDoList", {
    keyPath: "taskTitle",
  });

  // objectStore に保存するデータアイテムを定義する
  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });
};

DBOpenRequest.onsuccess = (event) => {
  const db = DBOpenRequest.result;

  // データベースの読み書きトランザクションを開き、データを追加する準備をする
  const transaction = db.transaction(["toDoList"], "readwrite");

  // `abort` のリスナーを追加する
  transaction.addEventListener("abort", () => {
    console.log("トランザクションがアボートされました");
  });

  // トランザクションをアボートする
  transaction.abort();
};
```

同じ例ですが、イベントハンドラーを `onabort` プロパティに代入しています。

```js
// データベースを開く
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

DBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;

  db.onerror = () => {
    console.log("データベース作成エラー");
  };

  // このデータベース用の objectStore を作成する
  const objectStore = db.createObjectStore("toDoList", {
    keyPath: "taskTitle",
  });

  // objectStore に保存するデータアイテムを定義する
  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });
};

DBOpenRequest.onsuccess = (event) => {
  const db = DBOpenRequest.result;

  // データベースの読み書きトランザクションを開き、データを追加する準備をする
  const transaction = db.transaction(["toDoList"], "readwrite");

  // `abort` のリスナーを追加する
  transaction.onabort = (event) => {
    console.log("トランザクションがアボートされました");
  };

  // トランザクションをアボートする
  transaction.abort();
};
```

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

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

関連情報
----

* IndexedDB の使用


TextTrack.label - Web API

TextTrack.label
===============

**`label`** は `TextTrack` インターフェイスの読み取り専用プロパティで、このテキストトラックの人間可読なラベルがあれば、それを返します。

値
-

`label` を含む文字列、または空文字列です。

例
-

以下の例では、 `label` の値がコンソールに表示されます。

```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
console.log(track.label);
```

仕様書
---

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

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

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


TextTrack.mode - Web API

TextTrack.mode
==============

`TextTrack` インターフェイスの **`mode`** プロパティは、テキストトラックのモードを指定して制御する `disabled`, `hidden`, `showing` のいずれかの文字列です。この値を読み取って現在のモードを決定したり、この値を変更してモードを切り替えることができます。

さらに、 Safari で字幕のキューを表示するには、独自の動画プレーヤーコントロールを実装する際に、 **`default`** 論理属性を true に設定する必要があります。

### 値

文字列で、このトラックの現在のモードを示します。以下のいずれかです。

`disabled`

テキストトラックは現在無効になっています。トラックの存在は DOM で公開されていますが、ユーザーエージェントはそれ以外の場合は無視しています。キューはアクティブではなく、イベントは発行されておらず、ユーザーエージェントはトラックのキューを取得しようとしません。テキストトラックが `default` 論理値属性を持っている場合の既定値は `showing` です。

`hidden`

テキストトラックは現在アクティブですが、キューを表示しません。 ユーザーエージェントがまだトラックのキューを取得しようとしていない場合は、すぐに取得します（それにより、トラックの `TextTrack.cues` プロパティが設定されます）。 テキストが表示されていなくても、ユーザーエージェントはアクティブなキューのリストを（トラックの `activeCues` プロパティに）保持しており、イベントは対応する時間に発生します。

`showing`

テキストトラックは現在有効で、表示されています。トラックのキューリストがまだ取得されていない場合は、すぐに取得されるでしょう。 `activeCues` リストは維持されており、イベントは適切な時刻に発行されています。トラックのテキストはスタイル設定とトラックの `kind` に基づいて適切に描画されます。これは、テキストトラックの `default` 論理属性が指定された場合の既定値です。論理値を指定します。

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

`mode` の既定値は、 `default` 論理値属性が指定されていない場合は `disabled` で、指定されている場合の `mode` の既定値は `showing` です。テキストトラックが `disabled` の状態で読み込まれると、対応する WebVTT ファイルは、状態が `showing` または `hidden` のいずれかに変わるまで読み込まれません。このようにして、キューが実際に必要とされない限り、リソースの取得とメモリの使用は回避されます。

しかし、これは、例えば、ページ読み込み時にキューのいくつかの側面を処理するために `load` イベントを処理している間にトラックのキューに関係するアクションを実行したい場合、トラックモードが最初に `disabled` になっていた場合、キューの読み込みを起動するために `mode` を `hidden` または `showing` のいずれかに変更しなければならないことを意味しています。

モードが `showing` の場合、テキストトラックはその `kind` によって異なる方法で実行されます。 一般に次のとおりです。

* `kind` が `"subtitles"` (字幕) または `"captions"` (キャプション) のトラックは、動画の上にキューを重ねてレンダリングされます。
* `kind` が `"descriptions"` (説明) であるトラックは、視覚的ではない形式で表示されます (例えば、動画においてテキストはアクションを声で説明することがあります)。
* `kind` が `"chapters"`（チャプター）のトラックは、ユーザーエージェントまたはウェブサイトまたはウェブアプリによって、名前付きチャプターをナビゲートするためのインターフェイスを構築して表示するために使用されます。 ここで、リスト内の各キューはメディア内のチャプターを表します。 その後、ユーザーは、キューの開始位置で開始し、キューの終了位置で終了する目的のチャプターに移動できます。
例
-

この例では、キューが終了するたびに動画が自動的に再生を一時停止するように、テキストトラックのキューを設定します。これは、各キューの `pauseOnExit` プロパティを `true` に設定することで実現します。ただし、トラックのキューを確実に利用できるようにするために、まず `mode` を `showing`に設定します。

```js
window.addEventListener("load", (event) => {
  let trackElem = document.querySelector("track");
  let track = trackElem.track;

  track.mode = "showing";

  for (const cue of track.cues) {
    cue.pauseOnExit = true;
  }
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-texttrack-mode-dev |

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

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

関連情報
----

* WebVTT
* `TextTrack`
* `TextTrackList` (en-US)
* `TextTrackCueList`
* `VTTCue`
* `<track>`
* `HTMLTrackElement`


TextTrack.inBandMetadataTrackDispatchType - Web API

TextTrack.inBandMetadataTrackDispatchType
=========================================

**`inBandMetadataTrackDispatchType`** は `TextTrack` インターフェイスの読み取り専用プロパティで、この `TextTrack` オブジェクトが表すテキストトラックの帯域内メタデータディスパッチ種別を返します。

帯域内メタデータディスパッチ種別とは、帯域内メタデータトラック用にメディアリソースから抽出された文字列のことです。このようなトラックが保有できるメディアリソースの例としては、ウェブ上で放送をストリーミングしているテレビ局が挙げられます。テキストトラックは、広告ターゲティングのためのメタデータ、料理番組中のレシピデータなどの追加情報、ゲーム番組中のトリビアゲームデータを含めるために使用することができます。

この属性の値は、これらのトラックを専用のスクリプトモジュールが読み込まれたときに添付するために使用することができます。

値
-

`inBandMetadataTrackDispatchType` を含む文字列、または空文字列です。

例
-

以下の例では、`inBandMetadataTrackDispatchType`の値がコンソールに表示されます。

```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
console.log(track.inBandMetadataTrackDispatchType);
```

仕様書
---

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

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

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


TextTrack.kind - Web API

TextTrack.kind
==============

**`kind`** は `TextTrack` インターフェイスの読み取り専用プロパティで、このオブジェクトが表すテキストトラックの種類を返します。 これは、ユーザーエージェントがトラックをどのように処理するかを決定します。

値
-

文字列です。以下のうちの何れかです。

`"subtitles"`

キューは動画に重ねて表示されます。キューの位置は、`TextTrackCue` を継承するオブジェクトのプロパティ、例えば `VTTCue` を使用して制御されます。

`"captions"`

キューは動画に重ねて表示されます。キューの位置は、`TextTrackCue` を継承するオブジェクトのプロパティ、例えば `VTTCue` を使用して制御されます。

`"descriptions"`

キューは非視覚的な方法で利用できます。

`"chapters"`

ユーザーエージェントは、キューを選択することでナビゲートする仕組みを利用できるようにします。

`"metadata"`

メディアデータに関連する追加データで、インタラクティブビューで使用される可能性があるものです。

例
-

以下の例では、以下の例では `kind` の値がコンソールに表示されます。

```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
console.log(track.kind);
```

仕様書
---

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

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

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


TextTrack.addCue() - Web API

TextTrack.addCue()
==================

**`addCue()`** は `TextTrack` インターフェイスのメソッドで、新しいキューをキューのリストへ追加します。

構文
--

```js
addCue(cue)
```

### 引数

`cue`

`TextTrackCue` です。

**メモ:** `TextTrackCue` インターフェイスは、 `VTTCue` などの他のキューインターフェイスの親クラスとして使用される抽象的なクラスです。したがって、キューを追加する場合は `TextTrackCue` を継承したキュー型のいずれかを使用することになります。

### 返値

`undefined` です。

### 例外

`InvalidStateError` `DOMException`

この `TextTrackList` (en-US) のルールが、入力される `TextTrackCue` に適切なルールと一致しない場合に発生します。

例
-

以下の例では、 `addCue()` を使用して、動画のテキストトラックに 2 つのキューを追加しています。

```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
track.addCue(new VTTCue(0, 0.9, "Hildy!"));
track.addCue(new VTTCue(1, 1.4, "How are you?"));
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-texttrack-addcue-dev |

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

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


TextTrack.cues - Web API

TextTrack.cues
==============

**`cues`** は `TextTrack` インターフェイスの読み取り専用プロパティで、トラックのこのすべてのキューが入った `TextTrackCueList` オブジェクトを返します。

値
-

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

例
-

以下の例では、 `addCue()` を使用して、動画のテキストトラックに 2 つのキューを追加しています。 `cues` の値はコンソールに表示されます。返された `TextTrackCueList` オブジェクトには、 2 つのキューが格納されます。

```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
track.addCue(new VTTCue(0, 0.9, "Hildy!"));
track.addCue(new VTTCue(1, 1.4, "How are you?"));
console.log(track.cues);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-texttrack-cues-dev |

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

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


TextTrack.activeCues - Web API

TextTrack.activeCues
====================

**`activeCues`** は `TextTrack` インターフェイスの読み取り専用プロパティで、現在アクティブなキューを列挙した `TextTrackCueList` オブジェクトを返します。

値
-

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

例
-

以下の例では、動画に新しい `TextTrack` を追加しています。 `activeCues` はコンソールに表示されます。

```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
console.log(track.activeCues);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-texttrack-activecues-dev |

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

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


TextTrack.id - Web API

TextTrack.id
============

**`id`** は `TextTrack` インターフェイスの読み取り専用プロパティで、このトラックの ID があれば、それを返します。

値
-

ID の入った文字列、または空文字列です。

例
-

以下の例では、`id` の値がコンソールに表示されます。

```js
const video = document.querySelector("video");
const track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
console.log(track.id);
```

仕様書
---

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

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

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


TextTrack.removeCue() - Web API

TextTrack.removeCue()
=====================

**`removeCue()`** は `TextTrack` インターフェイスのメソッドで、キューのリストからキューを取り除きます。

構文
--

```js
removeCue(cue)
```

### 引数

`cue`

`TextTrackCue` です。

### 返値

`undefined` です。

### 例外

`NotFoundError` `DOMException`

指定されたキューがキューのリストに見つからなかった場合に発生します。

**メモ:** `TextTrackCue` インターフェイスは、 `VTTCue` などの他のキューインターフェイスの親クラスとして使用される抽象的なクラスです。したがって、キューを追加する場合は `TextTrackCue` を継承したキュー型のいずれかを使用することになります。

例
-

以下の例では、`addCue()` を使用して動画のテキストトラックにキューを追加し、`removeCue` を使用してキューを削除しています。

```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
let cue = new VTTCue(0, 0.9, "Hildy!");
track.addCue(cue);
track.removeCue(cue);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-texttrack-removecue-dev |

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

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


TextTrack: cuechange イベント - Web API

TextTrack: cuechange イベント
=========================

**`cuechange`** イベントは、 `TextTrack` が現在表示しているキューが変更されたときに発生します。このイベントは、表示されているものがあれば、 `TextTrack` および `HTMLTrackElement` の両方に発生します。

構文
--

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

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

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

イベント型
-----

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

例
-

`cuechange` イベントのリスナーを `TextTrack` に設定するには、 `addEventListener()` メソッドを使用します。

```js
track.addEventListener("cuechange", () => {
  const cues = track.activeCues; // 現在のキューの配列
  // …
});
```

あるいは、 `oncuechange` イベントハンドラープロパティを設定しても構いません。

```js
track.oncuechange = (event) => {
  let cues = track.activeCues; // 現在のキューの配列
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-cuechange |
| HTML Standard # handler-texttrack-oncuechange |

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

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

関連情報
----

* WebVTT
* `HTMLTrackElement` における同一のイベント: `cuechange`


TextTrack.language - Web API

TextTrack.language
==================

**`language`** は `TextTrack` インターフェイスの読み取り専用プロパティで、このテキストトラックの言語を返します。

これは HTML の `lang` 属性と同じ値を使用します。これらの値は RFC 5646: Tags for Identifying Languages (BCP 47 とも) で文書化されています。

値
-

言語識別子を格納した文字列。例: 米国英語なら `"en-US"` 、ブラジルポルトガル語なら `"pt-BR"` 。

例
-

以下の例では、 `language` の値がコンソールに表示されます。

```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en-US");
track.mode = "showing";
console.log(track.language);
```

仕様書
---

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

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

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


StylePropertyMapReadOnly.has() - Web API

StylePropertyMapReadOnly.has()
==============================

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

**`has()`** は `StylePropertyMapReadOnly` インターフェイスのメソッドで、指定されたプロパティが `StylePropertyMapReadOnly` オブジェクトにあるかどうかを示します。

構文
--

```js
var boolean = StylePropertyMapReadOnly.has(property);
```

### 引数

property

プロパティの名前です。

### 返値

論理値です。

例
-

ここでは、 `has()` メソッドを使用して、 padding-top プロパティが button 要素の style 属性に存在するかどうかを確認します。

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

// style 属性内のものを attributeStyleMap および has() で検索
const hasPadTop = buttonEl.attributeStyleMap.has('padding-top);

console.log(hasPadTop); // padding-top が style 属性にあれば true を記録
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-stylepropertymapreadonly-has |

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

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


StylePropertyMapReadOnly.get() - Web API

StylePropertyMapReadOnly.get()
==============================

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

**`get()`** は `StylePropertyMapReadOnly` インターフェイスのメソッドで、指定されたプロパティの最初の値を `CSSStyleValue` で返します。

構文
--

```js
var declarationBlock = StylePropertyMapReadOnly.get(property);
```

### 引数

property

値を取得するプロパティの名前です。

### 返値

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

例
-

少しだけ、プロパティと値を取得してみましょう。まず、 HTML の段落の中にリンクを作成し、 JavaScript で入力する定義リストを追加しましょう。

```html
<p>
  <a href="https://example.com">リンク</a>
</p>
<dl id="results"></dl>
```

カスタムプロパティや継承可能なプロパティなど、ちょっとした CSS を追加しています。

```css
p {
  font-weight: bold;
}
a {
  --color: red;
  color: var(--color);
}
```

Element インターフェイスの `computedStyleMap()` を使用して、 *StylePropertyMapReadOnly* オブジェクトを返します。興味のあるプロパティの配列を作成し、 StylePropertyMapReadOnly の `get()` メソッドを使用してそれらの値のみを取得します。

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

// すべての計算済みスタイルを `computedStyleMap` で受け取る
const styleMap = myElement.computedStyleMap();

// 入力する <dl> を取得
const stylesList = document.querySelector("#results");

// 関心のあるプロパティのリスト
const ofInterest = ["font-weight", "border-left-color", "color", "--color"];

// 関心のあるプロパティを反復処理
for (let i = 0; i < ofInterest.length; i++) {
  // プロパティ
  const cssProperty = document.createElement("dt");
  cssProperty.innerText = ofInterest[i];
  stylesList.appendChild(cssProperty);

  // 値
  const cssValue = document.createElement("dd");
  // use get() to find the value
  cssValue.innerText = styleMap.get(ofInterest[i]);
  stylesList.appendChild(cssValue);
}
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-stylepropertymapreadonly-get |

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

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

関連情報
----

* CSS 型付きオブジェクトモデル API (en-US)
* Houdini の学習: CSS 型付きオブジェクトモデル (en-US)


StylePropertyMapReadOnly.values() - Web API

StylePropertyMapReadOnly.values()
=================================

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

**`StylePropertyMapReadOnly.values()`** メソッドは、 `StylePropertyMapReadOnly` オブジェクトのそれぞれのインデックスに対応する値を含む新しい*配列イテレーター*を返します。

構文
--

```js
StylePropertyMapReadOnly.values();
```

### 引数

なし。

### 返値

新しい `Array` です。

例
-

この例では、 `values()` メソッドを使用して `Element.computedStyleMap()` の中にある値にアクセスすることができます。

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

// すべての計算済みスタイルを `computedStyleMap` で受け取る
const allComputedStyles = buttonEl.computedStyleMap();

// values は CSS 値の反復可能なリストを返す
const vals = allComputedStyles.values();
console.log(vals.next().value); // CSSStyleValue を返す
```

仕様書
---

#### No specification found

No specification data found for `api.StylePropertyMapReadOnly.values`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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


StylePropertyMapReadOnly.getAll() - Web API

StylePropertyMapReadOnly.getAll()
=================================

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

**`getAll()`** は `StylePropertyMapReadOnly` インターフェイスのメソッドで、指定されたプロパティの値を含む `CSSStyleValue` オブジェクトの配列を返します。

構文
--

```js
var cssStyleValues[] = StylePropertyMapReadOnly.getAll(property)
```

### 引数

property

すべての値を取得するプロパティの名前です。

### 返値

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

例
-

以下の例では、 `getAll()` を使用して `background-image` プロパティに対して使用しています。宣言されているそれぞれの背景画像の項目が入った `Array` を返します。

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

// `computedStyleMap` ですべての計算済みスタイルが取得できます
const allComputedStyles = buttonEl.computedStyleMap();

// getAll() を background-image プロパティに対して使用
const allBkImages = allComputedStyles.getAll("background-image");
console.log(allBkImages); // それぞれの背景画像を項目とした配列を出力
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-stylepropertymapreadonly-getall |

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

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


StylePropertyMapReadOnly.entries() - Web API

StylePropertyMapReadOnly.entries()
==================================

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

**`StylePropertyMapReadOnly.entries()`** メソッドは、このオブジェクトが持つ列挙可能なプロパティの `[key, value]` の組の配列を、 `for...in` ループで提供されるのと同じ順序で返します（違いは for-in ループではプロトタイプチェーン内のプロパティも列挙する点です）。

構文
--

```js
StylePropertyMapReadOnly.entries();
```

### 引数

なし。

### 返値

この `StylePropertyMapReadOnly` オブジェクトが持つ列挙可能な `[key, value]` の組の配列です。

例
-

こちらは、 `StylePropertyMapReadOnly.entries()` メソッドを使用して要素の計算済みスタイルを取得する例です。

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

// `computedStyleMap` ですべての計算済みスタイルが取得できます
const allComputedStyles = buttonEl.computedStyleMap();

// entries は項目の反復可能オブジェクトを返します
const iterableStyles = allComputedStyles.entries();

// align-content を最初の項目、 CSSStyleValue を 2 番目の項目とする 2 項目の配列を返します。
console.log(iterableStyles.next().value);
```

仕様書
---

#### No specification found

No specification data found for `api.StylePropertyMapReadOnly.entries`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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


StylePropertyMapReadOnly.size - Web API

StylePropertyMapReadOnly.size
=============================

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

**`size`** は `StylePropertyMapReadOnly` インターフェイスの読み取り専用プロパティで、 `StylePropertyMapReadOnly` オブジェクトの大きさを符号なし長整数で返します。

構文
--

```js
var size = StylePropertyMapReadOnly.size;
```

### 値

符号なし長整数です。

例
-

ここでは size プロパティを使用して、この button 要素の `computedStyleMap` に含まれる項目の数を返します。

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

// `computedStyleMap` ですべての計算済みスタイルが取得できます
const allComputedStyles = buttonEl.computedStyleMap();

// size を使用してマップ内にあるスタイルの数を取得します
const amountStyles = allComputedStyles.size;
console.log(amountStyles); // 338 と表示
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-stylepropertymapreadonly-size |

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

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


StylePropertyMapReadOnly.keys() - Web API

StylePropertyMapReadOnly.keys()
===============================

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

**`StylePropertyMapReadOnly.keys()`** メソッドは、 `StylePropertyMapReadOnly` の各項目のキーを含む新しい*配列イテレーター*を返します。

構文
--

```js
StylePropertyMapReadOnly.keys();
```

### 引数

なし。

### 返値

新しい `Array` です。

例
-

この例では、 `keys()` メソッドを使用して `Element.computedStyleMap()` の中にあるプロパティにアクセスすることができます。

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

// すべての計算済みスタイルを `computedStyleMap` で受け取る
const allComputedStyles = buttonEl.computedStyleMap();

// keys はプロパティの反復可能なリストを返す
const props = allComputedStyles.keys();
console.log(props.next().value); // align-content を返す
```

仕様書
---

#### No specification found

No specification data found for `api.StylePropertyMapReadOnly.keys`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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


StylePropertyMapReadOnly.forEach() - Web API

StylePropertyMapReadOnly.forEach()
==================================

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

**`StylePropertyMapReadOnly.forEach()`** メソッドは、指定された関数を `StylePropertyMapReadOnly` のそれぞれの要素に対して 1 回ずつ呼び出します。

構文
--

```js
StylePropertyMapReadOnly.forEach(function callback(currentValue[, index[, array]]) {
    //コード
}[, thisArg]);
```

### 引数

`callback`

それぞれの要素に対して呼び出す関数であり、 3 つの引数を取ります。

`currentValue`

処理しようとしている現在の要素の値です。

`index`省略可

処理しようとしている現在の要素の位置です。

`array`省略可

`forEach()` が呼び出された StylePropertyMapReadOnly です。

`thisArg` 省略可

`callback` を実行するときに **`this`** として使用する値（すなわち、 `Object` への参照）です。

### 返値

`undefined` です。

例
-

こちらは、 `forEach()` を `Element.computedStyleMap()` の結果に対して使用する例です。

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

// `computedStyleMap` ですべての計算済みスタイルが取得できます
const allComputedStyles = buttonEl.computedStyleMap();

// forEach ですべてのプロパティ/値の組に対してコードを実行することができます
allComputedStyles.forEach((elem, index, arr) => {
  // code to run for each pair
});
```

仕様書
---

#### No specification found

No specification data found for `api.StylePropertyMapReadOnly.forEach`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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


GeolocationCoordinates: longitude プロパティ - Web API

GeolocationCoordinates: longitude プロパティ
=======================================

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

`GeolocationCoordinates` インターフェイスの **`longitude`** プロパティは読み取り専用であり、地理的な位置の経度 10 進数で表す倍精度浮動小数点値です。
 Unix 時刻として提供される、計測時刻を表すタイムスタンプ共に、 `GeolocationCoordinates` オブジェクトは `GeolocationPosition` インターフェイスの一部であり、位置位置を取得して返す位置情報 API 関数が返すオブジェクト型です。

値
-

`longitude` の値は `Coordinates` オブジェクトによって記述された地球上の場所の地理的な経度を 10 進数で表したものです。この値は World Geodetic System 1984 仕様 (WGS 84) で定義されています。

**メモ:** ゼロ子午線（本初子午線、基準子午線とも呼ばれる）は、多くの人が思い浮かべるグリニッジ子午線と正確には同じではありません。これは IERS 基準子午線 であり、 5.3 秒 （102 メートル/335 フィート）だけグリニッジ子午線より東に位置しています。これはグローバルポジショニングシステム (GPS) で使われている規格と同じものです。

例
-

この単純な例では、ユーザーの位置情報を取得し、その結果の座標を表示します。

### JavaScript

以下の JavaScript コードでは、ユーザーがボタンをクリックすると、位置情報を取得して表示するように、イベントリスナーを作成しています。

```js
let button = document.getElementById("get-location");
let latText = document.getElementById("latitude");
let longText = document.getElementById("longitude");

button.addEventListener("click", () => {
  navigator.geolocation.getCurrentPosition((position) => {
    let lat = position.coords.latitude;
    let long = position.coords.longitude;

    latText.innerText = lat.toFixed(2);
    longText.innerText = long.toFixed(2);
  });
});
```

ボタン要素と緯度経度が描画される 2 つの要素をより参照しやすくするための変数を設定した後、 `addEventListener()` を `<button>` 要素で呼び出してイベントリスナーを確立しています。ユーザーがボタンをクリックすると、位置情報を取得して表示するようにします。

`click` イベントを受信すると、`getCurrentPosition()` を呼び出し、端末の現在位置を要求しています。これは非同期のリクエストなので、決定した位置を表す `GeolocationPosition` オブジェクトを put で受け取るコールバックを用意します。

`GeolocationPosition` オブジェクトから、 `position.coords.latitude` と `position.coords.longitude` を用いてユーザーの緯度と経度を取得し、表示される座標を更新できるようにします。 2 つの`<span>`要素は、小数点以下2桁の値に変換された後、対応する値を表示するように更新されます。

### HTML

結果を表示するための HTML は次のようになります。

```html
<p>
  あなたの位置は北緯 <span id="latitude">0.00</span>° 東経
  <span id="longitude">0.00</span>° です。
</p>
<button id="get-location">現在の位置を取得</button>
```

### 結果

この例を、ここで試しに実行してみてください。

仕様書
---

| Specification |
| --- |
| Geolocation API # latitude-longitude-and-accuracy-attributes |

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

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

関連情報
----

* 位置情報 API の使用
* 所属先の `GeolocationCoordinates` インターフェイス
* `GeolocationPosition` インターフェイス、位置情報 API の関数 `Geolocation.getCurrentPosition()` および `watchPosition()` から位置情報データを返すために用いられる最上位のインターフェイス。


GeolocationCoordinates: speed プロパティ - Web API

GeolocationCoordinates: speed プロパティ
===================================

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

**`GeolocationCoordinates.speed`** は読み取り専用のプロパティであり、 `double` 型で端末の移動速度をメートル毎秒で表します。実装でこれを計測することができなければ、この値は `null` になります。

値
-

`double` 型で端末の移動速度をメートル毎秒で表します。

仕様書
---

| Specification |
| --- |
| Geolocation API # speed-attribute |

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

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

関連情報
----

* 位置情報 API の使用
* `GeolocationCoordinates`


GeolocationCoordinates: latitude プロパティ - Web API

GeolocationCoordinates: latitude プロパティ
======================================

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

**`GeolocationCoordinates.latitude`** は読み取り専用のプロパティであり、 `double` 値でその位置の緯度を 10 進形式で表します。

値
-

`double` 値でその位置の緯度を 10 進形式で表します。

仕様書
---

| Specification |
| --- |
| Geolocation API # latitude-longitude-and-accuracy-attributes |

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

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

関連情報
----

* 位置情報 API の使用
* `GeolocationCoordinates`


GeolocationCoordinates: heading プロパティ - Web API

GeolocationCoordinates: heading プロパティ
=====================================

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

**`GeolocationCoordinates.heading`** は読み取り専用のプロパティであり、 `double` 値で端末の移動方向を表します。この値は角度で指定され、端末の移動方向が北向きからどれだけ角度があるかを示します。 `0` 度は真北を表し、そこから時計回りに指定します（すなわち、東は `90` 度で西は `270` 度になります）。 `GeolocationCoordinates.speed` が `0` である場合、 `heading` は `NaN` になります。端末が移動方向の情報を提供できない場合、この値は `null` になります。

値
-

`double` 値で端末の移動方向を表します。

仕様書
---

| Specification |
| --- |
| Geolocation API # heading-attribute |

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

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

関連情報
----

* 位置情報 API の使用
* `GeolocationCoordinates`


GeolocationCoordinates: accuracy プロパティ - Web API

GeolocationCoordinates: accuracy プロパティ
======================================

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

**`GeolocationCoordinates.accuracy`** は読み取り専用プロパティで、厳密な正の `double` 値で、信頼度 95% の `GeolocationCoordinates.latitude` および
 `GeolocationCoordinates.longitude` の精度をメートル単位で表します。

値
-

 正の `double` 値で、信頼度 95% の `GeolocationCoordinates.latitude` および
 `GeolocationCoordinates.longitude` の精度をメートル単位で表します。

仕様書
---

| Specification |
| --- |
| Geolocation API # latitude-longitude-and-accuracy-attributes |

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

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

関連情報
----

* 位置情報 API の使用
* `GeolocationCoordinates`


GeolocationCoordinates: altitude プロパティ - Web API

GeolocationCoordinates: altitude プロパティ
======================================

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

**`GeolocationCoordinates.altitude`** は読み取り専用のプロパティであり、 `double` 値で、その位置の WGS84 楕円体（公称海面水準を定義するもの）からの高度をメートル単位で表します。この値は、実装がこのデータを提供できない場合は `null` となります。

値
-

`double` 値で、その位置の WGS84 楕円体（公称海面レベルを定義するもの）からの高度をメートル単位で表します。

仕様書
---

| Specification |
| --- |
| Geolocation API # altitude-and-altitudeaccuracy-attributes |

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

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

関連情報
----

* 位置情報 API の使用
* 所属先の `GeolocationCoordinates` インターフェイス
* National Imagery and Mapping Agency Technical Report 8350.2, Third Edition (WGS84)


GeolocationCoordinates: altitudeAccuracy プロパティ - Web API

GeolocationCoordinates: altitudeAccuracy プロパティ
==============================================

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

**`GeolocationCoordinates.altitudeAccuracy`** は読み取り専用のプロパティで、厳密な正の `double` 値で、信頼度 95% の `altitude` の精度をメートル単位で表します。実装が高度の計測に対応していない場合、この値は `null` になります。

値
-

正の `double` 値で、信頼度 95% の `altitude` の精度をメートル単位で表します。

仕様書
---

| Specification |
| --- |
| Geolocation API # altitude-and-altitudeaccuracy-attributes |

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

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

関連情報
----

* 位置情報 API の使用
* `GeolocationCoordinates`


DecompressionStream.writable - Web API

DecompressionStream.writable
============================

`DecompressionStream` インターフェイスの読み取り専用プロパティ **`writable`** は、`WritableStream` を返します。

値
-

`WritableStream` です。

例
-

この例では、`DecompressionStream` から `WritableStream` を返します。

```js
let stream = new DecompressionStream("gzip");
console.log(stream.writeable); // WritableStream
```

仕様書
---

| Specification |
| --- |
| Streams Standard # dom-generictransformstream-writable |

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

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


DecompressionStream() - Web API

DecompressionStream()
=====================

**`DecompressionStream()`** コンストラクターは、データのストリームを展開する新しい `DecompressionStream` オブジェクトを生成します。

構文
--

```js
new DecompressionStream(format)
```

### 引数

`format`

以下の圧縮形式のうちのいずれかです。

* `"gzip"`
* `"deflate"`
* `"deflate-raw"`

例外
--

`TypeError`

コンストラクターに渡された形式がサポートされていないとき投げられます。

例
-

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

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

仕様書
---

| Specification |
| --- |
| Compression Streams # dom-decompressionstream-decompressionstream |

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

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


DecompressionStream.readable - Web API

DecompressionStream.readable
============================

`DecompressionStream` インターフェイスの読み取り専用プロパティ **`readable`** は、`ReadableStream` を返します。

値
-

`ReadableStream` です。

例
-

この例では、`DecompressionStream` から `ReadableStream` を返します。

```js
let stream = new DecompressionStream("gzip");
console.log(stream.readable); // ReadableStream
```

仕様書
---

| Specification |
| --- |
| Streams Standard # dom-generictransformstream-readable |

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

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


XRReferenceSpaceType - Web API

XRReferenceSpaceType
====================

**`XRReferenceSpaceType`** 列挙型は、WebXR がサポートしている参照空間のタイプを識別する文字列を定義します。 このタイプは、`requestReferenceSpace()` メソッドを呼び出して `XRSession` (en-US) の参照空間を取得するときに使用します。

値
-

`XRSession.requestReferenceSpace()` によって返される参照空間は、`XRReferenceSpace` または `XRBoundedReferenceSpace` のいずれかです。 以下の表の「インターフェイス」列は、各参照空間タイプ定数に対して 2 つの型のどちらが返されるかを示しています。

### 参照空間記述子

参照空間のタイプを以下の表に示します。 それらのユースケースと、それらを実装するために使用されるインターフェイスについての簡単な情報が含まれています。

| XRReferenceSpaceType | 説明 | インターフェイス |
| --- | --- | --- |
| `bounded-floor` | `local` タイプと同様ですが、返されたオブジェクトの `boundsGeometry` によって指定された所定の境界の外にユーザーが移動することは想定されていません。 | `XRBoundedReferenceSpace` |
| `local` | セッションが作成されたときのネイティブの原点がビューアーの位置の近くにある追跡空間。 正確な位置は、基盤となるプラットフォームと実装によって異なります。 ユーザーは、開始位置を超えて移動することはあまり想定されておらず、この使用例に合わせて追跡が最適化されています。6 自由度（6DoF）追跡のデバイスの場合、`local` 参照空間は、環境に対して原点を安定させようとします。 | `XRReferenceSpace` |
| `local-floor` | `local` タイプと同様ですが、開始位置は、ビューアーが立つことができる安全な場所に配置され、y 軸の値は床レベルで 0 です。 その床レベルがわからない場合、ユーザーエージェントは床レベルを推定します。 推定床レベルがゼロ以外の場合、ブラウザーはフィンガープリントを回避するような方法で丸めることが期待されます（最も近いセンチメートルまで）。 | `XRReferenceSpace` |
| `unbounded` | おそらく原点から非常に長い距離にわたって、ユーザーが自由に移動できる追跡空間。 ビューアーはまったく追跡されません。 追跡は、ユーザーの現在位置周辺の安定性のために最適化されているため、ネイティブの原点は、そのニーズに対応するために必要に応じてドリフトする可能性があります。 | `XRReferenceSpace` |
| `viewer` | ネイティブの原点がビューアーの位置と向きを追跡する追跡空間。 これは、ユーザーが物理的に移動できる環境で使用し、没入型（immersive）とインライン（inline）の両方の `XRSession` (en-US) のすべてのインスタンスをサポートしますが、インラインセッションで最も役立ちます。 ビューアーと入力の間の距離を決定するとき、またはオフセット空間を操作するときに特に役立ちます。 そうでない場合、通常、他の参照空間タイプの 1 つがより頻繁に使用されます。 | `XRReferenceSpace` |

仕様
--

| Specification |
| --- |
| WebXR Device API # dom-xrsession-requestreferencespace |

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

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


ServiceWorkerGlobalScope: notificationclose イベント - Web API

ServiceWorkerGlobalScope: notificationclose イベント
================================================

**`notificationclose`** イベントは、 `ServiceWorkerRegistration.showNotification()` によって生成された表示中の通知をユーザーが閉じたときに発生します。

メインスレッドや、サービスワーカー以外のワーカーが `Notification()` コンストラクターを使用して生成した通知では、`Notification` オブジェクト自身が `close` イベントを受け取ります。

**メモ:** `ServiceWorkerGlobalScope` 内で `Notification()` コンストラクターを使用して通知を生成しようとすると、エラーが発行されます。

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

構文
--

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

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

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

イベント型
-----

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

Event

ExtendableEvent

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

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

`NotificationEvent.notification` 読取専用

クリックされイベントが発行された通知を表す `Notification` オブジェクトを返します。

`NotificationEvent.action` 読取専用

ユーザーがクリックした通知ボタンの文字列 ID を返します。この値は、ユーザーがアクションボタン以外のどこかで通知をクリックした場合、またはその通知にボタンがなかった場合、空文字列を返します。

例
-

```js
// サービスワーカーの内部で
self.onnotificationclose = (event) => {
  console.log("On notification close: ", event.notification.tag);
};
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-serviceworkerglobalscope-onnotificationclose |

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

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


ServiceWorkerGlobalScope: sync イベント - Web API

ServiceWorkerGlobalScope: sync イベント
===================================

**`sync`** は `ServiceWorkerGlobalScope` インターフェイスのイベントで、 `SyncManager` にイベントを登録したページ（またはワーカー）が実行されているとき、ネットワーク接続が利用できるようになるとすぐに発行されます。

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

構文
--

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

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

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

イベント型
-----

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

Event

ExtendableEvent

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

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

`SyncEvent.tag` 読取専用

この `SyncEvent` の開発者が定義した識別子を返します。

`SyncEvent.lastChance` 読取専用

ユーザーエージェントが現在の同期を試行した後、それ以上同期を試行しない場合には `true` を返します。

例
-

以下の例は、サービスワーカーで同期イベントに応答する方法を示しています。

```js
self.addEventListener("sync", (event) => {
  if (event.tag === "sync-messages") {
    event.waitUntil(sendOutboxMessages());
  }
});
```

また、 `onsync` プロパティを使用して、イベントハンドラーを設定することもできます。

```js
self.onsync = (event) => {
  // ...
};
```

仕様書
---

| Specification |
| --- |
| Web Background Synchronization # dom-serviceworkerglobalscope-onsync |

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

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

関連情報
----

* Richer offline experiences with the Periodic Background Sync API
* A Periodic Background Sync demo app


ServiceWorkerGlobalScope: push イベント - Web API

ServiceWorkerGlobalScope: push イベント
===================================

**`push`** イベントは、サービスワーカーがプッシュメッセージを受信したときにサービスワーカーのグローバルスコープ (`ServiceWorkerGlobalScope` インターフェイスで表現されるもの) に送られます。

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

構文
--

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

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

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

イベント型
-----

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

Event

ExtendableEvent

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

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

`PushEvent.data` 読取専用

`PushMessageData` オブジェクトへの参照を返します。これには `PushSubscription` に送られたデータが含まれています。

例
-

この例では、JSON データを受け取り、解釈し、メッセージに含まれる情報に基づいて処理するためにメッセージを送出する `push` イベント用のハンドラーを設定します。

```js
self.addEventListener(
  "push",
  (event) => {
    let message = event.data.json();

    switch (message.type) {
      case "init":
        doInit();
        break;
      case "shutdown":
        doShutdown();
        break;
    }
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Push API # extensions-to-the-serviceworkerglobalscope-interface |
| Push API # dom-serviceworkerglobalscope-onpush |

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

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

関連情報
----

* プッシュ API の使用
* `pushsubscriptionchange` イベント


ServiceWorkerGlobalScope: contentdelete イベント - Web API

ServiceWorkerGlobalScope: contentdelete イベント
============================================

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

**`contentdelete`** は `ServiceWorkerGlobalScope` インターフェイスのイベントで、ユーザーエージェントを通じて索引付けされたコンテンツから項目が削除されたときに発行されます。

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

構文
--

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

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

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

イベント型
-----

`ContentIndexEvent` (en-US) です。 `Event` を継承しています。

Event

ExtendableEvent

ContentIndexEvent

(en-US)イベントプロパティ
---------

*以下に挙げたプロパティに加えて、このインターフェイスは親である `Event` のプロパティを継承しています。*

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

削除されたコンテンツのインデックスを `id` で識別する文字列。

例
-

以下の例では、`contentdelete` イベントハンドラーを使用して、削除されたインデックス項目に関連するキャッシュされたコンテンツを削除しています。

```js
self.addEventListener("contentdelete", (event) => {
  const deletion = caches
    .open("cache-name")
    .then((cache) =>
      Promise.all([
        cache.delete(`/icon/${event.id}`),
        cache.delete(`/content/${event.id}`),
      ]),
    );
  event.waitUntil(deletion);
});
```

また、 `oncontentdelete` プロパティを使用して、イベントハンドラーを設定することもできます。

```js
self.oncontentdelete = (event) => {
  // ...
};
```

仕様書
---

| Specification |
| --- |
| Content Index # dom-serviceworkerglobalscope-oncontentdelete |

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

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

関連情報
----

* コンテンツ索引 API (en-US)
* An introductory article on the Content Index API
* An app which uses the Content Index API to list and remove 'save for later' content


ServiceWorkerGlobalScope: message イベント - Web API

ServiceWorkerGlobalScope: message イベント
======================================

**`message`** は `ServiceWorkerGlobalScope` インターフェイスのイベントで、着信メッセージを受信したときに発生します。 制御されたページは、 `ServiceWorker.postMessage()` メソッドを使用して、サービスワーカーにメッセージを送信することができます。
 サービスワーカーは、任意で、制御されたページに対応する `Client.postMessage()` を介して返信することができます。

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

構文
--

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

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

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

イベント型
-----

`ExtendableMessageEvent` です。 `ExtendableEvent` を継承しています。

Event

ExtendableEvent

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

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

`ExtendableMessageEvent.data` 読取専用

イベントのデータを返します。任意のデータ型にすることができます。

`ExtendableMessageEvent.origin` 読取専用

メッセージを送信した `Client` のオリジンを返します。

`ExtendableMessageEvent.lastEventId` 読取専用

サーバー送信イベントにおいて、イベントソースの最後のイベント ID を表します。これは空文字列です。

`ExtendableMessageEvent.source` 読取専用

メッセージを送信した `Client` オブジェクトへの参照を返します。

`ExtendableMessageEvent.ports` 読取専用

関連するメッセージチャネルのポートを表す `MessagePort` オブジェクトを含む配列を返します。

例
-

以下の例では、ページが `ServiceWorkerRegistration.active` を介して `ServiceWorker` オブジェクトへのハンドルを取得し、その `postMessage()` 関数を呼び出します。

```js
// 制御されているページ内
if (navigator.serviceWorker) {
  navigator.serviceWorker.register("service-worker.js");

  navigator.serviceWorker.addEventListener("message", (event) => {
    // event は MessageEvent オブジェクトです
    console.log(`The service worker sent me a message: ${event.data}`);
  });

  navigator.serviceWorker.ready.then((registration) => {
    registration.active.postMessage("Hi service worker");
  });
}
```

サービスワーカーは、次のようにして "message" イベントを待ち受けすることでメッセージを受け取ることができます。

```js
// サービスワーカー内
addEventListener("message", (event) => {
  // event は ExtendableMessageEvent オブジェクトです
  console.log(`The client sent me a message: ${event.data}`);

  event.source.postMessage("Hi client");
});
```

また、スクリプトは `onmessage` を使用してメッセージを待ち受けすることもできます。

```js
// service-worker.js
self.onmessage = (event) => {
  // event は ExtendableMessageEvent オブジェクトです
  console.log(`The client sent me a message: ${event.data}`);

  event.source.postMessage("Hi client");
};
```

仕様書
---

| Specification |
| --- |
| Service Workers # eventdef-serviceworkerglobalscope-message |
| Service Workers # dom-serviceworkerglobalscope-onmessage |

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

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

関連情報
----

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


ServiceWorkerGlobalScope.registration - Web API

ServiceWorkerGlobalScope.registration
=====================================

**`registration`** は `ServiceWorkerGlobalScope` インターフェイスの読み取り専用プロパティで、サービスワーカーの登録を表す `ServiceWorkerRegistration` オブジェクトの参照を返します。

値
-

`ServiceWorkerRegistration` オブジェクト。

仕様書
---

| Specification |
| --- |
| Service Workers # service-worker-global-scope-registration |

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

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

関連情報
----

* サービスワーカーの使用
* サービスワーカーの基本的なコード例
* Is ServiceWorker ready?
* `Promise`
* ウェブワーカーの使用


ServiceWorkerGlobalScope: activate イベント - Web API

ServiceWorkerGlobalScope: activate イベント
=======================================

**`activate`** は `ServiceWorkerGlobalScope` インターフェイスのイベントで、`ServiceWorkerRegistration` が新しいアクティブワーカー（`ServiceWorkerRegistration.active` worker）を取得すると発生します。

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

構文
--

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

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

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

イベント型
-----

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

Event

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

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

例
-

次のスニペットは、`activate` イベントハンドラーを使用してキャッシュをアップグレードする方法を示しています。

```js
globalScope.addEventListener("activate", (event) => {
  const cacheAllowlist = ["v2"];

  event.waitUntil(
    caches.forEach((cache, cacheName) => {
      if (!cacheAllowlist.includes(cacheName)) {
        return caches.delete(cacheName);
      }
    }),
  );
});
```

次のように `onactivate` プロパティを使用してイベントハンドラーを設定することもできます。

```js
globalScope.onactivate = (event) => {
  // ...
};
```

仕様書
---

| Specification |
| --- |
| Service Workers # service-worker-global-scope-activate-event |
| Service Workers # dom-serviceworkerglobalscope-onactivate |

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

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

関連情報
----

* `install` イベント
* `ServiceWorkerGlobalScope`
* サービスワーカー API


ServiceWorkerGlobalScope: periodicsync イベント - Web API

ServiceWorkerGlobalScope: periodicsync イベント
===========================================

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

**`periodicsync`** は `ServiceWorkerGlobalScope` インターフェイスのイベントで、 `PeriodicSyncManager`を登録したときに指定された時間間隔で発行されます。

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

構文
--

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

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

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

イベント型
-----

`PeriodicSyncEvent` (en-US) です。 `Event` を継承しています。

Event

ExtendableEvent

PeriodicSyncEvent

(en-US)イベントプロパティ
---------

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

`PeriodicSyncEvent.tag` (en-US) 読取専用

この `PeriodicSyncEvent` の開発者定義の識別子を返します。ウェブアプリケーションで複数のタグを使用すると、異なる頻度で異なる定期的なタスクを実行することができます。

例
-

以下の例は、サービスワーカーで定期的な同期イベントに応答する方法を示しています。

```js
self.addEventListener("periodicsync", (event) => {
  if (event.tag === "get-latest-news") {
    event.waitUntil(fetchAndCacheLatestNews());
  }
});
```

また、 `onperiodicsync` プロパティを使用してイベントハンドラーを設定することもできます。

```js
self.onperiodicsync = (event) => {
  // ...
};
```

仕様書
---

| Specification |
| --- |
| Web Periodic Background Synchronization # periodicsync-event |
| Web Periodic Background Synchronization # dom-serviceworkerglobalscope-onperiodicsync |

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

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

関連情報
----

* Richer offline experiences with the Periodic Background Sync API
* A Periodic Background Sync demo app


ServiceWorkerGlobalScope: install イベント - Web API

ServiceWorkerGlobalScope: install イベント
======================================

**`install`** は `ServiceWorkerGlobalScope` インターフェイスのイベントで、 `ServiceWorkerRegistration` が新しい `ServiceWorkerRegistration.installing` ワーカーを取得したときに発行されます。

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

構文
--

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

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

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

イベント型
-----

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

Event

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

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

例
-

以下のスニペットでは、`install`イベントハンドラーを使用して、キャッシュに多くのレスポンスを投入し、サービスワーカーがオフラインで資産を提供するために使用する方法を示しています。

```js
this.addEventListener("install", (event) => {
  event.waitUntil(
    caches
      .open("v1")
      .then((cache) =>
        cache.addAll([
          "/",
          "/index.html",
          "/style.css",
          "/app.js",
          "/image-list.js",
          "/star-wars-logo.jpg",
          "/gallery/",
          "/gallery/bountyHunters.jpg",
          "/gallery/myLittleVader.jpg",
          "/gallery/snowTroopers.jpg",
        ]),
      ),
  );
});
```

また、 `oninstall` プロパティを使用して、イベントハンドラーを設定することもできます。

```js
globalScope.oninstall = (event) => {
  // ...
};
```

仕様書
---

| Specification |
| --- |
| Service Workers # dom-serviceworkerglobalscope-oninstall |

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

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

関連情報
----

* `activate` イベント
* `ServiceWorkerGlobalScope`
* サービスワーカー API


ServiceWorkerGlobalScope: pushsubscriptionchange イベント - Web API

ServiceWorkerGlobalScope: pushsubscriptionchange イベント
=====================================================

**`pushsubscriptionchange`** イベントはグローバルスコープとしての `ServiceWorker` へ送信され、アプリケーションの制御の外から起動されたプッシュ通知への加入状況が変化したことを示します。

これはブラウザーが加入を更新した場合に発生しますが、加入が取り消されたり失われたりしたときにも発生する可能性があります。

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

構文
--

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

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

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

イベント型
-----

一般的な `Event` です。

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

加入に関する情報をアプリケーションサーバーと共有する方法を示す例では `fetch()` を使用する傾向がありますが、これは実際の使用には必ずしも最適な選択ではありません。たとえば、アプリがオフラインの場合は機能しないためです。

サービスワーカーとアプリサーバー間で加入情報を同期するのに別の方法を使用することを検討するか、 `fetch()` を使用するコードが、データ交換の試行が失敗した場合を処理するのに十分堅牢であることを確認してください。

**メモ:** この仕様書の早期の草稿では、このイベントは `PushSubscription` が期限切れになった時に送信されるよう定義されていました。

例
-

この例は、サービスワーカーのコンテキストで実行するものであり、 `pushsubscriptionchange` イベントを待ち受けて、無効になった場合に再加入します。

```js
self.addEventListener(
  "pushsubscriptionchange",
  (event) => {
    const subscription = swRegistration.pushManager
      .subscribe(event.oldSubscription.options)
      .then((subscription) =>
        fetch("register", {
          method: "post",
          headers: {
            "Content-type": "application/json",
          },
          body: JSON.stringify({
            endpoint: subscription.endpoint,
          }),
        }),
      );
    event.waitUntil(subscription);
  },
  false,
);
```

加入の有効期限が切れたことを示す `pushsubscriptionchange` イベントが到着すると、プッシュマネージャーの `subscribe()` メソッドを呼び出して再加入します。返されたプロミスが解決されると、新しい加入を受け取ります。これは、 `fetch()` 呼び出しを使用してアプリサーバーに配信され、 JSON 形式で加入の `endpoint` の返信をアプリサーバーに送信します。

`onpushsubscriptionchange` イベントハンドラープロパティを使用してイベントハンドラーを設定することもできます。

```js
self.onpushsubscriptionchange = (event) => {
  event.waitUntil(
    swRegistration.pushManager
      .subscribe(event.oldSubscription.options)
      .then((subscription) => {
        /\* ... \*/
      }),
  );
};
```

仕様書
---

| Specification |
| --- |
| Push API # the-pushsubscriptionchange-event |
| Push API # dom-serviceworkerglobalscope-onpushsubscriptionchange |

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

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

関連情報
----

* プッシュ API の使用


ServiceWorkerGlobalScope: notificationclick イベント - Web API

ServiceWorkerGlobalScope: notificationclick イベント
================================================

**`notificationclick`** イベントは、 `ServiceWorkerRegistration.showNotification()` によって生み出されたシステム通知がクリックされたことを示すために発生します。

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

構文
--

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

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

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

イベント型
-----

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

Event

ExtendableEvent

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

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

`NotificationEvent.notification` 読取専用

クリックされイベントが発行された通知を表す `Notification` オブジェクトを返します。

`NotificationEvent.action` 読取専用

ユーザーがクリックした通知ボタンの文字列 ID を返します。この値は、ユーザーがアクションボタン以外のどこかで通知をクリックした場合、またはその通知にボタンがなかった場合、空文字列を返します。

例
-

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

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

  // This looks to see if the current is already open and
  // focuses if it is
  event.waitUntil(
    clients
      .matchAll({
        type: "window",
      })
      .then((clientList) => {
        for (const client of clientList) {
          if (client.url === "/" && "focus" in client) return client.focus();
        }
        if (clients.openWindow) return clients.openWindow("/");
      }),
  );
});
```

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

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

  // This looks to see if the current is already open and
  // focuses if it is
  event.waitUntil(
    clients
      .matchAll({
        type: "window",
      })
      .then((clientList) => {
        for (const client of clientList) {
          if (client.url === "/" && "focus" in client) return client.focus();
        }
        if (clients.openWindow) return clients.openWindow("/");
      }),
  );
};
```

イベントのアクションは `event.action` を使って `notificationclick` イベントハンドラーの中で処理することができます。

```js
navigator.serviceWorker.register("sw.js");
Notification.requestPermission((result) => {
  if (result === "granted") {
    navigator.serviceWorker.ready.then((registration) => {
      // Archive というタイトルのアクションを含んだ通知を表示します。
      registration.showNotification("New mail from Alice", {
        actions: [
          {
            action: "archive",
            title: "Archive",
          },
        ],
      });
    });
  }
});

self.addEventListener(
  "notificationclick",
  (event) => {
    event.notification.close();
    if (event.action === "archive") {
      // ユーザーが [Archive] アクションを選択しました。
      archiveEmail();
    } else {
      // ユーザーが通知本文を選択（例：クリック）した。
      clients.openWindow("/inbox");
    }
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # activating-a-notification |
| Notifications API Standard # dom-serviceworkerglobalscope-onnotificationclick |

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

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

関連情報
----

* サービスワーカー API
* 通知 API


ServiceWorkerGlobalScope.skipWaiting() - Web API

ServiceWorkerGlobalScope.skipWaiting()
======================================

**`ServiceWorkerGlobalScope.skipWaiting()`** は `ServiceWorkerGlobalScope` のメソッドで、待機しているサービスワーカーがアクティブになるように強制します。

このメソッドは、 `Clients.claim()` と併用することで、現在のクライアントと他のすべてのアクティブなクライアントの両方で、元となるサービスワーカーの更新が即座に有効になるようにします。

構文
--

```js
skipWaiting()
```

### 引数

なし。

### 返値

`Promise` で、直ちに `undefined` に解決します。

例
-

`self.skipWaiting()` はサービスワーカーの実行中、いつでも呼び出すことができますが、新しくインストールされたサービスワーカーが `waiting` 状態のままである場合にのみ効果があります。したがって、 `self.skipWaiting()` は `InstallEvent` ハンドラーの内部から呼び出すことが一般的です。

以下の例では、アクティブなサービスワーカーが既にあるかどうかに関係なく、新しくインストールされたサービスワーカーを `activating` 状態に進行させるようにします。

```js
self.addEventListener("install", (event) => {
  // skipWaiting() が返すプロミスは無視しても安全です。
  self.skipWaiting();

  // event.waitUntil() の内部で、サービスワーカーを
  // インストールするために必要な他のアクションを
  // 実行することも可能です。
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # service-worker-global-scope-skipwaiting |

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

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

関連情報
----

* サービスワーカーの使用
* サービスワーカーの基本的なコード例
* Is ServiceWorker ready?
* `Clients.claim()`
* プロミス
* ウェブワーカーの使用


ServiceWorkerGlobalScope: fetch イベント - Web API

ServiceWorkerGlobalScope: fetch イベント
====================================

**fetch** イベントは `fetch()` メソッドが呼び出されたときに発生します。

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

構文
--

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

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

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

イベント型
-----

一般的な `Event` です。

例
-

このコードスニペットは、service worker prefetch の例（prefetch の例のライブ版を参照してください）からのものです。 `onfetch` イベントハンドラーは `fetch` イベントを監視します。イベントが発生した時、コードは `Cache` オブジェクト内で、最初に一致したリクエストに対して解決するプロミスを返します。もし、何も一致しなかった場合は、コードはネットワークからレスポンスを読み取ります。

さらに、このコードは `fetch()` 操作で発生した例外を処理しています。 HTTP のエラーレスポンス（たとえば、404）は、例外を引き起こさないことに注意してください。適切なエラーコードセットを持った通常のレスポンスオブジェクトを返します。

```js
self.addEventListener("fetch", (event) => {
  console.log(`Handling fetch event for ${event.request.url}`);

  event.respondWith(
    caches.match(event.request).then((response) => {
      if (response) {
        console.log("Found response in cache:", response);
        return response;
      }
      console.log("No response found in cache. About to fetch from network…");

      return fetch(event.request)
        .then((response) => {
          console.log("Response from network is:", response);

          return response;
        })
        .catch((error) => {
          console.error(`Fetching failed: ${error}`);
          throw error;
        });
    }),
  );
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # dom-serviceworkerglobalscope-onfetch |

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

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

関連情報
----

* サービスワーカーの使用
* サービスワーカーの基本的なコード例
* Is ServiceWorker ready?
* `Promise`
* ウェブワーカーの使用


ServiceWorkerGlobalScope.clients - Web API

ServiceWorkerGlobalScope.clients
================================

**`clients`** は `ServiceWorkerGlobalScope` インターフェイスの読み取り専用プロパティで、サービスワーカーに関連付けられた `Clients` オブジェクトを返します。

値
-

指定されたワーカーに関連付けられた `Clients` オブジェクト。

仕様書
---

| Specification |
| --- |
| Service Workers # service-worker-global-scope-clients |

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

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

関連情報
----

* サービスワーカーの使用
* サービスワーカーの基本的なコード例
* Is ServiceWorker ready?
* `Promise`
* ウェブワーカーの使用


PushSubscriptionOptions.applicationServerKey - Web API

PushSubscriptionOptions.applicationServerKey
============================================

`PushSubscriptionOptions` インターフェイスの **`applicationServerKey`** 読み取り専用プロパティは、プッシュサーバーが用いる公開鍵です。

値
-

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

例
-

この例では、`applicationServerKey` の値をコンソールに出力します。

```js
navigator.serviceWorker.ready.then((reg) => {
  reg.pushManager.getSubscription().then((subscription) => {
    const options = subscription.options;
    console.log(options.applicationServerKey); // 公開鍵
  });
});
```

仕様書
---

| Specification |
| --- |
| Push API # dom-pushsubscriptionoptions-applicationserverkey |

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

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


PushSubscriptionOptions.userVisibleOnly - Web API

PushSubscriptionOptions.userVisibleOnly
=======================================

`PushSubscriptionOptions` の **`userVisibleOnly`** 読み取り専用プロパティは、プッシュサブスクリプションがユーザーに見える効果を持つメッセージのみに使われるかどうかを表します。

値
-

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

例
-

この例では、`userVisibleOnly` の値をコンソールに出力します。

```js
navigator.serviceWorker.ready.then((reg) => {
  reg.pushManager.getSubscription().then((subscription) => {
    const options = subscription.options;
    console.log(options.userVisibleOnly); // ユーザーに見えるサブスクリプションであれば true
  });
});
```

仕様書
---

| Specification |
| --- |
| Push API # dom-pushsubscriptionoptions-uservisibleonly |

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

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


CSSMediaRule.media - Web API

CSSMediaRule.media
==================

**`media`** は `CSSMediaRule` インターフェイスの読み取り専用プロパティで、 `MediaList` でスタイル情報の出力先メディアを表します。

値
-

`MediaList` です。

例
-

 この CSS には、単一のスタイルルールを持つメディアクエリーが含まれています。これは `document.styleSheets[0].cssRules` が返す最初の `CSSRule` になります。
 したがって、 `myRules[0].media` を呼び出すと、メディアクエリーを表す `MediaList` オブジェクトを返します。

```css
@media (min-width: 500px) {
  body {
    color: blue;
  }
}
```

```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].media); // a MediaList
```

仕様書
---

| Specification |
| --- |
| CSS Conditional Rules Module Level 3 # dom-cssmediarule-media |

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

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


DOM ツリーの作成方法 - Web API

DOM ツリーの作成方法
============

このページでは JavaScript において DOM API を用いて DOM オブジェクトを作成したり変更したりする方法を解説します。

次の XML 文書を見てください。

```xml
<?xml version="1.0"?>
<people>
  <person first-name="eric" middle-initial="H" last-name="jung">
    <address street="321 south st" city="denver" state="co" country="usa"/>
    <address street="123 main st" city="arlington" state="ma" country="usa"/>
  </person>

  <person first-name="jed" last-name="brown">
    <address street="321 north st" city="atlanta" state="ga" country="usa"/>
    <address street="123 west st" city="seattle" state="wa" country="usa"/>
    <address street="321 south avenue" city="denver" state="co" country="usa"/>
  </person>
</people>
```

DOM API を使うことで、この文書のメモリー内の表現を作成することができます。

```js
const doc = document.implementation.createDocument("", "", null);
const peopleElem = doc.createElement("people");

const personElem1 = doc.createElement("person");
personElem1.setAttribute("first-name", "eric");
personElem1.setAttribute("middle-initial", "h");
personElem1.setAttribute("last-name", "jung");

const addressElem1 = doc.createElement("address");
addressElem1.setAttribute("street", "321 south st");
addressElem1.setAttribute("city", "denver");
addressElem1.setAttribute("state", "co");
addressElem1.setAttribute("country", "usa");
personElem1.appendChild(addressElem1);

const addressElem2 = doc.createElement("address");
addressElem2.setAttribute("street", "123 main st");
addressElem2.setAttribute("city", "arlington");
addressElem2.setAttribute("state", "ma");
addressElem2.setAttribute("country", "usa");
personElem1.appendChild(addressElem2);

const personElem2 = doc.createElement("person");
personElem2.setAttribute("first-name", "jed");
personElem2.setAttribute("last-name", "brown");

const addressElem3 = doc.createElement("address");
addressElem3.setAttribute("street", "321 north st");
addressElem3.setAttribute("city", "atlanta");
addressElem3.setAttribute("state", "ga");
addressElem3.setAttribute("country", "usa");
personElem2.appendChild(addressElem3);

const addressElem4 = doc.createElement("address");
addressElem4.setAttribute("street", "123 west st");
addressElem4.setAttribute("city", "seattle");
addressElem4.setAttribute("state", "wa");
addressElem4.setAttribute("country", "usa");
personElem2.appendChild(addressElem4);

const addressElem5 = doc.createElement("address");
addressElem5.setAttribute("street", "321 south avenue");
addressElem5.setAttribute("city", "denver");
addressElem5.setAttribute("state", "co");
addressElem5.setAttribute("country", "usa");
personElem2.appendChild(addressElem5);

peopleElem.appendChild(personElem1);
peopleElem.appendChild(personElem2);
doc.appendChild(peopleElem);
```

DOM ツリーは以下のことをすることができます。

* XPath 式を用いて問い合わせ
* XMLSerializer を用いて文字列に変換
* ウェブサーバーに POST (`XMLHttpRequest` で)
* XSLT または XLink を使用して形式変換
関連情報
----

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


セレクターを使用した DOM 要素の特定 - Web API

セレクターを使用した DOM 要素の特定
====================

セレクター API により提供されるメソッドを用いると、一連のセレクターに一致する要素 (`Element`) ノードを DOM から簡単かつ素早く取り出すことができます。これは過去の技術よりもはるかに速く、必要な場所で、例えば、 JavaScript コードでループを使用して検索する必要があるアイテムを特定するために使います。

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

この仕様書では、 `Document`, `DocumentFragment`, `Element` インターフェースを実装しているすべてのオブジェクトに対して 2 つの新しいメソッドを追加しています。

`querySelector()`

ノードのサブツリー内で最初に一致した `Element` ノードを返します。一致する要素がなかった場合は `null` を返します。

`querySelectorAll()`

ノードのサブツリー内で一致するすべての `Element` ノードを含む `NodeList` を返すか、一致するものが見つからなかった場合は空の `NodeList` を返します。

**メモ:** `querySelectorAll()` が返す `NodeList` はライブではありません。すなわち、 DOM で行われた変更がコレクションに反映されません。これは他の DOM クエリメソッドがライブのノードリストを返すのと異なります。

例や詳細については、 `Element.querySelector()` および `Element.querySelectorAll()` メソッドの記事を参照してください。

セレクター
-----

セレクターのメソッドはセレクターを受け入れて、どの要素または要素群を返すかを判断します。これはセレクターリストを含みますので、単一の問い合わせで複数のセレクターをグループ化することができます。

ユーザーのプライバシーを保護するために、一部の擬似クラスには対応していなかったり、異なる動作をしたりすることがあります。例えば `:visited` に一致するものは返されなかったり、 `:link` は `:any-link` と同様に扱われたりします。

要素のみが選択できますので、擬似クラスには対応していません。

例
-

文書中ですべての段落要素 (`p`) のうち、 CSS のクラスが `warning` または `note` に指定されているものを抽出するには、次のようにします。

```js
const special = document.querySelectorAll("p.warning, p.note");
```

もちろん、次のように ID による指定も可能です。

```js
const el = document.querySelector("#main, #basic, #exclamation");
```

上記のコードが実行されると、`el` には ID が `main`、 `basic`、 `exclamation` である要素の内、最初の要素だけが格納されます。

関連情報
----

* セレクター仕様書
* CSS セレクター
* `Element.querySelector()`
* `Element.querySelectorAll()`
* `Document.querySelector()`
* `Document.querySelectorAll()`


ドキュメントオブジェクトモデルの使用 - Web API

ドキュメントオブジェクトモデルの使用
==================

ドキュメントオブジェクトモデル (DOM) は、（他の文書のツリー風の型の中で） HTML や XML 文書の DOM ツリーを操作するための API です。この API はページの記述の根底にあり、ウェブ上のスクリプティングのベースとなるものです。

DOM ツリーとは？
----------

**DOM ツリー**は一種の ツリー構造で、ノードが HTML または XML 文書のコンテンツを表します。それぞれの HTML または XML 文書は固有の DOM ツリーの表現を持っています。例えば、以下の文書を見てください。

```html
<html lang="en">
  <head>
    <title>My Document</title>
  </head>
  <body>
    <h1>Header</h1>
    <p>Paragraph</p>
  </body>
</html>
```

これは以下のように見える DOM ツリーを持っています。

![ルートとコンテンツを含むノード要素を保有する文書のツリー状表現としての DOM](/ja/docs/Web/API/Document_object_model/Using_the_Document_Object_Model/using_the_w3c_dom_level_1_core-doctree.jpg)

なお、上位のツリーは上記の文書の DOM ツリーと似ていますが、同じではありません。実際の DOM ツリーはホワイトスペースを温存するからです。

ウェブブラウザーが HTML 文書を解釈するとき、ブラウザーは DOM ツリーを構築し、文書を表示するために使用します。

文書 API で何ができるのか
---------------

文書 API、 DOM API とも呼ばれますが、これによって何でも好きなように DOM ツリーを変更できます。これは、任意の HTML や XML 文書をゼロから作成したり、与えられた HTML や XML 文書の内容を変更したりすることができることを意味します。ウェブページの作者は、文書の DOM を JavaScript を使ってグローバルオブジェクトの `document` プロパティにアクセスすることで編集することができます。この `document` オブジェクトは `Document` インターフェイスを実装しています。

簡単な例
----

上の文書を元に作者は、ヘッダーの内容を変え、1つある段落を 2 つに書き換えたいものとしましょう。これは以下のスクリプトによってできます。

### HTML

```html
<html lang="ja">
  <head>
    <title>文書</title>
  </head>
  <body>
    <input type="button" value="この文書を変更" onclick="change()" />
    <h2>見出し</h2>
    <p>段落</p>
  </body>
</html>
```

### JavaScript コンテンツ

```js
function change() {
  // document.getElementsByTagName("h2") は、文書内の <h2> 要素の NodeList
  // であり、最初のものは 0 番
  const header = document.getElementsByTagName("h2").item(0);

  // header の firstChild はテキストノード
  header.firstChild.data = "動的文書";

  // ヘッダーが "動的文書" になった

  // 最初の段落にアクセス
  const para = document.getElementsByTagName("p").item(0);
  para.firstChild.data = "これが最初の段落です。";

  // 2 番目の段落のために新しいテキストノードを生成する
  const newText = document.createTextNode("これが 2 番目の段落です。");

  // 2 番目の段落になる新しい要素を生成する
  const newElement = document.createElement("p");

  // 段落にテキストを置く
  newElement.appendChild(newText);

  // また、（段落の親に当たる)）ody に追加することで、文書の最後に
  // 段落を置く
  para.parentNode.appendChild(newElement);
}
```

### 結果

どうすればもっと学べるのか
-------------

これで DOM の基本的な概念に慣れたと思いますので、JavaScript と DOM インターフェイスによる HTML の表の操作 を読んで、文書 API の基本的な機能についてもっと学びたいと思うかもしれません。

関連情報
----

* ドキュメントオブジェクトモデル (DOM).


AudioScheduledSourceNode.start() - Web API

AudioScheduledSourceNode.start()
================================

`start()` は `AudioScheduledSourceNode` のメソッドで、指定した時刻に再生が始まるように、音をスケジュールします。時刻を指定しなかった場合は、すぐに音を再生し始めます。

構文
--

```js
start()
start(when)
```

### 引数

`when` 省略可

音の再生を始めるべき時刻を、秒単位で指定します。この値は `AudioContext` がその `currentTime` 属性で使用しているのと同じ時間座標系で指定します。 0 の値を指定する（または`when`引数を完全に除外する）と、音の再生をすぐに始めるようにします。

### 返値

なし (`undefined`)。

### 例外

`InvalidStateNode` `DOMException`

ノードが既に開始されている場合に発生します。このエラーは `stop()` を事前に呼び出したためにノードがもう実行されていない場合でも発生します。

`RangeError`

when` に指定した値が負である場合に発生します。

例
-

この例では、2秒後に再生を始め、その1秒後に再生を停止するようにスケジュールされた `OscillatorNode` を作成する方法を示します。時刻は `AudioContext.currentTime` が返すコンテキストの現在のタイムスタンプに希望の秒数を加えることで計算されます。

```js
context = new AudioContext();
osc = context.createOscillator();
osc.connect(context.destination);

/\* 発振器の開始時刻と停止時刻を設定する。 \*/

osc.start(context.currentTime + 2);
osc.stop(context.currentTime + 3);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioscheduledsourcenode-start |

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

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

関連情報
----

* ウェブオーディオ API の使用
* `stop()`
* `AudioScheduledSourceNode`
* `AudioBufferSourceNode`
* `ConstantSourceNode`
* `OscillatorNode`


AudioScheduledSourceNode: ended イベント - Web API

AudioScheduledSourceNode: ended イベント
====================================

`ended` は `AudioScheduledSourceNode` インターフェイスのイベントで、ソースノードの再生が停止したときに発生します。

このイベントは、`AudioScheduledSourceNode`の再生が停止したときに発生します。理由は、所定の停止時刻に達したか、音声の全時間が再生されたか、またはバッファーの全体が再生されたかのいずれかです。

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

構文
--

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

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

onended = (event) => { }
```

イベント型
-----

一般的な `Event` です。

例
-

この単純な例では、 `ended` イベントに対するイベントリスナーを設定し、ノードの再生が停止したときにユーザーインターフェースに［Start］ボタンを表示できるようにしています。

```js
node.addEventListener("ended", () => {
  document.getElementById("startButton").disabled = false;
});
```

また、 `onended` プロパティを使用してイベントハンドラーを設定することもできます。

```js
node.onended = () => {
  document.getElementById("startButton").disabled = false;
};
```

ended イベントの使用例は、 audio-buffer の例 (GitHub) を参照してください。

仕様
--

| Specification |
| --- |
| Web Audio API # dom-audioscheduledsourcenode-onended |

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

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

関連イベント
------

* audioprocess
* complete
関連情報
----

* `HTMLAudioElement`
* `HTMLVideoElement`
* `<audio>`
* `<video>`
* HTMLMediaElement の `ended` イベント
* MediaStreamTrack の `ended` イベント