ウェブ認証 API - Web API

ウェブ認証 API
=========

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

ウェブ認証 API は、公開鍵暗号を用いて強力な認証を可能にする資格情報管理 API の拡張機能で、パスワードレス認証や、 SMS テキストを用いない安全な二要素認証を実現します。

ウェブ認証の概念と使い方
------------

ウェブ認証 API (別名 WebAuthn) は、ウェブサイトで登録、認証、二要素認証を行うためにパスワードや SMS のテキストを使用するのではなく、公開鍵暗号を使用します。これにはいくつかの利点があります。

* **フィッシングからの保護:** 偽のログインサイトを作成した攻撃者は、サイトのオリジンで署名が変わるため、ユーザーとしてログインすることができません。
* **情報漏洩の影響を軽減:** 開発者は公開鍵をハッシュ化する必要がなく、攻撃者が認証に使用した公開鍵にアクセスしても、秘密鍵が必要なため認証ができません。
* **パスワード攻撃が無効：** ユーザーによってはパスワードを再利用する可能性があり、攻撃者は別のウェブサイト用にユーザーのパスワードを（例えばデータ漏洩を介して）取得する可能性があります。また、テキストのパスワードは、デジタル署名よりもはるかに容易に総当たりすることができます。

多くのウェブサイトが既にアカウントの登録や作成したアカウントにログインするウェブページを提供しています。ウェブ認証 API はそれらの既存のウェブページの代替または補足として機能します。 資格情報管理 API の他の形式と同様に、 ウェブ認証 API は登録とログインの 2 つの基本的な機能を持っています。

* `navigator.credentials.create()` - publicKey オプションと併用すると、新しいアカウントの登録または既存のアカウントへの新しい非対称鍵ペアの関連付けを行うために新しい認証情報を作成します。
* `navigator.credentials.get()` (en-US) - publicKey オプションと併用すると、サービスに対する認証のために、ログインまたは二要素認証として既存の認証情報セットを使用します。

**メモ:** `create()` と `get()` は両方とも安全なコンテキスト （すなわち、サーバーに https で接続している、サーバーがローカルホストの場合）であることを必要とし、ブラウザーが安全なコンテキストで動作していない場合は利用できません。

最も基本的な形式としては、`create()` と `get()` の両方が「チャレンジ」と呼ばれる非常に大きな乱数をサーバーから受け取り、秘密鍵によって署名されたチャレンジをサーバーに返します。これにより、ネットワーク上で秘密を明かすことなく、ユーザーが認証に必要な秘密鍵を持っていることをサーバー－に証明することができます。

create() と get() メソッドが全体像の中でどのように位置づけられるかを理解するためには、ブラウザーの外側にある 2 つのコンポーネントの間に位置づけられることを理解することが重要です。

1. **サーバー** - ウェブ認証 API は、サーバー（サービスまたは署名検証者 (署名検証者) とも呼ばれる）に新しい資格情報を登録し、後でその同じサーバーで同じ資格情報を使用してユーザーを認証することを意図しています。
2. **認証器 (Authenticator)** - 作成された認証情報は認証器と呼ばれる機器内に格納されます。これは認証における新しい概念です。パスワード認証ではパスワードはユーザーの頭の中に保管され、他の機器は必要ありません。ウェブ認証を用いた認証では、そのパスワードが認証器の中に保管された鍵ペアに置き換えられます。認証器は Windows Hello などのように OS に組み込むこともできますし、 USB や Bluetooth セキュリティキーなどの物理的なトークン機器とすることもできます。
### 登録

通常の登録過程は、図 1 に示す 6 つの手順を踏みます。この図は、概要を説明するために登録プロセスに必要なデータを簡略化しています。登録リクエストを作成するための必須フィールド、オプションフィールド、およびそれらの意味はすべて `PublicKeyCredentialCreationOptions` 辞書に記載されます。同様に、レスポンスフィールドはすべて `PublicKeyCredential` インターフェイスに記載されます（ただし `PublicKeyCredential.response` は `AuthenticatorAttestationResponse` インターフェイスに記載されます）。なお、アプリケーションを作っているほとんどの JavaScript プログラマーが本当に気をつけなければならないのは、 create() が呼び出され、返値が手に入る手順 1 と 5 のみです。しかしながら、ブラウザーと認証器の中で行われる処理やその結果のデータの意味を理解するためには手順 2、3、4 を理解することが不可欠です。

![ウェブ認証 API のコンポーネントの登録とデータフロー図](/ja/docs/Web/API/Web_Authentication_API/webauthn_registration_r4.png)

*図 1 - ウェブ認証による登録手順と各アクションに関連する重要なデータの流れを示す図*

まず（図中のステップ 0）、アプリケーションは最初の登録要求を行います。このリクエストのプロトコルとフォーマットは、ウェブ認証 API の範囲外です。

この後での登録手順は次の通りです。

1. **サーバーがチャレンジ・ユーザー情報・署名検証者情報を送信** - サーバーはチャレンジ・ユーザー情報・署名検証者情報を JavaScript プログラムに送信します。このときのプロトコルも特に指定はなく、ウェブ検証 API の範囲外です。通常、サーバーは HTTPS 通信を使って REST で接続します（恐らく XMLHttpRequest や Fetch を用いるでしょう）が、安全なプロトコルでありさえすれば SOAP や RFC 2549 、その他ほぼどのようなプロトコルを使用しても構いません。サーバーから受け取った引数は create() の呼び出しに渡され、通常ほとんどあるいは全く改変せずに Promise を返します。これは、 `AuthenticatorAttestationResponse` を含んだ `PublicKeyCredential` を解決するためのものです。 **なお、チャレンジは（16 バイト以上の）ランダムな情報のバッファーであることと、登録過程のセキュリティを確保するために必ずサーバー上で生成することが極めて重要です。**
2. **ブラウザーが認証器に対して authenticatorMakeCredential() を呼び出す** - 内部的に、ブラウザーは引数を検証し、既定値を整備し、それを `AuthenticatorResponse.clientDataJSON` (en-US) とします。最も重要な引数の一つは origin であり、これが clientData に保存されるため、後でサーバーが検証することができます。 create() の呼び出しの引数は clientDataJSON の SHA-256 ハッシュ値と共に認証器に渡されます（認証器への接続が低帯域幅の NFC または Bluetooth である可能性があり、認証器は単にハッシュに署名して改ざんされていないことを保証することが目的であるため、ハッシュのみを送信します）。
3. **認証器が新しい鍵ペアとアサーションを作成** - 何かをする前に、認証器は通常、何らかの形でユーザー認証を求めます。これは、 PIN の入力、指紋の使用、虹彩スキャンなどであり、ユーザーが存在し、登録に同意していることを証明します。ユーザー認証の後、認証器は新しい非対称鍵ペアを作成し、将来の参照用に秘密鍵を安全に保管します。公開鍵はアサーションの一部となり、認証器は製造工程で組み込まれた秘密鍵で署名し、信頼の根源まで遡って検証できる証明書チェーンを持っています。
4. **認証器がブラウザーにデータを返す** - 新しい公開鍵、グローバルに一意な認証 ID、およびその他の認証データがブラウザーに返され、そこで attestationObject となります。
5. **ブラウザーが最終的に送信するデータを作成し、アプリケーションがその返値をサーバーに送信** - create() のプロミスが `PublicKeyCredential` に解決します。 `PublicKeyCredential` は一意の認証 ID である `PublicKeyCredential.rawId` 持っており、 `AuthenticatorResponse.clientDataJSON` (en-US) を含む `AuthenticatorAttestationResponse` や `AuthenticatorAttestationResponse.attestationObject` (en-US) といったレスポンスと一緒にあります。この `PublicKeyCredential` は、何らかの望ましいフォーマットやプロトコルでサーバーに送信されます。（注意として、 ArrayBuffer プロパティは base64 か似たようなものでエンコードされている必要があります。）
6. **サーバーが登録を検証・完了させる** - 最終的に、サーバーが一連のチェックを行い、登録が完了して改ざんされていないことを保証することが要求されています。この保証には次の点を含みます。
    1. challenge が送信時と同じものであるかの確認
    2. origin が期待通りのオリジンとなっていることの保証
    3. clientDataHash の署名と特定モデルの認証器用の証明書チェーンを使った attestation の検証検証ステップの完全な一覧は ウェブ認証 API 仕様書の中にあります。 チェックが上手くいくと、サーバーはユーザーアカウントに紐づいたその新しい公開鍵を保存し、将来の利用に備えます。つまりは、ユーザーが認証のためにその公開鍵を使いたい時は何時でも使えるようにするということです。
認証
--

ユーザーは、ウェブ認証で登録した後、サービスに対して認証（ログインまたはサインイン）を行うことができます。認証フローは登録フローと似ており、図 2 のアクションの図は、図 1 の登録アクションの図と似ていると思われるかもしれません。登録と認証の主な違いは、次の通りです。1) 認証は、ユーザーまたは署名検証者情報を必要としない。 2) 認証は、製造時に認証器に組み込まれたキーペアを使用して認証を作成するのではなく、サービス用に事前に生成されたキーペアを使用してアサーションを作成する。繰り返しますが、以下の認証に関する説明は、ウェブ認証 API のすべてのオプションや機能に踏み込むのではなく、大まかな概要を説明するものです。認証のための具体的なオプションは `PublicKeyCredentialRequestOptions` 辞書で、結果のデータは `PublicKeyCredential` インターフェイス (`PublicKeyCredential.response` は `AuthenticatorAssertionResponse` インターフェイス) で見ることができます。

![WebAuthn 認証コンポーネントとデータフロー図](/ja/docs/Web/API/Web_Authentication_API/mdn_webauthn_authentication_r1.png)

*図 2 - 図 1 と同様、ウェブ認証による認証手順と各アクションに関連する重要なデータの流れを示している。*

まず（図中のステップ 0）、アプリケーションは最初の登録リクエストを行います。このリクエストのプロトコルとフォーマットは、ウェブ認証 API の範囲外です。

この後、登録のステップになります。

1. **サーバーからのチャレンジ送信** - サーバーが JavaScript プログラムに対してチャレンジを送ります。サーバーとのコミュニケーションに用いられるプロトコルに指定はなく、ウェブ認証 API の規定の対象範囲外です。通常、サーバーは HTTPS 通信を使って REST で接続します（恐らく XMLHttpRequest や Fetch) を用いるでしょう）が、安全なプロトコルでありさえすれば SOAP や RFC 2549、その他ほぼどのようなプロトコルを使用しても構いません。サーバーから受信した引数はほとんどの場合少しもしくは全く改変されずに get() (en-US) の呼び出しに渡されます。**なお、チャレンジは、ランダムな情報のバッファ（少なくとも 16 バイト）であることが絶対に必要であり、認証プロセスのセキュリティを確保するために、サーバー上で生成されなければなりません。**
2. **ブラウザーによる認証器の authenticatorGetCredential() の呼び出し** - 内部的にブラウザーは引数を検証し、既定値を埋めて `AuthenticatorResponse.clientDataJSON` (en-US)を作成します。最も重要な引数の一つが origin であり、これはclientDataの一部として記録され、後ほどサーバーによって検証されます。 get() 呼び出し時の引数は、 clientDataJSON の SHA-256 ハッシュと一緒に認証器に渡されます（認証器への接続が低帯域幅の NFC または Bluetooth である可能性があり、認証器は単にハッシュに署名して改ざんされていないことを保証することが目的のため、ハッシュのみを送信します）
3. **認証器によるアサーションの生成** - 認証器がこのサービスの認証情報が署名検証者 ID と一致することを確認し、ユーザーに認証の同意を促します。この二つのステップが成功した場合、認証器は登録時に生成された秘密鍵を用いて clientDataHash と authenticatorData に署名を行うことで新しいアサーションを生成します。
4. **認証器がブラウザーにデータを返す** - 認証器が authenticatorData とアサーションの署名をブラウザーに返します。
5. **ブラウザーが最終的なデータを生成し、アプリケーションがサーバーにレスポンスを送信する** - ブラウザーが `AuthenticatorAssertionResponse` を含む `PublicKeyCredential.response` と一緒に Promise を `PublicKeyCredential` に解決しようとします。サーバーに対してどのようなプロトコル、フォーマットでこのデータを戻すのかについては JavaScript アプリケーションに委ねられています。
6. **サーバーによる検証と認証の完了** - 認証要求の結果を受け取り次第、サーバーはレスポンスの検証を行います。この検証は以下のようなものです。
    1. 登録リクエスト時に保存された公開鍵を用いて、認証器による署名を検証する。
    2. 認証器が署名したチャレンジが、サーバーが生成したチャレンジと一致することを確認すること。
    3. 署名検証者 IDがこのサービスに期待されるものであることを確認する。

これらはウェブ認証 API の仕様で規定されているアサーションの検証手順のすべてです。検証が成功した場合、ユーザーは認証済であると記録します。ウェブ認証による規定の対象範囲外ですが、ひとつの選択肢として新しい Cookie をユーザーのセッションに対して発行することが考えられます。

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

`Credential`
Experimental

信頼を決定づける前提条件としてのエンティティに関する情報を提供します。

`CredentialsContainer` (en-US)

ログイン・ログアウトが発生したようなイベントの際、資格情報の要求やユーザーエージェント通知のためのメソッドをエクスポートします。このインターフェイスは `Navigator.credentials` からアクセス可能です。ウェブ認証の仕様では、 `publicKey` メンバーを`create()` と `get()` (en-US) メソッドに追加し、それらのメソッドではそれぞれ、新たな鍵ペアの生成、鍵ペアについての認証取得を行います。

`PublicKeyCredential`

公開鍵 / 秘密鍵ペアについての情報を提供し、それはサービスへのログインのための資格情報であり、パスワードの代わりに、フィッシング耐性かつデータ漏洩体制のある非対称鍵ペアを用いています。

`AuthenticatorResponse`

`AuthenticatorAttestationResponse` と `AuthenticatorAssertionResponse`に関するベースのインターフェイスであり、鍵ペアについての信頼の暗号的根幹を提供します。`CredentialsContainer.create()` と `CredentialsContainer.get()` (en-US)によって返され、それぞれ、その子インターフェイスはチャレンジ、オリジンのようなブラウザーからの情報を含んでいます。`PublicKeyCredential.response`から返されるでしょう。

`AuthenticatorAttestationResponse`

`PublicKeyCredential` が渡された時 `CredentialsContainer.create()` によって返され、生成された新たな鍵ペアの信頼の暗号的根幹を提供します。

`AuthenticatorAssertionResponse`

`PublicKeyCredential` が渡された時 `CredentialsContainer.get()` (en-US) によって返され、鍵ペアを所持しており認証要求が有効かつ承認済みであるという証拠をサービスへ提供します。

オプション
-----

`PublicKeyCredentialCreationOptions`

`CredentialsContainer.create()` へ渡すオプションです。

`PublicKeyCredentialRequestOptions`

`CredentialsContainer.get()` (en-US) へ渡すオプションです。

例
-

### デモサイト

* Mozilla Demo ウェブサイトとそのソースコード。
* Google Demo ウェブサイトとそのソースコード。
* https://webauthn.io/ Demo ウェブサイトとそのソースコード。
* github.com/webauthn-open-source とそのクライアントソースコードとサーバーソースコード
* OWASP Single Sign-On
### 使用法の例

**警告:** セキュリティの観点から、ウェブ認証の呼び出し（`create()` や `get()` (en-US)）が保留されている間にブラウザーウィンドウのフォーカスが失われると、呼び出しはキャンセルされます。

```js
// 登録のサンプル引数
var createCredentialDefaultArgs = {
  publicKey: {
    // 署名検証者 (a.k.a. - Service):
    rp: {
      name: "Acme",
    },

    // User:
    user: {
      id: new Uint8Array(16),
      name: "john.p.smith@example.com",
      displayName: "John P. Smith",
    },

    pubKeyCredParams: [
      {
        type: "public-key",
        alg: -7,
      },
    ],

    attestation: "direct",

    timeout: 60000,

    challenge: new Uint8Array([
      // サーバーから暗号学的にランダムな値が送られていなければならない
      0x8c, 0x0a, 0x26, 0xff, 0x22, 0x91, 0xc1, 0xe9, 0xb9, 0x4e, 0x2e, 0x17, 0x1a,
      0x98, 0x6a, 0x73, 0x71, 0x9d, 0x43, 0x48, 0xd5, 0xa7, 0x6a, 0x15, 0x7e, 0x38,
      0x94, 0x52, 0x77, 0x97, 0x0f, 0xef,
    ]).buffer,
  },
};

// ログインのサンプル引数
var getCredentialDefaultArgs = {
  publicKey: {
    timeout: 60000,
    // allowCredentials: [newCredential] // 下記参照
    challenge: new Uint8Array([
      // サーバーから暗号学的にランダムな値が送られていなければならない
      0x79, 0x50, 0x68, 0x71, 0xda, 0xee, 0xee, 0xb9, 0x94, 0xc3, 0xc2, 0x15, 0x67,
      0x65, 0x26, 0x22, 0xe3, 0xf3, 0xab, 0x3b, 0x78, 0x2e, 0xd5, 0x6f, 0x81, 0x26,
      0xe2, 0xa6, 0x01, 0x7d, 0x74, 0x50,
    ]).buffer,
  },
};

// 新しい認証情報の作成/登録
navigator.credentials
  .create(createCredentialDefaultArgs)
  .then((cred) => {
    console.log("NEW CREDENTIAL", cred);

    // 通常はサーバーから利用可能なアカウントの認証情報が送られてきますが
    // この例では上からコピーしただけです。
    var idList = [
      {
        id: cred.rawId,
        transports: ["usb", "nfc", "ble"],
        type: "public-key",
      },
    ];
    getCredentialDefaultArgs.publicKey.allowCredentials = idList;
    return navigator.credentials.get(getCredentialDefaultArgs);
  })
  .then((assertion) => {
    console.log("ASSERTION", assertion);
  })
  .catch((err) => {
    console.log("ERROR", err);
  });
```

仕様書
---

| 仕様書 |
| --- |
| Web Authentication: An API for accessing Public Key Credentials |

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

### Credential

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

### CredentialsContainer

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

### PublicKeyCredential

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

### AuthenticatorResponse

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

### AuthenticatorAttestationResponse

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

### AuthenticatorAssertionResponse

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

### PublicKeyCredentialCreationOptions

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

### PublicKeyCredentialRequestOptions

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


DOMPoint - Web API

DOMPoint
========

