GPUSupportedLimits - Web API

GPUSupportedLimits
==================

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

WebGPU API の **`GPUSupportedLimits`** インターフェイスは、`GPUAdapter` が対応している制限を表現します。

現在のアダプター用の `GPUSupportedLimits` オブジェクトは、`GPUAdapter.limits` プロパティ経由で参照できます。

ブラウザーは、ドライブバイフィンガープリンティングで利用可能な一意な情報を減らすため、それぞれの GPU の正確な制限を報告せず、それぞれの制限によって異なる段階的な値を報告する可能性が高いです。たとえば、ある制限用の段階は 2048、8192、32768 である可能性があります。GPU の実際の制限が 16384 である場合は、ブラウザーは 8192 を報告します。

異なるブラウザーは異なる扱いをする可能性があり、段階の値は時間の経過で変わる可能性があるため、制限の正確な値を予測するのは難しいです。徹底的にテストを行うことを推奨します。

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

`GPUSupportedLimits` オブジェクトのプロパティでは以下の制限が表現されます。これらの制限が何と関係するかの詳細な説明は、仕様書の Limits 節を参照してください。

| 制限名 | デフォルト値 |
| --- | --- |
| `maxTextureDimension1D` | 8192 |
| `maxTextureDimension2D` | 8192 |
| `maxTextureDimension3D` | 2048 |
| `maxTextureArrayLayers` | 256 |
| `maxBindGroups` | 4 |
| `maxBindingsPerBindGroup` | 640 |
| `maxDynamicUniformBuffersPerPipelineLayout` | 8 |
| `maxDynamicStorageBuffersPerPipelineLayout` | 4 |
| `maxSampledTexturesPerShaderStage` | 16 |
| `maxSamplersPerShaderStage` | 16 |
| `maxStorageBuffersPerShaderStage` | 8 |
| `maxStorageTexturesPerShaderStage` | 4 |
| `maxUniformBuffersPerShaderStage` | 12 |
| `maxUniformBufferBindingSize` | 65536 bytes |
| `maxStorageBufferBindingSize` | 134217728 bytes (128 MB) |
| `minUniformBufferOffsetAlignment` | 256 bytes |
| `minStorageBufferOffsetAlignment` | 256 bytes |
| `maxVertexBuffers` | 8 |
| `maxBufferSize` | 268435456 bytes (256 MB) |
| `maxVertexAttributes` | 16 |
| `maxVertexBufferArrayStride` | 2048 bytes |
| `maxInterStageShaderComponents` | 60 |
| `maxInterStageShaderVariables` | 16 |
| `maxColorAttachments` | 8 |
| `maxColorAttachmentBytesPerSample` | 32 |
| `maxComputeWorkgroupStorageSize` | 16384 bytes |
| `maxComputeInvocationsPerWorkgroup` | 256 |
| `maxComputeWorkgroupSizeX` | 256 |
| `maxComputeWorkgroupSizeY` | 256 |
| `maxComputeWorkgroupSizeZ` | 64 |
| `maxComputeWorkgroupsPerDimension` | 65535 |

例
-

以下のコードでは、`GPUAdapter.limits` の `maxBindGroups` の値を問い合わせ、6 以上かどうかをチェックします。理論上のサンプルアプリケーションは理想的には 6 個のバインドグループを必要とするので、返された値が 6 以上の場合は、`requiredLimits` オブジェクトに上限値 6 を追加適用します。そして、`GPUAdapter.requestDevice()` を用いてこの制限の要件を満たすデバイスを要求します。

```js
async function init() {
  if (!navigator.gpu) {
    throw Error("WebGPU に対応していません。");
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error("WebGPU のアダプターを要求できませんでした。");
  }

  const requiredLimits = {};

  // アプリケーションは理想的には 6 個のバインドグループが必要なので、
  // アプリケーションで必要な分の要求を試みる
  if (adapter.limits.maxBindGroups >= 6) {
    requiredLimits.maxBindGroups = 6;
  }

  const device = await adapter.requestDevice({
    requiredLimits,
  });

  // ...
}
```

仕様書
---

| Specification |
| --- |
| WebGPU # gpusupportedlimits |

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

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

関連情報
----

* WebGPU API


btoa() - Web API

btoa()
======

**`btoa()`** メソッドは、 Base64 でエンコードされた ASCII 文字列をバイナリー文字列（すなわち、文字列のそれぞれの文字がバイナリーデータの各バイトとして扱われる文字列）から生成します。

このメソッドを使用すると、通信に支障をきたす可能性のあるデータをエンコードして送信し、その後で `atob()` メソッドを使用して再度デコードすることができます。例えば ASCII で 0 から 31 の値のような制御文字をエンコードすることもできます。

構文
--

```js
btoa(stringToEncode)
```

### 引数

`stringToEncode`

エンコードするバイナリー文字列です。

### 返値

`stringToEncode` の Base64 表現である ASCII 文字列です。

### 例外

`InvalidCharacterError` `DOMException`

文字列には、1 バイトに収まらない文字が含まれていた場合。詳細は後述の「Unicode 文字列」を参照してください。

例
-

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

Unicode 文字列
-----------

`btoa()` 関数は、JavaScript の文字列を引数にとります。JavaScript の文字列は UTF-16 文字エンコーディングで表現されます。このエンコーディングでは、文字列は 16 ビット（2 バイト）単位の並びとして表現されます。すべての ASCII 文字はこれらの単位の 1 バイト目に収まりますが、他の多くの文字は収まりません。

Base64 は、設計上、バイナリーデータを入力として期待します。 JavaScript の文字列では、これは各文字が 1 バイトしか占有しない文字列を意味します。したがって、2 バイト以上の文字を含む文字列を `btoa()` に渡した場合、これはバイナリーデータとはみなされないため、エラーが発生します。

```js
const ok = "a";
console.log(ok.codePointAt(0).toString(16)); // 61: 長さ < 1 バイト

const notOK = "✓";
console.log(notOK.codePointAt(0).toString(16)); // 2713: 長さ > 1 バイト

console.log(btoa(ok)); // YQ==
console.log(btoa(notOK)); // error
```

`btoa()` を用いて Unicode テキストを ASCII としてエンコードする必要がある場合、一つの選択肢として、各 16 ビット単位が 1 バイトしか占有しないように文字列を変換することができます。例えば、以下のようにします

```js
// Unicode 文字列で、各 16 ビット単位を 1 バイトしか占有
// しない文字列に変換します。
function toBinary(string) {
  const codeUnits = Uint16Array.from(
    { length: string.length },
    (element, index) => string.charCodeAt(index),
  );
  const charCodes = new Uint8Array(codeUnits.buffer);

  let result = "";
  charCodes.forEach((char) => {
    result += String.fromCharCode(char);
  });
  return result;
}

// 1 バイトを超える文字を含んだ文字列
const myString = "☸☹☺☻☼☾☿";

const converted = toBinary(myString);
const encoded = btoa(converted);
console.log(encoded); // OCY5JjomOyY8Jj4mPyY=
```

このようにした場合、当然ながらデコードされた文字列を逆変換する必要があります。

```js
function fromBinary(binary) {
  const bytes = Uint8Array.from({ length: binary.length }, (element, index) =>
    binary.charCodeAt(index),
  );
  const charCodes = new Uint16Array(bytes.buffer);

  let result = "";
  charCodes.forEach((char) => {
    result += String.fromCharCode(char);
  });
  return result;
}

const decoded = atob(encoded);
const original = fromBinary(decoded);
console.log(original); // ☸☹☺☻☼☾☿
```

用語集の Base64 の項目にある解決策その 1 - 文字列をエンコードする前にエスケープするの例の `utf8_to_b64` および `b64_to_utf8` 関数も参照してください。

仕様書
---

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

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

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

関連情報
----

* `btoa` のポリフィル は `core-js` で利用できます。
* `data` URL
* `atob()`
* Base64


ErrorEvent - Web API

ErrorEvent
==========

**`ErrorEvent`** インターフェイスは、スクリプトまたはファイルのエラーに関連する情報を提供するイベントを表します。

Event

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

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

`ErrorEvent.message` 読取専用

文字列で、関数を説明する人間が読むのに適したエラーメッセージが入ります。`crossorigin` の設定がないと、エラーの記録が縮小されます。

`ErrorEvent.filename` 読取専用

文字列で、エラーが発生したスクリプトファイルの名前が入ります。

`ErrorEvent.lineno` 読取専用

エラーが発生したスクリプトファイルの行番号を含む `integer` です。

`ErrorEvent.colno` 読取専用

エラーが発生したスクリプトファイルの列番号を含む `integer` です。

`ErrorEvent.error` 読取専用

イベントに関係する JavaScript の `Object` です。

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

`ErrorEvent()`

指定された引数で `ErrorEvent` イベントを作成します。

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

*親である `Event` から継承したメソッドがあります。*

仕様書
---

| Specification |
| --- |
| HTML Standard # the-errorevent-interface |

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

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

関連情報
----

* ウェブワーカーの使用、このようなイベントを発生させる可能性が最も高いオブジェクト


PaymentAddress - Web API

PaymentAddress
==============

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

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

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

**`PaymentAddress`** は支払いリクエスト API のインターフェイスで、配送先または支払い先住所情報を保存するために使用されます。

万国郵便連合のウェブページにある Addressing S42 standard という、郵便宛名の国際標準に関する資料を参照すると便利かもしれません。

プロパティ
-----

`PaymentAddress.addressLine` (en-US) 読取専用
非推奨

他のプロパティに含まれていない住所の各行を提供する文字列の配列。正確なサイズと内容は国や場所によって異なります。例: 通り名、住居番号、アパートの番号、地方の配達ルート、説明の説明、私書箱の番号など。

`PaymentAddress.country` (en-US) 読取専用
非推奨

文字列で、 ISO-3166-1 alpha-2 標準を使用して、住所が配置されている国を指定します。この文字列は常に正規の大文字形式で指定されます。有効な `country` の値の例: `"US"`, `"GB"`, `"CN"`, `"JP"`

`PaymentAddress.city` (en-US) 読取専用
非推奨

文字列で、住所の都市名または町名の部分を持ちます。

`PaymentAddress.dependentLocality` (en-US) 読取専用
非推奨

文字列で、都市に従属する地区またはサブ地区を示します。例: neighborhood, borough, district, イギリスの dependent locality

`PaymentAddress.organization` (en-US) 読取専用
非推奨

文字列で、支払い先住所にある組織、事業所、会社、機関などの名前を指定します。

`PaymentAddress.phone` (en-US) 読取専用
非推奨

文字列で、受領者または連絡担当者の電話番号を指定します。

`PaymentAddress.postalCode` (en-US) 読取専用
非推奨

文字列で、郵便物の配送経路として管轄の国が使用するコードを指定する文字列です。例: 米国の ZIP コード、インドの PIN コード、日本の郵便番号など。

`PaymentAddress.recipient` (en-US) 読取専用
非推奨

文字列で、支払い先住所の受取人、購入者、または連絡先の名前を示します。

`PaymentAddress.region` (en-US) 読取専用
非推奨

文字列で、国の最上位の行政区画 (州、都道府県など) を含みます。

`PaymentAddress.sortingCode` (en-US) 読取専用
非推奨

文字列で、フランスで使用されているような郵便ソートコードを提供します。

**メモ:** 値が指定されていないプロパティには、空の文字列が含まれています。

メソッド
----

`PaymentAddress.toJSON()` (en-US)
非推奨

`PaymentAddress` オブジェクトのプロパティの JSON 表現を返す標準のシリアライザー。

例
-

次の例では、 `PaymentRequest()` コンストラクターを使用して、新しい支払い要求を作成しています。これは、 3 つのオブジェクトを引数して取ります。 1 つは支払いに使用できる支払い方法の詳細を含むオブジェクト、 1 つは実際の注文の詳細（購入アイテムや配送オプションなど）が入ったオブジェクト、もう 1 つは追加のオプションを含むオプションオブジェクトです。

これら 3 つのうち最初のもの（下の例では `supportedInstruments`）は、支払い方法で定義された構造に準拠しなければならない `data` プロパティを保有しています。

```js
const supportedInstruments = [
  {
    supportedMethods: "https://example.com/pay",
  },
];

const details = {
  total: { label: "Donation", amount: { currency: "USD", value: "65.00" } },
  displayItems: [
    {
      label: "Original donation amount",
      amount: { currency: "USD", value: "65.00" },
    },
  ],
  shippingOptions: [
    {
      id: "standard",
      label: "Standard shipping",
      amount: { currency: "USD", value: "0.00" },
      selected: true,
    },
  ],
};

const options = { requestShipping: true };

async function doPaymentRequest() {
  const request = new PaymentRequest(supportedInstruments, details, options);
  // Add event listeners here.
  // Call show() to trigger the browser's payment flow.
  const response = await request.show();
  // Process payment.
  const json = response.toJSON();
  const httpResponse = await fetch("/pay/", { method: "POST", body: json });
  const result = httpResponse.ok ? "success" : "failure";

  await response.complete(result);
}
doPaymentRequest();
```

