視点とビューアー: WebXR でのカメラのシミュレーション - Web API

視点とビューアー: WebXR でのカメラのシミュレーション
==============================

アプリケーションで視点とカメラを管理するためのコードを検討する際に理解する最初で最も重要なことは、*WebXR にカメラがないこと*です。 WebGL または WebXR API によって提供される、回転して移動するだけで画面に表示されるものを自動的に変更できるビューアーを表す魔法のオブジェクトはありません。 このガイドでは、カメラを動かさずに WebGL を使用してカメラの動きをシミュレートする方法を示します。 これらの手法は、任意の WebGL（または WebXR）プロジェクトで使用できます。

3D グラフィックスのアニメーション化は、コンピューターサイエンス、数学、芸術、グラフィックデザイン、運動学、解剖学、生理学、物理学、および映画撮影における複数の分野を統合するソフトウェア開発の領域です。 私たちは実際のカメラを持っていないので、実際にユーザーをシーン内で動かすことなく、カメラを持っているかのような*効果*を再現するカメラを想像します。

WebGL と WebXR の背後にある基本的な数学、幾何学、およびその他の概念についての記事がいくつかあります。 これは、この記事を読む前または読んでいるときに役立つかもしれません。

* 基本の 3D 理論の説明
* ウェブの行列計算
* WebGL のモデル、ビュー、投影
* WebXR の幾何学と参照空間

*編注: この記事で使用されているほとんどの図は、標準的な動作を実行しながらカメラがどのように動くかを示すために、FilmmakerIQ ウェブサイトの記事から取られました。 つまり、ウェブ全体で見られるこの画像からです。 それらは頻繁に再利用されるため、許可されたライセンスの下で利用できると想定しているため、所有権は不明です。 私たちはそれが自由に使えることを望みます。 そうでない場合で、あなたが所有者である場合はお知らせください。 新しい図を検索または作成します。 または、画像の使用を継続してよろしければ、適切にクレジットできるようにお知らせください。*

カメラと相対運動
--------

古典的な実写映画を撮影する時は、俳優はセットにいて、演技しながらセットを動きまわり、1 台以上のカメラでその動きを見守ります。 カメラは固定することもできますが、動き回るように設定したり、パフォーマーの動きを追跡したり、ドリーイン/アウトして感情的な影響を与えたりすることもできます。

### 仮想カメラ

WebGL（そして、拡張によって、WebXR）では、移動および回転できるカメラオブジェクトがないため、これらの動きのふりをする方法を見つける必要があります。 カメラがないので、そのふりをする方法を見つけなければなりません。 幸いなことに、ガリレオ、ニュートン、ローレンツ、アインシュタインのような物理学者は私たちに\*\*相対性原理\*\*を与えてくれました。 それは物理学の法則がすべての参照系で同じ形であると述べています。 つまり、どこに立っていても、物理法則は同じように機能します。

つまり、あなたと他の人が固い石の何もないフィールドに立っていて、目に見える限り他のものが見えない場合、あなたが他の人に向かって 3 メートル移動すると、他の人があなたに向かって 3 メートル移動した場合と*同じ*結果になります。 どちらにも違いを見分ける方法はありません。 第三者は違いを見分けることができますが、2 人にはできません。 カメラの場合は、カメラを動かすか、*カメラの周りのすべてを動かす*ことで、同じ視覚結果を得ることができます。

そしてそれが私たちの解決策です。 カメラを動かすことができないので、カメラの周りの世界を動かします。 レンダラーは、カメラがどこにあると想像するかを知っている必要があります。 次に、すべての可視オブジェクトの位置を変更して、その位置と方向をシミュレートします。 したがって、実際のカメラオブジェクトを参照する代わりに、WebGL および WebXR プログラミングでは**カメラ**（camera）という用語を使用して、3D 空間に実際のオブジェクトが存在するかどうかにかかわらず、シーンの仮定のビューアーの位置と視線方向を表すオブジェクトを参照します。

### 視点

カメラは仮想オブジェクトであり、必ずしも仮想世界の物理的なオブジェクトを表すのではなく、ビューアーの位置と視線方向を表すため、カメラの使用を必要とする状況の種類について考えることは役立ちます。 ゲーム関連の状況は、多くの場合ゲーム固有の特殊なケースであるため、個別にリストされていますが、これらのパースペクティブのいずれも 3D グラフィックシーンに適用される場合があります。

#### 一般化されたカメラ

一般に、仮想カメラはシーン内の物理オブジェクトに組み込まれる場合と組み込まれない場合があります。 実際、3D ゲームの範囲外では、カメラがシーンに表示されるオブジェクトとまったく対応しない可能性がはるかに高くなります。 次が 3D カメラの使用例です。

* アニメーションをレンダリングするとき — 映画制作のために、またはプレゼンテーションやゲームのコンテキスト内で使用するために — 仮想カメラは、実世界のフィルムカメラのように使用されます。 視聴者（ビューアー）はおそらくそれらの手法を使用して映画を鑑賞して成長しており、映画やアニメーションがそれらの方法に従うという潜在意識の期待があるため、可能な限り、標準の映画撮影手法が使用されます。 それらから逸脱すると、視聴者をその瞬間から引き離すことができます。
* ビジネスアプリケーションでは、3D カメラを使用して、グラフやチャートなどをレンダリングするときに、見かけの大きさとパースペクティブを簡単に設定できます。
* 地図アプリケーションでは、カメラをシーンの真上に配置するか、さまざまな角度を使用してパースペクティブを表現できます。 3D GPS ソリューションの場合、カメラはユーザーの周囲の領域を表示するように配置され、ディスプレイの大部分はユーザーの移動経路の前方の領域を示します。
* WebGL を使用して 2D グラフィックス描画を高速化する場合、通常、カメラはシーンの中心の真上に配置され、距離と視野はシーン全体を表示できるように設定されます。
* ビットマップグラフィックスを高速化する場合、レンダラーは 2D 画像を WebGL テクスチャーのバッファーに描画し、テクスチャーを再描画して画面をリフレッシュします。 これは基本的に、2D グラフィックアプリケーションでマルチプルバッファリング（multiple buffering）を実行するためのバックバッファーとしてテクスチャーを使用します。

#### ゲームにおけるカメラ

ゲームにはさまざまな種類があり、カメラをゲームで使用するにはいくつかの方法があります。 一般的な状況は次のとおりです。

* ファーストパーソンゲームでは、カメラはプレイヤーのアバターの頭の中にあり、アバターの目と同じ方向を向いています。 このようにして、プレイヤーの画面またはヘッドセットに表示されるビューは、アバターが見るものです。
* 一部のサードパーソンゲームでは、カメラがプレイヤーのアバターや乗り物の後ろの少し離れたところにあり、ゲームの世界を移動するときに後ろから見ています。 これは、多くのマルチプレイヤーオンラインロールプレイングゲーム、特定のシューティングゲームなどで使用されます。 人気のある例には、*World of Warcraft*、*トゥームレイダー*、*フォートナイト* などがあります。 このカテゴリーには、カメラがプレイヤーの肩の真上に配置されるゲームも含まれます。
* 一部の 3D ゲームは、フライトシミュレーターで航空機のさまざまなウィンドウを見る、またはステージ（game level）内のすべての防犯カメラからのビューを見るなど、視点を変更する能力を提供します（スパイとステルスベースのゲームの一般的な機能）。 この能力は、スコープ付きの武器を提供するゲームでも使用されます。 この場合、ビューは、もはや頭の位置に完全に基づいていません。
* 3D ゲームは、目に見えない種類のアバターを配置するか、固定の仮想カメラを選択して監視することにより、非プレイヤーがアクションを観察する能力も提供します。
* 高度な 3D ゲームでは、カメラまたはカメラのようなオブジェクトを使用して、プレイヤーキャラクターが使用できるものと同じレンダリングエンジンおよび物理エンジンによって、非プレイヤーキャラクターが何を見ることができるかを決定できます。
* シングルスクリーン 2D ゲームでは、カメラはプレイヤーやゲーム内の他のキャラクターに直接関連付けられていませんが、代わりにゲームプレイエリアの上または横に固定されているか、アクションがスクロールするゲーム世界を動き回るときにアクションに従います。 例えば、*パックマン*などの古典的なアーケードゲームは固定されたゲームマップ上で行われるため、カメラはマップ上の設定距離に固定され、常にゲームの世界を真下に向けます。
* *スーパーマリオブラザーズ*などの横スクロールゲームまたは縦スクロールゲームでは、カメラは左右（または上下、あるいはその両方）に沿って移動するため、ステージがビューポートよりはるかに大きくても、アクションは表示されたままになります。
### カメラの配置

WebGL または WebXR には標準のカメラオブジェクトがないため、カメラを自分でシミュレートする必要があります。 そうする前に、そしてカメラの動きをシミュレートする前に、実際に仮想カメラとその動きを最も基本的なレベルで見てみましょう。 すべてのものと同様に、空間内のオブジェクトの**位置**（position）は、たとえ仮想空間であっても、原点を基準にした位置を示す 3 つの数値を使用して表すことができ、原点の位置は (0, 0, 0) と定義されています。

オブジェクトと空間の原点との空間関係には、考慮する必要のある別の側面があります。 それは**パースペクティブ**（perspective）です。 パースペクティブは、シーン内のオブジェクトに適切に適用されると、通常の 2D 画面と同じくらい平面に見えるシーンを取り、まるで 3D であるかのように飛び出させることができます。 パースペクティブにはいくつかの種類があります。 それらは定義されており、それらの数学は WebGL のモデル、ビュー、投影の記事で説明されています。 重要なのは、ベクトルに対するパースペクティブの効果は、ベクトルに `w` と呼ばれる 4 番目のパースペクティブ成分を追加することによって表すことができるということです。

`w` の値は、他の 3 つの成分のそれぞれをそれで除算することによって適用され、最終的な位置またはベクトルを取得します。 つまり、(`x`, `y`, `z`, `w`) として与えられた座標の場合、3D 空間の点は実際には (`x`/`w`, `y`/`w`, `z`/`w`, 1) または単に (`x`/`w`, `y`/`w`, `z`/`w`) です。 パースペクティブを使用していない場合、`w` は常に 1 です。 その場合、(1, 0, 3) にあるオブジェクトの完全な座標は (1, 0, 3, 1) になります。

ただし、3D 空間のオブジェクトを表現するには、場所だけでは不十分です。 なぜなら、空間内のオブジェクトの状態は、その位置だけでなく、その回転（rotation）または向き（facing direction）としても知られる**方向**（orientation）に関するものだからです。 方向は 3D ベクトルを使用して表すことができ、これは通常、長さが 1.0 になるように正規化されています。 例えば、オブジェクトが (3, 1, -2) にあるオブジェクトに向いている場合、つまり、原点から 3 メートル右、1 メートル上、2 メートル向こうに離れているオブジェクトに向いている場合、結果は次のようになります。

[

3

1

-
2

]

\left [ \begin{matrix} 3 \ 1 \ -2 \end{matrix} \right ]

これは次のように配列として表すこともできます。

```js
let directionVector = [3, 1, -2];
```

座標と向きのベクトルの両方を含む操作を実行するために、ベクトルには `w` 成分を含める必要があります。 ベクトルの `w` の値は常に 0 であるため、前述のベクトルは `[3, 1, -2, 0]` または次のように表すこともできます。

[

3

1

-
2

0

]

\left [ \begin{matrix} 3 \ 1 \ -2 \ 0 \end{matrix} \right ]

WebXR は、ベクトルを 1 メートルの長さに自動的に正規化します。 ただし、正規化を繰り返し実行する必要はないため、計算のパフォーマンスを向上させるなど、さまざまな理由で自分で行う方が理にかなっている場合があります。

カメラにさせたい動きの組み合わせを表す行列を決定したら、カメラは動かせないため、それを逆にする必要があります。 実際にはカメラ以外のすべてのものを移動しているので、変換行列の逆行列を取って、逆変換行列を取得します。 次に、この逆行列を世界のオブジェクトに適用して、オブジェクトの位置と方向を変更し、希望するカメラ位置をシミュレートできます。

これが、WebXR が変換を表すために使用する `XRRigidTransform` オブジェクトに、`inverse` プロパティが含まれている理由です。 `inverse` プロパティは、親変換の逆行列である別の `XRRigidTransform` オブジェクトです。 ビューを表す `XRView` (en-US) には、カメラビューを提供する `XRRigidTransform` である `transform` (en-US) プロパティがあるため、次のように、モデルビュー行列（世界を移動して目的のカメラ位置をシミュレートするために必要な変換行列）を取得できます。

```js
let viewMatrix = view.transform.inverse.matrix;
```

使用しているライブラリが `XRRigidTransform` オブジェクトを直接受け入れる場合は、ビュー行列を表す配列だけを取り出すのではなく、代わりに `view.transform.inverse` を取得できます。

### 複数の変換の合成

カメラが同時にズームやパンなどの複数の変換を実行する必要がある場合は、変換行列を乗算して、両方の変更を一度に適用する単一の行列に合成できます。 これを実行する明確で読みやすい関数については、ウェブの行列計算の記事の2 つの行列の乗算を参照してください。 あるいは、glMatrix などのお好みの行列計算ライブラリを使用して処理してください。

乗算が可換である（つまり、左から右に乗算しても右から左に乗算しても同じ答えが得られる）典型的な算術とは異なり、行列の乗算は*可換ではない*ことに注意してください！ これは、各変換がオブジェクトの位置と、場合によっては座標系自体に影響を与え、実行される次の操作の結果を劇的に変える可能性があるためです。 そのため、複合変換を作成するとき（または変換を順番に直接適用するとき）は、変換を適用する順序に注意する必要があります。

### 変換の適用

変換を適用するには、点またはベクトルに変換または変換の合成を掛けます。

これは、物理的な場所、方向または向き、およびパースペクティブの観点から見た位置の概念の概要です。 このテーマの詳細については、幾何学と参照空間、WebGL のモデル、ビュー、投影、およびウェブの行列計算の記事を参照してください。

古典的な映画撮影のシミュレーション
-----------------

映画撮影は、カメラの動きを設計、計画、そして実行することで、アニメーションまたはフィルムのシーンに望ましい外観と感情を生み出す芸術です。 主にカメラの動きについて理解するのに役立つ用語がいくつかありますが、これらの用語を、仮想カメラを使って設計された視点の変更を説明するために使用します。 これらの動きを同時に複数実行することも完全に可能です。 例えば、シーンをズームインしながらカメラをパンできます。