**`DOMPoint`** オブジェクトは、座標系における二次元または三次元の点を表します。最大三次元までの座標の値、およびオプションで視点の値も含まれます。 `DOMPoint` は `DOMPointReadOnly` に基づいていますが、そのプロパティの値を変更することができます。

一般的には、正の `x` 成分は原点よりも右側の位置を表し、正の `y` 成分は原点よりも下側の位置を表し、正の `z` 成分は画面の外側（言い換えれば、ユーザーの方向）に向かって広がっています。

DOMPointReadOnly

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

`DOMPoint()`

0 個以上の座標成分の値、およびオプションとして `w` の視点位置を与えられた新しい `DOMPoint` オブジェクトを作成し、それを返します。また、既存の `DOMPoint` や `DOMPointReadOnly` 、あるいはオブジェクトを使用して、 `DOMPoint.fromPoint()` 静的メソッドを呼び出し、新しい点を作成することができます。

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

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

`DOMPoint.x`

この `DOMPoint` の水平座標である `x` です。

`DOMPoint.y`

この `DOMPoint` の垂直座標である `y` です。

`DOMPoint.z`

この `DOMPoint` の奥行き座標である `z` です。

`DOMPoint.w`

この `DOMPoint` の視点位置である `w` です。

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

*`DOMPoint` には親である `DOMPointReadOnly` から継承したインスタンスメソッドがあります。*

静的メソッド
------

*`DOMPoint` には親である `DOMPointReadOnly` から継承した静的メソッドがあります。*

`DOMPoint.fromPoint()`

既存の点（または、一致するプロパティを含むオブジェクト）を指定して、そのプロパティの値を提供する、新しい変更可能な `DOMPoint` オブジェクトを作成します。

例
-

WebXR 機器 API では、位置や向きを表すために `DOMPointReadOnly` 値が使用されます。以下のスニペットでは、 XR 機器（VR ヘッドセットや AR 機能付き携帯電話など）のポーズは `XRSession` (en-US) アニメーションフレームの中で `XRFrame.getViewerPose()` (en-US) を呼び出すことで取得することができ、それから結果の `XRPose` (en-US) の `transform` (en-US) プロパティにアクセスしています。これには 2 つの `DOMPointReadOnly` 属性があります。ベクトルを表す `position` と、クォータニオンを表す `orientation` です。

```js
function onXRFrame(time, xrFrame) {
  let viewerPose = xrFrame.getViewerPose(xrReferenceSpace);

  if (viewerPose) {
    let position = viewerPose.transform.position;
    let orientation = viewerPose.transform.orientation;

    console.log(
      `XR Viewer Position: {x: ${roundToTwo(position.x)}, y: ${roundToTwo(
 position.y,
 )}, z: ${roundToTwo(position.z)}`,
    );

    console.log(
      `XR Viewer Orientation: {x: ${roundToTwo(orientation.x)}, y: ${roundToTwo(
 orientation.y,
 )}, z: ${roundToTwo(orientation.z)}, w: ${roundToTwo(orientation.w)}`,
    );
  }
}
```

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # DOMPoint |

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

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

関連情報
----

* `DOMRect`
* `DOMMatrix`


WebGL: ウェブの 2D および 3D グラフィック - Web API

WebGL: ウェブの 2D および 3D グラフィック
============================

**WebGL** (Web Graphics Library) は、互換性があるウェブブラウザーにおいて、プラグインを使用せずにインタラクティブな 3D や 2D のグラフィックをレンダリングするための JavaScript API です。HTML の `<canvas>` 要素へ OpenGL ES 2.0 に密接に従った API を導入することにより、WebGL を実現します。これにより、ユーザーの端末が提供するハードウェアのグラフィックアクセラレーションを API で利用することが可能になります。

WebGL への対応は、現代のすべてのブラウザーにあります（後述の互換性一覧表を参照してください）。ただし、ユーザーの端末にこれらの機能に対応したハードウェアが搭載されている必要があります。

WebGL 2 API は OpenGL ES 3.0 の機能セットの大部分に対応しています。このインターフェイスは `WebGL2RenderingContext` (en-US) インターフェイスを通して提供されています。

ウェブページ上の 2D グラフィックを実現するには、 `<canvas>` 要素で Canvas API を使用する方法もあります。

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

### 標準インターフェイス

* `WebGLRenderingContext`
* `WebGL2RenderingContext` (en-US)
* `WebGLActiveInfo` (en-US)
* `WebGLBuffer`
* `WebGLContextEvent` (en-US)
* `WebGLFramebuffer`
* `WebGLProgram`
* `WebGLQuery` (en-US)
* `WebGLRenderbuffer`
* `WebGLSampler` (en-US)
* `WebGLShader`
* `WebGLShaderPrecisionFormat` (en-US)
* `WebGLSync` (en-US)
* `WebGLTexture` (en-US)
* `WebGLTransformFeedback` (en-US)
* `WebGLUniformLocation` (en-US)
* `WebGLVertexArrayObject` (en-US)
### 拡張機能

* `ANGLE_instanced_arrays`
* `EXT_blend_minmax` (en-US)
* `EXT_color_buffer_float` (en-US)
* `EXT_color_buffer_half_float` (en-US)
* `EXT_disjoint_timer_query` (en-US)
* `EXT_float_blend` (en-US)
Experimental
* `EXT_frag_depth` (en-US)
* `EXT_shader_texture_lod` (en-US)
* `EXT_sRGB` (en-US)
* `EXT_texture_compression_bptc` (en-US)
* `EXT_texture_compression_rgtc` (en-US)
* `EXT_texture_filter_anisotropic` (en-US)
* `EXT_texture_norm16` (en-US)
* `KHR_parallel_shader_compile` (en-US)
* `OES_draw_buffers_indexed` (en-US)
* `OES_element_index_uint` (en-US)
* `OES_fbo_render_mipmap` (en-US)
* `OES_standard_derivatives` (en-US)
* `OES_texture_float` (en-US)
* `OES_texture_float_linear` (en-US)
* `OES_texture_half_float` (en-US)
* `OES_texture_half_float_linear` (en-US)
* `OES_vertex_array_object` (en-US)
* `OVR_multiview2` (en-US)
* `WEBGL_color_buffer_float`
* `WEBGL_compressed_texture_astc` (en-US)
* `WEBGL_compressed_texture_etc` (en-US)
* `WEBGL_compressed_texture_etc1` (en-US)
* `WEBGL_compressed_texture_pvrtc` (en-US)
* `WEBGL_compressed_texture_s3tc` (en-US)
* `WEBGL_compressed_texture_s3tc_srgb` (en-US)
* `WEBGL_debug_renderer_info` (en-US)
* `WEBGL_debug_shaders` (en-US)
* `WEBGL_depth_texture` (en-US)
* `WEBGL_draw_buffers` (en-US)
* `WEBGL_lose_context` (en-US)
* `WEBGL_multi_draw` (en-US)
### イベント

* `webglcontextlost`
* `webglcontextrestored`
* `webglcontextcreationerror`
### 定数と型

* WebGL の定数
* WebGL の型
### WebGL 2

WebGL 2 は `WebGL2RenderingContext` (en-US) インターフェイスによって提供される、WebGL の大規模なアップデートです。これは OpenGL ES 3.0 に基づいており、以下の新機能を含みます。

* 3D テクスチャ (en-US)、
* Sampler オブジェクト (en-US)、
* Uniform Buffer オブジェクト (en-US)、
* Sync オブジェクト (en-US)、
* Query オブジェクト (en-US)、
* Transform Feedback オブジェクト (en-US)、
* WebGL 2 のコア機能に昇格した拡張: Vertex Array オブジェクト (en-US)、インスタンス化 (en-US)、複数のレンダリングターゲット (en-US)、fragment depth (en-US)。

"WebGL 2 lands in Firefox" のブログ記事や、webglsamples.org/WebGL2Samples のデモもご覧ください。

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

下記に、WebGL の概念を学習するのに役立つガイド一式とステップ毎のレッスンや例のあるチュートリアルがあります。

### ガイド

WebGL でのデータ

変数、バッファ、その他の WebGL コードを書く時に使うデータタイプのガイド

WebGL のベストプラクティス

WebGL のコンテンツの品質、パフォーマンス、信頼性を改善するためのヒントと提案です

拡張機能

WebGL で利用可能な拡張機能の使用方法です

### チュートリアル

WebGL チュートリアル

WebGL のコアコンセプトに関する、ビギナー向けのガイドです。WebGL の経験がない場合におすすめするガイドです

### 例

基本的な 2D WebGL アニメーションの例

この例では、単一色の形状のシンプルなアニメーションをデモします。検査するトピックはアスペクト比の違いや、複数のシェーダーの集合からシェーダープログラムを生成する機能や、WebGL での描画の基本を扱います

WebGL by example

WebGL のコンセプトと機能を紹介する短い解説付きのライブサンプルのシリーズです。サンプルはトピックと難易度に応じて分類されており、WebGL レンダリングコンテキスト、シェーダプログラミング、テクスチャ、ジオメトリ、ユーザー操作などをカバーしています。

### 高度なチュートリアル

WebGL のモデル、ビュー、投影

3D オブジェクトビューを表現するためによく使用する 3 つの主要な行列 (モデル行列、ビュー行列、プロジェクション行列) について、詳しく説明します

Matrix math for the web

3D 変換行列がどのように働くか、およびウェブ (WebGL の演算や、CSS 座標変換) でどのように使用できるかのガイドです

リソース
----

* Khronos WebGL サイト: Khronos Group の WebGL についてのメインサイト
* WebGL Fundamentals: WebGL の基礎と、基本的なチュートリアルがあります。
* Raw WebGL: An introduction to WebGL Nick Desaulniers による、 WebGL の基本的な部分を紹介する講演です。
* WebGL playground: WebGL プロジェクトの作成と共有ができるオンラインツール。迅速なプロトタイピングや実験に最適です。
* WebGL Academy: WebGL プログラミングの基礎を学ぶチュートリアルがある、 HTML/JavaScript エディターです。
* WebGL Stats: さまざまなプラットフォームのブラウザーについて、WebGL の機能性の状況を示すサイトです。
### ライブラリー

* three.js はオープンソースでフル機能の 3D WebGL ライブラリーです。
* Babylon.js は、パワフルで単純、かつオープンなゲームおよび 3D レンダリングエンジンで、分かりやすい JavaScript フレームワークにまとめられています。
* Pixi.js は、高速でオープンソースの 2D WebGL レンダラーです。
* Phaser は、キャンバスや WebGL を使ったブラウザーゲームのための、高速で、無料で、楽しいオープンソースのフレームワークです。
* PlayCanvas は、オープンソースのゲームエンジンです。
* glMatrix は、高性能な WebGL アプリケーションのための JavaScript の行列およびベクトルライブラリーです。
* twgl は、webgl の冗長性を減らすためのライブラリーです。
* RedGL は、オープンソースの 3D WebGL ライブラリです。
* vtk.js は、ブラウザー上で科学的な可視化を行うための JavaScript ライブラリーです。
* webgl-lint は、 WebGLコードのエラーを探し、有益な情報を提供するのに役立ちます。
仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.14 |
| WebGL 2.0 Specification # 3.7 |

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

### api.WebGLRenderingContext

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

### api.WebGL2RenderingContext

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

### 互換性に関する注記

ブラウザだけでなく、GPU も機能をサポートしていなければなりません。よって、例えば S3 Texture Compression (S3TC) は Tegra ベースのタブレットでしか使用できません。ほとんどのブラウザーでは WebGL コンテキストを、コンテキスト名 `webgl` で作成しますが、古いブラウザーでは `experimental-webgl` も必要です。さらに将来の WebGL 2 (en-US) では完全な下位互換性があり、コンテキスト名 `webgl2` を持ちます。

### Gecko に関するメモ

#### WebGL のデバッグおよびテスト

Firefox では、テストなどの目的で WebGL の機能を制限する 2 つの設定項目があります。

`webgl.min_capability_mode`

この論理属性に `true` を指定すると、最小互換性モードが有効となります。このモードでは、必要最低限の機能セットと WebGL の仕様で指定された機能のみが使用可能です。このモードで動作確認を行うことにより、より多くの閲覧環境での動作を保証することができます。初期値は `false` です。

`webgl.disable_extensions`

この論理属性に `true` を指定すると、すべての WebGL 拡張が無効になります。初期値は `false` です。

関連情報
----

* キャンバス
* WebGL 拡張の互換性情報 (en-US)


AudioNode - Web API

AudioNode
=========

**`AudioNode`** インスタンスは、音声処理モジュールを表す一般的なインターフェイスです。

たとえば以下のものを表します。

* 音源 (HTML の `<audio>` 要素や `<video>` 要素、`OscillatorNode` など)
* 音声の出力先
* 中間処理モジュール (たとえば、`BiquadFilterNode` (en-US) や `ConvolverNode` などのフィルター)
* ボリューム制御 (`GainNode` など)

EventTarget

AudioNode

**メモ:** `AudioNode` はイベントのターゲットになることがあり、そのため `EventTarget` インターフェイスを実装しています。

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

`AudioNode.context` 読取専用

対応する `BaseAudioContext` を返します。これはこのノードが参加している処理グラフを表すオブジェクトです。

`AudioNode.numberOfInputs` 読取専用

このノードに供給される入力の数を返します。音源ノードは `numberOfInputs` プロパティの値が `0` であるノードという定義です。

`AudioNode.numberOfOutputs` 読取専用

このノードからの出力の数を返します。`AudioDestinationNode` などの出力先ノードは、この属性の値が `0` です。

`AudioNode.channelCount`

このノードへの入力についてアップミキシングとダウンミキシングを行う際、何個のチャンネルを用いるかを決定するとき用いる整数です。どのように用いられるか、および正確な定義は、`AudioNode.channelCountMode` の値によります。

`AudioNode.channelCountMode`

このノードの入力と出力の間でチャンネルを対応付ける方法を表す列挙値です。

`AudioNode.channelInterpretation`

 チャンネルの意味を表す列挙値です。この意味は、音声のアップミキシングとダウンミキシングをどのように行うかを決定します。
 取りうる値は `"speakers"` および `"discrete"` です。

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

*インターフェイス* `EventTarget` *由来のメソッドも実装しています。*

`AudioNode.connect()`

このノードの出力を、音声データもしくは `AudioParam` の値として、別のノードの入力に接続します。

`AudioNode.disconnect()`

このノードを接続済みの別のノードから切断します。

説明
--

### 音声ルーティンググラフ

![AudioContext に参加している AudioNodes が音声ルーティンググラフを作成します。](/ja/docs/Web/API/AudioNode/webaudiobasics.png)

それぞれの `AudioNode` に入力と出力があり、複数の音声ノードを接続することにより *処理グラフ* が組み立てられます。このグラフは `AudioContext` 内にあり、それぞれの音声ノードは 1 個の音声コンテキストにのみ所属できます。

*音源ノード* は入力を持たず、1 個もしくは複数の出力を持ち、音声を生成できます。一方、*出力先ノード* は出力を持たず、かわりに、入力はすべてスピーカー (もしくは音声コンテキストが用いる何らかの音声出力デバイス) で直接再生されます。さらに、入力と出力を持つ *処理ノード* があります。正確な処理内容はそれぞれの `AudioNode` によって違いますが、一般に、ノードは入力を読み取り、音声関係の何らかの処理を行い、出力となる新しい値を生成します。もしくは、(たとえば、処理結果には別でアクセスする `AnalyserNode` で行われるように) 音声をそのまま通過させます。

グラフ内のノードが多くなるほど、遅延も大きくなります。たとえば、グラフの遅延が 500ms の場合、音源ノードが音声を再生すると、その音声がスピーカーで聞こえるまでには 0.5 秒かかります。(もしくは、下層の音声デバイス内での遅延により、さらに長くなるかもしれません) そのため、対話型の音声を用意したい場合は、グラフをできるだけ小さくし、ユーザーが操作する音声ノードはグラフの最後に配置するべきです。たとえば、ボリューム制御 (`GainNode`) は、ボリュームの変更がすぐに反映されるよう、最後のノードにするべきです。

それぞれの入力および出力には、決められた数の *チャンネル* があります。たとえば、モノラルの音声にはチャンネルが 1 個あり、ステレオの音声にはチャンネルが 2 個あります。ウェブオーディオ API は、必要に応じてチャンネルの数をアップミキシングやダウンミキシングします。詳細は、ウェブオーディオの仕様を確認してください。

全音声ノードの一覧は、ウェブオーディオ API のホームページを参照してください。

### `AudioNode` の生成

`AudioNode` を生成するには、2 種類の方法があります。*コンストラクター* による方法と、*ファクトリーメソッド* による方法です。

```js
// コンストラクター
const analyserNode = new AnalyserNode(audioCtx, {
  fftSize: 2048,
  maxDecibels: -25,
  minDecibels: -60,
  smoothingTimeConstant: 0.5,
});
```

```js
// ファクトリーメソッド
const analyserNode = audioCtx.createAnalyser();
analyserNode.fftSize = 2048;
analyserNode.maxDecibels = -25;
analyserNode.minDecibels = -60;
analyserNode.smoothingTimeConstant = 0.5;
```

コンストラクターを使うのも、ファクトリーメソッドを使うのも、両方を混ぜて使うのも自由です。ただし、コンストラクターを使うと以下の利点があります。

* すべてのパラメーターを生成時に設定でき、個別に設定する必要がありません。
* 音声ノードのサブクラスを作成することができます。実際の処理はブラウザーの内部で行われ、変更できませんが、音声ノードのラッパーを書くことで独自のプロパティやメソッドを提供できます。
* パフォーマンスが若干良いです。Chrome においても Firefox においても、ファクトリーメソッドは内部でコンストラクターを呼びます。

*歴史の概要*: ウェブオーディオの仕様の最初のバージョンでは、ファクトリーメソッドのみを定義していました。2013 年 10 月のデザインレビューの後、ファクトリーメソッドに比べて多くの利点があるため、コンストラクターを追加することになりました。コンストラクターは、2016 年 8 月〜 10 月に仕様に加えられました。ファクトリーメソッドは引き続き仕様に含まれ、非推奨にはなっていません。

例
-

このシンプルなコード断片は、音声ノードをいくつか生成し、`AudioNode` のプロパティやメソッドの使い方を示しています。このような使用法の例は、ウェブオーディオ API のランディングページからリンクされている例 (たとえば Violent Theremin) のどれでも見ることができます。

```js
const audioCtx = new AudioContext();

const oscillator = new OscillatorNode(audioCtx);
const gainNode = new GainNode(audioCtx);

oscillator.connect(gainNode).connect(audioCtx.destination);

oscillator.context;
oscillator.numberOfInputs;
oscillator.numberOfOutputs;
oscillator.channelCount;
```

仕様書
---

| Specification |
| --- |
| Web Audio API # AudioNode |

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

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

関連情報
----

* Web Audio API の使用


WebGPU API - Web API

WebGPU API
==========

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

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

**WebGPU API** は、ウェブ開発者が下層のシステムの GPU (Graphics Processing Unit) を使用し、高効率の計算をしたり、ブラウザーでレンダーできる複雑な画像を描画したりすることを可能にします。

WebGPU は WebGL の後継で、最近の GPU とのより良い互換性を提供し、汎用 GPU 計算に対応し、操作を速くし、さらに高度な GPU の機能へのアクセスを可能にします。

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

2011 年頃に最初に登場した後、WebGL がグラフィックの能力の面でウェブに革命を起こしたといえます。WebGL は OpenGL ES 2.0 グラフィックライブラリーの JavaScript への移植であり、ウェブページがレンダリング計算をデバイスの GPU に直接渡し、超高速で処理させ、結果を `<canvas>` 要素内に描画することを可能にします。

WebGL と WebGL シェーダーのコードを書くのに用いられる GLSL 言語は複雑なので、WebGL アプリケーションをより簡単に書けるようにするためにいくつかの WebGL ライブラリーが作られました。有名な例としては Three.js、Babylon.js、PlayCanvas などがあります。開発者はこれらのツールを用い、没入感のあるウェブベースの 3D ゲーム、ミュージックビデオ、訓練やモデリングのツール、VR や AR の体験、などを作ってきました。

しかし、WebGL には修正が必要な根本的な問題点がいくつかあります。

* WebGL がリリースされて以降、新世代のネイティブ GPU API が登場しました。最も人気があるのは Microsoft の Direct3D 12、Apple の Metal、The Khronos Group の Vulkan です。これらは多くの新機能を提供します。OpenGL のアップデートはもう計画されておらず、WebGL も同様なので、これらの新機能は何も導入されません。一方、WebGPU は進歩し、新機能が追加されるでしょう。
* WebGL は完全にグラフィックを描画し、それをキャンバスに描画するというユースケースに基づいており、汎用 GPPU (GPGPU) 計算をあまり上手く扱うことができません。GPGPU 計算は機械学習モデルをベースにするものなど、多くの異なるユースケースでどんどん重要になってきています。
* 3D グラフィックアプリケーションは、同時にレンダリングするオブジェクトの数と新しいレンダリング機能の活用の両面で、負荷が高くなってきています。

WebGPU は、最近の GPU API と互換性があり、より「webby」な感じがする新しい汎用アーキテクチャを提供し、これらの問題点を解決します。グラフィックのレンダリングに対応しているとともに、GPGPU 計算にもよく対応しています。CPU 側での個別のオブジェクトの描画は劇的に軽くなり、計算ベースのパーティクルや、色効果、鮮明化、被写界深度シミュレーションなどの後処理フィルターなどの最近の GPU のレンダリング機能にも対応します。さらに、カリングやスキン付きモデルの変換などの重い計算を直接 GPU で扱うことができます。

一般モデル
-----

デバイスの GPU と WebGPU API を実行しているウェブブラウザーの間には、いくつかの抽象化レイヤーがあります。WebGPU の学習を開始する際、これらを理解することは有用です。

![デバイス上の WebGPU アーキテクチャの異なる要素の位置を示す基本の積層図](/ja/docs/Web/API/WebGPU_API/basic-webgpu-stack.png)

* GPU がある物理デバイス。ほとんどのデバイスには GPU が 1 個だけありますが、複数あるデバイスもあります。以下の異なる GPU の種類が利用可能です。
    + 統合 GPU: CPU と同じ基板にあり、メモリーを共有します。
    + 個別 GPU: 独自の基板にあり、CPU からは分離されています。
    + ソフトウェア「GPU」: CPU 上で実装されています。
**メモ:** 上記の図では、GPU が 1 個だけあるデバイスを仮定しています。
* OS の一部であるネイティブ GPU API (たとえば macOS 上の Metal) は、ネイティブアプリケーションが GPU の機能を用いることができるプログラミングインターフェイスです。API 命令がドライバーを通じて GPU に送られ、結果を受け取ります。上記の図ではネイティブ API およびドライバーが 1 個だけあるデバイスを仮定していますが、システムが GPU とやり取りするための複数のネイティブ OS API やドライバーを持つことも可能です。
* ブラウザーの WebGPU 実装は、ネイティブ GPU API ドライバーを通じた GPU とのやり取りを扱います。WebGPU のアダプターが、あなたのコード上で下層のシステムで利用可能な物理 GPU とドライバーを効率よく表します。
* 論理デバイスは、単一のウェブアプリケーションが分離された方法で GPU の機能にアクセスできるようにする抽象化です。論理デバイスは、多重化の機能を提供する必要があります。物理デバイスの GPU は多くのアプリケーションで用いられ、並行で処理を行います。この中には多くのウェブアプリケーションが含まれる可能性があります。それぞれのウェブアプリケーションは、セキュリティおよびロジック上の理由で、隔離された状態で WebGPU にアクセスできる必要があります。
デバイスへのアクセス
----------

論理デバイスは、`GPUDevice` (en-US) オブジェクトインスタンスで表され、ウェブアプリケーションが WebGPU のすべての機能にアクセスする基礎となります。デバイスへのアクセスは、以下の手順で行われます。

1. `Navigator.gpu` プロパティ (もしくは、ワーカーから WebGPU の機能を用いる場合は `WorkerNavigator.gpu`) が現在のコンテキスト用の `GPU` オブジェクトを返します。
2. `GPU.requestAdapter()` メソッドを通じてアダプターにアクセスします。このメソッドは省略可能な設定オブジェクトを受け取り、たとえば高パフォーマンスのアダプターや低消費電力のアダプターを要求することができます。これが無い場合は、デバイスはデフォルトのアダプターへのアクセスを提供し、これはほとんどの目的に十分適するでしょう。
3. `GPUAdapter.requestDevice()` によりデバイスを要求できます。このメソッドは、(ディスクリプターと呼ばれる) オプションオブジェクトも受け取り、これにより論理デバイスに期待する詳細な機能や制限を指定できます。これが無い場合は、返されるデバイスは合理的な汎用のスペックを持ち、これはほとんどの用途に適します。

これらにいくつかの機能検出チェックを加えると、上記の手順は以下のようにして実現できます。

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

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error("WebGPU アダプターの要求に失敗しました。");
  }

  const device = await adapter.requestDevice();

  //...
}
```

パイプラインとシェーダー: WebGPU アプリケーションの構造
--------------------------------

パイプラインは、プログラムの処理を実現するために実行するプログラマブルなステージが入る論理的な構造です。現在、WebGPU では以下の 2 種類のパイプラインを扱うことができます。

* レンダーパイプラインはグラフィックをレンダリングします。`<canvas>` 要素に描画することが多いですが、オフスクリーンでグラフィックをレンダリングすることもできます。これには以下の 2 個のメインステージがあります。
    + バーテックスステージ: バーテックスシェーダーが GPU に渡された位置データを受け取り、回転、変換、射影などの指定の効果を適用することで 3D 空間内の頂点群の位置を決定します。そして、頂点は三角形 (レンダリングされるグラフィックの基礎となる部品) などのプリミティブに組み立てられ、GPU によって描画を行うキャンバスのどのピクセルをカバーするかを特定するためにラスタライズされます。
    + : フラグメントステージ: バーテックスシェーダーによって生成されたプリミティブでカバーされた各ピクセルの色をフラグメントシェーダーが計算します。これらの計算には、表面の詳細を提供する (テクスチャ形式の) 画像や、仮想光源の位置や色などの入力がよく用いられます。
* コンピュートパイプラインは一般の計算用です。コンピュートパイプラインは 1 個の計算ステージからなります。このステージでは、コンピュートシェーダーが一般のデータを受け取り、指定の数のワークグループで並列計算を行い、結果を 1 個以上のバッファーで返します。バッファーには任意の種類のデータを置けます。

上記で言及されたシェーダーは、GPU で処理される命令の集合です。WebGPU のシェーダーは WebGPU Shader Language (WGSL) と呼ばれる Rust 風の低レベルの言語で書かれます。

WebGPU アプリケーションを構築するにはいくつかの異なる方法がありますが、このプロセスはおそらく以下の手順を含むでしょう。

1. シェーダーモジュールの生成: WGSL でシェーダーコードを書き、1 個以上のシェーダーモジュールにパッケージ化します。
2. キャンバスコンテキストの取得と設定: `<canvas>` 要素の `webgpu` コンテキストを取得し、GPU 論理デバイスでどのような画像をレンダリングするかの情報を設定します。この手順は、コンピュートパイプラインのみを用いる場合など、アプリケーションが画像を出力しない場合は不要です。
3. データを格納したリソースの生成: パイプラインで処理するデータは、アプリケーションからアクセスするため、GPU バッファーまたはテクスチャーに格納される必要があります。
4. パイプラインの生成: 必要なデータ構造、バインディング、シェーダー、リソースの配置を含めて要求するパイプラインを詳細に記述するパイプラインディスクリプターを定義し、それに基づいてパイプラインを生成します。ここでの基本デモには 1 個のパイプラインのみがありますが、自明でないアプリケーションは通常異なる目的のための複数のパイプラインを持ちます。
5. 計算またはレンダリングパスの実行: これはいくつかのサブ手順からなります。
    1. 実行用に GPU に渡すコマンド一式をエンコードするコマンドエンコーダーを生成します。
    2. 計算またはレンダリングコマンドを発行するパスエンコーダーオブジェクトを生成します。
    3. 使用するパイプラインの指定、必要なデータの取得元となるバッファーの指定、(レンダーパイプラインの場合は) 行う描画操作の数の指定、などを行うコマンドを実行します。
    4. コマンドリストをファイナライズし、コマンドバッファーにカプセル化します。
    5. 論理デバイスのコマンドキューを通して、コマンドバッファーを GPU に送信します。

以下の節では、レンダーパイプラインの基本デモを解析し、必要なものを探索できるようにします。その後、コンピュートパイプラインの基本の例も解析し、レンダーパイプラインとの違いに注目します。

レンダーパイプラインの基本
-------------

レンダリング基本デモでは、`<canvas>` 要素に青一色の背景を用意し、その上に三角形を描画します。

### シェーダーモジュールの生成

ここでは以下のシェーダーコードを用います。バーテックスシェーダーステージ (`@vertex` ブロック) は、位置と色が格納されたデータのチャンクを受け取り、位置に基づいて頂点を配置し、色を補間し、これらのデータをフラグメントシェーダーステージに渡します。フラグメントシェーダーステージ (`@fragment` ブロック) は、バーテックスシェーダーステージからデータを受け取り、指定の色に基づいて頂点の色を決定します。

```js
const shaders = `
struct VertexOut {
 @builtin(position) position : vec4f,
 @location(0) color : vec4f
}

@vertex
fn vertex\_main(@location(0) position: vec4f,
 @location(1) color: vec4f) -> VertexOut
{
 var output : VertexOut;
 output.position = position;
 output.color = color;
 return output;
}

@fragment
fn fragment\_main(fragData: VertexOut) -> @location(0) vec4f
{
 return fragData.color;
}
`;
```

**メモ:** ここでのデモではシェーダーコードをテンプレートリテラルに格納していますが、WebGPU プログラムに渡すテキストとして取得しやすい場所ならどこに格納することもできます。たとえば、シェーダーを `<script>` 要素の中に格納し、`Node.textContent` を用いて内容を取り出す方法もよく用いられます。WGSL 用の正しい MIME タイプは `text/wgsl` です。

シェーダーコードを WebGPU で利用できるようにするには、シェーダーコードをディスクリプターオブジェクトのプロパティとして `GPUDevice.createShaderModule()` (en-US) に渡し、`GPUShaderModule` (en-US) の中に格納する必要があります。これは、たとえば以下のように行います。

```js
const shaderModule = device.createShaderModule({
  code: shaders,
});
```

### キャンバスコンテキストの取得と設定

レンダーパイプラインでは、グラフィックのレンダリング先を指定する必要があります。ここでは、画面上の `<canvas>` 要素への参照を取得し、引数 `webgpu` を `HTMLCanvasElement.getContext()` に渡すことで、GPU コンテキスト (`GPUCanvasContext` (en-US) のインスタンス) を返してもらいます。

そして、レンダリング情報の取得元となる `GPUDevice` (en-US)、テクスチャーの形式、半透明のテクスチャーをレンダリングする際に用いるアルファモードが格納されたオプションオブジェクトを `GPUCanvasContext.configure()` (en-US) に渡すことで、コンテキストを設定します。

```js
const canvas = document.querySelector("#gpuCanvas");
const context = canvas.getContext("webgpu");

