recursal/MDN huggingface dataset:
キーボード API
=========

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

キーボード API は、ブラウザーを実行している端末に取り付けられている物理キーボードを操作するためのメソッドを提供します。

いくつかの機能を提供します。「キーボードマッピング」は、キーボードの特定の物理キーによって生成された文字列を取得するためのインターフェイスを提供し、そのキーをユーザーに正しく識別させます。「キーボードロック」は、通常ユーザーエージェントやオペレーティングシステムによって予約されているキーを、ウェブページがキャプチャできるようにします。キーボード API の使用目的は、ゲームやリモートアクセスアプリなど、全画面の没入感を提供するウェブアプリケーションです。

キーボード API の概念と使用方法
------------------

### キーボードマッピング

物理的なキーボードでは、 `code` 属性は押されたキーの物理的な位置に、 `key` 属性はキーボードの物理的な位置でキーを押したときに生成される文字列になります。 `key` の値はキーボードのロケール（'en-US' など）、レイアウト（'QWERTY' など）、修飾キーの状態（`Shift`、`Control` など）に影響されます。歴史的に、その情報を取得する方法はありませんでした。

キーボードマップ API は、 `Keyboard` インターフェイスと `KeyboardLayoutMap` インターフェイスを通して、特定のキー押下によって生成された文字列を取得する方法を提供します。 `Keyboard` インターフェイスは `navigator.keyboard` からアクセスします。 `Keyboard` は `Keyboard.getLayoutMap` メソッドを提供し、コードをキーに変換するためのメンバーを含む `KeyboardLayoutMap` オブジェクトで解決するプロミスを返します。有効なコード値のリストは、 UI Events KeyboardEvent code Values 仕様の Writing System Keys の節にあります。

次の例は、英語の QWERTY キーボードで `W` と書かれたキーに関連する場所固有またはレイアウト固有の文字列を取得する方法を示しています。


```js
if (navigator.keyboard) {
  const keyboard = navigator.keyboard;
  keyboard.getLayoutMap().then((keyboardLayoutMap) => {
    const upKey = keyboardLayoutMap.get("KeyW");
    window.alert(`Press ${upKey} to move up.`);
  });
} else {
  // ここで何かを行う
}
```

### キーボードロック

リッチで双方向的なウェブページ、ゲーム、リモートストリーミングの体験では、全画面表示モード中に特別なキーやキーボード ショートカットにアクセスする必要があることがよくあります。このようなキーや キーの組み合わせの例には、`Escape`、`Alt+Tab`、`Ctrl+N` などがあります。これらのキーとキーの組み合わせは、通常、次の例に示すように、ユーザーエージェントまたは基礎となるオペレーティングシステムによってキャプチャされます。

`W`、`A`、`S`、`D` の各キーをキャプチャするには、それぞれのキーのキーコード属性値を含むリストで `lock()` を呼び出します。


```js
navigator.keyboard.lock(["KeyW", "KeyA", "KeyS", "KeyD"]);
```


これは、キーを押したときにどの修飾キーが使われたかに関係なく、これらのキーを捕捉します。標準的なアメリカ合衆国の QWERTY 配列と仮定すると、 `KeyW` を登録することで、`W`、`Shift+W`、`Control+W`、`Control+Shift+W`、およびその他のすべての修飾キーと `W` の組み合わせが確実にアプリに送信されます。 `KeyA`、`KeyS`、`KeyD` についても同様です。

### システムキーの書き込み

`Keyboard.lock` と `KeyboardLayoutMap` インターフェイスの様々なメソッドに渡されるコードを「システムキーの書き込み」と呼びます。

物理キーは現在のロケールやキーボードレイアウトによって意味が変わるため、 Writing System Keys は UI Events KeyboardEvent code Values 仕様の Writing System Keys の章で定義されています。これらのキーを以下に示します。青いキーはすべての標準的なキーボードにありますが、緑のキーは一部のキーボードにしかありません。

![UI Events KeyboardEvent code Values 仕様で定義されているシステムキーの書き込み。](/ja/docs/Web/API/Keyboard_API/writing-system-keys.png)

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

`Keyboard` 
Experimental