カメラの動きの大部分は、カメラの参照空間を基準にして記述されていることに注意してください。

行列を格納するための形式は、通常、列優先でフラット化された配列です。 つまり、行列の値は、左上隅から下に向かって書き込まれ、次に右に 1 行移動して、すべての値が配列になるまで繰り返されます。

したがって、次のような行列になります。

[

a
1

a
5

a
9

a
13

a
2

a
6

a
10

a
14

a
3

a
7

a
11

a
15

a
4

a
8

a
12

a
16

]

\left [ \begin{matrix} a\_{1} & a\_{5} & a\_{9} & a\_{13} \ a\_{2} & a\_{6} & a\_{10} & a\_{14} \ a\_{3} & a\_{7} & a\_{11} & a\_{15} \ a\_{4} & a\_{8} & a\_{12} & a\_{16} \end{matrix} \right ]

これは、次のように配列形式で表されます。

```js
let matrixArray = [
  a1,
  a2,
  a3,
  a4,
  a5,
  a6,
  a7,
  a8,
  a9,
  a10,
  a11,
  a12,
  a13,
  a14,
  a15,
  a16,
];
```

この配列では、左端の列にエントリ a1、a2、a3、a4 が含まれています。 一番上の行には、エントリ a1、a5、a9、a13 が含まれています。

ほとんどの WebGL および WebXR のプログラミングは、サードパーティライブラリを使用して行われることを覚えておいてください。 サードパーティライブラリは、コアとなる行列やその他の操作だけでなく、多くの場合、これらの標準的な映画撮影手法のシミュレーションをより簡単にするルーチンを追加することにより、WebGL の基本機能を拡張します。 WebGL を直接使用するのではなく、その 1 つを使用することを強くお勧めします。 このガイドでは WebGL を直接使用しています。 これは、その裏で何が行われているのかをある程度理解し、ライブラリの開発を支援したり、コードを最適化するのに役立つためです。

**メモ:** 「カメラを動かす」などのフレーズを使用していますが、実際に行っているのは、カメラの周りの世界全体を動かすことです。 これは、特定の値が機能する方法に影響を与えます。 これらの値については、後で説明します。

### ズーム

最もよく知られているカメラ効果には、ズーム（zoom）があります。 ズームは、レンズの焦点距離を変更することにより、物理的なカメラで実行されます。 これは、レンズ自体の中心とカメラの光センサーの間の距離です。 したがって、ズームは実際にはカメラを動かすことをまったく含みません。 代わりに、ズームショットは、時間の経過とともにカメラの倍率を変化させて、実際にカメラを物理的に動かさなくても、焦点領域がビューアーに近づいたり遠ざかったりするように見せます。 ゆっくりとした動きはシーンに動き、気軽さ、または集中の感覚をもたらすことができ、急速なズームは不安、驚き、または緊張の感覚を生み出すことができます。

ズームはカメラの位置を動かさないので、結果として生じる効果は不自然です。 人間の目にはズームレンズがありません。 物を遠ざけたり、近づけたりして、物を小さくしたり大きくしたりします。 映画撮影では、それはドリーショットと呼ばれます。

3D グラフィックスにも 2 つの手法があり、同一ではありませんが類似した結果を作成でき、その方法はさまざまな状況でより簡単に適用できます。

#### 視野調整によるズーム

カメラの**視野**（field of view、**FOV**）を変更することで、真の「ズーム」に似たことができます。 視野とは、一度に見る必要のある、カメラを囲む可視領域全体の円弧の長さを定義する角度です。 これは実際のカメラの焦点距離の効果であり、真のカメラがないため、FOV を変更することは無難な代案です。

円の円周は 2π⋅r ラジアン（360°）であることを思い出してください。 そのため、これは理論上の最大 FOV です。 ただし、現実的には、人間の目はそこまで見えないだけでなく、モニターや VR ゴーグルなどの表示デバイスを使用すると、視野がさらに狭くなる傾向があります。 人間の目は通常、約 135°（約 2.356 ラジアン）の水平視野と約 180°（π または約 3.142 ラジアン）の垂直視野を持っています。

カメラの FOV を小さくすると、ビューポートに含まれる弧が減少し、ビューにレンダリングされるときにそのコンテンツが拡大します。 これと光学ズーム効果の間には違いがありますが、一般的には仕事を完了するのに十分近い結果です。

次の関数は、指定された視野角と指定されたニアクリッピングプレーンおよびファークリッピングプレーンの距離を統合する透視射影行列を返します。

```js
function createPerspectiveMatrix(viewport, fovDegrees, nearClip, farClip) {
  const fovRadians = fovDegrees \* (Math.PI / 180.0);
  const aspectRatio = viewport.width / viewport.height;

  const transform = mat4.create();
  mat4.perspective(transform, fovRadians, aspectRatio, nearClip, farClip);
  return transform;
}
```

FOV 角度 `fovDegrees` を度数からラジアンに変換し、`viewport` パラメーターで指定された `XRViewport` (en-US) のアスペクト比を計算した後、この関数は glMatrix ライブラリーの `mat4.perspective()` 関数を使用して、透視行列を計算します。

透視行列は、視野（厳密に言えば、これは*垂直方向*の視野です）、アスペクト比、およびニアクリッピングプレーンおよびファークリッピングプレーンを 4x4 行列の `transform` でカプセル化し、呼び出し元に返します。

ニアクリッピングプレーンは、ディスプレイ面に平行なプレーン（平面）からの距離をメートル単位で表したもので、それよりも近くにあるものは何も描画されません。 そのプレーンのカメラ側に横たわる頂点は描画されません。 逆に、ファークリッピングプレーンは、その先には頂点が描画されないプレーンまでのメートル単位の距離です。

拡大縮小係数（scaling factor）またはパーセントを使用してズームするには、1 倍（通常のサイズの 100%）を許可する FOV の最大値にマップし（これにより、ほとんどのコンテンツが表示されます）、最大倍率をサポートしたい FOV の最大値にマップし、その間の対応する値をマップします。

透視行列を計算することによって各フレームのレンダリングパスを開始する場合、フレームの目的のジオメトリーを生成するために適用する必要がある他のすべての変換をその行列にまとめることができます。 例えば、次のようにです。

```js
const transform = createPerspectiveMatrix(viewport, 130, 1, 100);
const translateVec = vec3.fromValues(
  -trackDistance,
  -craneDistance,
  pushDistance,
);
mat4.translate(transform, transform, translateVec);
```

これは、130° の垂直視野を表す透視行列から始まり、次に、トラック、クレーン、およびプッシュの動きを含むやり方でカメラを動かす平行移動を適用します。

#### 拡大縮小変換

真の「ズーム」とは異なり、**拡大縮小**（scaling）では、位置または頂点の `x`、`y`、`z` 座標値のそれぞれに、その軸の拡大縮小係数を掛けます。 これらは各軸で同一である場合と、必ずしも同一ではない場合もありますが、ズーム効果に最も近い結果は、それぞれに同じ値を使用する必要があります。 これは、シーン内のすべての頂点に（理想的には頂点シェーダーで）適用する必要があります。

2 倍に拡大する場合は、各成分に 2.0 を掛ける必要があります。 同じ量だけ縮小するには、-2.0 を掛けます。 行列の用語では、これは次のように拡大縮小係数された変換行列を使用して実行されます。

```js
let scaleTransform = [Sx, 0, 0, 0, 0, Sy, 0, 0, 0, 0, Sz, 0, 0, 0, 0, 1];
```

この行列は、`(Sx, Sy, Sz)` で示される係数で拡大または縮小する変換を表します。 `Sx` は X 軸に沿った拡大縮小係数、`Sy` は Y 軸に沿った拡大縮小係数、`Sz` は Z 軸の係数です。 これらの値のいずれかが他の値と異なる場合、結果は一部の次元で他と比較して異なる伸縮になります。

すべての方向に同じ拡大縮小係数を適用する場合は、単純な関数を作成して拡大縮小変換行列を生成できます。

```js
function createScalingMatrix(f) {
  return [f, 0, 0, 0, 0, f, 0, 0, 0, 0, f, 0, 0, 0, 0, 1];
}
```

変換行列を取得したら、変換 `scaleTransform` をベクトル（または頂点）`myVector` に適用するだけです。

```js
let myVector = [2, 1, -3];
let scaleTransform = [2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1];
vec4.transformMat4(myVector, myVector, scaleTransform);
```

または、上記の `createScalingMatrix()` 関数を使用して、同じ係数ですべての軸に沿った拡大縮小を使用します。

```js
let myVector = [2, 1, -3];
vec4.transformMat4(myVector, myVector, createScalingMatrix(2.0));
```

### パン（左または右へのヨー）

**パン**（pan）または**ヨー**（yaw）とは、カメラの左から右への回転または右から左への回転であり、それ以外はベースに固定されています。 空間内でのカメラの位置は変化せず、見ている方向のみが変化します。 そして、その方向は水平方向以外に変わりません。 パンは、広大な空間内や広大なオブジェクト上で設定を確立したり、範囲の感覚を提供したりするのに最適です。 あるいは、没入型または VR のシナリオでプレイヤーが頭を回すのをシミュレートするように、左右を見るだけです。

![左右にパンするカメラを示す図](/ja/docs/Web/API/WebXR_Device_API/Cameras/camera-pan.png)

これを行うには、Y 軸を中心に回転して、カメラの左右の回転をシミュレートする必要があります。 これまでに使用した glMatrix ライブラリーを使用すると、これは、標準の 4x4 行列を表す `mat4` クラスの `rotateY()` メソッドを使用して実行できます。 行列 `viewMatrix` で定義された視点 を `panAngle` ラジアンで回転するには、次のようにします。

```js
mat4.rotateY(viewMatrix, viewMatrix, panAngle);
```

`panAngle` が正の場合、この変換はカメラを右にパンします。 `panAngle` の負の値は左にパンします。

### ティルト（上または下へのピッチ）

カメラを**ティルト**（tilt）または**ピッチ**（pitch）すると、カメラの水平部分をまったく変更せずに、カメラの垂直方向の向きを変更しながら、同じ座標で空間に固定したままにします。 単に上下を指す方向を調整するだけです。 ティルトは、森や山などの背の高いオブジェクトやシーンの範囲をキャプチャするのに適していますが、重要なキャラクターやロケールを紹介したり、畏敬の念を起こさせたりする一般的な方法でもあります。 もちろん、プレイヤーが上下を見るサポートを実装するのにも役立ちます。

![上下にティルトするカメラを示す図](/ja/docs/Web/API/WebXR_Device_API/Cameras/camera-tilt.png)

したがって、カメラをティルトすることは、X 軸を中心にカメラを回転させることで実現できます。 これは、glMatrix の `mat4` クラスの `rotateX()` メソッドなど、行列計算ライブラリーの適切なメソッドを使用して実行できます。

```js
mat4.rotateX(viewMatrix, viewMatrix, angle);
```

`angle` の正の値はカメラを下に傾け、`angle` の負の値は上に傾けます。

### ドリー（前または後ろへの移動）

**ドリー**（dolly）ショットは、カメラ全体が前後に移動するショットです。 古典的な映画制作では、これは通常、カメラをトラック（track）上または移動中の車両に取り付けて行われます。 結果のモーションは、特にショットの焦点である人物またはオブジェクトと一緒に移動する場合に、印象的で滑らかな効果を作成できます。

![ドリーショットのカメラの動きを示す図](/ja/docs/Web/API/WebXR_Device_API/Cameras/camera-dolly.png)

ドリーショットとズームはほぼ同じように見えるはずですが、実際はそうではありません。 ズームがカメラの焦点距離を変更するという事実は、ターゲットがフレーム内で大きくなったり小さくなったりしても、ターゲットとその周囲との間の空間関係が変化しないことを意味します。 一方、ドリーショットは、実際にカメラを動かすことで、物理的な動きの感覚を再現し、シーン内のオブジェクトの関係を、ショットのターゲットに近づいたり遠ざかったりしながらオブジェクトを通り過ぎていく中で、期待通りにシフトさせます。

ドリー操作を実行するには、カメラビューを Z 軸に沿って前後に平行移動します。

```js
mat4.translate(viewMatrix, viewMatrix, [0, 0, dollyDistance]);
```

ここで、`[0, 0, dollyDistance]` はベクトルで、`dollyDistance` はカメラをドリーする距離です。 これはカメラの周りの世界全体を動かすことで機能するため、ここで実際に起こるのは、カメラに対して相対的に `dollyDistance` メートルだけ世界全体が Z 軸に沿って動くということです。 `dollyDistance` が正の場合、世界はその量だけユーザーに向かって移動し、カメラがシーンに近づきます。 反対に、`dollyDistance` の負の値は、ユーザーから世界を遠ざけ、カメラがターゲットから後方に動いて見えるようにします。

### トラック（左または右への移動）

物理的なカメラを使用した**トラック**（truck）は、ドリーと同じ種類の索具装置を使用しますが、カメラを前後に移動するのではなく、左から右またはその逆に移動します。 カメラはまったく回転しないため、ショットの焦点が画面からゆっくりと外に出ます。 これは、シーンで感情を確立しようとするときに、集中、時間の経過、または熟考を暗示することができます。 また、カメラがキャラクターと一緒にすべるように動き、シーンを歩いていく、「歩きながら話す」シーンでも頻繁に使用されます。

![カメラが左右にトラックする様子を示す図](/ja/docs/Web/API/WebXR_Device_API/Cameras/camera-truck.png)

カメラを左右に移動するには、目的のカメラの動きとは反対の方向に、X 軸に沿ってビュー行列を移動します。

```js
mat4.translate(viewMatrix, viewMatrix, [-truckDistance, 0, 0]);
```

ベクトル `[-truckDistance, 0, 0]` に注意してください。 これは、トラックの操作がカメラではなく世界を動かすことによって機能するという事実を補います。 全世界を `truckDistance` によって示される方向とは反対の方向に移動することにより、カメラを予想される方向に移動する効果が得られます。 このように、`truckDistance` の正の値は、カメラを右に移動し（世界を左に移動することにより）、`truckDistance` の負の値は、カメラを左に移動します（世界を右に移動することにより）。

