recursal/MDN huggingface dataset:
ゲームパッド API
==========

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

**ゲームパッド API** (Gamepad API) は、開発者に単純で一貫した方法で、ゲームパッドや異なるゲームのコントローラーにアクセスし、信号に応答する方法を提供します。これには、ゲームパッドの接続や切断、ゲームパッドに関するその他の情報へのアクセス、現在押されているボタンやその他のコントロールなど、3 つのインターフェイス、2 つのイベントと 1 つの特別な機能が含まれています。

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

`Gamepad`

コンピューターに接続しているゲームパッドやコントローラーを表します。

`GamepadButton`

接続されているコントローラーのいずれかのボタンを表します。

`GamepadEvent`

ゲームパッドに関連するイベントを表すイベントオブジェクトです。

### ゲームパッドの実験的な拡張機能

`GamepadHapticActuator`

ユーザーに触覚フィードバックを提供するように設計されたコントローラー内のハードウェア（使用可能な場合）、多くの場合はバイブレーションハードウェアを表します。

`GamepadPose` (en-US)

WebVR コントローラーの場合のコントローラーの姿勢 (3D 空間内の位置と向きなど) を表します。これはより新しい WebXR 標準では使用*されません。*

上記の情報にアクセスできる機能については、Gamepad インターフェイスの拡張機能を参照してください。

### 他のインターフェイスの拡張

#### Navigator

`Navigator.getGamepads()`

接続されたゲームパッドごとに一つの `Gamepad` オブジェクトの配列を返す `Navigator` オブジェクトの拡張です。

#### Window のイベント

`gamepadconnected`

ゲームパッドが接続したときに発生するイベントです。

`gamepaddisconnected`

ゲームパッドが切断されたときに発生するイベントです。

チュートリアルとガイド
-----------

* ゲームパッド API の利用
* Gamepad ゲームパッドを利用したコントロールの実装
仕様書
---

| Specification |
| --- |
| Gamepad # gamepad-interface |
| Gamepad Extensions # partial-gamepad-interface |

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

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

関連情報
----

* Ted Mielczarek と Robert Nyman による The Gamepad API の紹介
* Simple API demo page (ソース)
AudioDestinationNode
====================

`AudioDestinationNode`インターフェースは、指定のコンテキストの音声の最後の目的地 - 通常はあなたのデバイスのスピーカーを表します。`OfflineAudioContext`と共に使えば、オーディオデータを「録音」するノードにもできます。

`AudioDestinationNode`には出力はなく(出力が**あれば**、これ以上 AudioNode に音声を結びつけることができません)、入力が 1 つあります。入力チャンネルの数は、0 から`maxChannelCount`変数の間である必要があり、そうでなければ例外が発生します。

指定の`AudioContext`の`AudioDestinationNode`は`AudioContext.destination`プロパティで取得できます。

|  |  |
| --- | --- |
| Number of inputs | `1` |
| Number of outputs | `0` |
| Channel count mode | `"explicit"` |
| Channel count | `2` |
| Channel interpretation | `"speakers"` |

プロパティ
-----

*親の`AudioNode`のプロパティを継承しています。*

`AudioDestinationNode.maxChannelCount`

`unsigned long`で表された物理的なデバイスが扱えるチャンネルの最大数

メソッド
----

*固有のメソッドはありません。親の `AudioNode` のメソッドを継承しています。*

例
-

`AudioDestinationNode`の設定には複雑なことはありません - デフォルトでユーザのシステム(例:スピーカー)を表しています。よって、数行のコードを書くだけで内部の音声を接続することができます:


```js
var audioCtx = new AudioContext();
var source = audioCtx.createMediaElementSource(myMediaElement);
source.connect(gainNode);
gainNode.connect(audioCtx.destination);
```


完全な実装は、MDN Web Audio のVoice-change-o-maticやViolent Thereminのようなサンプルを参考にしてください。

仕様
--

| Specification |
| --- |
| Web Audio API # AudioDestinationNode |

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

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

参考
--

* Using the Web Audio API
RTCSessionDescription
=====================

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