`PaymentRequest.show()` を使用して支払いフローが起動され、プロミスが正常に解決されると、満たされたプロミス（上記の `instrumentResponse`）から利用できる `PaymentResponse` (en-US) オブジェクトは、レスポンスの詳細を含む `PaymentResponse.details` (en-US) プロパティを保有します。これは、支払い方法の提供者によって定義された構造に適合していなければなりません。

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

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


GeolocationCoordinates - Web API

GeolocationCoordinates
======================

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

**`GeolocationCoordinates`** インターフェイスは、地球上における端末の位置と高度、およびそれぞれの測位精度を表します。

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

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

`GeolocationCoordinates.latitude` 読取専用  安全なコンテキスト用

この位置の緯度を 10 進数の角度で表す `double` 型の値を返します。

`GeolocationCoordinates.longitude` 読取専用  安全なコンテキスト用

この位置の経度を 10 進数の角度で表す `double` 型の値を返します。

`GeolocationCoordinates.altitude` 読取専用  安全なコンテキスト用

この位置の海面からの相対的な高度をメートル単位で表す `double` 型の値を返します。実装がこのデータを提供できない場合、この値は `null` になることがあります。

`GeolocationCoordinates.accuracy` 読取専用  安全なコンテキスト用

`latitude` および `longitude` プロパティの精度をメートル単位で表す、`double` 型の値を返します。

`GeolocationCoordinates.altitudeAccuracy` 読取専用  安全なコンテキスト用

`altitude` プロパティの精度をメートル単位で表す、`double` 型の値を返します。このプロパティは `null` になることがあります。

`GeolocationCoordinates.heading` 読取専用  安全なコンテキスト用

端末が向かっている方向を表す `double` 型の値を返します。この値は、端末の向きが真北からどれだけ離れているかを、角度で表します。 `0` は真北を表し、方向は時計回りに定められます (すなわち、東は `90` 度、西は `270` 度です)。 `speed` が `0` の場合、 `heading` は `NaN` になります。もし `heading` の情報を取得できない場合は、この値は `null` になります。

`GeolocationCoordinates.speed` 読取専用  安全なコンテキスト用

端末の移動速度をメートル毎秒で表す `double` 型の値を返します。このプロパティは `null` になることがあります。

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

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

仕様書
---

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

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

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

関連情報
----

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


queueMicrotask() - Web API

queueMicrotask()
================

**`queueMicrotask()`** は `Window` または `Worker` インターフェイスのメソッドです。ブラウザーのイベントループへ制御が戻る前の安全なタイミングで実行されるマイクロタスクをキューします。

マイクロタスク (microtask) とは、現在のタスクが完了し実行コンテキストの制御がブラウザーのイベントループへ戻る前、他に保留中のコードがなくなった時点で走る短い関数です。

これを利用すると他の（優先度が高いであろう）保留中のコードへ干渉することなく、ブラウザーが実行コンテキストの制御を取り戻す前に完了させたい処理を走らせることができます。マイクロタスクの使い方や使う理由についてはマイクロタスクのガイドで詳しく学ぶことができます。

マイクロタスクの重要性はタスクを非同期かつ指定の順序で実行することです。詳しくはJavaScript で queueMicrotask() によるマイクロタスクの使用をご覧ください。

マイクロタスクはライブラリーやフレームワークで必要なクリーンアップなど、描画直前のタスクに特に有用です。

構文
--

```js
queueMicrotask(callback);
```

### 引数

`callback`

コードを呼んでも安全だとブラウザーエンジンが判断したときに実行される `関数` 。キューされたマイクロタスクは全ての保留中のタスクが完了した後、制御をブラウザーのイベントループへ渡す前に実行されます。

### 戻値

`undefined`

例
-

```js
queueMicrotask(() => {
  // ここに関数の内容
});
```

queueMicrotask の仕様書より:

```js
MyElement.prototype.loadData = function (url) {
  if (this._cache[url]) {
    queueMicrotask(() => {
      this.\_setData(this._cache[url]);
      this.dispatchEvent(new Event("load"));
    });
  } else {
    fetch(url)
      .then((res) => res.arrayBuffer())
      .then((data) => {
        this._cache[url] = data;
        this.\_setData(data);
        this.dispatchEvent(new Event("load"));
      });
  }
};
```

queueMicrotask() が利用できない場合
--------------------------

以下のコードは基本的にはモダンエンジンの `queueMicrotask()` のモンキーパッチです。即時解決される promise を用いてマイクロタスクを生成します。

```js
if (typeof self.queueMicrotask !== "function") {
  self.queueMicrotask = function (callback) {
    Promise.resolve()
      .then(callback)
      .catch((e) =>
        setTimeout(() => {
          throw e;
        }),
      ); // 例外を通知
  };
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # microtask-queuing |

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

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

関連情報
----

* Polyfill of `queueMicrotask` in `core-js`
* JavaScript で queueMicrotask() によるマイクロタスクの使用
* 非同期 JavaScript
* queueMicrotask
explainer
* Tasks,
microtasks, queues and schedules by Jake Archibald


SVGElement - Web API

SVGElement
==========

SVG 言語における要素に直接対応する SVG DOM インタフェースのすべては、`SVGElement` インタフェースから派生しています。

EventTarget

Node

Element

SVGElement属性
--

*Also inherits properties from: `Element`, `HTMLOrForeignElement`。*

`SVGElement.dataset`読取専用

要素に付与されたカスタム・データ属性 (en-US)に対応する名前つきデータ属性の、キーと値の対のリストを与える、`DOMStringMap` オブジェクトです。`data-\* (en-US)` の形の属性を使って、これらの対を SVG で定義することもでき、ここで `*` は、その対のキーの名前です。これは、HTML の `HTMLElement.dataset` 属性および HTML の `data-*` グローバル属性とちょうど同様に、うまく機能します。

`SVGElement.className`
非推奨
読取専用

An `SVGAnimatedString` (en-US) that reflects the value of the `class (en-US)` attribute on the given element, or the empty string if `class` is not present. This attribute is deprecated and may be removed in a future version of this specification. Authors are advised to use `Element.classList` instead.

`SVGElement.ownerSVGElement`読取専用

直近の先祖の `<svg>` 要素を参照する `SVGSVGElement` (en-US) です。もし、与えられた要素が最も外側の `<svg>` 要素であれば、`null` です。

`SVGElement.viewportElement`読取専用

現在のビューポートを確立した `SVGElement` です。多くの場合は、直近の先祖の `<svg>` 要素です。もし、与えられた要素が最も外側の `<svg>` 要素であれば、`null` です。

メソッド
----

*`SVGElement` インタフェースは、追加のメソッドを何も提供しませんが、親から、すなわち `Element`, `HTMLOrForeignElement` から、メソッドを継承しています。*

イベント
----

Events
------

Listen to these events using `addEventListener()` or by assigning an event listener to the equivalent `on...` handler property defined on `GlobalEventHandlers` or `WindowEventHandlers`.

`abort`

 Fired when page loading is stopped before an SVG element has been allowed to load completely.
 Also available via the `onabort` property.

`error` (en-US)

 Fired when an SVG element does not load properly or when an error occurs during script execution.
 Also available via the `onerror` (en-US) property.

`load` (en-US)

 Fires on an `SVGElement` when it is loaded in the browser.
 Also available via the `onload` property.

`resize`

 Fired when an SVG document is being resized.
 Also available via the `onresize` property.

`scroll`

 Fired when an SVG document view is being shifted along the X and/or Y axes.
 Also available via the `onscroll` property.

`unload`

 Fired when the DOM implementation removes an SVG document from a window or frame.
 Also available via the `onunload` property.

仕様
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGElement |

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

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

参照
--

* HTML `data-*` attribute
* SVG `data-\* (en-US)` attribute
* Using custom data attributes in HTML (en-US)


バーコード検出 API - Web API

バーコード検出 API
===========

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

**注:** この機能は Web Worker 内で利用可能です

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

バーコード検出 API (Barcode Detection API) は、線形および二次元のバーコードを画像内から検出します。

概念と使用方法
-------

ウェブアプリケーションでバーコード認識に対応することで、対応しているバーコード形式を通じてさまざまな用途に利用できるようになります。 QR コードはオンライン決済、ウェブナビゲーション、ソーシャルメディア接続の確立に、アステカコードは搭乗券のスキャンに、ショッピングアプリは JAN、EAN、UPC バーコードを使用して物理的なアイテムの価格を比較するために使用することが可能です。

検出は `detect()` メソッドで行われ、これに画像オブジェクトを渡します。これは 要素、`Blob`、`ImageData`、`CanvasImageSource` (en-US) の何れかです。オプションの引数を `BarcodeDetector` コンストラクターに渡すことで、検出するバーコード形式のヒントを与えることができます。

### 対応しているバーコード形式

バーコード検出 API は、以下のバーコード形式に対応しています。

| 形式 | 説明 | 画像 |
| --- | --- | --- |
| aztec | ISO24778 に準拠した正方形の二次元行列で、その中心には正方形の角灯パターンがあり、アステカのピラミッドに似ています。周囲に空白ゾーンを必要としません。 | アステカバーコードのサンプル画像です。正方形の中に黒と白の小さな四角形が入っています。 |
| code\_128 | ISO15417 に準拠し、 ASCII の 128 文字すべてを符号化できる（この名称の由来）線形（一次元）、双方向復号可能、自己検査可能なバーコードです。 | code-128　バーコードの画像です。黒と白の縦線が水平に分布しています。 |
| code\_39 | ISO16388 に準拠した線形（一次元）の自己検査バーコードです。離散的で可変長のバーコード型です。 | code-39 バーコードの画像です。黒と白の縦線が水平に分布しています。 |
| code\_93 | bc5 に続く長さが可変の直線的な連続記号。 Code 128 よりも情報密度が高く、 Code 39 に似た外見です。 Code 93 は、主にカナダポストが配達の補足情報をエンコードするために使用しています。 | code 93 形式のバーコードの画像です。黒と白の縦線が水平に分布しています。 |
| codabar | 線形のバーコードで、 0-9, A-D と記号 - . $ / + の文字を表します。 | codebar 形式のバーコードの画像です。黒と白の縦線が水平に分布しています。 |
| data\_matrix | ISO16022 に準拠し、黒と白のモジュールを正方形または長方形に配列した、方向に依存しない二次元バーコードです。 | データマトリクスバーコードの一例。正方形の中に白と黒の小さな正方形が埋め尽くされています。 |
| ean\_13 | UPC-A 規格に基づき、 ISO15420 で定義された線形バーコードです。 | EAN-13 形式のバーコードの画像です。黒と白の縦線が水平に分布しています。 |
| ean\_8 | ISO15420 で定義され、 EAN-13 から派生した線形バーコードです。 | EAN-8 形式のバーコードの画像です。黒と白の縦線が水平に分布しています。 |
| itf | 連続的、自己チェック、双方向にデコード可能なバーコードです。常に 14 桁の数字がエンコードされています。 | ITF バーコードの画像です。黒と白の縦線が水平に分布しています。 |
| pdf417 | 複数行、複数列の連続した二次元バーコードの記号化形式です。双方向にデコード可能で、 ISO15438 規格を使用しています。 | pdf417バーコードのフォーマットの例です。白黒の小さな四角形が並んでいます。 |
| qr\_code | ISO18004 規格を使用した二次元バーコードです。エンコードされる情報は、テキスト、URL、その他のデータです。 | QR コードの一例です。白と黒の小さな四角形が並んでいます。 |
| upc\_a | 最も一般的な線形バーコードの一つで、米国では小売業に広く適用されています。 ISO15420 で定義されており、バーとスペースで数字を表現し、各桁は幅が可変のバー 2 本とスペース 2 本の一意なパターンと関連付けられています。 UPC-A は、各商品に一意に割り当てられる 12 桁の数字をエンコードでき、技術的には EAN-13 のサブセットです（UPC-A コードは、最初の文字を 0 に設定したEAN-13 で表現されます）。 | upc-a バーコードの画像です。白黒の縦線の長方形で、その下に数字が書かれています。 |
| upc\_e | ISO15420 で定義されている UPC-A の変化形で、不要なゼロを圧縮してよりコンパクトなバーコードにしたものです。 | upc-e バーコードの画像です。黒と白の縦線が入った長方形です。 |
| unknown | この値は、プラットフォームが検出中のバーコードを解釈できない、または特定できない、または対応していないことを表すために使用されます。 |  |

ユーザーエージェントが対応している形式は、 `getSupportedFormats()` メソッドで確認することができます。

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

`BarcodeDetector`

**`BarcodeDetector`** インターフェイスはバーコード検出 API のインターフェイスで、画像内の線形および二次元バーコードを検出できるようにします。

例
-

### 検出器の作成

この例では、ブラウザーの互換性をチェックし、指定されたサポート形式で、新しいバーコード検出器オブジェクトを作成します。

```js
// 互換性をチェック
if (!("BarcodeDetector" in window)) {
  console.log("Barcode Detector はこのブラウザーでは対応していません。");
} else {
  console.log("Barcode Detector に対応しています。");

  // 新しい検出器を生成
  var barcodeDetector = new BarcodeDetector({
    formats: ["code\_39", "codabar", "ean\_13"],
  });
}
```

### 対応している形式の取得

次の例では、 `getSupportFormat()` メソッドを呼び出し、結果をコンソールに記録しています。

```js
// 対応している型をチェック
BarcodeDetector.getSupportedFormats().then((supportedFormats) => {
  supportedFormats.forEach((format) => console.log(format));
});
```

### バーコードの検出

この例では、 `detect()` メソッドを使用して、与えられた画像内のバーコードを検出しています。これらは繰り返し処理され、バーコードのデータはコンソールに記録されます。

```js
barcodeDetector
  .detect(imageEl)
  .then((barcodes) => {
    barcodes.forEach((barcode) => console.log(barcode.rawData));
  })
  .catch((err) => {
    console.log(err);
  });
