XRRigidTransform.position - Web API

XRRigidTransform.position
=========================

`XRRigidTransform` の **`position`** 読み取り専用プロパティは、変換の平行移動成分を記述する、メートルで指定された 3D 点を提供する `DOMPointReadOnly` オブジェクトです。

構文
--
```

let pos = xrRigidTransform.position;
```

### 値

変換行列の 3D 位置成分を示す読み取り専用の `DOMPointReadOnly`。 単位はメートルです。

**メモ:** 点の `w` 成分は常に 1.0 です。

例
-

オブジェクトを目の高さに配置するために使用できる参照空間を作成するには、次のようにします（目の高さが 1.5 メートルであると想定）。

```js
function onSessionStarted(xrSession) {
  xrSession.addEventListener("end", onSessionEnded);

  gl = initGraphics(xrSession);

  let glLayer = new XRWebGLLayer(xrSession, gl);
  xrSession.updateRenderState({ baseLayer: glLayer });

  if (immersiveSession) {
    xrSession.requestReferenceSpace("bounded-floor").then((refSpace) => {
      refSpaceCreated(refSpace);
    }).catch(() => {
      session.requestReferenceSpace("local-floor").then(refSpaceCreated);
    });
  } else {
    session.requestReferenceSpace("viewer").then(refSpaceCreated);
  }
}

function refSpaceCreated(refSpace) {
  if (immersiveSession) {
    xrReferenceSpace = refSpace;
  } else {
    xrReferenceSpace = refSpace.getOffsetReferenceSpace(
      new XRRigidTransform({y: -1.5});
    );
  }
  xrSession.requestAnimationFrame(onFrame);
}
```

WebXR で使用するグラフィックスコンテキストを設定した後、これは変数 `immersiveSession` が `true` であるかどうかを確認することから始まります。 その場合、最初に `bounded-floor` 参照空間を要求します。 それが失敗した場合（おそらく `bounded-floor` がサポートされていないため）、`local-floor` 参照空間を要求しようとします。

没入型セッションでない場合は、代わりに `viewer` 参照空間を要求します。

いずれの場合も、空間が取得されたら、`refSpaceCreated()` 関数に渡します。 没入型空間の場合、指定された空間は将来の使用のために単に保存します。 ただし、インラインセッションの場合、床レベルが自動的に調整されない空間にいることがわかっているので、オフセット参照空間を要求して、ビューアーの高さを推定床レベルの 0 メートルより 1.5 メートル上にシフトします。 その新しい参照空間は、最初に受け取ったものの代わりに使用します。

最後に、アニメーションフレームの要求が送信されます。

仕様
--

| Specification |
| --- |
| WebXR Device API # dom-xrrigidtransform-position |

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

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


XRRigidTransform() - Web API

XRRigidTransform()
==================

**`XRRigidTransform()`** コンストラクターは、点またはオブジェクトの位置と向きを表す新しい `XRRigidTransform` オブジェクトを作成して返します。 特に、`XRRigidTransform` は、空間を横断する座標系間で平行移動するための変換を提供するときに使用されます。

構文
--
```

let xrRigidTransform = new XRRigidTransform(position, orientation);
```

### パラメーター

`position` 省略可

点またはオブジェクトが配置される座標を指定する `DOMPointInit` (en-US) に準拠するオブジェクト。 これらの寸法はメートルで指定します。 このパラメーターが省略されているか、`DOMPointInit` と互換性がない場合、使用される位置は `{x: 0, y: 0, z: 0, w: 1}` であると見なされます。 `w` は*常に* 1 でなければなりません。

`orientation` 省略可

オブジェクトが向いている方向を指定する `DOMPointInit` (en-US) に準拠するオブジェクト。 向きのデフォルト値は `{x: 0, y: 0, z: 0, w: 1}` です。 指定された向きは、まだ正規化されていない場合は正規化されます。

### 戻り値

オブジェクトの位置と向きを原点から指定された `position` に調整し、`orientation` によって示される方向を向く変換行列を表すように初期化された新しい `XRRigidTransform` オブジェクト。

### 例外

`TypeError`

指定された `position` の `w` 座標の値が 1.0 ではありません。

例
-

この例では、シーンのアニメーションの開始が示されています。 特定のタイプの参照空間の要求から始まり、最初のアニメーションフレームを要求する前に、変換に基づいて座標系をシフトします。

```js
let animationFrameRequestID = 0;

xrSession.requestReferenceSpace("local-floor").then((refSpace) => {
  xrReferenceSpace = refSpace.getOffsetReferenceSpace(
    new XRRigidTransform(viewerPosition, viewerOrientation),
  );
  animationFrameRequestID = xrSession.requestAnimationFrame(drawFrame);
});
```

`local-floor` タイプの参照空間を要求した後、返された promise は最終的に解決され、その時点で新しい参照空間オブジェクト `refSpace` を受け取ります。 ビューアーの初期位置と向きから `XRRigidTransform` を作成した後、新しい変換を `getOffsetReferenceSpace()` に渡して*別*の参照空間を作成します。 オフセットして、その原点が `viewerPosition` によって指定された座標と同じ空間内の場所に配置されるようにします。 向きも同様に修正されます。

次に、`requestAnimationFrame()` (en-US) が呼び出され、描画する新しいアニメーションフレームを要求します。 `drawFrame()` コールバックは、システムが次のフレームを描画する準備ができたときに実行されます。

移動、向き、モーションには、さらに多くの例があります。

仕様
--

| Specification |
| --- |
| WebXR Device API # dom-xrrigidtransform-xrrigidtransform |

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

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


XRRigidTransform.orientation - Web API

XRRigidTransform.orientation
============================

`XRRigidTransform` の **`orientation`** 読み取り専用プロパティは、オブジェクトによって表される変換の回転成分を指定する正規化されたクォータニオン（**単位クォータニオン**または**ベルソル**とも呼ばれます）を含む `DOMPointReadOnly` です。 長さが正確に 1.0 メートルではないクォータニオンを指定すると、正規化されます。

構文
--
```

let orientation = xrRigidTransform.orientation;
```

### 値

変換の向き成分を提供する単位クォータニオンを含む `DOMPointReadOnly` オブジェクト。 単位クォータニオンとして、返されるクォータニオンの長さは常に 1.0 メートルです。

例
-

地面から 2 メートル離れた位置に、真上を向くように配置された参照空間を作成するには、次のようにします。

```js
xrReferenceSpace = refSpace.getOffsetReferenceSpace(
  new XRRigidTransform({y: -2}, {x: 0.0, y: 1.0, z: 0.0, w: 1.0});
);
```

ここで指定されている単位クォータニオンは [0.0, 1.0, 0.0, 1.0] であり、オブジェクトが y 軸に沿って直接向いている必要があることを示します。

仕様
--

| Specification |
| --- |
| WebXR Device API # dom-xrrigidtransform-orientation |

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

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

関連情報
----

* 移動、向き、モーション
* 単位クォータニオン
* クォータニオンと空間回転（英語）


CSSLayerBlockRule: name プロパティ - Web API

CSSLayerBlockRule: name プロパティ
=============================

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

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

* Learn more
* See full compatibility
* Report feedback
**`name`** は `CSSLayerBlockRule` インターフェイスの読み取り専用プロパティで、カスケードレイヤーに関連付けられた名前を表します。

値
-

レイヤーの名前の入った文字列です。レイヤーが無名の場合は `""` です。

例
-

### HTML

```html
<output></output> <output></output>
```

### CSS

```css
output {
  display: block;
}

@layer special {
  div {
    color: rebeccapurple;
  }
}

@layer {
  div {
    color: black;
  }
}
```

### JavaScript

```js
const item1 = document.getElementsByTagName("output")[0];
const item2 = document.getElementsByTagName("output")[1];
const rules = document.styleSheets[1].cssRules;
// スタイルシート #1 はこの埋め込み例に関連するスタイルシートであり、
// スタイルシート #0 は MDN ページ全体に関連するスタイルシート。

const layer = rules[1]; // CSSLayerBlockRule
const anonymous = rules[2]; // 無名の CSSLayerBlockRule

item1.textContent = `1 つ目の CSSLayerBlockRule は "${layer.name}" レイヤーを定義しています。`;
item2.textContent = `2 つ目の CSSLayerBlockRule は "${anonymous.name}" という名前のレイヤーです。`;
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Cascading and Inheritance Level 5 # dom-csslayerblockrule-name |

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

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

関連情報
----

* `@layer` の宣言文は `CSSLayerStatementRule` で表されます。
* CSS における名前付きカスケードレイヤーの作成方法


Animation: id プロパティ - Web API

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

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

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

* Learn more
* See full compatibility
* Report feedback
**`Animation.id`** は ウェブアニメーション API のプロパティで、このアニメーションを識別する文字列を返したり設定したりします。

値
-

アニメーションを識別するために使用することができる文字列、またはアニメーションに `id` がない場合は `null` です。

例
-

以下の White Rabbit の例では、 `rabbitDownAnimation` の `id` に割り当てています。

```js
rabbitDownAnimation.id = "rabbitGo";
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-id |

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

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

関連情報
----

* `KeyframeEffect` (en-US)
* ウェブアニメーション API
* `Animation`


Animation: finished プロパティ - Web API

Animation: finished プロパティ
=========================

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

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

* Learn more
* See full compatibility
* Report feedback
**`Animation.finished`** は ウェブアニメーション API の読み取り専用プロパティで、アニメーションの再生が完了すると解決される `Promise` を返します。

**メモ:** アニメーションが `finished` の再生状態から離れる時点（つまり、再び再生を始める時点）ごとに、このプロパティに対して新しい `Promise` が作成されます。新しい `Promise` は新しいアニメーションシーケンスが完了すると解決されます。

値
-

アニメーションの実行が完了すると解決される `Promise` オブジェクト。

例
-

以下のコードは、要素 `elem` で実行するアニメーションがすべて完了するまで待ち、その要素を DOM ツリーから削除します。

```js
Promise.all(elem.getAnimations().map((animation) => animation.finished)).then(
  () => elem.remove(),
);
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-finished |

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

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

関連情報
----

* `KeyframeEffect` (en-US)
* ウェブアニメーション API
* `Animation`


Animation: reverse() メソッド - Web API

Animation: reverse() メソッド
=========================

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

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

* Learn more
* See full compatibility
* Report feedback
**`Animation.reverse()`** は `Animation` インターフェイスのメソッドで、再生方向を逆にします。つまり、アニメーションはその先頭で終わります。再生されていないアニメーションで呼び出されると、アニメーション全体が逆再生されます。一時停止しているアニメーションで呼び出されると、アニメーションは逆に続けられます。

構文
--

```js
reverse()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

アリスの成長/縮小ゲームの例では、ケーキをクリックまたはタップすると、ボトルをクリックまたはタップすると、アリスの成長アニメーション (`aliceChange`) が逆再生され、アリスが小さくなります。これは `aliceChange` の `Animation.playbackRate` を `-1` に設定することで行います。

```js
const shrinkAlice = () => {
  // play Alice's animation in reverse
  aliceChange.playbackRate = -1;
  aliceChange.play();

  // play the bottle's animation
  drinking.play();
};
```

But it could also have been done by calling `reverse()` on `aliceChange` like so:

```js
const shrinkAlice = () => {
  // play Alice's animation in reverse
  aliceChange.reverse();

  // play the bottle's animation
  drinking.play();
};
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-reverse |

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

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

関連情報
----

* ウェブアニメーション API
* `Animation`: ウェブページのアニメーションを制御することができるその他のメソッドやプロパティ
* `Animation.pause()`: アニメーションを停止します。
* `Animation.play()`: アニメーションを正方向に再生します。


Animation: commitStyles() メソッド - Web API

Animation: commitStyles() メソッド
==============================

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

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

* Learn more
* See full compatibility
* Report feedback
`commitStyles()` はウェブアニメーション API の `Animation` インターフェイスのメソッドで、アニメーションの現在のスタイルの計算値をターゲット要素の `style` に書き込みます。 `commitStyles()` はアニメーションが自動削除されていてもうまく動作します。

`commitStyles()` は `fill` と組み合わせて使用することができ、アニメーションが終わった後も最終的な状態を維持させることができます。同じ効果は `fill` だけでも得られますが、無期限に満たすアニメーションを使用することは推奨されません。アニメーションはすべての静的スタイルよりも優先されますので、無期限の塗りつぶしアニメーションは対象とする要素が通常のスタイル設定をされることを妨げる可能性があります。

`commitStyles()` を使用することができます スタイル設定は要素の `style` 属性に書き込まれます。

構文
--

```js
commitStyles()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

### アニメーションの最後の状態を確定