キーボードレイアウトマップを取得し、物理キーボードからのキー押下のキャプチャを切り替える関数を提供します。

`KeyboardLayoutMap` 
Experimental

特定の物理キーに関連付けられた文字列を取得するための関数を持つ、マップ風のオブジェクトです。

`navigator.keyboard` 読取専用  
Experimental

キーボードレイアウトマップを取得し、物理キーボードからのキー押下のキャプチャを切り替える関数へのアクセスを提供する `Keyboard` オブジェクトを返します。

仕様書
---

| Specification |
| --- |
| Keyboard Lock  |
| Keyboard Map  |

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

### api.Keyboard

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

### api.KeyboardLayoutMap

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

**`XRRigidTransform`** は、位置と向きによって記述される 3D 幾何学的変換を表す WebXR API (en-US) のインターフェイスです。

`XRRigidTransform` は、以下を含む WebXR API 全体で変換を指定するために使用されます。

* `getOffsetReferenceSpace()` を使用して新しい参照空間を作成するときに使用する、親参照空間を基準にしたオフセットと向き。
* `XRView` (en-US) の `transform` (en-US)。
* `XRPose` (en-US) の `transform` (en-US)。
* `XRReferenceSpace` が受信した `reset` イベントにある `XRReferenceSpaceEvent` イベントの `transform` プロパティ。

行列データを提供する裸の配列ではなく、これらの場所で `XRRigidTransform` を使用する利点は、`XRRigidTransform` が変換の逆の計算などを自動的に実行することです。 さらに良いことに、一度計算したらキャッシュされるため、後続の要求は大幅に高速化されます。

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

`new XRRigidTransform()`

指定された位置や向きを適用する変換を表す新しい `XRRigidTransform` オブジェクトを作成します。

プロパティ
-----

`XRRigidTransform.position` 読取専用  
Experimental

変換の平行移動成分を記述する、メートルで表される 3 次元の点を指定する `DOMPointReadOnly`。 `w` プロパティは常に `1.0` です。

`XRRigidTransform.orientation` 読取専用  
Experimental

変換の回転成分を記述する単位クォータニオンを含む `DOMPointReadOnly`。 単位クォータニオンとして、その長さは常に `1.0` に正規化されます。

`XRRigidTransform.matrix` 読取専用  
Experimental

16 メンバーの `Float32Array` (en-US) の形式で変換行列を返します。 配列を使用して行列を表す方法については、行列のフォーマットのセクションを参照してください。


`XRRigidTransform.inverse` 読取専用  
Experimental

この変換の逆である `XRRigidTransform` を返します。 つまり、元の変換によって以前に変換されたオブジェクトに適用された場合、変換が元に戻され、元のオブジェクトが返されます。

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

`XRRigidTransform` が解釈されると、位置が適用される前に、影響を受けるオブジェクトに常に向きが適用されます。

例
-

このコードスニペットは、`XRRigidTransform` を作成して、新しい参照空間を作成するときに使用する現在の参照空間に対するオフセットと向きを指定します。 次に、セッションの `requestAnimationFrame()` (en-US) メソッドを呼び出して、最初のアニメーションフレームコールバックを要求します。


```js
xrSession.requestReferenceSpace(refSpaceType)
.then((refSpace) => {
  xrReferenceSpace = refSpace;
  xrReferenceSpace = xrReferenceSpace.getOffsetReferenceSpace(
        new XRRigidTransform(viewerStartPosition, cubeOrientation));
  animationFrameRequestID = xrSession.requestAnimationFrame(drawFrame);
```

仕様
--

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

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

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

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

WebXR 機器 API の **`XRInputSource`** インターフェースは、ユーザーの WebXR 互換の仮想現実または拡張現実のシステムの一部であるコントロール入力の単一ソースを記述します。機器は使用されているプラットフォームに固有ですが、それが向けられている方向を提供し、ユーザーが機器を使用してアクションを実行することをトリガーにした場合、オプションでイベントを生成することができます。

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

`gamepad` 読取専用 

XR 入力ソースのボタンと軸の状態を説明する `Gamepad` オブジェクト（ゲームパッドまたは同等の機器の場合）。 その機器がゲームパッドのような機器でない場合、このプロパティの値は `null` です。