context.configure({
  device: device,
  format: navigator.gpu.getPreferredCanvasFormat(),
  alphaMode: "premultiplied",
});
```

**メモ:** 使用するテクスチャーの形式を決めるベストプラクティスは、`GPU.getPreferredCanvasFormat()` メソッドを用いることです。これは、ユーザーのデバイス用の最も効率的な形式 (`bgra8unorm` または `rgba8unorm`) を選択します。

### バッファを生成して三角形データを書き込む

次に、WebGPU が利用できる形式で、WebGPU にデータを提供します。データは最初 `Float32Array` で提供され、ここには三角形の各頂点について 8 個のデータ (位置の X, Y, Z, W および色の R, G, B, A) が格納されています。

```js
const vertices = new Float32Array([
  0.0, 0.6, 0, 1, 1, 0, 0, 1, -0.5, -0.6, 0, 1, 0, 1, 0, 1, 0.5, -0.6, 0, 1, 0,
  0, 1, 1,
]);
```

しかし、ここで問題に直面します。データを `GPUBuffer` (en-US) に格納する必要があります。裏側では、この種類のバッファーは GPU のコアに非常に密接に統合されたメモリーに保存され、期待される高効率の処理を可能にします。副作用として、このメモリーはブラウザーなどのホストシステム上で実行されているプロセスからはアクセスできません。

`GPUBuffer` (en-US) は `GPUDevice.createBuffer()` (en-US) を呼び出すことにより生成できます。すべてのデータを格納できるよう、配列 `vertices` の長さと同じサイズを指定します。さらに、バッファーを頂点バッファーとして、およびコピー先として用いることを示す `VERTEX` および `COPY_DST` 使用法フラグを指定します。

```js
const vertexBuffer = device.createBuffer({
  size: vertices.byteLength, // 頂点を格納するのに十分な大きさにする
  usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY\_DST,
});
```

コンピュートパイプラインの例でデータを GPU から JavaScript に読み戻すために用いるようなマッピング操作を用いてデータを `GPUBuffer` に乗せることもできます。しかし、ここでは使いやすい `GPUQueue.writeBuffer()` (en-US) メソッドを用います。このメソッドは、書き込み先のバッファー、書き込み元のデータソース、それぞれのオフセット値、そして書き込むデータのサイズ (ここでは配列全体の長さを指定した) を引数としてとります。すると、ブラウザーは最も効率のよい方法でデータの書き込みを処理します。

```js
device.queue.writeBuffer(vertexBuffer, 0, vertices, 0, vertices.length);
```

### レンダーパイプラインの定義と生成

これでデータをバッファーに配置できました。準備の次のパートは、レンダリングに用いることができるパイプラインを実際に生成することです。

まず最初に、頂点データで必要なレイアウトを記述するオブジェクトを生成します。これは以前に配列 `vertices` およびバーテックスシェーダーステージで見たものを完全に記述します。すなわち、各頂点が位置と色のデータを持ちます。どちらも (WGSL の `vec4<f32>` 型に対応する) `float32x4` 形式でフォーマットされ、色データは各頂点で 16 バイトのオフセットから始まります。`arrayStride` はストライド、すなわち各頂点を構成するバイト数を指定し、`stepMode` はデータを頂点ごとに読み取るべきであることを指定します。

```js
const vertexBuffers = [
  {
    attributes: [
      {
        shaderLocation: 0, // 位置
        offset: 0,
        format: "float32x4",
      },
      {
        shaderLocation: 1, // 色
        offset: 16,
        format: "float32x4",
      },
    ],
    arrayStride: 32,
    stepMode: "vertex",
  },
];
```

次に、レンダーパイプラインステージの構成を指定するディスクリプターオブジェクトを生成します。両方のシェーダーステージで関係するコードがある `GPUShaderModule` (en-US) (`shaderModule`)、および各ステージのエントリーポイントとなる関数の名前を指定します。

さらに、バーテックスシェーダーステージでは頂点データに求める状態を提供する `vertexBuffers` オブジェクトを提供し、フラグメントシェーダーステージでは (以前キャンバスコンテキストの設定で指定した形式と一致する) 指定のレンダリング形式を表す色ターゲットの状態の配列を提供します。

さらに、`primitive` 状態も指定します。これは今回は単に描画するプリミティブの種類を表します。さらに、`layout` を `auto` に設定します。`layout` プロパティはパイプラインの実行中に用いるすべての GPU リソース (バッファーやテクスチャーなど) のレイアウト (構造、用途、種類) を定義します。より複雑なアプリケーションでは、これは `GPUPipelineLayout` (en-US) オブジェクトの形式になるでしょう。これは `GPUDevice.createPipelineLayout()` (en-US) を用いて生成でき (コンピュートパイプラインの基本で例を見ることができます)、GPU がどうすればパイプラインを最も効率よく実行できるかを事前に決定できるようにします。しかし、ここでは値 `auto` を指定し、パイプラインにシェーダーコードで定義されたバインディングに基づいて暗黙のバインドグループレイアウトを生成させます。

```js
const pipelineDescriptor = {
  vertex: {
    module: shaderModule,
    entryPoint: "vertex\_main",
    buffers: vertexBuffers,
  },
  fragment: {
    module: shaderModule,
    entryPoint: "fragment\_main",
    targets: [
      {
        format: navigator.gpu.getPreferredCanvasFormat(),
      },
    ],
  },
  primitive: {
    topology: "triangle-list",
  },
  layout: "auto",
};
```

最後に、`pipelineDescriptor` オブジェクトを引数として `GPUDevice.createRenderPipeline()` (en-US) メソッドを呼び出すことで、これに基づいて `GPURenderPipeline` (en-US) を生成できます。

```js
const renderPipeline = device.createRenderPipeline(pipelineDescriptor);
```

### レンダリングパスの実行

これですべての準備が完了したので、レンダリングパスを実際に実行し、`<canvas>` への描画を行うことができます。後で GPU に発行するコマンドをエンコードするには、`GPUCommandEncoder` (en-US) インスタンスを生成する必要があります。これは `GPUDevice.createCommandEncoder()` (en-US) を呼び出すことで生成できます。

```js
const commandEncoder = device.createCommandEncoder();
```

次に、`GPUCommandEncoder.beginRenderPass()` (en-US) を呼び出して `GPURenderPassEncoder` (en-US) インスタンスを生成することで、レンダリングパスの実行を開始します。このメソッドはディスクリプターオブジェクトを引数にとります。このオブジェクトの唯一の必須プロパティは配列 `colorAttachments` です。ここでは、以下を指定します。

1. レンダリング先のテクスチャービュー: `context.getCurrentTexture().createView()` (en-US) により `<canvas>` から新しいビューを生成します。
2. ビューをロード後任意の描画を行う前に指定の色に「クリア」すること。これにより、三角形の後ろの青い背景を生成します。
3. 現在のレンダリングパスの値をこのカラーアタッチメント用に格納すること。

```js
const clearColor = { r: 0.0, g: 0.5, b: 1.0, a: 1.0 };