**`RTCSessionDescription`** インターフェイスは、接続 (または接続する予定のもの) の一端と、その構成方法を記述します。それぞれの **`RTCSessionDescription`** は、どのオファー/アンサー交渉プロセスを使用するかを表す記述の `type` (en-US) と、セッションの SDP (en-US) 記述子から成ります。

The process of negotiating a connection between two peers involves exchanging `RTCSessionDescription` objects back and forth, with each description suggesting one combination of connection configuration options that the sender of the description supports. Once the two peers agree upon a configuration for the connection, negotiation is complete.

プロパティ
-----

*`RTCSessionDescription` が継承するプロパティは存在しません。*

`RTCSessionDescription.type` (en-US) 読取専用 

これは `RTCSdpType` の列挙型であり、ディスクリプションの種類を表します。


`RTCSessionDescription.sdp` (en-US) 読取専用 

これは、セッションを説明するための SDP (en-US) 形式の `DOMString` です。

定数
--

### RTCSdpType

This enum defines strings that describe the current state of the session description, as used in the `type` (en-US) property. The session description's type will be specified using one of these values.

| 値 | 説明 |
| --- | --- |
| `answer` | The SDP contained in the `sdp` (en-US) property is the definitive choice in the exchange. In other words, this session description describes the agreed-upon configuration, and is being sent to finalize negotiation. |
| `offer` | The session description object describes the initial proposal in an offer/answer exchange. The session negotiation process begins with an offer being sent from the caller to the callee. |
| `pranswer` | The session description object describes a provisional answer; that is, it's a response to a previous offer or provisional answer. |
| `rollback` | This special type with an empty session description is used to roll back to the previous stable state. |

メソッド
----

*`RTCSessionDescription` が継承するメソッドは存在しません。*

`RTCSessionDescription()` (en-US) 
非推奨

新しい `RTCSessionDescription` を返します。この引数は `RTCSessionDescriptionInit` ディクショナリであり (任意の) 2 つの引数を含みます。これらの引数の 1 つまたは全て与えられなかった場合、関連するプロパティは null に設定されます。

`RTCSessionDescription.toJSON()` (en-US)

このオブジェクトの JSON による表現を生成して返します。生成された JSON は、`type` (en-US) と `sdp` (en-US)を含みます。

例
-


```js
signalingChannel.onmessage = function (evt) {
  if (!pc) start(false);

  var message = JSON.parse(evt.data);
  if (message.sdp)
    pc.setRemoteDescription(
      new RTCSessionDescription(message),
      function () {
        // オファーを受け取った場合、このオファーに対して応答する。
        if (pc.remoteDescription.type == "offer")
          pc.createAnswer(localDescCreated, logError);
      },
      logError,
    );
  else
    pc.addIceCandidate(
      new RTCIceCandidate(message.candidate),
      function () {},
      logError,
    );
};
```

仕様策定状況
------

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # rtcsessiondescription-class |

ブラウザーの対応
--------

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

関連情報
----

* WebRTC (en-US)
* `RTCPeerConnection.setLocalDescription()` (en-US) 及び `RTCPeerConnection.setRemoteDescription()` (en-US)
WebHID API
==========

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

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

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

ヒューマンインターフェイスデバイス (HID) はデバイスの一種で、人間から入力を受け取ったり、人間に出力を提示したりするものです。また、インストールの手続きを単純にするために設計された、ホストとデバイスの間の双方向のコミュニケーションのための標準である HID プロトコルのことも指します。HID プロトコルはもともと USB デバイス用に開発されましたが、その後 Bluetooth などの他の多くのプロトコルの上に実装されました。

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

`HID`

HID デバイスへの接続およびアタッチした HID デバイスのリストアップを行うメソッドと、HID デバイスの接続を扱うイベントハンドラーを提供します。

`HIDDevice`

HID デバイスを表します。1 個の物理デバイスが複数の `HIDDevice` オブジェクトで表されることもあります。

`HIDInputReportEvent`

割り当てられた HID デバイスのいずれかから Input レポートを受信した時、`HIDDevice.inputreport_event` に渡されます。

`HIDConnectionEvent`

デバイスが接続されたり切断されたりした時、`HID.onconnect` や `HID.ondisconnect` に渡されます。

例
-