`gripSpace` 読取専用 

`handedness` で示された手に持っているように見えるオブジェクトをレンダリングするために使用するポーズを原点が追跡する `XRSpace` (en-US)。この空間の向きは、手がオブジェクトをつかんでいる角度を示します。 この空間の使用方法の詳細については、`gripSpace` のメイン記事をお読みください。

`hand` 読取専用 

基盤となっているハンドトラッキング機器にアクセスするための `XRHand` (en-US) オブジェクト。

`handedness` 読取専用 

この `XRInputSource` によって表される機器を使用している手がある場合はそれを示す文字列。 値は、`left`、`right`、`none` のいずれかになります。

`profiles` 読取専用 

文字列の配列。 それぞれが、この入力ソースの望ましい視覚的表現と振る舞いを説明する入力プロファイルの名前を指定します。

`targetRayMode` 読取専用 

ターゲット光線を生成するために使用する方法を `gaze`、`tracked-pointer`、`screen` のいずれかで示す文字列。

`targetRaySpace` 読取専用 

ターゲット光線の原点とそれが伸びる方向を定義する `XRSpace` (en-US) オブジェクト。 この空間は、`targetRayMode` で定義された方法を使用して確立されます。

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

*`XRInputSource` インターフェイスはメソッドを定義していません。*

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

### アクションとターゲット光線

機器が向けられている方向を示す場合、これは**ターゲット光線**（target ray）を使用して行われます。 これは、機器の位置から、機器が向けられている方向に外側に伸びる光線です。

**ハンドコントローラから放出されるターゲット光線。**

![ハンドコントローラーから放出されるターゲット光線を示すスクリーンショット](/ja/docs/Web/API/XRInputSource/example-target-ray.gif)

機器にトリガーまたは他のスクイーズ可能な入力（ユーザーが拳を握ったことを認識するハンドジェスチャー機器など）が含まれている場合、そのアクションは**プライマリースクイーズアクション** (primary squeeze action) と呼ばれます。 プライマリースクイーズアクションは、オブジェクトをつかんだり、ツールや武器のトリガーを押したりするなど、実際のグリップアクションに対応している必要があります。ユーザーがトリガーを押したりグリップを締め付けたりするなどしてスクイーズアクションが開始されると、`squeezestart` (en-US) イベントが `XRSession` に送信されます。 アクションが完了し、ユーザーがトリガーまたはグリップを放すと、`squeeze` (en-US) イベントが送信されます。 この後に `squeezeend` (en-US) が続き、アクションが完了ではなく中止された場合にも送信されます。

機器にボタンまたはその他の押すことができる入力コントロールがある場合、それは**プライマリ入力ソース** (primary input source) であり、このボタンは**プライマリーアクション** (primary action) です。 プライマリーアクションは、ユーザーがボタンを押すか、タッチパッドまたはサムスティックのトップボタンをクリックするか、ボタンのようなアクションを呼び出す手のジェスチャーまたは音声コマンドを使用するときに発生する可能性があります。 プライマリーアクションが開始されると、`selectstart` (en-US) イベントが `XRSession` (en-US) に送信されます。 アクションが完了すると（ユーザーがボタンを離したときなど）、`select` (en-US) イベントが送信されます。 最後に、それが完了すると、またはユーザーがアクションを中止すると、`selectend` (en-US) イベントがセッションオブジェクトに送信されます。

アクションは、ユーザーが機器固有の方法で中止するか、アクションが完了する前に入力機器が切断された場合に中止される可能性があります。

### ローカル座標系

各入力ソースには独自のローカル座標系があります。 これは、入力の座標系を世界座標系にマッピングするために使用する `XRSpace` (en-US) である `gripSpace` プロパティによって記述されます。 次に、グリップ空間の座標系を使用してオブジェクトをレンダリングし、ユーザーの手に持っているように見せることができます。

![gripSpace プロパティで定義された座標系を示す図](/ja/docs/Web/API/XRInputSource/xr-hand-axes.svg)