const renderPassDescriptor = {
  colorAttachments: [
    {
      clearValue: clearColor,
      loadOp: "clear",
      storeOp: "store",
      view: context.getCurrentTexture().createView(),
    },
  ],
};

const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
```

すると、三角形を描画するためにレンダリングパスエンコーダーのメソッドを呼び出すことができるようになります。

1. `renderPipeline` オブジェクトを引数として `GPURenderPassEncoder.setPipeline()` (en-US) を呼び出すことにより、レンダリングパスで使用するパイプラインを指定します。
2. `vertexBuffer` オブジェクトを引数として `GPURenderPassEncoder.setVertexBuffer()` (en-US) を呼び出すことにより、レンダリング用にパイプラインに渡すデータソースにします。最初の引数は頂点バッファーを設定するスロットであり、バッファーのレイアウトを記述する配列 `vertexBuffers` の要素のインデックスの参照です。
3. `GPURenderPassEncoder.draw()` (en-US) により描画を実行します。`vertexBuffer` には 3 個の頂点のデータが格納されているので、それらすべてを描画するために頂点数の値を `3` に設定します。

```js
passEncoder.setPipeline(renderPipeline);
passEncoder.setVertexBuffer(0, vertexBuffer);
passEncoder.draw(3);
```

コマンド列のエンコードを完了して GPU に発行するために、あと 3 個の手順が必要です。

1. `GPURenderPassEncoder.end()` (en-US) メソッドを呼び出し、レンダーパスコマンドリストの終わりを示します。
2. `GPUCommandEncoder.finish()` (en-US) メソッドを呼び出し、発行したコマンドの列の記録を完了し、`GPUCommandBuffer` (en-US) オブジェクトインスタンスにカプセル化します。
3. `GPUCommandBuffer` (en-US) を GPU に送るため、デバイスの (`GPUQueue` (en-US) インスタンスで表される) コマンドキューに送信します。デバイスのキューは `GPUDevice.queue` (en-US) プロパティを通じて利用可能であり、`GPUQueue.submit()` (en-US) を呼び出すことでキューに `GPUCommandBuffer` (en-US) のインスタンスの配列を追加できます。

これらの 3 個の手順は以下の 2 行で実現できます。

```js
passEncoder.end();

device.queue.submit([commandEncoder.finish()]);
```

コンピュートパイプラインの基本
---------------

計算基本デモでは、GPU にある値を計算させ、それらを出力バッファーに書き込み、そのデータをステージングバッファーにコピーし、JavaScript からデータを読み取ってコンソールに記録できるようにステージングバッファーをマップします。

このアプリケーションは、レンダリング基本デモに似た構造をなぞります。以前と同様に `GPUDevice` (en-US) の参照を生成し、`GPUDevice.createShaderModule()` (en-US) の呼び出しによりシェーダーコードを `GPUShaderModule` (en-US) にカプセル化します。ここでの違いは、シェーダーコードに `@compute` ステージという 1 個のシェーダーステージしか無いことです。

```js
// グローバルのバッファサイズを定義する
const BUFFER\_SIZE = 1000;

const shader = `
@group(0) @binding(0)
var<storage, read\_write> output: array<f32>;

@compute @workgroup\_size(64)
fn main(
 @builtin(global\_invocation\_id)
 global\_id : vec3u,

 @builtin(local\_invocation\_id)
 local\_id : vec3u,
) {
 // バッファーの範囲外にアクセスしないようにする
 if (global\_id.x >= ${BUFFER\_SIZE}) {
 return;
 }

 output[global\_id.x] =
 f32(global\_id.x) \* 1000. + f32(local\_id.x);
}
`;
```

### データを扱うバッファの生成

この例では、データを扱うために 2 個の `GPUBuffer` (en-US) インスタンスを生成します。GPU での計算結果を高速で書き込む `output` バッファーと、`output` の内容をコピーして JavaScript から値にアクセスできるようにマップできる `stagingBuffer` です。

* `output` は、コピー操作のコピー元となるストレージバッファーとして指定されています。
* `stagingBuffer` は JavaScript から読むためにマップでき、コピー操作のコピー先となるバッファーとして指定されています。

```js
const output = device.createBuffer({
  size: BUFFER\_SIZE,
  usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY\_SRC,
});

const stagingBuffer = device.createBuffer({
  size: BUFFER\_SIZE,
  usage: GPUBufferUsage.MAP\_READ | GPUBufferUsage.COPY\_DST,
});
```

### バインドグループレイアウトの生成

パイプラインの生成時、そのパイプラインで使用するバインドグループを指定します。このためには、まずこのパイプラインで用いるバッファーなどの GPU リソースの構造と目的を定義する `GPUBindGroupLayout` (en-US) を (`GPUDevice.createBindGroupLayout()` (en-US) を呼び出すことにより) 生成します。このレイアウトは、バインドグループが従うテンプレートとして用いられます。ここでは、パイプラインがバインディングスロット 0 (シェーダーコードの関連するバインディング番号 `@binding(0)` に対応します) に結びつき、パイプラインのコンピュートステージで使用でき、バッファーの目的が `storage` と定義された 1 個のメモリーバッファーにアクセスできるようにします。

```js
const bindGroupLayout = device.createBindGroupLayout({
  entries: [
    {
      binding: 0,
      visibility: GPUShaderStage.COMPUTE,
      buffer: {
        type: "storage",
      },
    },
  ],
});
```

次に、`GPUDevice.createBindGroup()` (en-US) を呼び出すことにより、`GPUBindGroup` (en-US) を生成します。このメソッドに、バインドグループのベースとなるバインドグループレイアウトを指定するディスクリプターオブジェクトと、このレイアウトで定義されたスロットにバインドする変数の詳細を渡します。ここでは、バインディング 0 を宣言し、前に定義した `output` バッファーをそれにバインドするよう指定します。

```js
const bindGroup = device.createBindGroup({
  layout: bindGroupLayout,
  entries: [
    {
      binding: 0,
      resource: {
        buffer: output,
      },
    },
  ],
});
```

**メモ:** `GPUComputePipeline.getBindGroupLayout()` (en-US) メソッドを呼び出すことで、バインドグループの生成時に使用される暗黙のレイアウトを取得できます。さらに、レンダーパイプラインで利用可能なバージョンもあります。`GPURenderPipeline.getBindGroupLayout()` (en-US) を参照してください。

### コンピュートパイプラインの生成

上記すべてを用意したら、パイプラインディスクリプターオブジェクトを渡して `GPUDevice.createComputePipeline()` (en-US) を呼び出すことで、コンピュートパイプラインを生成できます。これは、レンダーパイプラインの生成と似た方法です。コンピュートシェーダーを記述し、コードを探すモジュールとエントリーポイントを指定します。さらに、パイプラインの `layout` も指定します。ここでは、`GPUDevice.createPipelineLayout()` (en-US) を呼び出し、前に定義した `bindGroupLayout` をベースにレイアウトを生成します。

```js
const computePipeline = device.createComputePipeline({
  layout: device.createPipelineLayout({
    bindGroupLayouts: [bindGroupLayout],
  }),
  compute: {
    module: shaderModule,
    entryPoint: "main",
  },
});
```

ここでのレンダーパイプラインのレイアウトとの違いの一つは、何も描画を行わないので、プリミティブの種類を指定していないことです。

### コンピュートパスの実行

コンピュートパスの実行はレンダリングパスの実行と構造は似ており、別のコマンドを用います。まず、`GPUCommandEncoder.beginComputePass()` (en-US) によりパスエンコーダーを生成します。

コマンドの発行には、以前と同様に `GPUComputePassEncoder.setPipeline()` (en-US) を用いてパイプラインを指定します。しかし、その後は、`GPUComputePassEncoder.setBindGroup()` (en-US) を用いて計算に用いるデータの指定に `bindGroup` を用いることを指定し、`GPUComputePassEncoder.dispatchWorkgroups()` (en-US) を用いて計算の実行に用いる GPU ワークグループの数を指定します。

そして、`GPURenderPassEncoder.end()` (en-US) を用いてレンダーパスのコマンドリストの終端を示します。

```js
passEncoder.setPipeline(computePipeline);
passEncoder.setBindGroup(0, bindGroup);
passEncoder.dispatchWorkgroups(Math.ceil(BUFFER\_SIZE / 64));

passEncoder.end();
```

### 結果を JavaScript で読み取る

`GPUQueue.submit()` (en-US) を用いてエンコードされたコマンドを実行用に GPU に送信する前に、`GPUCommandEncoder.copyBufferToBuffer()` (en-US) を用いて `output` バッファーの中身を `stagingBuffer` バッファーにコピーします。

```js
// 出力バッファーをステージングバッファーにコピーする
commandEncoder.copyBufferToBuffer(
  output,
  0, // コピー元のオフセット
  stagingBuffer,
  0, // コピー先のオフセット
  BUFFER\_SIZE,
);

// コマンドバッファーの配列を実行用のコマンドキューに渡し、フレームを終える
device.queue.submit([commandEncoder.finish()]);
```

出力データが `stagingBuffer` で参照可能になったら、`GPUBuffer.mapAsync()` (en-US) メソッドを用いてデータを中間メモリーにマップし、`GPUBuffer.getMappedRange()` (en-US) を用いてマップされた範囲への参照を取得し、データを JavaScript にコピーし、コンソールに記録します。さらに、処理が完了したら `stagingBuffer` のマップを解除します。

```js
// JS に結果を読み戻すため、ステージングバッファーをマップする
await stagingBuffer.mapAsync(
  GPUMapMode.READ,
  0, // オフセット
  BUFFER\_SIZE, // サイズ
);