`requestDevice()` メソッドを用いてデバイスに接続できます。この場合、利用可能な全てのデバイスの中から選択することになります。


```js
const device = await navigator.hid.requestDevice({ filters: [] });
// デバイスを選択するためのリストと「接続」「キャンセル」のボタンがある「... が HID デバイスへの接続を要求しています」というタイトルのポップアップが現れます。
// 1個選択し、「接続」ボタンをクリックしてください。すると、選択されたデバイスが入った配列が device に格納されます。
```


これまでにこのウェブサイトによるアクセスが許可された全てのデバイスを取得し、デバイス名をコンソールに出力できます。


```js
let devices = await navigator.hid.getDevices();
devices.forEach((device) => {
  console.log(`HID: ${device.productName}`);
});
```


任意の HID デバイスの切断に反応するイベントリスナーを登録できます。


```js
navigator.hid.addEventListener("disconnect", (event) => {
  console.log(`HID disconnected: ${event.device.productName}`);
  console.dir(event);
});
// 例えば、キーボードが切断される時、コンソールに以下のログが記録されるでしょう。
// HID disconnected: USB Keyboard
// {
// bubbles: false
// cancelBubble: false
// cancelable: false
// composed: false
// currentTarget: HID {onconnect: null, ondisconnect: null}
// defaultPrevented: false
// device: HIDDevice {oninputreport: null, opened: false, vendorId: 6700, productId: 11555, productName: "USB Keyboard", …}
// eventPhase: 0
// isTrusted: true
// path: []
// returnValue: true
// srcElement: HID {onconnect: null, ondisconnect: null}
// target: HID {onconnect: null, ondisconnect: null}
// timeStamp: 18176.600000023842
// type: "disconnect"
// }

// 上記のイベントは HIDConnectionEvent インターフェイスのインスタンスです。
```

仕様書
---

| Specification |
| --- |
| WebHID API # dom-hid |

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

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

**`IntersectionObserverEntry`** は交差オブザーバー API のインターフェイスで、遷移の特定の瞬間における対象要素とそのルートコンテナー間の交差状態を表します。

`IntersectionObserverEntry` のインスタンスは、 `IntersectionObserver` のコールバックに `entries` 引数で渡されます。それ以外でこれらのオブジェクト取得することができるのは、 `IntersectionObserver.takeRecords()` を呼び出した場合のみです。

プロパティ
-----

`IntersectionObserverEntry.boundingClientRect` 読取専用 

対象要素の外接矩形を `DOMRectReadOnly` として返します。境界は `Element.getBoundingClientRect()` の記事で説明されているのと同様に計算されます。

`IntersectionObserverEntry.intersectionRatio` 読取専用 

`intersectionRect` と `boundingClientRect` の比率を返します。

`IntersectionObserverEntry.intersectionRect` 読取専用 

対象の表示領域の矩形を表す `DOMRectReadOnly` を返します。

`IntersectionObserverEntry.isIntersecting` 読取専用 

論理値で、対象要素が、この交差オブザーバーのルートに対象要素が交差したときは `true` になります。この値が `true` の場合、 `IntersectionObserverEntry` は交差状態への変わり目にあることを示します。 `false` の場合、交差状態から交差なしへの変わり目であることがわかります。

`IntersectionObserverEntry.rootBounds` 読取専用 

この交差オブザーバーのルートの矩形である `DOMRectReadOnly` を返します。

`IntersectionObserverEntry.target` 読取専用 

ルートとの交差状態が変化した `Element` です。

`IntersectionObserverEntry.time` 読取専用 

`DOMHighResTimeStamp` で、この `IntersectionObserver` の時刻の起点を基準にして、交差が記録された時刻を示します。

メソッド
----

*このインタフェースにはメソッドがありません。*

仕様書
---

| Specification |
| --- |
| Intersection Observer # intersection-observer-entry |

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

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

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

**`GeolocationPosition`** インターフェイスは対象のデバイスのある時間における現在位置を表します。`GeolocationCoordinates` オブジェクトで表される位置情報には、地球を表す楕円体上における平面座標のほかに、高度や速度といった情報も含まれます。

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

*`GeolocationPosition` インターフェイスが継承するプロパティはありません。*