この例では、"Commit styles" と "Fill forwards" とラベル付けされた2つのボタンがあります。どちらのボタンもクリックするとアニメーションし、アニメーションの最終状態を維持します。

しかし、異なる点は、 "Fill forwards" は `fill: "forwards"` これは、ブラウザーがアニメーションの状態を無期限に、あるいは自動的に除去されるまで維持しなければならないことを意味しています。

しかし、 "Commit styles" ボタンはアニメーションが終了するのを待ち、 `commitStyles()` を呼び出されてからアニメーションを取り消しますので、完了したスタイルはアニメーションの状態ではなく `style` 属性の値として取り込まれます。

#### HTML

```html
<button class="commit-styles">Commit styles</button>
<br />
<button class="fill-forwards">Fill forwards</button>
```

```
button {
  margin: 0.5rem;
}
```

#### JavaScript

```js
const commitStyles = document.querySelector(".commit-styles");
let offset1 = 0;

commitStyles.addEventListener("click", async (event) => {
  // Start the animation
  offset1 = 100 - offset1;
  const animation = commitStyles.animate(
    { transform: `translate(${offset1}px)` },
    { duration: 500, fill: "forwards" },
  );

  // Wait for the animation to finish
  await animation.finished;
  // Commit animation state to style attribute
  animation.commitStyles();
  // Cancel the animation
  animation.cancel();
});

const fillForwards = document.querySelector(".fill-forwards");
let offset2 = 0;

fillForwards.addEventListener("click", async (event) => {
  // Start the animation
  offset2 = 100 - offset2;
  const animation = fillForwards.animate(
    { transform: `translate(${offset2}px)` },
    { duration: 500, fill: "forwards" },
  );
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-commitstyles |

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

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

関連情報
----

* ウェブアニメーション API
* `Animation`: ウェブページのアニメーションを制御することができるその他のメソッドやプロパティ


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

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

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

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

* Learn more
* See full compatibility
* Report feedback
**`Animation()`** はウェブアニメーション API のコンストラクターで、新しい `Animation` オブジェクトのインスタンスを返します。

構文
--

```js
new Animation()
new Animation(effect)
new Animation(effect, timeline)
```

### 引数

`effect` 省略可

アニメーションに割り当てる、 `AnimationEffect` インターフェイスに基づくオブジェクトとして対象となる効果です。将来的には `SequenceEffect` や `GroupEffect` などの他の効果も利用できるようになるかもしれませんが、現在のところ利用できる効果は `KeyframeEffect` (en-US) だけです。これは `null` （これが既定値です）にすると、効果を適用しないことを示します。

`timeline` 省略可

アニメーションを関連付ける `timeline` を指定します。 `AnimationTimeline` (en-US) インターフェイスに基づく型のオブジェクトを指定します。現在利用できるタイムラインは `DocumentTimeline` (en-US) だけですが、将来的にはジェスチャーやスクロールに関連するタイムラインも利用できるようになるかもしれません。既定値は `Document.timeline` ですが、`null` に設定することも可能です。

例
-

「白兎を追え」の例では、 `Animation()` コンストラクターを使用して `Animation` を `rabbitDownKeyframes` に対して、文書の `timeline` を使用して生成しています。

```js
const rabbitDownAnimation = new Animation(
  rabbitDownKeyframes,
  document.timeline,
);
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-animation |

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

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

関連情報
----

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


Animation: effect プロパティ - Web API

Animation: effect プロパティ
=======================

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

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

* Learn more
* See full compatibility
* Report feedback
**`Animation.effect`** は ウェブアニメーション API のプロパティで、アニメーションの対象とする効果を取得したり設定したりします。対象とする効果は `AnimationEffect` に基づくタイプの効果オブジェクト、例えば `KeyframeEffect` (en-US)、または `null` です。

値
-

アニメーションの対象とするアニメーション効果を示す `AnimationEffect` オブジェクトです。

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-effect |

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

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

関連情報
----

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


Animation: finish() メソッド - Web API

Animation: finish() メソッド
========================

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

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

* Learn more
* See full compatibility
* Report feedback
**`finish()`** くち ウェブアニメーション API の `Animation` インターフェイスのメソッドで、現在の再生時刻を現在の再生方向に対応するアニメーションの末尾に設定します。

つまり、アニメーションが順方向に再生されている場合は、再生時刻をアニメーションシーケンスの長さに設定し、アニメーションが逆方向に再生されている（`reverse()` メソッドが呼び出されている）場合は、再生時刻を 0 に設定します。

構文
--

```js
finish()
```

### 引数

なし。

### 返値

なし (`undefined`)。

### 例外

`InvalidState`

プレーヤーの再生レートが 0 であるか、アニメーションの再生レートが 0 より大きく、アニメーションの終了時刻が無限大である場合。

例
-

次の例では、 `finish()` メソッドを使用して `InvalidState` エラーを捕捉する方法を示します。

```js
interfaceElement.addEventListener("mousedown", () => {
  try {
    player.finish();
  } catch (e) {
    if (e instanceof InvalidState) {
      console.log("finish() called on paused or finished animation.");
    } else {
      logMyErrors(e); //pass exception object to error handler
    }
  }
});
```

次の例では、再生方向に関係なく、単一の要素のアニメーションをすべて完了させています。

```js
elem.getAnimations().forEach((animation) => animation.finish());
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-finish |

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

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

関連情報
----

* ウェブアニメーション API
* `Animation`: ウェブページのアニメーションを制御することができるその他のメソッドやプロパティ
* `Animation.play()`: アニメーションを正方向に再生します
* `Animation.reverse()`: アニメーションを逆方向に再生します


Animation: updatePlaybackRate() メソッド - Web API

Animation: updatePlaybackRate() メソッド
====================================

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

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

* Learn more
* See full compatibility
* Report feedback
**`updatePlaybackRate()`** はウェブアニメーション API の `Animation` インターフェイスのメソッドで、最初に再生位置を同期させた後に、アニメーションの速度を設定します。

場合によっては、アニメーションが別個のスレッドやプロセスで実行され、長時間実行される JavaScript がメインスレッドを遅延させている間も更新を続けることがあります。このような場合、アニメーションに `playbackRate` を直接設定すると、メインスレッドでの再生位置が現在動作している再生位置からずれることがあるため、アニメーションの再生位置がジャンプすることが発生する可能性があります。

`updatePlaybackRate()` は非同期メソッドで、アニメーションの現在の再生位置と同期した後に速度を設定します。 `updatePlaybackRate()` を呼び出した後、アニメーションの `playbackRate` はすぐには更新されません。アニメーションの `ready` プロミスが解決された時点で更新されます。

構文
--

```js
updatePlaybackRate(playbackRate)
```

### 引数

`playbackRate`

設定する新しい速度。正の値（アニメーションを速くしたり遅くしたりする）、負の値（逆再生する）、またはゼロ（アニメーションを効果的に一時停止する）です。

### 返値

なし (`undefined`)。

例
-

スピードセレクターコンポーネントは、下記のように `updatePlaybackRate()` のスムーズな更新が良いでしょう。

```js
speedSelector.addEventListener("input", (evt) => {
  cartoon.updatePlaybackRate(parseFloat(evt.target.value));
  cartoon.ready.then(() => {
    console.log(`Playback rate set to ${cartoon.playbackRate}`);
  });
});
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-updateplaybackrate |

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

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

関連情報
----

* ウェブアニメーション API
* `Animation.playbackRate` — 現在の再生レートを読み出すか、同期的に設定します。
* `Animation.reverse()` — 再生レートを反転させ、必要に応じて再生を再開します。
* `Animation` — ウェブページのアニメーションを制御するために使用することができる他のメソッドやプロパティがあります。


Animation: pause() メソッド - Web API

Animation: pause() メソッド
=======================

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

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

* Learn more
* See full compatibility
* Report feedback
**`pause()`** はウェブアニメーション API の`Animation` インターフェイスのメソッドで、アニメーションの再生を一時停止します。

構文
--

```js
animation.pause();
```

### 引数

なし。

### 返値

なし。

### 例外

`InvalidStateError` `DOMException`

アニメーションの `currentTime` が `unresolved` であり（おそらくまだ再生を始めていない）、アニメーションの終了時刻が正の値である場合に発生します。

例
-

`Animation.pause()` はウェブアニメーション API の国のアリスのGrowing/Shrinking Alice Gameで何度も使用しています。 `Element.animate()` メソッドで作成したアニメーションはすぐに再生を始めるので、それを避けたい場合は手動で一時停止しなければならないのが主な理由です。

```js
// animation of the cupcake slowly getting eaten up
const nommingCake = document
  .getElementById("eat-me\_sprite")
  .animate(
    [{ transform: "translateY(0)" }, { transform: "translateY(-80%)" }],
    {
      fill: "forwards",
      easing: "steps(4, end)",
      duration: aliceChange.effect.timing.duration / 2,
    },
  );

// doesn't actually need to be eaten until a click event, so pause it initially:
nommingCake.pause();
```

Additionally, when resetting:

```js
// An all-purpose function to pause the animations on Alice, the cupcake, and the bottle that reads "drink me."
const stopPlayingAlice = () => {
  aliceChange.pause();
  nommingCake.pause();
  drinking.pause();
};

// When the user releases the cupcake or the bottle, pause the animations.
cake.addEventListener("mouseup", stopPlayingAlice, false);
bottle.addEventListener("mouseup", stopPlayingAlice, false);
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-pause |

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

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

関連情報
----

* ウェブアニメーション API
* `Animation`: ウェブページのアニメーションを制御することができるその他のメソッドやプロパティ
* `Animation.pause()`: アニメーションを停止します。
* `Animation.reverse()`: アニメーションを逆方向に再生します。
* `Animation.finish()`: アニメーションを終了します。
* `Animation.cancel()`: アニメーションをキャンセルします。


Animation: persist() メソッド - Web API

Animation: persist() メソッド
=========================

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

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

* Learn more
* See full compatibility
* Report feedback
`persist()` はウェブアニメーション API の `Animation` インターフェイスのメソッドで、アニメーションを明示的に維持し、 他のアニメーションに置き換わったときに自動的に削除されるのを防ぎます。

構文
--

```js
persist()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

### `persist()` の使用

この例には、 3 つのボタンがあります。

* "Add persistent animation" と "Add transient animation" はそれぞれ、赤い四角に新しい座標変換アニメーションを追加します。最初のアニメーションは左から右へ、 2 つ目は右から左へ、といった具合に、アニメーションは交互に向きを変えます。"Add persistent animation" は作成したアニメーションに `persist()` を呼び出します。
* 3 つ目のボタン "Cancel an animation" は、最近追加したアニメーションを取り消される可能性があります。

この例では、キャンセルされる可能性のないすべてのアニメーションのリストが、追加された順に、それぞれのアニメーションの `replaceState` とともに表示されます。

#### HTML

```html
<div id="animation-target"></div>
<button id="start-persistent">Add persistent animation</button>
<button id="start-transient">Add transient animation</button>
<button id="cancel">Cancel an animation</button>
<ol id="stack"></ol>
```

```
<template id="list-item-template">
  <li>
    <span class="replaceState"></span>,
    <span class="description"></span>
  </li>
</template>
```

#### CSS

```css
div {
  width: 100px;
  height: 100px;
  background: red;
  transform: translate(100px);
}
```

#### JavaScript

```js
const target = document.getElementById("animation-target");
const persistentButton = document.getElementById("start-persistent");
const transientButton = document.getElementById("start-transient");
const cancelButton = document.getElementById("cancel");
persistentButton.addEventListener("click", () => startAnimation(true));
transientButton.addEventListener("click", () => startAnimation(false));
cancelButton.addEventListener("click", cancelTop);
const stack = [];

let offset = -100;

function startAnimation(persist) {
  offset = -offset;
  const animation = target.animate(
    { transform: `translate(${100 + offset}px)` },
    { duration: 500, fill: "forwards" },
  );
  stack.push(animation);
  if (persist) {
    animation.persist();
  }
  // Add the animation to the displayed stack (implementation not shown)
  show(animation, offset);
}

function cancelTop() {
  stack.pop()?.cancel();
}
```

```
const stackDisplay = document.getElementById("stack");
const template =
  document.getElementById("list-item-template").content.firstElementChild;
const nodes = new Map();

function show(animation, offset) {
  const direction = offset < 0 ? "left" : "right";
  const li = template.cloneNode(true);
  const description = li.querySelector(".description");
  const replaceState = li.querySelector(".replaceState");
  description.textContent = direction;
  replaceState.textContent = animation.replaceState;
  nodes.set(animation, { li, description, replaceState });
  stackDisplay.append(li);
  animation.addEventListener("cancel", () => {
    nodes.get(animation).li.remove();
    nodes.delete(animation);
  });
  animation.addEventListener("remove", () => {
    nodes.get(animation).replaceState.textContent = animation.replaceState;
  });
}
```