```

仕様書
---

| 仕様書 |
| --- |
| Accelerated Shape Detection in Images # barcode-detection-api |

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

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

関連情報
----

* barcodefaq.com: A website with information about different barcodes and examples of the different types.
* The Shape Detection API: a picture is worth a thousand words, faces, and barcodes


CSSKeywordValue - Web API

CSSKeywordValue
===============

**`CSSKeywordValue`** は CSS 型付きオブジェクトモデル API のインターフェイスで、CSS のキーワードやその他の識別子を表すオブジェクトを作成します。

このインターフェイスのインスタンス名は文字列化子です。つまり、文字列が期待される場所で使用すると `CSSKeyword.value` の値を返します。

CSSStyleValue

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

`CSSKeywordValue()`

新しい `CSSKeywordValue` オブジェクトを生成します。

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

`CSSKeywordValue.value`

`CSSKeywordValue` の値を返却または設定します。

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

*`CSSStyleValue` からメソッドを継承しています。*

例
-

次の例は、CSS の `display` プロパティを既定値にリセットするために、インラインの `style` 属性を `style="display: initial"` に設定します。これは開発者ツールインスペクターで見られます。
```

#myElement {
  display: flex;
}
```

```
<div id="myElement">
  開発者ツールでコンソールのログを確認し、この div の style
  属性を調べてみてください。
</div>
```

```js
let myElement = document.getElementById("myElement").attributeStyleMap;
myElement.set("display", new CSSKeywordValue("initial"));

console.log(myElement.get("display").value); // 'initial'
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # keywordvalue-objects |

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

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

関連情報
----

* `CSSImageValue`
* `CSSNumericValue`
* `CSSPositionValue` (en-US)
* `CSSTransformValue`
* `CSSUnparsedValue`


AbortController - Web API

AbortController
===============

**`AbortController`** インターフェイスは 1 つ以上のウェブリクエストをいつでも中断することを可能にするコントローラーオブジェクトを表します。

新しい `AbortController` オブジェクトを新しく生成するには、 `AbortController()` コンストラクターを使うことができます。 DOM リクエストとの送信は、 `AbortSignal` オブジェクトを使って行われます。

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

`AbortController()`

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

プロパティ
-----

`AbortController.signal` 読取専用

`AbortSignal` オブジェクトのインスタンスを返します。 このオブジェクトは、 DOM リクエストの送信や中断に使用します。

メソッド
----

`AbortController.abort()`

DOM リクエストが完了する前に中断します。これは、フェッチリクエスト、あらゆるレスポンス本体やストリームを中断することができます。

例
-

**メモ:** 他の例が `AbortSignal` のリファレンスにあります。

この後の短いコードで、フェッチ API を使用して動画をダウンロードします。

まず `AbortController()` コンストラクターを使ってコントローラーを生成し、 `AbortController.signal` プロパティを使用して関連する `AbortSignal` オブジェクトへの参照を取得します。

フェッチリクエストが行われると、リクエストのオプションオブジェクト（下記 `{signal}` を参照）の内部のオプションとして `AbortSignal` を渡します。これによりシグナルと読み込みリクエストのコントローラーは関連付き、 `AbortController.abort()` を呼び出すことで下記の 2 つ目のイベントリスナーに見られるように中断が許可されます。

```js
let controller;
const url = "video.mp4";

const downloadBtn = document.querySelector(".download");
const abortBtn = document.querySelector(".abort");

downloadBtn.addEventListener("click", fetchVideo);

abortBtn.addEventListener("click", () => {
  if (controller) {
    controller.abort();
    console.log("Download aborted");
  }
});

function fetchVideo() {
  controller = new AbortController();
  const signal = controller.signal;
  fetch(url, { signal })
    .then((response) => {
      console.log("Download complete", response);
    })
    .catch((err) => {
      console.error(`Download error: ${err.message}`);
    });
}
```

**メモ:** `abort()` が呼ばれると、`fetch()` のプロミスは `AbortError` と呼ばれる `DOMException` で失敗します。

GitHub に完全に動作する例があります。また、ライブでの実行も確認してください。

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-abortcontroller |

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

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

関連情報
----

* フェッチ API
* Abortable Fetch (Jake Archibald)（英語）


キーボード API - Web API

キーボード 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 - Web API

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 - Web API

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)


AudioBufferSourceNode - Web API

AudioBufferSourceNode
=====================

**`AudioBufferSourceNode`** は `AudioScheduledSourceNode` を継承するインタフェースで、 `AudioBuffer` に保存されたメモリー内の音声データからなる音声ソースを表します。

このインターフェイスは、再生するタイミングに高い正確性が求められる音声を繰り返し再生する場合特に有益です。例えば、特定のリズムに合わせて、ディスクやネットワークからではなくメモリーから読み出した音声を再生するといった場合です。正確なタイミングで音声を再生したいものの、音声データをディスクやネットワークから読み込む必要がある場合は `AudioWorkletNode` を使用してください。

EventTarget

AudioNode

AudioScheduledSourceNode

AudioBufferSourceNode
`AudioBufferSourceNode` は入力がなく、その出力は 1 つで、出力されるチャンネル数は `AudioBuffer` の `buffer` プロパティで示します。バッファーが設定されていない場合、すなわち、 `buffer` が `null` である場合、出力は無音（すべてのサンプルが 0）の単一のチャンネルとなります。

`AudioBufferSourceNode` は一度しか再生できません。つまり、同じ音を再び再生したいのであれば、 `start()` を呼び出すたびに新しいノードを作成する必要があります。幸いなことに、これらのノードはとても安価に作成でき、実際の `AudioBuffer` は複数回のサウンド再生に再利用することができます。実際、これらのノードは「使い捨て」で使用することができます。ノードを作成し、 `start()` を呼び出して音の再生を始め、わざわざそのノードの参照を保持する必要はないでしょう。このノードは適切なタイミングで自動的にガベージコレクションされますが、それはサウンドの再生が完了した後しばらくしてからになります。

`stop()` は何度も呼び出すことができます。 `AudioBufferSourceNode` がバッファのー最後に達していないならば、最後の呼び出しがその前の呼び出しを上書きします。

![AudioBufferSourceNodeは、AudioBufferの中身を受け取る](/ja/docs/Web/API/AudioBufferSourceNode/webaudioaudiobuffersourcenode.png)

|  |  |
| --- | --- |
| 入力数 | `0` |
| 出力数 | `1` |
| チャンネル数 | 関連付けられた `AudioBuffer` によって定義される |

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

`AudioBufferSourceNode()`

新しい `AudioBufferSourceNode` オブジェクトを作成して返します。代替手段として、 `BaseAudioContext.createBufferSource()` を使用することもできます。詳しくは AudioNode の作成を参照してください。

プロパティ
-----

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

`AudioBufferSourceNode.buffer`

再生する音声資産を定義する `AudioBuffer` で、この値を `null` に設定すると、 1 つの無音チャンネル（すべてのサンプルが 0.0 になる）を定義します。

`AudioBufferSourceNode.detune`

k-rate の `AudioParam` 再生時の離調をセント単位で表します。この値は `playbackRate` と合成され、音を再生する速度を決定します。既定値で `0` （離調なし）、公称範囲は -∞ から ∞ です。

`AudioBufferSourceNode.loop`

論理値で、 `AudioBuffer` の終わりに達したとき、音声資産を再生しなければならないかどうかを示します。既定値は `false` です。

`AudioBufferSourceNode.loopStart` 省略可

浮動小数点数で、 `loop` が `true` のときに `AudioBuffer` の再生を開始しなければならない時刻を秒単位で表します。既定値では `0` です（各ループの開始時に、音声バッファの先頭から再生が始まることを意味します）。

`AudioBufferSourceNode.loopEnd` 省略可

浮動小数点数で、 `loop` が `true` の場合に `AudioBuffer` の再生が停止して `loopStart` で示した時刻に戻る時刻を、秒単位で表します。既定値は `0` です。

`AudioBufferSourceNode.playbackRate`

a-rate の `AudioParam` 音声資産を再生する際の速度係数を定義したもので、値 1.0 は音声の自然サンプリングレートとなります。出力にはピッチ補正が適用されないので、サンプルのピッチを変更するために使用することができます。この値は `detune` と合成され、最終的な再生レートを決定します。

メソッド
----

*親である `AudioScheduledSourceNode` のメソッドを継承しています。*

`AudioBufferSourceNode.start()`

バッファーに格納された音声データの再生予約を行うか、または直ちに再生を開始します。また、開始オフセットと再生時間を設定することができます。

### イベントハンドラー

*親である `AudioScheduledSourceNode` のイベントハンドラーを継承しています。*

例
-

次の例は、2 秒間のバッファをー生成し、ホワイトノイズを書き込み、 `AudioBufferSourceNode` で再生します。コメントは何をしているかを簡単に説明しています。

**メモ:** コードをライブで実行したり、ソースコードを閲覧したりすることもできます。

```js
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// AudioContext のサンプリングレートで空の 3 秒のステレオバッファーを作成
const myArrayBuffer = audioCtx.createBuffer(
  2,
  audioCtx.sampleRate \* 3,
  audioCtx.sampleRate,
);

// バッファーにホワイトノイズを書き込む
// 単なる -1.0 から 1.0 の間の乱数の値である
for (let channel = 0; channel < myArrayBuffer.numberOfChannels; channel++) {
  // 実際のデータの配列を得る
  const nowBuffering = myArrayBuffer.getChannelData(channel);
  for (let i = 0; i < myArrayBuffer.length; i++) {
    // Math.random() は [0; 1.0] である
    // 音声は [-1.0; 1.0] である必要がある
    nowBuffering[i] = Math.random() \* 2 - 1;
  }
}

// AudioBufferSourceNode を得る
// これは AudioBuffer を再生するときに使う AudioNode である
const source = audioCtx.createBufferSource();
// AudioBufferSourceNode にバッファーを設定する
source.buffer = myArrayBuffer;
// AudioBufferSourceNode を出力先に接続すると
// 音声が聞こえるようになる
source.connect(audioCtx.destination);
// 音源の再生を始める
source.start();
```

**メモ:** `decodeAudioData()` の例は 、 `AudioContext.decodeAudioData()` のページを参照してください。

仕様書
---

| Specification |
| --- |
| Web Audio API # AudioBufferSourceNode |

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

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

関連情報
----

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


WritableStreamDefaultWriter - Web API

WritableStreamDefaultWriter
===========================

**`WritableStreamDefaultWriter`** はストリーム API のインターフェイスで、 `WritableStream.getWriter()` によって返されるオブジェクトであり、作成されるとライターを `WritableStream` にロックし、他のストリームが基になるシンクに書き込めないようにします。

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

`WritableStreamDefaultWriter()`

新しい `WritableStreamDefaultWriter` オブジェクトのインスタンスを作成します。

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

`WritableStreamDefaultWriter.closed` 読取専用

ストリーミングプロセスの終了に応答するコードを記述できます。ストリームが閉じられるか、ライターのロックが解除されると履行され、ストリームがエラーになるか、ライターのロックが解放されると拒否されるプロミスを返します。

`WritableStreamDefaultWriter.desiredSize` 読取専用

ストリームの内部キューを満たすために必要な希望サイズを返します。

`WritableStreamDefaultWriter.ready` 読取専用

ストリームの内部キューの希望サイズが非正から正に移行したときに解決する `Promise` を返し、バックプレッシャーが適用されなくなったことを通知します。

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

`WritableStreamDefaultWriter.abort()`

ストリームを中止し、プロデューサーがストリームに正常に書き込むことができなくなり、キューに入れられた書き込みを破棄してすぐにエラー状態に移行することを通知します。

`WritableStreamDefaultWriter.close()`

関連する書き込み可能なストリームを閉じます。

`WritableStreamDefaultWriter.releaseLock()`

対応するストリームのライターのロックを解除します。 ロックを解除すると、ライターはアクティブではなくなります。 ロックを解除したときに関連するストリームにエラーが発生した場合、ライターはこれ以降同じようにエラーが発生したように見えます。 そうでない場合、ライターは閉じられたように見えます。