### ペデスタル（上または下への移動）

**ペデスタル**（pedestal、台座）ショットは、カメラを床に対して水平に固定したまま、まっすぐ上下に動かしたものです。 背が高くなったり低くなったりする台座（またはポール）の上のカメラで撮影します。 これは、背が高くなったり低くなったり、椅子から立ち上がったり座ったりしている、あるいは単にまっすぐ上下に動いている被写体を追跡するときに役立ちます。

![ペデスタルモーションを使用してカメラが上下に移動する様子を示す図](/ja/docs/Web/API/WebXR_Device_API/Cameras/camera-pedestal.png)

これは、クレーンに取り付けられたカメラを上下に動かす**クレーン**（crane）ショットに似ています。 ペデスタルまたはクレーンのモーションを実行するには、ビューを Y 軸に沿って、カメラを移動する方向とは反対の方向に移動します。

```js
mat4.translate(viewMatrix, viewMatrix, [0, -pedestalDistance, 0]);
```

`pedestalDistance` の値を反転することで、実際にはカメラではなく世界を動かしているという事実を補正します。 したがって、`pedestalDistance` の正の値はカメラを上に移動し、負の値は下に移動します。

### カント（左右へのロール）

**カント**（cant）または**ロール**（roll）は、ロール軸を中心としたカメラの回転です。 つまり、カメラは空間に固定されたままで、同じ位置に向けられたままですが、カメラの上部が別の方向に向けられるように回転します。

![左右にロールするカメラを示す図](/ja/docs/Web/API/WebXR_Device_API/Cameras/camera-roll.png)

これは、手のひらを下にして、手を開いた状態で腕を前に出すことで視覚化できます。 自分の手がカメラで、手の甲がカメラの上部を表しているとします。 「カメラ」が上下逆になるように手を回転させます。 これが、ロール軸の周りに手をカントしたところです。 映画撮影では、カントを使用して、波や乱気流などのさまざまなタイプの非定常モーションをシミュレートできますが、劇的な効果を得るためにも使用できます。

glMatrix を使用して Z 軸を中心にこの回転を実行するには、次のようにします。

```js
mat4.rotateZ(viewMatrix, viewMatrix, cantAngle);
```

動きを組み合わせる
---------

パンしながらズームしたり、同時にティルトしたりカントしたりするなど、複数の動作を同時に実行できます。

### 複数の軸に沿った平行移動

複数の軸に沿った平行移動は非常に簡単です。 以前は、次のような平行移動を行っていました。

```js
mat4.translate(viewMatrix, viewMatrix, [-truckDistance, 0, 0]);
mat4.translate(viewMatrix, viewMatrix, [0, -pedestalDistance, 0]);
mat4.translate(viewMatrix, viewMatrix, [0, 0, dollyDistance]);
```

ここでの解決策は明白です。 平行移動は、各軸に沿って移動する距離を提供するベクトルとして表現されるため、次のようにそれらを組み合わせることができます。

```js
mat4.translate(viewMatrix, viewMatrix, [
  -truckDistance,
  -pedestalDistance,
  dollyDistance,
]);
```

これにより、行列 `viewMatrix` の原点が各軸に沿って指定された量だけシフトします。

### 複数の軸を中心に回転

複数の軸の周りの回転を、回転の共有軸を表すクォータニオンの周りの単一の回転に結合することもできます。 回転を個別に実行するには、オイラー角（Euler angles、各軸の周りの別々の角度）を使用して、次のようにピッチ、ヨー、ロールを適用します。

```js
mat4.rotateX(viewMatrix, viewMatrix, pitchAngle);
mat4.rotateY(viewMatrix, viewMatrix, yawAngle);
mat4.rotateZ(viewMatrix, viewMatrix, rollAngle);
```

代わりに、次のようにオイラー角から回転軸を組み合わせたクォータニオンを作成し、乗算を使用して行列を回転させることができます。

```js
const axisQuat = quat.create();
const rotateMatrix = mat4.create();
quat.fromEuler(axisQuat, pitchAngle, yawAngle, rollAngle);
mat4.fromQuat(rotateMatrix, axisQuat);
mat4.multiply(viewMatrix, viewMatrix, rotateMatrix);
```

これにより、ピッチ、ヨー、ロールのオイラー角が 3 つの回転すべてを表すクォータニオンに変換されます。 次に、これは回転変換行列に変換されます。 そして最後に、ビュー行列に回転変換を掛けて、回転を完了します。

WebXR で 3D を表現
--------------

WebXR は 3D グラフィックスをさらに一歩進め、ゴーグルやヘッドセットなどの特別なビジュアルハードウェアを使用して 3D グラフィックスを提示し、実際に 3 次元で存在するように見える 3D グラフィックスを作成できるようにします。 これは、現実世界のコンテキスト内にある可能性があります（拡張現実の場合）。

奥行きを知覚するには、シーンに 2 つのパースペクティブが必要です。 2 つのビューを比較することにより、オブジェクトの奥行き、ひいてはビューアーと見ているオブジェクトの間の距離を認識することができます。 これが、わずかに間隔を空けて 2 つの目がある理由です。 一度に片方の目を閉じ、2 つの目を交互に切り替えると、この事実を思い出すことができます。 左目は鼻の左側を見ることができますが、右側は見えませんし、右目は鼻の右側を見ることができますが、左側は見えません。 これは、それぞれの目に見える違いの 1 つにすぎません。

私たちの脳は、視野全体の光レベルと波長に関する 2 つのデータをそれぞれの目から受け取ります。 脳はこのデータを使用して、2 つのパースペクティブ間のわずかな違いを使用して奥行きと距離を把握し、心の中でシーンを構築します。

### シーンのレンダリング

XR（仮想現実（VR）と拡張現実（AR）の両方を含む省略表現）のヘッドセットは、2 つの目で得られるビューと同じように、シーンの 2 つのビューを互いに少しずらして描画することで、3D 画像を提示します。 これらのビューは、それぞれの目に別々に送られ、脳が心の中で 3D 画像を構築するために必要とするデータを収集できるようにします。

これを行うために、WebXR はレンダラーに、動画の各フレームに対して 2 回（各目に 1 回）シーンを描画するように要求します。 2 つのビューは、同じフレームバッファーにレンダリングされます。 ビューの 1 つは左側にあり、もう 1 つは右側にあります。 XR デバイスは、画面とレンズを使用して、生成された画像の左半分を左目に提示し、右半分を右目に提示します。

例えば、2560x1440 ピクセルのフレームバッファーを使用するデバイスを考えてみます。 これを 2 つの部分に分割すると（各目に対して半分）、各目のビューが 1280x1440 ピクセルの解像度で描画されます。 概念的には次のようになります。

![フレームバッファーが2つの目の視点間でどのように分割されるかを示す図](/ja/docs/Web/API/WebXR_Device_API/Cameras/twoviewsoneframebuffer.svg)

コードは、`XRSession` (en-US) のメソッド `requestAnimationFrame()` (en-US) を呼び出して次のアニメーションフレームを提供することを WebXR エンジンに通知し、アニメーションのフレームをレンダリングするコールバック関数を提供します。 ブラウザーがシーンをレンダリングする必要がある場合、ブラウザーはコールバックを呼び出し、入力パラメーターとして現在の時刻と正しいフレームをレンダリングするために必要なデータをカプセル化した `XRFrame` (en-US) を提供します。

この情報には、シーン内のビューアーの位置と向きを説明する `XRViewerPose` (en-US) と、それぞれがシーンの 1 つのパースペクティブを表す `XRView` (en-US) オブジェクトのリストが含まれます。 現在の WebXR 実装では、このリストには 3 つ以上のエントリはありません。 1 つは左目の位置と視野角を示し、もう 1 つは右目に対して同じことを行います。 与えられた `XRView` がどの目を表すかは、その `eye` (en-US) プロパティの値（`left` または `right` の文字列）を確認することでわかります（3 番目の可能な値 `none` は、理論的には別の視点を表すために使用できますが、これは現在の API では完全には利用できません）。

### フレームコールバックの例

フレームをレンダリングするためのかなり基本的な（ただし典型的な）コールバックは次のようになります。

```js
function myAnimationFrameCallback(time, frame) {
  let adjustedRefSpace = applyPositionOffsets(xrReferenceSpace);
  let pose = frame.getViewerPose(adjustedRefSpace);

  animationFrameRequestID = frame.session.requestAnimationFrame(
    myAnimationFrameCallback,
  );

  if (pose) {
    let glLayer = frame.session.renderState.baseLayer;
    gl.bindFramebuffer(gl.FRAMEBUFFER, glLayer.framebuffer);
    CheckGLError("Binding the framebuffer");

    gl.clearColor(0, 0, 0, 1.0);
    gl.clearDepth(1.0);
    gl.clear(gl.COLOR\_BUFFER\_BIT | gl.DEPTH\_BUFFER\_BIT);
    CheckGLError("Clearing the framebuffer");

    const deltaTime = (time - lastFrameTime) \* 0.001;
    lastFrameTime = time;

    for (let view of pose.views) {
      let viewport = glLayer.getViewport(view);
      gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
      CheckGLError(`Setting viewport for eye: ${view.eye}`);

      myRenderScene(gl, view, sceneData, deltaTime);
    }
  }
}
```

コールバックは、カスタム関数 `applyPositionOffsets()` を呼び出すことから始まります。 この関数は、参照空間を取り、キーボードやマウスのような WebXR によって制御されていないデバイスからのユーザー入力などを考慮するために必要な変更を変換行列に適用します。 この関数によって返された調整済みの `XRReferenceSpace` は、`XRFrame` (en-US) のメソッド `getViewerPose()` (en-US) に渡されて、ビューアーの位置と視野角を表す `XRViewerPose` (en-US) を取得します。

次に、動画の次のフレームをレンダリングするためのリクエストをキューに入れます。 そのためには `requestAnimationFrame()` を再度呼び出すだけで、後でそれを行うことを心配する必要はありません。

次に、シーンをレンダリングします。 ポーズの取得に成功した場合、セッションの `renderState` (en-US) オブジェクトの `baseLayer` (en-US) プロパティから、レンダリングに使用する必要がある `XRWebGLLayer` (en-US) を取得します。 これを `WebGLRenderingContext` のメソッド `gl.bindFrameBuffer()` (en-US) を使用して WebGL の `gl.FRAMEBUFFER` ターゲットにバインドします。

次に、レンダーラーがすべてのピクセルに触れるわけではないため、フレームバッファーをクリアして、既知の状態から開始するようにします。 `gl.clearColor()` を使用してクリアカラーを不透明な黒に設定し、`WebGLRenderingContext` のメソッド `gl.clearDepth()` を呼び出して奥行きバッファーを 1.0 にクリアする値を設定します。 次に、`WebGLRenderingContext` のメソッド `gl.clear()` を呼び出します。 これにより、フレームバッファー（マスクパラメーターに `gl.COLOR_BUFFER_BIT` が含まれるため）と奥行きバッファー（`gl.DEPTH_BUFFER_BIT` が含まれるため）がクリアされます。

次に、フレームの希望するレンダリング時刻と最後のフレームが描画された時刻を比較して、前のフレームがレンダリングされてからの経過時間を判断します。 この値はマイクロ秒単位なので、0.001 を掛けて（または 1000 で割り算して）秒に変換します。

次に、`XRViewerPose` (en-US) 配列の `views` (en-US) で見つかったポーズのビューをループします。 ビューごとに、使用する適切なビューポートを `XRWebGLLayer` (en-US) に要求し、位置と大きさの情報を `gl.viewport()` (en-US) に渡して、一致するように WebGL ビューポートを構成します。 これによりレンダリングが制限され、`view.eye` (en-US) で識別される目で見た画像を表すフレームバッファーの部分にのみ描画できるようになります。

制約が確立され、必要なすべての準備が整ったら、カスタム関数 `myRenderScene()` を呼び出して、実際に計算と WebGL レンダリングを実行してフレームをレンダリングします。 この場合、WebGL コンテキストの `gl`、`XRView` (en-US) の `view`、`sceneData` オブジェクト（頂点シェーダー、フラグメントシェーダー、頂点リスト、テクスチャなどを含む）、および `deltaTime` を渡しています。 `deltaTime` は、前のフレームからどれだけの時間が経過したかを示します。 これにより、アニメーションをどこまで進めるかがわかります。

この関数が戻ると、WebXR によって使用されている WebGL フレームバッファーには、シーンの 2 つのコピーがあり、それぞれがフレームの半分を占めています。 1 つは左目用、もう 1 つは右目用です。 これが、XR ソフトウェアとドライバーを介してヘッドセットに到達し、各半分が適切な目に表示されます。

関連情報
----

* 幾何学と参照空間
* WebGL のモデル、ビュー、投影
* ウェブの行列計算
* 移動、向き、モーション: WebXR の例


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

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

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

**`AmbientLightSensor()`** コンストラクターは、現在の光レベル、すなわちホストデバイス周辺の環境光の照度を返す新しい `AmbientLightSensor` オブジェクトを生成します。

構文
--

```js
new AmbientLightSensor()
new AmbientLightSensor(options)
```

### 引数

`options` 省略可

現在、1 個のオプションのみに対応しています。

`frequency`

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

### 例外

`SecurityError` `DOMException`

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

仕様書
---

| Specification |
| --- |
| Ambient Light Sensor # dom-ambientlightsensor-ambientlightsensor |

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

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

関連情報
----

* `reading` イベント


AmbientLightSensor: illuminance プロパティ - Web API

AmbientLightSensor: illuminance プロパティ
=====================================

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

`AmbientLightSensor` インターフェイスの **`illuminance`** プロパティは、ホストデバイス周辺の環境光のルクス単位のレベルを、現在の光レベルとして返します。

値
-

現在のルクス単位の光レベルを表す `Number` です。

例
-

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

仕様書
---

| Specification |
| --- |
| Ambient Light Sensor # ambient-light-sensor-reading-attribute |

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

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


TaskAttributionTiming: containerId プロパティ - Web API

TaskAttributionTiming: containerId プロパティ
========================================

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

**`containerId`** は `TaskAttributionTiming` インターフェイスの読み取り専用プロパティで、コンテナーの `id` 属性を返します。コンテナーは、全体として長いタスクに関係している iframe、embed、object などです。