const copyArrayBuffer = stagingBuffer.getMappedRange(0, BUFFER\_SIZE);
const data = copyArrayBuffer.slice();
stagingBuffer.unmap();
console.log(new Float32Array(data));
```

GPU エラーの処理
----------

WebGPU の呼び出しは、GPU 処理の中で非同期で検証されます。エラーが検出された場合は、プログラムの呼び出しが GPU 側で無効とマークされます。無効になった呼び出しの返り値に依存する他の呼び出しが行われた場合は、このオブジェクトも無効とマークされ、その先も同様です。このため、WebGPU におけるエラーは「感染性」といわれます。

それぞれの `GPUDevice` (en-US) のインスタンスは、各自のエラースコープスタックを管理します。このスタックは最初は空で、特定の種類のエラーをキャプチャするため `GPUDevice.pushErrorScope()` (en-US) を呼び出してスタックにエラースコープをプッシュできます。

エラーのキャプチャが完了したら、`GPUDevice.popErrorScope()` (en-US) を呼び出すことでキャプチャを終了できます。これは、スタックからスコープをポップし、スコープで最初にキャプチャされたエラーを表現するオブジェクト (`GPUInternalError` (en-US) または `GPUOutOfMemoryError` (en-US) または `GPUValidationError` (en-US)) か、エラーがキャプチャされていない場合は `null` で解決する `Promise` を返します。

適する場合は、WebGPU のコードでなぜエラーが発生しているのかを理解する助けとなる有用な情報を「バリデーション」節で提供することを試みました。この節では、エラーを回避するために満たすべき基準を列挙しています。例として、`GPUDevice.createBindGroup()` のバリデーション節 (en-US)を参照してください。この情報には複雑なものもあります。仕様を繰り返すのではなく、以下の性質を持つエラーの基準のみを列挙することにしました。

* 明らかではないもの。たとえば、バリデーションエラーを発生させるディスクリプタープロパティの組み合わせです。正しいディスクリプターオブジェクトの構造を確実に使うよう言うのは意味がありません。これは明らかであり、あいまいです。
* 開発者が制御できるもの。エラーの基準のいくつかは内部のみに基づき、ウェブ開発者には関係ありません。

explainer で、WebGPU のエラー処理についての詳細情報を得ることができます。Object validity and destroyed-ness および Errors を参照してください。WebGPU Error Handling best practices には有用な実世界での例やアドバイスがあります。

**メモ:** WebGL でエラーを処理する歴史上の方法は、エラーの情報を返す `getError()` (en-US) メソッドを提供することです。これはエラーを同期式で返し、効率がよくないという問題があります。これを呼び出すごとに GPU との往復のやりとりを行い、これまで発行した処理がすべて完了するまで待つ必要があります。さらに、状態モデルはフラット、すなわち関係ないコードの間でエラーが漏れる可能性があります。WebGPU の作者はこれらの点を改善することにしました。

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

### API のエントリーポイント

`Navigator.gpu` / `WorkerNavigator.gpu`

この API のエントリーポイントです。現在のコンテキスト用の `GPU` オブジェクトを返します。

`GPU`

WebGPU を用いるための出発点です。`GPUAdapter` を得るのに用いることができます。

`GPUAdapter`

GPU アダプターを表します。これを用いて `GPUDevice` (en-US)、アダプターの情報、機能、制限を要求できます。

`GPUAdapterInfo`

アダプターについての特定用の情報を保持します。

### GPU デバイスの設定

`GPUDevice` (en-US)

論理 GPU デバイスを表します。これは WebGPU の機能の大半へのアクセスに用いるメインインターフェイスです。

`GPUSupportedFeatures`

`GPUAdapter` や `GPUDevice` (en-US) が対応している追加の機能を表す Set 風オブジェクトです。

`GPUSupportedLimits`

`GPUAdapter` や `GPUDevice` (en-US) が対応している制限を表します。

### 描画を行う `<canvas>` の設定

`HTMLCanvasElement.getContext()` — `"webgpu"` `contextType`

`"webgpu"` `contextType` を指定して `getContext()` を呼び出すと、`GPUCanvasContext` (en-US) オブジェクトのインスタンスを返します。これは、`GPUCanvasContext.configure()` (en-US) を用いて設定できます。

`GPUCanvasContext` (en-US)

`<canvas>` 要素の WebGPU レンダリングコンテキストを表します。

### パイプラインリソースの表現

`GPUBuffer` (en-US)

GPU での処理で用いる生データを格納できるメモリーのブロックを表します。

`GPUExternalTexture` (en-US)

GPU でのレンダリング処理でテクスチャーとして用いることができる `HTMLVideoElement` のスナップショットが格納されたラッパーオブジェクトです。

`GPUSampler` (en-US)

シェーダーがテクスチャーのリソースデータの変換やフィルターを行う方法を制御します。

`GPUShaderModule` (en-US)

内部のシェーダーモジュールオブジェクトへの参照で、パイプラインにより実行用に GPU に送信できる WGSL のシェーダーコードのコンテナーです。

`GPUTexture` (en-US)

GPU でのレンダリング処理で使用する用の、画像などの 1 次元、2 次元、または 3 次元のデータの配列を格納するのに用いるコンテナーです。

`GPUTextureView` (en-US)

特定の `GPUTexture` (en-US) で定義された、テクスチャーのサブリソースの部分のビューです。

### パイプラインの表現

`GPUBindGroup` (en-US)

`GPUBindGroupLayout` (en-US) に基づき、`GPUBindGroup` はグループで一緒にバインドされるリソースの集合と、これらのリソースのシェーダーステージでの利用法を定義します。

`GPUBindGroupLayout` (en-US)

パイプラインで用いられるバッファーなどの関連する GPU リソースの構造と目的を定義し、`GPUBindGroup` (en-US) を生成する際のテンプレートとして用いられます。

`GPUComputePipeline` (en-US)

コンピュートシェーダーステージを制御し、`GPUComputePassEncoder` (en-US) で使用できます。

`GPUPipelineLayout` (en-US)

パイプラインで用いる `GPUBindGroupLayout` (en-US) を定義します。コマンドのエンコード時にパイプラインとともに用いる `GPUBindGroup` (en-US) は、互換性がある `GPUBindGroupLayout` (en-US) を持っている必要があります。

`GPURenderPipeline` (en-US)

バーテックスシェーダーステージとフラグメントシェーダーステージを制御し、`GPURenderPassEncoder` (en-US) や `GPURenderBundleEncoder` (en-US) で使用できます。

### コマンドのエンコードと GPU への送信

`GPUCommandBuffer` (en-US)

実行用に `GPUQueue` (en-US) に送信できる、記録した GPU コマンドのリストを表します。

`GPUCommandEncoder` (en-US)

コマンドエンコーダーを表します。GPU に発行するコマンドのエンコードに使用します。

`GPUComputePassEncoder` (en-US)

`GPUComputePipeline` (en-US) が発行し、コンピュートシェーダーステージの制御に関するコマンドをエンコードします。`GPUCommandEncoder` (en-US) による全体のエンコード処理の一部です。

`GPUQueue` (en-US)

GPU でのエンコードされたコマンドの実行を制御します。

`GPURenderBundle` (en-US)

事前に記録されたコマンド群のバンドル用のコンテナーです。(`GPURenderBundleEncoder` (en-US) を参照してください)

`GPURenderBundleEncoder` (en-US)

コマンド群のバンドルを事前に記録するのに使用します。これらは、必要に応じて何度でも、`executeBundles()` (en-US) メソッドにより `GPURenderPassEncoder` (en-US) で再利用できます。

`GPURenderPassEncoder` (en-US)

`GPURenderPipeline` (en-US) が発行し、バーテックスシェーダーステージとフラグメントシェーダーステージの制御に関するコマンドをエンコードします。`GPUCommandEncoder` (en-US) による全体のエンコード処理の一部です。

### レンダリングパスにおけるクエリーの実行

`GPUQuerySet` (en-US)

オクルージョンやタイムスタンプのクエリーなど、パスにおけるクエリーの結果の記録に用います。

### エラーのデバッグ

`GPUCompilationInfo` (en-US)

`GPUCompilationMessage` (en-US) オブジェクトの配列です。シェーダーコードの問題の診断を助けるため、GPU シェーダーモジュールコンパイラーにより生成されます。

`GPUCompilationMessage` (en-US)

GPU シェーダーモジュールコンパイラーが生成した、1 個の情報、警告、もしくはエラーのメッセージを表します。

`GPUDeviceLostInfo` (en-US)

`GPUDevice.lost` (en-US) `Promise` が解決する際に返され、デバイスがロストした原因の情報を提供します。

`GPUError` (en-US)

`GPUDevice.popErrorScope` (en-US) および `uncapturederror` (en-US) イベントで浮かび上がったエラー用のベースインターフェイスです。

`GPUInternalError` (en-US)

`GPUDevice.popErrorScope` (en-US) および `GPUDevice` (en-US) `uncapturederror` (en-US) イベントで浮かび上がったエラーの型の一つです。バリデーションの要求がすべて満たされたにもかかわらずシステムまたは実装に固有の理由で処理に失敗したことを表します。

`GPUOutOfMemoryError` (en-US)

`GPUDevice.popErrorScope` (en-US) および `GPUDevice` (en-US) `uncapturederror` (en-US) イベントで浮かび上がったエラーの型の一つです。要求された処理を完了するのに十分な空きメモリが無かったことを表します。

`GPUPipelineError` (en-US)

パイプラインの失敗を表現します。この値は `GPUDevice.createComputePipelineAsync()` (en-US) や `GPUDevice.createRenderPipelineAsync()` (en-US) から返された `Promise` が拒否されたとき渡されます。

`GPUUncapturedErrorEvent` (en-US)

`GPUDevice` (en-US) `uncapturederror` (en-US) イベント用のイベントオブジェクトの型です。

`GPUValidationError` (en-US)

`GPUDevice.popErrorScope` (en-US) および `GPUDevice` (en-US) `uncapturederror` (en-US) イベントで浮かび上がったエラーの型の一つです。操作が WebGPU API のバリデーションの制約を満たさなかったことを表すアプリケーションエラーを表現します。

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

この API 全体は安全なコンテキストでのみ利用可能です。

例
-

* 計算基本デモ
* レンダリング基本デモ
* WebGPU samples
仕様書
---

| Specification |
| --- |
| WebGPU # gpu-interface |

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

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

関連情報
----

* WebGPU best practices
* WebGPU explainer
* WebGPU — All of the cores, none of the canvas


File - Web API

File
====

**`File`** インターフェイスは、ファイルについての情報を提供したり、ウェブページ内の JavaScript からその内容にアクセスできるようにしたりします。

`File` オブジェクトは通常、`<input>` 要素を使用してファイルを選択した結果として返される `FileList` オブジェクト、またはドラッグ＆ドロップ操作の `DataTransfer` オブジェクトから取得します。

`File` オブジェクトは特別な種類の `Blob` オブジェクトであり、 Blob が利用できる場面ではどこでも利用できます。特に、`FileReader`、`URL.createObjectURL_static`、`createImageBitmap()`、`XMLHttpRequest.send()` は、`Blob` と `File` の両方を受け付けます。

詳しい情報や例は、ウェブアプリケーションからのファイルの使用 を参照してください。

Blob

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

`File()`

新しく構築された `File` オブジェクトを返します。

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

`File.prototype.lastModified` 読取専用

ファイルの最終更新時刻を、 UNIX 元期 (1970 年 1 月 1 日深夜) からの経過ミリ秒数で返します。

`File.prototype.lastModifiedDate`
非推奨
 読取専用
Non-standard

`File` オブジェクトが参照しているファイルの最終更新時刻の `Date` を返します。

`File.prototype.name` 読取専用

`File` オブジェクトが参照しているファイルの名前を返します。

`File.prototype.webkitRelativePath` 読取専用

`File` の URL の相対パスを返します。

`File` は `Blob` を実装しているので、以下のようなプロパティも利用できます。

`Blob.size` 読取専用

ファイルのサイズをバイト単位で返します。

`File.prototype.type` 読取専用

ファイルの MIME タイプを返します。

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

*`File` インターフェイスはメソッドを定義せず、`Blob` インターフェイスからメソッドを継承しています。*

`Blob.prototype.slice([start[, end[, contentType]]])`

ソース `Blob` の指定したバイト数の範囲のデータを含む新しい `Blob` オブジェクトを返します。

`Blob.prototype.stream()`

`File` を `ReadableStream` に変換し、`File` の内容を読み込めるようにします。

`Blob.prototype.text()`

`File` をストリームに変換し、最後まで読み込みます。これは、文字列（テキスト）で解決するプロミスを返します。

`Blob.prototype.arrayBuffer()`

`File` をストリームに変換し、最後まで読み込みます。 `ArrayBuffer` で解決するプロミスを返します。

仕様書
---

| Specification |
| --- |
| File API # file-section |

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

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

関連情報
----

* ウェブアプリケーションからのファイルの使用
* `FileReader`


VREyeParameters - Web API

VREyeParameters
===============

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

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

**`VREyeParameters`** は WebVR API のインターフェイスで、指定した目のためにシーンを正しくレンダリングするためのすべての情報（視界の情報を含む）を表します。

**メモ:** このインターフェイスは古い WebVR API の一部でした。これは WebXR 機器 API に置き換えられました。

このインターフェイスは `VRDisplay.getEyeParameters()` メソッドを通じてアクセスできます。

**警告:** このインターフェイスは、ビューおよび投影行列を計算するために使用すべきではありません。ハードウェアの互換性を可能な限り確保するために、`VRFrameData` で指定された行列を使用してください。

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

`VREyeParameters.offset`
非推奨
 読取専用
Non-standard

ユーザーの目と目の間の中心点から目の中心までのオフセットを、メートル単位で表します。

`VREyeParameters.fieldOfView`
非推奨
 読取専用
Non-standard

ユーザーの瞳孔間距離 (IPD) の調整により変化する、目の現在の視野角を記述します。

`VREyeParameters.renderWidth`
非推奨
 読取専用
Non-standard

それぞれの目のビューポートの推奨レンダーターゲットの幅をピクセル単位で記述します。

`VREyeParameters.renderHeight`
非推奨
 読取専用
Non-standard

それぞれの目のビューポートの推奨レンダーターゲットの高さをピクセル単位で記述します。

例
-

```js
navigator.getVRDisplays().then((displays) => {
  // If a display is available, use it to present the scene
  vrDisplay = displays[0];
  console.log("Display found");
  // Starting the presentation when the button is clicked:
  // It can only be called in response to a user gesture
  btn.addEventListener("click", () => {
    vrDisplay.requestPresent([{ source: canvas }]).then(() => {
      console.log("Presenting to WebVR display");

      // Set the canvas size to the size of the vrDisplay viewport

      const leftEye = vrDisplay.getEyeParameters("left");
      const rightEye = vrDisplay.getEyeParameters("right");

      canvas.width = Math.max(leftEye.renderWidth, rightEye.renderWidth) \* 2;
      canvas.height = Math.max(leftEye.renderHeight, rightEye.renderHeight);

      drawVRScene();
    });
  });
});
```

仕様書
---

このインターフェイスは古い WebVR API の一部であり、これは WebXR 機器 API で置き枯れられました。標準規格になる見込みはありません。

すべてのブラウザーが新しい WebXR API を実装するまで、 A-Frame、Babylon.js、Three.js などのフレームワークを使用するか、ポリフィルを使用することが、すべてのブラウザーで動作する WebXR アプリを開発する上で推奨されます。[1]

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

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

関連情報
----

* WebVR API


LockManager - Web API

LockManager
===========

Web Locks API の **`LockManager`** インターフェイスは、新しい `Lock` オブジェクトを要求するメソッドと、既存の `Lock` オブジェクトを取得するメソッドを提供します。`LockManager` のインスタンスを得るには、`navigator.locks` を参照します。

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

`LockManager.request()`

名前と性質を指定する引数をとり、`Lock` オブジェクトを要求します。

`LockManager.query()`

確保中のロックと獲得待ち中のロックに関する情報を持ったオブジェクトで解決する `Promise` を返します。

仕様書
---

| Specification |
| --- |
| Web Locks API # api-lock-manager |

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

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


MediaStreamTrackAudioSourceNode - Web API

MediaStreamTrackAudioSourceNode
===============================

**`MediaStreamTrackAudioSourceNode`** インターフェイスは `AudioNode` の一種で、WebRTC やメディアキャプチャとストリーム API から得られた特定の `MediaStreamTrack` からデータを取得する音源を表します。

音声自体は、マイクやその他の音声サンプリングデバイスからの入力かもしれないし、`RTCPeerConnection` から受信したものかもしれないし、その他かもしれません。

`MediaStreamTrackAudioSourceNode` は入力を持たず、ちょうど 1 個の出力を持ち、`AudioContext.createMediaStreamTrackSource()` メソッドにより生成されます。このインターフェイスは、ストリームの最初の音声トラックで決め打ちするのではなく使用するトラックを明示できるという点以外、`MediaStreamAudioSourceNode` に似ています。

EventTarget

AudioNode

MediaStreamTrackAudioSourceNode

|  |  |
| --- | --- |
| 入力数 | `0` |
| 出力数 | `1` |
| チャンネル数 | 生成時に `AudioContext.createMediaStreamTrackSource()` メソッドに渡された最初の音声 `MediaStreamTrack` により定義されます。 |

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

`new MediaStreamTrackAudioSourceNode()`

オプションを指定して新しい `MediaStreamTrackAudioSourceNode` オブジェクトを生成します。

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

*`MediaStreamTrackAudioSourceNode` インターフェイスは自身のプロパティを持ちません。しかし、親の `AudioNode` のプロパティを継承します。*

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

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

例
-

`AudioContext.createMediaStreamSource()` に、このオブジェクトを用いるサンプルコードがあります。

仕様書
---

| Specification |
| --- |
| Web Audio API # MediaStreamTrackAudioSourceNode |

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

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

関連情報
----

* Web Audio API の使用
* WebRTC API
* メディアキャプチャとストリーム API (メディアストリーム)
* `MediaStreamAudioSourceNode`


RTCPeerConnection - Web API

RTCPeerConnection
=================

**`RTCPeerConnection`** インターフェイスは、ローカルコンピューターとリモートピアの間の WebRTC 接続を表します。リモートピアに接続したり、接続を維持・監視したり、不要になったら接続を切断したりするためのメソッドを提供します。

EventTarget

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

`RTCPeerConnection()`

ローカルデバイスとリモートピア間の接続を表す、新しく作成された `RTCPeerConnection` を返します。

静的メソッド
------

`generateCertificate()` (en-US)

X.509 証明書とそれに対応する秘密鍵を作成し、それが生成されると新しい `RTCCertificate` (en-US) で解決される `Promise` を返します。

プロパティ
-----

*`EventTarget` から継承したプロパティもあります。*

`canTrickleIceCandidates` 読取専用

論理値で、リモートピアがトリクル ICE 候補を受け入れることができるかどうかを返します。

`connectionState` (en-US) 読取専用

ピア接続の現在の状態を示します。 `new`, `connecting`, `connected`, `disconnected`, `failed`, `closed` のいずれかの文字列を返します。

`currentLocalDescription` (en-US) 読取専用

 この `RTCPeerConnection` がリモートピアとの交渉を終了してから、直近で交渉に成功した接続のローカル側を記述した `RTCSessionDescription` オブジェクトを返します。
 また、この記述で表される提案や回答が最初にインスタンス化されて以降、 ICE エージェントによってすでに生成された可能性のある ICE 候補のリストも含まれます。

`currentRemoteDescription` (en-US) 読取専用

 この `RTCPeerConnection` がリモートピアとの交渉を終了してから、直近で交渉に成功した接続のリモート側を記述した `RTCSessionDescription` オブジェクトを返します。
 また、この記述で表される提案や回答が最初にインスタンス化されて以降、 ICE エージェントによってすでに生成された可能性のある ICE 候補のリストも含まれます。

`iceConnectionState` (en-US) 読取専用

 この RTCPeerConnection に関連する ICE エージェントの状態を文字列で返します。
 `new`, `checking`, `connected`, `completed`, `failed`, `disconnected`, `closed` の何れかの値になります。

`iceGatheringState` (en-US) 読取専用

 接続の ICE 収集状態を表す文字列を返します。これにより、例えば ICE 候補の収集が終了したことを検出することができます。
 取りうる値は、 `new`, `gathering`, `complete` の何れかです。

`localDescription` 読取専用

 接続のローカル側のセッションを記述した `RTCSessionDescription` を返します。
 まだ設定されていない場合は、 `null` を返します。

`peerIdentity` (en-US) 読取専用

 リモートピアを識別する文字列を含む `RTCIdentityAssertion` (en-US) に解決する `Promise` を返します。
 このプロミスが正常に解決されると、結果として得られる ID がターゲットピア ID になり、接続の間、変更されることはありません。

`pendingLocalDescription` (en-US) 読取専用

 接続のローカル側で保留中の設定変更を記述した `RTCSessionDescription` オブジェクトを返します。
 これは、現在の接続を記述するのではなく、近い将来に存在する可能性のある接続を記述します。

`pendingRemoteDescription` (en-US) 読取専用

 接続のリモート側で保留中の設定変更を記述した `RTCSessionDescription` オブジェクトを返します。
 これは、現在の接続を記述するのではなく、近い将来に存在する可能性のある接続を説明します。

`remoteDescription` (en-US) 読取専用

 接続のリモート側の、設定とメディア情報を含むセッションを記述した `RTCSessionDescription` オブジェクトを返します。
 まだ設定されていない場合は、`null`を返します。

`sctp` (en-US) 読取専用

 SCTP データを送受信するトランスポート層の SCTP (en-US) を記述した `RTCSctpTransport` (en-US) オブジェクトを返します。
 SCTP が交渉されていない場合、この値は `null` です。

`signalingState` (en-US) 読取専用

 他のピアに接続中または再接続中の、ローカル側のシグナリングプロセスの状態を記述した文字列を返します。
 値は `stable`, `have-local-offer`, `have-remote-offer`, `have-local-pranswer`, `have-remote-pranswer`, `closed` のうちのいずれかになります。

メソッド
----

*`EventTarget` から継承したメソッドもあります。*

`addIceCandidate()` (en-US)

`RTCPeerConnection` のリモート記述に新しいリモート候補を追加し、リモート側の接続の状態を記述します。

`addTrack()` (en-US)

新しい `MediaStreamTrack` を、相手側に送信されるトラックのセットに追加します。

`addTransceiver()` (en-US)

 新しい `RTCRtpTransceiver` (en-US) を作成し、接続に関連付けられたトランシーバーのセットに追加します。
 トランシーバーはそれぞれ、 `RTCRtpSender` (en-US) と `RTCRtpReceiver` (en-US) が関連付けられた両方向のストリームを表します。

`close()`

現在のピア接続を終了します。

`createAnswer()` (en-US)

 WebRTC 接続の提案/回答交渉中にリモートピアから受け取った提案に対する SDP (en-US) 回答の作成を開始します。
 回答には、ブラウザーが対応しているコーデック、オプション、セッションにすでに接続されているメディア、すでに収集されている ICE 候補に関する情報が含まれます。

`createDataChannel()` (en-US)

 リモートピアとリンクした新しいチャネルの作成を開始し、その上であらゆる種類のデータを転送することができます。
 これは、画像、ファイル転送、テキストチャット、ゲームアップデートパケットなどのバックチャネルコンテンツに便利です。

`createOffer()` (en-US)

 リモートピアとの新しい WebRTC 接続を開始するために、SDP (en-US) 提案 の作成を開始する。
 SDP提案には、WebRTCセッションにすでにアタッチされている`MediaStreamTrack` オブジェクト、コーデック、ブラウザーが対応しているオプションに関する情報、および ICE エージェントがすでに収集している候補が含まれており、シグナルチャネルを介して、接続を要求または既存の接続の構成を更新するために相手候補 に送信されます。

`getConfiguration()` (en-US)

接続の現在の構成を示すオブジェクトを返す。

`getIdentityAssertion()` (en-US)

 ID アサーションの収集を開始し、文字列としてエンコードされた ID アサーションに解決する `Promise` を返します。
 これは `signalingState` (en-US) が `closed` でない場合のみ効果を持ちます。

`getReceivers()` (en-US)

`RTCRtpReceiver` (en-US) オブジェクトの配列を返します。各オブジェクトは 1 つの RTP (en-US) レシーバーを表します。

`getSenders()` (en-US)

各オブジェクトは、 1 つのトラックのデータ送信に責任を負う RTP (en-US) 送信者を表す `RTCRtpSender` (en-US) オブジェクトの配列を返します。

`getStats()` (en-US)

接続全体または指定された `MediaStreamTrack` に関する統計データを解決する `Promise` を返します。

`getTransceivers()` (en-US)

接続上のデータの送受信に使用されているすべての `RTCRtpTransceiver` (en-US) オブジェクトのリストを返します。

`removeTrack()` (en-US)

`getSenders()` (en-US) によって報告される送信者リストから対応する `RTCRtpSender` (en-US) を実際に削除せずに、指定したトラックからのメディア送信を停止するよう接続のローカル側に指示します。
 トラックがすでに停止している場合、または接続の送信者リストにない場合、このメソッドは何の効果も持ちません。

`restartIce()` (en-US)

 ICE 候補の収集を、接続の両端でやり直すよう簡単に要求できるようにします。
 これにより、 ICE の再起動を発生させるために、呼び出し側または受信側のどちらかが同じメソッドを使用することができ、プロセスが簡素化されます。

`setConfiguration()` (en-US)

 指定されたオブジェクトに含まれる値に基づいて、接続の現在の構成を設定します。
 これにより、接続が使用する ICE サーバーや、使用するトランスポートポリシーを変更することができます。

`setIdentityProvider()` (en-US)

 Identity Provider (IdP) を引数で指定された 3 つの要素に設定します。
 その名前、そのプロバイダーとの通信に使用するプロトコル、そしてユーザー名です。
 プロトコルおよびユーザー名は省略可能です。

`setLocalDescription()` (en-US)

 接続に関連するローカルの説明を変更します。
 この説明は、メディア形式を含む、接続のローカル側のプロパティを指定します。
 これは `Promise` を返し、非同期に説明が変更されると履行されます。

`setRemoteDescription()` (en-US)

 指定されたセッション記述をリモートピアの現在の提案または回答として設定します。
 説明は、メディア形式を含む、接続のリモート側のプロパティを指定します。
 これは `Promise` を返し、非同期に説明が変更されると履行されます。

### 廃止されたメソッド

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

 音声または映像のローカルソースとして `MediaStream` を追加します。
 この古いメソッドを使用する代わりに、リモートピアに送信したいトラックごとに `addTrack()` (en-US) を 1 回使用する必要があります。

`createDTMFSender()`
非推奨

特定の `MediaStreamTrack` と関連付けられた新たな `RTCDTMFSender` (en-US) を生成します。これにより、その接続において DTMF 音（電話のトーン信号、プッシュ音）を送れるようになります。

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

 接続のローカルまたはリモート側に関連する、指定された ID の `MediaStream` を返します。
 このプロパティは `getSenders()` (en-US) と `getReceivers()` (en-US) メソッドに置き換えられました。

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

 音声または映像のローカルソースとして `MediaStream` を削除します。
 このメソッドは廃止されたため、代わりに `removeTrack()` (en-US) を使用してください。

イベント
----

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

`connectionstatechange` (en-US)

`RTCPeerConnection` の全体的な接続状態が変化したときに送信されます。

`datachannel` (en-US)

リモートピアが接続に `RTCDataChannel` を追加したときに送信されます。

`icecandidate` (en-US)

指定された候補をリモートピアに送信することを要求するために送信されます。

`icecandidateerror` (en-US)

ICE 候補の収集中にエラーが発生した場合に接続先に送信されます。イベントには、エラーの内容が記述さ れます。

`iceconnectionstatechange` (en-US)

切断時など、 ICE の接続状態が変化したときに送信されます。

`icegatheringstatechange` (en-US)

ICE レイヤーの収集状態 (`iceGatheringState` (en-US) が変化したときに送信されます。
 これは、 ICE 交渉がまだ始まっていないか (`new`)、候補の収集を始めたか (`gathering`)、終了したか (`complete`) を示します。

`negotiationneeded` (en-US)

ICE 接続の交渉または再交渉を行う必要があるときに送信されます。
 これは、最初に接続を開くときにも、変化するネットワーク条件に適応する必要があるときにも発生します。
 受信側は、オファーを作成し、相手ピアに送信することで応答する必要があります。

`signalingstatechange` (en-US)

この接続の ICE 信号の状態が変化したときに送信されます。

`track` (en-US)

接続を構成する `RTCRtpReceiver` (en-US) インスタンスのいずれかに新しいトラックが追加された後に送信されます。

### 廃止されたイベント

`addstream` (en-US)
非推奨

 新しい `MediaStream` が接続に追加されたときに送信されます。
 この古いイベントを待ち受けるのではなく、 `track` (en-US) イベントを待ち受けるために使用する必要があります。
 接続に追加された `MediaStreamTrack` ごとに 1 つ送信されます。

`removestream` (en-US)
非推奨

 domxref("MediaStream")}} が接続から削除されたときに送信されます。
 この古いイベントを待ち受けるのではなく、それぞれのストリームの `removetrack` イベントを待ち受けるために使用する必要があります。

仕様書
---

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # interface-definition |

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

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

関連情報
----

* https://github.com/jesup/nightly-gupshup/blob/master/static/js/chat.js
* http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-simple
* TutorRoom: Node.js HTML5 video capture, peer-to-peer video and filesharing application (source on GitHub)


CSSStyleRule - Web API

CSSStyleRule
============

**`CSSStyleRule`** は、単一の CSS スタイルルールを表します。

CSSRule

CSSGroupingRule

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

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

`CSSStyleRule.selectorText`

このルールのセレクターのテキスト表現を返します。例: `"h1,h2"`

`CSSStyleRule.style` 読取専用

このルールの `CSSStyleDeclaration` オブジェクトを返します。

`CSSStyleRule.styleMap` 読取専用

`StylePropertyMap` オブジェクトを返し、これによってこのルールのプロパティと値の組へアクセスできます。

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

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

例
-

 この CSS は 1 つのスタイルルールを含んでいます。これは最初の `CSSRule` となり、 `document.styleSheets[0].cssRules` で返されます。
 従って、 `myRules[0]` は `h1` を定義するルールを表す `CSSStyleRule` オブジェクトを返します。

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

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

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # the-cssstylerule-interface |

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

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


VTTCue - Web API

VTTCue
======

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
`VTTCue` インターフェイスは WebVTT（メディアプレゼンテーションに関するテキストトラック）を処理するための API の一部で、特定の `<track>` 要素に関連付けられたテキストトラックを記述および制御します。

EventTarget

TextTrackCue

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

`VTTCue()`

指定された時間範囲をカバーし、指定されたテキストを持つ、新しく作成された `VTTCue` オブジェクトを返します。

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

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

`VTTCue.region`

キューが描画される動画のサブ領域を説明する `VTTRegion` オブジェクト。 割り当てられていない場合は `null`。

`VTTCue.vertical`

キューの書き込み方向を表す列挙型を返します。

`VTTCue.snapToLines`

`VTTCue.line` 属性が整数の行数または動画サイズのパーセントである場合、`true` を返します。

`VTTCue.line`

キューの行位置を返します。 これは、文字列 `auto` またはその解釈が `VTTCue.snapToLines` の値に依存する数値になります。

`VTTCue.lineAlign`

`VTTCue.line` の配置を表す列挙型を返します。

`VTTCue.position`

行内のキューのインデントを返します。 これは、文字列 `auto` または `VTTCue.region` のパーセント値、または `VTTCue.region` が `null` の場合は動画サイズです。

`VTTCue.positionAlign`

キューの配置を表す列挙型を返します。 これは `VTTCue.position` が何に固定されているかを決定するために使用されます。

`VTTCue.size`

キューのサイズを表す `double` 型を動画サイズのパーセントで返します。

`VTTCue.align`

キューボックス内のすべてのテキスト行の配置を表す列挙型を返します。

`VTTCue.text`

キューの内容を含む文字列を返します。

メソッド
----

`getCueAsHTML()`

キューのテキストを `DocumentFragment` として返します。

例
-

### HTML

次の例は、新しい `TextTrack` を動画に追加し、次に `TextTrack.addCue()` メソッドを使用して `VTTCue` オブジェクトを値としてキューを追加します。

```html
<video
 controls
 src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/friday.mp4"></video>