入力ソースの座標系の詳細については、`gripSpace` プロパティについて詳しく説明している記事を参照してください。

仕様
--

| Specification |
| --- |
| WebXR Device API # xrinputsource-interface |

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

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

関連情報
----

* WebXR 機器 API
* 入力と入力ソース (en-US)
* `XRInputSourceArray` (en-US)
* `XRSpace` (en-US)
clearInterval()
===============

 グローバルの **`clearInterval()`** メソッドは、以前に `setInterval()` の呼び出しによって確立されたタイマーを利用した繰り返し動作を取り消します。
 指定された引数で前回確立されたアクションを識別できなかった場合、このメソッドは何も行いません。

構文
--


```js
clearInterval(intervalID)
```

### 引数

`intervalID`

取り消す繰り返し動作の識別子です。この ID は対応する `setInterval()` の呼び出しの返値です。


`setInterval()` と `setTimeout()` で使用する ID のプールが共有されていることは注目に値します。つまり、技術的には `clearInterval()` と `clearTimeout()` を交換することができます。
 しかし、わかりやすくするために、そうすることは避けるべきです。

### 返値

なし (`undefined`)。

例
-

`setInterval()` の例を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-clearinterval-dev |

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

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

関連情報
----

* `setTimeout`
* `setInterval`
* `clearTimeout`
* `Window.requestAnimationFrame`
ValidityState
=============

Baseline 2023
-------------

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

* Learn more
* See full compatibility
* Report feedback
**`ValidityState`** インターフェイスは、制約の検証に関して、要素が取りうる*妥当性の状態*を表します。要素の値が不正な場合、なぜ検証に失敗したのかを知る手がかりにもなります。

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

下記のプロパティはどれも論理値を返します。`true` は指定された検証が失敗したことを表します。ただし `valid` プロパティだけは例外で、 `true` が要素の値がすべての制約に適合していることを表します。

`badInput` 読取専用 

論理値で、 `true` はブラウザーが処理できない入力値をユーザーが入力したことを示します。

`customError` 読取専用 

論理値で、その要素のカスタム検証メッセージが `setCustomValidity()` メソッドによって空でない文字列に設定されているかどうかを示します。

`patternMismatch` 読取専用 

論理値で、 `true` は値が `pattern` の指定と一致しないことを示し、 `false` は一致することを示します。 `true` の場合、その要素は CSS の `:invalid` 擬似クラスに一致します。

`rangeOverflow` 読取専用 

論理値で、 `true` は値が `max` 属性で指定された最大値を超えていることを示し、 `false` はその最大値以下である場合を示します。 `true` の場合、その要素は CSS の `:invalid` および `:out-of-range` の各擬似クラスに一致します。

`rangeUnderflow` 読取専用 

論理値で、 `true` は値が `min` 属性で指定された最小値未満であることを示し、 `false` はその最小値以上であることを示します。 `true` の場合、その要素は CSS の `:invalid` および `:out-of-range` の各擬似クラスに一致します。

`stepMismatch` 読取専用 

論理値で、 `true` は値が `step` 属性で決められた規則に合わないこと (つまり、step の値で割り切れないこと) を示し、 `false` は刻みの規則に合っていることを示します。 `true` の場合、その要素は CSS の `:invalid` および `:out-of-range` の各擬似クラスに一致します。

`tooLong` 読取専用 

論理値で、 `true` は値が `HTMLInputElement` または `HTMLTextAreaElement` オブジェクトの `maxlength` で指定された長さを超えていることを示し、 `false` は長さがその最長値以下であることを示します。 *注: Gecko ではこのプロパティが `true` になることはありません。要素の値の長さが `maxlength` を超えないようになっているからです。* `true` の場合、その要素は CSS の `:invalid` および `:out-of-range` の各擬似クラスに一致します。

`tooShort` 読取専用 

論理値で、 `true` は値が `HTMLInputElement` または `HTMLTextAreaElement` オブジェクトの `minlength` で指定された長さに満たないことを示し、 `false` は長さがその最短値以上であることを示します。 `true` の場合、その要素は CSS の `:invalid` および `:out-of-range` の各擬似クラスに一致します。

`typeMismatch` 読取専用 