`GeolocationPosition.coords` 読取専用  安全なコンテキスト用

現在位置を示す `GeolocationCoordinates` オブジェクトを返します。

`GeolocationPosition.timestamp` 読取専用  安全なコンテキスト用

位置情報が取得された時刻を表すタイムスタンプを、ミリ秒単位の Unix 時刻で返します。

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

*`GeolocationPosition` インターフェイスが実装・継承するメソッドはありません。*

仕様書
---

| Specification |
| --- |
| Geolocation API # position\_interface |

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

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

関連情報
----

* 位置情報 API の使用
* `Geolocation`
PluginArray
===========

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

`PluginArray` インターフェースには使用可能なプラグインのリストが格納されています。 `window.navigator.plugins` プロパティによって返されます。

プロパティ
-----

| プロパティ名 | 説明 | 戻り値の型 | 可用性 |
| --- | --- | --- | --- |
| `PluginArray.length` | プラグインリスト配列中のプラグイン数。**読取専用**。 | unsigned long | DOM 0 |

メソッド
----

`PluginArray.item`

プラグインリスト配列中の指定したインデックスにある `Plugin` を返す

`PluginArray.namedItem`

プラグインリスト配列中の指定した名称の `Plugin` を返す

`PluginArray.refresh`

現在のページの全てのプラグインを更新。必要に応じて文書を再読み込みします。
リサイズオブザーバー API
==============

リサイズオブザーバー API は要素のサイズ変化を監視し、変化するたびにオブザーバーに報告できる、実行可能な方法を提供します。

概念と使い方
------

要素のサイズの変化を検出する方法 (やそのほかの手法) はたくさんありますが、これまでの実装はハック的で脆弱なことがよくありました。

例えば、 メディアクエリー / `window.matchMedia` はビューポートのサイズの変化を検出したときに特定の箇所に対してレイアウト更新を行う場合に最適ですが、これが特定の要素のサイズの変更を検出したい場合はどうすればよいでしょうか？

この問題を解決するために、サイズの変化を検出させたい要素を示唆する適切なイベント ( Window: resize イベント など) で監視し、 `Element.getBoundingClientRect` や `Window.getComputedStyle` などを使用して要素の新しいサイズやその他の特徴を探し出す方法が考えられます。

そのような方法では、限られたユースケースでしか機能せず、パフォーマンス面でも悪影響があり (上記のメソッドを連続的に呼び出すと大きなパフォーマンス低下につながる) 、ブラウザーのウインドウサイズが変わらないと機能しないことが多い傾向があります。

Resize Observer API では、このような問題に対する解決策を提供する他、要素の内容やボーダーボックスのサイズの変化までも簡単に監視し、実行できるようにします。これはウェブプラットフォームでしばしば議論されている 要素クエリー の欠如に対する解決策として提供します。

使い方は簡単で、パフォーマンスオブザーバーや交差オブザーバーなど、他のオブザーバーとほとんど同じです。新しい `ResizeObserver` オブジェクトを `ResizeObserver()` コンストラクターで作成できます。 `ResizeObserver.observe()` で特定の要素のサイズの変更を検出するようにします。コールバック関数はコンストラクターの中で設定し、要素のサイズが変わるたびに毎回実行され、変化後のサイズを通して自由に実行できるようになります。

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

`ResizeObserver`

新しいオブザーバーを登録し、要素の監視を開始あるいは停止する機能を提供します。

`ResizeObserverEntry`

サイズが変化された単一の要素を記述し、要素とその新しいサイズを識別します。

例
-

GitHub リポジトリーでは、いくつか簡単な実装例があります。

* resize-observer-border-radius.html (ソース): ビューポートサイズに応じてパーセント割合のサイズで表示する、緑色のボックスの簡単な実装例。ビューポートサイズが変化すると、ボックスの角丸もボックスのサイズに応じて変化します。これを `border-radius` を使用してパーセント割合で実装することもできますが、見苦しいような楕円形の角丸ができてしまいます。上記の解決策では、ボックスのサイズに応じてサイズが変わるきれいな角丸を表示できます。
* resize-observer-text.html (ソース): ここでは、スライダーで調整すると内部の `div` 要素のサイズが変化し、リサイズオブザーバーを通してヘッダーと文章の `font-size` を変更します。これはビューポートとは関係なくても、要素のサイズ変更を検出して実行できることを示しています。