値
-

文字列で、コンテナーの `id` 属性が入ります。

仕様書
---

| Specification |
| --- |
| Long Tasks API # dom-taskattributiontiming-containerid |

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

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


TaskAttributionTiming: containerName プロパティ - Web API

TaskAttributionTiming: containerName プロパティ
==========================================

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

**`containerName`** は `TaskAttributionTiming` インターフェイスの読み取り専用プロパティで、コンテナーの `name` 属性を返します。コンテナーは、全体として長いタスクに関係している iframe、embed、object などです。

値
-

文字列で、コンテナーの HTML における `name` 属性（`<iframe name="myIframe"` や `<object name="myObject"` など）が入ります。

仕様書
---

| Specification |
| --- |
| Long Tasks API # dom-taskattributiontiming-containername |

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

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


TaskAttributionTiming: containerType プロパティ - Web API

TaskAttributionTiming: containerType プロパティ
==========================================

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

**`containerType`** は `TaskAttributionTiming` インターフェイスの読み取り専用プロパティで、フレームコンテナーの修理（`iframe`、`embed`、`object` のいずれか）を返します。

値
-

文字列で、コンテナーの種類（`iframe`、`embed`、`object` のいずれか）が入ります。種類が特定できなかった場合は、 `window` が返されます。

仕様書
---

| Specification |
| --- |
| Long Tasks API # dom-taskattributiontiming-containertype |

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

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


TaskAttributionTiming: containerSrc プロパティ - Web API

TaskAttributionTiming: containerSrc プロパティ
=========================================

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

**`containerSrc`** は `TaskAttributionTiming` インターフェイスの読み取り専用プロパティで、コンテナーの `src` 属性を返します。コンテナーは、全体として長いタスクに関係している iframe、embed、object などです。

値
-

文字列で、コンテナーの `src` 属性（`<iframe src="url.html"` など）が入ります。

仕様書
---

| Specification |
| --- |
| Long Tasks API # dom-taskattributiontiming-containersrc |

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

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


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

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

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

**`toJSON()`** は `TaskAttributionTiming` インターフェイスのメソッドで、シリアライザーです。これは `TaskAttributionTiming` オブジェクトの JSON 表現を返します。

構文
--

```js
toJSON()
```

### 引数

なし。

### 返値

`JSON` オブジェクトで、 `TaskAttributionTiming` オブジェクトをシリアライズしたものです。

例
-

### toJSON メソッドの使用

この例では、 `entry.toJSON()` を呼び出すと、`TaskAttributionTiming` オブジェクトの JSON 表現が返されます。

```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry.toJSON());
  });
});

observer.observe({ type: "taskattribution", buffered: true });
```

次のような JSON オブジェクトをログ出力します。

```json
{
  "name": "unknown",
  "entryType": "taskattribution",
  "startTime": 0,
  "duration": 0,
  "containerType": "window",
  "containerSrc": "",
  "containerId": "",
  "containerName": ""
}
```

JSON 文字列を取得するのであれば、直接 `JSON.stringify(entry)` を使用することができます。これは自動的に `toJSON()` を呼び出します。

仕様書
---

| Specification |
| --- |
| Long Tasks API # dom-taskattributiontiming-tojson |

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

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

関連情報
----

* `JSON`


NDEFMessage.records - Web API

NDEFMessage.records
===================

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

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

`records` は `NDEFMessage` インターフェイスのプロパティで、 NDEF メッセージに現れる `NDEFRecord` のリストを表します。

値
-

`NDEFRecord` オブジェクトのリストで、メッセージに記録されたデータを表します。

例
-

次の例は、 NDEF メッセージの内容を読み取る方法を示しています。最初に `onreading` のイベントハンドラーをセットアップし、ここに `NDEFReadingEvent` のインスタンスが渡されます。 `NDEFMessage` オブジェクトが `NDEFReadingEvent.message` から返されます。このオブジェクトは `message.records` をループして、メッセージの種類に基づいて各レコードを処理します。 data メンバーは `DataView` であり、 UTF-16 でエンコードされたデータを扱うことができます。

```js
ndefReaderInst.onreading = (event) => {
  const ndefMessage = event.message;
  for (const record of ndefMessage.records) {
    console.log("Record type: " + record.recordType);
    console.log("MIME type: " + record.mediaType);
    console.log("Record id: " + record.id);
    switch (record.recordType) {
      case "text":
        // TODO: Read text record with record data, lang, and encoding.
        break;
      case "url":
        // TODO: Read URL record with record data.
        break;
      default:
      // TODO: Handle other records with record data.
    }
  }
};
```

仕様書
---

| Specification |
| --- |
| Web NFC API # dom-ndefmessage-records |

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

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


NDEFMessage.NDEFMessage() - Web API

NDEFMessage.NDEFMessage()
=========================

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

**`NDEFMessage()`** コンストラクターは新しい `NDEFMessage` オブジェクトを生成し、指定された NDEF レコードで初期化します。

構文
--

```js
new NDEFMessage(records);
```

### 引数

`records`

以下のメンバーを持つオブジェクトの配列です。

`data` 省略可

転送されるデータが入ります。文字列、`BufferSource`、ネストされたレコードの配列のいずれかです。

`encoding` 省略可

文字列で、レコードのエンコーディングを指定します。

`id` 省略可

レコードの開発者が定義する識別子です。

`lang` 省略可

RFC 5646: Tags for Identifying Languages （BCP 47 とも呼ばれる）による有効な言語タグです。

`mediaType` 省略可

有効な MIME タイプです。

`recordType`

`data` に格納されているデータの種類を示す文字列です。以下の値のいずれかでなければなりません。

`"absolute-url"`

データの絶対 URL です。

`"empty"`

空の `NDEFRecord` です。

`"mime"`

有効な MIME タイプです。

`"smart-poster"`

NDEF-SMARTPOSTER 仕様書で定義されているようなスマートポスターです。

`"text"`

NDEF-TEXT 仕様書で定義されているようなテキストです。

`"unknown"`

レコードの種類が不明です。

`"URL"`

NDEF-URI 仕様書で定義されているような URL です。

仕様書
---

| Specification |
| --- |
| Web NFC API # dom-ndefmessage-constructor |

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

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


FileSystemDirectoryHandle.getDirectoryHandle() - Web API

FileSystemDirectoryHandle.getDirectoryHandle()
==============================================

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

`FileSystemDirectoryHandle` インターフェイスの **`getDirectoryHandle()`** メソッドは、このメソッドが呼ばれたディレクトリーハンドル内の指定した名前のサブディレクトリーを表す `FileSystemDirectoryHandle` を返します。

構文
--

```js
getDirectoryHandle(name)
getDirectoryHandle(name, options)
```

### 引数

`name`

取得したいサブディレクトリーの `FileSystemHandle.name` を表す文字列です。

`options` 省略可

取得するサブディレクトリーに関するオプションを持つオブジェクトで、省略可能です。以下のオプションがあります。

`create`

`boolean` 値で、デフォルトは `false` です。`true` に設定すると、ディレクトリーが見つからない場合、指定した名前のディレクトリーが作成されて返されます。

### 返値

`FileSystemDirectoryHandle` で解決する `Promise` を返します。

### 例外

`NotAllowedError` `DOMException`

`PermissionStatus` が `'granted'` でないとき投げられます。

`TypeMismatchError` `DOMException`

返されるエントリーがファイルで、ディレクトリーではないとき投げられます。

`NotFoundError` `DOMException`

ディレクトリーが存在せず、`create` オプションが `false` に設定されているとき投げられます。

例
-

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

```js
const dirName = "directoryToGetName";

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

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemdirectoryhandle-getdirectoryhandle |

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

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

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files


FileSystemDirectoryHandle.removeEntry() - Web API

FileSystemDirectoryHandle.removeEntry()
=======================================

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

`FileSystemDirectoryHandle` インターフェイスの **`removeEntry()`** メソッドは、指定の名前のファイルまたはディレクトリーがディレクトリーハンドル内に存在する場合、エントリーを削除しようとします。

構文
--

```js
removeEntry(name)
removeEntry(name, options)
```

### 引数

`name`

削除したいエントリーの `FileSystemHandle.name` を表す文字列です。

`options` 省略可

オプションを持つオブジェクトで、省略可能です。以下のオプションがあります。

`recursive`

`boolean` 値で、デフォルトは `false` です。`true` に設定すると、エントリーが再帰的に削除されます。

### 返値

`undefined` で解決する `Promise` を返します。

### 例外

`TypeError`

名前が有効な文字列ではないか、ファイルシステムで許可されていない文字を含むとき投げられます。

`NotAllowedError` `DOMException`

`PermissionStatus` が `'granted'` でないとき投げられます。

`InvalidModificationError` `DOMException`

`recursive` が `false` に設定されており、削除するエントリーが子を持つとき投げられます。

`NotFoundError` `DOMException`

エントリー名が見つからないか一致しないとき投げられます。

例
-

以下の例では、ディレクトリーハンドル内のエントリーを削除します。

```js
const entryName = "entryToRemove";

// ディレクトリーハンドル 'currentDirHandle' があると仮定
currentDirHandle.removeEntry(entryName).then(() => {
  // 削除に成功したとき実行するコード
});
```

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemdirectoryhandle-removeentry |

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

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

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files


FileSystemDirectoryHandle.keys() - Web API

FileSystemDirectoryHandle.keys()
================================

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

`FileSystemDirectoryHandle` インターフェイスの **`keys()`** メソッドは、`FileSystemDirectoryHandle` 内の各アイテムのキーを含む新しい *配列イテレーター* を返します。

構文
--

```js
FileSystemDirectoryHandle.keys()
```

### 引数

なし

### 返値

新しい `Array` を返します。

例
-

未稿

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemdirectoryhandle-asynciterable |

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

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

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files


FileSystemDirectoryHandle.resolve() - Web API

FileSystemDirectoryHandle.resolve()
===================================

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

`FileSystemDirectoryHandle` インターフェイスの **`resolve()`** メソッドは、親ハンドルから指定の子エントリーへのディレクトリー名の `Array` を返します。指定された子エントリーが配列の最後の要素になります。

構文
--

```js
resolve(possibleDescendant)
```

### 引数

`possibleDescendant`

相対パスを返す `FileSystemHandle` です。

### 返値

文字列の `Array`、または `possibleDescendant` がこの `FileSystemDirectoryHandle` の子孫でないときは `null` で解決する `Promise` を返します。

### 例外

例外は投げられません。

例
-

以下の非同期関数は、`resolve()` を用いて、選択されたファイルの指定のディレクトリーハンドルを基準とする相対パスを取得します。

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

  // ハンドルがディレクトリーハンドル内に存在するかを確認する
  const relativePaths = await directoryHandle.resolve(handle);

  if (relativePaths === null) {
    // ディレクトリーハンドル内に存在しない
  } else {
    // relativePath は相対パスを表す名前の配列
    for (const name of relativePaths) {
      // 各エントリーを記録する
      console.log(name);
    }
  }
}
```

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemdirectoryhandle-resolve |

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

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

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files


FileSystemDirectoryHandle.entries() - Web API

FileSystemDirectoryHandle.entries()
===================================

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

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

構文
--

```js
entries()
```

### 引数

なし

### 返値

`FileSystemDirectoryHandle` オブジェクト自身の列挙可能なプロパティの `[key, value]` ペアの配列を返します。

例
-

```js
const dirHandle = await window.showDirectoryPicker();

for await (const [key, value] of dirHandle.entries()) {
  console.log({ key, value });
}
```

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemdirectoryhandle-asynciterable |

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

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

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files


FileSystemDirectoryHandle.values() - Web API

FileSystemDirectoryHandle.values()
==================================

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

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

構文
--

```js
values()
```

### 引数

なし

### 返値

新しい `Array` を返します。

例
-

未稿

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemdirectoryhandle-asynciterable |

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

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

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files


FileSystemDirectoryHandle.getFileHandle() - Web API

FileSystemDirectoryHandle.getFileHandle()
=========================================

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

`FileSystemDirectoryHandle` インターフェイスの **`getFileHandle()`** メソッドは、メソッドが呼ばれたディレクトリー内の指定した名前のファイルを表す `FileSystemFileHandle` を返します。

構文
--

```js
getFileHandle(name)
getFileHandle(name, options)
```

### 引数

`name`

取得したいファイルの `FileSystemHandle.name` を表す文字列です。

`options` 省略可

以下のプロパティを持つオブジェクトです。

`create`

`Boolean` です。デフォルトは `false` です。
 `true` に設定すると、ファイルが見つからない場合、指定した名前のファイルが作成されて返されます。

### 返値

`FileSystemFileHandle` で解決する `Promise` を返します。

### 例外

`NotAllowedError` `DOMException`

`PermissionStatus` が `'granted'` でないとき投げられます。

`TypeError`

指定された名前が有効な文字列でないか、ネイティブのファイルシステムで支障が出る文字を含むとき投げられます。

`TypeMismatchError` `DOMException`

指定されたエントリーがディレクトリーであってファイルではないとき投げられます。

`NotFoundError` `DOMException`

ファイルが存在せず、`create` オプションが `false` に設定されているとき投げられます。

例
-

以下の例では、指定の名前のファイルハンドルを返します。ファイルが存在しない場合、作成されます。

```js
const fileName = "fileToGetName";

// ディレクトリーハンドル 'currentDirHandle' があると仮定
const fileHandle = currentDirHandle.getFileHandle(fileName, { create: true });
```

仕様書
---

| Specification |
| --- |
| File System Standard # api-filesystemdirectoryhandle-getfilehandle |

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

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

関連情報
----

* File System Access API
* The File System Access API: simplifying access to local files


SpeechRecognitionResult.isFinal - Web API

SpeechRecognitionResult.isFinal
===============================

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

`SpeechRecognitionResult` (en-US)インターフェイスの **`isFinal`** リードオンリーのプロパティは結果がファイナルかどうかの (`Boolean` 型) のことです。true の場合は、これは結果を返す最終の時間です。false の場合は、暫定の結果を返し、後々それは更新されます。

構文
--
```

var myIsFinal = speechRecognitionResultInstance.isFinal;
```

### 返り値

A `Boolean`.

例
-