```

### CSS

```css
video {
  width: 420px;
  height: 300px;
}
```

### JavaScript

```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
track.addCue(new VTTCue(0, 0.9, "Hildy!"));
track.addCue(new VTTCue(1, 1.4, "How are you?"));
track.addCue(new VTTCue(1.5, 2.9, "Tell me, is the lord of the universe in?"));
track.addCue(new VTTCue(3, 4.2, "Yes, he's in - in a bad humor"));
track.addCue(new VTTCue(4.3, 6, "Somebody must've stolen the crown jewels"));
console.log(track.cues);
```

### 結果

仕様書
---

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # the-vttcue-interface |

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

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


PerformanceResourceTiming - Web API

PerformanceResourceTiming
=========================

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

**`PerformanceResourceTiming`** インターフェイスは、アプリケーションのリソースの読み込みに関する詳細なネットワークタイミングデータの取得と分析を可能にします。アプリケーションはタイミングメトリックを使用して、`XMLHttpRequest`、`<SVG>`、画像、スクリプトなどの特定のリソースを取得するのにかかる時間を判断できます。

解説
--

このインターフェイスのプロパティは、リダイレクトの開始時刻と終了時刻、フェッチの開始時刻、DNS ルックアップの開始時刻と終了時刻、レスポンスの開始時刻と終了時刻などのネットワークイベントに対する高解像度タイムスタンプを含むリソース読み込みタイムラインを作成します。さらに、このインターフェイスは、取得したリソースのサイズや取得を開始したリソースの種類に関するデータを提供する他のプロパティを使用して `PerformanceEntry` を拡張します。

PerformanceEntry

PerformanceResourceTiming### 一般的なリソースタイミングメトリクス

このインターフェイスのプロパティを使用すると、特定のリソースタイミングメトリックスを計算することができます。一般的な使用される用途は次のとおりです。

* TCP ハンドシェイク時間の計測 (`connectEnd` - `connectStart`)
* DNS ルックアップ時間の計測 (`domainLookupEnd` - `domainLookupStart`)
* リダイレクト時間の計測 (`redirectEnd` - `redirectStart`)
* リクエスト時間の計測 (`responseStart` - `requestStart`)
* TLS ネゴシエーション時間の計測 (`requestStart` - `secureConnectionStart`)
* フェッチ時間の計測（リダイレクトなし） (`responseEnd` - `fetchStart`)
* サービスワーカー処理時間の計測 (`fetchStart` - `workerStart`)
* コンテンツが圧縮されていたかのチェック (`decodedBodySize` が `encodedBodySize` と同じにならない)
* ローカルキャッシュがヒットしたかどうかのチェック (`transferSize` が `0` になる)
* 最新の高速プロトコルが使用されているかどうかのチェック (`nextHopProtocol` が HTTP/2 または HTTP/3)
* リソースがレンダーブロッキングであることのチェック (`renderBlockingStatus`)
インスタンスプロパティ
-----------

### `PerformanceEntry` からの継承

このインターフェイスは、以下のように修飾し制約することによって、リソースパフォーマンス項目型の `PerformanceEntry` プロパティを拡張します。

`PerformanceEntry.duration` 読取専用

`timestamp` プロパティで `responseEnd` と `startTime` の差を返します。

`PerformanceEntry.entryType` 読取専用

`"resource"` を返します。

`PerformanceEntry.name` 読取専用

このリソースの URL を返します。

`PerformanceEntry.startTime` 読取専用

リソースのフェッチを始めた時刻の `timestamp` を返します。この値は `PerformanceResourceTiming.fetchStart` と等価です。

### タイムスタンプ

このインターフェイスは、以下のタイムスタンププロパティに対応しています。図に示すように、リソースのフェッチに記録される順番で掲載されています。アルファベット順の一覧は、左のナビゲーションに掲載されています。

![リソースのフェッチに記録された順にタイムスタンプを掲載しているタイムスタンプ図](/ja/docs/Web/API/PerformanceResourceTiming/timestamp-diagram.svg)

`PerformanceResourceTiming.redirectStart` 読取専用

リダイレクトを開始するフェッチの開始時刻を表す `DOMHighResTimeStamp` です。

`PerformanceResourceTiming.redirectEnd` 読取専用

最後のリダイレクトのレスポンスの最後のバイトを受信した直後の `DOMHighResTimeStamp` です。

`PerformanceResourceTiming.workerStart` 読取専用

サービスワーカースレッドが既に実行されている場合は `FetchEvent` を配信する直前、実行されていない場合はサービスワーカースレッドを始める直前の `DOMHighResTimeStamp` を返します。リソースがサービスワーカーに介入されない場合、このプロパティは常に 0 を返します。

`PerformanceResourceTiming.fetchStart` 読取専用

ブラウザーがリソースのフェッチを始める直前の `DOMHighResTimeStamp` です。

`PerformanceResourceTiming.domainLookupStart` 読取専用

ブラウザーがリソースのドメイン名検索を始める直前の `DOMHighResTimeStamp` です。

`PerformanceResourceTiming.domainLookupEnd` 読取専用

ブラウザーがリソースのドメイン名検索を完了した直後の時刻を表す `DOMHighResTimeStamp` です。

`PerformanceResourceTiming.connectStart` 読取専用

ブラウザーがリソースを取得するためにサーバーとの接続を始める直前の `DOMHighResTimeStamp` です。

`PerformanceResourceTiming.secureConnectionStart` 読取専用

ブラウザーが現在の接続を保護するためにハンドシェイク処理を開始する直前の `DOMHighResTimeStamp` です。

`PerformanceResourceTiming.connectEnd` 読取専用

ブラウザーがリソースを取得するためにサーバーとの接続を完了した直後の `DOMHighResTimeStamp` です。

`PerformanceResourceTiming.requestStart` 読取専用

ブラウザーがサーバーからリソースのリクエストを始める直前の `DOMHighResTimeStamp` です。

`PerformanceResourceTiming.responseStart` 読取専用

ブラウザーがサーバーからレスポンスの最初のバイトを受け取った直後の `DOMHighResTimeStamp` です。

`PerformanceResourceTiming.responseEnd` 読取専用

ブラウザーがリソースの最後のバイトを受信した直後、またはトランスポート接続が閉じられる直前の、どちらか早い方の `DOMHighResTimeStamp` です。

### 追加のリソース情報

さらに、このインターフェイスは、リソースに関するより詳細な情報を含む以下のプロパティを公開します。

`PerformanceResourceTiming.decodedBodySize` 読取専用

メッセージ本体のフェッチ（HTTPまたはキャッシュ）から受け取ったサイズ（オクテット単位）を表す数値で、適用されたコンテンツエンコーディングを削除した後の値です。

`PerformanceResourceTiming.encodedBodySize` 読取専用

フェッチ（HTTP またはキャッシュ）から受け取ったペイロード本体のサイズ（オクテット単位）を表す数値で、適用されたコンテンツエンコーディングを削除する前のものです。

`PerformanceResourceTiming.initiatorType` 読取専用

文字列で、パフォーマンス項目を開始したウェブプラットフォーム機能を表します。

`PerformanceResourceTiming.nextHopProtocol` 読取専用

文字列で、 ALPN プロトコル ID (RFC7301) によって識別される、リソースを取得するために使用されたネットワークプロトコルを表します。

`PerformanceResourceTiming.renderBlockingStatus` 読取専用

レンダーブロッキングの状態を表す文字列。"`blocking`" または "`non-blocking`" のどちらかです。

`PerformanceResourceTiming.responseStatus`
Experimental
 読取専用

リソースのフェッチ時に返される HTTP レスポンスステータスコードを表す数値です。

`PerformanceResourceTiming.transferSize` 読取専用

フェッチされたリソースのサイズ （オクテット単位）を表す数値。このサイズには、レスポンスヘッダーフィールドとレスポンスのペイロード本体が含まれます。

`PerformanceResourceTiming.serverTiming` 読取専用

サーバーのタイミングメトリクスを格納した `PerformanceServerTiming` (en-US) 項目の配列です。

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

`PerformanceResourceTiming.toJSON()`

この `PerformanceResourceTiming` オブジェクトの JSON 表現を返します。

例
-

### リソースのタイミング情報のログ出力

`PerformanceObserver` を使用した例です。このオブジェクトは、新しい `resource` パフォーマンス項目がブラウザーのパフォーマンスタイムラインに記録されると、それを通知します。オブザーバーが作成される前の項目にアクセスするために `buffered` オプションを使用します。

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

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

`Performance.getEntriesByType()` を使用した例です。このメソッドを呼び出した時点でブラウザー上のパフォーマンスタイムラインに存在する `resource` パフォーマンス項目のみを表示します。

```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  console.log(entry);
});
```

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

### オリジン間のタイミング情報

リソースタイミングプロパティの多くは、リソースがオリジン間リクエストであった場合に `0` または空文字列を返すよう制約されています。オリジン間のタイミング情報を見るためには、HTTP の `Timing-Allow-Origin` レスポンスヘッダーを設定する必要があります。

例えば、`https://developer.mozilla.org` にタイミングリソースを見ることを許可するには、オリジン間リソースで次のものを送信する必要があります。

```http
Timing-Allow-Origin: https://developer.mozilla.org
```

仕様書
---

| Specification |
| --- |
| Resource Timing # resources-included-in-the-performanceresourcetiming-interface |

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

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

関連情報
----

* リソースタイミング（概要）
* リソースタイミング API の使用


ピクチャインピクチャ API - Web API

ピクチャインピクチャ API
==============

**ピクチャインピクチャ API** (Picture-in-Picutre API) では、ウェブサイトが他のウィンドウの上に常に浮かぶ動画ウィンドウを作成し、ユーザーが他のコンテンツサイトや端末上のアプリケーションを操作しながらメディアを視聴し続けることができます。

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

`PictureInPictureWindow`

浮動動画ウィンドウを表します。これには `width` および `height`、そして `onresize` イベントハンドラープロパティがあります。

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

ピクチャインピクチャ API は、 `HTMLVideoElement` と `Document` インターフェイスにメソッドを追加し、浮動動画ウィンドウを切り替えられるようにします。

### HTMLVideoElement インターフェイスのインスタンスメソッド

`HTMLVideoElement.requestPictureInPicture()`

ユーザーエージェントが動画をピクチャインピクチャモードにするようリクエストします。

### Document インターフェイスのインスタンスメソッド

`Document.exitPictureInPicture()`

ユーザーエージェントがピクチャインピクチャモードの要素を元のボックスに返すようにリクエストします。

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

ピクチャインピクチャ API は、`HTMLVideoElement`、`Document`、`ShadowRoot` の各インターフェイスを拡張し、浮動動画ウィンドウモードに対応しているかどうか、利用できるかどうか、ピクチャインピクチャモードが現在有効かどうか、どの動画が浮動しているかを判断するために使用できるプロパティを提供します。

### HTMLVideoElement インターフェイスのインスタンスプロパティ

`HTMLVideoElement.disablePictureInPicture`

`disablePictureInPicture` プロパティは、ユーザーエージェントにピクチャインピクチャをユーザーに提案しない、または自動的にリクエストしないようにするヒントを提供します。

### Document インターフェイスのインスタンスプロパティ

`Document.pictureInPictureEnabled`

`pictureInPictureEnabled` プロパティはピクチャインピクチャモードが使用可能かどうかを指示します。何らかの理由でピクチャインピクチャモードが利用できない場合（例えば、`"picture-in-picture"` 機能が許可されていない、またはピクチャインピクチャモードに対応していない場合）は `false` となります。

### Document または ShadowRoot インターフェイスのインスタンスプロパティ

`Document.pictureInPictureElement` / `ShadowRoot.pictureInPictureElement`

`pictureInPictureElement` プロパティで、浮動ウィンドウ（またはシャドウ DOM）に現在表示されている要素 (`Element`) を伝えます。これが `null` である場合、文書（またはシャドウ DOM）内には現在ピクチャインピクチャモードになっているノードがありません。