通常、コードは次のようなパターンに従います (resize-observer-border-radius.html からの引用)。


```js
const resizeObserver = new ResizeObserver((entries) => {
  const calcBorderRadius = (size1, size2) =>
    `${Math.min(100, size1 / 10 + size2 / 10)}px`;

  for (const entry of entries) {
    if (entry.borderBoxSize) {
      entry.target.style.borderRadius = calcBorderRadius(
        entry.borderBoxSize[0].inlineSize,
        entry.borderBoxSize[0].blockSize,
      );
    } else {
      entry.target.style.borderRadius = calcBorderRadius(
        entry.contentRect.width,
        entry.contentRect.height,
      );
    }
  }
});

resizeObserver.observe(document.querySelector("div"));
```

仕様書
---

| Specification |
| --- |
| Resize Observer # resize-observer-interface |

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

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

関連情報
----

* ResizeObserver: It's Like document.onresize for Elements
HTMLDetailsElement
==================

**`HTMLDetailsElement`** インターフェイスは、（継承によって利用できる通常の `HTMLElement` インターフェイスのもの以外の）`<details>` を操作するための特殊なプロパティを提供します。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLDetailsElement.open`

HTML の `open` 属性を反映する論理値で、要素の内容（`<summary>` を除く）がユーザーに表示されているかどうかを示します。

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

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

イベント
----

このイベントは `addEventListener()` を使用するか、このインターフェイスの `onイベント名` プロパティにイベントリスナーを代入することで待ち受けします。

`toggle`

`<details>` 要素の `open`/`closed` 状態がトグル切り替えされたときに発生します。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmldetailselement |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: `<details>`
メディアキャプチャとストリーム API (メディアストリーム)
===============================

**メディアキャプチャとストリーム** API (Media Capture and Streams API) は、一般的に **メディアストリーム API** (Media Stream API または MediaStream API) と呼ばれ、音声や映像のデータのストリーミングへの対応を提供する WebRTC に関連した API です。

これは、ストリームとその構成トラックを操作するためのインターフェイスとメソッド、データ形式に関連する制約、データを非同期に使用する際の成功とエラーのコールバック、および処理中に発行されるイベントを提供するものです。

基本概念
----

この API は、音声または映像に関連づけられたデータの流れを表現するための `MediaStream` オブジェクトの操作を基本としています。例としてメディアストリームの取得をご覧ください。

`MediaStream` は 0 個以上の `MediaStreamTrack` によって構成されます。これは様々な音声や映像の**トラック**を表現します。それぞれの `MediaStreamTrack` は、1 つ以上の**チャンネル**を持ちます。このチャンネルはメディアストリームの最小の単位を表現します。例えば、ステレオの音声トラックの*左*と*右*のチャンネルのそれぞれのように、与えられたスピーカーに関連づけられた音声信号です。

`MediaStream` オブジェクトは、1 つの**入力**と 1 つの**出力**を持ちます。 `MediaStream` オブジェクトは、ローカルで呼び出される `getUserMedia()` によって生成され、ユーザーのカメラやマイクの 1 つを入力ソースとして持ちます。ローカルでない `MediaStream` は、 `<video>` や `<audio>` などのメディア要素や、WebRTC `RTCPeerConnection` API によって取得できるネットワーク越しに生成されたストリーム、ウェブオーディオ API の `MediaStreamAudioDestinationNode` によって作成されたストリームとして表現されます。

`MediaStream` オブジェクトの出力は**コンシューマー** (consumer) に接続されます。出力として `<audio>` や `<video>` などのメディア要素、 WebRTC `RTCPeerConnection` API、ウェブオーディオ API (en-US) の `MediaStreamAudioSourceNode`が使用できます。

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

これらのリファレンス記事では、メディアキャプチャとストリーム API を構成する各インターフェイスについて知っておく必要がある基本的な情報を見つけられます。

* `CanvasCaptureMediaStreamTrack` (en-US)
* `InputDeviceInfo` (en-US)
* `MediaDeviceKind`
* `MediaDeviceInfo`
* `MediaDevices`
* `MediaStream`
* `MediaStreamEvent` (en-US)
* `MediaStreamTrack`
* `MediaStreamTrackEvent` (en-US)
* `MediaTrackCapabilities`
* `MediaTrackConstraints` (en-US)
* `MediaTrackSettings` (en-US)
* `MediaTrackSupportedConstraints`
* `NavigatorUserMedia`
* `NavigatorUserMediaError`
* `OverconstrainedError` (en-US)
* `URL`
イベント
----

* `addtrack`
* `ended`
* `mute`
* `overconstrained`
* `removetrack`
* `unmute`
ガイドとチュートリアル
-----------

能力と制約と設定の記事では、**制約**と**能力**、メディア設定の概念について説明しています。また、制約エクササイザ―を記載しており、コンピューターの A/V 入力機器（ウェブカメラやマイクなど）からの音声と映像のトラックに対して異なる制約集合を適用した結果を試してみることができます。

getUserMedia() による写真の撮影 の記事では、`getUserMedia()` を使用して、 `getUserMedia()` に対応しているコンピューターや携帯電話のカメラにアクセスし、それで写真を撮る方法を示しています。

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

### api.MediaStream

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

### api.MediaStreamTrack

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

### api.MediaDevices

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

### api.MediaDeviceInfo

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

### api.InputDeviceInfo

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

### api.CanvasCaptureMediaStreamTrack

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

関連情報
----

* WebRTC - API の入門ページ
* `mediaDevices.getUserMedia()`
* WebRTC による写真の撮影: `getUserMedia()` を用いたデモとチュートリアル
OrientationSensor
=================

Sensor APIs の **`OrientationSensor`** インターフェイスは、向きセンサーのベースクラスです。このインターフェイスを直接使用することはできません。かわりに、このインターフェイスは継承するインターフェイスからアクセスされるプロパティとメソッドを提供します。

この機能はサーバーで設定された Permissions Policy でブロックされる可能性があります。

EventTarget

Sensor

OrientationSensorOrientationSensor をベースとするインターフェイス
---------------------------------

以下は、`OrientationSensor` インターフェイスをベースとするインターフェイスの一覧です。

* `AbsoluteOrientationSensor`
* `RelativeOrientationSensor`
インスタンスプロパティ
-----------

`OrientationSensor.quaternion`

各要素がデバイスの向きを表す単位四元数の成分である 4 要素の `Array` を返します。

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

`OrientationSensor.populateMatrix()`

指定のオブジェクトに、センサーの最新の測定値に基づく回転行列を入れます。

例
-

### 基本的な例

以下の例は、だいたい Intel の Orientation Phone demo をもとにしており、1 秒に 60 回の周期を設定して `AbsoluteOrientationSensor` のインスタンスを生成しています。測定ごとに、`OrientationSensor.quaternion` を用いて電話の視覚的なモデルを回転しています。


```js
const options = { frequency: 60, referenceFrame: "device" };
const sensor = new AbsoluteOrientationSensor(options);