`WritableStreamDefaultWriter.write()`

渡されたデータのチャンクを `WritableStream` とその基になるシンクに書き込んでから、書き込み操作の成功または失敗を示すために解決する `Promise` を返します。

例
-

次の例は、カスタムのシンクと API 提供のキューイング戦略を使用した `WritableStream` の作成を示しています。 次に、`sendMessage()` という関数を呼び出し、新しく作成されたストリームと文字列を渡します。 この関数内で、`WritableStreamDefaultWriter` のインスタンスを返すストリームの `getWriter()` メソッドを呼び出します。 `forEach()` 呼び出しを使用して、文字列の各チャンクをストリームに書き込みます。 最後に、`write()` および `close()` は、チャンクとストリームの成功または失敗に対処するための promise を返します。

```js
const list = document.querySelector("ul");

async function sendMessage(message, writableStream) {
  // defaultWriter は WritableStreamDefaultWriter 型です
  const defaultWriter = writableStream.getWriter();
  const encoder = new TextEncoder();
  const encoded = encoder.encode(message);

  try {
    for (const chunk of encoded) {
      await defaultWriter.ready;
      await defaultWriter.write(chunk);
      console.log("Chunk written to sink.");
    }
    // ライターを閉じる前にすべてのチャンクが確実に
    // 書き込まれるように、ready を再度呼び出します。
    await defaultWriter.ready;
    await defaultWriter.close();
    console.log("All chunks written");
  } catch (err) {
    console.log("Error:", err);
  }
}

const decoder = new TextDecoder("utf-8");
const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
let result = "";
const writableStream = new WritableStream(
  {
    // シンクの実装
    write(chunk) {
      return new Promise((resolve, reject) => {
        const buffer = new ArrayBuffer(1);
        const view = new Uint8Array(buffer);
        view[0] = chunk;
        const decoded = decoder.decode(view, { stream: true });
        const listItem = document.createElement("li");
        listItem.textContent = `Chunk decoded: ${decoded}`;
        list.appendChild(listItem);
        result += decoded;
        resolve();
      });
    },
    close() {
      const listItem = document.createElement("li");
      listItem.textContent = `[MESSAGE RECEIVED] ${result}`;
      list.appendChild(listItem);
    },
    abort(err) {
      console.log("Sink error:", err);
    },
  },
  queuingStrategy,
);

sendMessage("Hello, world.", writableStream);
```

完全なコードは、単純なライターの例にあります。

仕様書
---

| Specification |
| --- |
| Streams Standard # default-writer-class |

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

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


Element - Web API

Element
=======

**`Element`** は `Document` が継承するオブジェクトの中にあるすべての要素オブジェクト（すなわち、要素を表現するオブジェクト）が継承する、もっとも一般的な基底クラスです。すべての種類の要素の共通するメソッドとプロパティのみを持ちます。もっと具体的なクラスが `Element` を継承しています。

例えば `HTMLElement` インターフェイスは HTML 要素の基本インターフェイスであり、 `SVGElement` インターフェイスはすべての SVG 要素の基本になります。ほとんどの機能は、クラスの階層を下りると具体化していきます。

XUL の `XULElement` インターフェイスのようなウェブプラットフォームの枠外の言語もまた、`Element` インターフェイスを実装しています。

EventTarget

Node

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

*`Element` は、親インターフェイスである `Node`、およびその親インターフェイスである `EventTarget` からプロパティを継承しています。*

`Element.assignedSlot` 読取専用

このノードが挿入された `<slot>` を表す `HTMLSlotElement` を返します。

`Element.attributes` 読取専用

対応する HTML 要素に関連したすべての属性のリストである `NamedNodeMap` を返します。

`Element.childElementCount` 読取専用

この要素の子要素の数を返します。

`Element.children` 読取専用

この要素の子要素を返します。

`Element.classList` 読取専用

class 属性のリストが入った `DOMTokenList` を返します。

`Element.className`

文字列で、この要素のクラスを表します。

`Element.clientHeight` 読取専用

この要素の内部の高さを表す数値を返します。

`Element.clientLeft` 読取専用

この要素の左境界の幅を表す数値を返します。

`Element.clientTop` 読取専用

この要素の上境界の幅を表す数値を返します。

`Element.clientWidth` 読取専用

この要素の内部の幅を表す数値を返します。

`Element.elementTiming`
Experimental

`PerformanceElementTiming` API において要素を監視するためのマークとなる `elementtiming` 属性を に反映した文字列です。

`Element.firstElementChild` 読取専用

この要素の最初の子要素を返します。

`Element.id`

文字列で、この要素の id を表します。

`Element.innerHTML`

文字列で、この要素の内容のマークアップを表します。

`Element.lastElementChild` 読取専用

この要素の最後の子要素を返します。

`Element.localName` 読取専用

文字列で、この要素の修飾名のローカル部分を表します。

`Element.namespaceURI` 読取専用

この要素の名前空間の URI。名前空間がない場合は `null` になります。

**メモ:** Firefox 3.5 および以前のバージョンでは、HTML 要素の名前空間はありません。以降のバージョンでは、HTML 要素は HTML ツリーおよび XML ツリーで `http://www.w3.org/1999/xhtml` 名前空間内に存在します。

`Element.nextElementSibling` 読取専用

`Element` で、ツリー上で自身の直後の要素を表します。兄弟ノードがなければ `null` になります。

`Element.outerHTML`

文字列で、その要素の内容を含むマークアップを表します。値が設定された場合、その文字列から解釈されたノードでその要素を置換します。

`Element.part`

要素のパート識別子 (すなわち、 `part` 属性を使用して設定されるもの) が、 `DOMTokenList` として返されます。

`Element.prefix` 読取専用

文字列で、要素の名前空間接頭辞を表します。接頭辞が指定されていない場合は `null` です。

`Element.previousElementSibling` 読取専用

`Element` で、ツリー上で自身の直前の要素を表します。兄弟ノードがなければ `null` です。

`Element.scrollHeight` 読取専用

この要素のスクロールビューの高さを表す数値を返します。

`Element.scrollLeft`

数値型で、この要素の左スクロールオフセット値を表します。

`Element.scrollLeftMax`
Non-standard
 読取専用

この要素で可能な左スクロールオフセットの最大値を表す数値を返します。

`Element.scrollTop`

この要素の上端が垂直方向にスクロールされた量をピクセル数で表す数値です。

`Element.scrollTopMax`
Non-standard
 読取専用

要素で可能な上スクロールオフセットの最大値を表す数値を返します。

`Element.scrollWidth` 読取専用

要素のスクロールビュー幅を表す数値を返します。

`Element.shadowRoot` 読取専用

要素が所持しているオープンモードのシャドウルート、あるいはオープンモードのシャドウルートがない場合は null を返します。

`Element.slot`

この要素が挿入されているシャドウ DOM スロットの名前を返します。

`Element.tagName` 読取専用

この要素のタグ名を文字列で返します。

### ARIA から導入されたインスタンスプロパティ

*`Element` インターフェイスは、 `ARIAMixin` ミックスインで定義されている以下のプロパティを持っています。*

`Element.ariaAtomic`

文字列で、`aria-atomic` 属性を反映し、 `aria-relevant` (en-US) 属性で定義された変更通知に基づいて、支援技術が変更された領域のすべてを提示するか、一部のみを提示するかを示します。

`Element.ariaAutoComplete`

文字列で、`aria-autocomplete` 属性を反映し、コンボボックス、検索ボックス、テキストボックスでテキストを入力する際に、ユーザーの意図した値の 1 つ以上の予測を表示するかどうか、予測が行われた場合にはどのように表示するかを指定します。

`Element.ariaBusy`

文字列で、`aria-busy` (en-US) 属性を反映し、要素が修正されているかどうかを示します。支援技術では、修正が完了するまで待ってからユーザーに公開したい場合があります。

`Element.ariaChecked`

文字列で、`aria-checked` (en-US) 属性を反映し、チェックボックス、ラジオボタン、その他のチェック状態を持つウィジェットの現在の「チェック」状態を示します。

`Element.ariaColCount`

文字列で、`aria-colcount` (en-US) 属性を反映し、テーブル、グリッド、ツリーグリッドの列数を定義します。

`Element.ariaColIndex`

文字列で、`aria-colindex` (en-US) 属性を反映し、テーブル、グリッド、ツリーグリッド内の列の総数に対する要素の列インデックスまたは位置を定義します。

`Element.ariaColSpan`

文字列で、`aria-colspan` (en-US) 属性を反映し、テーブル、グリッド、ツリーグリッド内のセルまたはグリッドセルがカバーする列数を定義します。

`Element.ariaCurrent`

文字列で、`aria-current` (en-US) 属性を反映し、コンテナーまたは関連要素のセット内の現在の項目を表す要素を示します。

`Element.ariaDescription`

文字列で、`aria-description` (en-US) 属性を反映し、現在の要素を説明または注釈する文字列値を定義します。

`Element.ariaDisabled`

文字列で、`aria-disabled` 属性を反映し、この要素が知覚可能であるが無効であるため、編集やその他の操作ができないことを示します。

`Element.ariaExpanded`

文字列で、`aria-expanded` (en-US) 属性を反映し、この要素が所有または制御するグループ化要素が展開されているか畳まれているかを示します。

`Element.ariaHasPopup`

文字列で、`aria-haspopup` (en-US) 属性を反映し、この要素によって引き起こされるメニューやダイアログのような対話型のポップアップ要素の有無と種類を示します。

`Element.ariaHidden`

文字列で、`aria-hidden` (en-US) 属性を反映し、この要素がアクセシビリティ API に公開されているかどうかを示します。

`Element.ariaKeyShortcuts`

文字列で、`aria-keyshortcuts` (en-US) 属性を反映し、要素を活性化したりフォーカスを与えたりするために作者が実装したキーボードショートカットを示します。

`Element.ariaLabel`

文字列で、`aria-label` (en-US) 属性を反映し、現在の要素をラベル付けする文字列値を定義します。

`Element.ariaLevel`

文字列で、`aria-level` (en-US) 属性を反映し、構造内の要素の階層レベルを定義します。

`Element.ariaLive`

文字列で、`aria-live` (en-US) 属性を反映し、この要素が更新されること、ユーザーエージェント、支援技術、ユーザーがライブ領域から期待できる更新の種類を記述します。

`Element.ariaModal`

文字列で、`aria-modal` (en-US) 属性を反映し、要素が表示されたときにモーダルであるかどうかを示します。

`Element.ariaMultiline`

文字列で、`aria-multiline` (en-US) 属性を反映し、テキストボックスが複数行の入力を受け入れるか、一行のみを受け入れるかを示します。

`Element.ariaMultiSelectable`

文字列で、`aria-multiselectable` (en-US) 属性を反映し、ユーザーが現在の選択可能な子孫から複数の項目を選択できることを示します。

`Element.ariaOrientation`

文字列で、`aria-orientation` (en-US) 属性を反映し、要素の方向が水平、垂直、または不明/曖昧であることを示す。

`Element.ariaPlaceholder`

文字列で、`aria-placeholder` (en-US) 属性を反映し、コントロールに値がない場合にユーザーのデータ入力を支援するための短いヒントを定義します。

`Element.ariaPosInSet`

文字列で、`aria-posinset` (en-US) 属性を反映し、リストアイテムまたはツリーアイテムの現在のセットにおける要素の数または位置を定義します。

`Element.ariaPressed`

文字列で、`aria-pressed` (en-US) 属性を反映し、トグルボタンの現在の「押された」状態を示します。

`Element.ariaReadOnly`

文字列で、`aria-readonly` (en-US) 属性を反映し、要素が編集不可能であることを示すが、それ以外は操作可能であることを示します。

`Element.ariaRelevant`
Non-standard

文字列で、`aria-relevant` (en-US) 属性を反映し、ライブリージョン内のアクセシビリティツリーが変更された場合に、ユーザエージェントがどのような通知を行うかを示します。これは、 `aria-live` リージョン内のどのような変更が関連性があり、アナウンスされるべきかを記述するために使用されます。

`Element.ariaRequired`

文字列で、`aria-required` (en-US) 属性を反映し、フォームを送信する前に要素にユーザーの入力が必要であることを示します。

`Element.ariaRoleDescription`

文字列で、`aria-roledescription` (en-US) 属性を反映し、要素の役割について、人間が読める、著者がローカライズした説明を定義します。

`Element.ariaRowCount`

文字列で、`aria-rowcount` (en-US) 属性を反映し、テーブル、グリッド、ツリーグリッドの行の総数を定義します。

`Element.ariaRowIndex`

文字列で、`aria-rowindex` (en-US) 属性を反映し、テーブル、グリッド、ツリーグリッド内の行の総数に対する要素の行インデックスまたは位置を定義します。

`Element.ariaRowSpan`

文字列で、`aria-rowspan` (en-US) 属性を反映し、テーブル、グリッド、ツリーグリッド内のセルまたはグリッドセルがカバーする行数を定義します。