#### 結果

新しい transient アニメーションを追加すると、前回追加した transient アニメーションが置き換わることに注意してください。それらのアニメーションは自動的に除去され、 `replaceState` は `"removed"` となります。しかし、 persistent アニメーションは除去されません。

`<div>` の位置は最新のアクティブまたは persistent アニメーションによって決定されます。

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-persist |

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

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

関連情報
----

* ウェブアニメーション API
* `Animation`: ウェブページのアニメーションを制御することができるその他のメソッドやプロパティ
* `Animation.replaceState`
* `remove` event


Animation: cancel() メソッド - Web API

Animation: cancel() メソッド
========================

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

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

* Learn more
* See full compatibility
* Report feedback
ウェブアニメーション API の **`cancel()`** は `Animation` インターフェイスのメソッドで、このアニメーションによって引き起こされたすべての `KeyframeEffect` (en-US)を初期化し、再生を中止します。

**メモ:** アニメ―ションをキャンセルした時、`startTime` と `currentTime` は、 `null` に設定されます。

構文
--

```js
cancel()
```

### 引数

なし。

### 返値

なし。

### 例外

このメソッドは、直接は例外を発生しません。しかし、キャンセル時にアニメーションの `playState` が `"idle"` 以外の場合、 current finished promise は `DOMException` の `AbortError` で拒否されます。

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-cancel |

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

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

関連情報
----

* ウェブアニメーション API
* `KeyframeEffect` (en-US)
* `Animation`
* `Animation.playState`
* `Animation.finished` はこのアニメーションの `playState` が `"idle"` でなくなると拒否されるこの操作のプロミスを返します。


Animation: remove イベント - Web API

Animation: remove イベント
======================

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

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

* Learn more
* See full compatibility
* Report feedback
**`remove`** は `Animation` インターフェイスのイベントで、アニメーションが自動的に除去された時にブラウザーによって発生します。

構文
--

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

```js
addEventListener("finish", (event) => { })
onfinish = (event) => { }
```

イベント型
-----

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

Event

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

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

`AnimationPlaybackEvent.currentTime` 読取専用

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

`AnimationPlaybackEvent.timelineTime` 読取専用

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

例
-

### 置換されたアニメーションの除去

この例では、 `<button id="start">` 要素と、マウスが移動するたびに実行するイベントリスナーがあります。 `mousemove` イベントハンドラーは `<button>` をマウスポインターの位置にアニメーションさせるアニメーションを設定します。これは巨大なアニメーションリストになり、メモリーリークを作成する可能性があります。このため、現代のブラウザーでは、他のアニメーションによってオーバーライドされた前方充填アニメーションは自動的に除去されます。

作成したアニメーションの数が表示されます。 `remove` イベントリスナーを使用して、除去されたアニメーションの数をカウントして表示します。

アニメーションの 1 つを除いて、最終的にはすべて除去されるはずです。

#### HTML

```html
<button id="start">クリックでドラッグ</button>
<br />
<button id="reset">例をリセット</button>
<p>
  ボタンをクリックするとアニメーションが始まります（既定では、このようなアニメーションを体験すると偏頭痛に悩まされる人を保護するために無効になっています）。
</p>
<p>Animations created: <span id="count-created">0</span></p>
<p>Animations removed: <span id="count-removed">0</span></p>
```

#### CSS

```css
:root,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

button {
  margin: 0.5rem 0;
}
```

#### JavaScript

```js
const button = document.querySelector("#start");
let created = 0;
let removed = 0;

button.addEventListener(
  "click",
  () => {
    document.body.addEventListener("mousemove", (event) => {
      const animation = button.animate(
        { transform: `translate(${event.clientX}px, ${event.clientY}px)` },
        { duration: 500, fill: "forwards" },
      );
      created++;
      showCounts();

      // アニメーションが除去された後、 remove イベントが発生
      animation.addEventListener("remove", () => {
        removed++;
        showCounts();
      });
    });
  },
  { once: true },
);

function showCounts() {
  document.getElementById("count-created").textContent = created;
  document.getElementById("count-removed").textContent = removed;
}

const reset = document.querySelector("#reset");
reset.addEventListener("click", () => {
  document.location.reload();
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-onremove |
| Web Animations # remove-event |

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

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

関連情報
----

* ウェブアニメーション API
* `Animation`, `AnimationPlaybackEvent`
* `Animation.replaceState`: アニメーションが削除されたかどうかを確認します
* `Animation.persist()`: アニメーションが除去されないようにします


Animation: playbackRate プロパティ - Web API

Animation: playbackRate プロパティ
=============================

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

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

* Learn more
* See full compatibility
* Report feedback
**`Animation.playbackRate`** はウェブアニメーション API で、アニメーションの再生レートを返すしたり設定したりします。

アニメーションには**再生時間**があり、アニメーションの `timeline` (en-US) 時刻の変化率からアニメーションの現在時刻への変倍率を指定します。再生レートは初期値で `1` です。

値
-

0、負、正の値を取ります。負の値ではアニメーションが反転します。この値は変倍率で、例えば 2 の値を指定すると再生速度が 2 倍になります。

**メモ:** アニメーションの `playbackRate` を `0` に設定すると、アニメーションは一時停止します（ただし、`playstate` は必ずしも `paused` にはなりません）。

例
-

アリスの成長/縮小ゲーム の例では、ボトルをクリックしたりタップしたりすると、アリスの成長アニメーション (`aliceChange`) が反転し、アリスが縮みます。

```js
const shrinkAlice = () => {
  aliceChange.playbackRate = -1;
  aliceChange.play();
};

// タップまたはクリックすると、アリスは縮小する
bottle.addEventListener("mousedown", shrinkAlice, false);
bottle.addEventListener("touchstart", shrinkAlice, false);
```

反対に、ケーキをクリックすると、彼女は「成長」し、 `aliceChange` を再び前方に再生します。

```js
const growAlice = () => {
  aliceChange.playbackRate = 1;
  aliceChange.play();
};

// タップまたはクリックすると、アリスが成長する
cake.addEventListener("mousedown", growAlice, false);
cake.addEventListener("touchstart", growAlice, false);
```

別の例として、赤の女王のレースゲームでは、アリスと赤の女王は常に減速しています。

```js
setInterval(() => {
  // 再生レートが 0.4 を下回らないことを確認

  if (redQueen_alice.playbackRate > 0.4) {
    redQueen_alice.playbackRate \*= 0.9;
  }
}, 3000);
```

しかし、それらをクリックしたりタップしたりすると、 `playbackRate` が倍増してスピードアップします。

```js
const goFaster = () => {
  redQueen_alice.playbackRate \*= 1.1;
};

document.addEventListener("click", goFaster);
document.addEventListener("touchstart", goFaster);
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-playbackrate |

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

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

関連情報
----

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


Animation: play() メソッド - Web API

Animation: play() メソッド
======================

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

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

* Learn more
* See full compatibility
* Report feedback
**`play()`** は ウェブアニメーション APIの `Animation` インターフェイスのメソッドで、アニメーションの再生を開始または再開します。アニメーションが完了した場合、`play()` を呼び出すとアニメーションを再開し、最初から再生します。

構文
--

```js
play()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

アリスの成長/縮小ゲームの例では、ケーキをクリックまたはタップすると、アリスの成長アニメーション (`aliceChange`) が再生され、ケーキのアニメーションが発生すると同時に、アリスが大きくなります。 2 つの `Animation.play()`、 1 つの `EventListener` です。

```js
// The cake has its own animation:
const nommingCake = document
  .getElementById("eat-me\_sprite")
  .animate(
    [{ transform: "translateY(0)" }, { transform: "translateY(-80%)" }],
    {
      fill: "forwards",
      easing: "steps(4, end)",
      duration: aliceChange.effect.timing.duration / 2,
    },
  );

// Pause the cake's animation so it doesn't play immediately.
nommingCake.pause();

// This function will play when ever a user clicks or taps
const growAlice = () => {
  // Play Alice's animation.
  aliceChange.play();

  // Play the cake's animation.
  nommingCake.play();
};

// When a user holds their mouse down or taps, call growAlice to make all the animations play.
cake.addEventListener("mousedown", growAlice, false);
cake.addEventListener("touchstart", growAlice, false);
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-play |

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

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

関連情報
----

* ウェブアニメーション API
* `Animation`: ウェブページのアニメーションを制御することができるその他のメソッドやプロパティ
* `Animation.pause()`: アニメーションを停止します。
* `Animation.reverse()`: アニメーションを逆方向に再生します。
* `Animation.finish()`: アニメーションを終了します。
* `Animation.cancel()`: アニメーションをキャンセルします。


Animation: currentTime プロパティ - Web API

Animation: currentTime プロパティ
============================

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

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

* Learn more
* See full compatibility
* Report feedback
**`Animation.currentTime`** は ウェブアニメーション API のプロパティで、実行中か一時停止中かを問わず、アニメーションの現在の時刻をミリ秒単位で返したり設定したりします。

アニメーションが `timeline` (en-US) を持たない、アクティブではない、またはまだ再生されていない場合、 `currentTime` の返値は `null` です。

値
-

現在の時刻をミリ秒で表す数値。アニメーションを無効にする場合は `null`。

例
-

ゲーム Drink Me/Eat Me game では、アリスの身長がアニメーションし、小さくなったり大きくなったりします。ゲームを始めるときには、アニメーションの currentTime を KeyframeEffect の持続時間の半分に設定することで、彼女の身長を2つの極の中間に設定します。

```js
aliceChange.currentTime = aliceChange.effect.timing.duration / 2;
```

より一般的な意味としては、アニメーションの 50% の位置に移動することを意味します。

```js
animation.currentTime =
  animation.effect.getComputedTiming().delay +
  animation.effect.getComputedTiming().activeDuration / 2;
```

時間精度の低下
-------

 タイミング攻撃やフィンガープリンティングから保護するために、 `animation.currentTime` の精度はブラウザー設定によっては丸められている可能性があります。
 Firefox では、 `privacy.reduceTimerPrecision` 環境設定が既定で有効になっており、 Firefox 59 では 20 マイクロ秒が既定値です。

```js
// Firefox 60 における 時間制度の低下 (2ms)
animation.currentTime;
// 23.404
// 24.192
// 25.514
// …

// `privacy.resistFingerprinting` が有効な場合の時間制度の低下
animation.currentTime;
// 49.8
// 50.6
// 51.7
// …
```

Firefox では、 `privacy.resistFingerprinting` を有効にすると、精度を 100ms または `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` の値のどちらか大きい方にすることができます。

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-currenttime |

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

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

関連情報
----

* `Animation`: ウェブページのアニメーションを制御するためのその他のメソッドやプロパティ
* `Animation.startTime`: アニメーションの開始が計画されている時刻
* ウェブアニメーション API


Animation: playState プロパティ - Web API

Animation: playState プロパティ
==========================

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

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

* Learn more
* See full compatibility
* Report feedback
**`Animation.playState`** はウェブアニメーション API の読み取り専用プロパティで、アニメーションの再生状態を説明する列挙値を返します。

値
-

`idle`

アニメーションの現在の時刻は未解決で、待機タスクはありません。

`running`

アニメーションは実行中です。

`paused`

アニメーションが中断され、 `Animation.currentTime` プロパティが更新されていません。

`finished`

アニメーションが境界の 1 つに達し、 `Animation.currentTime` プロパティが更新されていません。

以前、ウェブアニメーションでは、再生の開始などの非同期処理がまだ完了していないことを示すために、 **`pending`** の値を定義していました。これは、別個の `Animation.pending` プロパティで示すようになりました。

例
-

例えばアリスの成長/縮小ゲームの例では、プレイヤーはアリスが涙を流して泣くという結末にたどり着きます。ゲームでは、パフォーマンス上の理由から、涙は見えているときだけアニメーションします。ですから、このようにアニメーションしたら、すぐに一時停止しなければなりません。