```js
recognition.onresult = function (event) {
  // The SpeechRecognitionEvent results property returns a SpeechRecognitionResultList object
  // The SpeechRecognitionResultList object contains SpeechRecognitionResult objects.
  // It has a getter so it can be accessed like an array
  // The first [0] returns the SpeechRecognitionResult at position 0.
  // Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects that contain individual results.
  // These also have getters so they can be accessed like arrays.
  // The second [0] returns the SpeechRecognitionAlternative at position 0.
  // We then return the transcript property of the SpeechRecognitionAlternative object
  var color = event.results[0][0].transcript;
  diagnostic.textContent = "Result received: " + color + ".";
  bg.style.backgroundColor = color;

  console.log(event.results[0].isFinal);
};
```

仕様
--

| Specification |
| --- |
| Web Speech API # dom-speechrecognitionresult-isfinal |

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

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

### Firefox OS 権限

アプリで音声認識を利用する前に、下記の権限を manifest に追加する必要があります。

```json
"permissions": {
  "audio-capture" : {
    "description" : "Audio capture"
  },
  "speech-recognition" : {
    "description" : "Speech recognition"
  }
}
```

privileged アプリ権限も必要なので、下記も追加が必要です。

```json
  "type": "privileged"
```

関連情報
----

* Web Speech API


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

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

**`AnimationEvent()`** コンストラクターは、アニメーションに関するイベントを表す新しい `AnimationEvent` オブジェクトを返します。

構文
--

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

### 引数

`type`

`AnimationEvent` の型名を表す文字列です。
 大文字と小文字を区別し、ブラウザーでは `animationstart`, `animationend`, `animationiteration` のいずれかに設定されます。

`options` 省略可

オブジェクトで、*`Event()` で定義されているプロパティに加えて*、以下のプロパティがあります。

`animationName` 省略可

トランジションに関連付けられた `animation-name` の値を含む文字列です。遷移に関連付けられた CSS プロパティの値です。既定値は `""` です。

`elapsedTime` 省略可

`float` で、このイベントが発行されたときにアニメーションが動作していた時間（アニメーションが一時停止していた時間を除く）を秒単位で与えます。
 `animationstart` イベントの場合、 `elapsedTime` は `0.0` です。ただし、 `animation-delay` に負の値を指定した場合は除きます。
 この場合、イベントは `elapsedTime` に `(-1 * delay)` が含まれた状態で発行されます。既定で `0.0` となります。

`pseudoElement` 省略可

文字列で、アニメーションを動作させる擬似要素の名前を含む、 `"::"` で始まる名前です。もしアニメーションが擬似要素上で動作せず、要素そのもの上で動作するる場合は、空文字列 `""` を指定します。 既定では `""` となります。

仕様書
---

| Specification |
| --- |
| CSS Animations Level 1 # dom-animationevent-animationevent |

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

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

関連情報
----

* CSS アニメーションの使用
* アニメーション関連の CSS プロパティとアットルール: `animation`,
 `animation-delay`, `animation-direction`,
 `animation-duration`, `animation-fill-mode`,
 `animation-iteration-count`, `animation-name`,
 `animation-play-state`, `animation-timing-function`,
 `@keyframes`
* 所属先の `AnimationEvent` インターフェイス


AnimationEvent: animationName プロパティ - Web API

AnimationEvent: animationName プロパティ
===================================

**`AnimationEvent.animationName`** は読み取り専用プロパティで、トランジションに関連付けられた CSS の `animation-name` の値を含む文字列です。

値
-

CSS の `animation-name` プロパティの値が入った文字列です。

仕様書
---

| Specification |
| --- |
| CSS Animations Level 1 # dom-animationevent-animationname |

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

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

関連情報
----

* CSS アニメーションの使用
* アニメーション関連の CSS プロパティとアットルール: `animation`,
 `animation-delay`, `animation-direction`,
 `animation-duration`, `animation-fill-mode`,
 `animation-iteration-count`, `animation-name`,
 `animation-play-state`, `animation-timing-function`,
 `@keyframes`
* 所属先の `AnimationEvent` インターフェイス


AnimationEvent: pseudoElement プロパティ - Web API

AnimationEvent: pseudoElement プロパティ
===================================

**`AnimationEvent.pseudoElement`** は読み取り専用のプロパティです。`'::'` で始まる文字列で、このアニメーションが実行される擬似要素の名前を示します。
 このアニメーションが擬似要素ではなく、要素上で動作している場合は、空文字列 `''` になります。

値
-

`'::'` で始まる文字列で、このアニメーションが実行される擬似要素の名前を示します。

仕様書
---

| Specification |
| --- |
| CSS Animations Level 1 # dom-animationevent-pseudoelement |

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

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

関連情報
----

* CSS アニメーションの使用
* アニメーション関連の CSS プロパティとアットルール: `animation`,
 `animation-delay`, `animation-direction`,
 `animation-duration`, `animation-fill-mode`,
 `animation-iteration-count`, `animation-name`,
 `animation-play-state`, `animation-timing-function`,
 `@keyframes`
* 所属先の `AnimationEvent` インターフェイス


AnimationEvent: elapsedTime プロパティ - Web API

AnimationEvent: elapsedTime プロパティ
=================================

**`AnimationEvent.elapsedTime`** は読み取り専用のプロパティで、アニメーションが開始されてからの秒数を `float` 型で表します。このイベントが発生したとき、アニメーションが停止した場合を除いて常に設定されます。 `animationstart` イベントにおいては `elapsedTime` は `0.0` になりますが、 `animation-delay` が負の値の場合は、このイベントは `elapsedTime` が `(-1 * 待ち時間 )` であるときに発生します。

値
-

`float` 型で、時間の量を秒単位で指定します。

仕様書
---

| Specification |
| --- |
| CSS Animations Level 1 # dom-animationevent-elapsedtime |

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

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

関連情報
----

* CSS アニメーションの使用
* アニメーションに関する CSS プロパティとアットルール: `animation`, `animation-delay`, `animation-direction`, `animation-duration`, `animation-fill-mode`, `animation-iteration-count`, `animation-name`, `animation-play-state`, `animation-timing-function`, `@keyframes`.
* 所属先の `AnimationEvent` インターフェイス


VRDisplayCapabilities.canPresent - Web API

VRDisplayCapabilities.canPresent
================================

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

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

**`canPresent`** は `VRDisplayCapabilities` インターフェイスの読み取り専用プロパティで、VR ディスプレイが（HMD を通じて）コンテンツを表示可能かどうかの状態を論理値で返します。

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

これは、 6 自由度追跡が可能であるものの、 `VRDisplay.requestPresent()` が意味を持たない「マジックウィンドウ」機器を識別するのに有益な機能です。`canPresent` が `false` の場合、 `VRDisplay.requestPresent()` の呼び出しは失敗し、 `VRDisplay.getEyeParameters()` は `null` を返します。

値
-

論理値です。

例
-

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

仕様書
---

このプロパティは古い 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


VRDisplayCapabilities.hasPosition - Web API

VRDisplayCapabilities.hasPosition
=================================

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

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

**`hasPosition`** は `VRDisplayCapabilities` インターフェイスの読み取り専用プロパティで、その VR ディスプレイがトラッキング機能を備えていて位置情報を返すことができるれば `true` を返します。

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

値
-

論理値です。

例
-

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

仕様書
---

このプロパティは古い 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


VRDisplayCapabilities.maxLayers - Web API

VRDisplayCapabilities.maxLayers
===============================

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

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

**`maxLayers`** は `VRDisplayCapabilities` インターフェイスの読み取り専用プロパティで、その VR ディスプレイが同時に表示できる `VRLayerInit` の最大値を示す数値を返します（例えば `Display.requestPresent()` が受け取ることのできる配列の最大長です）。

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

### 値

数値であり、`VRDisplayCapabilities.canPresent` が `true` の場合は 1、それ以外の場合は 0 です。

例
-

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

仕様書
---

このプロパティは古い 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


VRDisplayCapabilities.hasExternalDisplay - Web API

VRDisplayCapabilities.hasExternalDisplay
========================================

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

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

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

**`hasExternalDisplay`** は `VRDisplayCapabilities` インターフェイスの読み取り専用プロパティで、VR ディスプレイがこの端末の主ディスプレイから分離しているどうかを示す論理値を返します。

**メモ:** 表示中の VR コンテンツがその端末の他のコンテンツを隠してしまう場合 `false` を返します。この場合、アプリは VR コンテンツのミラーリングしようとしたり、 VR ではない UI を更新しようとすべきではありません。こうしたコンテンツは表示されないからです。

値
-

論理値です。

例
-

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

仕様書
---

このプロパティは古い 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


VRDisplayCapabilities.hasOrientation - Web API

VRDisplayCapabilities.hasOrientation
====================================

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

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

**`hasOrientation`** は `VRDisplayCapabilities` インターフェイスの読み取り専用プロパティで、その VR ディスプレイがトラッキング機能を持っていて向き情報を取得できれば `true` を返します。

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

値
-

論理値です。

例
-

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

仕様書
---

このプロパティは古い 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


CSSStyleRule.styleMap - Web API

CSSStyleRule.styleMap
=====================

**`styleMap`** は `CSSStyleRule` インターフェイスの読み取り専用プロパティで、このルールのプロパティ／値の組にアクセスするための `StylePropertyMap` オブジェクトを返します。

値
-

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

例
-

以下の例では、　`styleMap` を使用して `StylePropertyMap.set()` メソッドを使用し、スタイルを変更する方法を示しています。

```js
const stylesheet = document.styleSheets[0];

Object.values(stylesheet.cssRules).forEach((block) => {
  if (block.selectorText === "button") {
    block.styleMap.set("--mainColor", "black");
  }
});
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssstylerule-stylemap |

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

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


CSSStyleRule.style - Web API

CSSStyleRule.style
==================

**`style`** は読み取り専用プロパティで、この `CSSStyleRule` の宣言ブロックのための `CSSStyleDeclaration` インターフェイスです。

値
-

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

computed flag

未設定。

declarations

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

parent CSS rule

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

owner node

null です。

例
-

 この CSS は 1 つのスタイルルールを含んでいます。これは最初の `CSSRule` となり、 `document.styleSheets[0].cssRules` で返されます。
 従って、 `myRules[0].style` は `h1` に定義された宣言を表す `CSSStyleDeclaration` をを返します。

```css
h1 {
  color: pink;
}
```

```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].style); // a CSSStyleDeclaration representing the declarations on the h1.
```

**メモ:** 宣言ブロックは、中括弧内に現れるスタイルルールの一部で、実際にスタイル定義を提供する部分です（セレクターについては、中括弧の前に来る部分）。

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstylerule-style |

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

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


CSSStyleRule.selectorText - Web API

CSSStyleRule.selectorText
=========================

**`selectorText`** は `CSSStyleRule` インターフェイスのプロパティで、この `CSSStyleRule` に関連付けられたセレクターを取得および設定します。

値
-

文字列です。

例
-

この CSS は 1 つのスタイルルールを含んでいます。これは最初の `CSSRule` となり、 `document.styleSheets[0].cssRules` で返されます。従って、 `myRules[0].selectorText` はセレクターの文字列を返します。この場合は `"h1"` となります。

```css
h1 {
  color: pink;
}
```

```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].selectorText); // a string containing "h1".
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstylerule-selectortext |

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

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


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

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

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

**`AudioProcessingEvent()`** コンストラクターは、constructor creates a new `AudioProcessingEvent` object.

**メモ:** 通常、このコンストラクターはコードから直接呼び出されることはありません。ブラウザー自身がオブジェクトを作成し、イベントハンドラーに提供するからです。

構文
--

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

### 引数

`type`

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

`options`

以下のプロパティを持つオブジェクトです。

`playbackTime`

数値で、音声が再生される時を表します。

`inputBuffer`

`AudioBuffer` で、入力する音声データが入ります。

`outputBuffer`

`AudioBuffer` で、出力する音声データが書き込まれるところです。

### 返値

新しい `AudioProcessingEvent` です。

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioprocessingevent-audioprocessingevent |

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

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

関連情報
----

* `AudioProcessingEvent`
* `ScriptProcessorNode`


AudioProcessingEvent: outputBuffer プロパティ - Web API

AudioProcessingEvent: outputBuffer プロパティ
========================================

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

**`outputBuffer`** は `AudioProcessingEvent` インターフェイスの読み取り専用プロパティで、音声処理イベントの出力バッファーを表します。

出力バッファーは `AudioBuffer` オブジェクトで表されます。このオブジェクトは音声チャンネルの集合を格納し、各チャンネルは一連の振幅としてエンコードされた音声信号波形を表す浮動小数点数の値の配列です。チャンネルの数と各チャンネルの長さは `AudioBuffer` のチャンネル数とバッファーサイズのプロパティによって決まります。

値
-

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

例
-

この例では、`ScriptProcessorNode` が 256 サンプルのバッファーサイズ、2 つの入力チャンネル、2 つの出力チャンネルで作成されています。`audioprocess` イベントが発行されると、入力バッファーと出力バッファーがイベントオブジェクトから取得されます。入力バッファー内の音声データが処理され、結果が出力バッファーに書き込まれます。この場合、音声データは 0.5 倍に縮小されます。

```js
const audioContext = new AudioContext();
const processor = audioContext.createScriptProcessor(256, 2, 2);

processor.addEventListener("audioprocess", (event) => {
  const inputBuffer = event.inputBuffer;
  const outputBuffer = event.outputBuffer;

  for (let channel = 0; channel < outputBuffer.numberOfChannels; channel++) {
    const inputData = inputBuffer.getChannelData(channel);
    const outputData = outputBuffer.getChannelData(channel);

    // Process the audio data here
    for (let i = 0; i < outputBuffer.length; i++) {
      outputData[i] = inputData[i] \* 0.5;
    }
  }
});

processor.connect(audioContext.destination);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioprocessingevent-outputbuffer |

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

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

関連情報
----

* `AudioProcessingEvent.inputBuffer`
* `ScriptProcessorNode`


AudioProcessingEvent: playbackTime プロパティ - Web API

AudioProcessingEvent: playbackTime プロパティ
========================================

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

**`playbackTime`** は `AudioProcessingEvent` インターフェイスのプロパティで、音声が再生される時間を表します。 これは `AudioContext` が使用している時間と同じ座標系です。

値
-

数値で、整数とは限りません。

例
-

```js
const audioContext = new AudioContext();
const processor = audioContext.createScriptProcessor(256, 2, 2);