`Element.ariaSelected`

文字列で、`aria-selected` (en-US) 属性を反映し、選択状態を持つ要素の現在の「選択された」状態を示します。

`Element.ariaSetSize`

文字列で、`aria-setsize` (en-US) 属性を反映し、現在のリストアイテムまたはツリーアイテムのセットのアイテム数を定義します。

`Element.ariaSort`

文字列で、`aria-sort` (en-US) 属性を反映し、テーブルやグリッドのアイテムが昇順または降順でソートされるかどうかを示します。

`Element.ariaValueMax`

文字列で、`aria-valueMax` (en-US) 属性を反映し、 range ウィジェットの最大許容値を定義します。

`Element.ariaValueMin`

文字列で、`aria-valueMin` (en-US) 属性を反映し、 range ウィジェットに許容される最小値を定義します。

`Element.ariaValueNow`

文字列で、`aria-valueNow` (en-US) 属性を反映し、 range ウィジェットの現在の値を定義します。

`Element.ariaValueText`

文字列で、`aria-valuetext` (en-US) 属性を反映し、 range ウィジェットの aria-valuenow の代替となる人間が読めるテキストを定義します。

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

*`Element` は親である `Node`、およびその親である `EventTarget` からメソッドを継承しています。*

`EventTarget.addEventListener()`

この要素、特定のイベント型を扱うイベントハンドラーを登録します。

`Element.after()`

`Node` オブジェクトまたは文字列を、この `Element` の親の子ノードリストの中、 `Element` の直後に追加します。

`Element.attachShadow()`

指定した要素にシャドウ DOM ツリーを結びつけて、その `ShadowRoot` への参照を返します。

`Element.animate()`

この要素でアニメーションを作成および実行するためのショートカットメソッドです。作成した Animation オブジェクトのインスタンスを返します。

`Element.append()`

この要素の最後の子の後に、一連の `Node` オブジェクトまたは文字列を挿入します。

`Element.before()`

`Node` オブジェクトまたは文字列をこの `Element` の親の子ノードリストの中、 `Element` の直前に追加します。

`Element.closest()`

`Element` 型で、引数に指定したセレクターによって選択される要素がもっとも近い祖先要素（または当該要素自身）を返します。

`Element.computedStyleMap()`

`StylePropertyMapReadOnly` インターフェイスで、 `CSSStyleDeclaration` に代わる、CSS 宣言ブロックを読み取り専用で表現したものを返します。

`EventTarget.dispatchEvent()`

DOM 内のこのノードにイベントを送ります。そして、イベントをキャンセルしたハンドラーがないかを示す論理値を返します。

`Element.getAnimations()`

要素でアクティブな Animation オブジェクトの配列を返します。

`Element.getAttribute()`

現在ノードから指定された名前付きの属性値を取得して文字列で返します。

`Element.getAttributeNames()`

現在の要素の属性名の配列を返します。

`Element.getAttributeNode()`

現在のノードから、指定された属性のノード表現を取得し、 `Attr` として返します。

`Element.getAttributeNodeNS()`

指定された名前と名前空間を持つ属性のノード表現を現在のノードから取得し、それを `Attr` として返します。

`Element.getAttributeNS()`

現在のノードから指定された名前と名前空間を持つ属性値を取得して、文字列で返します。

`Element.getBoundingClientRect()`

この要素のサイズと、ビューポートにおける位置を返します。

`Element.getBoxQuads()`
Experimental

このノードの CSS フラグメントを表す `DOMQuad` オブジェクトのリストを返します。

`Element.getClientRects()`

クライアント領域内のテキストの各行の外接矩形 (bounding rectangle) の集合を返します。

`Element.getElementsByClassName()`

生きた `HTMLCollection` で、現在の要素から、引数に指定したクラス名のリストに該当するすべての子孫要素を生きた `HTMLCollection` で、返します。

`Element.getElementsByTagName()`

現在要素から、特定のタグ名を持つすべての子孫要素の集合を取得して生きた `HTMLCollection` で返します。

`Element.getElementsByTagNameNS()`

生きた `HTMLCollection` で、現在要素から、特定のタグ名と名前空間を持つすべての子孫要素の集合を取得して、生きた `HTMLCollection` で返します。

`Element.hasAttribute()`

要素が指定された指定された属性を持っているか否かを示す論理値を返します。

`Element.hasAttributeNS()`

要素が指定された名前空間内に指定された属性を持っているか否かを示す論理値を返します。

`Element.hasAttributes()`

要素が現在 1 つ以上の属性をもっているかを示す論理値を返します。

`Element.hasPointerCapture()`

呼び出された要素が、指定されたポインター ID によって識別されるポインターのポインターキャプチャを持っているかどうかを示します。

`Element.insertAdjacentElement()`

メソッドを実行した要素に対して相対的な指定位置に、要素ノードを挿入します。

`Element.insertAdjacentHTML()`

テキストを HTML または XML として解釈し、解釈結果のノードをツリーの指定した位置に挿入します。

`Element.insertAdjacentText()`

メソッドを実行した要素に対して相対的な指定位置に、テキストノードを挿入します。

`Element.matches()`

要素が指定されたセレクター文字列で選択されるか否かを示す論理値を返します。

`Element.prepend()`

この要素の最初の子の前に、一連の `Node` オブジェクトまたは文字列を挿入します。

`Element.querySelector()`

要素に対して、指定したセレクターに一致する最初の `Node` を返します。

`Element.querySelectorAll()`

要素に対して、指定したセレクターに一致するノードの `NodeList` を返します。

`Element.releasePointerCapture()`

以前に特定の`ポインターイベント`向けに設定したポインターキャプチャーを解放 (停止) します。

`Element.remove()`

親要素の子リストから、要素を取り除きます。

`Element.removeAttribute()`

現在ノードから，指定された名前を持つ属性を取り除きます。

`Element.removeAttributeNode()`

現在のノードから名前の付いた属性のノード表現を取り除きます。

`Element.removeAttributeNS()`

現在ノードから，指定された名前と名前空間を持つ属性を取り除きます。

`EventTarget.removeEventListener()`

要素からイベントリスナーを取り除きます。

`Element.replaceChildren()`

`Node` の既存の子を指定された新しい一連の子に置き換えます。

`Element.replaceWith()`

親の子リストの要素を、一連の `Node` オブジェクトまたは文字列で置き換えます。

`Element.requestFullscreen()`

要素を全画面表示するよう、ブラウザーへ非同期的に要求します。

`Element.requestPointerLock()`

指定した要素でポインターをロックするよう、非同期的に要求できます。

`Element.scroll()`

指定された要素の中で特定の座標のセットへスクロールします。

`Element.scrollBy()`

指定された量だけ要素をスクロールします。

`Element.scrollIntoView()`

要素がビューの内側に来るまでページをスクロールします。

`Element.scrollIntoViewIfNeeded()`
Non-standard

現在の要素がまだブラウザーウィンドウの可視領域内にない場合、ブラウザーウィンドウの可視領域内にスクロールさせます。**標準の `Element.scrollIntoView()` を代わりに使用してください。**

`Element.scrollTo()`

指定された要素の中で特定の座標のセットへスクロールします。

`Element.setAttribute()`

現在ノードに、指定された名前を持つ属性値を設定します。

`Element.setAttributeNode()`

現在のノードから指定された属性のノード表現を設定します。

`Element.setAttributeNodeNS()`

指定された名前と名前空間を持つ属性のノード表現を、現在のノードから設定します。

`Element.setAttributeNS()`

現在ノードに、指定された名前と名前空間を持つ属性値を設定します。

`Element.setCapture()`
Non-standard

非推奨

マウスイベントキャプチャーを設定し、すべてのマウスイベントをこの要素にリダイレクトします。

`Element.setHTML()`
Experimental

HTML の文字列を解釈して無害化し、DOM にこの要素のサブツリーとして挿入します。

`Element.setPointerCapture()`

指定された要素を、以降のポインターイベントのキャプチャー対象として指定します。

`Element.toggleAttribute()`

論理属性のオンオフを切り替えます。属性が存在していれば削除、属性が存在していなければ追加します。

イベント
----

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

`beforematch`
Experimental

見つかるまでの間は非表示状態にある要素で、ユーザーが「ページ内検索」機能やフラグメントナビゲーションによってコンテンツを見つけたため、ブラウザーがそのコンテンツを公開しようとしているときに発行されます。

`cancel`

ユーザーがブラウザーに、現在開いているモーダルダイアログを閉じたいと指示したときに `<dialog>` に発行されます。ブラウザーがこのイベントを発行させる可能性があるのは、例えばユーザーが `Esc` キーを押してモーダルダイアログを閉じた時です。

`contentvisibilityautostatechange`
Experimental

`content-visibility: auto` が設定されている要素がユーザーに関連する、コンテンツのスキップを開始または終了するときに、その要素を対象に発行されます。

`scroll`

文書のビューまたは要素がスクロールしたときに発行されます。

`securitypolicyviolation`

コンテンツセキュリティポリシーに違反したときに発生します。

`wheel`

ユーザーがポインティングデバイス（普通はマウス）のホイールボタンを回転させたときに発行されます。

### クリップボードイベント

`copy`

ユーザーがブラウザーのユーザーインターフェイスを通して、コピー操作を行ったときに発行されます。

`cut`

ユーザーがブラウザーのユーザーインターフェイスを通して、切り取り操作を行ったときに発行されます。

`paste`

ユーザーがブラウザーのユーザーインターフェイスを通して、貼り付け操作を行ったときに発行されます。

### 構成イベント

`compositionend`

インプットメソッドエディターのようなテキスト構成システムで、現在の入力セッションが完了またはキャンセルされたときに発行されます。

`compositionstart`

インプットメソッドエディターのようなテキスト構成システムで、新しい入力セッションを始まったときに発行されます。

`compositionupdate`

インプットメソッドエディターのようなテキスト構成システムによって制御されている入力セッションのコンテキストに、新しい文字が入力されたときに発行されます。

### フォーカスイベント

`blur`

要素がフォーカスを失ったときに発行されます。

`focus`

要素がフォーカスを受け取ったときに発行されます。

`focusin`

要素がフォーカスを受け取ったとき、`focus` の後に発行されます。

`focusout`

要素がフォーカスを失ったとき、 `blur` の後に発行されます。

### 全画面イベント

`fullscreenchange`

全画面モードへの移行時または終了時に、 `Element` に送られます。

`fullscreenerror`

全画面モードへの移行または終了を試みている中でエラーが発生したときに、 `Element` に送られます。

### キーボードイベント

`keydown`

キーが押されたときに発行されます。

`keypress`
非推奨

文字の値を発行させるキーが押されたときに発行されます。

`keyup`

キーが離されたときに発行されます。

### マウスイベント

`auxclick`

ポインティングデバイスの第一ボタン以外のボタン（例えば、マウスの左ボタン以外のボタン）が要素上で押されて離されたときに発行されます。

`click`

ポインティングデバイスのボタン（例えば、マウスの第一ボタン）が単一の要素上で押されて離されたときに発行されます。

`contextmenu`

ユーザーがコンテキストメニューを開こうとしたときに発行されます。

`dblclick`

ポインティングデバイスのボタン（例えば、マウスの第一ボタン）が単一の要素上で 2 回クリックされたときに発行されます。

`DOMActivate`
非推奨

要素が、例えばマウスのクリックやキーの押下によってアクティブになったときに発行されます。

`mousedown`

ポインティングデバイスのボタンが要素上で押されたときに発行されます。

`mouseenter`

ポインティングデバイス（ふつうはマウス）が、リスナーが割り当てられた要素の上へ移動したときに発行されます。

`mouseleave`

ポインティングデバイス（ふつうはマウス）が、リスナーが割り当てられた要素の外へ移動したときに発行されます。

`mousemove`

ポインティングデバイス（ふつうはマウス）が、要素の上を移動したときに発行されます。

`mouseout`

ポインティングデバイス（ふつうはマウス）が、リスナーが割り当てられた要素またはその子要素の外へ移動したときに発行されます。

`mouseover`

ポインティングデバイス（ふつうはマウス）が、リスナーが割り当てられた要素またはその子要素の上を移動したときに発行されます。

`mouseup`

ポインティングデバイスのボタンが要素の上で離されたときに発行されます。

`webkitmouseforcechanged`
Non-standard

trackpadtouchscreen の上の圧力が変化するたびに発行されます。

`webkitmouseforcedown`
Non-standard

「強制クリック」と判断されるのに十分な圧力があった直後の mousedown イベントの後で発行されます。

`webkitmouseforcewillbegin`
Non-standard

`mousedown` イベントの前に発行されます。

`webkitmouseforceup`
Non-standard

「強制クリック」が終了したといえるほど圧力が減少した直後の `webkitmouseforcedown` イベントの後で発行されます。

### タッチイベント

`touchcancel`

1 つ以上のタッチ点が実装依存の理由により破棄された（例えば、タッチ点が多く作られすぎた）場合に発行されます。