```js
// 涙のアニメーションをセットアップ

tears.forEach((el) => {
  el.animate(tearsFalling, {
    delay: getRandomMsRange(-1000, 1000), // それぞれの涙をランダムにする
    duration: getRandomMsRange(2000, 6000), // それぞれの涙をランダムにする
    iterations: Infinity,
    easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)",
  });
  el.pause();
});

// エンディングを表示する必要があるときに、涙が落ちるのを再生

tears.forEach((el) => {
  el.play();
});

// 涙のアニメーションをリセットし、一時停止

tears.forEach((el) => {
  el.pause();
  el.currentTime = 0;
});
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-playstate |

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

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

関連情報
----

* ウェブアニメーション API
* `Animation`: ウェブページのアニメーションを制御するためのその他のメソッドやプロパティ


Animation: startTime プロパティ - Web API

Animation: startTime プロパティ
==========================

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

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

* Learn more
* See full compatibility
* Report feedback
**`Animation.startTime`** は `Animation` インターフェイスのプロパティで、倍精度浮動小数点値で、アニメーションの再生開始予定時刻を示します。

アニメーションの**開始時刻**は、対象とする `timeline` (en-US) が再生を始める時刻です。アニメーションの **開始時刻** は、最初は未解決です（値がないので `null` という意味です）。

値
-

現在の時刻をミリ秒で表す浮動小数点数、または時刻が設定されていない場合は `null` です。この値を読むことで、現在設定されている開始時刻を知ることができ、この値を変更することで異なる時刻にアニメーションを始めることができます。

例
-

ウェブアニメーション API の実行の例では、すべての新しいアニメーションする猫に、実行する元の猫と同じ `startTime` を与えることで同期させることができます。

```js
const catRunning = document
  .getElementById("withWAAPI")
  .animate(keyframes, timing);

/\* 新しい猫を作成する関数 \*/
function addCat() {
  const newCat = document.createElement("div");
  newCat.classList.add("cat");
  return newCat;
}

/\* これは、 WAAPI 列に猫を追加する関数 \*/
function animateNewCatWithWAAPI() {
  // make a new cat
  const newCat = addCat();

  // animate said cat with the WAAPI's "animate" function
  const newAnimationPlayer = newCat.animate(keyframes, timing);

  // set the animation's start time to be the same as the original .cat#withWAAPI
  newAnimationPlayer.startTime = catRunning.startTime;

  // Add the cat to the pile.
  WAAPICats.appendChild(newCat);
}
```

時間精度の低下
-------

 タイミング攻撃やフィンガープリンティングから保護するために、 `animation.currentTime` の精度はブラウザー設定によっては丸められている可能性があります。
 Firefox では、 `privacy.reduceTimerPrecision` 環境設定が既定で有効になっており、 Firefox 59 では 20 マイクロ秒が既定値です。

```js
// Firefox 60 における 時間制度の低下 (2ms)
animation.currentTime;
// 23.404
// 24.192
// 25.514
// …

// `privacy.resistFingerprinting` が有効な場合の時間制度の低下
animation.currentTime;
// 49.8
// 50.6
// 51.7
// …
```

Firefox では、 `privacy.resistFingerprinting` を有効にすると、精度を 100ms または `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` の値のどちらか大きい方にすることができます。

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-starttime |

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

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

関連情報
----

* ウェブアニメーション API
* `Animation`
* `Animation.currentTime`: アニメーションの現在の時刻


Animation: cancel イベント - Web API

Animation: cancel イベント
======================

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

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

* Learn more
* See full compatibility
* Report feedback
**`cancel`** は `Animation` インターフェイスのイベントで、`Animation.cancel()` メソッドが呼び出された時や、アニメーションの再生が完了する前に要素から除去された時など、アニメーションが他の状態から `"idle"` 再生状態になった時に発行されます。

**メモ:** 最初からアイドル状態で新しいアニメーションを作成しても、新しいアニメーションの `cancel` イベントは発生しません。

構文
--

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

```js
addEventListener("cancel", (event) => { })
oncancel = (event) => { }
```

イベント型
-----

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

Event

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

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

`AnimationPlaybackEvent.currentTime` 読取専用

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

`AnimationPlaybackEvent.timelineTime` 読取専用

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

例
-

アニメーションがキャンセルされた場合、それを要素から除去します。

```js
animation.oncancel = (event) => {
  animation.effect.target.remove();
};
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-oncancel |
| Web Animations # cancel-event |

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

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

関連情報
----

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


Animation: pending プロパティ - Web API

Animation: pending プロパティ
========================

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

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

* Learn more
* See full compatibility
* Report feedback
**`Animation.pending`** は ウェブアニメーション API の読み取り専用プロパティで、アニメーションが現在、再生開始や実行するアニメーションの一時停止などを行う非同期操作を待っているかどうかを示します。

値
-

アニメーションが待機中の場合は **`true`**、そうでなければ **`false`** です。

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-pending |

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

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

関連情報
----

* `Animation`: ウェブページのアニメーションを制御するためのその他のメソッドやプロパティ
* ウェブアニメーション API


Animation: finish イベント - Web API

Animation: finish イベント
======================

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

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

* Learn more
* See full compatibility
* Report feedback
**`finish`** は `Animation` インターフェイスのイベントで、アニメーションの再生が完了したとき、または `Animation.finish()` メソッドが呼び出されてアニメーションが即座に終了させられたときに発生します。

**メモ:** `"paused"`の再生状態は`finished"`の再生状態に優先します。
 アニメーションが一時停止と完了の両方の状態の場合、 `"paused"` の状態が報告されます。
 `startTime`を `document.timeline.currentTime - (Animation.currentTime * Animation.playbackRate)` に設定するには、アニメーションを強制的に `"finished"` 状態にすることができます。

構文
--

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

```js
addEventListener("finish", (event) => { })
onfinish = (event) => { }
```

イベント型
-----

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

Event

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

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

`AnimationPlaybackEvent.currentTime` 読取専用

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

`AnimationPlaybackEvent.timelineTime` 読取専用

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

例
-

`Animation.onfinish` は、ウェブアニメーション API の国のアリスのアリスの成長/縮小ゲームで何度か使用しています。
 ここでは、不透明アニメーションがフェードインした後、要素にポインターイベントを追加しています。

```js
// ゲームのエンディングクレジットにアニメーションを追加
const endingUI = document.getElementById("ending-ui");
const bringUI = endingUI.animate(keysFade, timingFade);

// アニメーションクレジットの一時停止
bringUI.pause();

// この関数は、クレジットのポインターイベントを取り除く
hide(endingUI);

// 後でクレジットがフェードインされたときに、
// ポインターイベントを追加し直す
bringUI.onfinish = (event) => {
  endingUI.style.pointerEvents = "auto";
};
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-onfinish |
| Web Animations # finish-event |

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

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

関連情報
----

* ウェブアニメーション API
* `Animation`
* `Animation.finish()`


Animation: ready プロパティ - Web API

Animation: ready プロパティ
======================

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

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

* Learn more
* See full compatibility
* Report feedback
**`Animation.ready`** はウェブアニメーション API の読み取り専用プロパティで、アニメーションが再生可能になったときに解決するプロミス (`Promise`) を返します。アニメーションの再生状態が `"pending"` になるたびに、またアニメーションが取り消される可能性があるときにも、新しいプロミスが作成されます。

**メモ:** 同じ `Promise` が保留中の `play` リクエストと保留中の `pause` リクエストの両方に使用されるので、プロミスが解決したときにアニメーションの状態を調べることをお勧めします。

値
-

アニメーションを再生する準備ができたときに解決する `Promise` です。プロミスの ready を使用する場合、通常これに似た構造を使用します。

```js
animation.ready.then(() => {
  // アニメーションを実行する準備ができたときに
  // 必要なことを何かする
});
```

例
-

次の例では、**現在 ready になっているプロミス**が解決すると、アニメーションの状態は `running` になります。アニメーションは `pause` と `play` を呼び出す間に再生状態が `pending` から変わらない、**現在 ready になっているプロミス**は変化しないからです。

```js
animation.pause();
animation.ready.then(() => {
  // 'running' と表示
  alert(animation.playState);
});
animation.play();
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-ready |

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

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

関連情報
----

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


Animation: replaceState プロパティ - Web API

Animation: replaceState プロパティ
=============================

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

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

* Learn more
* See full compatibility
* Report feedback
**`Animation.replaceState`** は ウェブアニメーション API の読み取り専用プロパティで、アニメーションが別なアニメーションで置き換えられた後で、ブラウザーによって削除されたかどうかを示します。

値
-

アニメーションの遷移先の状態を表す文字列。値は以下のいずれかです。

`active`

アニメーションが作成されたときの、アニメーションの置き換える状態の初期値です。

`persisted`

アニメーションに `Animation.persist()` が呼び出されており、明示的に維持されています。

`removed`

アニメーションはブラウザーによって自動的に除去されています。

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-replacestate |

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

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

関連情報
----

* ウェブアニメーション API
* `Animation`
* `remove` イベント
* `Animation.persist()`


Animation: timeline プロパティ - Web API

Animation: timeline プロパティ
=========================

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

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

* Learn more
* See full compatibility
* Report feedback
**`Animation.timeline`** は `Animation` インターフェイスのプロパティで、このアニメーションに関連付けられた `timeline` (en-US) を返したり設定したりします。タイムラインは同期を目的とした時刻値の元であり、`AnimationTimeline` (en-US)ベースのオブジェクトです。既定値では、アニメーションのタイムラインと `Document` のタイムラインは同じです。

値
-

アニメーションのタイミングソースとして使用するタイムラインオブジェクト (en-US)、または既定値では `null` であり、 `Document` のタイムラインを使用することを表します。

例
-

ここでは、アニメーションのタイムラインを文書のタイムラインと同じに設定します（ちなみに、これはすべてのアニメーションの既定値です）：

```js
animation.timeline = document.timeline;
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-timeline |

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

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

関連情報
----

* ウェブアニメーション API
* `Animation`
* `AnimationTimeline` (en-US): すべてのタイムラインが継承する親オブジェクト
* `DocumentTimeline` (en-US): 現在利用できる唯一のタイムラインオブジェクト
* `Document.timeline`: すべてのアニメーションに割り当てる既定値


ServiceWorkerRegistration.updateViaCache - Web API

ServiceWorkerRegistration.updateViaCache
========================================

**`updateViaCache`** は `ServiceWorkerRegistration` インターフェイスの読み取り専用プロパティで、 `ServiceWorkerContainer.register` の呼び出しで指定されたモードを使用してキャッシュを更新します。
 `importScripts` のリクエストは HTTP キャッシュで行われます。 `updateViaCache` はこの動作を制御します。

値
-

以下の値の何れかを返します。

* `imports`: サービスワーカーの更新のために HTTP キャッシュは参照されませんが、 `importScripts` では参照されることを意味します。
* `all`: 両方の場合で HTTP キャッシュが参照されることを意味します。
* `none`: HTTP キャッシュが参照されないことを意味します。
例
-

次の例は、 updateViaCache の使用例です。

```js
if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("/service-worker.js", {
      updateViaCache: "none",
    })
    .then((registration) => {
      registration.addEventListener("updatefound", () => {
        // If updatefound is fired, it means that there's
        // a new service worker being installed.
        console.log(`Value of updateViaCache: ${registration.updateViaCache}`);
      });
    })
    .catch((error) => {
      console.error(`Service worker registration failed: ${error}`);
    });
}
```

仕様書
---

| Specification |
| --- |
| Service Workers # service-worker-registration-updateviacache |

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

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

関連情報
----

* サービスワーカーの使用
* Service workers basic code example (英語)
* Is ServiceWorker ready? (英語)
* `Promise`
* ウェブワーカーの使用


ServiceWorkerRegistration.waiting - Web API

ServiceWorkerRegistration.waiting
=================================

**`waiting`** は `ServiceWorkerRegistration` インターフェイスのプロパティで、サービスワーカーのうち `ServiceWorker.state` がインストール済み (`installed`) のものを返します。 このプロパティは、最初は `null` に設定されています。

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

値
-

`ServiceWorker` オブジェクト（現在インストール済み (`installed`) の状態の場合）。

仕様書
---

| Specification |
| --- |
| Service Workers # navigator-service-worker-waiting |

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

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

関連情報
----

* サービスワーカーの使用
* Service workers basic code example (英語)
* Is ServiceWorker ready? (英語)
* `Promise`
* ウェブワーカーの使用


ServiceWorkerRegistration.getNotifications() - Web API

ServiceWorkerRegistration.getNotifications()
============================================

**`getNotifications()`** は `ServiceWorkerRegistration` インターフェイスのメソッドで、現在のサービスワーカー登録を介して現在のオリジンから作成された順序で通知のリストを返します。オリジンには、アクティブではあるがスコープが異なるサービスワーカー登録が多数あります。 同じオリジンの 1 つのサービスワーカーによって作成された通知は、同じオリジンの他のアクティブなサービスワーカーでは利用できません。

構文
--

```js
getNotifications()
getNotifications(options)
```

### 引数

`options` 省略可

返される通知を絞り込むオプションを含むオブジェクト。 使用可能なオプションは次のとおりです。

`tag`

通知タグを表す文字列。 指定した場合、このタグを持つ通知のみが返されます。

### 返値

`Promise` で、 `Notification` オブジェクトのリストに解決されます。

例
-

```js
navigator.serviceWorker.register("sw.js");