論理値で、 `true` は値が (`type` が `email` または `url` の場合に) 要求された構文に合っていないことを示し、`false` は構文が正しいことを示します。 `true` の場合、その要素は CSS の `:invalid` 擬似クラスに一致します。

`valid` 読取専用 

論理値で、 `true` はその要素がすべての制約検証に適合し、合格したとみられることを示し、 `false` はいずれかの制約に適合しなかったことを示します。 `true` の場合、 CSS の `:valid` 擬似クラスに一致します。それ以外の場合は CSS の `:invalid` 擬似クラスに一致します。

`valueMissing` 読取専用 

論理値で、 `true` はその要素に `required` 属性があるものの、値がないことを示し、 `false` はそうではないことを示します。 `true` の場合、その要素は CSS の `:invalid` 擬似クラスに一致します。

仕様書
---

| Specification |
| --- |
| HTML Standard # the-constraint-validation-api:validitystate-3 |

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

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

関連情報
----

* ガイド: 制約検証
* チュートリアル: フォームデータの検証
atob()
======

**`atob()`** 関数は、 Base64 エンコーディングでエンコードされたデータの文字列をデコードします。 `btoa()` メソッドを使用して、通信に問題が発生する可能性のあるデータをエンコードして送信し、送信した後に `atob()` メソッドを使用して再度デコードすることができます。例えば、ASCII の 0 から 31 までのコードような制御文字をエンコードして送信し、デコードすることができます。

Unicode や UTF-8 文字列の使用については、 `btoa()` の「Uncode 文字列」の節を参照してください。

構文
--


```js
atob(encodedData)
```

### 引数

`encodedData`

base64 でエンコードされたデータが入っているバイナリー文字列（すなわち、文字列のそれぞれの文字がバイナリーデータの各バイトとして扱われる文字列）です。

### 返値

`encodedData` をデコードしたデータを含む ASCII 文字列です。

### 例外

`InvalidCharacterError` `DOMException`

`encodedData` が妥当な base64 ではない場合に発行されます。

例
-