`touchend`

1 つ以上のタッチ点がタッチ面から取り除かれたときに発行されます。

`touchmove`

1 つ以上のタッチ点がタッチ面上で移動したときに発行されます。

`touchstart`

1 つ以上のタッチ点がタッチ面に配置されたときに発行されます。

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-element |
| Pointer Events # extensions-to-the-element-interface |
| Pointer Lock 2.0 # extensions-to-the-element-interface |
| Fullscreen API Standard # api |
| DOM Parsing and Serialization # extensions-to-the-element-interface |
| CSSOM View Module # extension-to-the-element-interface |

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

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


clearInterval() - Web API

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 - Web API

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() - Web API

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()`


HTMLElement - Web API

HTMLElement
===========

**`HTMLElement`** インターフェイスは、任意の HTML 要素を表します。要素によってはこのインターフェイスで直接実装されていたり、これを継承したインターフェイスを通して実装されていたりします。

EventTarget

Node

Element

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

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

`HTMLElement.accessKey`

要素に割り当てられたアクセスキーを表す文字列です。

`HTMLElement.accessKeyLabel` 読取専用

要素に割り当てられたアクセスキーを含む文字列を返します。

`HTMLElement.attributeStyleMap` 読取専用

`StylePropertyMap` で、その要素の `style` 属性の宣言を表します。

`HTMLElement.contentEditable`

文字列で、 `true` の場合は要素が編集可能、`false` の場合は編集不可であることを表します。

`HTMLElement.isContentEditable` 読取専用

論理値で、要素のコンテンツが編集可能か否かを示します。

`HTMLElement.dataset` 読取専用

`DOMStringMap` で、スクリプトが読み書きできる要素のカスタムデータ属性 (`data-*`) を表します。

`HTMLElement.dir`

文字列で、要素の書字方向を表す `dir` グローバル属性を反映します。利用可能な値は、`"ltr"` および `"rtl"`、`"auto"` です。

`HTMLElement.draggable` (en-US)

論理値で、要素がドラッグ可能かどうかを示します。

`HTMLElement.enterKeyHint`

文字列で、仮想キーボードの Enter キーに表示するアクションラベル（またはアイコン）を定義します。

`HTMLElement.hidden`

文字列または論理値で、この要素の `hidden` 属性の値を反映します。

`HTMLElement.inert`

論理値で、ユーザー操作イベント、ページ内テキスト検索（「ページ内を検索」）、テキストの選択において、ユーザーエージェントが指定したノードがないかのように動作するかどうかを示します。

`HTMLElement.innerText`

 このノードやその子孫において、表示されるテキストの内容を表します。
 ゲッターとしては、カーソルで要素の内容を選択しクリップボードにコピーした際のテキストに近いものを取得することができます。
 セッターとしては、この要素の子要素を指定された値で置き換え、すべての改行を `<br>` 要素に変換します。

`HTMLElement.inputMode`

文字列で、この要素の `inputmode` 属性の値を反映します。

`HTMLElement.popover`
Experimental

JavaScript から要素のポップオーバー状態を取得・設定し（`"auto"`または`"manual"`）、機能検出のために使用することもできます。グローバル HTML 属性 `popover` の値を反映します。

`HTMLElement.lang`

文字列で、要素の属性およびテキスト、要素のコンテンツの言語を表します。

`HTMLElement.noModule`

論理値で、モジュールスクリプトに対応しているユーザーエージェントでインポートしたスクリプトが実行されるかどうかを示します。

`HTMLElement.nonce`

指定されたフェッチが実行を許可されるかどうかを判断するためにコンテンツセキュリティポリシーが使用する、一度だけ使用される暗号学的な数値を返します。

`HTMLElement.offsetHeight` 読取専用

`double` 値で、レイアウトに対して相対的な要素の高さを返します。

`HTMLElement.offsetLeft` 読取専用

`double` 値で、この要素の左境界線からその `offsetParent` の左境界線までの距離を返します。

`HTMLElement.offsetParent` 読取専用

`Element` で、すべてのオフセット計算が現在計算されている要素を返します。

`HTMLElement.offsetTop` 読取専用

`double` 値で、要素の上境界線からその `offsetParent` の上境界線までの距離を返します。

`HTMLElement.offsetWidth` 読取専用

`double` 値で、レイアウトに対して相対的な要素の幅を返します。

`HTMLElement.outerText`

 ノードとその子孫の表示されるテキストコンテンツを表します。
 ゲッターとしては `HTMLElement.innerText` と同じです（要素とその子孫の表示されるテキストの内容を表します）。
 セッターとしては、選択されたノードとその内容を指定された値で置き換え、改行を `<br>` 要素に変換します。

`HTMLElement.properties`
Experimental
 読取専用

`HTMLPropertiesCollection` を返します…

`HTMLElement.spellcheck` (en-US)

論理値で、スペルチェック を制御します。これはすべての HTML 要素に提供されていますが、すべての要素に効果があるとは限りません。

`HTMLElement.style`

`CSSStyleDeclaration` で、この要素の `style` 属性の宣言を表します。

`HTMLElement.tabIndex`

`long` 値で、タブ順内の要素の位置を表します。

`HTMLElement.title`

文字列で、マウスポインターを要素に当てた時に現れるポップアップボックスのテキストを表します。

`HTMLElement.translate` (en-US)

論理値で、翻訳を行うかどうかを表します。

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

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

`HTMLElement.attachInternals()`

`ElementInternals` オブジェクトを返し、カスタム要素を HTML フォームに参加できるようにします。

`HTMLElement.blur()`

現在フォーカスされている要素からキーボードフォーカスを外します。

`HTMLElement.click()`

要素にマウスクリックイベントを送信します。

`HTMLElement.focus()`

要素に現在のキーボードフォーカスを当てます。

`HTMLElement.hidePopover()`
Experimental

ポップオーバー要素を最上位レイヤー (en-US)から取り除き、`display: none` でスタイル設定することで、ポップオーバー要素を非表示にします。

`HTMLElement.showPopover()`
Experimental

ポップオーバー要素を最上位レイヤー (en-US)に追加し、`display: none;` スタイル設定を削除することで、ポップオーバー要素を表示します。

`HTMLElement.togglePopover()`
Experimental

ポップオーバー要素を非表示状態と表示状態を切り替えます。

イベント
----

これらのイベントを待ち受けするには `addEventListener()` を用いるか、イベントリスナーをこのインターフェイスの `onイベント名` プロパティに代入するかしてください。

`copy`

ユーザーがブラウザーのユーザーインターフェイスを通じてコピー操作を開始したときに発生します。

`cut`

ユーザーがブラウザーのユーザーインターフェイスから切り取り操作を開始したときに発生します。

`paste`

ユーザーがブラウザーのユーザーインターフェイスを通じて貼り付け操作を開始したときに発生します。

`invalid`

制約の検証で、要素が制約を満たさなかった場合に発行されます。

`beforetoggle`

要素がポップオーバーの場合、非表示になる前、または表示される前に発行されます。

`toggle`

要素がポップオーバーの場合、非表示になった後、または表示された後に発行されます。

### アニメーションイベント

`animationcancel`

アニメーションが予期せず中断されたときに発行されます。

`animationend`

アニメーションが正常に完了したときに発行されます。

`animationiteration`

アニメーションが 1 回分完了したときに発行されます。

`animationstart`

アニメーションが開始されたときに発行されます。

### 入力イベント

`beforeinput`

`<input>`, `<select>`, `<textarea>` のいずれかの要素が変更される前に発行されます。

`input`

`<input>`, `<select>`, `<textarea>` のいずれかの要素の `value` が変更されたときに発行されます。

`change`

`<input>`, `<select>`, `<textarea>` のいずれかの要素の `value` が変更され、ユーザーが確定したときに発行されます。`input` イベントとは異なり、`change` イベントは要素の `value` が変更されるたびに発行されるわけではありません。

### ポインターイベント

`gotpointercapture`

`setPointerCapture()` を用いて要素がポインターをキャプチャしたときに発行されます。

`lostpointercapture`

キャプチャされたポインターが解放されたときに発行されます。

`pointercancel`

ポインターイベントがキャンセルされたときに発行されます。

`pointerdown`

ポインターがアクティブになったときに発行されます。

`pointerenter`

ポインターが要素またはその子孫の一つのヒットテスト境界に入ったときに発行されます。

`pointerleave`

ポインターが要素のヒットテスト境界から出たときに発行されます。

`pointermove`

ポインターの座標が変化したときに発行されます。

`pointerout`

ポインターが要素の*ヒットテスト*境界を (他の理由で) 出たときに発行されます。

`pointerover`

ポインターが要素のヒットテスト境界に入ったときに発行されます。

`pointerup`

ポインターがアクティブではなくなったときに発行されます。

### トランジションイベント

`transitioncancel`

CSS トランジションがキャンセルされたときに発行されます。

`transitionend`

CSS トランジションが完了したときに発行されます。

`transitionrun`

CSS トランジションが最初に作成されたときに発行されます。

`transitionstart`

CSS トランジションが実際に開始されたときに発行されます。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlelement |

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

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

関連情報
----

* `Element`


WorkerLocation - Web API

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`
* ウェブワーカーの使用


Web MIDI API - Web API

Web MIDI API
============

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

Web MIDI API は、Musical Instrument Digital Interface (MIDI) デバイスに接続して操作します。

 このインターフェイスは、MIDI メッセージの送受信の実用的な側面を扱います。
 そのため、この API は音楽用途でも音楽意外の用途でも、コンピューターに接続された任意の MIDI デバイスを扱うことができます。

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

`MIDIInputMap`

すべての利用可能な MIDI 入力ポートを表します。

`MIDIOutputMap`

すべての利用可能な MIDI 出力ポートを表します。

`MIDIAccess`

入力デバイスや出力デバイスを列挙したり、個々のデバイスにアクセスしたりするメソッドを提供します。

`MIDIPort`

個々の MIDI ポートを表します。

`MIDIInput`

入力ポートから受信する MIDI メッセージを扱うメソッドを提供します。

`MIDIOutput`

接続された MIDI ポートに送信するメッセージをキューに追加します。メッセージはすぐに送信することも、指定の遅延の後で送信することもできます。

`MIDIMessageEvent`

`MIDIInput.midimessage_event` に渡されるイベントです。

`MIDIConnectionEvent`

ポートが利用可能になったり利用不可能になったりした時、`MIDIAccess.statechange_event` および `MIDIPort.statechange_event` イベントに渡されるイベントです。

セキュリティの要件
---------

この API へのアクセスは、`navigator.requestMIDIAccess()` メソッドを用いて要求します。

* このメソッドは安全なコンテキストで呼び出す必要があります。
* アクセスは `midi` HTTP Permission Policy により制限される可能性があります。
* ユーザーがユーザーエージェント固有のメカニズムによりこの API を用いる許可を明示的に与えるか、既に許可が与えられている必要があります。
 なお、アクセスが Permission Policy により拒否された場合は、ユーザーがアクセスを許可することはできません。

許可の状態は、Permissions API のメソッド `navigator.permissions.query()` に権限 `midi` と (省略可能な) `sysex` プロパティを設定した権限ディスクリプターを渡すことで取得できます。

```js
navigator.permissions.query({ name: "midi", sysex: true }).then((result) => {
  if (result.state === "granted") {
    // アクセスが許可されました
  } else if (result.state === "prompt") {
    // API を使用すると、許可を求めるプロンプトが表示されます
  }
  // ユーザープロンプトまたは Permission Policy により権限が拒否されました
});
```

例
-

### MIDI ポートにアクセスできるようにする

`navigator.requestMIDIAccess()` メソッドは `MIDIAccess` オブジェクトで解決する `Promise` を返します。このオブジェクトを利用して MIDI デバイスにアクセスできます。
 このメソッドは、安全なコンテキストで呼ばれる必要があります。

```js
let midi = null; // グローバルの MIDIAccess オブジェクト
function onMIDISuccess(midiAccess) {
  console.log("MIDI の準備ができました！");
  midi = midiAccess; // グローバル変数に保存する (実際の使用法では、オブジェクトインスタンスに格納するのがよいでしょう)
}

function onMIDIFailure(msg) {
  console.error(`MIDI アクセスの取得に失敗しました - ${msg}`);
}

navigator.requestMIDIAccess().then(onMIDISuccess, onMIDIFailure);
```

### 入力と出力を列挙する

この例では、入力ポートと出力ポートのリストを取得し、コンソールに出力します。

```js
function listInputsAndOutputs(midiAccess) {
  for (const entry of midiAccess.inputs) {
    const input = entry[1];
    console.log(
      `入力ポート [type:'${input.type}']` +
        ` id:'${input.id}'` +
        ` manufacturer:'${input.manufacturer}'` +
        ` name:'${input.name}'` +
        ` version:'${input.version}'`,
    );
  }

  for (const entry of midiAccess.outputs) {
    const output = entry[1];
    console.log(
      `出力ポート [type:'${output.type}'] id:'${output.id}' manufacturer:'${output.manufacturer}' name:'${output.name}' version:'${output.version}'`,
    );
  }
}
```