const options = { tag: "user\_alerts" };

navigator.serviceWorker.ready.then((registration) => {
  registration.getNotifications(options).then((notifications) => {
    // notifications で何かをします
  });
});
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-serviceworkerregistration-getnotifications |

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

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


ServiceWorkerRegistration.sync - Web API

ServiceWorkerRegistration.sync
==============================

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

**`sync`** は `ServiceWorkerRegistration` インターフェイスのプロパティで、バックグラウンド同期プロセスを管理する `SyncManager` インターフェイスへの参照を返します。

値
-

`SyncManager` オブジェクト。

仕様書
---

| Specification |
| --- |
| Web Background Synchronization # dom-serviceworkerregistration-sync |

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

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


ServiceWorkerRegistration.showNotification() - Web API

ServiceWorkerRegistration.showNotification()
============================================

`showNotification()` は `ServiceWorkerRegistration` インターフェイスのメソッドで、アクティブなサービスワーカー上で通知を作成します。

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

構文
--

```js
showNotification(title)
showNotification(title, options)
```

### 引数

`title`

通知内に表示する必要があるタイトル

`options` 省略可

通知の設定を可能にするオブジェクト。 次のプロパティを持つことができます。

`actions`
Experimental

通知に表示するアクションの配列。 配列のメンバーはオブジェクトリテラルである必要があります。 次の値が含まれる場合があります。

`action`

通知に表示されるユーザーアクションを識別する文字列。

`title`

ユーザーに表示されるアクションテキストを含む文字列。

`icon`

アクションで表示するアイコンの URL を含む文字列。

適切なレスポンスは、 `event.action` を `notificationclick` イベントで使用することで作成されます。

`badge`
Experimental

文字列で、Android の通知バーなど、通知自体を表示するのに十分なスペースがない場合に通知を表す画像の URL が入ります。Android 端末では、バッジは最大 4 倍の解像度、約 96 x 96 ピクセルの端末に対応する必要があり、画像は自動的にマスクされます。

`body`

通知内に表示する追加のコンテンツを表す文字列。

`data`
Experimental

通知に関連付ける任意のデータ。 これは任意のデータ型にすることができます。

`dir`

通知の方向。 `auto`、`ltr`、`rtl` のいずれかです。

`icon`

通知でアイコンとして使用される画像の URL を含む文字列。

`image`
Experimental

通知に表示される画像の URL を含む文字列。

`lang`

通知内で使用される言語を指定します。 この文字列は、RFC 5646: 言語識別子のタグ (BCP 47 とも呼ばれる)に基づく有効なものである必要があります。

`renotify`
Experimental

論理値で、`tag` 値を再利用するときにバイブレーションと可聴アラートを抑制するかどうかを示します。 *オプション*の `renotify` が `true` で、*オプション*の `tag` が空の文字列の場合、TypeError が発生します。既定値は `false` です。

`requireInteraction`
Experimental

画面が十分に大きい端末では、ユーザーがクリックするか閉じるまで通知をアクティブにしておく必要があることを示します。 この値がないか `false` の場合、デスクトップ版の Chrome は約 20 秒後に通知を自動的に最小化します。既定値は `false` です。

`silent`

設定されている場合、音やバイブレーションは発生しないことを示します。*オプション*の `silent` が `true` で、*オプション*の `vibrate` が存在する場合、TypeError 例外が発生します。既定値は `false` です。

`tag`

必要に応じてスクリプトを使用して通知を検索、置換、または削除できるようにする所与の通知の ID です。

`timestamp`

この通知に関連付けられた時刻で、ミリ秒単位のUnix 時刻で表されるタイムスタンプです。これは過去に、端末がオフラインだったためにすぐに配信できなかったメッセージに通知が使用された場合や、これから始まる会議に向けて通知が使用された場合などです。

`vibrate`
Experimental

通知の表示で実行するバイブレーションパターン。 バイブレーションパターンは、メンバーが 1 つしかない配列にすることができます。 値はミリ秒単位の時間で、偶数のインデックス（0、2、4 など）は振動する時間を示し、奇数のインデックスは一時停止する時間を示します。例えば、 `[300, 100, 400]` は、 300 ミリ秒振動し、 100 ミリ秒休止してから、 400 ミリ秒振動します。

返値
--

`undefined` に解決するプロミス (`Promise`) です。

例
-

```js
navigator.serviceWorker.register("sw.js");

function showNotification() {
  Notification.requestPermission((result) => {
    if (result === "granted") {
      navigator.serviceWorker.ready.then((registration) => {
        registration.showNotification("バイブレーションの例", {
          body: "ブンブン! ブンブン!",
          icon: "../images/touch/chrome-touch-icon-192x192.png",
          vibrate: [200, 100, 200, 100, 200, 100, 200],
          tag: "vibration-sample",
        });
      });
    }
  });
}
```

上記の関数を適切なタイミングで呼び出すには、`onnotificationclick` イベントハンドラーが使用できます。

現在のサービスワーカーから発生した `Notification` の詳細は、 `ServiceWorkerRegistration.getNotifications()` を使用して取得することもできます。

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-serviceworkerregistration-shownotification |

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

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


ServiceWorkerRegistration.backgroundFetch - Web API

ServiceWorkerRegistration.backgroundFetch
=========================================

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

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

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

**`backgroundFetch`** は `ServiceWorkerRegistration` インターフェイスのプロパティで、`BackgroundFetchManager` オブジェクトへの参照を返します。これは、バックグラウンドフェッチ操作を開始することができます。

値
-

`BackgroundFetchManager` オブジェクト。

例
-

### バックグラウンドフェッチの開始

次のコードは、`backgroundFetch` プロパティにアクセスし、これを使用してバックグラウンドフェッチ操作を開始するものです。

```js
// main.js
async function requestBackgroundFetch(movieData) {
  const swRegistration = await navigator.serviceWorker.ready;
  const fetchRegistration = await swRegistration.backgroundFetch.fetch(
    "download-movie",
    ["/my-movie-part-1.webm", "/my-movie-part-2.webm"],
    {
      icons: movieIcons,
      title: "Downloading my movie",
      downloadTotal: 60 \* 1024 \* 1024,
      label: "Downloading a show",
    },
  );
  //...
}
```

仕様書
---

| Specification |
| --- |
| Background Fetch # dom-serviceworkerregistration-backgroundfetch |

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

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


ServiceWorkerRegistration.paymentManager - Web API

ServiceWorkerRegistration.paymentManager
========================================

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

**`paymentManager`** は `ServiceWorkerRegistration` インターフェイスのプロパティで、決済アプリの `PaymentManager` (en-US) インスタンスを返します。これは決済アプリの様々な機能を管理するために使用されます。

値
-

`PaymentManager` (en-US) のオブジェクトインスタンスです。

例
-

```js
navigator.serviceWorker.register("serviceworker.js").then((registration) => {
  registration.paymentManager.userHint = "Card number should be 16 digits";

  registration.paymentManager
    .enableDelegations(["shippingAddress", "payerName"])
    .then(() => {
      // ...
    });

  // ...
});
```

* `PaymentManager.userHint` (en-US) は、決済ハンドラー UI で決済アプリの名前とアイコンと共に表示するブラウザー用のヒントを提供するために使用します。
* `PaymentManager.enableDelegations()` (en-US)は、必要な決済情報の様々な部分を、加盟店のウェブサイト内から収集するのではなく、決済アプリに提供する責任を委任するために使用します。
仕様書
---

| Specification |
| --- |
| Payment Handler API # dom-serviceworkerregistration-paymentmanager |

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

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

関連情報
----

* 決済ハンドラー API (en-US)
* Web-based payment apps overview
* Setting up a payment method
* Life of a payment transaction
* 決済リクエスト API の使用
* 決済処理の概要


ServiceWorkerRegistration.active - Web API

ServiceWorkerRegistration.active
================================

**`active`** は `ServiceWorkerRegistration` インターフェイスのプロパティで、`ServiceWorker.state` がアクティブ化中 (`activating`) またはアクティブ化済み (`activated`) のサービスワーカーを返します。 このプロパティは、最初は `null` に設定されています。

クライアントの URL が登録のスコープ内にある場合、アクティブワーカーは `Client` を制御します（`ServiceWorkerContainer.register` が最初に呼び出されたときに設定された `scope` オプション）。

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

**メモ:** アクティブワーカーが `activating` になると、ランタイムスクリプトエラーやアクティブワーカーの強制終了でもアクティブワーカーが `activated` になります。

値
-

`ServiceWorker` オブジェクトのプロパティ（現在アクティブ化中 (`activating`) またはアクティブ化済み (`activated`) の状態の場合）。

仕様書
---

| Specification |
| --- |
| Service Workers # navigator-service-worker-active |

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

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

関連情報
----

* サービスワーカーの使用
* Service workers basic code example (英語)
* Is ServiceWorker ready? (英語)
* `Promise`
* ウェブワーカーの使用


ServiceWorkerRegistration.installing - Web API

ServiceWorkerRegistration.installing
====================================

**`installing`** は `ServiceWorkerRegistration` インターフェイスのプロパティで、`ServiceWorker.state` がインストール中 (`installing`) のサービスワーカーを返します。 このプロパティは、最初は `null` に設定されています。

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

値
-

`ServiceWorker` オブジェクト（現在インストール中 (`installing`) の状態の場合）。

仕様書
---

| Specification |
| --- |
| Service Workers # navigator-service-worker-installing |

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

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

関連情報
----

* サービスワーカーの使用
* Service workers basic code example (英語)
* Is ServiceWorker ready? (英語)
* `Promise`
* ウェブワーカーの使用


ServiceWorkerRegistration.index - Web API

ServiceWorkerRegistration.index
===============================

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

**`index`** は `ServiceWorkerRegistration` インターフェイスの読み取り専用プロパティで、オフラインコンテンツの索引付けができる `ContentIndex` (en-US) インターフェイスへの参照を返します。

値
-

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

例
-

このプロパティはメインスクリプトと登録済みサービスワーカーのどちらからでもアクセスできます。

ここでは、メインスクリプトからアクセスする例を示します。

```js
// reference registration
const registration = await navigator.serviceWorker.ready;

// feature detection
if ("index" in registration) {
  // Content Index API functionality
  const contentIndex = registration.index;
}
```

サービスワーカーからの呼び出し例です。

```js
// service worker script

const contentIndex = self.registration.index;
```

仕様書
---

| Specification |
| --- |
| Content Index # dom-serviceworkerregistration-index |

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

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 (英語)


ServiceWorkerRegistration: updatefound イベント - Web API

ServiceWorkerRegistration: updatefound イベント
===========================================

**`updatefound`** は `ServiceWorkerRegistration` インターフェイスのイベントで、 `ServiceWorkerRegistration.installing` プロパティが新しいサービスワーカーが取得するたびに呼び出されます。

構文
--

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

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

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

イベント型
-----

一般的な `Event` です。

例
-

```js
const registration = await navigator.serviceWorker.getRegistration();
if (registration) {
  registration.addEventListener("updatefound", () => {
    console.log("サービスワーカーの更新版が見つかりました。");
  });
}
```

仕様書
---

| Specification |
| --- |
| Service Workers # dom-serviceworkerregistration-onupdatefound |

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

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

関連情報
----

* サービスワーカーの使用


ServiceWorkerRegistration: pushManager プロパティ - Web API

ServiceWorkerRegistration: pushManager プロパティ
============================================

**`pushManager`** は `ServiceWorkerRegistration` インターフェイスのプロパティで、プッシュサブスクリプションを管理するための `PushManager` インターフェイスへの参照を返します。 これには、サブスクリプションへの参加、アクティブなサブスクリプションの取得、プッシュ通知の許可状況へのアクセスの対応が含まれます。

構文
--

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

例
-

```js
this.onpush = (event) => {
  console.log(event.data);
  // ここから、IndexedDB にデータを書き込んだり、いずれかのウィンドウに
  // それを送信したり、通知を表示したりできます。
};

navigator.serviceWorker
  .register("serviceworker.js")
  .then((serviceWorkerRegistration) => {
    serviceWorkerRegistration.pushManager.subscribe().then(
      (pushSubscription) => {
        console.log(pushSubscription.subscriptionId);
        console.log(pushSubscription.endpoint);
        // アプリケーションサーバが必要としているプッシュサブスクリプションの
        // 詳細はここから使用できます。たとえば、XMLHttpRequest を使用して
        // これを送信できます。
      },
      (error) => {
        // 開発中は、コンソールにエラーを表示するのに役立ちます。
        // 本番環境では、アプリケーションサーバにエラー情報を送信
        // するためにも 役立ちます。
        console.error(error);
      },
    );
  });
```

