A-Frame を使った基本的なデモの作成 - ゲーム開発

A-Frame を使った基本的なデモの作成
=====================

WebVR API と WebGL API によって、ウェブブラウザー内で仮想現実 (VR) 体験を作成し始めることが可能になっていますが、コミュニティはもっと簡単に作れるツールやライブラリーが現れるのを待っています。Mozilla の A-Frame フレームワークは、ウェブ開発者が慣れ親しんでいるシステムを用いて 3D VR 空間を構築するマークアップ言語を提供しています。このシステムはゲーム開発のコーディング原則に従っています。これはプロトタイプやデモを、大量の JavaScript や GLSL を書かずに、迅速にうまく構築するのに役立ちます。この記事では A-Frame をどうやって起動するか、そしてそれをつかって簡単なデモを構築する方法を説明します。

高水準の概要
------

A-Frame の現在のバージョンは 0.3.2 で、まだまだ実験的な段階ですが、既に動作しており、すぐにブラウザーで試すことができます。デスクトップやモバイル (iOS や Android) の Oculus Rift、GearVR、HTC Vive で動作します。

A-Frame は WebGL 上に構築されていて、アプリケーション内で使える構築済みコンポーネント (モデル、ビデオプレイヤー、スカイボックス、ジオメトリー、コントロール、カーソルなど）を持っています。A-Frame は、ゲーム開発業界でよく知られているエンティティ-コンポーネントシステムに基づいていますが、マークアップ構造に慣れたウェブ開発者を対象としていて、 JavaScript による操作が可能です。最終的には、既定で VR に対応した 3D ウェブ体験が可能になります。

環境設定
----

A-Frame で何かを作るために環境設定を始めましょう。デモを構築しながら動かしていきます。次のことから始めてください。

* WebGL に十分対応している最新のブラウザー (もし利用可能な VR ハードウェアがある場合は WebVR に対応しているブラウザー)、例えば最新の Firefox や Chrome を使っているか確認してください。 Firefox Nightly または Chrome (v54 以降) をダウンロードしてください。
* (必要に応じて) Oculus Rift や Google Cardboard のような VR 機器をセットアップします。
* プロジェクトを保存する新しいディレクトリーを作成します。
* そのディレクトリーに、最新の A-Frame JavaScript ライブラリーファイル (GitHub 最新の安定開発版リポジトリーを確認してください) のコピーを保存します。
* 別のタブで A-Frame documentation を開いておきます — 参照するのに便利なので。
HTML の構造
--------

最初のステップは HTML 文書を作成することです — 先ほど作成したプロジェクトディレクトリーの中に、新しく `index.html` ファイルを作成して、その中に次の HTML を記述して保存してください。

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>MDN Games: A-Frame demo</title>
    <script src="aframe.min.js"></script>
  </head>
  <body>
    <!-- HTML goes here -->
  </body>
</html>
```

これは、文書の `charset` や `<title>` のような基本的な情報を含んでいます。`<script>` 要素は、 A-Frame フレームワークをページに取り込みます。例のコードは `<body>` 要素の中に書くことにします。

### シーンの初期化

シーンは、すべてが起こる場所です。このデモでは新しいオブジェクトを作成したら、それら全てをシーンへ追加していきます。そうすることで、それらのオブジェクトが画面上に表示されるようになります。 A-Frame の中では、シーンは Scene エンティティで表現されます。

**メモ:** エンティティは任意の要素です — box や cylinder や cone のようなオブジェクトだけでなく、camera、light、sound sourceもエンティティです。

`<body>` 要素の中に `<a-scene>` 要素を追加して、シーンを作成しましょう。

```html
<a-scene> </a-scene>
```

### 立方体の追加

立方体をシーンに追加するには、 `<a-scene>` 要素の中に単純な `<a-box>` 要素を追加します。今すぐ追加してみましょう。

```html
<a-box color="#0095DD" position="0 1 0" rotation="20 40 0"> </a-box>
```

いくつかの定義済み引数、 `color`、`position`、`rotation` が含まれています。かなり分かりやすいと思いますが、立方体の色や 3D シーン内の位置、そして立方体の回転状態を定義しています。

**メモ:** 距離の値 (例えば、立方体の y 方向の位置) は単位がなく、シーンに適切と思える好きな単位 — ミリメートル、メートル、フィート、マイル — と考えてください。あなた次第です。

### 背景の追加: スカイボックス

スカイボックス (sky box) は 3D 空間における背景で、 `<a-sky>` 要素で表現します。このデモでは、単純な背景色を使いますが、画像などを使うこともできます。周りを見回したときに晴れた空なのか、木造の納屋なのか、どんな場所にいるか好きな印象を与えることができます! `<a-cube>` 要素の直前に次の HTML を追加します。

```html
<a-sky color="#DDDDDD"></a-sky>
```

ここで、コードを保存してブラウザーを更新すると、設定した背景の画面上に立方体が見えるはずです。

![](/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame/cube.png)

ここまでで作ってきたコードは次の通りです。

Github 上で確認することもできます。

A-Frame は必要となるものをすべてセットアップしてくれます。

* 既定のの光源やカメラが含まれているので、立方体が見えています。
* コントロールも既に動作しています。マウスを使って周りを見回したり、キーボードで移動することができます ( `W`、`A`、`S`、`D` キーを試してください)。
* VRモードに入る ("Enter VR mode") ボタンも画面右下にあり、VR ハードウェアがセットアップされて使える状態になっていれば、ステレオ画面分割されたフル画面モードへ移行できます。
### カメラの指定

カメラエンティティは、 `<a-camera>` 要素をシーンへ追加することで作成することもできます。カメラの位置を明示的に指定することができ、形状が見えるようにシーンの中心から少しだけ後ろに移動させています。 `</a-scene>` 要素を閉じる前にこれを追加します。

```html
<a-camera
 position="0 1 4"
 cursor-visible="true"
 cursor-scale="2"
 cursor-color="#0095DD"
 cursor-opacity="0.5">
</a-camera>
```

`cursor-*` 属性を使って、カメラにカーソルを設定することもできます (既定では非表示) — 見やすくするためにカーソルのスケールを設定するだけでなく、背後にあるオブジェクトを隠してしまうのを防ぐために色や透明度を設定することもできます。

### ライトの追加

A-Frame の基本的な光源タイプは directional と ambient です。最初のタイプはシーン内のどこかに配置された平行光源で、2つ目のタイプは最初のタイプから反射しますのでより自然に見えます; このライトはグローバルにセットできます。新しいコードを既存コードの下に追加します — ここでは標準的な `<a-light>` 要素を使います。

```html
<a-light type="directional" color="#FFF" intensity="0.5" position="-1 1 2">
</a-light>
<a-light type="ambient" color="#FFF"> </a-light>
```

directional ライトは白色で、強度を `0.5` にセットし、位置 `-1 1 2` に配置しています。ambient ライトは色のみ指定することができ、これも白にしています。

### もう少し高度なジオメトリーの追加

ここまでにシーンに立方体を追加できました。それでは、もう少し図形を追加してみましょう。 `<a-cube>` のような既定のエンティティに制限されているわけではありません — `<a-entity>` を用いて、独自の複雑な形状を作成することができます。トーラスを追加してみましょう — 次の要素を既存コードの下に追加します。

```html
<a-entity
 geometry="
 primitive: torus;
 radius: 1;
 radiusTubular: 0.1;
 segmentsTubular: 12;"
 rotation="10 0 0"
 position="-3 1 0">
</a-entity>
```

ここで追加したエンティティは トーラスプリミティブで、トーラス図形を表します。図形に幾つかの初期値を与えています。トーラスの外側エッジの半径、チューブの半径、チューブの円周方向の分割数をそれぞれ指定します。回転と位置は、今までに見てきたものと同様にセットしました。

### マテリアルの定義

シーンにトーラスが表示されましたが、色があまり良くありません — エンティティの見た目を定義するにはマテリアル(材質) を作成する必要があります。 `<a-entity>` を次のように編集して、トーラスの見た目を定義します。

```html
<a-entity
 geometry="
 primitive: torus;
 radius: 1;
 radiusTubular: 0.1;
 segmentsTubular: 12;"
 material="
 color: #EAEFF2;
 roughness: 0.1;
 metalness: 0.5;"
 rotation="10 0 0"
 position="-3 1 0">
</a-entity>
```

新しく追加した `material` 属性では、マテリアルの `color` と、 `roughness` (表面の粗いマテリアルは、滑らかなマテリアルよりも反射光の方向が散らばります)、`metalness` (マテリアルがどの程度金属っぽいか) をセットしています。

mix のための JavaScript の追加
-----------------------

JavaScript で作成したエンティティをシーンへ追加することもできますので、その機能を使って 3 つ目の図形として円柱を追加してみましょう。 `<body>` 要素の最後、つまり `<a-scene>` の直後に、新たに `<script>` 要素を追加し、その内側に次の JaveScript コードを記述します。

```js
var scene = document.querySelector("a-scene");
var cylinder = document.createElement("a-cylinder");
cylinder.setAttribute("color", "#FF9500");
cylinder.setAttribute("height", "2");
cylinder.setAttribute("radius", "0.75");
cylinder.setAttribute("position", "3 1 0");
scene.appendChild(cylinder);
```

まず、シーンハンドラーへの参照を取得し、次に円柱要素を A-Frame エンティティとして作成しています。その後、適切な属性を設定します。 `color`、`height`、`radius`、`position` です。最後の行では、新しく作成された円柱をシーンに追加します。これで、 A-Frame を使って 3 つの異なる図形を作成することができました。今のところ、こんな感じです。

![](/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame/shapes.png)

数行の HTML と JavaScript でこのようなシーンが作成できてしまうなんて素晴らしいですね。

アニメーション
-------

`rotation` や `position` を使ってシーン上の形状を動かしてきましたが、拡大縮小をすることもできます。アニメーションするイリュージョンを作成するためにこれらの属性を操作できます。

### 回転

特別な `<a-animation>` というエンティティがあり、要素のアニメーションを手助けしてくれます。下記の `<a-animation>` 要素を `<a-box>` 要素の子要素として追加してください。

```html
<a-box color="#0095DD" rotation="20 40 0" position="0 1 0">
  <a-animation
 attribute="rotation"
 from="20 0 0"
 to="20 360 0"
 direction="alternate"
 dur="4000"
 repeat="indefinite"
 easing="ease">
  </a-animation>
</a-box>
```

他のエンティティでも同様に、アニメーション用のキープロパティを定義できます。ここでは `rotation` 属性を `20 0 0` から `20 360 0` へとアニメーションさせているので、1周回転することになります。アニメーションの方向 (direction) は、alternate に設定されているため、順方向にアニメーションが再生されます。継続時間 (duration) を 4 秒に、そして繰り返し (repeat) がずっと続く (indefinite) ように設定してします。アニメーションの easing は `ease` を使っています。これは内部的に実装されている tween.js によって実行されます。

### 拡大縮小

エンティティのアニメーションは、このデモで使ったトーラスのようなカスタムジオメトリーにも同じように追加することができます。次に示す `<a-animation>` 要素をトーラスへ追加します。

```html
<a-entity
 geometry="
 primitive: torus;
 radius: 1;
 radiusTubular: 0.1;
 segmentsTubular: 12;"
 material="
 color: #EAEFF2;
 roughness: 0.1;
 metalness: 0.5;"
 rotation="10 0 0"
 position="-3 1 0">
  <a-animation
 attribute="scale"
 to="1 0.5 1"
 direction="alternate"
 dur="2000"
 repeat="indefinite"
 easing="linear">
  </a-animation>
</a-entity>
```

このトーラスをアニメーションさせる対象の属性は `scale` です。初期のデフォルトスケールは `1 1 1` で、それを `1 0.5 1` にアニメーションさせていますので、 `y` 軸が `1` から `0.5` へスケールが変化します。easing には `linear` を使っています。direction を `alternate` にセットすることで、 2 秒かけてスケールが `0.5` へ変化したあと `1` へと戻ります。再度、repeat は indefinite を指定して無限に繰り返す設定にしています。

### 移動

3 つ目の図形の位置を変えるには、 `<a-animation>` を使用することもできますが、代わりに JavaScript を使用することもできます。次のコードを `<script>` タグの末尾に追加してください。

```js
var t = 0;
function render() {
  t += 0.01;
  requestAnimationFrame(render);
  cylinder.setAttribute("position", "3 " + (Math.sin(t \* 2) + 1) + " 0");
}
render();
```

円柱の位置を毎フレーム更新するために `render()` 関数を使っています。`y` 軸に与える値を変更して、それが移動にどんな影響をあたえるか試してみてください。

まとめ
---

すべて適切にレンダリングされてアニメーションしていますね。おめでとう、あなたの最初の A-Frame シーンが構築できました! 最終版がどのように見えて、どのように動くかは、ここで確認できます。

利用可能な VR 機器を持っていれば、それを使ってあなたのシーンを試す良いタイミングです。

**メモ:** Github で確認することもできます。

思ったより簡単だったでしょう？ A-Frame はウェブ開発者を対象に、簡単に使用できるウェブマークアップと、それがもたらす JavaScript 操作などのあらゆる利点を提供します。簡単に始められるだけでなく、高度なコンセプトや、ブラウザー間の差異などを扱うための強力な API も提供しています。対応する VR 機器の数と同じように、コミュニティも増えてきており、このようなフレームワークの実験を始めるには絶好の機会です。

関連情報
----

* A-Frame ウェブサイト
* Introducing A-Frame 0.1.0 article
* Made with A-Frame Tumblr
* A-Frame physics plugin
* A-Frame gamepad controls plugin


XML: Extensible Markup Language

XML: Extensible Markup Language
===============================

The **Extensible Markup Language** is a strict serialisation of the Document Object Model.

XML のイントロダクション概要: この記事は、'eXtensible Markup Language' (XML、拡張可能マークアップ言語) を紹介し、その使い道について XML は HTML に似たマークアップ言語です。 これは Extensible Markup Language の略で、汎用マークアップ言語として W3C が推奨する仕様です。つまり、他のマークアップ言語とは異なり、XML は事前定義されていないため、独自のタグを定義する必要があります。この言語の主な目的は、インターネットなどのさまざまなシステム間でデータを共有することです。

XML のパースとシリアライズ場合によっては、XML のコンテンツを解析して DOM ツリーに変換する必要があるでしょう。または逆に、既存の DOM ツリーを XML にシリアライズすることもあります。この記事では、XML のシリアライズと解析の一般的な作業を容易にするため、ウェブプラットフォームで提供されるオブジェクトに注目します。


イベントリファレンス

イベントリファレンス
==========

イベントは、コードの実行に影響を与える可能性のある「興味深い変化」をコードに通知するために発行されます。これは、マウス操作やウィンドウのサイズ変更などのユーザー操作や、環境の変化 (バッテリー残量の低下や OS のメディアイベントなど)、その他の原因によって発行されます。

それぞれのイベントは、 `Event` インターフェイスに基づいたオブジェクトで表現され、何が起こったかについての情報を提供するために、追加のカスタムフィールドや関数を持つことがあります。各イベントのドキュメントには、関連するイベントインターフェイスへのリンクや、その他の関連情報を含む表が (上部付近に) あります。イベントの種類の一覧は、イベント > Event を基にしたインターフェイスにあります。

この記事では、興味のありそうな*主な*イベントの種類 (アニメーション、クリップボード、ワーカーなど) と、それらの種類のイベントを実装する主なクラスの索引を提供します。最後には、ドキュメント化されたすべてのイベントの一覧を掲載しています。

**メモ:** このページでは、ウェブ上で遭遇する最も一般的なイベントの多くをリストアップしています。ここに掲載されていないイベントを探している場合は、 MDN の他の部分でその名前、トピック領域、関連する仕様書を検索してみてください。

イベント索引
------

| イベントの種類 | 説明 | ドキュメント |
| --- | --- | --- |
| アニメーション | Web Animation API に関するイベント。
アニメーション状態の変化 (例えば、アニメーションの開始または終了) に応答するために使用される。 | アニメーションイベントは `Document`, `Window`, `HTMLElement` で発行される。 |
| 非同期データ読み取り | データの読み取りに関するイベント。 | イベントは `AbortSignal`, `XMLHttpRequest`, `FileReader` で発行される。 |
| クリップボード | Clipboard API に関するイベント。
コンテンツが切り取り、コピー、貼り付けされたときを知るために使用。 | イベントは `Document`, `Element`, `Window` で発行される。 |
| 変換 | 変換、すなわち (通常のキー押下を使用しない) テキストの「間接的な」入力に関するイベント。
例えば、音声入力エンジンからのテキスト入力、他の言語の新しい文字を表現するための特殊な装飾キー入力の組み合わせ。
訳注: 日本語のかな漢字変換も含む。 | イベントは `Element` で発行される。 |
| CSS トランジション | CSS トランジションに関するイベント。
CSS トランジションの開始、終了、キャンセルなどの時の通知イベントを提供する。 | イベントは `Document`, `HTMLElement`, `Window` で発行される。 |
| データベース | データベース操作時、開く、閉じる、トランザクション、エラーなどに関するイベント。 | イベントは `IDBDatabase`, `IDBOpenDBRequest`, `IDBRequest`, `IDBTransaction` で発行される。 |
| DOM 変化 | Document Object Model (DOM) 階層やノードに対する変更に関するイベント。 |

**警告:**
Mutation イベントは非推奨です。
 代わりに Mutation Observer を使用してください。

 |
| ドラッグ＆ドロップ、ホイール | HTML Drag and Drop API に関するイベントやホイールイベント。
ドラッグイベントやホイールイベントは、マウスイベントから派生したものです。これらのイベントは、マウスホイールやドラッグ/ドロップを使用したときに発行されますが、他の適切なハードウェアでも使用されることがあります。 | ドラッグイベントは `Document` で発行される。
ホイールイベントは `Document` (en-US) および `Element` で発行される。 |
| フォーカス | 要素がフォーカスを得たり失ったりすることに関するイベント。 | イベントは `Element`, `Window` で発行される。 |
| フォーム | フォームが構築されたり、リセットされたり、送信されたりすることに関するイベント。 | イベントは `HTMLFormElement` で発行される。 |
| 全画面 | Fullscreen API に関するイベント。
全画面モードとウィンドウモードの間で遷移したとき、この遷移の間でエラーが発生したときの通知に使用。 | イベントは `Document`, `Element` で発行される。 |
| ゲームパッド | Gamepad API に関するイベント。 | イベントは `Window` で発行される。 |
| ジェスチャー | ジェスチャーの実装にはタッチイベントが推奨されます。 | イベントは `Document`, `Element` で発行される。
加えて、いくつもの標準外のジェスチャーイベントが存在する。* 標準外の WebKit 固有のイベントは `Element`: `gesturestart` イベント, `gesturechange` イベント, `gestureend` イベント。
* 標準外の IE 固有のイベントは `Element`: `MSGestureStart`, `MSGestureChange`, `MSGestureEnd`, `MSGestureHold`, `MSGestureTap`。
* 非推奨/標準外の Mozilla のタッチイベントは Touch events (Mozilla experimental) (en-US)
* Firefox アドオンのマウスジェスチャーイベント
 |
| 履歴 | History API に関するイベント。 | イベントは `Window` で発行される。 |
| HTML 要素コンテンツの表示管理 | 表示またはテキスト要素の状態の変更に関するイベント。 | イベントは `HTMLDetailsElement`, `HTMLDialogElement`, `HTMLSlotElement` で発行される。 |
| 入力 | HTML の input 要素、例えば `<input>`, `<select>`, `<textarea>` に関するイベント。 | イベントは `HTMLElement`, `HTMLInputElement` で発行される。 |
| キーボード | キーボードの使用に関するイベント。
キーが上がった、下がった、押された時の通知に使用する。 | イベントは `Document`, `Element` で発行される。 |
| 文書の読み込み/アンロード | 文書の読み込みやアンロードに関するイベント。 | イベントは `Document` や `Window` で発行される。 |
| マニフェスト | プログレッシブウェブアプリのマニフェストのインストールに関するイベント。 | イベントは `Window` で発行される。 |
| メディア | メディアの使用 (Media Capture and Streams API, Web Audio API, Picture-in-Picture API, など) に関するイベント。 | イベントは `ScriptProcessorNode`, `HTMLMediaElement`, `AudioTrackList`, `AudioScheduledSourceNode`, `MediaRecorder`, `MediaStream`, `MediaStreamTrack`, `VideoTrackList`, `HTMLTrackElement`, `OfflineAudioContext`, `TextTrack`, `TextTrackList` (en-US), Element/audio, Element/video で発行される。 |
| メッセージ | ウィンドウが他の閲覧コンテキストからメッセージを受け取ることに関するイベント。 | イベントは `Window` で発行される。 |
| マウス | コンピューターのマウスの使用に関するイベント。
マウスのクリック、ダブルクリック、離す、押すイベント、右クリック、要素内または要素外への移動、テキスト選択など。
ポインターイベントは、ハードウェアに依存しない、マウスイベントの代替となるものです。ドラッグイベント、ホイールイベントは、マウスイベントから派生したものです。 | マウスイベントは `Element` で発行されます。 |
| ネットワーク/接続 | ネットワーク接続が得られた、または失われたことに関するイベント。 | イベントは `Window` で発行される。
イベントは `NetworkInformation` (Network Information API) で発行される。 |
| 支払い | Payment Request API に関するイベント。 | イベントは `PaymentRequest`, `PaymentResponse` (en-US) で発行される。 |
| パフォーマンス | High Resolution Time API, Performance Timeline API, Navigation Timing API, User Timing API (en-US), and Resource Timing API に関するイベント。 | イベントは `Performance` で発行される。 |
| ポインター | Pointer Events API に関するイベント。
マウス、タッチ、ペン/スタイラスなどのポインティングデバイスから、ハードウェアに依存しない通知を提供する。 | イベントは `Document`, `HTMLElement` で発行される。 |
| 印刷 | 印刷に関するイベント。 | イベントは `Window` で発行される。 |
| プロミスの拒否 | JavaScript のプロミスが拒否されたときにグローバルスクリプトコンテキストに送信されるイベント。 | イベントは `Window` で発行される。 |
| ソケット | WebSockets API に関するイベント。 | イベントは `Websocket` で発行される。 |
| SVG | SVG 画像に関するイベント。 | イベントは `SVGElement`, `SVGAnimationElement` (en-US), `SVGGraphicsElement` で発行される。 |
| テキスト選択 | テキストの選択に関するイベント。 | イベントは `Document` で発行 |
| タッチ | Touch Events API に関するイベント。
タッチ反応画面 (すなわち指またはスタイラスを使用したもの) の操作による通知イベントを提供する。 Force Touch API (en-US) に関するものではない。 | イベントは `Document`, `Element` で発行される。 |
| バーチャルリアリティ | WebXR Device API に関するイベント。

**警告:** WebVR API (および関連する `Window` イベント) は非推奨です。
 | イベントは `XRSystem`, `XRSession` (en-US), `XRReferenceSpace` で発行される。 |
| RTC (リアルタイムコミュニケーション) | WebRTC API に関するイベント。 | イベントは `RTCDataChannel`, `RTCDTMFSender` (en-US), `RTCIceTransport` (en-US), `RTCPeerConnection` で発行される。 |
| サーバー送信イベント | server sent events API に関するイベント。 | イベントは `EventSource` で発行される。 |
| 発声 | Web Speech API に関するイベント。 | イベントは `SpeechSynthesisUtterance` で発行される。 |
| ワーカー | Web Workers API, Service Worker API, Broadcast Channel API, Channel Messaging API に関するイベント。
新しいメッセージやメッセージ送信エラーに応答するために使用されます。サービスワーカーは、プッシュ通知、表示された通知をユーザーがクリックしたこと、プッシュ購読が無効になったこと、コンテンツインデックスからアイテムが削除されたことなど、その他のイベントを通知することもできます。 | イベントは `ServiceWorkerGlobalScope`, `DedicatedWorkerGlobalScope`, `SharedWorkerGlobalScope`, `WorkerGlobalScope`, `Worker`, `WorkerGlobalScope`, `BroadcastChannel`, `MessagePort` で発行されます。 |

イベントの一覧
-------

この節では、 MDN に*独自の*リファレンスページを持つイベントをリストアップしています。ここに掲載されていないイベントに興味がある場合は、 MDN の他の部分でその名前、トピック領域、または関連する仕様書を検索してみてください。

* `AbortSignal`
    + abort イベント
* `AudioScheduledSourceNode`
    + ended イベント
* `AudioTrackList`
    + addtrack イベント
    + change イベント
    + removetrack イベント
* `BroadcastChannel`
    + messageerror イベント
    + message イベント
* `DedicatedWorkerGlobalScope`
    + messageerror イベント
    + message イベント
* `Document`
    + animationcancel イベント
    + animationend イベント
    + animationiteration イベント
    + animationstart イベント
    + copy イベント
    + cut イベント
    + DOMContentLoaded イベント
    + dragend イベント
    + dragenter イベント
    + dragleave イベント
    + dragover イベント
    + dragstart イベント
    + drag イベント
    + drop イベント
    + fullscreenchange イベント
    + fullscreenerror イベント
    + gotpointercapture イベント
    + keydown イベント
    + keypress イベント (en-US)
    + keyup イベント
    + lostpointercapture イベント
    + paste イベント
    + pointercancel イベント
    + pointerdown イベント
    + pointerenter イベント
    + pointerleave イベント
    + pointerlockchange イベント
    + pointerlockerror イベント
    + pointermove イベント
    + pointerout イベント
    + pointerover イベント
    + pointerup イベント
    + readystatechange イベント
    + scroll イベント
    + selectionchange イベント
    + selectstart イベント
    + touchcancel イベント
    + touchend イベント
    + touchmove イベント
    + touchstart イベント
    + transitioncancel イベント
    + transitionend イベント
    + transitionrun イベント
    + transitionstart イベント
    + visibilitychange イベント
    + wheel イベント (en-US)
* `Element`
    + afterscriptexecute イベント
    + auxclick イベント
    + beforescriptexecute イベント
    + blur イベント
    + click イベント
    + compositionend イベント
    + compositionstart イベント
    + compositionupdate イベント
    + contextmenu イベント
    + copy イベント
    + cut イベント
    + dblclick イベント
    + DOMActivate イベント
    + DOMMouseScroll イベント
    + error イベント
    + focusin イベント
    + focusout イベント
    + focus イベント
    + fullscreenchange イベント
    + fullscreenerror イベント
    + gesturechange イベント
    + gestureend イベント
    + gesturestart イベント
    + keydown イベント
    + keypress イベント
    + keyup イベント
    + mousedown イベント
    + mouseenter イベント
    + mouseleave イベント
    + mousemove イベント
    + mouseout イベント
    + mouseover イベント
    + mouseup イベント
    + mousewheel イベント
    + msContentZoom イベント
    + MSGestureChange イベント
    + MSGestureEnd イベント
    + MSGestureHold イベント
    + MSGestureStart イベント
    + MSGestureTap イベント
    + MSInertiaStart イベント
    + MSManipulationStateChanged イベント
    + paste イベント
    + scroll イベント
    + select イベント
    + show イベント
    + touchcancel イベント
    + touchend イベント
    + touchmove イベント
    + touchstart イベント
    + webkitmouseforcechanged イベント
    + webkitmouseforcedown イベント
    + webkitmouseforceup イベント
    + webkitmouseforcewillbegin イベント
    + wheel イベント
* `EventSource`
    + error イベント
    + message イベント
    + open イベント
* `FileReader`
    + abort イベント
    + error イベント
    + loadend イベント
    + loadstart イベント
    + load イベント
    + progress イベント
* `HTMLCanvasElement`
    + webglcontextcreationerror イベント
    + webglcontextlost イベント
    + webglcontextrestored イベント
* `HTMLDetailsElement`
    + toggle イベント
* `HTMLDialogElement`
    + cancel イベント
    + close イベント
* `HTMLElement`
    + animationcancel イベント
    + animationend イベント
    + animationiteration イベント
    + animationstart イベント
    + beforeinput イベント
    + change イベント
    + gotpointercapture イベント
    + input イベント
    + lostpointercapture イベント
    + pointercancel イベント
    + pointerdown イベント
    + pointerenter イベント
    + pointerleave イベント
    + pointermove イベント
    + pointerout イベント
    + pointerover イベント
    + pointerup イベント
    + transitioncancel イベント
    + transitionend イベント
    + transitionrun イベント
    + transitionstart イベント
* `HTMLFormElement`
    + formdata イベント
    + reset イベント
    + submit イベント
* `HTMLInputElement`
    + invalid イベント
    + search イベント
* `HTMLMediaElement`
    + abort イベント
    + canplaythrough イベント
    + canplay イベント
    + durationchange イベント
    + emptied イベント
    + ended イベント
    + error イベント
    + loadeddata イベント
    + loadedmetadata イベント
    + loadstart イベント
    + pause イベント
    + playing イベント
    + play イベント
    + progress イベント
    + ratechange イベント
    + seeked イベント
    + seeking イベント
    + stalled イベント
    + suspend イベント
    + timeupdate イベント
    + volumechange イベント
    + waiting イベント
* `HTMLSlotElement`
    + slotchange イベント
* `HTMLTrackElement`
    + cuechange イベント
* `HTMLVideoElement`
    + enterpictureinpicture イベント
    + leavepictureinpicture イベント
* `IDBDatabase`
    + abort イベント (en-US)
    + close イベント
    + error イベント (en-US)
    + versionchange イベント
* `IDBOpenDBRequest`
    + blocked イベント
    + upgradeneeded イベント
* `IDBRequest`
    + error イベント
    + success イベント
* `IDBTransaction`
    + abort イベント
    + complete イベント
    + error イベント
* `MediaDevices`
    + devicechange イベント
* `MediaRecorder`
    + error イベント
* `MediaStream`
    + addtrack イベント
    + removetrack イベント
* `MediaStreamTrack`
    + ended イベント
    + mute イベント
    + unmute イベント
* `MessagePort`
    + messageerror イベント
    + message イベント
* `OfflineAudioContext`
    + complete イベント
* `PaymentRequest`
    + merchantvalidation イベント
    + paymentmethodchange イベント
    + shippingaddresschange イベント
    + shippingoptionchange イベント
* `PaymentResponse` (en-US)
    + payerdetailchange イベント (en-US)
* `Performance`
    + resourcetimingbufferfull イベント
* `PictureInPictureWindow`
    + resize イベント
* `RTCDataChannel`
    + bufferedamountlow イベント (en-US)
    + close イベント (en-US)
    + closing イベント (en-US)
    + error イベント (en-US)
    + message イベント (en-US)
    + open イベント (en-US)
* `RTCDtlsTransport` (en-US)
    + error イベント (en-US)
* `RTCDTMFSender` (en-US)
    + tonechange イベント (en-US)
* `RTCIceTransport` (en-US)
    + gatheringstatechange イベント (en-US)
    + selectedcandidatepairchange イベント (en-US)
    + statechange イベント (en-US)
* `RTCPeerConnection`
    + addstream イベント (en-US)
    + connectionstatechange イベント (en-US)
    + datachannel イベント (en-US)
    + icecandidateerror イベント (en-US)
    + icecandidate イベント (en-US)
    + iceconnectionstatechange イベント (en-US)
    + icegatheringstatechange イベント (en-US)
    + negotiationneeded イベント (en-US)
    + removestream イベント (en-US)
    + signalingstatechange イベント (en-US)
    + track イベント (en-US)
* `ScriptProcessorNode`
    + audioprocess イベント
* `ServiceWorkerContainer`
    + message イベント
* `ServiceWorkerGlobalScope`
    + activate イベント
    + contentdelete イベント
    + install イベント
    + message イベント
    + notificationclick イベント
    + pushsubscriptionchange イベント
    + push イベント
* `SharedWorkerGlobalScope`
    + connect イベント
* `SpeechRecognition`
    + audioend イベント
    + audiostart イベント
    + end イベント
    + error イベント
    + nomatch イベント
    + result イベント
    + soundend イベント
    + soundstart イベント
    + speechend イベント
    + speechstart イベント
    + start イベント
* `SpeechSynthesis`
    + voiceschanged イベント (en-US)
* `SpeechSynthesisUtterance`
    + boundary イベント
    + end イベント
    + error イベント
    + mark イベント
    + pause イベント
    + resume イベント
    + start イベント
* `SVGAnimationElement` (en-US)
    + beginEvent イベント (en-US)
    + endEvent イベント (en-US)
    + repeatEvent イベント (en-US)
* `SVGElement`
    + abort イベント
    + error イベント (en-US)
    + load イベント (en-US)
    + resize イベント
    + scroll イベント
    + unload イベント
* `SVGGraphicsElement`
    + copy イベント (en-US)
    + cut イベント (en-US)
    + paste イベント (en-US)
* `TextTrack`
    + cuechange イベント
* `TextTrackList` (en-US)
    + addtrack イベント (en-US)
    + change イベント (en-US)
    + removeTrack イベント (en-US)
* `VideoTrackList`
    + addtrack イベント
    + change イベント
    + removetrack イベント
* `VisualViewport` (en-US)
    + resize イベント (en-US)
    + scroll イベント (en-US)
* `WebSocket`
    + close イベント
    + error イベント
    + message イベント
    + open イベント
* `Window`
    + afterprint イベント
    + animationcancel イベント
    + animationend イベント
    + animationiteration イベント
    + animationstart イベント
    + appinstalled イベント
    + beforeprint イベント
    + beforeunload イベント
    + blur イベント
    + copy イベント
    + cut イベント
    + devicemotion イベント
    + deviceorientation イベント
    + DOMContentLoaded イベント
    + error イベント
    + focus イベント
    + gamepadconnected イベント
    + gamepaddisconnected イベント
    + hashchange イベント
    + languagechange イベント
    + load イベント
    + messageerror イベント
    + message イベント
    + offline イベント
    + online イベント
    + orientationchange イベント
    + pagehide イベント
    + pageshow イベント
    + paste イベント
    + popstate イベント
    + rejectionhandled イベント
    + resize イベント
    + storage イベント
    + transitioncancel イベント
    + transitionend イベント
    + transitionrun イベント
    + transitionstart イベント
    + unhandledrejection イベント
    + unload イベント
    + vrdisplayactivate イベント
    + vrdisplayblur イベント
    + vrdisplayconnect イベント
    + vrdisplaydeactivate イベント
    + vrdisplaydisconnect イベント
    + vrdisplayfocus イベント
    + vrdisplaypointerrestricted イベント
    + vrdisplaypointerunrestricted イベント
    + vrdisplaypresentchange イベント
* `Worker`
    + messageerror イベント
    + message イベント
* `WorkerGlobalScope`
    + languagechange イベント
* `XMLHttpRequest`
    + abort イベント
    + error イベント
    + loadend イベント
    + loadstart イベント
    + load イベント
    + progress イベント
    + timeout イベント
* `XRReferenceSpace`
    + reset イベント
* `XRSession` (en-US)
    + end イベント (en-US)
    + inputsourceschange イベント (en-US)
    + selectend イベント (en-US)
    + selectstart イベント (en-US)
    + select イベント (en-US)
    + squeezeend イベント (en-US)
    + squeezestart イベント (en-US)
    + squeeze イベント (en-US)
    + visibilitychange イベント (en-US)
* `XRSystem`
    + devicechange イベント (en-US)
仕様書
---

| Specification |
| --- |
| HTML Standard # events-2 |


開発者ガイド

開発者ガイド
======

**これらの記事は、特定の技術や API を利用するための how-to 情報を提供します。**

HTML 学習エリア

**HTML** (ハイパーテキスト・マークアップ・ランゲージ／Hypertext Markup Language) はほぼすべてのウェブコンテンツの中心となる言語です。ブラウザー画面上で目にする大半は、基本的に HTML を用いて記述されています。

CSS 学習エリア

CSS (Cascading Style Sheets) とは HTML 内に書かれた文書の見た目を記述するスタイルシート言語です。

音声と動画の配信

ウェブ上で音声や動画を届ける手段には、「静的な」データからアダプティブライブストリームに至るまでたくさんのものものがあります。この記事は、ウェブベースのメディアを伝送する様々な仕組みや一般的なブラウザーとの互換性について学ぶ最初のステップとして作られたものです。

音声と動画の加工

様々な技術を組み合わせて新たな形を作ることができるのがウェブの美しいところです。ブラウザーには音声や動画に対する諸々の機能が組み込まれていますから、`<canvas>`や WebGL、Web Audio API といった技術を使い、直接的に音声や動画を編集することができます。例えば、エコーや圧縮効果を音声に加えたり、白黒やセピアのフィルターを動画に加えたりできます。この記事では、何をすべきかを説明するリファレンスを提供しています。

イベント開発者ガイド (en-US)

イベントは、ウェブ上での処理中に起こる様々な出来事の非同期処理のためのデザインパターンや、様々なタイプの大量の出来事の名付け・特徴化・利用のために必要です。

AJAX

**Asynchronous JavaScript + XML (AJAX)** は既存の技術同士を組み合わせた新しいアプローチで、ウェブアプリケーションはより速く、表示されているページ全てを再読み込みすることなく、ユーザーインターフェイスを逐次更新できるようになります。そして、アプリケーションにより早い表示、ユーザー操作へのより良い応答性をもたらします。

ウェブのグラフィック

現代のウェブサイトとアプリケーションは、グラフィックスによる表現を必要としています。

Web API ガイド

すべての Web API のリストとそれが何をするのか。

JavaScript

JavaScript は、ウェブアプリケーションの作成に使われる強力なスクリプト言語です。

Localizations and character encodings

ブラウザー内部では文章は Unicode 形式で処理されます。ところが、ネットワークを介して文章をブラウザーに送る過程では、文字をバイトで表現する (文字エンコード) ことが行われています。HTML の仕様では (すべての Unicode 文字を表現できる) UTF-8 エンコーディングを利用することが推奨されており、如何なるエンコーディングが使われていようと、ウェブコンテンツはそのエンコーディングを宣言する必要があります。

モバイルウェブ開発

この記事では、モバイル端末でもしっかりと動作するウェブサイトを設計するのに必要な主な技術の一部についての概要を示しています。Firefox for Android もご覧ください。

プログレッシブウェブアプリ

PWA はどの環境でも動作し、ネイティブアプリケーションと同等のユーザー体験を得られるようないくつかの機能を提供します。このガイド集には PWA について知っておくべき全てのことが書かれています。

最適化とパフォーマンス

現代的なウェブアプリやウェブサイトを構築する時に重要なのは、コンテンツをすばやく効率的に作ることです。強力なデスクトップシステムでも、比較的スペックの低い小型端末でも十分に動作するような作り方を学びましょう。

XML のパースとシリアライズ

ウェブプラットフォーム上での XML のパースやシリアライズには複数の方法があり、それぞれ長所と短所があります。

Web Open Font Format (WOFF)

WOFF (Web Open Font Format) はウェブ上で誰もが使えるフリーのフォントファイルフォーマットです。

Unicode Bidirectional Text Algorithm (BiDi)

Unicode® BiDi アルゴリズムは Unicode 文章の標準の一つで、ブラウザーが Unicode の文章をレンダリングするにあたってどのように文字を整理すべきかを定めています。このガイドではこのアルゴリズムの概要を説明し、また、特に適切に多言語対応させたい時に、どういう風に制作コンテンツに適用すべきかを説明しています。

FormData オブジェクトの使用

`FormData` オブジェクトは、`XMLHttpRequest` を使用して送信するためのキーと値のペアのセットを収集可能にします。本来はフォームデータの送信に使用することを想定していましたが、キーのついたデータを伝送するためにフォームとは独立して使用することもできます。伝送されるデータは、フォームのエンコードタイプが "multipart/form-data" に設定されている場合に、`submit()` メソッドで送信する際に使用するデータと同じ形式です。

ユーザ入力とコントロール

現代的なウェブでのユーザー入力は、単純なマウスとキーボードだけでは語れません。例えばタッチスクリーンなどを考慮する必要があります。この記事では、オープンなウェブアプリがユーザーの入力に対応したり操作を設計したりするにあたっての推奨事項を、よくある質問や、現実的な例、背景にある技術についてのより詳しく知りたい人向けの情報とともに紹介しています。

用語集

ウェブやインターネットに関連する多数の専門用語の定義。

関連情報
----

* ウェブ技術リファレンス


OpenSearch 記述形式

OpenSearch 記述形式
===============

**OpenSearch 記述形式** は、ウェブサイトが自分自身のために検索エンジンを記述し、ブラウザーやその他のクライアントアプリケーションがその検索エンジンを使用できるようにするものです。 OpenSearch は、(少なくとも) Firefox、Edge、Internet Explorer、Safari、Chrome が対応しています。(他のブラウザーのドキュメントへのリンクは参考資料をご覧ください。)

また、Firefox では、検索候補や `<SearchForm>` 要素など、OpenSearch 規格にない追加機能にも対応しています。この記事では、これらの Firefox の追加機能に対応した OpenSearch 互換の検索プラグインの作成に焦点を当てます。

OpenSearch 記述ファイルは、検索プラグインの自動検出で説明されているように通知することができ、ウェブページからの検索エンジンの追加で説明されているようにプログラムでインストールすることができます。

OpenSearch 記述ファイル
-----------------

検索エンジンを記述する XML ファイルはとてもシンプルで、以下の基本的なテンプレートに従います。書いている検索エンジンに応じて、 *[角括弧]* で囲まれた部分をカスタマイズする必要があります。

```xml
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
 xmlns:moz="http://www.mozilla.org/2006/browser/search/">
  <ShortName>[SNK]</ShortName>
  <Description>[Search engine full name and summary]</Description>
  <InputEncoding>[UTF-8]</InputEncoding>
  <Image width="16" height="16" type="image/x-icon">[https://example.com/favicon.ico]</Image>
  <Url type="text/html" template="[searchURL]"/>
  <Url type="application/x-suggestions+json" template="[suggestionURL]"/>
  <moz:SearchForm>[https://example.com/search]</moz:SearchForm>
</OpenSearchDescription>
```

ShortName

検索エンジンの短い名前です。 HTML やその他のマークアップを使用しない、 **16 文字以下**のプレーンテキストでなければなりません。

Description

検索エンジンの簡単な説明です。 **1024 文字以下**のプレーンテキストで、 HTML やその他のマークアップは使用しないでください。

InputEncoding

検索エンジンへ送信する入力欄に使用する文字エンコーディングです。

Image

検索エンジンのアイコンの URI です。可能であれば、 16×16 の画像を `image/x-icon` 形式で (`/favicon.ico` など)、 および 64×64 の画像を `image/jpeg` または `image/png` 形式で含めてください。

この URI には `data:` URI スキームを使用することもできます。 (`data:` URI はアイコンファイルから The `data:` URI kitchen で生成することができます。)

```xml
<Image height="16" width="16" type="image/x-icon">https://example.com/favicon.ico</Image>
  <!-- or -->
<Image height="16" width="16">data:image/x-icon;base64,AAABAAEAEBAAA … DAAA=</Image>
```

Firefox はアイコンを base64 `data:` URI としてキャッシュします (検索プラグインはプロファイルの `searchplugins/` フォルダーに格納されます)。これを行う際に、 `http:` および `https:` URL は `data:` URI に変換されます。

**メモ:** リモートからアイコンを読み込む際 (すなわち、 `data:` URI とは対照的に `https://` URI からの場合)、 Firefox は**10 KB**より大きなアイコンを拒否します。

![Firefox の検索ボックスに表示される Google の検索候補](/ja/docs/Web/OpenSearch/searchsuggestionsample.png)

Url

 検索に使う 1 つまたは複数の URL を記述します。 `template` 属性は検索クエリーのベース URL を指定します。
 Firefox は 3 種類の URL に対応しています。

* `type="text/html"` は実際の検索結果そのものの URL を指定します。
* `type="application/x-suggestions+json"` は検索候補を読み取るための URL を指定します。 Firefox 63 以降では、 `type="application/json"` をこの別名として受け付けます。
* `type="application/x-moz-keywordsearch"` はロケーションバーに入力されるキーワード検索の際に使用する URL を指定します。これは Firefox のみが対応しています。

これらの種類の URL では、ユーザーが検索バーやロケーションバーに入力した検索語に置き換えらえる `{searchTerms}` を使うことができます。対応している他の動的な検索引数は OpenSearch 1.1 引数に記述されています。

検索候補については、 `application/x-suggestions+json` URL テンプレートを使用して候補リストを JSON 形式で読み取ります。サーバー上で検索候補の対応を実装する方法の詳細は 検索プラグインでの検索候補の対応を参照してください。

Param

検索クエリと一緒に渡さなければならない引数を、キー／値のペアで指定します。値を指定する際に、 `{searchTerms}` を使用すると、ユーザーが検索バーに入力した検索語を挿入することができます。

moz:SearchForm

プラグインのサイトの検索ページを開くための URL。これは Firefox にユーザーが直接ウェブサイトを訪れる方法を提供します。

**メモ:** この要素は Firefox 特有で OpenSearch 仕様の一部ではないため、この要素に対応していない他のユーザーエージェントが安全に無視できるようにするために、上の例では "`moz:`" XML 名前空間接頭辞を使っています。

検索プラグインの自動検出
------------

検索プラグインを提供しているウェブサイトは、 Firefox ユーザがプラグインを簡単にダウンロードしてインストールできるように通知することができます。

自動検出に対応するには、それぞれのプラグインの `<link>` 要素をウェブページの `<head>` セクションにします。

```html
<link
 rel="search"
 type="application/opensearchdescription+xml"
 title="searchTitle"
 href="pluginURL" />
```

太字の項目を以下の説明のように置き換えてください。

searchTitle

"MDC を検索" や 'Yahoo! 検索" のような実行する検索の名前です。この値は、プラグインファイルの `<ShortName>` と一致させる必要があります。

pluginURL

ブラウザーがダウンロードできる XML 検索プラグインの URL です。

もしサイトが複数の検索プラグインを提供しているなら、すべてを自動検出させることができます。例を示します。

```html
<link
 rel="search"
 type="application/opensearchdescription+xml"
 title="MySite: 著者"
 href="http://example.com/mysiteauthor.xml" />

<link
 rel="search"
 type="application/opensearchdescription+xml"
 title="MySite: タイトル"
 href="http://example.com/mysitetitle.xml" />
```

この方法で、著者とタイトルによる検索を行うプラグインをサイトで提供することができます。

**メモ:** Firefox では、検索プラグインで提供されたアイコンがある場合は、検索ボックスのアイコンが変化して示します。 (画像を参照。緑のプラスの記号です。) そのため、ユーザーのインターフェイスで検索ボックスが非表示になっている場合、これを示すことは*ありません*。*一般に、この動作はブラウザーによって異なります*。

OpenSearch プラグインの自動更新の対応
------------------------

OpenSearch プラグインは自動的に更新することができます。 `Url` 拡張要素を `type="application/opensearchdescription+xml"` および `rel="self"` を付けて設置してください。 `template` 属性には、自動的に更新する OpenSearch 文書の URL を設定してください。

例:

```xml
<Url type="application/opensearchdescription+xml"
 rel="self"
 template="https://example.com/mysearchdescription.xml" />
```

**メモ:** 現時点で、 addons.mozilla.org (AMO) は OpenSearch プラグインの自動更新に対応していません。自分の検索プラグインを AMO に登録したい場合は、送信前に自動更新機能を削除してください。

トラブルシューティングのヒント
---------------

検索プラグインの XML に問題があると、検出されたプラグインをに追加する際にエラーが発生します。エラーメッセージが参考にならない場合、以下のヒントが問題を探す手助けになる可能性があります。

* サーバーは OpenSearch プラグインを、 `Content-Type: application/opensearchdescription+xml` を使用して提供するべきです。
* 検索プラグインの XML が整形式であることを確認してください。ファイルを直接 Firefox に読み込むことでチェックすることができます。アンパーサンド (&) を `template` の URL の中では `&` にエスケープしなければなりません。タグは最後にスラッシュをまたは対応する終了タグで閉じる必要があります。
* `xmlns` 属性は重要です。 — これがないと、 "Firefox could not download the search plugin" というエラーメッセージが出る可能性があります。
* `text/html` の URL を含める**必要があります**。 Atom または RSS の URL 型のみを含む検索プラグインは (有効なものですが、 Firefox は対応していません)、 "could not download the search plugin" エラーを引き起こします。
* リモートで取得されるファビコンは 10KB 以上でなければなりません (Firefox バグ 361923 を参照)。

さらに、検索プラグインサービスはプラグイン開発者に役立つであろうログの仕組みを提供します。 `about:config` を使い '`browser.search.log`' を `true` に設定してください。検索プラグインが追加されるとログ情報が Firefox のエラーコンソール (ツール ➤ エラーコンソール)に表示されます。

参考資料
----

* OpenSearch ドキュメント
* Safari 8.0 リリースノート: Quick Website Search
* Microsoft Edge 開発ガイド: Search provider discovery
* The Chromium Projects: Tab to Search
* imdb.com には 動作する `osd.xml` があります
* OpenSearch Plugin Generator
* Ready2Search - OpenSearch プラグインの作成 (日本語可, GET メソッドのみ)。 Customized Search through Ready2Search


HTML: ハイパーテキストマークアップ言語

HTML: ハイパーテキストマークアップ言語
======================

**HTML** (HyperText Markup Language) はウェブのもっとも基本的な構成要素です。 HTML はウェブページの基本レイアウトに従ってウェブページの*コンテンツ*を記述し定義するものです。 HTML に隣接する他の技術としては、ウェブページの表示や表現を記述するもの (CSS) または機能や振る舞いを記述するもの (JavaScript) があります。

「ハイパーテキスト」はウェブページから別なページに、ウェブサイト内でもウェブサイト間でも、接続するリンクを示します。リンクはウェブの基礎的な特徴です。コンテンツをインターネットにアップロードして他の人々が作成したページにリンクすれば、 World Wide Web の活発な参加者になれます。

HTML ではウェブブラウザーのテキスト、画像、その他のコンテンツを記述するために「マークアップ」を使用します。 HTML のマークアップには、 `<head>`, `<title>`, `<body>`, `<header>`, `<footer>`, `<article>`, `<section>`, `<p>`, `<div>`, `<span>`, `<img>`, `<aside>`, `<audio>`, `<canvas>`, `<datalist>`, `<details>`, `<embed>`, `<nav>`, `<search>`, `<output>`, `<progress>`, `<video>`, `<ul>`, `<ol>`, `<li>` その他のたくさんの特殊な「要素」を用います。

HTML 要素は文書中で、 "`<`" および "`>`" で囲まれた要素名で構成される「タグ」によって区別されます。タグ内の要素名は、大文字と小文字の区別がありません。つまり、大文字でも、小文字でも、混在して書いても構いません。例えば、 `<title>` タグは `<Title>` や `<TITLE>` やその他の方法で書くことができます。ただし、タグを小文字で書くのが慣習となっており、推奨されています。

以下の記事が HTML についてもっと学ぶのに役立ちます。

中心的なリソース
--------

HTML 入門

ウェブ開発が初めてであれば、 HTML とは何か、 HTML の使用方法を説明するHTML の基本をご覧ください。

HTML チュートリアル

チュートリアルや例を含む HTML の使用方法に関する記事は、HTML 学習エリアを確認してください。

HTML リファレンス

広範な HTML リファレンスの章で、 HTML のすべての要素と属性についての詳細が分かります。

#### フロントエンドのウェブ開発者を目指している方へ

ゴールに向かって頑張るために必要な情報をまとめたコースをご用意しました。

**始めましょう**

初心者向けチュートリアル
------------

HTML 学習エリアは HTML を基礎から学ぶための複数のモジュールを中心としています。――前提知識は必要ありません。

HTML 概論

このモジュールでは、 HTML を文章に適用する方法、ハイパーリンクを作成する方法、 HTML を使用してウェブページを構築する方法など、重要な概念と構文に慣れていく段階を設定します。

マルチメディアとその埋め込み方

このモジュールでは、ウェブページにマルチメディアを埋め込むための HTML の使い方を探ります。画像を入れるための様々な方法、映像、音声、他のウェブページ全体を含める場合も含みます。

HTML テーブル

ウェブページ上で表形式のデータを分かりやすく使いやすい方法で表現するのは難しいことです。このモジュールでは、基本的なテーブルのマークアップと、キャプションやサマリーの追加などのより複雑な機能を扱います。

HTML フォーム

フォームはウェブで非常に重要な部分です。――これはウェブサイトとのやり取り（登録やログイン、フィードバックの送信、商品の購入など）に必要な多くの機能を提供します。このモジュールでは、フォームのクライアント側／フロントエンド部分の作成から始めます。

よくある問題解決に HTML を使う

HTML を使用してウェブページを作成する際に、とてもよくある問題（タイトルの扱い、画像や動画の追加、コンテンツの強調、基本フォームの作成など）を解決する方法を説明する記事の章へのリンクを紹介します。

高度なトピック
-------

CORS を利用した画像

`crossorigin` 属性と CORS ヘッダーを組み合わせることで、 `<img>` 要素で定義された画像を異なるドメインから読み出し、 それを `<canvas>` 要素の中で同じドメインから読み出したかのように扱うことができます。

CORS 設定属性

CORS をサポートするいくつかの HTML 要素（`<img>` や `<video>` など）は `crossorigin` 属性（`crossOrigin` プロパティ）を持っており、要素が取得したデータに関する CORS リクエストを設定することができます。

rel="preload" によるコンテンツの先読み

HTML の `<head>` 要素内において、 `<link>` 要素で `rel` 属性に `preload` を指定することで、読み込み後すぐにページに必要なリソース、つまりページ読み込みの過程の初期の、ブラウザーの主なレンダリング機構が起動する前に、先読みを始めたいものを指定する宣言的なフェッチリクエストを記述することができます。これにより、ページの最初のレンダリングがブロックされにくくなり、パフォーマンスが向上します。この記事では `preload` がどのように動作するのかについての基本的なガイドを提供します。

リファレンス
------

HTML リファレンス

HTML は**要素**の集まりで、それぞれの要素がいくつかの**属性**で修飾される場合があります。 HTML 文書は互いに**リンク**で接続されます。

HTML 要素リファレンス

すべての HTML 要素の一覧を閲覧します。

HTML 属性リファレンス

HTML の要素には**属性**があります。これは要素を調整したり、さまざまな方法で振る舞いを調整したりするための付加的な値です。

グローバル属性

グローバル属性は、*標準仕様で規定されていないものを含む*すべての HTML 要素に指定できるものです。つまり、あらゆる標準外の要素も、それを使用することで文書が HTML5 に準拠しなくなるとしても、グローバル属性を受け入れなければならないということです。

インラインレベル要素とブロックレベル要素

通常、 HTML の要素は「インラインレベル」要素または「ブロックレベル」要素のどちらかです。インラインレベル要素は、要素を定義するタグによって指定された範囲のみを占有します。ブロックレベル要素は親要素（コンテナー）の範囲全体を占有し、それによって「ブロックボックス」を作成します。

ウェブにおけるメディア種別と形式のガイド

`<audio>` および `<video>` 要素では、外部のソフトウェアの支援を必要とせずにコンテンツの中でネイティブに音声や動画を再生できます。

HTML コンテンツカテゴリー

HTML は数種類のコンテンツで構成されています。それぞれのコンテンツは特定のコンテキストで使用することができ、それ以外のコンテキストでは使用できません。同様に、それぞれのコンテキストには、格納することができる他のコンテンツカテゴリーと、その中で使用できる要素、または使用できない要素の集合があります。これは、これらのカテゴリーへのガイドです

後方互換モードと標準準拠モード

後方互換モードと標準準拠モードの歴史的な情報です。

関連トピック
------

CSS を使って HTML の要素に色をつける

この記事では、 CSS を使用して HTML コンテンツに色をつける方法、 HTML 文書のどの部分に色付けできるかの一覧、使用する CSS プロパティについて説明します。例えば、パレット作成ツールへのリンクなどが含みます。


Web API

Web API
=======

ウェブのコードを書く時は、数多くの Web API が利用できます。以下に、ウェブアプリやサイトを開発する際に利用することができる可能性があるすべてのインターフェイス（オブジェクト型）のリストを挙げます。

Web API は通常 JavaScript とともに使用されますが、常にそうとは限りません。

仕様書
---

利用可能なすべての API の一覧です。

### A

* Audio Output Devices API
Experimental

### B

* Background Fetch API
Experimental
* Background Sync (en-US)
Experimental
* Background Tasks (en-US)
* Badging API
* Barcode Detection API
Experimental
* Battery API
* Beacon
* Bluetooth API
Experimental
* Broadcast Channel API

### C

* CSS Counter Styles (en-US)
* CSS Custom Highlight API (en-US)
* CSS Font Loading API
* CSS Painting API
Experimental
* CSS Properties and Values API
* CSS Typed Object Model API
* CSSOM
* Canvas API
* Channel Messaging API
* Clipboard API
* Compression Streams API
* Console API
* Contact Picker API
Experimental
* Content Index API (en-US)
Experimental
* Cookie Store API
Experimental
* Credential Management API

### D

* DOM
* Device Memory API
* Device Orientation Events
* Document Picture-in-Picture API (en-US)
Experimental

### E

* EditContext API (en-US)
Experimental
* Encoding API
* Encrypted Media Extensions (en-US)
* EyeDropper API
Experimental

### F

* FedCM API (en-US)
Experimental
* Fetch API
* File API
* File System API
* File and Directory Entries API
* Force Touch Events (en-US)
Non-standard
* Fullscreen API

### G

* Gamepad API
* Geolocation API
* Geometry Interfaces

### H

* HTML DOM
* HTML Drag and Drop API
* HTML Sanitizer API
Experimental
* History API
* Houdini API

### I

* Idle Detection API (en-US)
Experimental
* Image Capture API
Experimental
* IndexedDB
* Ink API (en-US)
Experimental
* Input Device Capabilities API
Experimental
* Insertable Streams for MediaStreamTrack API
* Intersection Observer API

### K

* Keyboard API
Experimental

### L

* Launch Handler API (en-US)
Experimental
* Local Font Access API (en-US)
Experimental

### M

* Media Capabilities API (en-US)
* Media Capture and Streams
* Media Session API
* Media Source Extensions
Experimental
* MediaStream Recording

### N

* Navigation API (en-US)
Experimental
* Network Information API
Experimental

### P

* Page Visibility API
* Payment Handler API (en-US)
Experimental
* Payment Request API
* Performance API
* Periodic Background Sync
Experimental
* Permissions API
* Picture-in-Picture API
* Pointer Events
* Pointer Lock API
* Popover API
* Presentation API
Experimental
* Prioritized Task Scheduling API (en-US)
* Push API

### R

* Remote Playback API (en-US)
* Reporting API (en-US)
Experimental
* Resize Observer API

### S

* SVG (en-US)
* Screen Capture API
* Screen Orientation API
* Screen Wake Lock API
* Selection API
* Sensor API
* Server Sent Events
* Service Workers API
* Shared Storage API (en-US)
Experimental
* Speculation Rules API (en-US)
Experimental
* Storage
* Storage Access API
* Streams

### T

* Touch Events
* Trusted Types API (en-US)

### U

* UI Events
* URL API
* URL Pattern API (en-US)
Experimental
* User-Agent Client Hints API
Experimental

### V

* Vibration API
* View Transitions API
Experimental
* VirtualKeyboard API (en-US)
Experimental
* Visual Viewport (en-US)

### W

* Web Animations
* Web Audio API
* Web Authentication API
* Web Components
* Web Crypto API
* Web Locks API
* Web MIDI API
* Web NFC API
Experimental
* Web Notifications
* Web Serial API
Experimental
* Web Share API
* Web Speech API
* Web Storage API
* Web Workers API
* WebCodecs API (en-US)
* WebGL
* WebGPU API
Experimental
* WebHID API
Experimental
* WebOTP API
* WebRTC
* WebTransport API (en-US)
* WebUSB API
Experimental
* WebVR API
Non-standard

非推奨
* WebVTT
* WebXR Device API
Experimental
* Websockets API
* Window Controls Overlay API (en-US)
Experimental
* Window Management API (en-US)
Experimental

### X

* XMLHttpRequest API

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

利用可能なすべてのインターフェイス (すなわちオブジェクトの型) の一覧です。

### A

* `AbortController`
* `AbortSignal`
* `AbsoluteOrientationSensor`
* `AbstractRange`
* `Accelerometer`
Experimental
* `AesCbcParams` (en-US)
* `AesCtrParams` (en-US)
* `AesGcmParams` (en-US)
* `AesKeyGenParams`
* `AmbientLightSensor`
Experimental
* `AnalyserNode`
* `ANGLE_instanced_arrays`
* `Animation`
* `AnimationEffect`
* `AnimationEvent`
* `AnimationPlaybackEvent`
* `AnimationTimeline` (en-US)
* `Attr`
* `AudioBuffer`
* `AudioBufferSourceNode`
* `AudioContext`
* `AudioData` (en-US)
Experimental
* `AudioDecoder` (en-US)
Experimental
* `AudioDestinationNode`
* `AudioEncoder` (en-US)
Experimental
* `AudioListener`
* `AudioNode`
* `AudioParam`
* `AudioParamDescriptor` (en-US)
* `AudioParamMap`
* `AudioProcessingEvent`
非推奨
* `AudioScheduledSourceNode`
* `AudioSinkInfo`
Experimental
* `AudioTrack`
* `AudioTrackList`
* `AudioWorklet`
* `AudioWorkletGlobalScope`
* `AudioWorkletNode`
* `AudioWorkletProcessor`
* `AuthenticatorAssertionResponse`
* `AuthenticatorAttestationResponse`
* `AuthenticatorResponse`

### B

* `BackgroundFetchEvent`
Experimental
* `BackgroundFetchManager`
Experimental
* `BackgroundFetchRecord`
Experimental
* `BackgroundFetchRegistration`
Experimental
* `BackgroundFetchUpdateUIEvent`
Experimental
* `BarcodeDetector`
Experimental
* `BarProp`
* `BaseAudioContext`
* `BatteryManager` (en-US)
* `BeforeInstallPromptEvent` (en-US)
Experimental

Non-standard
* `BeforeUnloadEvent`
* `BiquadFilterNode` (en-US)
* `Blob`
* `BlobEvent`
* `Bluetooth`
Experimental
* `BluetoothCharacteristicProperties`
Experimental
* `BluetoothDevice`
Experimental
* `BluetoothRemoteGATTCharacteristic`
Experimental
* `BluetoothRemoteGATTDescriptor`
Experimental
* `BluetoothRemoteGATTServer`
Experimental
* `BluetoothRemoteGATTService`
Experimental
* `BluetoothUUID`
* `BroadcastChannel`
* `ByteLengthQueuingStrategy`

### C

* `Cache`
* `CacheStorage`
* `CanMakePaymentEvent` (en-US)
Experimental
* `CanvasCaptureMediaStreamTrack` (en-US)
* `CanvasGradient`
* `CanvasPattern`
* `CanvasRenderingContext2D`
* `CaptureController` (en-US)
Experimental
* `CaretPosition`
Experimental
* `CDATASection`
* `ChannelMergerNode`
* `ChannelSplitterNode`
* `CharacterBoundsUpdateEvent` (en-US)
Experimental
* `CharacterData`
* `Client`
* `Clients`
* `Clipboard`
* `ClipboardEvent`
* `ClipboardItem`
* `CloseEvent`
* `Comment`
* `CompositionEvent`
* `CompressionStream`
* `console`
* `ConstantSourceNode`
* `ContactAddress`
Experimental
* `ContactsManager`
Experimental
* `ContentIndex` (en-US)
Experimental
* `ContentIndexEvent` (en-US)
Experimental
* `ContentVisibilityAutoStateChangeEvent` (en-US)
Experimental
* `ConvolverNode`
* `CookieChangeEvent`
Experimental
* `CookieStore`
Experimental
* `CookieStoreManager`
Experimental
* `CountQueuingStrategy`
* `Credential`
* `CredentialsContainer` (en-US)
* `Crypto`
* `CryptoKey`
* `CryptoKeyPair`
* `CSPViolationReportBody` (en-US)
* `CSS`
* `CSSAnimation` (en-US)
* `CSSConditionRule`
* `CSSContainerRule` (en-US)
* `CSSCounterStyleRule` (en-US)
* `CSSFontFaceRule`
* `CSSFontFeatureValuesRule` (en-US)
* `CSSFontPaletteValuesRule` (en-US)
* `CSSGroupingRule`
* `CSSImageValue`
* `CSSImportRule`
* `CSSKeyframeRule`
* `CSSKeyframesRule`
* `CSSKeywordValue`
* `CSSLayerBlockRule`
* `CSSLayerStatementRule`
* `CSSMathInvert` (en-US)
* `CSSMathMax` (en-US)
* `CSSMathMin` (en-US)
* `CSSMathNegate` (en-US)
* `CSSMathProduct` (en-US)
* `CSSMathSum` (en-US)
* `CSSMathValue` (en-US)
* `CSSMatrixComponent` (en-US)
* `CSSMediaRule`
* `CSSNamespaceRule`
* `CSSNumericArray` (en-US)
* `CSSNumericValue`
* `CSSPageRule`
* `CSSPerspective` (en-US)
* `CSSPositionValue` (en-US)
Non-standard

非推奨
* `CSSPrimitiveValue` (en-US)
非推奨
* `CSSPropertyRule`
* `CSSPseudoElement`
Experimental
* `CSSRotate` (en-US)
* `CSSRule`
* `CSSRuleList`
* `CSSScale` (en-US)
* `CSSScopeRule` (en-US)
Experimental
* `CSSSkew`
* `CSSSkewX` (en-US)
* `CSSSkewY` (en-US)
* `CSSStartingStyleRule` (en-US)
Experimental
* `CSSStyleDeclaration`
* `CSSStyleRule`
* `CSSStyleSheet`
* `CSSStyleValue`
* `CSSSupportsRule`
* `CSSTransformComponent`
* `CSSTransformValue`
* `CSSTransition` (en-US)
* `CSSTranslate` (en-US)
* `CSSUnitValue` (en-US)
* `CSSUnparsedValue`
* `CSSValue`
非推奨
* `CSSValueList` (en-US)
非推奨
* `CSSVariableReferenceValue`
* `CustomElementRegistry`
* `CustomEvent`
* `CustomStateSet` (en-US)
Experimental

### D

* `DataTransfer`
* `DataTransferItem`
* `DataTransferItemList`
* `DecompressionStream`
* `DedicatedWorkerGlobalScope`
* `DelayNode`
* `DeprecationReportBody` (en-US)
Experimental
* `DeviceMotionEvent`
* `DeviceMotionEventAcceleration`
* `DeviceMotionEventRotationRate`
* `DeviceOrientationEvent`
* `DirectoryEntrySync`
Non-standard

非推奨
* `DirectoryReaderSync` (en-US)
Non-standard

非推奨
* `Document`
* `DocumentFragment`
* `DocumentPictureInPicture` (en-US)
Experimental
* `DocumentPictureInPictureEvent` (en-US)
Experimental
* `DocumentTimeline` (en-US)
* `DocumentType`
* `DOMError`
非推奨
* `DOMException`
* `DOMHighResTimeStamp`
* `DOMImplementation`
* `DOMMatrix` (WebKitCSSMatrix)
* `DOMMatrixReadOnly`
* `DOMParser`
* `DOMPoint`
* `DOMPointReadOnly`
* `DOMQuad`
* `DOMRect`
* `DOMRectReadOnly`
* `DOMStringList`
* `DOMStringMap`
* `DOMTokenList`
* `DragEvent`
* `DynamicsCompressorNode` (en-US)

### E

* `EcdhKeyDeriveParams` (en-US)
* `EcdsaParams` (en-US)
* `EcKeyGenParams`
* `EcKeyImportParams` (en-US)
* `EditContext` (en-US)
Experimental
* `Element`
* `ElementInternals`
* `EncodedAudioChunk` (en-US)
Experimental
* `EncodedVideoChunk` (en-US)
* `ErrorEvent`
* `Event`
* `EventCounts` (en-US)
* `EventSource`
* `EventTarget`
* `ExtendableCookieChangeEvent`
* `ExtendableEvent`
* `ExtendableMessageEvent`
* `EyeDropper`
Experimental

### F

* `FeaturePolicy` (en-US)
Experimental
* `FederatedCredential`
Experimental
* `FetchEvent`
* `File`
* `FileEntrySync` (en-US)
Non-standard

非推奨
* `FileList`
* `FileReader`
* `FileReaderSync`
* `FileSystem`
* `FileSystemDirectoryEntry`
* `FileSystemDirectoryHandle`
* `FileSystemDirectoryReader` (en-US)
* `FileSystemEntry` (en-US)
* `FileSystemFileEntry`
* `FileSystemFileHandle`
* `FileSystemHandle`
* `FileSystemSync`
Non-standard

非推奨
* `FileSystemSyncAccessHandle`
* `FileSystemWritableFileStream`
* `FocusEvent`
* `FontData` (en-US)
Experimental
* `FontFace`
* `FontFaceSet`
* `FontFaceSetLoadEvent`
* `FormData`
* `FormDataEvent`
* `FragmentDirective`
Experimental

### G

* `GainNode`
* `Gamepad`
* `GamepadButton`
* `GamepadEvent`
* `GamepadHapticActuator`
* `GamepadPose` (en-US)
Experimental
* `Geolocation`
* `GeolocationCoordinates`
* `GeolocationPosition`
* `GeolocationPositionError`
* `GestureEvent` (en-US)
Non-standard
* `GPU`
Experimental
* `GPUAdapter`
Experimental
* `GPUAdapterInfo`
Experimental
* `GPUBindGroup` (en-US)
Experimental
* `GPUBindGroupLayout` (en-US)
Experimental
* `GPUBuffer` (en-US)
Experimental
* `GPUCanvasContext` (en-US)
Experimental
* `GPUCommandBuffer` (en-US)
Experimental
* `GPUCommandEncoder` (en-US)
Experimental
* `GPUCompilationInfo` (en-US)
Experimental
* `GPUCompilationMessage` (en-US)
Experimental
* `GPUComputePassEncoder` (en-US)
Experimental
* `GPUComputePipeline` (en-US)
Experimental
* `GPUDevice` (en-US)
Experimental
* `GPUDeviceLostInfo` (en-US)
Experimental
* `GPUError` (en-US)
Experimental
* `GPUExternalTexture` (en-US)
Experimental
* `GPUInternalError` (en-US)
Experimental
* `GPUOutOfMemoryError` (en-US)
Experimental
* `GPUPipelineError` (en-US)
Experimental
* `GPUPipelineLayout` (en-US)
Experimental
* `GPUQuerySet` (en-US)
Experimental
* `GPUQueue` (en-US)
Experimental
* `GPURenderBundle` (en-US)
Experimental
* `GPURenderBundleEncoder` (en-US)
Experimental
* `GPURenderPassEncoder` (en-US)
Experimental
* `GPURenderPipeline` (en-US)
Experimental
* `GPUSampler` (en-US)
Experimental
* `GPUShaderModule` (en-US)
Experimental
* `GPUSupportedFeatures`
Experimental
* `GPUSupportedLimits`
Experimental
* `GPUTexture` (en-US)
Experimental
* `GPUTextureView` (en-US)
Experimental
* `GPUUncapturedErrorEvent` (en-US)
Experimental
* `GPUValidationError` (en-US)
Experimental
* `GravitySensor`
* `Gyroscope`

### H

* `HashChangeEvent`
* `Headers`
* `HID`
Experimental
* `HIDConnectionEvent`
Experimental
* `HIDDevice`
Experimental
* `HIDInputReportEvent`
Experimental
* `Highlight` (en-US)
* `HighlightRegistry` (en-US)
* `History`
* `HkdfParams` (en-US)
* `HmacImportParams` (en-US)
* `HmacKeyGenParams`
* `HMDVRDevice` (en-US)
Non-standard

非推奨
* `HTMLAllCollection` (en-US)
* `HTMLAnchorElement`
* `HTMLAreaElement`
* `HTMLAudioElement`
* `HTMLBaseElement`
* `HTMLBodyElement`
* `HTMLBRElement`
* `HTMLButtonElement`
* `HTMLCanvasElement`
* `HTMLCollection`
* `HTMLDataElement`
* `HTMLDataListElement`
* `HTMLDetailsElement`
* `HTMLDialogElement`
* `HTMLDivElement`
* `HTMLDListElement`
* `HTMLDocument`
* `HTMLElement`
* `HTMLEmbedElement`
* `HTMLFieldSetElement`
* `HTMLFontElement` (en-US)
非推奨
* `HTMLFormControlsCollection`
* `HTMLFormElement`
* `HTMLFrameSetElement` (en-US)
非推奨
* `HTMLHeadElement`
* `HTMLHeadingElement`
* `HTMLHRElement`
* `HTMLHtmlElement`
* `HTMLIFrameElement`
* `HTMLImageElement`
* `HTMLInputElement`
* `HTMLLabelElement`
* `HTMLLegendElement`
* `HTMLLIElement`
* `HTMLLinkElement`
* `HTMLMapElement`
* `HTMLMarqueeElement` (en-US)
非推奨
* `HTMLMediaElement`
* `HTMLMenuElement`
* `HTMLMenuItemElement` (en-US)
Non-standard

非推奨
* `HTMLMetaElement`
* `HTMLMeterElement`
* `HTMLModElement`
* `HTMLObjectElement`
* `HTMLOListElement`
* `HTMLOptGroupElement`
* `HTMLOptionElement`
* `HTMLOptionsCollection`
* `HTMLOutputElement`
* `HTMLParagraphElement`
* `HTMLParamElement`
非推奨
* `HTMLPictureElement`
* `HTMLPreElement`
* `HTMLProgressElement`
* `HTMLQuoteElement`
* `HTMLScriptElement`
* `HTMLSelectElement`
* `HTMLSlotElement`
* `HTMLSourceElement`
* `HTMLSpanElement`
* `HTMLStyleElement`
* `HTMLTableCaptionElement`
* `HTMLTableCellElement`
* `HTMLTableColElement`
* `HTMLTableElement`
* `HTMLTableRowElement`
* `HTMLTableSectionElement`
* `HTMLTemplateElement`
* `HTMLTextAreaElement`
* `HTMLTimeElement`
* `HTMLTitleElement`
* `HTMLTrackElement`
* `HTMLUListElement`
* `HTMLUnknownElement`
* `HTMLVideoElement`

### I

* `IDBCursor`
* `IDBCursorWithValue`
* `IDBDatabase`
* `IDBFactory`
* `IDBIndex`
* `IDBKeyRange`
* `IDBLocaleAwareKeyRange`
Experimental

Non-standard
* `IDBObjectStore`
* `IDBOpenDBRequest`
* `IDBRequest`
* `IDBTransaction`
* `IDBVersionChangeEvent`
* `IdentityCredential` (en-US)
Experimental
* `IdentityProvider` (en-US)
Experimental
* `IdleDeadline` (en-US)
* `IdleDetector` (en-US)
Experimental
* `IIRFilterNode`
* `ImageBitmap`
* `ImageBitmapRenderingContext` (en-US)
* `ImageCapture` (en-US)
Experimental
* `ImageData`
* `ImageDecoder` (en-US)
Experimental
* `ImageTrack` (en-US)
Experimental
* `ImageTrackList` (en-US)
Experimental
* `Ink` (en-US)
Experimental
* `InkPresenter` (en-US)
Experimental
* `InputDeviceCapabilities`
Experimental
* `InputDeviceInfo` (en-US)
* `InputEvent`
* `InstallEvent`
Non-standard

非推奨
* `IntersectionObserver`
* `IntersectionObserverEntry`
* `InterventionReportBody` (en-US)
Experimental

### K

* `Keyboard`
Experimental
* `KeyboardEvent`
* `KeyboardLayoutMap`
Experimental
* `KeyframeEffect` (en-US)

### L

* `LargestContentfulPaint` (en-US)
* `LaunchParams` (en-US)
Experimental
* `LaunchQueue` (en-US)
Experimental
* `LayoutShift` (en-US)
Experimental
* `LayoutShiftAttribution` (en-US)
Experimental
* `LinearAccelerationSensor`
* `Location`
* `Lock`
* `LockManager`

### M

* `Magnetometer`
Experimental
* `MathMLElement` (en-US)
* `MediaCapabilities` (en-US)
* `MediaDeviceInfo`
* `MediaDevices`
* `MediaElementAudioSourceNode`
* `MediaEncryptedEvent` (en-US)
* `MediaError` (en-US)
* `MediaKeyMessageEvent` (en-US)
* `MediaKeys` (en-US)
* `MediaKeySession` (en-US)
* `MediaKeyStatusMap` (en-US)
* `MediaKeySystemAccess` (en-US)
* `MediaList`
* `MediaMetadata`
* `MediaQueryList`
* `MediaQueryListEvent` (en-US)
* `MediaRecorder`
* `MediaRecorderErrorEvent`
Non-standard

非推奨
* `MediaSession`
* `MediaSource`
* `MediaSourceHandle` (en-US)
Experimental
* `MediaStream`
* `MediaStreamAudioDestinationNode`
* `MediaStreamAudioSourceNode`
* `MediaStreamEvent` (en-US)
Non-standard

非推奨
* `MediaStreamTrack`
* `MediaStreamTrackAudioSourceNode`
* `MediaStreamTrackEvent` (en-US)
* `MediaStreamTrackGenerator` (en-US)
Experimental

Non-standard
* `MediaStreamTrackProcessor` (en-US)
Experimental
* `MediaTrackConstraints` (en-US)
* `MediaTrackSettings` (en-US)
* `MediaTrackSupportedConstraints`
* `MerchantValidationEvent` (en-US)
非推奨
* `MessageChannel`
* `MessageEvent`
* `MessagePort`
* `Metadata` (en-US)
Experimental

Non-standard
* `MIDIAccess`
* `MIDIConnectionEvent`
* `MIDIInput`
* `MIDIInputMap`
* `MIDIMessageEvent`
* `MIDIOutput`
* `MIDIOutputMap`
* `MIDIPort`
* `MimeType` (en-US)
非推奨
* `MimeTypeArray` (en-US)
非推奨
* `MouseEvent`
* `MouseScrollEvent`
Non-standard

非推奨
* `MutationEvent`
非推奨
* `MutationObserver`
* `MutationRecord`

### N

* `NamedNodeMap`
* `NavigateEvent` (en-US)
Experimental
* `Navigation` (en-US)
Experimental
* `NavigationCurrentEntryChangeEvent` (en-US)
Experimental
* `NavigationDestination` (en-US)
Experimental
* `NavigationHistoryEntry` (en-US)
Experimental
* `NavigationPreloadManager`
* `NavigationTransition` (en-US)
Experimental
* `Navigator`
* `NavigatorUAData`
Experimental
* `NDEFMessage`
Experimental
* `NDEFReader`
Experimental
* `NDEFReadingEvent`
Experimental
* `NDEFRecord`
Experimental
* `NetworkInformation`
Experimental
* `Node`
* `NodeIterator`
* `NodeList`
* `Notification`
* `NotificationEvent`

### O

* `OES_draw_buffers_indexed` (en-US)
* `OfflineAudioCompletionEvent`
* `OfflineAudioContext`
* `OffscreenCanvas` (en-US)
* `OffscreenCanvasRenderingContext2D` (en-US)
* `OrientationSensor`
* `OscillatorNode`
* `OTPCredential`
Experimental
* `OverconstrainedError` (en-US)

### P

* `PageTransitionEvent`
* `PaintWorkletGlobalScope` (en-US)
Experimental
* `PannerNode`
* `PasswordCredential` (en-US)
Experimental
* `Path2D` (en-US)
* `PaymentAddress`
Non-standard

非推奨
* `PaymentManager` (en-US)
Experimental
* `PaymentMethodChangeEvent`
* `PaymentRequest`
* `PaymentRequestEvent` (en-US)
Experimental
* `PaymentRequestUpdateEvent`
* `PaymentResponse` (en-US)
* `Pbkdf2Params` (en-US)
* `Performance`
* `PerformanceElementTiming`
Experimental
* `PerformanceEntry`
* `PerformanceEventTiming` (en-US)
* `PerformanceLongTaskTiming`
Experimental
* `PerformanceMark`
* `PerformanceMeasure`
* `PerformanceNavigation`
非推奨
* `PerformanceNavigationTiming`
* `PerformanceObserver`
* `PerformanceObserverEntryList`
* `PerformancePaintTiming`
* `PerformanceResourceTiming`
* `PerformanceServerTiming` (en-US)
* `PerformanceTiming`
非推奨
* `PeriodicSyncEvent` (en-US)
Experimental
* `PeriodicSyncManager`
Experimental
* `PeriodicWave`
* `Permissions`
* `PermissionStatus`
* `PictureInPictureEvent`
* `PictureInPictureWindow`
* `Plugin`
非推奨
* `PluginArray`
非推奨
* `Point` (en-US)
Non-standard

非推奨
* `PointerEvent`
* `PopStateEvent`
* `PositionSensorVRDevice` (en-US)
Non-standard

非推奨
* `Presentation` (en-US)
Experimental
* `PresentationAvailability`
Experimental
* `PresentationConnection` (en-US)
Experimental
* `PresentationConnectionAvailableEvent` (en-US)
Experimental
* `PresentationConnectionCloseEvent` (en-US)
Experimental
* `PresentationConnectionList` (en-US)
Experimental
* `PresentationReceiver` (en-US)
Experimental
* `PresentationRequest` (en-US)
Experimental
* `ProcessingInstruction`
* `ProgressEvent`
* `PromiseRejectionEvent`
* `PublicKeyCredential`
* `PushEvent`
* `PushManager`
* `PushMessageData`
* `PushSubscription`
* `PushSubscriptionOptions`

### R

* `RadioNodeList`
* `Range`
* `ReadableByteStreamController`
* `ReadableStream`
* `ReadableStreamBYOBReader`
* `ReadableStreamBYOBRequest`
* `ReadableStreamDefaultController`
* `ReadableStreamDefaultReader`
* `RelativeOrientationSensor`
* `RemotePlayback` (en-US)
* `Report` (en-US)
* `ReportBody` (en-US)
* `ReportingObserver` (en-US)
* `Request`
* `ResizeObserver`
* `ResizeObserverEntry`
* `ResizeObserverSize` (en-US)
* `Response`
* `RsaHashedImportParams` (en-US)
* `RsaHashedKeyGenParams`
* `RsaOaepParams` (en-US)
* `RsaPssParams` (en-US)
* `RTCAudioSourceStats` (en-US)
* `RTCCertificate` (en-US)
* `RTCCertificateStats` (en-US)
* `RTCDataChannel`
* `RTCDataChannelEvent`
* `RTCDtlsTransport` (en-US)
* `RTCDTMFSender` (en-US)
* `RTCDTMFToneChangeEvent` (en-US)
* `RTCEncodedAudioFrame` (en-US)
* `RTCEncodedVideoFrame` (en-US)
* `RTCError` (en-US)
* `RTCErrorEvent` (en-US)
* `RTCIceCandidate` (en-US)
* `RTCIceCandidatePair` (en-US)
* `RTCIceCandidatePairStats` (en-US)
* `RTCIceCandidateStats` (en-US)
* `RTCIceParameters` (en-US)
* `RTCIceTransport` (en-US)
* `RTCIdentityAssertion` (en-US)
Experimental
* `RTCInboundRtpStreamStats` (en-US)
* `RTCOutboundRtpStreamStats` (en-US)
* `RTCPeerConnection`
* `RTCPeerConnectionIceErrorEvent` (en-US)
* `RTCPeerConnectionIceEvent`
* `RTCPeerConnectionStats` (en-US)
* `RTCRemoteOutboundRtpStreamStats` (en-US)
* `RTCRtpCodecParameters` (en-US)
* `RTCRtpReceiver` (en-US)
* `RTCRtpScriptTransform` (en-US)
* `RTCRtpScriptTransformer` (en-US)
* `RTCRtpSender` (en-US)
* `RTCRtpStreamStats` (en-US)
* `RTCRtpTransceiver` (en-US)
* `RTCSctpTransport` (en-US)
* `RTCSessionDescription`
* `RTCStatsReport` (en-US)
* `RTCTrackEvent` (en-US)
* `RTCTransformEvent` (en-US)
* `RTCTransportStats` (en-US)

### S

* `Sanitizer` (en-US)
Experimental
* `Scheduler` (en-US)
* `Scheduling` (en-US)
Experimental
* `Screen`
* `ScreenDetailed` (en-US)
Experimental
* `ScreenDetails` (en-US)
Experimental
* `ScreenOrientation`
* `ScriptProcessorNode`
非推奨
* `ScrollTimeline` (en-US)
Experimental
* `SecurePaymentConfirmationRequest` (en-US)
* `SecurityPolicyViolationEvent` (en-US)
* `Selection`
* `Sensor`
* `SensorErrorEvent`
* `Serial`
Experimental
* `SerialPort`
Experimental
* `ServiceWorker`
* `ServiceWorkerContainer`
* `ServiceWorkerGlobalScope`
* `ServiceWorkerRegistration`
* `ShadowRoot`
* `SharedStorage` (en-US)
Experimental
* `SharedStorageOperation` (en-US)
Experimental
* `SharedStorageRunOperation` (en-US)
Experimental
* `SharedStorageSelectURLOperation` (en-US)
Experimental
* `SharedStorageWorklet` (en-US)
Experimental
* `SharedStorageWorkletGlobalScope` (en-US)
Experimental
* `SharedWorker`
* `SharedWorkerGlobalScope`
* `SourceBuffer`
* `SourceBufferList`
* `SpeechGrammar`
Experimental
* `SpeechGrammarList` (en-US)
Experimental
* `SpeechRecognition`
* `SpeechRecognitionAlternative`
* `SpeechRecognitionErrorEvent`
* `SpeechRecognitionEvent`
* `SpeechRecognitionResult` (en-US)
* `SpeechRecognitionResultList` (en-US)
* `SpeechSynthesis`
* `SpeechSynthesisErrorEvent`
* `SpeechSynthesisEvent`
* `SpeechSynthesisUtterance`
* `SpeechSynthesisVoice` (en-US)
* `StaticRange`
* `StereoPannerNode`
* `Storage`
* `StorageEvent`
* `StorageManager`
* `StylePropertyMap`
* `StylePropertyMapReadOnly`
* `StyleSheet`
* `StyleSheetList`
* `SubmitEvent`
* `SubtleCrypto`
* `SVGAElement` (en-US)
* `SVGAngle` (en-US)
* `SVGAnimateColorElement` (en-US)
非推奨
* `SVGAnimatedAngle` (en-US)
* `SVGAnimatedBoolean` (en-US)
* `SVGAnimatedEnumeration` (en-US)
* `SVGAnimatedInteger` (en-US)
* `SVGAnimatedLength` (en-US)
* `SVGAnimatedLengthList` (en-US)
* `SVGAnimatedNumber` (en-US)
* `SVGAnimatedNumberList` (en-US)
* `SVGAnimatedPreserveAspectRatio` (en-US)
* `SVGAnimatedRect` (en-US)
* `SVGAnimatedString` (en-US)
* `SVGAnimatedTransformList` (en-US)
* `SVGAnimateElement` (en-US)
* `SVGAnimateMotionElement` (en-US)
* `SVGAnimateTransformElement` (en-US)
* `SVGAnimationElement` (en-US)
* `SVGCircleElement` (en-US)
* `SVGClipPathElement` (en-US)
* `SVGComponentTransferFunctionElement` (en-US)
* `SVGCursorElement` (en-US)
非推奨
* `SVGDefsElement` (en-US)
* `SVGDescElement` (en-US)
* `SVGElement`
* `SVGEllipseElement` (en-US)
* `SVGEvent`
* `SVGFEBlendElement` (en-US)
* `SVGFEColorMatrixElement` (en-US)
* `SVGFEComponentTransferElement` (en-US)
* `SVGFECompositeElement` (en-US)
* `SVGFEConvolveMatrixElement` (en-US)
* `SVGFEDiffuseLightingElement` (en-US)
* `SVGFEDisplacementMapElement` (en-US)
* `SVGFEDistantLightElement` (en-US)
* `SVGFEDropShadowElement` (en-US)
* `SVGFEFloodElement` (en-US)
* `SVGFEFuncAElement` (en-US)
* `SVGFEFuncBElement` (en-US)
* `SVGFEFuncGElement` (en-US)
* `SVGFEFuncRElement` (en-US)
* `SVGFEGaussianBlurElement` (en-US)
* `SVGFEImageElement` (en-US)
* `SVGFEMergeElement` (en-US)
* `SVGFEMergeNodeElement` (en-US)
* `SVGFEMorphologyElement` (en-US)
* `SVGFEOffsetElement` (en-US)
* `SVGFEPointLightElement` (en-US)
* `SVGFESpecularLightingElement` (en-US)
* `SVGFESpotLightElement` (en-US)
* `SVGFETileElement` (en-US)
* `SVGFETurbulenceElement` (en-US)
* `SVGFilterElement` (en-US)
* `SVGFontElement`
非推奨
* `SVGFontFaceElement` (en-US)
非推奨
* `SVGFontFaceFormatElement` (en-US)
非推奨
* `SVGFontFaceNameElement` (en-US)
非推奨
* `SVGFontFaceSrcElement` (en-US)
非推奨
* `SVGFontFaceUriElement` (en-US)
非推奨
* `SVGForeignObjectElement` (en-US)
* `SVGGElement` (en-US)
* `SVGGeometryElement` (en-US)
* `SVGGlyphElement` (en-US)
非推奨
* `SVGGlyphRefElement` (en-US)
非推奨
* `SVGGradientElement` (en-US)
* `SVGGraphicsElement`
* `SVGHKernElement` (en-US)
非推奨
* `SVGImageElement` (en-US)
* `SVGLength` (en-US)
* `SVGLengthList` (en-US)
* `SVGLinearGradientElement` (en-US)
* `SVGLineElement` (en-US)
* `SVGMarkerElement` (en-US)
* `SVGMaskElement` (en-US)
* `SVGMetadataElement` (en-US)
* `SVGMissingGlyphElement` (en-US)
非推奨
* `SVGMPathElement` (en-US)
* `SVGNumber` (en-US)
* `SVGNumberList` (en-US)
* `SVGPathElement` (en-US)
* `SVGPatternElement` (en-US)
* `SVGPoint` (en-US)
非推奨
* `SVGPointList` (en-US)
* `SVGPolygonElement` (en-US)
* `SVGPolylineElement` (en-US)
* `SVGPreserveAspectRatio` (en-US)
* `SVGRadialGradientElement` (en-US)
* `SVGRect`
* `SVGRectElement` (en-US)
* `SVGRenderingIntent` (en-US)
非推奨
* `SVGScriptElement` (en-US)
* `SVGSetElement` (en-US)
* `SVGStopElement` (en-US)
* `SVGStringList`
* `SVGStyleElement` (en-US)
* `SVGSVGElement` (en-US)
* `SVGSwitchElement` (en-US)
* `SVGSymbolElement` (en-US)
* `SVGTextContentElement` (en-US)
* `SVGTextElement`
* `SVGTextPathElement` (en-US)
* `SVGTextPositioningElement` (en-US)
* `SVGTitleElement` (en-US)
* `SVGTransform` (en-US)
* `SVGTransformList` (en-US)
* `SVGTRefElement` (en-US)
非推奨
* `SVGTSpanElement` (en-US)
* `SVGUnitTypes` (en-US)
* `SVGUseElement` (en-US)
* `SVGViewElement` (en-US)
* `SVGVKernElement` (en-US)
非推奨
* `SyncEvent`
Experimental
* `SyncManager`
Experimental

### T

* `TaskAttributionTiming`
Experimental
* `TaskController` (en-US)
* `TaskPriorityChangeEvent` (en-US)
* `TaskSignal` (en-US)
* `Text`
* `TextDecoder`
* `TextDecoderStream`
* `TextEncoder`
* `TextEncoderStream`
* `TextFormat` (en-US)
Experimental
* `TextFormatUpdateEvent` (en-US)
Experimental
* `TextMetrics` (en-US)
* `TextTrack`
* `TextTrackCue`
* `TextTrackCueList`
* `TextTrackList` (en-US)
* `TextUpdateEvent` (en-US)
Experimental
* `TimeEvent` (en-US)
* `TimeRanges`
* `ToggleEvent`
* `Touch`
* `TouchEvent`
* `TouchList`
* `TrackEvent`
* `TransformStream`
* `TransformStreamDefaultController`
* `TransitionEvent`
* `TreeWalker`
* `TrustedHTML` (en-US)
* `TrustedScript` (en-US)
* `TrustedScriptURL` (en-US)
* `TrustedTypePolicy` (en-US)
* `TrustedTypePolicyFactory` (en-US)

### U

* `UIEvent`
* `URL`
* `URLPattern` (en-US)
Experimental
* `URLSearchParams`
* `USB`
Experimental
* `USBAlternateInterface`
Experimental
* `USBConfiguration`
Experimental
* `USBConnectionEvent`
Experimental
* `USBDevice`
Experimental
* `USBEndpoint`
Experimental
* `USBInterface`
Experimental
* `USBInTransferResult`
Experimental
* `USBIsochronousInTransferPacket`
Experimental
* `USBIsochronousInTransferResult`
Experimental
* `USBIsochronousOutTransferPacket`
Experimental
* `USBIsochronousOutTransferResult`
Experimental
* `USBOutTransferResult`
Experimental
* `UserActivation`

### V

* `ValidityState`
* `VideoColorSpace` (en-US)
* `VideoDecoder` (en-US)
* `VideoEncoder` (en-US)
* `VideoFrame` (en-US)
* `VideoPlaybackQuality` (en-US)
* `VideoTrack`
* `VideoTrackList`
* `ViewTimeline` (en-US)
Experimental
* `ViewTransition`
Experimental
* `VirtualKeyboard` (en-US)
Experimental
* `VisibilityStateEntry` (en-US)
Experimental
* `VisualViewport` (en-US)
* `VRDisplay`
Non-standard

非推奨
* `VRDisplayCapabilities`
Non-standard

非推奨
* `VRDisplayEvent`
Non-standard

非推奨
* `VREyeParameters`
Non-standard

非推奨
* `VRFieldOfView`
Non-standard

非推奨
* `VRFrameData`
Non-standard

非推奨
* `VRLayerInit`
非推奨
* `VRPose`
Non-standard

非推奨
* `VRStageParameters`
Non-standard

非推奨
* `VTTCue`
* `VTTRegion`

### W

* `WakeLock`
* `WakeLockSentinel`
* `WaveShaperNode` (en-US)
* `WebGL2RenderingContext` (en-US)
* `WebGLActiveInfo` (en-US)
* `WebGLBuffer`
* `WebGLContextEvent` (en-US)
* `WebGLFramebuffer`
* `WebGLObject`
* `WebGLProgram`
* `WebGLQuery` (en-US)
* `WebGLRenderbuffer`
* `WebGLRenderingContext`
* `WebGLSampler` (en-US)
* `WebGLShader`
* `WebGLShaderPrecisionFormat` (en-US)
* `WebGLSync` (en-US)
* `WebGLTexture` (en-US)
* `WebGLTransformFeedback` (en-US)
* `WebGLUniformLocation` (en-US)
* `WebGLVertexArrayObject` (en-US)
* `WebSocket`
* `WebTransport` (en-US)
* `WebTransportBidirectionalStream` (en-US)
* `WebTransportDatagramDuplexStream` (en-US)
* `WebTransportError` (en-US)
* `WebTransportReceiveStream` (en-US)
Experimental
* `WebTransportSendStream` (en-US)
Experimental
* `WGSLLanguageFeatures`
Experimental
* `WheelEvent`
* `Window`
* `WindowClient`
* `WindowControlsOverlay` (en-US)
Experimental
* `WindowControlsOverlayGeometryChangeEvent` (en-US)
Experimental
* `WindowSharedStorage` (en-US)
Experimental
* `Worker`
* `WorkerGlobalScope`
* `WorkerLocation`
* `WorkerNavigator`
* `Worklet`
* `WorkletGlobalScope`
* `WorkletSharedStorage` (en-US)
Experimental
* `WritableStream`
* `WritableStreamDefaultController`
* `WritableStreamDefaultWriter`

### X

* `XMLDocument`
* `XMLHttpRequest`
* `XMLHttpRequestEventTarget`
* `XMLHttpRequestUpload`
* `XMLSerializer`
* `XPathEvaluator` (en-US)
* `XPathException`
* `XPathExpression`
* `XPathNSResolver` (en-US)
* `XPathResult`
* `XRAnchor` (en-US)
Experimental
* `XRAnchorSet` (en-US)
Experimental
* `XRBoundedReferenceSpace`
Experimental
* `XRCompositionLayer` (en-US)
Experimental
* `XRCPUDepthInformation` (en-US)
Experimental
* `XRCubeLayer` (en-US)
Experimental
* `XRCylinderLayer` (en-US)
Experimental
* `XRDepthInformation` (en-US)
Experimental
* `XREquirectLayer` (en-US)
Experimental
* `XRFrame` (en-US)
Experimental
* `XRHand` (en-US)
* `XRHitTestResult` (en-US)
Experimental
* `XRHitTestSource` (en-US)
Experimental
* `XRInputSource`
* `XRInputSourceArray` (en-US)
Experimental
* `XRInputSourceEvent` (en-US)
* `XRInputSourcesChangeEvent` (en-US)
* `XRJointPose` (en-US)
* `XRJointSpace` (en-US)
* `XRLayer` (en-US)
Experimental
* `XRLayerEvent` (en-US)
Experimental
* `XRLightEstimate` (en-US)
Experimental
* `XRLightProbe`
Experimental
* `XRMediaBinding` (en-US)
Experimental
* `XRPose` (en-US)
* `XRProjectionLayer` (en-US)
Experimental
* `XRQuadLayer` (en-US)
Experimental
* `XRRay` (en-US)
Experimental
* `XRReferenceSpace`
* `XRReferenceSpaceEvent`
* `XRRenderState` (en-US)
Experimental
* `XRRigidTransform`
* `XRSession` (en-US)
Experimental
* `XRSessionEvent` (en-US)
* `XRSpace` (en-US)
* `XRSubImage` (en-US)
Experimental
* `XRSystem`
Experimental
* `XRTransientInputHitTestResult` (en-US)
Experimental
* `XRTransientInputHitTestSource` (en-US)
Experimental
* `XRView` (en-US)
Experimental
* `XRViewerPose` (en-US)
* `XRViewport` (en-US)
* `XRWebGLBinding` (en-US)
Experimental
* `XRWebGLDepthInformation` (en-US)
Experimental
* `XRWebGLLayer` (en-US)
Experimental
* `XRWebGLSubImage` (en-US)
Experimental
* `XSLTProcessor`

関連情報
----

* Web API イベントリファレンス


WebDriver

WebDriver
=========

WebDriver は、ユーザーエージェントの観察と制御を可能にする遠隔制御インターフェイスです。プロセスの外のプログラムがウェブブラウザーの動作を遠隔で指示する方法として、プラットフォームと言語に中立なワイヤープロトコルを提供します。

ユーザーに一貫した使い勝手を提供するには、異なるプラットフォーム上の多くのブラウザーで相互に実行できる命令セットを書くことができることが重要です。ウェブプラットフォームでの新しい開発の波、端末の多様性の増加、テクノロジー間の実際の相互運用性の要求を背景に、 WebDriver はクロスブラウザーテストのためののツールを提供します。

提供されるものは、ウェブ文書内の DOM 要素を検出したり操作したり、ユーザーエージェントの動作を制御したりするためのインターフェイスです。これは主に、ユーザーエージェントを別な制御プロセスから自動制御するテストを、ウェブ作者が書くことができるようにすることが目的ですが、場合によってはブラウザー内のスクリプトが — おそらく他の — ブラウザーを制御するために使用することもできます。

使い方
---

それでは、 WebDriver で何が実現でき、どのように見えるのでしょうか。 WebDriver はプログラミング言語に中立なので、この質問に対する答えは、使用している WebDriver クライアントと言語の選択によって異なります。

しかし、 Python で書かれた有名なクライアントを使用すると、 WebDriver との対話は次のようになるでしょう。

```python
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support.expected_conditions import presence_of_element_located

with webdriver.Firefox() as driver:

    wait = WebDriverWait(driver, 10)
    driver.get("http://google.com/ncr")
    driver.find_element_by_name("q").send_keys("cheese" + Keys.RETURN)

    wait.until(presence_of_element_located((By.CSS_SELECTOR, "h3>a")))

    results = driver.find_elements_by_css_selector("h3>a")
    for i, result in results.iteritems():
        print(f"#{i}: {result.text} ({result.get\_property('href')})")
```

これは次のような出力結果になります。
```

#1 Cheese - Wikipedia (https://en.wikipedia.org/wiki/Cheese)
```

リファレンス
------

### コマンド

コマンド (en-US)

### 種類

種類

* Error object (en-US)
* Timeouts object (en-US)
* WebElement
* WebWindow
### 能力

能力 (en-US)

### エラー

エラー (en-US)

仕様書
---

* WebDriver
関連情報
----

* クロスブラウザーテスト
* Selenium documentation


ウェブパフォーマンス

ウェブパフォーマンス
==========

ウェブパフォーマンスは客観的な測定値と、読み込み時や実行時のユーザーエクスペリエンスの知覚状況から成ります。ウェブパフォーマンスとは、サイトが読み込まれるまでの時間、操作可能・応答可能になるまでの時間、そしてユーザーが操作する際のコンテンツのスムーズさを意味します。スクロールはスムーズか、ボタンはクリックしやすいか、ポップアップはすぐに読み込まれて表示されるか、表示の際にスムーズにアニメーションするか。ウェブパフォーマンスには、読み込み時間、 1 秒あたりのフレーム数、操作可能になるまでの時間などの客観的な測定値と、コンテンツが読み込まれるまでにどのくらいの時間がかかったように感じたかという主観的な体験の両方が含まれます。

サイトが応答するまでの時間が長ければ長いほど、ユーザーはそのサイトを放棄する傾向があります。読み込み時間と応答時間を最小限に抑え、さらに機能を追加して遅延を隠すことで、できるだけ早く、できるだけ利用可能でインタラクティブな体験を提供し、一方で、体験のロングテール部分では非同期的に読み込みを行うことが重要です。

ウェブパフォーマンスの測定と改善に役立つツール、API、およびベストプラクティスがあります。 この章でそれらをカバーします。

キーパフォーマンスガイド
------------

アニメーションのパフォーマンスとフレームレートウェブ上でのアニメーションは、`SVGAnimationElement`、`window.requestAnimationFrame`（`canvas` や `WebGL_API` を含む）、CSS の `animation`、`video`、アニメーション GIF、さらにアニメーション PNG やその他の種類の画像もあります。CSS プロパティをアニメーションさせることによるパフォーマンスコストは、プロパティによって異なり、高価な CSS プロパティをアニメーションさせると、ブラウザーが滑らかなFPSを実現するのに苦労し、jankとなることがあります。

ナビゲーションおよびリソースタイミング**ナビゲーションタイミング**は、ブラウザーによる文書ナビゲーションイベントを測定する指標です。**リソースタイミング**は、アプリケーションのリソースの読み込みに関する詳細なネットワークタイミングの測定値です。どちらも同じ読み取り専用のプロパティを提供しますが、ナビゲーションタイミングはメイン文書の時間を測定するのに対し、リソースタイミングはそのメイン文書内の呼び出されるすべての資産やリソース、およびリソースのリクエストされたリソースの時刻を提供します。

パフォーマンスの基礎パフォーマンスとは、効率性を意味します。この文書では、オープンウェブアプリの観点から、パフォーマンスとは何か、ブラウザープラットフォームでどのようにパフォーマンスを向上させるか、テストや改善にどのようなツールやプロセスを使用できるかについて一般的な説明をします。.

ページの生成: ブラウザーの動作の仕組みユーザーは、読み込みが速く、スムーズに操作できるコンテンツを、ウェブで体験することを求めています。したがって、開発者はこれらふたつの目標を達成するために努力しなければいけません。

遅延読み込み**遅延読み込み** (Lazy loading) とは、リソースをノンブロッキング（クリティカルでない）ものとして識別し、必要なときだけこれらを読み込む戦略のことです。クリティカルレンダリングパス (en-US)の長さを短縮する方法であり、ページのロード時間の短縮につながります。

初心者向けチュートリアル
------------

MDN のウェブパフォーマンスの学習領域には、パフォーマンスの基礎をカバーする最新のチュートリアルが含まれています。パフォーマンスについての初心者は、ここから始めてください。

ウェブパフォーマンス: 短い概要

ウェブパフォーマンスの学習経路の概要です。ここから旅を始めましょう。

ウェブパフォーマンスとは

この記事では、パフォーマンスとは何かをよく理解することからモジュールを始めます。パフォーマンスについて考えるときに考慮すべきツール、指標、API、ネットワーク、人々のグループ、そしてウェブ開発のワークフローの一部としてパフォーマンスを活用する方法などを紹介します。

ユーザーはパフォーマンスをどう知覚するのか

ウェブサイトの速さをミリ秒単位で示すことよりも重要なのは、ユーザーがサイトの速さをどのように認識しているかということです。これらの認識は、実際のページロード時間、アイドリング、ユーザーインタラクションへの応答性、スクロールやその他のアニメーションのスムーズさに影響されます。この記事では、様々なロードメトリクス、アニメーション、応答性のメトリクスと、実際の時間ではなくてもユーザーの認識を改善するためのベストプラクティスについて説明します。

ウェブパフォーマンスの基本

HTML、CSS、JavaScript、メディアファイルなどのフロントエンド部品に加えて、アプリケーションを遅くする機能と、主観的・客観的にアプリケーションを速くする機能があります。ウェブパフォーマンスに関連する API、開発者ツール、ベストプラクティス、バッドプラクティスは数多くあります。ここでは、これらの機能の多くを基本的なレベルで紹介し、それぞれのトピックについて、パフォーマンスを向上させるためのより深い考察へのリンクを提供します。

HTML のパフォーマンス特性

マークアップの属性やソースの順序によっては、ウェブサイトのパフォーマンスに影響を与えることがあります。 DOM ノードの数を最小限に抑え、スタイル、スクリプト、メディア、サードパーティのスクリプトなどのコンテンツを含むために、最適な順序と属性を使用することで、ユーザーエクスペリエンスを劇的に向上させることができます。この記事では、最大限のパフォーマンスを確保するために HTML をどのように使用すればよいかを詳しく見ていきます。

マルチメディア: 画像と動画

ウェブパフォーマンスの中で最も身近な位置にあるのは、メディアの最適化です。各ユーザーエージェントの能力、サイズ、ピクセル密度に応じて、異なるメディアファイルを提供することが可能です。また、バックグラウンドのビデオからオーディオトラックを削除するなどのヒントを加えると、さらにパフォーマンスが向上します。この記事では、動画、音声、画像のコンテンツがパフォーマンスに与える影響と、その影響をできるだけ小さくするための方法について説明します。

CSS パフォーマンス特性

CSS は、パフォーマンス向上のための最適化の焦点としてはあまり重要ではないかもしれませんが、パフォーマンスに影響を与える CSS の機能はいくつかあります。この記事では、パフォーマンスに影響を与えるいくつかの CSS プロパティと、パフォーマンスに悪影響を与えないためのスタイルの処理方法を提案します。

JavaScript パフォーマンスのベストプラクティス

JavaScript は、適切に使用すればインタラクティブで没入感のあるウェブ体験を実現できますが、ダウンロード時間、レンダリング時間、アプリ内のパフォーマンス、バッテリー寿命、ユーザーエクスペリエンスを大きく損なう可能性があります。この記事では、複雑なコンテンツであっても可能な限りパフォーマンスを向上させるために考慮すべき JavaScript のベストプラクティスを紹介します。

モバイルパフォーマンス

モバイル端末でのウェブアクセスは非常に人気があり、すべてのモバイルプラットフォームには本格的なウェブブラウザーが搭載されていますが、帯域幅、CPU、バッテリーの寿命が限られている可能性があるため、これらのプラットフォームでのウェブコンテンツのパフォーマンスを考慮することが重要です。この記事では、モバイルに特化したパフォーマンスの考慮点について説明します。

パフォーマンス API の使用
---------------

Performance API

このガイドでは、 `Performance` インターフェイスの使い方を説明します。これは High-Resolution Time 標準で定義されているものです。

Resource Timing API

リソースの読み込みとそのタイミングです。リソースバッファの管理や CORS への対応なども含みます。

パフォーマンスタイムライン

Performance Timeline 標準は、アプリケーション内のクライアントサイドのレイテンシー測定をサポートする `Performance` インターフェイスの拡張機能を定義しています。これらのインターフェイスを併用することで、アプリケーションのパフォーマンスのボトルネックを特定するのに役立ちます。

User Timing API (en-US)

アプリケーション固有のタイムスタンプを生成するために、 user timing API (en-US) の "mark" および "measure" の種類の項目を使用します。これらはブラウザーのパフォーマンスタイムラインの一部です。

Frame Timing API

`PerformanceFrameTiming` インターフェイスは、ブラウザーのイベントループに関する*フレーム*のタイミングデータを提供します。

Beacon API

Beacon インターフェイスは、ウェブサーバーへの非同期かつブロックされないリクエストをスケジューリングします。

Intersection Observer API

Intersection Observer API を使って要素が見えるようになることを時間的に測定し、関心のある要素が可視化されたときに非同期に通知を受けることができます。

その他の文書
------

開発者ツールのパフォーマンス機能

この節では、ウォーターフォール、コールツリー、フレイムチャートなど、開発者ツールのパフォーマンス機能の使い方と理解について説明します。

組み込みプロファイラーによるプロファイル (en-US)

Learn how to profile app performance with Firefox's built-in profiler.

用語集の用語
------

* Beacon
* Brotli compression
* Client hints
* Code splitting
* CSSOM
* Domain sharding
* Effective connection type
* First contentful paint
* First CPU idle
* First input delay (en-US)
* First interactive
* First meaningful paint
* First paint
* HTTP
* HTTP/2
* Jank
* Latency
* Lazy load
* Long task
* Lossless compression
* Lossy compression
* Main thread
* Minification
* Network throttling
* Packet
* Page load time
* Page prediction (en-US)
* Parse
* Perceived performance
* Prefetch
* Prerender
* QUIC
* RAIL
* Real User Monitoring (en-US)
* Resource Timing (en-US)
* Round Trip Time (RTT)
* Server Timing
* Speculative parsing
* Speed index
* SSL
* Synthetic monitoring
* TCP handshake
* TCP slow start (en-US)
* Time to first byte
* Time to interactive
* TLS
* Transmission Control Protocol (TCP)
* Tree shaking
* Web performance
まだ書かれていない文書
-----------

JavaScript performance best practices

JavaScript, when used properly, can allow for interactive and immersive web experiences ... or it can significantly harm download time, render time, in app performance, battery life, and user experience. This article outlines some JavaScript best practices that can ensure even complex content's performance is the highest possible.

Mobile performance

With web access on mobile devices being so popular, and all mobile platforms having fully-fledged web browsers, but possibly limited bandwidth, CPU, and battery life, it is important to consider the performance of your web content on these platforms. This article also looks at mobile-specific performance considerations.

Web font performance

An often overlooked aspect of performance landscape are web fonts. Web fonts are more prominent in web design than ever, yet many developers embed them from a third party service and think nothing of it. In this article, we'll covers methods for getting your font files as small as possible with efficient file formats and sub setting. From there, we'll go on to talk about how browsers text, and how you can use CSS and JavaScript features to ensure your fonts render quickly, and with minimal disruption to the user experience.

Performance bottlenecks

...

Understanding bandwidth

Bandwidth is the amount of data measured in Megabits(Mb) or Kilobits(Kb) that one can send per second. This article explains the role of bandwidth in media-rich internet applications, how you can measure it, and how you can optimize applications to make the best use of available bandwidth

The role of TLS in performance

TLS—or HTTPS as we tend to call it—is crucial in creating secure and safe user experiences. While hardware has reduced the negative impacts TLS has had on server performance, it still represents a substantial slice of the time we spend waiting for browsers to connect to servers. This article explains the TLS handshake process, and offers some tips for reducing this time, such as OCSP stapling, HSTS preload headers, and the potential role of resource hints in masking TLS latency for third parties.

Reading performance charts

Developer tools provide information on performance, memory, and network requests. Knowing how to read waterfall charts, call trees, traces, flame charts , and allocations in your browser developer tools will help you understand waterfall and flame charts in other performance tools.

Alternative media formats

When it comes to images and videos, there are more formats than you're likely aware of. Some of these formats can take your highly optimized media-rich pages even further by offering additional reductions in file size. In this guide we'll discuss some alternative media formats, how to use them responsibly so that non-supporting browsers don't get left out in the cold, and some advanced guidance on transcoding your existing assets to them.

Analyzing JavaScript bundles

No doubt, JavaScript is a big part of modern web development. While you should always strive to reduce the amount of JavaScript you use in your applications, it can be difficult to know where to start. In this guide, we'll show you how to analyze your application's script bundles, so you know *what* you're using, as well how to detect if your app contains duplicated scripts between bundles.

Lazy loading

It isn't always necessary to load all of a web applications assets on initial page load. Lazy Loading is deferring the loading of assets on a page, such as scripts, images, etc., on a page to a later point in time i.e when those assets are actually needed.

Lazy-loading JavaScript with dynamic imports

When developers hear the term "lazy loading", they immediately think of below-the-fold imagery that loads when it scrolls into the viewport. But did you know you can lazy load JavaScript as well? In this guide we'll talk about the dynamic import() statement, which is a feature in modern browsers that loads a JavaScript module on demand. Of course, since this feature isn't available everywhere, we'll also show you how you can configure your tooling to use this feature in a widely compatible fashion.

Controlling resource delivery with resource hints

Browsers often know better than we do when it comes to resource prioritization and delivery however they're far from clairyovant. Native browser features enable us to hint to the browser when it should connect to another server, or preload a resource before the browser knows it ever needs it. When used judiciously, this can make fast experience seem even faster. In this article, we cover native browser features like rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload, and how to use them to your advantage.

Performance Budgets (en-US)

Marketing, design, and sales needs, and developer experience, often ad bloat, third-party scripts, and other features that can slow down web performance. To help set priorities, it is helpful to set a performance budget: a set of restrictions to not exceed during the development phase. In this article, we'll discuss creating and sticking to a performance budget.

Web performance checklist

A performance checklist of features to consider when developing applications with links to tutorials on how to implement each feature, include service workers, diagnosing performance problems, font loading best practices, client hints, creating performant animations, etc.

Mobile performance checklist

A concise checklist of performance considerations impacting mobile network users on hand-held, battery operated devices.

関連情報
----

HTML

* `<picture>` 要素
* `<video>` 要素
* `<source>` 要素
* `<img> srcset` 属性
    + レスポンシブ画像
* `rel="preload"` によるコンテンツの先読み - (https://w3c.github.io/preload/)

CSS

* will-change
* GPU v CPU
* レイアウトの測定
* フォント読み込みのベストプラクティス

JavaScript

* DOMContentLoaded
* ガベージコレクション
* requestAnimationFrame

API

* Performance API
* Navigation Timing API
* Media Capabilities API (en-US)
* Network Information API
* PerformanceNavigationTiming
* Battery Status API
* Navigator.deviceMemory
* Intersection Observer
* Using the User Timing API (en-US)
* Long Tasks API
* High Resolution Timing API (https://w3c.github.io/hr-time/)
* Resource Timing API
* Page Visibility
* Background Tasks API の協調スケジューリング (en-US)
    + requestIdleCallback()
* Beacon API
* リソースのヒント - dns-prefetch, preconnect, prefetch, prerender
* FetchEvent.preloadResponse
* Performance Server Timing API (en-US)

ヘッダー

* Content-encoding
* HTTP/2
* gZip
* クライアントヒント

ツール

* Firefox 開発者ツールのパフォーマンス
* フレイムチャート
* ネットワークパネル
* ウォーターフォールチャート

その他の指標

* スピードインデックスと知覚的スピードインデックス

ベストプラクティス

* サービスワーカーの使用
* ウェブワーカーの使用
    + Web Workers API
* PWA
* キャッシュ
* コンテンツ配信ネットワーク (CDN)


XPath

XPath
=====

XPath は XML Path Language の略称です。非 XML 構文を使って、柔軟な方法で XML 文書の様々な部分をアドレッシングする（指し示す）ことができます。さらに、文書中で指し示されたノードがパターンに一致するかどうかの判定を行うこともできます。

XPath は主に XSLT で使われていますが、 HTML や SVG のような XML 風の言語の文書の DOM においても `XPathExpression` を用いることで、 `Document.getElementById()` や `Document.querySelectorAll()` メソッドや `Node.childNodes` プロパティ、その他の DOM コア機能に依存することなく、はるかにパワフルな方法でたどることができます。

XPath は XML 文書の階層構造を辿るために（URL のような）パス表記を使います。また、URI や XML 属性値の中で使えるように非 XML 構文を採用しています。

**メモ:** XPath の対応状況は大きく異なります。 Firefox は合理的にうまく対応しています（対応をさらに改善する計画はありません）が、他のブラウザーではそれほど実装されていません。ポリフィルが必要な場合は、js-xpath または wicked-good-xpath を検討してください。

ドキュメント
------

JavaScript からの XPath 利用入門

XSLT 以外で XPath を使用する方法です。

XPath:Axes

XPath 仕様で定められている軸 (Axis) の一覧とその定義。軸はノード間の関係性を記述するのに使われます。

XPath:Functions

コア XPath 関数及び XSLT 固有の追加 XPath 関数の一覧とその定義。

XSLT による XML の変換

XSLT では変換したい XML 文書内のコードの一部を指し示すのに XPath を使います。

XPath スニペット

これらは DOM Level 3 XPath API に基づいて、独自のコードで使用できる JavaScript ユーティリティ関数です。

What is XSLT? （英語）

XSLT と XPath の予備知識が無い人を対象に、その背景や構造、概念、初歩的な専門用語を紹介する広範囲な入門ガイド。

ツール
---

XPath tester

オンラインの XPath ビルダー／デバッガーです。

関連事項
----

* XSLT, XML, DOM
* CSS セレクターと XPath の比較


アクセシビリティ

アクセシビリティ
========

ウェブ開発におけるアクセシビリティとは、何らかの理由により能力に制約がある場合でも、可能な限り多くの人々がウェブサイトを使用できるようにすることを意味します。この記事では、アクセシビリティを考慮したコンテンツを開発するための情報を提供します。

多くの人にとって、技術は物事を容易にします。障碍のある人にとっては、テクノロジーは物事を可能にしてくれます。アクセシビリティとは、個人の身体的・認知的能力やウェブへのアクセス方法に関わらず、可能な限りアクセス可能なコンテンツを開発することです。

「ハードウェア、ソフトウェア、言語、文化、所在地、物理的/精神的能力にかかわらず、**ウェブは基本的にすべての人に向けて設計されています**。ウェブがこの目的を達成できると、さまざまな聴力、視力、認知能力をもつ人々がウェブにアクセスできるようになります。」 (W3C - Accessibility)

主なチュートリアル
---------

MDN のアクセシビリティ学習領域には、アクセシビリティの基本事項を含む近代的な最新のチュートリアルが含まれています。

アクセシビリティとは何か

この記事では、アクセシビリティが実際にどのようなものであるかをよく見てモジュールを開始します。これには、どのグループを考慮する必要があるのかとそのグループの理由、さまざまな人々がウェブとやりとりするために使用するツール、アクセシビリティをウェブ開発ワークフローの一部にする方法を含みます。

HTML: アクセシビリティのための良い基礎

適切な HTML 要素が常に正しい目的で使用されていることを確認するだけで、大量のウェブコンテンツをアクセシブルにすることができます。この記事では、最大限のアクセシビリティを確保するために HTML をどのように使用できるかについて詳しく説明します。

CSS と JavaScript のアクセシビリティベストプラクティス

CSS と JavaScript を適切に使用すると、アクセシブルなウェブ体験を可能にするポテンシャルがあります。また、悪用されるとアクセシビリティに大きな悪影響を与える可能性があります。この記事では、複雑なコンテンツでさえも可能な限りアクセシブルであることを保証するために考慮する必要がある CSS と JavaScript のベストプラクティスの概要を説明します。

WAI-ARIA の基礎

前の記事に従って、セマンティックでない HTML や動的に JavaScript で更新されたコンテンツを含む複雑な UI コントロールを作成することは理解しづらい場合があります。WAI-ARIA は、ブラウザーや支援技術が認識して使用できるセマンティクスを追加することで、このような問題の解決に役立つ技術です。ここでは、アクセシビリティを向上させるために基本レベルで使用する方法を示します。

アクセシブルなマルチメディア

アクセシビリティの問題を引き起こす可能性のある別のカテゴリーのコンテンツは、マルチメディアです。映像、音声、および画像のコンテンツには、補助的なテクノロジーとそのユーザーが理解できるように適切なテキストの代替が必要です。この記事では、その方法を示します。

モバイルアクセシビリティ

モバイル端末でのウェブアクセスが普及しており、iOS や Android などの普及しているプラットフォームではアクセシビリティツールが完全に提供されているため、これらのプラットフォームでのウェブコンテンツのアクセシビリティを考慮する必要があります。この記事では、モバイル固有のアクセシビリティの考慮事項について説明します。

その他の文書
------

ウェブコンテンツアクセシビリティガイドラインを理解する

この一連の記事では、W3C のウェブコンテンツアクセシビリティガイドライン 2.0 (WCAG、Web Content Accessibility Guidelines) で概説されている推奨事項に準拠するために必要な手順を理解するのに役立つ簡単な説明を提供します。

色とアクセシビリティ入門

この記事では、光と色に対する私たちの認識について説明し、アクセシブルなデザインにおける色使いの基礎を提供し、視覚的で読みやすいコンテンツのベストプラクティスを示します。

キーボードで操作可能な JavaScript ウィジェット

今まで、スタイル付きの `<div>` や `<span>` ベースのウィジェットを作りたいというウェブ開発者は、適切な技術を欠いていました。 **キーボードアクセシビリティ**は、開発者が知っておくべき最低限のアクセシビリティ要件の一部です。

ARIA

ARIA を使用して HTML 文書をより使いやすくする方法を学ぶための記事のコレクション。

モバイルアクセシビリティのチェックリスト

この記事は、モバイルアプリ開発者向けのアクセシビリティ要求事項の簡潔なチェックリストを提供します。

認知的アクセシビリティ (en-US)

ウェブコンテンツを作成する際には、認知機能障碍者がアクセスできるようにすることを意識してください。

痙攣性疾患に対するアクセシビリティ (en-US)

ウェブ上のビジュアルコンテンツの中には、特定の脳疾患を持つ人に発作を引き起こす可能性があるものがあります。問題となりうるコンテンツの種類を理解し、それらを回避するためのツールや戦略を見つけましょう。

関連情報
----

* WAI Interest Group
* 開発者ガイド


HTTP

HTTP
====

**ハイパーテキスト転送プロトコル *(Hypertext Transfer Protocol, HTTP)*** は HTML などのハイパーメディア文書を転送するためのアプリケーション層プロトコルです。このプロトコルはウェブブラウザー(クライアント)とウェブサーバー間の通信を目的として設計されていますが、他の用途でも使用されることがあります。 HTTP は旧来のクライアント・サーバーモデルに則っており、クライアントはサーバーにリクエストを送信するためにポートを開き、サーバー側からのレスポンスが返ってくるまで待機します。 HTTP はいわゆるステートレスプロトコルであり、つまりサーバーは 2 つのリクエスト間で何もデータを保持しません。

チュートリアル
-------

ガイドやチュートリアルで、 HTTP の使い方を学びましょう。

HTTP の概要

クライアントサーバープロトコルの基本的な特徴です。 HTTP で実現できること、また何故それを使用すべきなのかを説明します。

HTTP キャッシュ

キャッシュは高速で快適なウェブサイトの閲覧を可能にするために非常に需要な要素です。この記事では様々なキャッシュの手法や、HTTP ヘッダーでどのようにそれらを制御するかを説明します。

HTTP Cookie

Cookie の動作は RFC 6265 で定義されています。サーバーは HTTP リクエストをクライアント側に送信する際、`Set-Cookie` ヘッダー付与することができます。クッキーの値は `Cookie` リクエストのヘッダーの識別子に含まれた、同一サーバーに対する全てのリクエストを保持しており、クライアント側はそれを返します。また、Cookie に有効期限を設定したり、特定のドメインやパスだけにステートフルな挙動を限定することもできます。

オリジン間リソース共有 (CORS)

**サイト間 HTTP リクエスト**とは、リクエストを生成したリソースがあるドメインとは **別のドメイン** のリソースをリクエストする HTTP リクエストのことを指します。例えば、ドメイン A (`http://domaina.example/`) から読み込まれた HTML ページが、`img` 要素を使用してドメイン B の画像 (`http://domainb.foo/image.jpg`) に対するリクエストを発行することがそれにあたります。昨今のウェブページでは、CSS スタイルシートや画像、スクリプト、その他のリソースを含め、上記の例のようにサイトを跨ってデータを読み込むのが一般的になっています。CORS によって、ウェブ開発者がこのようなサイト間リクエストに対して個々のサイトが示す挙動を制御することができます。

HTTP クライアントヒント

**クライアントヒント**は、サーバーがクライアントから端末、ネットワーク、ユーザー、ユーザーエージェント固有の環境設定に関する情報を積極的にリクエストするために使用できるレスポンスヘッダーの集合です。
 サーバーは、クライアントが提供する情報をもとに、送信するリソースを決定することができます。

HTTP の進化

初期バージョンの HTTP から最新の HTTP/2、姿を現した HTTP/3 以降までの変革を端的に説明します。

Mozilla ウェブセキュリティガイドライン

運用チームがセキュアなウェブアプリケーションを開発するのに役立つコツをまとめました。

HTTP メッセージ

HTTP/1.x や HTTP/2 の多様なメッセージが持つ型や構造を説明します。

HTTP セッションの典型例

一般的な HTTP セッションのフローを示しながら説明します。

HTTP/1.x のコネクション制御

HTTP/1.x で使用できる 3 種類の通信制御モデルの持つ長所と短所を説明します。

リファレンス
------

詳細な HTTP の参考資料を見ていきましょう。

HTTP ヘッダー

HTTP メッセージヘッダーは、リソース、あるいはサーバーやクライアントの挙動を示すために使用します。ヘッダーは IANA レジストリー に収録されていますが。IANA は 新たに提案された HTTP メッセージヘッダーのレジストリーも管理しています。

HTTP リクエストメソッド

HTTP では多様な操作を実現することができます。一般的な `GET` や `POST` だけでなく、`OPTIONS` や `DELETE`、`TRACE` などのあまり一般的ではないリクエストも包括しています。

HTTP ステータスレスポンスコード

HTTP レスポンスコードは、特定の HTTP リクエストが正常に完了したかを示します。レスポンスは通知レスポンス、成功レスポンス、リダイレクション、クライアントエラー、サーバーエラーの 5 つのクラスに分類されます。

CSP ディレクティブ

ウェブサイトの管理者は、`Content-Security-Policy` レスポンスヘッダーフィールドで、ユーザーエージェントが特定のページで読み込むことが許可されているリソースを制御することができます。いくつか例外はありますが、大元のサーバーやスクリプトのエンドポイントの特定をポリシーとして含んでいることが多いです。

ツールとリソース
--------

HTTP の理解やデバッグに役立つツールやリソースです。

Firefox 開発者ツール

ネットワークモニター

Mozilla 研究室

開発者、システム管理者、セキュリティの専門家の、安全でセキュアなサイトの構築を支援するプロジェクトです。

RedBot

キャッシュ関係のヘッダーを検証するツールです。

How Browsers Work (2011)

ブラウザーの内部処理や、 HTTP プロトコルのリクエスト処理のフローに関してとても詳しく書かれた記事です。ウェブ開発者であれば一読するべき記事になります。


SVG: スケーラブルベクターグラフィック

SVG: スケーラブルベクターグラフィック
=====================

SVG を始めましょう
-----------

**スケーラブルベクターグラフィック (SVG)** は XML ベースのマークアップ言語で、二次元ベースのベクターグラフィックを記述します。

そのため、テキストベースで、どんなサイズでもきれいにレンダリングできる画像を記述するためのオープンなウェブ標準であり、特に CSS、DOM、JavaScript、SMIL を含む他のウェブ標準とうまく動作するように設計されています。 SVG は本質的に、テキストに対する HTML のような位置づけの、グラフィックに対するものです。

SVG 画像と関連する振る舞いは XML のテキストファイルに定義されるので、検索したり、インデックスをつけたり、スクリプトで操作したり、圧縮したりすることができます。加えて、これはあらゆるテキストエディターやドローソフトで作成したり編集したりできることを意味します。

旧来の JPEG や PNG のようなビットマップ画像形式と比較して、 SVG 形式のベクター画像は、品質を損なうことなく任意の大きさでレンダリングすることができ、テキストを更新することで、グラフィックエディターを使用せずに簡単にローカライズすることができます。適切なライブラリーを使用すれば、 SVG ファイルをその場でローカライズすることも可能です。

SVG は 1999 年からワールドワイドウェブコンソーシアム (W3C) によって開発されています。

SVG 教本も参照してください。

ドキュメント
------

SVG 要素リファレンス

各 SVG 要素についての詳細情報です。

SVG 属性リファレンス

各 SVG 属性の詳細情報です。

SVG DOM インターフェイスリファレンス

JavaScript と連携するための SVG DOM API の詳細情報です。

HTML コンテンツへ SVG 効果を適用する

SVG は HTML、CSS と JavaScript と連携して動作します。SVG を使用することで、通常の HTML ページやウェブアプリケーションを拡張することができます。

ツール
---

* SVG テストスイート
* Markup Validator
例
-

* SVG authoring guidelines
* 画像としての SVG
* SMIL を用いた SVG のアニメーション
* SVG art gallery
* D3 (HTML, SVG, CSS でデータを可視化する JavaScript ライブラリー)


ウェブメディア技術

ウェブメディア技術
=========

長年に渡り、音声、動画、およびその他のメディアを表示、作成および、管理するためのウェブの能力は、ますます速度を上げて成長してきました。今日では数多くの API が利用可能であり、HTML 要素や DOM インターフェイスなどにより、これらの作業を行うだけでなく、メディアを他の技術と組み合わせて使用することで、本当に驚くべきことができるようになっています。この記事は、あなたがそれらを習得するために役立つであろう参考資料へのリンクを含む様々な API を列挙しています。

参考文献
----

### HTML

これらの記事は、メディア開発者向け HTML 機能について説明しています。

`<audio>`

`<audio>` 要素は、ウェブのコンテキストで音声を再生するために使用されます。これは、より複雑なメディアの設置先として目立たないように使用することもでき、また、オーディオファイルの再生をユーザーが制御するための可視のコントロールとともに使用することができます。JavaScript からは、`HTMLAudioElement` オブジェクトとしてアクセスできます。

`<video>`

`<video>` 要素は、ウェブのコンテキストにおける動画コンテンツのエンドポイントです。単純に動画ファイルを表示するため、また、ストリーミング動画コンテンツの宛先として使用することができます。`<video>` は、メディア API を他の HTML および、DOM 技術とリンクさせるための手段としても、使用できます。例えば、`<canvas>` (フレームの取得と操作) です。JavaScript から `HTMLVideoElement` オブジェクトとしてアクセスできます。

`<track>`

HTML の `<track>` 要素は `<audio>` または `<video>` 要素内に配置して、メディア再生時に使用する WebVTT 形式の字幕または、キャプショントラックへの参照を提供することができます。JavaScript から `HTMLTrackElement` オブジェクトとしてアクセスできます。

`<source>`

HTML の `<source>` 要素は、`<audio>` または `<video>` 要素内で使用して、表示するソースメディアを指定します。さまざまな形式、大きさ、解像度による複数のソースを使用してメディアを提供することができます。JavaScript から `HTMLSourceElement` オブジェクトとしてアクセスできます。

### API

メディア能力 API (en-US)

メディア能力 API を使用すると、アプリやサイトが実行されているデバイスのエンコーディングとデコーディングの能力を判断できます。これにより、どのフォーマットをいつ使用するかをリアルタイムで判断することができます。

メディアキャプチャと Streams API

ローカルおよび、ネットワークを介したメディアのストリーミング、記録、操作を可能にする API のリファレンスです。これには、ビデオ、オーディオおよび、静止画をキャプチャするためのローカルカメラとマイクの使用が含まれます。

メディアセッション API

メディアセッション API は、メディア通知をカスタマイズする方法を提供します。メディアセッション API は、ウェブアプリが再生しているメディアのユーザーエージェントが表示するためのメタデータを提供します。また、キーボード、ヘッドセット、リモコンなどにあるハードウェアキーや、モバイル機器の通知領域やロック画面にあるソフトウェアキーなどのプラットフォームメディアキーにアクセスするためのアクションハンドラーも提供しています。

MediaStream 収録 API

MediaStream 収録 API を使用すると、メディアストリームをキャプチャしてデータ処理または、フィルターリングを行ったり、ディスクに記録したりすることができます。

ウェブオーディオ API

ウェブオーディオ API を使用すると、サウンドデータをリアルタイムおよび、録音済み素材の両方で生成、フィルターリングおよび、操作してからそのオーディオを `<audio>` 要素、メディアストリームまたは、ディスクなどへ送信できます。

WebRTC

WebRTC (Web Real-Time Communication、ウェブリアルタイム通信) を使用すると、直接インターネット上の 2 つのピア間で、ライブオーディオとビデオをストリーミングしたり、任意のデータを転送したりできます。

ガイド
---

HTML での音声と動画の使用

HTML の `<audio>` 要素と `<video>` 要素の使い方のガイドです。

アクセシビリティのあるマルチメディア

このガイドでは、ウェブデザイナーと開発者が、さまざまな能力を持つ人々に対して、アクセスできるコンテンツを作成する方法について説明しています。これは単に、`<img>` 要素の `alt` 属性を使用することから、スクリーンリーダー用のメディアにタグを付けることまでの範囲に及びます。

ウェブ上のメディア種別と形式のガイド

ウェブ上の画像、音声および、動画メディアに使用できる、ファイルタイプとコーデックのガイドです。これには、どの種類のコンテンツにどの形式を使用するのかということ、フォールバックの提供方法や、メディアタイプの優先順位付けなどのベストプラクティスおよび、各メディアコンテナーとコーデックの一般的なブラウザー対応情報が含まれます。

音声と動画のストリーミングガイド

音声と動画のストリーミング方法、そしてストリームの最高の品質とパフォーマンスを確保するために活用できる技術と技術を網羅したガイドです。

メディアおよびウェブオーディオ API の自動再生ガイド

メディアや音声の予期しない自動再生は、ユーザーにとってはうれしくない驚きです。自動再生はある目的を果たす一方で、慎重に使用する必要があります。ユーザーがこれを制御できるようにするために、現在多くのブラウザーで自動再生ブロック機能が提供されています。この記事は自動再生の手引きとして、いつ、どのように使用するのかそして、ブラウザーを使って自動再生ブロックを適切に処理する方法についてのヒントを提供します。

ウェブオーディオの空間演出の基本 (en-US)

画面に描画された 3D シーンや、ヘッドセットを使用して体験する複合現実感などの 3D 環境では、音声が音源の方向から聞こえてくるように演奏することが重要です。このガイドでは、その方法について説明します。

その他
---

面白い方法でメディア API と並行して使用できるような、興味深いトピックもあります。

キャンバス API

Canvas API を使用すると、`<canvas>` に描画して、画像の内容を操作したり変更したりできます。これは、`<canvas>` 要素を動画の再生先または、カメラのキャプチャ先として設定して、ビデオフレームをキャプチャして操作できるようにするなど、さまざまな方法によるメディア使用を可能にします。

WebGL

WebGL は、既存の Canvas API 上に OpenGL ES 互換の API を提供し、ウェブ上で強力な 3D グラフィックスを実行することを可能にします。キャンバスを通して、これはメディアコンテンツに 3D画像を追加するように使用できます。

WebXR

WebXR は最終的に、WebVR に代わるもので、バーチャルリアリティ (VR) と拡張現実 (AR) コンテンツの作成をサポートする技術です。複合現実的なコンテンツはその後、デバイスの画面に表示されるか、ゴーグルやヘッドセットを使用して表示されます。

WebVR
非推奨

Web Virtual Reality API は、Oculus Rift や HTC Vive などのバーチャルリアリティ (VR) デバイスをサポートしているため、開発者はユーザーの位置や動きを 3D シーン内の動きに変換して、デバイスに表示することができます。WebVR は順次、WebXR に置き換えられることが望まれています。WebXR はより広範囲なユースケースをカバーします。


EXSLT

EXSLT
=====

EXSLT は XSLT に対する一連の拡張機能です。いくつものモジュールがあります。 Firefox が対応しているものは以下の通りです。

Math (math)EXSLT の Math パッケージは、数値の操作とノードの比較のための機能を提供します。 Math パッケージの名前空間は `http://exslt.org/math` です。

共通 (exsl)EXSLT 共通パッケージは、 XSLT の機能を拡張する基本的な関数を提供します。共通パッケージの名前空間は `http://exslt.org/common` です。

EXSLT モジュール
-----------

EXSLT関数を使用するには、その関数が属する名前空間を宣言し、関数を呼び出す際に適切な接頭辞を使用する必要があります。例えば、正規表現パッケージを使用する場合は次のようにします。

```xml
<xsl:stylesheet version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 xmlns:regexp="http://exslt.org/regular-expressions">
  <xsl:template match="/">
    ...
    <xsl:value-of select="regexp:replace(/root/@value, 'before', 'gi', 'AFTER')"/>
    ...
  </xsl:template>

</xsl:stylesheet>
```

### 共通

EXSLT Common パッケージは、 XSLT の機能を拡張する基本的な関数を提供します。 Common パッケージの名前空間は `http://exslt.org/common` です。

#### 関数

* `exsl:node-set()`
* `exsl:object-type()`
### Math

EXSLT の Math パッケージは、数値を扱ったり、ノードを比較したりするための関数を提供します。 Math パッケージの名前空間は `http://exslt.org/math` です。

#### 関数

* `math:highest()`
* `math:lowest()`
* `math:max()` (en-US)
* `math:min()` (en-US)
### 正規表現

EXSLT 正規表現パッケージは、JavaScript スタイルの正規表現を使って、テキストのテスト、照合、置換ができる関数を提供します。

EXSLT 正規表現の名前空間は、`http://exslt.org/regular-expressions` です。

#### 関数

* `regexp:match()` (en-US)
* `regexp:replace()` (en-US)
* `regexp:test()` (en-US)
### セット

EXSLT セットパッケージは、集合の操作ができる関数を提供します。これらの関数の名前空間は `http://exslt.org/sets` です。

#### 関数

* `set:difference()` (en-US)
* `set:distinct()` (en-US)
* `set:intersection()` (en-US)
* `set:has-same-node()` (en-US)
* `set:leading()` (en-US)
* `set:trailing()` (en-US)
### 文字列

EXSLT 文字列パッケージは、文字列の操作ができる関数を提供します。文字列パッケージの名前空間は `http://exslt.org/strings` です。

#### 関数

* `str:concat()` (en-US)
* `str:split()` (en-US)
* `str:tokenize()` (en-US)
関連情報
----

* EXSLT ウェブサイト


プログレッシブウェブアプリ (PWA)

プログレッシブウェブアプリ (PWA)
===================

![PWA community logo](/ja/docs/Web/Progressive_web_apps/pwa.png)**プログレッシブウェブアプリ (Progressive web apps, PWA)** は、新しいウェブ API と伝統的なプログレッシブな拡張戦略を使用して、クロスプラットフォームのウェブアプリケーションにネイティブアプリと同様の使い勝手をもたらすウェブアプリのことです。プログレッシブウェブアプリは正式な標準ではありませんが、有用なデザインパターンです。 PWA は、特定のウェブ技術や技法の使用を含む、一連のアプリケーション属性を包含しているという点で AJAX や他の同様のパターンに似ていると考えることができます。この一連の文書では、これについて知るために必要なすべてをお伝えします。

ウェブアプリを PWA と呼ぶには、技術的に言えば、 安全なコンテキスト (**HTTPS**)、1 つ以上のサービスワーカー、マニフェストファイルを持つべきです。

安全なコンテキスト (HTTPS)

このウェブアプリケーションは、安全なネットワーク上で提供しなければなりません。安全なサイトにすることは、良い習慣であるだけでなく、特にユーザーが安全な取引を行う必要がある場合には、ウェブアプリケーションを信頼できるサイトとして確立することにもつながります。位置情報やサービスワーカーなどの PWA に関連する機能のほとんどは、アプリが HTTPS を使用して読み込まれた場合にのみ利用できます。

サービスワーカー

サービスワーカーとは、ウェブブラウザーがネットワークのリクエストや資産のキャッシュに介入し、その方法を制御することができるスクリプトのことです。サービスワーカーを使用することで、ウェブ開発者は信頼できる高速なウェブページやオフライン操作を作成することができます。

マニフェストファイル

アプリがユーザーにどのように表示されるかを制御し、プログレッシブウェブアプリを確実に発見できるようにする JSON ファイルです。アプリの名前、開始 URL、アイコン、その他ウェブサイトをアプリのような形式に変換するために必要なすべての詳細が記述されています。

PWA の利点
-------

PWA は発見でき、インストールでき、リンクでき、ネットワークに依存せず、プログレッシブで、再エンゲージでき、レスポンシブで、安全です。これらが何を意味するのかについては、プログレッシブウェブアプリの利点をお読みください。

PWA の実装方法については、 PWA 開発者ガイドをお読みください。

ドキュメント
------

<-- 以下のものは一時的な自動生成リストで、すぐに置き換えられます -->

**警告:** **ここから下は全て旧バージョンのままで、他のコンテンツの全面見直しに合わせて刷新していきます。**

基本的な PWA のガイド
-------------

以下のガイドは PWA を実装するのに必要なことを、単純な例を実行し、すべての部分がどのように動作するかを示します。

1. プログレッシブウェブアプリの紹介
2. プログレッシブウェブアプリの構造
3. サービスワーカーで PWA をオフラインで動作するようにする
4. PWA をインストール可能にする方法
5. 通知とプッシュ通知を使用して PWA を再エンゲージ可能にする方法
6. プログレッシブ読み込み
技術ガイド
-----

* クライアント側ストレージ — ウェブストレージ, IndexedDB, サービスワーカーをいつ、どのように使うかを示すとても長いガイド。
* サービスワーカーの使用 — より詳しい Service Worker API のガイド。
* IndexedDB の使用 — IndexedDB の基礎、詳しく説明されている。
* Web Storage API の使用 — ウェブストレージ API はシンプルにできている。
* アプリケーションシェルアーキテクチャによるすばやいウェブアプリの読み込み — App Shell コーディングパターンを使用して、すばやく読み込まれるアプリの作成のガイド。
* Push API の使用 — Web Push API の背景にある要点を学ぶ。
* Notifications API の使用 — ウェブ通知の簡単な説明。
* レスポンシブデザインの構成要素 — モダンアプリレイアウトにとって重要なレスポンシブウェブデザインの基本を学ぶ。
* モバイルファースト — レスポンシブなアプリケーションを作る時によく、モバイルレイアウトを既定として作って、その上により広いレイアウトを作る意味がある。
* ホーム画面追加のためのガイド — アプリをホーム画面に追加 (A2HS) する利点を学ぶ。
ツール
---

* localForage — クライアントサイドのデータストレージを簡単に扱えるようにする素晴らしいシンプルな JavaScript ライブラリ、これは既定で IndexedDB を使用し、必要に応じて Web SQL/Web Storage にフォールバックする。
* ServiceWorkerWare — Service Worker の開発を簡単にする Express のようなマイクロフレームワーク。
* oghliner — テンプレートだけではなく、オフラインでウェブアプリケーションを Github Pages にデプロイするツール。
* sw-precache — 特定のリソースを事前にキャッシュする Service Worker のコードを生成する node のモジュール。
* workbox — 気持ち的には、より進んだキャッシングの手法と簡単なプリキャッシュを有する sw-precache の後継者。
* upup — あなたのサイトが常にあなたのユーザーのために存在するようにする小さなスクリプト。
* The service worker cookbook — 一連の素晴らしい Service Worker/プッシュレシピ、オフラインアプリケーションの実装方法を紹介しているが、より多くの機能を持っている。
* PWA VS Code extension - VS Code 環境でプログレッシブウェブアプリを構築するために必要な、すべての重要なコードスニペットのコレクションです。

* Progressive web apps on Google Developers
* Alex Russell による Progressive Web Apps: Escaping Tabs Without Losing Our Soul
* Progressive Web Apps Check List
* Google による The Lighthouse Tool
* Tools for building progressive web apps with Angular.
* Offline-capable Pokédex web site.
* Hacker News readers as Progressive Web Apps.
* Progressive Web Apps: Everything You Need To Know
* Collection of resources, codelabs and tools you need to build PWAs by the team at pwafire.org
* Setting up your Progressive Web App Development environment