processor.addEventListener("audioprocess", (event) => {
  const inputBuffer = event.inputBuffer;
  const outputBuffer = event.outputBuffer;

  for (let channel = 0; channel < outputBuffer.numberOfChannels; channel++) {
    const inputData = inputBuffer.getChannelData(channel);
    const outputData = outputBuffer.getChannelData(channel);

    // Log the corresponding time for this audio buffer
    console.log(`Received audio data to be played at ${event.playbackTime}`);

    // Process the audio data here
    for (let i = 0; i < outputBuffer.length; i++) {
      outputData[i] = inputData[i] \* 0.5;
    }
  }
});

processor.connect(audioContext.destination);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioprocessingevent-playbacktime |

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

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

関連情報
----

* `AudioProcessingEvent`
* `ScriptProcessorNode`


AudioProcessingEvent: inputBuffer プロパティ - Web API

AudioProcessingEvent: inputBuffer プロパティ
=======================================

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

**`inputBuffer`** は `AudioProcessingEvent` インターフェイスの読み取り専用プロパティで、音声処理イベントの入力バッファーを表します。

入力バッファーは `AudioBuffer` オブジェクトで表されます。このオブジェクトは音声チャンネルの集合を格納し、各チャンネルは一連の振幅としてエンコードされた音声信号波形を表す浮動小数点数の値の配列です。チャンネルの数と各チャンネルの長さは `AudioBuffer` のチャンネル数とバッファーサイズのプロパティによって決まります。

値
-

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

例
-

この例では、`ScriptProcessorNode` が 256 サンプルのバッファーサイズ、2 つの入力チャンネル、2 つの出力チャンネルで作成されています。`audioprocess` イベントが発行されると、入力バッファーと出力バッファーがイベントオブジェクトから取得されます。入力バッファー内の音声データが処理され、結果が出力バッファーに書き込まれます。この場合、音声データは 0.5 倍に縮小されます。

```js
const audioContext = new AudioContext();
const processor = audioContext.createScriptProcessor(256, 2, 2);

processor.addEventListener("audioprocess", (event) => {
  const inputBuffer = event.inputBuffer;
  const outputBuffer = event.outputBuffer;

  for (let channel = 0; channel < outputBuffer.numberOfChannels; channel++) {
    const inputData = inputBuffer.getChannelData(channel);
    const outputData = outputBuffer.getChannelData(channel);

    // Process the audio data here
    for (let i = 0; i < outputBuffer.length; i++) {
      outputData[i] = inputData[i] \* 0.5;
    }
  }
});

processor.connect(audioContext.destination);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioprocessingevent-inputbuffer |

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

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

関連情報
----

* `AudioProcessingEvent.outputBuffer`
* `ScriptProcessorNode`


DataTransferItemList.remove() - Web API

DataTransferItemList.remove()
=============================

**`DataTransferItemList.remove()`** メソッドは指定された位置の `DataTransferItem` をリストから削除します。位置が 0 より小さいか、リストの長さより 1 だけ小さい値より大きい場合、リストは変更されません。

構文
--

```js
remove(index)
```

### 引数

`index`

削除するドラッグデータリストの項目の、0 から始まる位置です。 `index` がリスト内の既存の項目と一致しない場合は、リストが変更されずに残ります。

### 返値

なし (`undefined`)。

### 例外

`InvalidStateError` `DOMException`

ドラッグデータストアが読み取り/書き込みモードでないため、アイテムを削除できない場合に発生します。

例
-

### 要素のドラッグ & ドロップ

この例では、`remove()` メソッドを使用しています。

#### HTML

```html
<div>
  <p id="source" draggable="true">
    Select this element, drag it to the Drop Zone and then release the selection
    to move the element.
  </p>
</div>
<div id="target">Drop Zone</div>
```

#### CSS

```css
div {
  margin: 0em;
  padding: 2em;
}

#source {
  color: blue;
  border: 1px solid black;
}

#target {
  border: 1px solid black;
}
```

#### JavaScript

```js
function dragstart\_handler(ev) {
  console.log("dragStart");
  // Add this element's id to the drag payload so the drop handler will
  // know which element to add to its tree
  const dataList = ev.dataTransfer.items;
  dataList.add(ev.target.id, "text/plain");
  // Add some other items to the drag payload
  dataList.add("<p>Paragraph…</p>", "text/html");
  dataList.add("http://www.example.org", "text/uri-list");
}

function drop\_handler(ev) {
  console.log("Drop");
  ev.preventDefault();
  const data = event.dataTransfer.items;
  // Loop through the dropped items and log their data
  for (const item of data) {
    if (item.kind === "string" && item.type.match("^text/plain")) {
      // This item is the target node
      item.getAsString((s) => {
        ev.target.appendChild(document.getElementById(s));
      });
    } else if (item.kind === "string" && item.type.match("^text/html")) {
      // Drag data item is HTML
      item.getAsString((s) => {
        console.log(`… Drop: HTML = ${s}`);
      });
    } else if (item.kind === "string" && item.type.match("^text/uri-list")) {
      // Drag data item is URI
      item.getAsString((s) => {
        console.log(`… Drop: URI = ${s}`);
      });
    }
  }
}

function dragover\_handler(ev) {
  console.log("dragOver");
  ev.preventDefault();
  // Set the dropEffect to move
  ev.dataTransfer.dropEffect = "move";
}

function dragend\_handler(ev) {
  console.log("dragEnd");
  const dataList = ev.dataTransfer.items;
  // Clear all the files. Iterate in reverse order to safely remove.
  for (let i = dataList.length - 1; i >= 0; i--) {
    if (dataList[i].kind === "file") {
      dataList.remove(i);
    }
  }
  // Clear any remaining drag data
  dataList.clear();
}

const source = document.querySelector("#source");
source.addEventListener("dragstart", dragstart_handler);
source.addEventListener("dragend", dragend_handler);

const target = document.querySelector("#target");
target.addEventListener("drop", drop_handler);
target.addEventListener("dragover", dragover_handler);
```

#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-datatransferitemlist-remove-dev |

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

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


DataTransferItemList.add() - Web API

DataTransferItemList.add()
==========================

**`DataTransferItemList.add()`** メソッドは、指定されたデータを使用して新しい `DataTransferItem` を作成し、ドラッグデータリストに追加します。アイテムは `File` または指定された種類の文字列です。リストへの追加が成功すると、新しく作成された `DataTransferItem` オブジェクトが返されます。

構文
--

```js
add(data, type)
add(file)
```

### 引数

`data`

文字列で、ドラッグアイテムのデータを表します。

`type`

ドラッグアイテムの種類を表す文字列。例えば、`text/html` や `text/plain` といった種類があります。

`file`

`File` オブジェクト。この場合、種類を指定する必要はありません。

### 返値

指定したデータを格納した `DataTransferItem` を返します。ドラッグアイテムを作成できなかった場合（例えば、関連する `DataTransfer` オブジェクトがデータストアを持たない場合）、`null` が返されます。

### 例外

`NotSupportedError` `DOMException`

文字列で `data` 引数が提供され、 `kind` が `"Plain Unicode string"` で、指定された `type` 引数と等しい型の項目がリストに既に格納されている場合に発生します。

例
-

この例では、 `add()` メソッドを使用しています。

### HTML

```html
<div>
  <p
 id="source"
 ondragstart="dragstart\_handler(event);"
 ondragend="dragend\_handler(event);"
 draggable="true">
    Select this element, drag it to the Drop Zone and then release the selection
    to move the element.
  </p>
</div>
<div
 id="target"
 ondrop="drop\_handler(event);"
 ondragover="dragover\_handler(event);">
  Drop Zone
</div>
```

### CSS

```css
div {
  margin: 0em;
  padding: 2em;
}
#source {
  color: blue;
  border: 1px solid black;
}
#target {
  border: 1px solid black;
}
```

### JavaScript

```js
function dragstart\_handler(ev) {
  console.log("dragStart");
  // Add this element's id to the drag payload so the drop handler will
  // know which element to add to its tree
  const dataList = ev.dataTransfer.items;
  dataList.add(ev.target.id, "text/plain");
  // Add some other items to the drag payload
  dataList.add("<p>Paragraph…</p>", "text/html");
  dataList.add("http://www.example.org", "text/uri-list");
}

function drop\_handler(ev) {
  console.log("Drop");
  ev.preventDefault();
  const data = event.dataTransfer.items;
  // Loop through the dropped items and log their data
  for (let i = 0; i < data.length; i++) {
    if (data[i].kind === "string" && data[i].type.match("^text/plain")) {
      // This item is the target node
      data[i].getAsString((s) => {
        ev.target.appendChild(document.getElementById(s));
      });
    } else if (data[i].kind === "string" && data[i].type.match("^text/html")) {
      // Drag data item is HTML
      data[i].getAsString((s) => {
        console.log(`… Drop: HTML = ${s}`);
      });
    } else if (
      data[i].kind === "string" &&
      data[i].type.match("^text/uri-list")
    ) {
      // Drag data item is URI
      data[i].getAsString((s) => {
        console.log(`… Drop: URI = ${s}`);
      });
    }
  }
}

function dragover\_handler(ev) {
  console.log("dragOver");
  ev.preventDefault();
  // Set the dropEffect to move
  ev.dataTransfer.dropEffect = "move";
}

function dragend\_handler(ev) {
  console.log("dragEnd");
  const dataList = ev.dataTransfer.items;
  for (let i = 0; i < dataList.length; i++) {
    dataList.remove(i);
  }
  // Clear any remaining drag data
  dataList.clear();
}
```

### 結果

Result link仕様書
---

| Specification |
| --- |
| HTML Standard # dom-datatransferitemlist-add-dev |

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

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


DataTransferItemList.clear() - Web API

DataTransferItemList.clear()
============================

`DataTransferItemList` の **`clear()`** メソッドは、ドラッグデータアイテムリストからすべての `DataTransferItem` オブジェクトを削除し、リストを空にします。

このリストが保持されるドラッグデータストアは、 `dragstart` イベントの処理中にのみ書き込み可能になります。 `drop` を処理する間、ドラッグデータストアは読み取り専用モードであり、このメソッドは何もしません。例外も投げません。

構文
--

```js
clear()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

この例は `clear()` メソッドの使い方を示します。

### HTML

```html
<div>
  <p
 id="source"
 ondragstart="dragstartHandler(event);"
 ondragend="dragendHandler(event);"
 draggable="true">
    Select this element, drag it to the Drop Zone and then release the selection
    to move the element.
  </p>
</div>
<div
 id="target"
 ondrop="dropHandler(event);"
 ondragover="dragoverHandler(event);">
  Drop Zone
</div>
```

### CSS

```css
div {
  margin: 0em;
  padding: 2em;
}
#source {
  color: blue;
  border: 1px solid black;
}
#target {
  border: 1px solid black;
}
```

### JavaScript

```js
function dragstartHandler(ev) {
  console.log("dragStart");

  // Add this element's id to the drag payload so the drop handler will
  // know which element to add to its tree
  const dataList = ev.dataTransfer.items;
  dataList.add(ev.target.id, "text/plain");
}

function dropHandler(ev) {
  console.log("Drop");
  ev.preventDefault();

  // Loop through the dropped items and log their data
  for (const item of ev.dataTransfer.items) {
    if (item.kind === "string" && item.type.match(/^text\/plain/)) {
      // This item is the target node
      item.getAsString((s) => {
        ev.target.appendChild(document.getElementById(s));
      });
    } else if (item.kind === "string" && item.type.match(/^text\/html/)) {
      // Drag data item is HTML
      item.getAsString((s) => {
        console.log(`… Drop: HTML = ${s}`);
      });
    } else if (item.kind === "string" && item.type.match(/^text\/uri-list/)) {
      // Drag data item is URI
      item.getAsString((s) => {
        console.log(`… Drop: URI = ${s}`);
      });
    }
  }
}

function dragoverHandler(ev) {
  console.log("dragOver");
  ev.preventDefault();

  // Set the dropEffect to move
  ev.dataTransfer.dropEffect = "move";
}

function dragendHandler(ev) {
  console.log("dragEnd");
  const dataList = ev.dataTransfer.items;

  // Clear any remaining drag data
  dataList.clear();
}
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-datatransferitemlist-clear-dev |

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

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


DataTransferItemList.length - Web API

DataTransferItemList.length
===========================

**`length`** は `DataTransferItemList` インターフェイスの読み取り専用プロパティで、ドラッグアイテムリストの中に現在入っているアイテムの数を返します。

値
-

リスト中のドラッグデータアイテムの数で、もしリストが空か無効であれば 0 です。アイテムリストの `DataTransfer` オブジェクトがドラッグデータストアに関連付けられていない場合は、ドラッグアイテムリストは無効とみなされます。

例
-

この例は `length` プロパティの使い方を示しています。

### JavaScript

```js
function dragstart\_handler(ev) {
  console.log("dragStart");
  // Add this element's id to the drag payload so the drop handler will
  // know which element to add to its tree
  const dataList = ev.dataTransfer.items;
  dataList.add(ev.target.id, "text/plain");
  // Add some other items to the drag payload
  dataList.add("<p>Paragraph…</p>", "text/html");
  dataList.add("http://www.example.org", "text/uri-list");
}

function drop\_handler(ev) {
  console.log("Drop");
  ev.preventDefault();
  const data = ev.dataTransfer.items;
  // Loop through the dropped items and log their data
  for (let i = 0; i < data.length; i++) {
    if (data[i].kind === "string" && data[i].type.match("^text/plain")) {
      // This item is the target node
      data[i].getAsString((s) => {
        ev.target.appendChild(document.getElementById(s));
      });
    } else if (data[i].kind === "string" && data[i].type.match("^text/html")) {
      // Drag data item is HTML
      data[i].getAsString((s) => {
        console.log(`… Drop: HTML = ${s}`);
      });
    } else if (
      data[i].kind === "string" &&
      data[i].type.match("^text/uri-list")
    ) {
      // Drag data item is URI
      data[i].getAsString((s) => {
        console.log(`… Drop: URI = ${s}`);
      });
    }
  }
}

function dragover\_handler(ev) {
  console.log("dragOver");
  ev.preventDefault();
  // Set the dropEffect to move
  ev.dataTransfer.dropEffect = "move";
}