仕様書
---

| Specification |
| --- |
| Push API # dom-serviceworkerregistration-pushmanager |

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

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

関連情報
----

* プッシュ API


ServiceWorkerRegistration.update() - Web API

ServiceWorkerRegistration.update()
==================================

**`update()`** は `ServiceWorkerRegistration` インターフェイスのメソッドで、サービスワーカーの更新を試みます。 ワーカーのスクリプト URL を読み取り、新しいワーカーが現在のワーカーとバイト単位で同一でない場合は、新しいワーカーをインストールします。 前回の読み取りが 24 時間以上前であった場合、ワーカーの読み取り時にブラウザーのキャッシュをバイパスします。

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

構文
--

```js
update()
```

### 引数

なし。

### 返値

`ServiceWorkerRegistration` オブジェクトで解決する `Promise` です。

例
-

次の簡単な例では、サービスワーカーの例を登録し、次にイベントハンドラーをボタンに追加して、必要に応じてサービスワーカーを明示的に更新できるようにします。

```js
if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("/sw.js", { scope: "/" })
    .then((registration) => {
      // 登録成功
      console.log("登録に成功しました。");
      button.onclick = () => {
        registration.update();
      };
    })
    .catch((error) => {
      // 登録に失敗
      console.log(`登録に失敗しました: ${error}`);
    });
}
```

仕様書
---

| Specification |
| --- |
| Service Workers # service-worker-registration-update |

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

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

関連情報
----

* サービスワーカーの使用
* Service workers basic code example (英語)
* Is ServiceWorker ready? (英語)
* `Promise`
* ウェブワーカーの使用


ServiceWorkerRegistration.navigationPreload - Web API

ServiceWorkerRegistration.navigationPreload
===========================================

**`navigationPreload`** は `ServiceWorkerRegistration` インターフェイスの読み取り専用プロパティで、現在のサービスワーカー登録に関連する `NavigationPreloadManager` を返します。

返されるオブジェクトは、サービスワーカーによって管理されるリソースが、サービスワーカーの起動と並行して優先的にダウンロードできるようにします。

値
-

`NavigationPreloadManager` のインスタンスです。

仕様書
---

| Specification |
| --- |
| Service Workers # service-worker-registration-navigationpreload |

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

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


ServiceWorkerRegistration.scope - Web API

ServiceWorkerRegistration.scope
===============================

**`scope`** は `ServiceWorkerRegistration` インターフェイスの読み取り専用プロパティで、サービスワーカー登録の一意の識別子を返します。 サービスワーカーは、 `ServiceWorker` を登録する文書と同じオリジンにある必要があります。

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

値
-

固有の識別子。

仕様書
---

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

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

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

関連情報
----

* サービスワーカーの使用
* Service workers basic code example (英語)
* Is ServiceWorker ready? (英語)
* `Promise`
* ウェブワーカーの使用


ServiceWorkerRegistration.periodicSync - Web API

ServiceWorkerRegistration.periodicSync
======================================

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

**`periodicSync`** は `ServiceWorkerRegistration` インターフェイスの読み取り専用プロパティで、定期的なバックグラウンド同期プロセスを管理する `PeriodicSyncManager` インターフェイスへの参照を返します。

値
-

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

例
-

このプロパティはメインスクリプトと登録済みサービスワーカーのどちらからでもアクセスできます。

ここでは、メインスクリプトからアクセスする例を示します。

```js
// reference registration
const registration = await navigator.serviceWorker.ready;

// feature detection
if ("periodicSync" in registration) {
  // Background Periodic Sync functionality
  const periodicSync = registration.periodicSync;
}
```

サービスワーカーからの呼び出し例です。

```js
// service worker script

const periodicSync = self.registration.periodicSync;
```

仕様書
---

| Specification |
| --- |
| Web Periodic Background Synchronization # dom-serviceworkerregistration-periodicsync |

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

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 (英語)


ServiceWorkerRegistration.unregister() - Web API

ServiceWorkerRegistration.unregister()
======================================

**`unregister()`** は `ServiceWorkerRegistration` インターフェイスのメソッドで、サービスワーカーの登録を解除し、プロミス (`Promise`) を返します。 登録が見つからなかった場合、プロミスは `false` に解決されます。 それ以外の場合は、登録解除したかどうかに関係なく、`true` に解決されます（誰かが同じスコープで `ServiceWorkerContainer.register()` を同時に呼び出した場合は、登録解除されない場合があります）。 サービスワーカーは、登録解除される前に進行中の操作を完了します。

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

構文
--

```js
unregister()
```

### 引数

なし。

### 返値

`Promise` で、サービスワーカーが登録解除されたかどうかを示す論理値で解決します。

例
-

次の簡単な例では、サービスワーカーの例を登録していますが、すぐに録を解除しています。

```js
if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("/sw.js", { scope: "/" })
    .then((registration) => {
      // 登録に成功
      console.log("登録に成功しました。");
      registration.unregister().then((boolean) => {
        // boolean = true ならば、登録解除は成功
      });
    })
    .catch(function (error) {
      // 登録に失敗しました
      console.error(`登録に失敗しました: ${error}`);
    });
}
```

仕様書
---

| Specification |
| --- |
| Service Workers # navigator-service-worker-unregister |

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

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

関連情報
----

* サービスワーカーの使用
* Service workers basic code example (英語)
* Is ServiceWorker ready? (英語)
* `Promise`
* ウェブワーカーの使用


Headers.delete() - Web API

Headers.delete()
================

**`delete()`** は `Headers` インターフェイスのメソッドで、現在の `Headers` オブジェクトからヘッダーを削除します。

このメソッドでは、次の場合に `TypeError` が発生します。

* name 引数の値が HTTP ヘッダーの名前ではない場合。
* ガードの値が `immutable` である場合。

セキュリティ上の理由から、いくつかのヘッダーはユーザーエージェントでしか制御できません。これには、禁止ヘッダー名と禁止レスポンスヘッダー名があります。

構文
--

```js
delete(name)
```

### 引数

`name`

`Headers` オブジェクトから削除する HTTP ヘッダーの名前。

### 返値

なし (`undefined`)。

例
-

空の `Headers` オブジェクトの作成は簡単です。

```js
const myHeaders = new Headers(); // Currently empty
```

`Headers.append` を使用して、これにヘッダーを追加できます。

```js
myHeaders.append("Content-Type", "image/jpeg");
myHeaders.get("Content-Type"); // Returns 'image/jpeg'
```

その後、再度削除することができます。

```js
myHeaders.delete("Content-Type");
myHeaders.get("Content-Type"); // Returns null, as it has been deleted
```

仕様書
---

| Specification |
| --- |
| Fetch Standard # ref-for-dom-headers-delete① |

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

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

関連情報
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP


Headers.set() - Web API

Headers.set()
=============

**`set()`** は `Headers` インターフェイスのメソッドで、 `Headers` オブジェクトの中にある既存のヘッダーに新しい値を設定するか、ヘッダーがまだ存在しない場合には追加するかします。

`set()` と `Headers.append` の違いは、指定されたヘッダーがすでに存在し、複数の値を受け入れられる場合、 `set()` は既存の値を新しい値で上書きするのに対し、 `Headers.append` は新しい値を値の集合の最後に追加する点です。

セキュリティ上の理由から、いくつかのヘッダーはユーザーエージェントでしか制御できません。これには、禁止ヘッダー名と禁止レスポンスヘッダー名があります。

構文
--

```js
set(name, value)
```

### 引数

`name`

新しい値に設定したい HTTP ヘッダーの名前。指定された名前が HTTP ヘッダーの名前でない場合、このメソッドで `TypeError` 例外が発生します。

`value`

新たに設定したい値です。

### 返値

なし (`undefined`)。

例
-

空の `Headers` オブジェクトを作成するのは簡単です。

```js
const myHeaders = new Headers(); // Currently empty
```

これに `Headers.append` を使用してヘッダーを追加し、次に `set()` を使用してこのヘッダーに新しい値を設定することができます。

```js
myHeaders.append("Content-Type", "image/jpeg");
myHeaders.set("Content-Type", "text/html");
```

指定されたヘッダーがまだ存在しない場合、`set()` はそれを作成し、その値を指定された値に設定します。指定されたヘッダーが既に存在し、複数の値を受け入れられる場合は、 `set()` は既存の値を新しい値で上書きします。

```js
myHeaders.set("Accept-Encoding", "deflate");
myHeaders.set("Accept-Encoding", "gzip");
myHeaders.get("Accept-Encoding"); // Returns 'gzip'
```

新しい値を上書きするのではなく、値に追加するために `Headers.append` が必要になります。

仕様書
---

| Specification |
| --- |
| Fetch Standard # ref-for-dom-headers-set① |

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

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

関連情報
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP


Headers.forEach() - Web API

Headers.forEach()
=================

**`Headers.forEach()`** メソッドは、 `Headers` オブジェクト内のキー/値の組にそれぞれ一度ずつ、コールバック関数を実行します。

構文
--

```js
// アロー関数
forEach((value, key) => { /\* … \*/ })
forEach((value, key, object) => { /\* … \*/ })

// インラインコールバック関数
forEach(function (value, key) { /\* … \*/ })
forEach(function (value, key, object) { /\* … \*/ })
forEach(function (value, key) { /\* … \*/ }, thisArg)
```

### 引数

`callbackFn`

このマップの各項目に対して実行される関数です。以下の引数を取ります。

`value`

現在参照しているヘッダー項目の値です。

`key`

現在参照しているヘッダー項目の名前です。

`object`

反復処理を行う Headers オブジェクトです。

`thisArg` 省略可

`callback` を実行するときに `this` として使用する値。

### 返値

`undefined` です。

解説
--

`Headers.forEach()` メソッドは、指定されたコールバックを、実際に存在するヘッダーの各キーに対して一度ずつ実行します。削除されたキーに対しては呼び出されません。しかし、存在しているが値が undefined であるキーに対しては実行されます。

例
-

### Headers オブジェクトの内容を表示

以下のコードは `myHeaders` オブジェクトの各キー/値に対して 1 行ずつログ出力します。

```js
// 新しいテスト用 Headers オブジェクトを作成
const myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append("Cookie", "This is a demo cookie");
myHeaders.append("compression", "gzip");

// キーと値の組を表示
myHeaders.forEach((value, key) => {
  console.log(`${key} ==> ${value}`);
});
```

結果は次の通りです。
```

compression ==> gzip
content-type ==> application/json
cookie ==> This is a demo cookie
```

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

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

関連情報
----

* `Map.prototype.forEach()`
* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP


Headers.entries() - Web API

Headers.entries()
=================

**`Headers.entries()`** メソッドは、このオブジェクトに含まれるすべてのキーと値のペアを走査するイテレーターを返します。それぞれのペアのキーと値は両方とも `String` オブジェクトです。

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

構文
--

```js
entries()
```

### 引数

なし。

### 返値

イテレーターを返します。

例
-

```js
// Headers テストオブジェクトを作成
const myHeaders = new Headers();
myHeaders.append("Content-Type", "text/xml");
myHeaders.append("Vary", "Accept-Language");

// キーと値のペアを表示
for (const pair of myHeaders.entries()) {
  console.log(`${pair[0]}: ${pair[1]}`);
}
```

結果は次の通りです。
```

content-type: text/xml
vary: Accept-Language
```

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

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

関連情報
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP


Headers.keys() - Web API

Headers.keys()
==============

**`Headers.keys()`** メソッドは、このオブジェクトに含まれるすべてのキーを読み取ることができるイテレーターオブジェクトを返します。キーは文字列です。です。

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

構文
--

```js
keys()
```

### 引数

なし。

### 返値

イテレーターを返します。

例
-

```js
// テスト用の Headers オブジェクトを作成
const myHeaders = new Headers();
myHeaders.append("Content-Type", "text/xml");
myHeaders.append("Vary", "Accept-Language");

// キーを表示
for (const key of myHeaders.keys()) {
  console.log(key);
}
```

結果は次の通りです。
```

content-type
vary
```

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

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

関連情報
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP


Headers.get() - Web API

Headers.get()
=============

**`get()`** は `Headers` インターフェイスのメソッドで、指定された名前の `Headers` オブジェクト内のヘッダーのすべての値のバイト文字列を返します。要求されたヘッダーが `Headers` オブジェクトに存在しない場合、`null` を返します。