イベント
----

*ピクチャインピクチャ API では 3 つのイベントを定義しており、ピクチャインピクチャモードが切り替わったときや、浮動要素であるウィンドウのサイズが変更されたことを検出するために利用できます。*

`enterpictureinpicture`

ピクチャインピクチャモードになったときに `HTMLVideoElement` に送られます。

`leavepictureinpicture`

ピクチャインピクチャモードから抜けるときに `HTMLVideoElement` に送られます。

`resize`

サイズ変更時に `PictureInPictureWindow` に送られます。

コントロールの追加
---------

メディアアクションハンドラーがメディアセッション API を介して設定されている場合、それらのアクションのための適切なコントロールがブラウザーによってピクチャインピクチャのオーバーレイに追加されます。例えば、 `"nexttrack"` アクションが設定されている場合、ピクチャインピクチャビューにスキップボタンが表示されるかもしれません。独自の HTML ボタンやコントロールを追加するための対応はありません。

スタイルの制御
-------

`:picture-in-picture` は CSS の擬似クラスで、現在ピクチャインピクチャモードになっている動画要素に一致します。これにより、動画がピクチャインピクチャモードと従来の表示モードを行き来するときに、コンテンツのサイズやスタイル、レイアウトを自動的に調整するようにスタイルシートを設定することができます。

アクセスの制御
-------

ピクチャインピクチャモードが利用できるかは、権限ポリシーを使って制御することができます。全画面モード機能は文字列 `"picture-in-picture"` で識別され、既定値の allowlist 値は `"self"` です。これは、ピクチャインピクチャモードが最上位の文書コンテキストで許可されることと、最上位の文書と同じオリジンから読み込まれた入れ子の閲覧コンテキストで許可されることを意味します。

例
-

この例では、ウェブページに動画を表示しています。下記のボタンをクリックすると、ユーザーは浮動動画ウィンドウを切り替えることができます。

### ピクチャインピクチャモードの切り替え

このコードは、ユーザーが "Toggle Picture-in-Picture" ボタンをクリックすると、 click ハンドラーから呼び出されます。

```js
function togglePictureInPicture() {
  if (document.pictureInPictureElement) {
    document.exitPictureInPicture();
  } else if (document.pictureInPictureEnabled) {
    video.requestPictureInPicture();
  }
}
```

このブロックは `document` の `pictureInPictureElement` 属性の値を見ていきます。

値が `null` でない場合、要素が現在ピクチャインピクチャモード、つまり浮動ウィンドウの中にあります。 `document.exitPictureInPicture()` を呼び出すと、動画を最初のボックスに戻ります。

値が `null` の場合、動画は浮動ウィンドウにありません。そこで、動画にピクチャインピクチャモードになるようリクエストします。そのためには、 `<video>` 要素で `HTMLVideoElement.requestPictureInPicture()` を呼び出します。

仕様書
---

| Specification |
| --- |
| Picture-in-Picture # interface-picture-in-picture-window |

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

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

関連情報
----

* `HTMLVideoElement.requestPictureInPicture()`
* `HTMLVideoElement.disablePictureInPicture`
* `Document.pictureInPictureEnabled`
* `Document.exitPictureInPicture()`
* `Document.pictureInPictureElement`
* `:picture-in-picture`


HTMLTableCellElement - Web API

HTMLTableCellElement
====================

**`HTMLTableCellElement`** インターフェイスは、（継承によって利用できる通常の `HTMLElement` インターフェイスに加えて）表のセル（見出しセル `<th>` またはデータセル `<td>`）のレイアウトを操作したり行を表したりするための特別なプロパティとメソッドを提供します。

EventTarget

Node

Element

HTMLElement

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

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

`HTMLTableCellElement.abbr`

文字列で、 `<th>` 要素上（`<td>` 上ではない）で使用可能であり、見出しセルの代替ラベルを指定します。この代替ラベルは、データセルに適用される見出しを記述するときなど、他のコンテキストで使用することができます。これは、特にスクリーンリーダーが使用するための短い用語を提供するために使用され、貴重なアクセシビリティツールとなります。通常、 `abbr` の値は省略形や頭字語ですが、文脈に応じて適切なテキストを指定することができます。

`HTMLTableCellElement.cellIndex` 読取専用

長整数値で、セルが含まれる `<tr>` の `cells` コレクション内での位置を表します。セルが `<tr>` に属さない場合は、 `-1` を返します。

`HTMLTableCellElement.colSpan`

符号なし整数で、このセルがまたがらなければならない列の数を示します。これは `colspan` 属性を反映したものです。

`HTMLTableCellElement.headers` 読取専用

`DOMTokenList` で、セルに関連する見出しを表す `<th>` 要素の `id` のリストです。これは `headers` 属性を反映したものです。

`HTMLTableCellElement.rowSpan`

符号なし整数で、このセルがまたがらなければならない行数を示します。これは `rowspan` 属性を反映したものです。

`HTMLTableCellElement.scope`

`<th>` セルのスコープを示す文字列です。見出しセルは `scope` プロパティを用いて、指定された行または列、あるいは現在の行グループ内のまだスコープされていないセル（つまり、同じ祖先の `<thead>`, `<tbody>`, `<tfoot>` 要素）に適用するように設定することが可能です。もし `scope` に何も値が指定されなければ、見出しはこの方法で直接セルと関連付けられることはありません。 `scope` に指定可能な値は以下の通りです。

`col`

見出しセルは同じ列（`colspan`が使われている場合は列）の続くセルに適用され、列の終わりか列内の別の `<th>` が新しいスコープを確立するまで適用されます。

`colgroup`

見出しセルは、現在の列グループ内の、まだスコープが適用されていないすべてのセルに適用される。この値は、セルが列グループ内にある場合にのみ許可されます。

`row`

見出しセルは、同じ行（`rowspan`が使われている場合は行）の続くセルに適用され、行の終わりか同じ行の別の `<th>` が新しいスコープを確立するまで適用されます。

`rowgroup`

見出しセルは、現在の行グループ内の、まだスコープが適用されていない全てのセルに適用される。この値は、セルが行グループの中にある場合にのみ許可される。

The empty string (`""`)

見出しセルは事前に定義された範囲を持ちません。ユーザーエージェントは文脈の手がかりに基づいて範囲を確立します。

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

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

非推奨のプロパティ
---------

**警告:** これらのプロパティは非推奨になっており、もう使用するべきではありません。これらは主に古いコードベースを理解しやすくすることを目的に文書化されています。

`HTMLTableCellElement.align`
非推奨

文字列で、 `align` 属性を反映した列挙値です。これは、周囲のコンテキストに対する要素の内容の整列を示す。指定できる値は `"left"`, `"right"`, `"center"` です。

`HTMLTableCellElement.axis`
非推奨

仮想的にセルをグループ化する名前を含む文字列。これは、廃止された `axis` 属性を反映しています。

`HTMLTableCellElement.bgColor`
非推奨

文字列で、セルの背景色です。これは、廃止された `bgColor` 属性を反映したものです。

`HTMLTableCellElement.ch`
非推奨

文字列で、 1 つの文字を含みます。この文字は、列の全てのセルを揃えるための文字です。これは `char` を反映し、既定では言語に関連付けられた小数点の値、例えば英語なら `'.'`、フランス語なら `','` となります。このプロパティはオプションであり、あまり対応されていませんでした。

`HTMLTableCellElement.chOff`
非推奨

文字列で、`HTMLTableCellElement.ch` で定義された文字の右側（左書きの場合。右書きの場合は左側）に何文字残さなければならないかを示す整数です。このプロパティはオプションであり、あまり対応されていませんでした。

`HTMLTableCellElement.height`
非推奨

文字列で、セルのヒントとなる高さのピクセル数が入ります。これは、廃止された `height` 属性を反映します。

`HTMLTableCellElement.noWrap`
非推奨

論理値で、 `nowrap` 属性を反映します。セルの内容が複数の行に分割できるかどうかを示します。

`HTMLTableCellElement.vAlign`
非推奨

文字列で、セルの内容がどのように垂直方向に配置されるかを示す列挙値です。これは `valign` 属性を反映しており、 `"top"`, `"middle"`, `"bottom"`, `"baseline"` のいずれかになります。

`HTMLTableCellElement.width`
非推奨

文字列で、可能であればセルが描画されるべきピクセル幅の数を指定します。このプロパティは、廃止された `width` 属性を反映します。代わりに CSS の `width` プロパティを使用してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmltablecellelement |

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

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

関連情報
----

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


CSSTransformValue - Web API

CSSTransformValue
=================

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

**`CSSTransformValue`** は CSS 型付きオブジェクトモデルのインターフェイスで、 CSS の `transform` プロパティで使用される `transform-list` の値を表します。

CSSStyleValue

CSSTransformValueCSSTransformValue を継承しているインターフェイス
---------------------------------

以下のリストは `CSSTransformValue` インターフェイスを継承しているインターフェイスの一覧です。

* `CSSTranslate` (en-US)
* `CSSRotate` (en-US)
* `CSSScale` (en-US)
* `CSSSkew`
* `CSSSkewX` (en-US)
* `CSSSkewY` (en-US)
* `CSSPerspective` (en-US)
* `CSSMatrixComponent` (en-US)
コンストラクター
--------

`CSSTransformValue()`
Experimental

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

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

`CSSTransformValue.length` 読取専用
Experimental

`CSSTransformValue` に格納されている座標変換コンポーネントの数を返します。

`CSSTransformValue.is2D` 読取専用
Experimental

変換が 2D か 3D かを示す論理値を返します。

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

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

`CSSTransformValue.toMatrix()`
Experimental

新しい `DOMMatrix` オブジェクトを返します。

`CSSUnparsedValue.entries()`
Experimental

指定されたオブジェクト自身で列挙可能なプロパティ `[key, value]` のペアを、 `for...in` ループが提供するのと同じ順序で配列にして返します（for-in ループはプロトタイプチェーン内のプロパティも同様に列挙する点が異なります）。

`CSSUnparsedValue.forEach()`
Experimental

指定された関数を `CSSTransformValue` オブジェクトの各要素に対して一度だけ実行します。

`CSSUnparsedValue.keys()`
Experimental

CSSTransformValue` オブジェクトの各インデックスに対応するキーを格納した新しい *配列イテレーター* オブジェクトを返します。

`CSSUnparsedValue.values()`
Experimental

`CSSTransformValue` オブジェクトの個々の位置に対応する値を格納した新しい *配列イテレーター* オブジェクトを返します。

例
-

To Do.

仕様書
---

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

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

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


CSS フォント読み込み API - Web API

CSS フォント読み込み API
================

CSS フォント読み込み API は、フォントリソースを動的に読み込むためのイベントとインターフェイスを提供します。

**メモ:** この機能はウェブワーカーで利用できます（`self.fonts` が`FontFaceSet` にアクセスする機能を提供します）。

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

 CSSスタイルシートでは、カスタムフォントを使用することができます。 `@font-face` ルールでダウンロードするフォントを指定し、 `font-family` プロパティで要素に適用します。
 フォントがダウンロードされるこの点は、ユーザーエージェントによって制御されます。
 ほとんどのエージェントは、フォントが最初に必要になったときだけ取得して読み込むため、知覚できるほどの遅延が生じることがあります。

 CSS フォント読み込み API は、フォントフェイスがいつ取得され読み込まれ、いつ文書やワーカーが設定するフォントフェイス集合に追加されるかを制御し追跡することで、この問題を克服します。
 フォントフェイスを文書やワーカーのフォントフェイス集合に追加することで、ユーザーエージェントは必要に応じて関連するフォントリソースを自動的に取得し読み込むことができます。
 フォントフェイスは、フォントフェイス集合に追加される前でも後でも読み込むことができますが、描画に使用する前に必ず設定するには追加しなければなりません。

 フォントフェイスは`FontFace`オブジェクトで定義します。このオブジェクトは CSS `@font-face` ルールとほぼ同じ方法で、バイナリーまたは URL フォントのソースとフォントの他のプロパティを指定します。
 `FontFace` オブジェクトは、 `Document.fonts` と `WorkerGlobalScope.fonts` を使用してそれぞれ文書またはワーカー `FontFaceSet` に追加されます。
 作者は `FontFace` または `FontFaceSet` を使用してフォントのダウンロードを起動し、読み込み完了を監視することができます。
 `FontFaceSet` を使用すると、さらに、ページで必要なすべてのフォントが読み込まれ、文書レイアウトが完了したときに判断することができます。

`FontFace.status` プロパティは、フォントフェイスの読み込みステータスを示します。 `unloaded`、`loading`、`loaded`、`failed` のいずれかです。
 ステータスは最初は `unloaded` です。
 このステータスは、ファイルがダウンロードされているときやフォントデータが処理されているときには `loading` に設定され、フォント定義が不正なときやフォントデータを読み込むことができないときには `failed` に設定されます。
 フォントフェイスデータが（必要であれば）正常に取得され、読み込まれた場合、ステータスは `loaded` に設定されます。

### フォントフェイスの定義

 フォントフェイスは `FontFace` コンストラクター を使用して作成します。コンストラクターは引数としてフォントファミリー、フォントソース、オプションの記述子を取ります。
 これらの引数の書式と文法は、同等の `@font-face` 定義と同じです。

 フォントソースは `ArrayBuffer` に入ったバイナリーデータでも、フォントリソースの URL でもかまいません。
 URL ソースを使用する典型的なフォントフェイス定義は下記のようになります。
 URL フォントソースには `url()` 関数が要求されることに注意してください。

```js
const font = new FontFace("myfont", "url(myfont.woff)", {
  style: "italic",
  weight: "400",
  stretch: "condensed",
});
```

**メモ:** `font-face` と同様に、いくつかの記述子はフォントデータ中の期待されるデータを表し、フォントの照合に用いられますが、他にも実際に生成されるフォントフェイスのプロパティを設定/定義するものもあります。
 例えば、`style`を "italic" に設定すると、そのファイルにイタリック体のフォントが含まれていることを示します。これが真となるファイルを指定するかどうかは作者次第です。

 バイナリーソースによるフォントフェイスは、フォント定義が有効でフォントデータを読み込むことができれば自動的に読み込まれます。 `FontFace.status` は、成功すれば `loaded`、そうでなければ `failed` に設定されます
 URL をソースとするフォントフェイスは検証されますが、自動的には読み込まれません。`FontFace.status` は、フォントフェイス定義が有効であれば `unloaded` に設定し、そうでなければ `failed` に設定します。

### 文書やワーカーへのフォントの追加

フォントフェイスは通常、ユーザーエージェントが必要なときに自動的にフォントを読み込むことができるように、文書またはワーカー `FontFaceSet` に追加され、テキストをレンダリングするためにフォントを使用するためには追加する必要があります。

下記のコードは、フォントフェイスが文書に追加されていることを示しています。

```js
// フォントフェイスを定義
const font = new FontFace("myfont", "url(myfont.woff)", {
  style: "italic",
  weight: "400",
  stretch: "condensed",
});

// document.fonts (FontFaceSet) に追加
document.fonts.add(font);
```

### フォントの読み込み

 フォントフェイスは、`FontFace.load()` を呼び出して手動で読み込むこともできますし、フォントフェイスが `FontFaceSet` に追加されている場合は `FontFaceSet.load()` を呼び出して読み込むこともできます。
 すでに読み込まれているフォントを読み込もうとしても何の効果もないことに注意してください。

下記コードは、フォントフェイスを定義し、それを文書内のフォントに追加し、そしてフォントの読み込みを開始する方法を示しています。

```js
// フォントフェイスを定義
const font = new FontFace("myfont", "url(myfont.woff)");

// document.fonts (FontFaceSet) に追加
document.fonts.add(font);

// フォントの読み込み
font.load();

// すべてのフォントが読み込まれるまで待つ
document.fonts.ready.then(() => {
  // テキストをレンダリングするためにフォントを使用（例えばキャンバスなどで）
});
```

 なお、 `font.load()` はプロミスを返すので、その後に `then` を連鎖させることで、フォント読み込みの完了を処理することもできます。
 `document.fonts.ready` を使用することができます。文書内のすべてのフォントが解決され、レイアウトが完了したときにのみ呼び出されるからです。

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

`FontFace`

使用可能な単一のフォントフェイスを表します。

`FontFaceSet`

フォントフェイスを読み込み、ダウンロード状態をチェックするインターフェイスです。

`FontFaceSetLoadEvent`

`FontFaceSet` を読み込むたびに発行されます。

例
-

### 基本的なフォントの読み込み

 この例はとても単純で、Google Fonts からフォントを読み込ませ、キャンバスにテキストを描画するために使用することを示しています。
 この例では、作成直後と読み込み後の `status` もログ出力しています。

#### HTML

このコードでは、描画するためのキャンバスと、ログ出力するためのテキストエリアを定義しています。

```html
<canvas id="js-canvas"></canvas>
<textarea id="log" rows="3" cols="100"></textarea>
```

#### JavaScript

最初に、ログ出力する要素と、ダウンロードしたフォントでテキストをレンダリングするために使用するキャンバスを取得します。

```js
const log = document.getElementById("log");

const canvas = document.getElementById("js-canvas");
canvas.width = 650;
canvas.height = 75;
```

 次に、 `FontFace` を定義して URL ソースを Google Font とし、 `document.fonts` に追加します。
 そして、フォントのステータスをログ出力します。 `unloaded` になっているはずです。

```js
const bitterFontFace = new FontFace(
  "FontFamily Bitter",
  "url(https://fonts.gstatic.com/s/bitter/v7/HEpP8tJXlWaYHimsnXgfCOvvDin1pK8aKteLpeZ5c0A.woff2)",
);
document.fonts.add(bitterFontFace);
log.textContent += `Bitter font: ${bitterFontFace.status}\n`; // > Bitter font: unloaded
```

 次に、 `FontFace.load()` メソッドを呼び出してフォントフェイスを読み込み、返されるプロミスを待ちます。
 プロミスが解決したら、読み込んだステータスをログ出力し（`loaded` になっているはず）、読み込んだフォントでテキストをキャンバスで描画します。

```js
bitterFontFace.load().then(
  () => {
    log.textContent += `Bitter font: ${bitterFontFace.status}\n`; // > Bitter font: loaded

    const ctx = canvas.getContext("2d");
    ctx.font = '36px "FontFamily Bitter"';
    ctx.fillText("Bitter font loaded", 20, 50);
  },
  (err) => {
    console.error(err);
  },
);
```

なお、 `FontFace.loaded` プロパティが返すプロミス、または `FontFaceSet.ready` を待つこともできます。

#### メモ

 結果は下記のように表示されます。
 ダウンロードしたフォントでキャンバスに描画されたフォント名と、読み込む前と後の読み込み状況を示すログが表示されているはずです。

### フォントの読み込みとイベント

 この例は前回のものと似ていますが、 `FontFaceSet.load()` を使用してフォントを読み込んでいる点が異なります。
 また、フォントの読み込みイベントを待ち受けする方法も示しています。

#### HTML

```html
<canvas id="js-canvas"></canvas>
<textarea id="log" rows="25" cols="100"></textarea>
```

#### JavaScript

下記のコードでは、テキストを描画するためのキャンバスコンテキストを定義し、フォントフェイスを定義し、それを文書内のフォントフェイス集合に追加しています。

```js
const log = document.getElementById("log");