```js
const encodedData = btoa("Hello, world"); // 文字列をエンコード
const decodedData = atob(encodedData); // 文字列をデコード
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-atob-dev |

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

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

関連情報
----

* `atob` のポリフィル は `core-js` にあります
* `data` URL
* `btoa()`
WorkerLocation
==============

**`WorkerLocation`** インターフェイスは、ワーカー (`Worker`) で実行されているスクリプトの絶対的な場所を定義します。そのようなオブジェクトはワーカーごとに初期化され、 `WorkerGlobalScope.location` プロパティから利用することができます。これは `self.location` を呼び出すことで取得することができます。

このインターフェイスは、ウェブワーカーのコンテキストで実行されている JavaScript のスクリプト内でのみ見ることができます。

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

`WorkerLocation.href` 読取専用 

このワーカーの位置のシリアライズされた `URL` が入った文字列を返します。

`WorkerLocation.protocol` 読取専用 

このワーカーの位置のプロトコル部分 (`protocol`) が入った文字列です。

`WorkerLocation.host` 読取専用 

このワーカーの位置のうち、ホスト部分 (`host`) が入った文字列です。

`WorkerLocation.hostname` 読取専用 

このワーカーの位置のうち、ホスト名部分 (`hostname`) が入った文字列です。

`WorkerLocation.origin` 読取専用 

このワーカーのオリジン (`origin`) を返します。

`WorkerLocation.port` 読取専用 

このワーカーの位置のうち、ポート番号部分 (`port`) が入った文字列です。

`WorkerLocation.pathname` 読取専用 

このワーカーの位置のうち、パス名部分 (`pathname`) が入った文字列です。

`WorkerLocation.search` 読取専用 

このワーカーの位置のうち、検索引数部分 (`search`) が入った文字列です。

`WorkerLocation.hash` 読取専用 

このワーカーの位置のうち、ハッシュ部分 (`hash`) が入った文字列です。

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

`WorkerLocation.toString()`

このワーカーの位置のシリアライズされた `URL` が入った文字列を返します。 `WorkerLocation.href` と同じです。

仕様書
---

| Specification |
| --- |
| HTML Standard # worker-locations |

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

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

関連情報
----

* 他のワーカーに関するインターフェイス: `Worker`、`WorkerNavigator`、`WorkerGlobalScope`
* ウェブワーカーの使用
FragmentDirective
=================

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

**`FragmentDirective`** インターフェイスは、現在の文書で強調表示されているテキストフラグメントを表すオブジェクトです。

これは `Document.fragmentDirective` プロパティでアクセスできます。

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

なし。

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

なし。

例
-

対応するブラウザーの開発ツールを使用して、1 つ以上の一致するテキストフラグメントがあるタブで、以下を実行してみてください。


```js
document.fragmentDirective;
```


以下のような構造を持つ `FragmentDirective` オブジェクトインスタンスが返されるはずです。


```js
items: [
  {
    prefix: "",
    textStart: "Module Workers",
    textEnd: "",
    suffix: "support",
    type: "text",
  },
  {
    prefix: "feedback on",
    textStart: "usability",
    textEnd: "",
    suffix: "",
    type: "text",
  },
];
```


この機能は、現在は主に機能検出を目的としていますが、将来的には、翻訳ヒントなど他の情報を記載するために展開することができます。

仕様書
---

| Specification |
| --- |
| URL Fragment Text Directives # fragmentdirective |

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

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

関連情報
----

* テキストフラグメント
* `::target-text`
DeviceMotionEvent
=================

**`DeviceMotionEvent`** インターフェイスは、ウェブ開発者に端末の位置と方向の変化のスピードに関する情報を提供します。

**警告:** 現在、Firefox と Chrome は同じ方法で座標を処理しません。これらを使用する際は、注意してください。

Event

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

`DeviceMotionEvent()`

新しい `DeviceMotionEvent` を生成します。

プロパティ
-----

`DeviceMotionEvent.acceleration` 読取専用 

3 つの軸 X、Y、Z 上の端末の加速度を与えるオブジェクトです。加速度は m/s² で表されます。

`DeviceMotionEvent.accelerationIncludingGravity` 読取専用 

X、Y、Z 上の端末の加速度を重力度込みで与えるオブジェクトです。加速度は m/s² で表されます。

`DeviceMotionEvent.rotationRate` 読取専用 

3 つの方向軸アルファ、ベータ、ガンマ上の端末の向きの変化率を与えるオブジェクトです。回転速度は 1 秒あたりの度数で表されます。

`DeviceMotionEvent.interval` 読取専用 

端末からデータを取得する間隔（ミリ秒）を表す数値です。

例
-


```js
window.addEventListener("devicemotion", (event) => {
  console.log(`${event.acceleration.x} m/s2`);
});
```

仕様書
---

| Specification |
| --- |
| DeviceOrientation Event Specification # devicemotion |

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

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

関連情報
----

* `deviceorientation`
* `DeviceOrientationEvent`
* `devicemotion`
* `Accelerometer`
* `LinearAccelerationSensor`
* 端末の方向検出
* 方向と移動データの説明
DOMParser
=========

**`DOMParser`** インターフェイスは、 XML や HTML ソースコードを文字列から DOM の `Document` に解釈する機能を提供します。

`XMLSerializer` インターフェイスを使い、DOM ツリーを XML もしく HTML ソースに転換する、逆の操作を行うことができます。

HTML 文書の場合、`Element.innerHTML` や `outerHTML` プロパティの値を設定することで、HTML から構築された新しい DOM ツリーに一部分を置き換えることもできます。DOM のサブツリーに対応した HTML の要素を取り込むために、これらのプロパティを読み込むことも可能です。

なお、 `XMLHttpRequest`は、 URL アドレスが指定できるリソースから直接 XML や HTML を解釈でき、その `response` プロパティで `Document` を返すことに注意してください。

**メモ:** ブロックレベル要素、例えば `<p>` の中に別のブロックレベル要素が入れ子になっている場合、自動的に閉じられ、その結果、閉じられた `</p>` タグの前に解釈されることになります。

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

`DOMParser()` (en-US)

新しい `DOMParser` オブジェクト作成します。

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

`DOMParser.parseFromString()` (en-US)

HTML パーサーまたは XML パーサーを使用して文字列を解釈し、 `HTMLDocument` または `XMLDocument` を返します。

例
-

このインターフェイスの唯一のメソッドである `DOMParser.parseFromString()` (en-US) のドキュメントには、XML、SVG、HTML 文字列を解釈する例が含まれています。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-parsing-and-serialization |

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

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

関連情報
----

* XML の解釈とシリアライズ
* `XMLHttpRequest`
* `XMLSerializer`
* `JSON.parse()` - `JSON` 文書での同様のページ
CSSKeyframesRule
================

**`CSSKeyframesRule`** インターフェイスは、 CSS アニメーションにおけるキーフレームの完全なセットを表すオブジェクトを記述します。これは `@keyframes` アットルール全体の内容に対応します。

CSSRule

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

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

`CSSKeyframesRule.name`

キーフレームの名前を表します。 `animation-name` プロパティで使用されます。

`CSSKeyframesRule.cssRules` 読取専用 

リスト内のキーフレームの `CSSRuleList` を返します。

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

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

`CSSKeyframesRule.appendRule()`

現在の CSSKeyframesRule の中に新しいキーフレームを挿入します。引数は文字列で、`@keyframes` アットルールの項目と同じ書式でキーフレームを指定します。複数のキーフレームのルールが含まれていた場合は、 `DOMException` が `SYNTAX_ERR` で発生します。

`CSSKeyframesRule.deleteRule()`

現在の CSSKeyframesRule からキーフレームのルールを削除します。引数は削除するキーフレームの見出しで、`0%` から `100%` までの間に解決する値を表す文字列です。。

`CSSKeyframesRule.findRule()`

指定されたキーに対応するキーフレームのルールを返します。このキーは文字列で、返却するキーフレームの見出しを指定し、`0%` から `100%` までのパーセント値に解決するものです。そのキーフレームが存在しない場合は、 `findRule` は `null` を返します。

例
-

 この CSS には keyframes アットルールがあります。これは `document.styleSheets[0].cssRules` で返される最初の `CSSRule` になります。
 `myRules[0]` は `CSSKeyframesRule` オブジェクト 1 つを返します。


```css
@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}
```



```js
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // CSSKeyframesRule
```

仕様書
---

| Specification |
| --- |
| CSS Animations Level 1 # interface-csskeyframesrule |

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

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

関連情報
----

* `@keyframes`
* `CSSKeyFrameRule`
CSSPropertyRule
===============

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

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

* Learn more
* See full compatibility
* Report feedback
**`CSSPropertyRule`** は CSS プロパティと値 API のインターフェイスで、 CSS の `@property` ルールを表します。

CSSRule

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

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

`CSSPropertyRule.inherits` 読取専用 

カスタムプロパティの継承フラグを返します。

`CSSPropertyRule.initialvalue` 読取専用 

カスタムプロパティの初期値を返します。

`CSSPropertyRule.name` 読取専用 

カスタムプロパティの名前を返します。

`CSSPropertyRule.syntax` 読取専用 

カスタムプロパティのリテラル構文を返します。

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

*固有のメソッドはありません。祖先である `CSSRule` からプロパティを継承しています。*

例
-

このスタイルシートには単一の `@property` ルールがあります。返される最初の `CSSRule` は、 CSS で定義された通りのプロパティと値を持つ `CSSPropertyRule` となります。


```css
@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0]); //a CSSPropertyRule
```

仕様書
---

| Specification |
| --- |
| CSS Properties and Values API Level 1 # the-css-property-rule-interface |

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

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

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

Web Speech API の **`SpeechGrammar`** インターフェイスは、認識サービスに認識させたい単語のセットまたは単語パターンを表します。

文法は、JSpeech Grammar Format (**JSGF**) を使用して定義されています。他の形式も将来サポートされる可能性があります。

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

`SpeechGrammar.SpeechGrammar()` (en-US)

`SpeechGrammar` オブジェクトを生成します。

プロパティ
-----

`SpeechGrammar.src` (en-US)

`SpeechGrammar` オブジェクトのインスタンス内からの文法を含む文字列を設定して返します。

`SpeechGrammar.weight` (en-US) 省略可

`SpeechGrammar` オブジェクトの重みづけを設定して返します。

例
-


```js
var grammar =
  "#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;";