function dragend\_handler(ev) {
  console.log("dragEnd");
  const dataList = ev.dataTransfer.items;
  // Clear any remaining drag data
  dataList.clear();
}
```

### HTML

```html
<div>
  <p
 id="source"
 ondragstart="dragstart\_handler(event);"
 ondragend="dragend\_handler(event);"
 draggable="true">
    Select this element, drag it to the Drop Zone and then release the selection
    to move the element.
  </p>
</div>
<div
 id="target"
 ondrop="drop\_handler(event);"
 ondragover="dragover\_handler(event);">
  Drop Zone
</div>
```

### CSS

```css
div {
  margin: 0em;
  padding: 2em;
}

#source {
  color: blue;
  border: 1px solid black;
}

#target {
  border: 1px solid black;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-datatransferitemlist-length-dev |

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

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


Magnetometer: z プロパティ - Web API

Magnetometer: z プロパティ
=====================

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

`Magnetometer` インターフェイスの読み取り専用プロパティ **`z`** は、デバイスの z 軸方向の磁場を表す数値を返します。

値
-

`Number` です。

例
-

磁場は通常 `reading` イベントコールバックで取得します。以下の例では、これを 1 秒に 60 回行います。

```js
let magSensor = new Magnetometer({ frequency: 60 });

magSensor.addEventListener("reading", (e) => {
  console.log(`X 軸方向の磁場 ${magSensor.x}`);
  console.log(`Y 軸方向の磁場 ${magSensor.y}`);
  console.log(`Z 軸方向の磁場 ${magSensor.z}`);
});
magSensor.start();
```

仕様書
---

| Specification |
| --- |
| Magnetometer # magnetometer-z |

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

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


Magnetometer: x プロパティ - Web API

Magnetometer: x プロパティ
=====================

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

`Magnetometer` インターフェイスの読み取り専用プロパティ **`x`** は、デバイスの x 軸方向の磁場を表す数値を返します。

値
-

`Number` です。

例
-

磁場は通常 `reading` イベントコールバックで取得します。以下の例では、これを 1 秒に 60 回行います。

```js
let magSensor = new Magnetometer({ frequency: 60 });

magSensor.addEventListener("reading", (e) => {
  console.log(`X 軸方向の磁場 ${magSensor.x}`);
  console.log(`Y 軸方向の磁場 ${magSensor.y}`);
  console.log(`Z 軸方向の磁場 ${magSensor.z}`);
});
magSensor.start();
```

仕様書
---

| Specification |
| --- |
| Magnetometer # magnetometer-x |

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

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


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

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

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

**`Magnetometer()`** コンストラクターは、デバイスのプライマリー磁気センサーで検出される磁場の情報を返す新しい `Magnetometer` オブジェクトを生成します。

構文
--

```js
new Magnetometer()
new Magnetometer(options)
```

### 引数

`options` 省略可

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

`frequency`

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

`referenceFrame`

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

### 例外

`SecurityError` `DOMException`

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

仕様書
---

| Specification |
| --- |
| Magnetometer # dom-magnetometer-magnetometer |

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

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

関連情報
----

* `reading` イベント


Magnetometer: y プロパティ - Web API

Magnetometer: y プロパティ
=====================

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

`Magnetometer` インターフェイスの読み取り専用プロパティ **`y`** は、デバイスの y 軸方向の磁場を表す数値を返します。

値
-

`Number` です。

例
-

磁場は通常 `reading` イベントコールバックで取得します。以下の例では、これを 1 秒に 60 回行います。

```js
let magSensor = new Magnetometer({ frequency: 60 });

magSensor.addEventListener("reading", (e) => {
  console.log(`X 軸方向の磁場 ${magSensor.x}`);
  console.log(`Y 軸方向の磁場 ${magSensor.y}`);
  console.log(`Z 軸方向の磁場 ${magSensor.z}`);
});
magSensor.start();
```

仕様書
---

| Specification |
| --- |
| Magnetometer # magnetometer-y |

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

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


AudioWorkletGlobalScope: currentTime プロパティ - Web API

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

`AudioWorkletGlobalScope` インターフェイスの読み取り専用プロパティ **`currentTime`** は、処理中の音声ブロックのコンテキスト時刻を表す単調増加の `double` 値を返します。これはワークレットが属している `BaseAudioContext` の `currentTime` プロパティと同じ値です。

値
-

時刻を表す浮動小数点数です。

例
-

この `AudioWorkletProcessor` は `AudioWorkletGlobalScope` の特定のプロパティにアクセスできます。

```js
// test-processor.js で定義された AudioWorkletProcessor
class TestProcessor extends AudioWorkletProcessor {
  constructor() {
    super();

    // 生成時のサンプルフレームと時刻を記録する。
    // これらの値には AudioWorkletGlobalScope からアクセスできる。
    console.log(currentFrame);
    console.log(currentTime);
  }

  // process メソッドは必須である。
  // (最初から入っている) 無音を出力する。
  process(inputs, outputs, parameters) {
    return true;
  }
}

// サンプルレートを記録する。
// これは BaseAudioContext の読み取り専用プロパティであり、
// 生成時にのみ設定されるので、変化しない。
console.log(sampleRate);

// 任意の変数を宣言し、処理器で利用できる。
// たとえば、波形テーブルが入った ArrayBuffer を宣言できる。
const usefulVariable = 42;
console.log(usefulVariable);

registerProcessor("test-processor", TestProcessor);
```

メインスクリプトでは処理器をロードし、処理器の名前を渡して `AudioWorkletNode` のインスタンスを生成し、そのノードを音声グラフに接続します。`console.log()` の呼び出しによる出力がコンソールに出るはずです。

```js
const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule("test-processor.js");
const testNode = new AudioWorkletNode(audioContext, "test-processor");
testNode.connect(audioContext.destination);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioworkletglobalscope-currenttime |

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

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

関連情報
----

* ウェブオーディオ API
* Web Audio API の使用


AudioWorkletGlobalScope: sampleRate プロパティ - Web API

AudioWorkletGlobalScope: sampleRate プロパティ
=========================================

`AudioWorkletGlobalScope` インターフェイスの読み取り専用プロパティ **`sampleRate`** は、ワークレットが属する `BaseAudioContext` のサンプルレートを表す `float` 値を返します。

値
-

関連付けられたサンプルレートを表す浮動小数点数です。

例
-

この `AudioWorkletProcessor` は `AudioWorkletGlobalScope` の特定のプロパティにアクセスできます。

```js
// test-processor.js で定義された AudioWorkletProcessor
class TestProcessor extends AudioWorkletProcessor {
  constructor() {
    super();

    // 生成時のサンプルフレームと時刻を記録する。
    // これらの値には AudioWorkletGlobalScope からアクセスできる。
    console.log(currentFrame);
    console.log(currentTime);
  }

  // process メソッドは必須である。
  // (最初から入っている) 無音を出力する。
  process(inputs, outputs, parameters) {
    return true;
  }
}

// サンプルレートを記録する。
// これは BaseAudioContext の読み取り専用プロパティであり、
// 生成時にのみ設定されるので、変化しない。
console.log(sampleRate);

// 任意の変数を宣言し、処理器で利用できる。
// たとえば、波形テーブルが入った ArrayBuffer を宣言できる。
const usefulVariable = 42;
console.log(usefulVariable);

registerProcessor("test-processor", TestProcessor);
```

メインスクリプトでは処理器をロードし、処理器の名前を渡して `AudioWorkletNode` のインスタンスを生成し、そのノードを音声グラフに接続します。`console.log()` の呼び出しによる出力がコンソールに出るはずです。

```js
const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule("test-processor.js");
const testNode = new AudioWorkletNode(audioContext, "test-processor");
testNode.connect(audioContext.destination);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioworkletglobalscope-samplerate |

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

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

関連情報
----

* ウェブオーディオ API
* Web Audio API の使用


AudioWorkletGlobalScope: currentFrame プロパティ - Web API

AudioWorkletGlobalScope: currentFrame プロパティ
===========================================

`AudioWorkletGlobalScope` インターフェイスの読み取り専用プロパティ **`currentFrame`** は、処理中の音声ブロックのサンプルフレームを表す単調増加の整数を返します。この値は各音声ブロックを処理するごとに 128 (render quantum のサイズ) 増えます。

値
-

整数値です。

例
-

この `AudioWorkletProcessor` は `AudioWorkletGlobalScope` の特定のプロパティにアクセスできます。

```js
// test-processor.js で定義された AudioWorkletProcessor
class TestProcessor extends AudioWorkletProcessor {
  constructor() {
    super();

    // 生成時のサンプルフレームと時刻を記録する。
    // これらの値には AudioWorkletGlobalScope からアクセスできる。
    console.log(currentFrame);
    console.log(currentTime);
  }

  // process メソッドは必須である。
  // (最初から入っている) 無音を出力する。
  process(inputs, outputs, parameters) {
    return true;
  }
}

// サンプルレートを記録する。
// これは BaseAudioContext の読み取り専用プロパティであり、
// 生成時にのみ設定されるので、変化しない。
console.log(sampleRate);

// 任意の変数を宣言し、処理器で利用できる。
// たとえば、波形テーブルが入った ArrayBuffer を宣言できる。
const usefulVariable = 42;
console.log(usefulVariable);

registerProcessor("test-processor", TestProcessor);
```

メインスクリプトでは処理器をロードし、処理器の名前を渡して `AudioWorkletNode` のインスタンスを生成し、そのノードを音声グラフに接続します。`console.log()` の呼び出しによる出力がコンソールに出るはずです。

```js
const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule("test-processor.js");
const testNode = new AudioWorkletNode(audioContext, "test-processor");
testNode.connect(audioContext.destination);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioworkletglobalscope-currentframe |

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

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

関連情報
----

* ウェブオーディオ API
* Web Audio API の使用


AudioWorkletGlobalScope: registerProcessor() メソッド - Web API

AudioWorkletGlobalScope: registerProcessor() メソッド
=================================================

`AudioWorkletGlobalScope` インターフェイスの **`registerProcessor`** メソッドは、`AudioWorkletProcessor` インターフェイスから派生したクラスのコンストラクターを指定の `name` で登録します。

構文
--

```js
registerProcessor(name, processorCtor)
```

### 引数

`name`

処理器を登録する名前を表す文字列です。

`processorCtor`

`AudioWorkletProcessor` から派生したクラスのコンストラクターです。

**メモ:** 処理器を登録すると、キーと値のペア `{ name: constructor }` が内部で `AudioWorkletGlobalScope` に保存されます。登録した処理器をもとに `AudioWorkletNode` を生成するとき、`name` が参照されます。指定の名前によって新しい処理器が内部で生成され、新しいノードと関連付けられます。

### 返値

なし (`undefined`)

### 例外

`NotSupportedError` `DOMException`

以下のとき投げられます。

* `name` が空文字列のとき。
* 指定の `name` でコンストラクターが既に登録されているとき。
 同じ名前を 2 回登録することは許されません。

`TypeError`

以下のとき投げられます。

* `processorCtor` が呼び出し可能なコンストラクターではないとき。
* コンストラクターに `parameterDescriptors` プロパティが存在し、`AudioParamDescriptor` (en-US) ベースのオブジェクトの配列を返さなかったとき。

例
-

この例では、無音を出力する独自の `AudioWorkletNode` を作成します。

まず、独自の `AudioWorkletProcessor` を定義して登録する必要があります。これは別のファイルで行うことに注意してください。

```js
// test-processor.js
class TestProcessor extends AudioWorkletProcessor {
  process(inputs, outputs, parameters) {
    return true;
  }
}

registerProcessor("test-processor", TestProcessor);
```

次に、メインスクリプトファイルで処理器をロードし、`registerProcessor` を呼ぶときに用いた処理器の名前を渡して `AudioWorkletNode` のインスタンスを生成し、それを音声グラフに接続します。

```js
const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule("test-processor.js");
const node = new AudioWorkletNode(audioContext, "test-processor");
node.connect(audioContext.destination);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioworkletglobalscope-registerprocessor |

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

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

関連情報
----

* Web Audio API の使用


AudioTrackList: removetrack イベント - Web API

AudioTrackList: removetrack イベント
================================

`removetrack` イベントは、トラックが `AudioTrackList` から取り除かれたときに発生します。

構文
--

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

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

onremovetrack = (event) => { }
```

イベント型
-----

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

Event

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

*`TrackEvent` は `Event` に基づいているため、 `Event` のプロパティも `TrackEvent` オブジェクトで利用できます。*

`track` 読取専用

このイベントが参照している DOM track オブジェクト。 `null` でなければ、これは常にいずれかのメディアトラック型のオブジェクトになります。`AudioTrack`、`VideoTrack`、`TextTrack`) のいずれかです。

解説
--

### トリガー

`removetrack` イベントは、 `AudioTrackList` オブジェクトで表される音声トラックを持つメディア要素からトラックが取り外されるたびに呼び出されます。

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

### 用途

このイベントを使用して、新しい音声トラックが利用できるようになったことに反応することができます。例えば、新しい音声トラックをユーザーが選択できるように、 UI 要素を更新することができます。

例
-

`AddEventListener()` を使用する場合:

```js
const videoElement = document.querySelector("video");

videoElement.audioTracks.addEventListener("removetrack", (event) => {
  console.log(`Audio track: ${event.track.label} removed`);
});
```

`onremovetrack` イベントハンドラープロパティを使用する場合:

```js
const videoElement = document.querySelector("video");