const canvas = document.getElementById("js-canvas");
canvas.width = 650;
canvas.height = 75;
const ctx = canvas.getContext("2d");

const oxygenFontFace = new FontFace(
  "FontFamily Oxygen",
  "url(https://fonts.gstatic.com/s/oxygen/v5/qBSyz106i5ud7wkBU-FrPevvDin1pK8aKteLpeZ5c0A.woff2)",
);
document.fonts.add(oxygenFontFace);
log.textContent += `Oxygen status: ${oxygenFontFace.status}\n`;
```

 次に、フォントフェイス集合に対して `load()` を使用し、読み込むフォントを指定します。
 このメソッドは `Promise` を返します。
 プロミスが解決された場合、そのフォントを使用してテキストを描画します。
 拒否された場合はエラーがログ出力されます。

```js
document.fonts.load("36px FontFamily Oxygen").then(
  (fonts) => {
    log.textContent += `Bitter font: ${fonts}\n`; // > Oxygen font: loaded
    log.textContent += `Bitter font: ${oxygenFontFace.status}\n`; // > Oxygen font: loaded
    ctx.font = '36px "FontFamily Oxygen"';
    ctx.fillText("Oxygen font loaded", 20, 50);
  },
  (err) => {
    console.error(err);
  },
);
```

 プロミスを待つ代わりに、イベントを使用してフォントの読み込み処理を追跡することもできます。
 下記のコードは `loading` イベントと `loadingerror` イベントを待ち受け、それぞれの場合のフォントフェイスの数をログ出力しています。
 loadingdone`イベントリスナーでは、さらにフォントフェイスを反復処理し、ファミリー名をログ出力しています。

```js
document.fonts.addEventListener("loading", (event) => {
  log.textContent += `loading\_event: ${event.fontfaces.length}\n`;
});
document.fonts.addEventListener("loadingerror", (event) => {
  log.textContent += `loadingerror\_event: ${event.fontfaces.length}\n`;
});
document.fonts.addEventListener("loadingdone", (event) => {
  log.textContent += `loadingdone\_event: ${event.fontfaces.length}\n`;
  event.fontfaces.forEach((value) => {
    log.textContent += ` fontface: ${value.family}\n`;
  });
});
```

 最後のコードは、 `FontFaceSet.ready` が返すプロミスを使用して、フォントの読み込み完了を監視する方法を示しています。
 他のメカニズムとは異なり、これは文書内の定義するフォントがすべてダウンロードされ、レイアウトが完了したときに返します。

プロミスが解決すると、文書内のフォントフェイスの値を反復処理します。

```js
document.fonts.ready.then(function () {
  log.textContent += `\nFontFaces in document: ${document.fonts.size}.\n`;

  for (const fontFace of document.fonts.values()) {
    log.textContent += "FontFace:\n";
    for (const property in fontFace) {
      log.textContent += ` ${property}: ${fontFace[property]}\n`;
    }
  }
});
```

#### 結果

 下記の出力では "Oxygen "フォントで描画したテキストを表示しています。
 また、イベントからのログ出力と、 `document.fonts.ready` が返すプロミスが解決するタイミングも示しています。

仕様書
---

| Specification |
| --- |
| CSS Font Loading Module Level 3 # fontface-interface |

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

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


BaseAudioContext - Web API

BaseAudioContext
================

`BaseAudioContext` はウェブオーディオ API のインターフェイスで、 `AudioContext` と `OfflineAudioContext` で表されるオンラインとオフラインのオーディオ処理グラフの基本定義として動作します。 `BaseAudioContext` を直接使用することはありません。これらの 2 つの継承されたインターフェースのいずれかを介して、その機能を使用することになります。

`BaseAudioContext` はイベントのターゲットとなることができるので、 `EventTarget` インターフェイスを実装しています。

EventTarget

BaseAudioContextプロパティ
-----

`BaseAudioContext.audioWorklet`
Experimental
 読取専用  安全なコンテキスト用

`AudioWorklet` オブジェクトを返します。これは `AudioNode` を JavaScript コードで作成および管理するために使用することができ、 `AudioWorkletProcessor` インターフェイスを実装していて、バックグラウンドで実行して音声データを処理することができます。

`BaseAudioContext.currentTime` 読取専用

スケジューリングに使用される秒単位で増加するハードウェア時間を表す倍精度浮動小数点値を返します。 `0` から始まります。

`BaseAudioContext.destination` 読取専用

このコンテキストですべての音声の最終的な出力先を表す `AudioDestinationNode` を返します。 オーディオレンダリングデバイスと考えることができます。

`BaseAudioContext.listener` 読取専用

三次元空間化に使用される `AudioListener` オブジェクトを返します。

`BaseAudioContext.sampleRate` 読取専用

このコンテキスト内のすべてのノードで使用されるサンプリングレート（サンプル/秒）を単精度浮動小数点値で返します。 `AudioContext` のサンプリングレートを変更することはできません。

`BaseAudioContext.state` 読取専用

現在の `AudioContext` の状態を返します。

### イベント

`statechange`

状態変化メソッド（`AudioContext.suspend`, `AudioContext.resume`, `AudioContext.close`）のいずれかが呼ばれたことによって `AudioContext` の状態が変化したときに発生します。

メソッド
----

*`EventTarget` インターフェイスから継承しているメソッドもあります。*

`BaseAudioContext.createAnalyser()`

`AnalyserNode` を作成します。これは音声の時間と周波数データを公開し、データの可視化などに利用できます。

`BaseAudioContext.createBiquadFilter()`

`BiquadFilterNode` (en-US) を作成します。これはハイパス、ローパス、バンドパスなどの一般的なフィルター型として設定可能な 2 次フィルターを表します。

`BaseAudioContext.createBuffer()`

新しい空の `AudioBuffer` オブジェクトを作成します。これにデータを入力して `AudioBufferSourceNode` で再生できます。

`BaseAudioContext.createBufferSource()`

`AudioBufferSourceNode` を作成します。これは `AudioBuffer` オブジェクトに含まれる音声データを再生または操作するために使用することができます。 `AudioBuffer` は `AudioContext.createBuffer()` によって生成されるか、オーディオトラックのデコードに成功すると `AudioContext.decodeAudioData()` によって返されます。

`BaseAudioContext.createConstantSource()`

`ConstantSourceNode` オブジェクトを作成します。これはすべてのサンプルが同じ値を持つモノラル（1 チャンネル）音声信号を連続的に出力する音声ソースです。

`BaseAudioContext.createChannelMerger()`

`ChannelMergerNode` を作成します。これは複数の音声ストリームのチャンネルを 1 つの音声ストリームに結合するために使用します。

`BaseAudioContext.createChannelSplitter()`

`ChannelSplitterNode` を作成します。これは音声ストリームの個々のチャンネルにアクセスし、それらを個別に処理するために使用されます。

`BaseAudioContext.createConvolver()`

`ConvolverNode` を作成します。これはオーディオグラフにコンボリューション効果（残響効果など）を適用するために使用されます。

`BaseAudioContext.createDelay()`

`DelayNode` を作成します。これは入力される音声信号を一定時間遅延させるために使用します。このノードは、ウェブオーディオ API グラフでフィードバックループを作成する際にも便利です。

`BaseAudioContext.createDynamicsCompressor()`

`DynamicsCompressorNode` (en-US) を作成します。これは音声信号に音響圧縮をかけるために使用します。

`BaseAudioContext.createGain()`

`GainNode` を作成します。これはオーディオグラフの全体的な音量を制御するために使用することができます。

`BaseAudioContext.createIIRFilter()`

`IIRFilterNode` を作成します。これは複数の異なる一般的なフィルター種別として設定可能な二次フィルタを表します。

`BaseAudioContext.createOscillator()`

`OscillatorNode` を作成します。これは周期的な波形を表すソースです。基本的には音程を生成します。

`BaseAudioContext.createPanner()`

`PannerNode` を作成します。これは入力されるオーディオストリームを三次元空間で空間化するために使用されます。

`BaseAudioContext.createPeriodicWave()`

`PeriodicWave` を作成します。これは、`OscillatorNode` の出力を決定するために使用できる、周期的な波形を定義するために使用します。

`BaseAudioContext.createScriptProcessor()`
非推奨

`ScriptProcessorNode` を作成します。これは JavaScript で直接音声処理を行うために使用します。

`BaseAudioContext.createStereoPanner()`

`StereoPannerNode` を作成します。これは音声ソースにステレオパニングを適用するために使用することができます。

`BaseAudioContext.createWaveShaper()`

非線形歪み効果を実装するために使用される `WaveShaperNode` (en-US) を作成します。

`BaseAudioContext.decodeAudioData()`

`ArrayBuffer` に格納された音声ファイルのデータを非同期にデコードします。この場合、 `ArrayBuffer` は通常 `XMLHttpRequest` の `response` 属性に `responseType` を設定した後に読み込まれます。このメソッドは完全なファイルに対してのみ動作し、音声ファイルの断片に対しては動作しません。

例
-

基本的なオーディオコンテキストの宣言:

```js
const audioContext = new AudioContext();
```

クロスブラウザー対応の変化形:

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

const oscillatorNode = audioContext.createOscillator();
const gainNode = audioContext.createGain();
const finish = audioContext.destination;
```

仕様書
---

| Specification |
| --- |
| Web Audio API # BaseAudioContext |

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

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

関連情報
----

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


Background Fetch API - Web API

Background Fetch API
====================

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

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

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

**Background Fetch API** は、動画や音声ファイル、ソフトウェアのような、時間のかかるダウンロードをうまく処理するためのメソッドを提供します。

概要と用途
-----

ウェブアプリケーションがユーザーに大きなファイルをダウンロードさせる必要があるとき、よく起きる問題として、ユーザーがダウンロードの完了までページに接続し続けなければならないという問題があります。接続が切れたり、タブを閉じたり、ページを離れたりすると、ダウンロードは中止されてしまいます。

`Background Synchronization API` (en-US) を用いて、ユーザーが接続されるまでサービスワーカーに処理を延期させることができますが、この方法は大容量ファイルのダウンロードのような時間のかかる処理には使えません。バックグラウンド同期は、フェッチが完了するまでサービスワーカーが生き続ける必要がありますが、ブラウザーはバッテリーの寿命を長持ちさせるため、また、バックグラウンドで不要なタスクが発生することを防ぐために、途中でタスクを終了させてしまうでしょう。

Background Fetch API はこの問題を解決します。たとえば、ユーザーが動画をダウンロードするためのボタンをクリックしたときなどに、ウェブ開発者はブラウザーにバックグラウンドでフェッチを行うよう指示できるようになります。指示が行われると、ブラウザーはユーザーに見える形でフェッチを実行します。(ユーザーに進捗状況を表示し、ユーザーはダウンロードをキャンセルすることもできます。)ダウンロードが完了すると、ブラウザーはサービスワーカーを開きます。この時点で、アプリケーションは必要に応じて応答を処理できます。

Background Fetch API は、ユーザーがプロセスをオフラインで開始した場合にも、フェッチの発生を可能にします。一旦接続されると、処理が開始されます。ユーザーがオフラインになると、再びオンラインになるまでプロセスは一時停止します。

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

`BackgroundFetchManager`

キーが background fetch のIDで、値が `BackgroundFetchRegistration` のオブジェクトのマップ。

`BackgroundFetchRegistration`

Background Fetch を表します。

`BackgroundFetchRecord`

個々のフェッチ要求と応答を表します。

`BackgroundFetchEvent`

`onbackgroundfetchabort` と `onbackgroundfetchclick` に渡されるイベント型。

`BackgroundFetchUpdateUIEvent`

`onbackgroundfetchsuccess` と `onbackgroundfetchfail` に渡されるイベント型。

例
-

Background Fetch を使用する前に、ブラウザーで利用可能か確認しましょう。

```js
if (!("BackgroundFetchManager" in self)) {
  // 代わりのダウンロード方法を用意してください。
}
```

Background Fetch の使用には登録済みのサービスワーカーが必要となります。そして、 `backgroundFetch.fetch()` を呼び出してフェッチを実行します。これは `BackgroundFetchRegistration` で解決されるプロミスを返します。

バックグラウンドフェッチは、複数のファイルをフェッチすることができます。下記の例では、フェッチは MP3 ファイルと JPEG ファイルをリクエストします。このことは、ユーザーが 1 つのアイテムとして見ている、複数ファイルで構成されたパッケージ (たとえば、 podcast とアートワーク) を一度にダウンロードすることを可能にします。

```js
navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.fetch(
    "my-fetch",
    ["/ep-5.mp3", "ep-5-artwork.jpg"],
    {
      title: "Episode 5: Interesting things.",
      icons: [
        {
          sizes: "300x300",
          src: "/ep-5-icon.png",
          type: "image/png",
        },
      ],
      downloadTotal: 60 \* 1024 \* 1024,
    },
  );
});
```

Background Fetch を実装したデモアプリは こちら 。

仕様書
---

| Specification |
| --- |
| Background Fetch  |

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

### api.BackgroundFetchManager

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

### api.BackgroundFetchRegistration

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

### api.BackgroundFetchRecord

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

関連情報
----

* Introducing Background Fetch
* Background Fetch - HTTP 203


ANGLE_instanced_arrays - Web API

ANGLE\_instanced\_arrays
========================

**`ANGLE_instanced_arrays`** 拡張機能は WebGL API の一部であり、同じ頂点データ、プリミティブカウント、およびタイプを共有している同じオブジェクトまたは同様のオブジェクトのグループを複数回描画することができます。

WebGL 拡張機能は `WebGLRenderingContext.getExtension()` (en-US) メソッドを使用することで利用できるようになります。詳しくは、 WebGL チュートリアル の 拡張機能の使用も参照してください。

**メモ:** この拡張機能は WebGL1 のコンテキストでのみ利用可能です。 WebGL2 (en-US) のコンテキストでは、この機能は既定で使用することができ、定数やメソッドは "`ANGLE`" 接尾辞なしで使用することができます。

"ANGLE" という名前ですが、この拡張機能は ANGLE ライブラリーを使用していれば、 Windows でなくてもハードウェアが対応していればあらゆる端末で動作します。 "ANGLE" は単に、この拡張機能が ANGLE ライブラリーの作者によって書かれたことを示しているだけです。

定数
--

この拡張機能は新しい定数を公開します。これは `gl.getVertexAttrib()` (en-US) メソッドで使用することができます。

`ext.VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE`

`GLint` で、 `gl.getVertexAttrib()` (en-US) で `pname` 引数として使用されたときにインスタンス化されたレンダリングに用いられる序数を記述したものを返します。

メソッド
----

この拡張機能は 3 つの新しいメソッドを公開します。

`ext.drawArraysInstancedANGLE()` (en-US)

`gl.drawArrays()` と同様に動作しますが、要素の範囲の複数のインスタンスが実行され、反復ごとにインスタンスが進む点が異なります。

`ext.drawElementsInstancedANGLE()` (en-US)

`gl.drawArrays()` と同様に動作しますが、要素のセットの複数のインスタンスが実行され、各セット間でインスタンスが進む点が異なります。

`ext.vertexAttribDivisorANGLE()` (en-US)

プリミティブの複数のインスタンスを `ext.drawArraysInstancedANGLE()` (en-US) および `ext.drawElementsInstancedANGLE()` (en-US) で描画する際に一般頂点属性が進む速度を変更します。

例
-

次の例は、与えられた図形を 1 回の draw 呼び出しで複数回描画する方法です。

**警告:** 以下は教育的なものであり、製品レベルのコードではありません。レンダリングループ内や使用直前にデータ/バッファを構築することは、一般的に避けるべきです。

```js
// 拡張機能を有効化
const ext = gl.getExtension("ANGLE\_instanced\_arrays");

// 通常通りに図形バッファーを関連付ける
gl.bindBuffer(gl.ARRAY\_BUFFER, geometryVertexBuffer);
gl.enableVertexAttribArray(vertexPositionAttributeLocation);
gl.vertexAttribPointer(
  vertexPositionAttributeLocation,
  3,
  gl.FLOAT,
  false,
  0,
  0,
);

// 位置バッファーを構築
const instancePositions = [];
for (const instance of instances) {
  instancePositions.push(
    instance.position.x,
    instance.position.y,
    instance.position.z,
  );
}
const instancePositionBuffer = createWebGLBufferFromData(instancePositions);

// 他の属性と同様に、このインスタンスと位置バッファーを関連付け
gl.bindBuffer(gl.ARRAY\_BUFFER, instancePositionBuffer);
gl.enableVertexAttribArray(instancePositionAttributeLocation);
gl.vertexAttribPointer(
  instancePositionAttributeLocation,
  3,
  gl.FLOAT,
  false,
  0,
  0,
);

// 属性をインスタンスとしてマークし、すべての頂点ではなく、それぞれ（1 つ）のインスタンスを進めます。
ext.vertexAttribDivisorANGLE(instancePositionAttributeLocation, 1);

// それぞれのインスタンスについて、図形を描画します。
ext.drawArraysInstancedANGLE(
  gl.TRIANGLES,
  0,
  numGeometryVertices,
  instances.length,
);
```

仕様書
---

| Specification |
| --- |
| WebGL ANGLE\_instanced\_arrays Khronos Ratified Extension Specification  |

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

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

関連情報
----

* `WebGLRenderingContext.getExtension()` (en-US)
* `WebGL2RenderingContext.drawArraysInstanced()` (en-US)
* `WebGL2RenderingContext.drawElementsInstanced()` (en-US)
* `WebGL2RenderingContext.vertexAttribDivisor()` (en-US)