var recognition = new SpeechRecognition();
var speechRecognitionList = new SpeechGrammarList();
speechRecognitionList.addFromString(grammar, 1);
recognition.grammars = speechRecognitionList;

console.log(speechRecognitionList[0].src); // grammar 変数の内容と同じ値が返される
console.log(speechRecognitionList[0].weight); // 4 行目で設定された weight と同じ値の 1 が返される
```

仕様
--

| Specification |
| --- |
| Web Speech API # speechreco-speechgrammar |

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

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

関連項目
----

* Web Speech API
OfflineAudioCompletionEvent
===========================

ウェブオーディオ API の `OfflineAudioCompletionEvent` このインターフェイスは、 `OfflineAudioContext` の処理が終了した際に発生するイベントを表します。 `complete` イベントがこのインターフェイスで使用されます。

**メモ:** このインターフェイスは非推奨とされています。過去の経緯からまだ対応していますが、ブラウザーがプロミス版の `OfflineAudioContext.startRendering` に対応してくると、このインターフェイスはまもなく廃止され、必要なくなる予定です。

Event

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

`OfflineAudioCompletionEvent()`

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

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

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

`OfflineAudioCompletionEvent.renderedBuffer` 読取専用 

`AudioBuffer` で、 `OfflineAudioContext` の処理結果が入ります。

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

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

仕様書
---

| Specification |
| --- |
| Web Audio API # OfflineAudioCompletionEvent |

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

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

関連情報
----

* ウェブ音声 API の使用
HTMLMetaElement
===============

**`HTMLMetaElement`** インターフェイスは、HTML 内で `<meta>` 要素として提供される、文書に関する説明的なメタデータが入ります。 `HTMLElement` インターフェイスから、すべてのプロパティとメソッドを継承しています。

EventTarget

Node

Element

HTMLElement

HTMLMetaElementプロパティ
-----

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

`HTMLMetaElement.charset` (en-US)

HTML 文書の文字エンコーディングです。

`HTMLMetaElement.content`

文書メタデータの名前と値の組の 'value' の部分です。

`HTMLMetaElement.httpEquiv`

文書の HTTP レスポンスヘッダー、プラグマディレクティブの名前です。

`HTMLMetaElement.media`

`theme-color` メタデータプロパティのメディアコンテキストです。

`HTMLMetaElement.name`

文書の名前付きメタデータを定義する名前と値の組の 'name' の部分です。

`HTMLMetaElement.scheme` 
非推奨

`HTMLMetaElement.content` 属性の値の値のスキームを定義します。
 これは非推奨です。新しいウェブページでは使用しないでください。


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

*固有のメソッドはありません。親である `HTMLElement` から継承したメソッドがあります。*

例
-

 次の 2 つの例は `HTMLMetaElement` インターフェイスを使用する一般的な手法を示します。
 固有の例については、この節のインスタンスプロパティで記述されている各プロパティのページを参照してください。

### ページの description のメタデータを設定

次の例では、新しい `<meta>` 要素を作成し、`name` 属性に `description` を設定しています。`content` 属性には文書の説明が設定し、それを文書の `<head>` に追加します。


```js
let meta = document.createElement("meta");
meta.name = "description";
meta.content =
  "<meta> 要素は、名前と値のペアで文書のメタデータを提供するのに使用できます。name 属性はメタデータの名前を与え、content 属性は値を与えます。";
document.head.appendChild(meta);
```

### viewport メタデータの設定

 次の例では、新しい `<meta>` 要素を作成して `name` 属性に `viewport` を設定する方法を紹介しています。
 `content` 属性はビューポートサイズを設定し、文書の `<head>` に追加されます。


```js
var meta = document.createElement("meta");
meta.name = "viewport";
meta.content = "width=device-width, initial-scale=1";
document.head.appendChild(meta);
```


ビューポートの設定について詳しくは、ビューポートの基本を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlmetaelement |

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

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

関連情報
----

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