### MIDI 入力を扱う

この例では、1 個のポートで受信した MIDI メッセージをコンソールに出力します。

```js
function onMIDIMessage(event) {
  let str = `タイムスタンプ ${event.timeStamp} に受信した MIDI メッセージ [${event.data.length} バイト]: `;
  for (const character of event.data) {
    str += `0x${character.toString(16)} `;
  }
  console.log(str);
}

function startLoggingMIDIInput(midiAccess, indexOfPort) {
  midiAccess.inputs.forEach((entry) => {
    entry.onmidimessage = onMIDIMessage;
  });
}
```

仕様書
---

| Specification |
| --- |
| Web MIDI API  |

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

### api.Navigator.requestMIDIAccess

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

### http.headers.Permissions-Policy.midi

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

### api.Permissions.permission\_midi

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

関連情報
----

* Introduction to Web MIDI
* Making Music in the Browser


CSS Painting API - Web API

CSS Painting API
================

CSS Painting API（CSS Houdini API の傘の一部）を使用すると、開発者は要素の背景、境界線、またはコンテンツに直接描画できる JavaScript 関数を記述できます。

概念と使用方法
-------

基本的に、CSS Painting API には、開発者が CSS の `<image>` の関数である `paint()` のためのカスタム値を作成できる機能が含まれています。 次に、これらの値を `background-image` などのプロパティに適用して、要素に複雑なカスタム背景を設定できます。

例えば、次のようにです。

```css
aside {
  background-image: paint(myPaintedImage);
}
```

この API は `PaintWorklet` (en-US) を定義します。 これは、計算されたスタイルの変更に応じて画像をプログラムで生成するために使用できるワークレット（`worklet`）です。 これの使用方法の詳細については、CSS Painting API の使用を参照してください。

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

`PaintWorklet` (en-US)

CSS プロパティがファイルを予期している画像をプログラムで生成します。 `CSS.paintWorklet` を介してこのインターフェイスにアクセスします。

`PaintWorkletGlobalScope` (en-US)

`paintWorklet` のグローバル実行コンテキスト。

`PaintRenderingContext2D`

CanvasRenderingContext2D API のサブセットを実装します。 レンダリング先のオブジェクトのサイズである出力ビットマップを持ちます。

`PaintSize`

出力ビットマップの幅と高さの読み取り専用の値を返します。

ディクショナリ
-------

`PaintRenderingContext2DSettings`

CanvasRenderingContext2D 設定のサブセットを提供するディクショナリ。

例
-

CSS で JavaScript を使用して要素の背景に直接描画するには、`registerPaint()` (en-US) 関数を使用してペイントワークレットを定義し、paintWorklet の `addModule()` メソッドを使用してワークレットを含めるようドキュメントに指示し、CSS `paint()` 関数を使用して作成した画像を含めます。

`registerPaint()` (en-US) 関数を使用して、`'hollowHighlights'` という PaintWorklet を作成します。

```js
registerPaint(
  "hollowHighlights",
  class {
    static get inputProperties() {
      return ["--boxColor"];
    }

    static get inputArguments() {
      return ["\*", "<length>"];
    }

    static get contextOptions() {
      return { alpha: true };
    }

    paint(ctx, size, props, args) {
      const x = 0;
      const y = size.height \* 0.3;
      const blockWidth = size.width \* 0.33;
      const blockHeight = size.height \* 0.85;

      const theColor = props.get("--boxColor");
      const strokeType = args[0].toString();
      const strokeWidth = parseInt(args[1]);

      console.log(theColor);

      if (strokeWidth) {
        ctx.lineWidth = strokeWidth;
      } else {
        ctx.lineWidth = 1.0;
      }

      if (strokeType === "stroke") {
        ctx.fillStyle = "transparent";
        ctx.strokeStyle = theColor;
      } else if (strokeType === "filled") {
        ctx.fillStyle = theColor;
        ctx.strokeStyle = theColor;
      } else {
        ctx.fillStyle = "none";
        ctx.strokeStyle = "none";
      }

      ctx.beginPath();
      ctx.moveTo(x, y);
      ctx.lineTo(blockWidth, y);
      ctx.lineTo(blockWidth + blockHeight, blockHeight);
      ctx.lineTo(x, blockHeight);
      ctx.lineTo(x, y);
      ctx.closePath();
      ctx.fill();
      ctx.stroke();

      for (let i = 0; i < 4; i++) {
        let start = i \* 2;
        ctx.beginPath();
        ctx.moveTo(blockWidth + start \* 10 + 10, y);
        ctx.lineTo(blockWidth + start \* 10 + 20, y);
        ctx.lineTo(blockWidth + start \* 10 + 20 + blockHeight, blockHeight);
        ctx.lineTo(blockWidth + start \* 10 + 10 + blockHeight, blockHeight);
        ctx.lineTo(blockWidth + start \* 10 + 10, y);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
      }
    }
  },
);
```

次に、paintWorklet を含めます。
```

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
  <li>item 11</li>
  <li>item 12</li>
  <li>item 13</li>
  <li>item 14</li>
  <li>item 15</li>
  <li>item 16</li>
  <li>item 17</li>
  <li>item 18</li>
  <li>item 19</li>
  <li>item 20</li>
</ul>
```

```js
CSS.paintWorklet.addModule(
  "https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js",
);
```

次に、CSS の `paint()` 関数で `<image>` を使用できます。

```css
li {
  --boxColor: hsla(55, 90%, 60%, 1);
  background-image: paint(hollowHighlights, stroke, 2px);
}

li:nth-of-type(3n) {
  --boxColor: hsla(155, 90%, 60%, 1);
  background-image: paint(hollowHighlights, filled, 3px);
}

li:nth-of-type(3n + 1) {
  --boxColor: hsla(255, 90%, 60%, 1);
  background-image: paint(hollowHighlights, stroke, 1px);
}
```

セレクターブロックに boxColor を定義するカスタムプロパティを含めました。 PaintWorklet からカスタムプロパティにアクセスできます。

仕様
--

| Specification |
| --- |
| CSS Painting API Level 1 # paintworkletglobalscope |

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

各 CSS Painting API インターフェイスのブラウザーの互換性のデータを参照してください。

関連情報
----

* CSS Painting API の使用
* CSS Typed Object Model API (en-US)
* CSS Houdini


FragmentDirective - Web API

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 - Web API

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 - Web API

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 - Web API

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 - Web API

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 - Web API

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


IDBObjectStore - Web API

IDBObjectStore
==============

IndexedDB API の **`IDBObjectStore`** インターフェイスは、データベース内のオブジェクトストアを表します。オブジェクトストア内のレコードは、キーによってソートされています。ソートしておくことで、高速な挿入、検索、そして順番での取り出しを可能にします。

**注:** この機能は Web Worker 内で利用可能です

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

`IDBObjectStore.indexNames` 読取専用

このオブジェクトストア内のオブジェクトのインデックスの名前のリストです。

`IDBObjectStore.keyPath` 読取専用

このオブジェクトストアのキーパスです。この属性が `null` のときは、アプリケーションはそれぞれの更新操作のためにキーを提供しなければなりません。

`IDBObjectStore.name`

このオブジェクトストアの名前です。

`IDBObjectStore.transaction` 読取専用

このオブジェクトストアが属している `IDBTransaction` オブジェクトです。

`IDBObjectStore.autoIncrement` 読取専用

このオブジェクトストアのオートインクリメントフラグの値です。

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

`IDBObjectStore.add()`

`IDBRequest` オブジェクトを返し、別のスレッドで `value` の構造化複製を生成し、複製した値をオブジェクトストアに保存します。これはオブジェクトストアに新しいレコードを追加する操作です。

`IDBObjectStore.clear()`

`IDBRequest` オブジェクトを生成してすぐに返し、別のスレッドでこのオブジェクトストアをクリアします。これはオブジェクトストア内に現在ある全レコードを削除する操作です。

`IDBObjectStore.count()`

`IDBRequest` オブジェクトを返し、別のスレッドで指定のキーまたは `IDBKeyRange` にマッチするレコードの数を返します。引数なしで呼ばれた場合は、ストア内の全レコードの数を返します。

`IDBObjectStore.createIndex()`

バージョンの更新中に新しいインデックスを作成し、接続中のデータベースにおける新しい `IDBIndex` を返します。

`IDBObjectStore.delete()`

`IDBRequest` オブジェクトを返し、指定したキーによって選択されたストア内のオブジェクトを別のスレッドで削除します。これはオブジェクトストアから個別のレコードを削除する操作です。

`IDBObjectStore.deleteIndex()`

バージョンの更新中に用い、接続中のデータベースから指定したインデックスを削除します。

`IDBObjectStore.get()`

`IDBRequest` オブジェクトを返し、指定したキーによって選択されたストア内のオブジェクトを別のスレッドで返します。これはオブジェクトストアから特定のレコードを取り出す操作です。

`IDBObjectStore.getKey()`

`IDBRequest` オブジェクトを返し、指定したパラメーターにマッチするオブジェクトストア内のオブジェクトのレコードキーを別のスレッドで取得して返します。

`IDBObjectStore.getAll()`

`IDBRequest` オブジェクトを返し、指定したパラメーターにマッチするオブジェクトストア内のオブジェクトを全て取得します。引数なしで呼ばれた場合は、ストア内の全てのオブジェクトを取得します。

`IDBObjectStore.getAllKeys()`

`IDBRequest` オブジェクトを返し、指定したパラメーターにマッチするオブジェクトストア内の全てのオブジェクトのレコードキーを取得します。引数なしで呼ばれた場合は、ストア内の全てのオブジェクトについて取得します。

`IDBObjectStore.index()`

このオブジェクトストアでインデックスを開きます。これは、たとえば、カーソルを用いてこのインデックスでソートされたレコードの列を得るのに用いることができます。

`IDBObjectStore.openCursor()`

`IDBRequest` オブジェクトを返し、別のスレッドで新しい `IDBCursorWithValue` オブジェクトを返します。これはカーソルを用いて主キーでオブジェクトストアを走査するのに用います。

`IDBObjectStore.openKeyCursor()`

`IDBRequest` オブジェクトを返し、別のスレッドで新しい `IDBCursor` を返します。これはキーでオブジェクトストアを走査するのに用います。

`IDBObjectStore.put()`

`IDBRequest` オブジェクトを返し、別のスレッドで `value` の構造化複製を作成し、複製した値をオブジェクトストアに保存します。これはトランザクションのモードが `readwrite` のときに既存のレコードを更新する操作です。

例
-

この例では、`onupgradeneeded` 関数内での `IDBObjectStore.createIndex` を用いたデータ構造の更新から、`IDBObjectStore.add` によるオブジェクトストアへのアイテムの追加まで、オブジェクトストアの様々な使用法を紹介します。動く例全体は、To-do Notifications アプリケーションを参照してください。(動く例を見る)

```js
// 我々のデータベースを開きましょう
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

DBOpenRequest.onsuccess = (event) => {
  note.innerHTML += "<li>データベースを初期化しました。</li>";

  // データベースを開いた結果を db に格納します
  db = DBOpenRequest.result;
};

// このイベントは、データベースがまだ作成されていないか、
// 上の window.indexedDB.open の行で新しいバージョン番号が
// 指定されたかで、新しいバージョンのデータベースを作成する
// 必要がある場合を処理します
DBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;

  db.onerror = (event) => {
    note.innerHTML +=
      "<li>データベースの読み込み中にエラーが発生しました。</li>";
  };

  // このデータベース用の objectStore を作ります

  const objectStore = db.createObjectStore("toDoList", {
    keyPath: "taskTitle",
  });

  // objectStore に格納するデータアイテムを定義します

  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });

  objectStore.createIndex("notified", "notified", { unique: false });

  note.innerHTML += "<li>オブジェクトストアを作成しました。</li>";
};

// オブジェクトストアに追加する新しいアイテムを作成します
const newItem = [
  {
    taskTitle: "Walk dog",
    hours: 19,
    minutes: 30,
    day: 24,
    month: "December",
    year: 2013,
    notified: "no",
  },
];

// 読み書き用のトランザクションを開き、データを追加する準備をします
const transaction = db.transaction(["toDoList"], "readwrite");

// 全て完了した時、トランザクションの正常終了を報告します
transaction.oncomplete = (event) => {
  note.innerHTML += "<li>トランザクションが完了しました。</li>";
};

transaction.onerror = (event) => {
  note.innerHTML +=
    "<li>トランザクションはエラーのため開けませんでした。アイテムの重複は許可されていません。</li>";
};

// トランザクションでオブジェクトストアを作成します
const objectStore = transaction.objectStore("toDoList");
// オブジェクトストアに newItem オブジェクトを追加する要求をします
const objectStoreRequest = objectStore.add(newItem[0]);

objectStoreRequest.onsuccess = (event) => {
  note.innerHTML += "<li>要求は成功しました。</li>";
};
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # object-store-interface |

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

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

関連情報
----

* IndexedDB の使用
* トランザクションの開始: `IDBDatabase`
* トランザクションの使用: `IDBTransaction`
* キーの範囲の設定: `IDBKeyRange`
* データの取得と変更: `IDBObjectStore`
* カーソルの使用: `IDBCursor`
* リファレンス例: To-do Notifications (動く例を見る)


OfflineAudioCompletionEvent - Web 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 - Web 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>`