sensor.addEventListener("reading", () => {
  // model は別の場所で生成した Three.js のオブジェクト
  model.quaternion.fromArray(sensor.quaternion).inverse();
});
sensor.addEventListener("error", (error) => {
  if (event.error.name === "NotReadableError") {
    console.log("センサーが利用できません。");
  }
});
sensor.start();
```

### 許可の例

向きセンサーを使用するには、複数のデバイスセンサーを使用する許可を要求する必要があります。`Permissions` インターフェイスは Promise を使用するので、許可を要求するのには `Promise.all` を使用するとよいです。


```js
const sensor = new AbsoluteOrientationSensor();
Promise.all([
  navigator.permissions.query({ name: "accelerometer" }),
  navigator.permissions.query({ name: "magnetometer" }),
  navigator.permissions.query({ name: "gyroscope" }),
]).then((results) => {
  if (results.every((result) => result.state === "granted")) {
    sensor.start();
    // …
  } else {
    console.log("AbsoluteOrientationSensor を使用する許可がありません。");
  }
});
```

仕様書
---

| Specification |
| --- |
| Orientation Sensor # orientationsensor-interface |

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

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

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

`File System Access API` の **`FileSystemDirectoryHandle`** インターフェイスは、ファイルシステムのディレクトリーへのハンドルを提供します。

このインターフェイスは、メソッド `window.showDirectoryPicker()`・`StorageManager.getDirectory()`・`DataTransferItem.getAsFileSystemHandle()`・`FileSystemDirectoryHandle.getDirectoryHandle()` からアクセス可能です。

FileSystemHandle

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

*親の `FileSystemHandle` からプロパティを継承します。*

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

*親の `FileSystemHandle` からメソッドを継承します。*

`FileSystemDirectoryHandle.entries()`

オブジェクト自身の列挙可能なプロパティの `[key, value]` ペアの新しい *非同期イテレーター* を返します。

`FileSystemDirectoryHandle.getFileHandle()`

メソッドが呼ばれたディレクトリー内の指定の名前のファイルを表す `FileSystemFileHandle` で解決する `Promise` を返します。

`FileSystemDirectoryHandle.getDirectoryHandle()`

メソッドが呼ばれたディレクトリー内の指定の名前のサブディレクトリーを表す `FileSystemDirectoryHandle` で解決される `Promise` を返します。

`FileSystemDirectoryHandle.keys()`

`FileSystemDirectoryHandle` 内の各アイテムのキーを含む新しい *非同期イテレーター* を返します。

`FileSystemDirectoryHandle.removeEntry()`

ディレクトリーハンドルに指定の名前のファイルまたはディレクトリーがある場合、非同期でエントリーを削除しようとします。

`FileSystemDirectoryHandle.resolve()`

親ハンドルから指定の子エントリーへのディレクトリー名の `Array` (最後の要素は指定した子エントリーの名前) で解決する `Promise` を返します。

`FileSystemDirectoryHandle.values()`

`FileSystemDirectoryHandle` 内の各インデックスに対応する値を含む新しい *非同期イテレーター* を返します。

`FileSystemDirectoryHandle[@@asyncIterator]()`

デフォルトでは `entries` 関数を返します。

例
-

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


```js
const dirName = "directoryToGetName";

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


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


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

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

  if (relativePath === null) {
    // ディレクトリーハンドル内にない
  } else {
    // relativePath は相対パスを表す名前の配列

    for (const name of relativePaths) {
      // 各エントリーを記録する
      console.log(name);
    }
  }
}
```


以下の例では、ディレクトリーを再帰的に走査し、ディレクトリー内の各ファイルを表す `FileSystemFileHandle` オブジェクトを返します。


```js
async function\* getFilesRecursively(entry) {
  if (entry.kind === "file") {
    const file = await entry.getFile();
    if (file !== null) {
      file.relativePath = getRelativePath(entry);
      yield file;
    }
  } else if (entry.kind === "directory") {
    for await (const handle of entry.values()) {
      yield\* getFilesRecursively(handle);
    }
  }
}
for await (const fileHandle of getFilesRecursively(directoryHandle)) {
  console.log(fileHandle);
}
```

仕様書
---

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

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

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

関連情報
----

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

**`HTMLFormControlsCollection`** インターフェイスは、HTML のフォームコントロール要素の集合を表すインターフェイスです。`HTMLFormElement` インターフェイスの `elements` プロパティから返されます。

`HTMLCollection` から継承されるプロパティとメソッドの他に、追加メソッドが一つ提供されます。

HTMLCollection

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

*このインターフェイスには親である `HTMLCollection` から継承したプロパティがあります。*

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

*このインターフェイスには親である `HTMLCollection` から継承したメソッドがあります。*

`HTMLFormControlsCollection.namedItem()`

集合内の `RadioNodeList` または `Element` の `name` または `id` が指定した名前と一致するノード、または一致するノードがない場合は `null` を返します。このバージョンの `namedItem()` は `HTMLCollection` から継承されたものを隠していることに注意してください。そのメソッドと同様、`collection["value"]` のように文字列で JavaScript の配列の括弧構文を使用すると、 `collection.namedItem("value")` と同等になります。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlformcontrolscollection |

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

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

関連情報
----

* `HTMLCollection`, `RadioNodeList`, `HTMLOptionsCollection`