セキュリティ上の理由から、いくつかのヘッダーはユーザーエージェントでしか制御できません。これには、禁止ヘッダー名と禁止レスポンスヘッダー名があります。

構文
--

```js
get(name)
```

### 引数

`name`

`Headers` オブジェクトから値を取得する HTTP ヘッダーの名前。指定された名前が HTTP ヘッダーの名前でない場合、このメソッドでは `TypeError` 例外が発生します。名前は大文字と小文字を区別しません。

### 返値

取得したヘッダーの値を表す文字列の配列です。このヘッダーが設定されていない場合は `null` を返します。

例
-

空の `Headers` オブジェクトの作成は簡単です。

```js
const myHeaders = new Headers(); // 現在空です
myHeaders.get("Not-Set"); // null を返します
```

`Headers.append` を使用してヘッダーを追加し、`get()` を使用してヘッダーを取得できます。

```js
myHeaders.append("Content-Type", "image/jpeg");
myHeaders.get("Content-Type"); // "image/jpeg" を返します
```

ヘッダーに複数の値が関連付けられている場合、ByteString には、`Headers` オブジェクトに追加された順序ですべての値が含まれます。

```js
myHeaders.append("Accept-Encoding", "deflate");
myHeaders.append("Accept-Encoding", "gzip");
myHeaders.get("Accept-Encoding"); // "deflate,gzip" を返します
myHeaders
  .get("Accept-Encoding")
  .split(",")
  .map((v) => v.trimStart()); // [ "deflate", "gzip" ] を返します。
```

仕様書
---

| Specification |
| --- |
| Fetch Standard # ref-for-dom-headers-get① |

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

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

関連情報
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP


Headers() - Web API

Headers()
=========

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

構文
--

```js
new Headers()
new Headers(init)
```

### 引数

`init` 省略可

`Headers` オブジェクトに事前に入力したい、任意の HTTP ヘッダーを含むオブジェクトです。これは文字列の値を持つ単純なオブジェクトリテラル、名前と値の組の配列（各組は 2 つの要素を持つ文字列の配列）、あるいは既存の `Headers` オブジェクトになります。最後の場合は、新しい `Headers` オブジェクトは既存の `Headers` オブジェクトからそのデータをコピーします。

例
-

簡単に空の `Headers` オブジェクトを生成できます。

```js
const myHeaders = new Headers(); // Currently empty
```

`Headers.append` を使用してヘッダーを追加できます。

```js
myHeaders.append("Content-Type", "image/jpeg");
myHeaders.get("Content-Type"); // Returns 'image/jpeg'
```

または、`Headers` オブジェクトの生成時に必要なヘッダーを追加することもできます。次のスニペットでは、新しい `Headers` を作成し、コンストラクターに初期化オブジェクトを引数として渡してヘッダーを追加しています。

```js
const httpHeaders = {
  "Content-Type": "image/jpeg",
  "X-My-Custom-Header": "Zeke are cool",
};
const myHeaders = new Headers(httpHeaders);
```

最初の `Headers` を初期化オブジェクトとして渡して、別の `Headers` オブジェクトを生成できます。

```js
const secondHeadersObj = new Headers(myHeaders);
secondHeadersObj.get("Content-Type"); // Would return 'image/jpeg' — it inherits it from the first headers object
```

また、`Headers` オブジェクトを作成する際に、二次元の配列を使用して、同じ値を持つ複数のヘッダーを追加することができます。以下のスニペットでは、コンストラクターの引数に初期化配列を渡して、複数の `Set-Cookie` ヘッダーを持つ新しい `Headers` オブジェクトを作成しています。

```js
const headers = [
  ["Set-Cookie", "greeting=hello"],
  ["Set-Cookie", "name=world"],
];
const myHeaders = new Headers(headers);
```

仕様書
---

| Specification |
| --- |
| Fetch Standard # ref-for-dom-headers① |

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

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

関連情報
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP


Headers.has() - Web API

Headers.has()
=============

**`has()`** は `Headers` インターフェイスのメソッドで、 `Headers` オブジェクトに指定された特定のヘッダーがあるかどうかを示す論理値を返します。

セキュリティ上の理由から、いくつかのヘッダーはユーザーエージェントでしか制御できません。これには、禁止ヘッダー名と禁止レスポンスヘッダー名があります。

構文
--

```js
has(name)
```

### 引数

`name`

テストしたい HTTP ヘッダーの名前。指定された名前が有効な HTTP ヘッダーの名前でない場合、このメソッドで `TypeError` 例外が発生します。

### 返値

論理値です。

例
-

空の `Headers` オブジェクトを作成するのは簡単です。

```js
const myHeaders = new Headers(); // Currently empty
```

これに `Headers.append` を使用してヘッダーを追加し、`has()` を使用してヘッダーが存在するかどうかをテストすることができます。

```js
myHeaders.append("Content-Type", "image/jpeg");
myHeaders.has("Content-Type"); // Returns true
myHeaders.has("Accept-Encoding"); // Returns false
```

仕様書
---

| Specification |
| --- |
| Fetch Standard # ref-for-dom-headers-has① |

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

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

関連情報
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP


Headers.append() - Web API

Headers.append()
================

**`append()`** は `Headers` インターフェイスのメソッドで、 `Headers` オブジェクト内の既存のヘッダーに新しい値を追加します。または、既存のヘッダーがない場合には、ヘッダーを追加します。

`set()` と `append()` の違いは、指定されたヘッダーがすでに存在し、複数の値を受け入れる場合、`set()` は既存の値を新しい値で上書きするのに対し、`append()` は新しい値を値の集合の最後に追加するという点です。

セキュリティ上の理由から、いくつかのヘッダーはユーザーエージェントでしか制御できません。これには、禁止ヘッダー名と禁止レスポンスヘッダー名があります。

構文
--

```js
append(name, value)
```

### 引数

`name`

`Headers` オブジェクトに追加する HTTP ヘッダー名。

`value`

HTTP ヘッダーに追加する値。

### 返値

なし (`undefined`)。

例
-

空の `Headers` オブジェクトの生成はシンプルです。

```js
const myHeaders = new Headers(); // 現在は空
```

`append()` を使用してヘッダーを追加することができます。

```js
myHeaders.append("Content-Type", "image/jpeg");
myHeaders.get("Content-Type"); // 'image/jpeg' を返します。
```

指定されたヘッダーがすでに存在する場合、`append()` はその値を指定された値に変更します。指定したヘッダーが既に存在し、複数の値を受け入れられる場合、`append()` は新しい値を値の集合の最後に追加します。

```js
myHeaders.append("Accept-Encoding", "deflate");
myHeaders.append("Accept-Encoding", "gzip");
myHeaders.get("Accept-Encoding"); // 'deflate, gzip' を返します。
```

古い値を新しい値で上書きするには、 `Headers.set` を使います。

仕様書
---

| Specification |
| --- |
| Fetch Standard # ref-for-dom-headers-append① |

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

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

関連項目
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP


Headers.values() - Web API

Headers.values()
================

**`Headers.values()`** メソッドは、このオブジェクトに含まれるすべての値を読み取ることができるイテレーターを返します。値は文字列です。

**メモ:** このメソッドはウェブワーカーで利用できます。

構文
--

```js
values()
```

### 引数

なし。

### 返値

イテレーターを返します。

例
-

```js
// Create a test Headers object
const myHeaders = new Headers();
myHeaders.append("Content-Type", "text/xml");
myHeaders.append("Vary", "Accept-Language");

// Display the values
for (const value of myHeaders.values()) {
  console.log(value);
}
```

結果は次の通りです。
```

text/xml
Accept-Language
```

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

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

関連情報
----

* サービスワーカー API
* HTTP アクセス制御 (CORS)
* HTTP


VREyeParameters.minimumFieldOfView - Web API

VREyeParameters.minimumFieldOfView
==================================

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

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

**`minimumFieldOfView`** は `VREyeParameters` インターフェイスの読み取り専用プロパティで、現在の目における最小の視野を示します。

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

値
-

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

仕様書
---

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

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

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

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

関連情報
----

* WebVR API
* `VRFieldOfView`


VREyeParameters.renderHeight - Web API

VREyeParameters.renderHeight
============================

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

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

**`renderHeight`** は `VREyeParameters` インターフェイスの読み取り専用プロパティで、それぞれの目のビューポートの推奨レンダーターゲットの高さを、ピクセル単位で表します。

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

これは既にデバイスピクセル単位なので、 Window.devicePixelRatio を HTMLCanvasElement.height に設定する前に掛け合わせる必要はありません。

### 値

数値で、高さをピクセル単位で表します。

例
-

コード例については `VREyeParameters` を参照してください。

仕様書
---

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

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

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

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

関連情報
----

* WebVR API


VREyeParameters.offset - Web API

VREyeParameters.offset
======================

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

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

**`offset`** は `VREyeParameters` インターフェイスの読み取り専用プロパティで、は、ユーザーの目と目の間の中心点から目の中心までのオフセットを表します。単位はメートルです。

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

この値は、ユーザーの瞳孔間距離（IPD）の半分で あるべきですが、指定された目のヘッドセットの中心点からレンズの中心点までの距離を表してもかまいません。

### 値

ユーザーの目と目の間の中心点から目の中心までのオフセットをメートル単位で記述したベクトルを表す `Float32Array` です。

**メモ:** 左目の値は負の値、右目の値は正の値になります。

例
-

コード例については `VRFieldOfView` を参照してください。

仕様書
---

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

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

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

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

関連情報
----

* WebVR API


VREyeParameters.renderWidth - Web API

VREyeParameters.renderWidth
===========================

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

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

**`renderWidth`** は `VREyeParameters` インターフェイスの読み取り専用プロパティでそれぞれの目のビューポートの推奨レンダーターゲットの幅を、ピクセル単位で表します。

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

これは既にデバイスピクセル単位なので、 Window.devicePixelRatio を HTMLCanvasElement.width に設定する前に掛け合わせる必要はありません。

### 値

数値で、高さをピクセル単位で表します。

例
-

コード例については `VREyeParameters` を参照してください。

仕様書
---

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

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

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

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

関連情報
----

* WebVR API


VREyeParameters.fieldOfView - Web API

VREyeParameters.fieldOfView
===========================

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

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

**`fieldOfView`** は`VREyeParameters` インターフェイスの読み取り専用プロパティで、現在の眼の視野角を表します．この値は瞳孔間距離 (IPD) をユーザーが調整すると、それに応じて変化します。

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

値
-

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

例
-

コード例については `VRFieldOfView` を参照してください。

仕様書
---

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

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

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

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

関連情報
----

* WebVR API


VREyeParameters.maximumFieldOfView - Web API

VREyeParameters.maximumFieldOfView
==================================

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

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

**`maximumFieldOfView`** は `VREyeParameters` インターフェイスの読み取り専用プロパティで、現在の目における最大の視野を示します。

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

値
-

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

仕様書
---

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

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

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

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

関連情報
----

* WebVR API
* `VRFieldOfView`


AudioTrack.kind - Web API

AudioTrack.kind
===============

**`kind`** プロパティは、文字列で **`AudioTrack`** に含まれる音声のカテゴリーを示します。

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

値
-

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

音声トラックの種別文字列
------------

音声トラックに使用できる種別は次のとおりです。

`"alternative"`

別テイクの音声や、サウンドトラックのセリフなしバージョンなど、メイントラックの代わりとなる可能性があるものです。

`"descriptions"`

動画トラックに描かれているアクションの音声による説明を提供する音声トラック。

`"main"`

主音声トラック。

`"main-desc"`

主音声トラックに音声の説明が混在していもの。

`"translation"`

主音声トラックの翻訳版。

`"commentary"`

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

`""` （空の文字列）

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

仕様書
---

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

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

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


AudioTrack.enabled - Web API

AudioTrack.enabled
==================

**`AudioTrack`** の **`enabled`** プロパティは、記述された音声トラックが現在使用可能かどうかを指定します。 `enabled` を `false` に設定してトラックを無効にすると、トラックはミュートになり、音声は生成されません。

値
-

`enabled` プロパティは論理値で、トラックが有効な場合は値が `true` になります。 有効なトラックは、メディアの再生中に音声を生成します。 `enabled` を `false` に設定すると、音声トラックが効果的にミュートされ、メディアの音声パフォーマンスに寄与しなくなります。

例
-

この例では、メディア要素のメイン音声トラックと解説音声トラックを切り替えます。

```js
function swapCommentaryMain() {
  const videoElem = document.getElementById("main-video");
  let audioTrackMain;
  let audioTrackCommentary;

  videoElem.audioTracks.forEach(track) {
    if (track.kind === "main") {
      audioTrackMain = track;
    } else if (track.kind === "commentary") {
      audioTrackCommentary = track;
    }
  }

  if (audioTrackMain && audioTrackCommentary) {
    const commentaryEnabled = audioTrackCommentary.enabled;
    audioTrackCommentary.enabled = audioTrackMain.enabled;
    audioTrackMain.enabled = commentaryEnabled;
  }
}
```