videoElement.audioTracks.onremovetrack = (event) => {
  console.log(`Audio track: ${event.track.label} removed`);
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-removetrack |
| HTML Standard # handler-tracklist-onremovetrack |

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

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

関連情報
----

* 関連イベント: `addtrack`, `change`
* `VideoTrackList` を対象としたこのイベント: `removetrack`
* `MediaStream` を対象としたこのイベント: `removetrack`
* メディアキャプチャおよびストリーム API
* WebRTC API


AudioTrackList: addtrack イベント - Web API

AudioTrackList: addtrack イベント
=============================

`addtrack` イベントは、トラックが `AudioTrackList` に追加されたときに発生します。

構文
--

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

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

onaddtrack = (event) => { }
```

イベント型
-----

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

Event

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

*`TrackEvent` は `Event` に基づいているため、 `Event` のプロパティも `TrackEvent` オブジェクトで利用できます。*

`track` 読取専用

このイベントが参照している DOM track オブジェクト。 `null` でなければ、これは常にいずれかのメディアトラック型のオブジェクトになります。`AudioTrack`、`VideoTrack`、`TextTrack`) のいずれかです。

解説
--

### トリガー

 この `addtrack` イベントは、 `AudioTrackList` オブジェクトで表される音声トラックを持つメディア要素に新しいトラックが追加されるたびに呼び出されます。
 これは、メディアが最初に要素に装着されたとき、トラックが追加されたときに起こります。メディアリソース内のそれぞれの音声トラックに対して、 1 つの `addtrack` イベントが発生します。

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

### 用途

このイベントを使用して、新しい音声トラックが利用できるようになったことに反応することができます。例えば、新しい音声トラックをユーザーが選択できるように、 UI 要素を更新することができます。

例
-

`addEventListener()` を使用する場合:

```js
const videoElement = document.querySelector("video");

videoElement.audioTracks.addEventListener("addtrack", (event) => {
  console.log(`Audio track: ${event.track.label} added`);
});
```

`onaddtrack` イベントハンドラープロパティを使用する場合:

```js
const videoElement = document.querySelector("video");

videoElement.audioTracks.onaddtrack = (event) => {
  console.log(`Audio track: ${event.track.label} added`);
};
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-addtrack |
| HTML Standard # handler-tracklist-onaddtrack |

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

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

関連情報
----

* 関連イベント: `removetrack`、`change`
* `VideoTrackList` を対象としたこのイベント: `addtrack`
* `MediaStream` を対象としたこのイベント: `addtrack`
* メディアキャプチャおよびストリーム API
* WebRTC API


AudioTrackList.getTrackById() - Web API

AudioTrackList.getTrackById()
=============================

**`AudioTrackList`** の **`getTrackById()`** メソッドは、指定された文字列と `id` が一致するトラックリストから最初の `AudioTrack` オブジェクトを返します。 ID 文字列がわかっていれば、これで特定のトラックを見つけることができます。

構文
--

```js
getTrackById(id)
```

### 引数

`id`

文字列で、トラックリスト内で検索するトラックの ID を示します。

### 返値

指定された文字列に一致する `id` を持つ `AudioTrackList` 内で見つかった最初のトラックを示す `AudioTrack` オブジェクト。 一致が見つからない場合、このメソッドは `null` を返します。

トラックは自然な順序で検索されます。 つまり、メディアリソース自体によって定義された順序で、またはリソースが順序を定義していない場合は、メディアリソースによってトラックが宣言される相対的な順序です。

例
-

この例は、映画をゲーム内のカットシーンまたは他の重要なセットのピースとして使用する架空のゲームを示唆しています。 各映画には、各キャラクターに 1 つの音声トラックがあり、音楽、効果音などにも 1 つの音声トラックがあります。 この関数により、ゲーム内の出来事に基づいて映画の演技を調整するために、ゲームは特定のキャラクターの音声を無効にすることができます。 キャラクターの対話が適切でない場合は、省略されます。 明らかにそれは作品を作るためにいくつかの巧妙なグラフィックデザインを必要とするでしょう、しかし...これは架空のゲームです。

```js
function disableCharacter(videoElem, characterName) {
  videoElem.audioTracks.getTrackById(characterName).enabled = false;
}
```

この短い関数は、`HTMLMediaElement.audioTracks` を使用して動画の音声トラックを含む `AudioTrackList` を取得し、それから `getTrackById()` を呼び出してキャラクターの名前を指定します。 結果としてトラックの音声は、その `enabled` フラグを `false` に設定することで無効になります。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-audiotracklist-gettrackbyid-dev |

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

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


AudioTrackList.length - Web API

AudioTrackList.length
=====================

読み取り専用の **`AudioTrackList`** の **`length`** プロパティは、`AudioTrackList` 内の項目数を返します。 各項目は、メディア要素内の 1 つの音声トラックを表す `AudioTrack` です。 値 0 は、メディアに音声トラックがないことを示します。

値
-

`AudioTrackList` に含まれる音声トラックの数を示す数値。 `AudioTrackList` を `AudioTrack` 型のオブジェクトの配列として扱うことで、各トラックにアクセスできます。

例
-

このスニペットは、`querySelector()` によって DOM 内で見つかった最初の `<video>` 要素内の音声トラックの数を取得します。

```js
const videoElem = document.querySelector("video");
let numAudioTracks = 0;

if (videoElem.audioTracks) {
  numAudioTracks = videoElem.audioTracks.length;
}
```

このサンプルは、`AudioTrack` に対応していないブラウザーで失敗するのを避けるために、 `HTMLMediaElement.audioTracks` が定義されていることを確認していることに注意してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-audiotracklist-length-dev |

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

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


AudioTrackList: change イベント - Web API

AudioTrackList: change イベント
===========================

`change` イベントは、音声トラックが有効または無効になったとき（トラックの `enabled` プロパティを変更したときなど）に発生します。

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

構文
--

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

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

onchange = (event) => { }
```

イベント型
-----

一般的な `Event` です。

例
-

`addEventListener()` を使用する場合:

```js
const videoElement = document.querySelector("video");
videoElement.audioTracks.addEventListener("change", (event) => {
  console.log(`'${event.type}' イベント発生`);
});

// `enabled` の値を変更すると `change` イベントを引き起こします
const toggleTrackButton = document.querySelector(".toggle-track");
toggleTrackButton.addEventListener("click", () => {
  const track = videoElement.audioTracks[0];
  track.enabled = !track.enabled;
});
```

`onchange` イベントハンドラープロパティを使用する場合:

```js
const videoElement = document.querySelector("video");
videoElement.audioTracks.onchange = (event) => {
  console.log(`'${event.type}' イベント発生`);
};

// `enabled` の値を変更すると `change` イベントを引き起こします
const toggleTrackButton = document.querySelector(".toggle-track");
toggleTrackButton.addEventListener("click", () => {
  const track = videoElement.audioTracks[0];
  track.enabled = !track.enabled;
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-change |
| HTML Standard # handler-tracklist-onchange |

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

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

関連情報
----

* 関連イベント: `addtrack`, `removetrack`
* `VideoTrackList` を対象としたこのイベント: `change`
* メディアキャプチャおよびストリーム API
* WebRTC API


MediaSession.setPositionState() - Web API

MediaSession.setPositionState()
===============================

`MediaSession` の **`setPositionState()`** メソッドは、進行中のメディアに関する詳細を提供するあらゆる種類のインターフェイスにおいて、ユーザー端末で表示するために、現在の文書のメディア再生位置と速度を更新するために使用します。これは、コードでブラウザーが直接対応していない種類のメディアのプレーヤーを実装する場合に、特に有用です。

このメソッドを `navigator` オブジェクトの `mediaSession` オブジェクトで呼び出してください。

構文
--

```js
setPositionState()
setPositionState(stateDict)
```

### 引数

`stateDict` 省略可

文書の進行中のメディアの再生位置と再生速度に関する更新情報を提供するオブジェクトです。このオブジェクトが空の場合、既存の再生状態情報はクリアされます。このオブジェクトは、以下の引数を格納した辞書です。

`duration`

浮動小数点数の値で、現在のメディアの全体の再生時間を秒単位で示します。これは常に正の値であるべきであり、正の無限大 (`Infinity`) は、ライブストリームのような、終わりを定義しないメディアを示します。

`playbackRate`

浮動小数点数の値で、メディアの再生速度を、通常の再生速度との関連で示す値です。従って、1 の値は通常の速度で再生していることを示し、2 の値は倍速で再生していることを示し、以下同様となります。負の値は、メディアが逆再生されていることを示します。-1 は、通常の速度で逆再生されていることを示し、-2 は、倍速で逆再生されていることを示します、といった具合です。

`position`

浮動小数点数の値で、最後に報告されたメディアの再生位置を秒単位で示します。これは常に正の値でなければなりません。

### 返値

なし (`undefined`)。

### 例外

`TypeError`

このエラーは、さまざまな状況で発生する可能性があります。

* 指定したオブジェクトの `duration` が見つからないか、負の値、または `null` である。
* その `position` が見つからないか null であるか、または `duration` よりも大きいか負の値である。
* `playbackRate` がゼロである。

例
-

以下は、現在の `MediaSession` トラックの位置状態を更新する関数です。

```js
function updatePositionState() {
  navigator.mediaSession.setPositionState({
    duration: audioEl.duration,
    playbackRate: audioEl.playbackRate,
    position: audioEl.currentTime,
  });
}
```

この関数は、`メディアセッションメタデータ`を更新するときや、下記のようなアクションのコールバック内で使用することができます。

```js
navigator.mediaSession.setActionHandler("seekbackward", (details) => {
  // our time to skip
  const skipTime = details.seekOffset || 10;

  // set our position
  audioEl.currentTime = Math.max(audioEl.currentTime - skipTime, 0);
  updatePositionState();
});
```

仕様書
---

| Specification |
| --- |
| Media Session # dom-mediasession-setpositionstate |

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

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


MediaSession.setCameraActive() - Web API

MediaSession.setCameraActive()
==============================

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

`MediaSession` の **`setCameraActive()`** メソッドは、 ユーザーエージェントに対して、ユーザーのカメラがアクティブであると考えられるかどうかを示すために使用します。

このメソッドは `navigator` オブジェクトの `mediaSession` オブジェクトに対して呼び出してください。

なお、カメラの状態は `MediaSession` 自体では追跡されず、別個の追跡が必要です。

構文
--

```js
setCameraActive(active)
```

### 引数

`active`

カメラがアクティブとみなされるかどうかを示す論理値です。

### 返値

なし (`undefined`)。

例
-

下記は、現在の `MediaSession` のカメラアクティブ状態を更新し、`setActionHandler()` でカメラ状態を変更するリクエストを待ち受けする例です。

```js
let cameraActive = false;

navigator.mediaSession.setCameraActive(cameraActive);

navigator.mediaSession.setActionHandler("togglecamera", () => {
  cameraActive = !cameraActive;
  navigator.mediaSession.setCameraActive(cameraActive);
});
```

仕様書
---

| Specification |
| --- |
| Media Session # dom-mediasession-setcameraactive |

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

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


MediaSession.playbackState - Web API

MediaSession.playbackState
==========================

**`playbackState`** は `MediaSession` インターフェイスのプロパティで、現在のメディアセッションが再生中か一時停止中かを示します。

値
-

 文字列で、メディアセッションの現在の再生状態を示します。
 値は以下のいずれかです。

`none`

閲覧コンテキストが現在の再生状態を把握していない、または再生状態がこの時点で利用できない。

`paused`

ブラウザーのメディアセッションは現在、一時停止中である。再生は再開することができる。

`playing`

ブラウザーのメディアセッションは、現在メディアを再生中で、一時停止することができる。

例
-

次の例では、再生と一時停止のための 2 つの関数を設定し、関連するアクションハンドラーのコールバックとして使用しています。各関数は `playbackState` プロパティを利用して、音声が再生されているか一時停止されているかを示します。

```js
const actionHandlers = [
  // play
  [
    "play",
    async () => {
      // play our audio
      await audioEl.play();
      // set playback state
      navigator.mediaSession.playbackState = "playing";
      // update our status element
      updateStatus(allMeta[index], "Action: play | Track is playing…");
    },
  ],
  [
    "pause",
    () => {
      // pause out audio
      audioEl.pause();
      // set playback state
      navigator.mediaSession.playbackState = "paused";
      // update our status element
      updateStatus(allMeta[index], "Action: pause | Track has been paused…");
    },
  ],
];

for (const [action, handler] of actionHandlers) {
  try {
    navigator.mediaSession.setActionHandler(action, handler);
  } catch (error) {
    console.log(`The media session action "${action}" is not supported yet.`);
  }
}
```

仕様書
---

| Specification |
| --- |
| Media Session # dom-mediasession-playbackstate |

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

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


MediaSession.metadata - Web API

MediaSession.metadata
=====================

**`metadata`** は `MediaSession` インターフェイスのプロパティで、メタデータは `MediaMetadata` オブジェクトを含んでおり、再生中のメディアに関する記述的な情報を提供します。また、メタデータが設定されていない場合は `null` が入ります。このメタデータは、ブラウザーから端末に提供され、端末が提供する標準メディアコントロールユーザーインターフェイスで表示されます。

値
-

現在再生中のメディアに関する情報を格納した `MediaMetadata` のインスタンスです。

例
-

次の例では、互換性を調べ、関連するメタデータを持つ新しいメディアセッションを作成します。

```js
if ("mediaSession" in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: "Unforgettable",
    artist: "Nat King Cole",
    album: "The Ultimate Collection (Remastered)",
    artwork: [
      {
        src: "https://dummyimage.com/96x96",
        sizes: "96x96",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/128x128",
        sizes: "128x128",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/192x192",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/256x256",
        sizes: "256x256",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/384x384",
        sizes: "384x384",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/512x512",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  });
}
```

仕様書
---

| Specification |
| --- |
| Media Session # dom-mediasession-metadata |

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

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


MediaSession.setMicrophoneActive() - Web API

MediaSession.setMicrophoneActive()
==================================

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

`MediaSession` の **`setMicrophoneActive()`** メソッドは、ユーザーエージェントに対して、ユーザーのマイクが現在ミュートされていると見なされるかどうかを示すために使用します。

このメソッドは `navigator` オブジェクトの `mediaSession` オブジェクトに対して呼び出してください。

なお、マイクの状態は `MediaSession` 自体では追跡されず、別個の追跡が必要です。

構文
--

```js
setMicrophoneActive(active)
```

### 引数

`active`

マイクをミュートとみなすかどうかを示す論理値です。

### 返値

なし (`undefined`)。

例
-

下記の例は、現在の`MediaSession`のマイクミュート状態を更新し、`setActionHandler()`でミュート状態を変更するリクエストを待ち受けするものです。

```js
let microphoneActive = false;

navigator.mediaSession.setMicrophoneActive(microphoneActive);

navigator.mediaSession.setActionHandler("togglemicrophone", () => {
  microphoneActive = !microphoneActive;
  navigator.mediaSession.setMicrophoneActive(microphoneActive);
});
```

仕様書
---

| Specification |
| --- |
| Media Session # dom-mediasession-setmicrophoneactive |

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

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