BackgroundFetchRecord - Web API

BackgroundFetchRecord
=====================

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

Background Fetch API の **`BackgroundFetchRecord`** インターフェイスは、個々のリクエストと応答を表します。

`BackgroundFetchRecord` は `BackgroundFetchManager.fetch()` メソッドによって生成されるので、このインターフェイスにはコンストラクターがありません。

`fetch()` で要求された各リソースに対して、 `BackgroundFetchRecord` が 1 つずつ存在することになります。

プロパティ
-----

`request` 読取専用
Experimental

`Request` を返します。

`responseReady` 読取専用
Experimental

`Response` によって解決されるプロミスを返します。

例
-

以下の例では、 `BackgroundFetchManager.fetch()` の使用によって生成された `BackgroundFetchRecord` から `BackgroundFetchRecord.request` と `BackgroundFetchRecord.responseReady` の値を受け取り、コンソールにログ出力しています。

```js
bgFetch.match("/ep-5.mp3").then(async (record) => {
  if (!record) {
    console.log("recordは見つかりませんでした");
    return;
  }

  console.log(`リクエスト：`, record.request);
  const response = await record.responseReady;
  console.log(`応答：`, response);
});
```

仕様書
---

| Specification |
| --- |
| Background Fetch # background-fetch-record-interface |

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

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


Gamepad - Web API

Gamepad
=======

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

**`Gamepad`** はゲームパッド API のインターフェイスで、それぞれのゲームパッドやその他のコントローラーを定義し、ボタン押下や軸位置や ID といった情報にアクセスできるようにします。

Gamepad オブジェクトを取得する方法は 2 つあります。 `gamepadconnected` または `gamepaddisconnected` イベントの `gamepad` プロパティか、 `Navigator.getGamepads()` から返される配列の任意の位置から取得します。

プロパティ
-----

`Gamepad.axes` 読取専用

機器上に軸があるコントロールを表す配列です（例: アナログスティック）。

`Gamepad.buttons` 読取専用

機器上のボタンを表す `gamepadButton` のオブジェクトの配列。

`Gamepad.connected` 読取専用

ゲームパッドがシステムに繋がっているかを表す論理値。

`Gamepad.displayId` 読取専用
非推奨

Non-standard

関連する *`VRDisplay`* の *`VRDisplay.displayId`* を返します）該当する場合）。ゲームパッドが表示されているシーンを制御している `VRDisplay` を返します。

`Gamepad.hand` 読取専用
Experimental

コントローラーがどの手で握られているか、または握られる可能性が高いかを定義する列挙型です。

`Gamepad.hapticActuators` 読取専用
Experimental

`GamepadHapticActuator` オブジェクトを格納した配列で、各オブジェクトはコントローラーで利用できる触覚フィードバックのハードウェアを表します。

`Gamepad.vibrationActuator` 読取専用
Non-standard

`GamepadHapticActuator` オブジェクトで、コントローラーで利用できる触覚フィードバックのハードウェアを表します。

`Gamepad.id` 読取専用

文字列で、コントローラーに関する識別情報を示します。

`Gamepad.index` 読取専用

システムに現在接続しているそれぞれの機器を表す固有の整数値。

`Gamepad.mapping` 読取専用

ブラウザーが機器上のコントロールを既知のレイアウトに再マップしたかどうかを示す文字列。

`Gamepad.pose` 読取専用
Experimental

WebVR コントローラーに関連するポーズ情報（3D 空間における位置や向きなど）を表す `GamepadPose` (en-US) オブジェクトです。

`Gamepad.timestamp` 読取専用

このゲームパッドのデータが最後に更新された時刻を表す `DOMHighResTimeStamp` です。

例
-

```js
window.addEventListener("gamepadconnected", (e) => {
  console.log(
    "Gamepad connected at index %d: %s. %d buttons, %d axes.",
    e.gamepad.index,
    e.gamepad.id,
    e.gamepad.buttons.length,
    e.gamepad.axes.length,
  );
});
```

仕様書
---

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

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

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

関連情報
----

* ゲームパッド API の利用
* ゲームパッド API


ページ可視性 API - Web API

ページ可視性 API
==========

ページ可視性 API (Page Visibility API) では、現在ページが見えているかどうかを調べる機能とともに、文書が表示されたり非表示になったりした時を監視することができるイベントを提供します。

これは特に、文書が表示されていない時に不必要なタスクの実行を抑止することで、リソースを節約したり実行効率を上げたりするために特に有用です。

概念と使用法
------

ユーザーがウィンドウを最小化したり他のタブに切り替えたりした時、 API は `visibilitychange` イベントを送信してリスナーにページの状態が変化したことを知らせます。イベントを検出していくつかの操作を実行したり、様々な動作をしたりすることができます。例えば、ウェブアプリで動画を再生している場合、ユーザーがタブをバックグラウンドにした場合に動画を一時停止させ、ユーザーがこのタブに戻ったときに再生を再開させたりすることができます。ユーザーは動画の位置に迷うことがなく、動画の音声が新しく前景になったタブの音声を邪魔せず、ユーザーがその間に動画を見落とすことがなくなります。

`<iframe>` の可視状態は、親文書と同じになります。 CSS プロパティにより (`display: none;` のように) `<iframe>` を隠しても可視性イベントは発生せず、またフレームに含まれる文書の状態も変わりません。

### 使用例

ページ可視性 API の使用例をいくつか考えてみましょう。

* 画像のスライドショーがあるサイトで、ユーザーが見ていない間に次のスライドに進むべきではないもの
* 情報をダッシュボードに表示するアプリケーションで、ページが見えていないときは更新情報をサーバーへ問い合わせてほしくないもの
* 正確なページビューをカウントできるよう、ページがプリレンダリングされている状態を検出したい。
* 端末がスタンバイモードである (ユーザーが電源ボタンを押して、画面を消灯している) ときに、音声を止めたいサイト。

以前、開発者はこれを検出するために不完全な代替手段を使用していました。例えばウィンドウで `blur` および `focus` イベントを監視することで、ページがアクティブではないときを知る助けになりますが、ページがユーザーから隠された状態であることは知らせてくれません。ページ可視性 API はこれを解決します。

**メモ:** `onblur` および `onfocus` はユーザーがウィンドウを切り替えたことを教えてくれますが、非表示にしたという意味になるとは限りません。ページが非表示になるのは、ユーザーがタブを切り替えたり、タブを含むブラウザーウィンドウを最小化したりした時だけです。

### バックグラウンドページのパフォーマンスを向上させるためのポリシー

ページ可視性 API とは別に、ユーザーエージェントは通常、バックグラウンドまたは隠されたタブのパフォーマンスへの影響を緩和するために、いくつかのポリシーを持っています。これには次のようなものがあります。

* ほとんどのブラウザーは、パフォーマンスとバッテリーライフを改善するために、バックグラウンドのタブや非表示の `<iframe>` への `requestAnimationFrame()` コールバックの送信を停止します。
* `setTimeout()` などのタイマーは、バックグラウンド/非アクティブなタブでは、パフォーマンスを向上させるために遅延されます。詳しくは、遅延が指定値より長い理由を参照してください。
* ブラウザーは、予算ベースのバックグラウンドタイムアウトの調整機能を実装しています。これは現代のブラウザー間で類似した方法で処理され、詳細は以下のとおりです。
    + Firefox では、バックグラウンドタブのウィンドウは、それぞれ自分自身でミリ秒単位の時間予算（最大値で +50ms、最小値で -150ms）を保有します。 Chrome は、予算が秒単位で指定されることを除けば、とてもよく似ています。
    + ウィンドウは、ウィンドウタイマーに指定されたのと同じ遅延調整ルールで、 30 秒後に調整されます（ここでも、遅延が指定値より長い理由を参照してください）。Chrome では、この値は 10 秒です。
    + タイマータスクは、予算が非負のときのみ許可されます。
    + タイマーのコードの実行が完了すると、その実行に要した時間がウィンドウのタイムアウト予算から差し引かれます。
    + 予算は、Firefox、Chrome ともに、 1 秒間に 10 ミリ秒の割合で再生成されます。

一部のプロセスは、この調整動作から除外されます。このような場合、ページ可視性 API を使用して、タブが非表示になっている間のパフォーマンスへの影響を軽減することができます。

* 音声を再生しているタブはフォアグラウンドとみなされ、調整されることはありません。
* リアルタイムのネットワーク接続（WebSocket や WebRTC）を使用しているコードを実行しているタブは、これらの接続がタイムアウトして予期せず取得されるのを避けるために、調整が解除されます。
* IndexedDB のプロセスもタイムアウトを避けるため、調整なしのままになります。
他のインターフェイスの拡張
-------------

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

ページ可視性 API は、以下のプロパティを `Document` インターフェイスに追加します。

`Document.hidden`
非推奨
 読取専用

ページがユーザーから隠された状態であると思われる場合に `true` を、そうでない場合に `false` を返します。

`Document.visibilityState` 読取専用

文字列で、文書の現在の可視状態を示します。取りうる値は以下の通りです。

`visible`

このページのコンテンツは、少なくとも部分的に可視状態です。実際は、最小化されていないウィンドウのフォアグラウンドのタブにページがあることを意味します。

`hidden`

このページのコンテンツはユーザーから見えていません。実際は、文書がバックグラウンドのタブか最小化されているウィンドウにある、あるいは OS のスクリーンがロックされていることを意味します。

### イベント

ページ可視性 API は、以下のイベントを `Document` インターフェイスに追加します。

`visibilitychange`

タブの内容が可視状態または非表示になった時に発行されます。

例
-

### ページが非表示になると音声を一時停止

この例では、ユーザーが異なる形に切り替えたときに音声を一時停止し、元に戻したときに再生します。

#### HTML

```html
<audio
 controls
 src="https://mdn.github.io/webaudio-examples/audio-basics/outfoxing.mp3"></audio>
```

#### JavaScript

```js
const audio = document.querySelector("audio");

// Handle page visibility change:
// - If the page is hidden, pause the video
// - If the page is shown, play the video
document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    audio.pause();
  } else {
    audio.play();
  }
});
```

#### 結果

音声を再生してから、異なる形のタブに切り替えて、もう一度再生してみてください。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-document-visibilitystate |

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

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


XRLightProbe - Web API

XRLightProbe
============

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

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

**`XRLightProbe`** は WebXR 機器 API のインターフェイスで、ユーザー環境のこの点の照明情報が入ります。 `XRLighting` オブジェクトは `XRSession.requestLightProbe()` (en-US) メソッドを使用して取得することができます。

このオブジェクト自体は照明値を保持しませんが、それぞれの `XRFrame` (en-US) の照明状態を収集するために使用します。 `XRLightProbe` の推定照明値については `XRLightEstimate` (en-US) を参照してください。

EventTarget

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

`XRLightProbe.onreflectionchange`

`reflectionchange` イベントのイベントハンドラープロパティです。

`XRLightProbe.probeSpace` 読取専用
Experimental

照明推定が相対的な位置と方向を追跡する `XRSpace` (en-US) です。

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

なし。

イベント
----

`reflectionchange`
Experimental

推定反射立方体マップが変更されるたびに発行されます。（これはユーザーが移動して環境の照明が変化したときに発生します。）

例
-

### セッションの `XRLightProbe` オブジェクトの取得

ライトプローブを取得するには、 `XRSession.requestLightProbe()` (en-US) メソッドを使用します。

```js
const lightProbe = await xrSession.requestLightProbe();
```

### `XRFrame` 内のプローブ位置姿勢の取得

ライトプローブの `probeSpace` を `XRFrame.getPose()` (en-US) に渡すと、ある位置姿勢のライトプローブを取得します。

```js
const probePose = xrFrame.getPose(lightProbe.probeSpace, xrReferenceSpace);
```

### `reflectionchange` イベントの使用

`XRLightProbe` を渡して、 `reflectionchange` イベントが発生するたびに推定反射立方体マップを取得します。`XRWebGLBinding.getReflectionCubeMap()` (en-US) も参照してください。

```js
const glBinding = new XRWebGLBinding(xrSession, gl);
const lightProbe = await xrSession.requestLightProbe();
let glCubeMap = glBinding.getReflectionCubeMap(lightProbe);

lightProbe.addEventListener("reflectionchange", () => {
  glCubeMap = glBinding.getReflectionCubeMap(lightProbe);
});
```

仕様書
---

| Specification |
| --- |
| WebXR Lighting Estimation API Level 1 # xrlightprobe-interface |

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

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

関連情報
----

* `XRSession.requestLightProbe()` (en-US)