上記の `swapCommentaryMain()` 関数は、`<video>` 要素の `"main-video"` の音声トラック内で、`kind` の値が `"main"` と `"commentary"` である音声トラックを見つけます。 これらはプライマリ音声トラックと解説トラックを表します。

**メモ:** この例では、動画には各種類のトラックが 1 つずつしかないと想定していますが、必ずしもそうとは限りません。

次に、要素の音声トラックを、JavaScript の `forEach()` メソッドを使用してスキャンします（メディア要素の `audioTracks` プロパティは実際には JavaScript の配列ではありませんが、ほとんどの場合は同様にアクセスできます）。

スキャンは、`kind` の値が `"main"` と `"commentary"` のトラックを探し、それらの `AudioTrack` オブジェクトを記憶します。 それらが見つかると、2つのトラックの `enabled` プロパティの値を交換することで、2つのトラックのどちらが現在アクティブになっているかを交換します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-audiotrack-enabled-dev |

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

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


AudioTrack.language - Web API

AudioTrack.language
===================

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

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

値
-

音声トラックで使用される主要言語の BCP 47（RFC 5646）形式の言語タグを指定する文字列です。 言語が指定されていないか不明である場合、トラックに発話が含まれていない場合は空文字列 (`""`) になります。

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

例
-

この例では、メディア要素の主要言語と翻訳された音声トラックのすべてを検索し、それらの各トラックの `id`、`kind`、`language` を含むオブジェクトのリストを返します。

これは、例えば、映画を見ながら、ユーザーが聞きたい言語を選択するためのユーザーインターフェイスを構築するために使用することができます。

```js
function getAvailableLanguages(el) {
  const trackList = [];
  const wantedKinds = ["main", "translation"];

  el.audioTracks.forEach(function (track) {
    if (wantedKinds.includes(track.kind)) {
      trackList.push({
        id: track.id,
        kind: track.kind,
        language: track.language,
      });
    }
  });
  return trackList;
}
```

仕様書
---

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

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

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


AudioTrack.id - Web API

AudioTrack.id
=============

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

この ID を `AudioTrackList.getTrackById()` メソッドと共に使用して、メディア要素に関連付けられているメディア内の特定のトラックを見つけることができます。トラック ID は、特定のトラックを読み込むための URL のフラグメントとしても使用できます（メディアがメディアフラグメントに対応している場合）。

値
-

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

仕様書
---

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

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

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


AudioTrack.sourceBuffer - Web API

AudioTrack.sourceBuffer
=======================

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

値
-

`SourceBuffer` または null です。

仕様書
---

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

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

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


AudioTrack.label - Web API

AudioTrack.label
================

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

値
-

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

例えば、 `kind` が `"commentary"` のトラックには、`"Mark Markmarkimark 監督とスター Donna Donnalidon による解説"` のような `label` が付けられます。

例
-

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

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

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

結果の `trackList` には、`wantedKinds` 配列のいずれかの `kind` の音声トラックの配列が含まれ、各エントリーにはトラックの `id`、`kind`、`label` が含まれます。

仕様書
---

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

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

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


StorageManager.getDirectory() - Web API

StorageManager.getDirectory()
=============================

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

`StorageManager` インターフェイスの **`getDirectory()`** メソッドは、オリジンプライベートファイルシステム (OPFS) に保存されたディレクトリーとその中身へのアクセスを可能にする `FileSystemDirectoryHandle` オブジェクトへの参照を取得するために使用されます。

構文
--

```js
getDirectory()
```

### 引数

なし

### 返値

`FileSystemDirectoryHandle` のオブジェクトで解決される `Promise` を返します。

### 例外

`SecurityError` `DOMException`

ユーザーエージェントが要求されたディレクトリーをローカルの OPFS にマップできないとき投げられます。

例
-

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

1. `getDirectory()` を用いて OPFS のルートを表す `FileSystemDirectoryHandle` を取得し、変数 `root` に保存します。
2. `FileSystemDirectoryHandle.getFileHandle()` を用いてファイルハンドルを取得します。
3. `FileSystemFileHandle.createSyncAccessHandle()` を用いて同期式ファイルアクセスハンドルを作成します。
4. ファイルのサイズを取得し、格納するための `ArrayBuffer` を作成します。
5. ファイルの読み書きをします。
6. 変更をディスクに保存し、同期式アクセスハンドルを閉じます。

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

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

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

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

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

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

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

仕様書
---

| Specification |
| --- |
| File System Standard # dom-storagemanager-getdirectory |

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

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

関連情報
----

* `StorageManager`
* `navigator.storage` (en-US)
* `FileSystemDirectoryHandle`


StorageManager.estimate() - Web API

StorageManager.estimate()
=========================

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

**`estimate()`** は `StorageManager` インターフェイスのメソッドで、ストレージマネージャーに、現在のオリジンが使用しているストレージの大きさ (`usage`) と、利用可能な空間の量 (`quota`) を要求します。

このメソッドは非同期的に動作するので、情報が利用可能になると解決する `Promise` を返します。プロミスの成功ハンドラーは、使用量とクォータのデータを含む `StorageEstimate` を入力として受け取ります。

構文
--

```js
const estimatePromise = StorageManager.estimate();
```

### 引数

なし。

### 返値

`Promise` で、これは `StorageEstimate` 辞書に準拠したオブジェクトに解決します。この辞書には、このオリジンで利用可能なおよその大きさが `StorageEstimate.quota` (en-US) に、現在使用されているおよその量が `StorageEstimate.usage` (en-US) に入ります。

**メモ:** \*\*これらは正確な数値ではありません。\*\*圧縮、重複排除セキュリティ上の理由による難読化などが行われるため、正確な値にはなりません。

`quota` はオリジンごとに異なることに気づくかもしれません。この違いは次のような要因に基づきます。

* ユーザーが訪れる頻度
* 公開されたサイトの有名度データ
* ブックマーク、ホーム画面へ追加、プッシュ通知の受付などのユーザーのエンゲージメントの印
例
-

この例では、使用量の概算値を取得し、現在使用しているストレージ容量のパーセント値をユーザーに提示します。

### HTML の内容

```html
<label>
  現在、使用可能なストレージの約 <output id="percent"> </output>%
  を使用しています。
</label>
```

### JavaScript の内容

```js
navigator.storage.estimate().then(function (estimate) {
  document.getElementById("percent").value = (
    (estimate.usage / estimate.quota) \*
    100
  ).toFixed(2);
});
```

### 結果

仕様書
---

| Specification |
| --- |
| Storage Standard # ref-for-dom-storagemanager-estimate |

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

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

関連情報
----

* Storage API
* `Storage`: `Window.localStorage` から返されるオブジェクト
* `StorageManager`
* `navigator.storage` (en-US)


StorageManager.persisted() - Web API

StorageManager.persisted()
==========================

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

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

`StorageManager` インターフェイスの **`persisted()`** メソッドは、サイトのストレージに対してボックスモードが永続的であれば `true` に解決される `Promise` を返します。

構文
--
```

navigator.storage.persisted().then(function(persistent) { ... })
```

### パラメーター

なし。

### 戻り値

`Boolean` に解決される `Promise`。

例
-

```js
if (navigator.storage && navigator.storage.persist)
  navigator.storage.persisted().then(function (persistent) {
    if (persistent)
      console.log("明示的なユーザー操作以外では、ストレージは消去されません。");
    else
      console.log(
        "ストレージは UA によってストレージの圧力により消去されるかもしれません。",
      );
  });
```

仕様
--

| Specification |
| --- |
| Storage Standard # dom-storagemanager-persisted |

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

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


StorageManager.persist() - Web API

StorageManager.persist()
========================

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

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

`StorageManager` インターフェイスの **`persist()`** メソッドは、永続的ストレージ（persistent storage）を使用するパーミッションを要求します。 そして、パーミッションが付与されてボックスモードが永続的な場合は `true` に、そうでない場合は `false` に解決される `Promise` を返します。

構文
--
```

navigator.storage.persist().then(function(persistent) { ... })
```

### パラメーター

なし。

### 戻り値

`Boolean` に解決される `Promise`。

例
-

```js
if (navigator.storage && navigator.storage.persist)
  navigator.storage.persist().then(function (persistent) {
    if (persistent)
      console.log("明示的なユーザー操作以外では、ストレージは消去されません。");
    else
      console.log(
        "ストレージは UA によってストレージの圧力により消去されるかもしれません。",
      );
  });
```

仕様
--

| Specification |
| --- |
| Storage Standard # ref-for-dom-storagemanager-persist |

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

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


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

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

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

**`PaymentRequestUpdateEvent()`** コンストラクターは新しい `PaymentRequestUpdateEvent` オブジェクトを作成します。このオブジェクトによりウェブページはユーザー操作に反応して `PaymentRequest` の詳細を更新することができます。実際の更新は `updateWith()` メソッドにオプションを渡すことで行われます。

構文
--

```js
new PaymentRequestUpdateEvent()
```

### 引数

なし。

### 返値

新しい `PaymentRequestUpdateEvent` です。

仕様書
---

| Specification |
| --- |
| Payment Request API 1.1 # constructor-0 |

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

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


PaymentRequestUpdateEvent: updateWith() メソッド - Web API

PaymentRequestUpdateEvent: updateWith() メソッド
============================================

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

**`updateWith()`** は `PaymentRequestUpdateEvent` インターフェイスのメソッドで、既存の `PaymentRequest` の詳細を更新します。

構文
--

```js
updateWith(details)
```

### 引数

`details`

決済リクエストに適用された変更を指定するオブジェクトです。

`displayItems` 省略可

オブジェクトの配列で、それぞれが決済リクエストの 1 行を記述しています。これらは領収書や請求書の行を表し、それぞれ以下のプロパティを持ちます。

`amount`

アイテムの金銭的価値を記述するオブジェクト。このオブジェクトには、以下のフィールドが記載されます。

`currency`

決済の `value` に使用する通貨を示す有効な 3 文字の ISO 4217 通貨識別子 (ISO 4217) を含む文字列です。

`value`

決済額を構成する通貨の単位を表す有効な10進数値を格納した文字列です。この文字列は、負の値を示すオプションの先頭の "-" と、0 から 9 までの 1 桁以上の数字、そしてオプションの小数点（"。"、ロケールに関係なく）と、少なくとも 1 桁以上の数字が続くものだけを格納する必要があります。空白は許されません。

`label`

課金される商品や サービスの、人間が読み取り可能な名称や説明を指定する文字列。インターフェイスのデザインによっては、ユーザーエージェントによってユーザーに表示されることもあります。

`pending`

論理値で、指定した `amount` がまだ確定していない場合は `true` となります。これは、配送先住所や配送オプションなどの選択によって変わる送料や税額などの項目を示すために使用することができます。ユーザーエージェントはこの情報を示すことができますが、そうする必要はありません。

`error` 省略可
非推奨

文字列で、ユーザーに提示するエラーメッセージ指定します。`updateWith()` を呼び出す際、更新データに `error` を含めると、ユーザーエージェントに一般的なエラーメッセージとしてその文字列が表示されます。住所フィールド固有のエラーについては、`shippingAddressErrors` を使用してください。

`modifiers` 省略可

`PaymentDetailsModifier` オブジェクトの配列で、それぞれ具体的な決済方法識別子の変更するための記述となっています。例 えば、選択した決済方法に基づいて総支払額を調整するために使用することができます (「5% の現金割引! 」)。

`shippingAddressErrors` 省略可
非推奨

配送先住所の各プロパティで検証できなかったエラーメッセージを含めることができる `AddressErrors` オブジェクト。

`shippingOptions` 省略可

`PaymentShippingOption` オブジェクトの配列。それぞれのオブジェクトは、ユーザーが選ぶことができる利用できる配送オプションの 1 つを記述します。

`total` 省略可

`displayItems` のオブジェクトと同じプロパティを持つオブジェクトで、決済に関する最新の合計を提供する。これが `displayItems` のすべてのアイテムの合計と等しいことを確認してください。これは自動的に計算されるものではありません。支払総額が変わるたびに、この値を自分で更新する必要があります。これにより、税金や割引、その他請求金額の合計を調整するようなことを処理するための柔軟性を持つことができます。

### 返値

なし (`undefined`)。

仕様書
---

| Specification |
| --- |
| Payment Request API 1.1 # dom-paymentrequestupdateevent-updatewith |

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

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