recursal/MDN huggingface dataset:
PaymentRequest: id プロパティ
========================

**`id`** は `PaymentRequest` インターフェイスの読み取り専用プロパティで、特定の `PaymentRequest` インスタンスに固有の識別子を返します。

`PaymentRequest` のインスタンスを構築する際に、独自の id を指定することが可能です。指定されなかった場合、ブラウザーは自動的に id 値を UUID に設定します。

例
-

この例は、`PaymentRequest` インスタンスに独自の ID を付与する方法を示します。


```js
const details = {
  id: "super-store-order-123-12312",
  total: {
    label: "Total due",
    amount: { currency: "USD", value: "65.00" },
  },
};
const request = new PaymentRequest(methodData, details);
console.log(request.id); // super-store-order-123-12312
```


 The `id` is then also available in the `PaymentResponse` (en-US)
 returned from the `show()` method, but under the `requestId`
 attribute.


```js
const response = await request.show();
console.log(response.requestId === request.id);

// And in serialized form too
const json = response.toJSON();
console.log(json.requestId, response.requestId, request.id);
```

値
-

文字列です。

仕様書
---

| Specification |
| --- |
| Payment Request API 1.1 # dom-paymentrequest-id |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PaymentRequest: merchantvalidation イベント
=======================================

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

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

**`merchantvalidation`** イベントは決済リクエスト API によって、決済ハンドラーが、購入をリクエストされた販売者が、決済ハンドラーを使用することが許可されていることを確認することを要求する場合に `PaymentRequest` オブジェクトへ配信されます。

どのように販売者検証のプロセスが動作するのかを知ってください。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("merchantvalidation", (event) => {});

onmerchantvalidation = (event) => {};
```

イベント型
-----

`MerchantValidationEvent` (en-US) です。`Event` から継承しています。

イベントプロパティ
---------

`MerchantValidationEvent.methodName` (en-US) 安全なコンテキスト用

検証を必要とする決済ハンドラーの固有の決済手段識別子を提供する文字列です。これは標準の決済ハンドラーの識別子文字列か、`https://apple.com/apple-pay` のような決済ハンドラーを識別しリクエストを処理するURLのいずれかである可能性があります。

`MerchantValidationEvent.validationURL` (en-US) 安全なコンテキスト用

サイトやアプリが決済ハンドラー固有の検証情報を取得するための URL を指定する文字列です。このデータを取得したら、そのデータ（または検証データを解決するプロミス）を `complete()` (en-US) に渡して、決済リクエストが認可された販売者から来ていることを検証しなければなりません。

例
-

この例では、`mercantvalidation` イベントに対してイベントハンドラーを確立している。これは `fetch()` を用いて、イベントの `validationURL` (en-US) プロパティから取得した決済手段の検証用 URL を引数に持つリクエストを自分自身でサーバーに送信します。販売者サーバーは、決済手段のドキュメント内の検証 URL にアクセスする必要があります。通常、クライアントは検証 URL にアクセスすべきではありません。


```js
request.addEventListener("merchantvalidation", (event) => {
  event.complete(async () => {
    const merchantServerUrl = `${
 window.location.origin
 }/validate?url=${encodeURIComponent(event.validationURL)}`;
    // get validation data, and complete validation;
    return await fetch(merchantServerUrl).then((response) => response.text());
  }, false);
});

const response = await request.show();
```


販売者サーバーがどのように検証を処理するかは、サーバーの実装と決済手段のドキュメントに依存します。検証サーバーから配信されたコンテンツは販売者サーバーに転送され、`fetch()` 呼び出しの履行ハンドラーからイベントの `complete()` (en-US) メソッドに返されます。このレスポンスにより、決済ハンドラーは販売者が検証されたかどうかを知ることができます。

また、`onmerchantvalidation` イベントハンドラプロパティを使用して、このイベントのハンドラーを設定することができます。


```js
request.onmerchantvalidation = (event) => {
  event.complete(async () => {
    const merchantServerUrl = `${
 window.location.origin
 }/validate?url=${encodeURIComponent(event.validationURL)}`;
    // get validation data, and complete validation;
    return await fetch(merchantServerUrl).then((response) => response.text());
  });
};

const response = await request.show();
```


詳しくは、販売者検証を参照してください。

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

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

関連情報
----

* 決済リクエスト API
* 決済リクエスト API の使用
* `onmerchantvalidation` イベントハンドラープロパティ
* 販売者検証
* `PaymentRequest`
* `payerdetailchange` イベント
* `paymentmethodchange` イベント
* `shippingaddresschange` イベント
* `shippingoptionchange` イベント
PaymentRequest: shippingaddresschange イベント
==========================================

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

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

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

**`shippingaddresschange`** イベントは、ユーザーが配送先を選択したとき、または配送先の詳細を変更したときに `PaymentRequest` オブジェクトに送られます。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("shippingaddresschange", (event) => {});

onshippingaddresschange = (event) => {};
```

イベント型
-----

`PaymentRequestUpdateEvent` です。`Event` から継承しています。

Event

PaymentRequestUpdateEventイベントプロパティ
---------

*`Event` から継承したプロパティのみを提供しています。*

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

ブラウザーによっては、プライバシー保護のため、配送先情報が編集される場合があります。つまり、配送先住所を含む `PaymentAddress` は、ユーザーの同意なしにユーザーを特定できないようにするために、そのコンテンツの一部が変更、不明瞭化、または完全に削除されることがあります（ユーザーが商品を発送することを選んだ場合は、その住所が必要になるため）。

例
-

この例では、`shippingaddresschange` イベントのハンドラーを設定して、住所がウェブアプリケーションが設定した要件を満たしているかどうかを検証しています。


```js
const paymentRequest = new PaymentRequest(methodData, details, options);

paymentRequest.addEventListener(
  "shippingaddresschange",
  (event) => {
    let detailsUpdate = checkAddress(paymentRequest.shippingAddress);
    event.updateWith(detailsUpdate);
  },
  false,
);

const checkAddress = (theAddress) => {
  let detailsUpdate = {};

  // Check the address, return an object with any changes or errors.

  return detailsUpdate;
};
```


`shippingaddresschange` のハンドラーは、`onshippingaddresschange` イベントハンドラープロパティを用いて確立することもできます。


```js
paymentRequest.onshippingaddresschange = (event) => {
  let detailsUpdate = checkAddress(paymentRequest.shippingAddress);
  event.updateWith(detailsUpdate);
};
```

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PaymentRequest: shippingAddress プロパティ
=====================================

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

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

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

**`shippingAddress`** は `PaymentRequest` インターフェイスの読み取り専用プロパティで、ユーザーから指定された配送先住所を返します。既定値は `null` です。

値
-

 一般的に、ユーザーエージェントは `shippingAddress` プロパティ値を埋めます。
 これは、`PaymentRequest`コンストラクターを呼び出すときに `PaymentOptions.requestShipping` を `true` に設定することで行うことができます。

例
-

下記の例では、送料が地域によって異なります。`shippingaddresschange` が呼び出されると、`updateDetails()` が呼び出されて `PaymentRequest` の詳細を更新し、`shippingAddress` を使用して正しい送料を設定します。


```js
// Initialization of PaymentRequest arguments are excerpted for the sake of
// brevity.
const payment = new PaymentRequest(supportedInstruments, details, options);

payment.addEventListener("shippingaddresschange", (evt) => {
  evt.updateWith(
    new Promise((resolve) => {
      updateDetails(details, request.shippingAddress, resolve);
    }),
  );
});

payment
  .show()
  .then((paymentResponse) => {
    // Processing of paymentResponse excerpted for brevity.
  })
  .catch((err) => {
    console.error("Uh oh, something bad happened", err.message);
  });

function updateDetails(details, shippingAddress, resolve) {
  if (shippingAddress.country === "US") {
    const shippingOption = {
      id: "",
      label: "",
      amount: { currency: "USD", value: "0.00" },
      selected: true,
    };
    if (shippingAddress.region === "MO") {
      shippingOption.id = "mo";
      shippingOption.label = "Free shipping in Missouri";
      details.total.amount.value = "55.00";
    } else {
      shippingOption.id = "us";
      shippingOption.label = "Standard shipping in US";
      shippingOption.amount.value = "5.00";
      details.total.amount.value = "60.00";
    }
    details.displayItems.splice(2, 1, shippingOption);
    details.shippingOptions = [shippingOption];
  } else {
    delete details.shippingOptions;
  }
  resolve(details);
}
```

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Crypto: subtle プロパティ
====================

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

**`Crypto.subtle`** 読み取り専用プロパティは、低水準の暗号化操作をができる `SubtleCrypto` オブジェクトを返します。

値
-

ウェブ暗号 API の低レベル暗号機能を操作するために使用できる `SubtleCrypto` オブジェクトです。

仕様書
---

| Specification |
| --- |
| Web Cryptography API # Crypto-attribute-subtle |

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

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

関連情報
----

* `Crypto`
* `SubtleCrypto`
* Compatibility test page
* Shim for IE11 and Safari
Crypto: randomUUID() メソッド
=========================

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

**`randomUUID()`** は `Crypto` インターフェイスのメソッドで、暗号強度の強い乱数生成器を用いて v4 UUID を生成するのに用いられます。

構文
--


```js
randomUUID()
```

### 引数

なし。

### 返値

ランダムに生成された 36 文字の v4 UUID を格納した文字列。

例
-

メソッドにグローバルの `crypto` プロパティを通してアクセスします。


```js
/\* self.crypto.randomUUID() が利用可能であることを仮定しています \*/

let uuid = self.crypto.randomUUID();
console.log(uuid); // 例えば "36b8f84d-df4e-4d49-b662-bcde71a8764f"
```

仕様書
---

| Specification |
| --- |
| Web Cryptography API # Crypto-method-randomUUID |

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

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

関連情報
----

* `Web Crypto API`
* `Crypto` オブジェクトを取得する `crypto`。
* `Crypto.getRandomValues` 任意の量の安全なランダムバイト列の生成源。
Crypto: getRandomValues() メソッド
==============================

**`Crypto.getRandomValues()`** メソッドは、暗号強度の強い乱数値を取得します。
 引数で与えた配列は、すべて乱数で（暗号学的な意味でランダムに）埋められます。

 十分な性能を保証するために、実装は真に乱数発生器を使用しているのではないものの、十分なエントロピーを有する*シード値*を用いた擬似乱数発生器を使用しています。
 擬似乱数発生器アルゴリズム (PRNG) は、ユーザーエージェントによって異なる可能性がありますが、暗号化の目的には適しています。

`getRandomValues()` は `Crypto` インターフェイスで安全なコンテキスト外から使用することができる唯一のメンバーです。

構文
--


```js
getRandomValues(typedArray)
```

### 引数

`typedArray`

 整数値ベースの `TypedArray` です。 `Int8Array`, `Uint8Array`, `Uint8ClampedArray`, `Int16Array`, `Uint16Array`, `Int32Array`, `Uint32Array`, `BigInt64Array`, `BigUint64Array` の何れかです（ただし `Float32Array` や `Float64Array` では**ありません**）。
 配列内のすべての要素は乱数で上書きされます。


### 返値

`typedArray` と同じ配列が渡されますが、その内容は新しく生成された乱数で置き換えられます。
 `typedArray` はその場で変更され、コピーは行われないことに注意してください。

### 例外

`QuotaExceededError` `DOMException`

`typedArray` の `byteLength` が 65,536 バイトを超えた場合に発生します。

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

`getRandomValues()` を暗号鍵を生成するために使用しないでください。代わりに `generateKey()` メソッドを使用してください。
 これにはいくつかの理由があります。例えば、 `getRandomValues()` が安全なコンテキストで動作することが保証されていないことなどです。

 ウェブ暗号仕様書では、エントロピーの最小値は規定されていません。
 その代わり、ユーザーエージェントは乱数を生成する際に、ユーザーエージェント自身に組み込まれた、よく定義された効率的な擬似乱数発生器を用いて、可能な限り最高のエントロピーを提供することが求められています。例えば、プラットフォーム固有の乱数関数、 Unix の `/dev/urandom` デバイス、または他のランダムまたは擬似乱数データのソースなど、外部の擬似乱数ソースから取得したシード値が用いられます。

例
-


```js
const array = new Uint32Array(10);
self.crypto.getRandomValues(array);

console.log("Your lucky numbers:");
for (const num of array) {
  console.log(num);
}
```

仕様書
---

| Specification |
| --- |
| Web Cryptography API # Crypto-method-getRandomValues |

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

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

関連情報
----

* ウェブ暗号 API
* `Crypto` オブジェクトを取得する `crypto`。
* `Math.random` 暗号学的に安全ではない乱数値。
CanvasPattern: setTransform() メソッド
==================================

**`CanvasPattern.setTransform()`** メソッドは、パターンの変換行列として `DOMMatrix` オブジェクトを使用し、パターンにこれを実行します。

構文
--


```js
setTransform(matrix)
```

### 引数

`matrix`

パターンの変換行列として使用する `DOMMatrix` です。

### 返値

なし (`undefined`)。

例
-

### `setTransform` メソッドの使用

これは `setTransform` メソッドを使用して `DOMMatrix` によるパターンの座標変換を指定して `CanvasPattern` を生成する簡単なコードスニペットです。たとえば、パターンが現在の `fillStyle` として適用され、`fillRect()` メソッドを使用すると、キャンバスに描画されます。

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const matrix = new DOMMatrix([1, 0.2, 0.8, 1, 0, 0]);

const img = new Image();
img.src =
  "/en-US/docs/Web/API/CanvasPattern/setTransform/canvas\_createpattern.png";

img.onload = () => {
  const pattern = ctx.createPattern(img, "repeat");
  pattern.setTransform(matrix.rotate(-45).scale(1.5));
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, 400, 400);
};
```


#### 編集可能なデモ

上のコードスニペットの編集可能なデモです。 `SetTransform()` の引数を変更して、その効果を確認してみてください。
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code" style="height:120px">
const img = new Image();
img.src = '/en-US/docs/Web/API/CanvasPattern/setTransform/canvas_createpattern.png';
img.onload = () => {
  const pattern = ctx.createPattern(img, 'repeat');
  pattern.setTransform(matrix.rotate(-45).scale(1.5));
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, 400, 400);
};
</textarea>
```


```
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const edit = document.getElementById("edit");
const code = textarea.value;

const matrix = new DOMMatrix([1, 0.2, 0.8, 1, 0, 0]);

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", () => {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", () => {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-canvaspattern-settransform-dev |

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

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

関連情報
----

* このメソッドを定義しているインターフェイス: `CanvasPattern`
* `DOMMatrix`
WebGLRenderingContext: canvas プロパティ
===================================

**`WebGLRenderingContext.canvas`** プロパティは、コンテキストに関連付けられた `HTMLCanvasElement` または `OffscreenCanvas` (en-US) オブジェクトへの読み取り専用の参照です。また、 `<canvas>` 要素や `OffscreenCanvas` (en-US) オブジェクトに関連付けられていない場合、 `null` になる可能性があります。

構文
--


```js
gl.canvas
```

### 返値

`HTMLCanvasElement` または `OffscreenCanvas` (en-US) オブジェクトか、 `null` のいずれか。

例
-

### canvas 要素

この `<canvas>` 要素があるとします。


```html
<canvas id="canvas"></canvas>
```


`WebGLRenderingContext` から `canvas` プロパティを使用して、参照を取得することができます。


```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
gl.canvas; // HTMLCanvasElement
```

### オフスクリーンキャンバス

実験的な `OffscreenCanvas` (en-US) オブジェクトを使用した例です。


```js
const offscreen = new OffscreenCanvas(256, 256);
const gl = offscreen.getContext("webgl");
gl.canvas; // OffscreenCanvas
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # DOM-WebGLRenderingContext-canvas |

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

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

関連情報
----

* `CanvasRenderingContext2D.canvas`
* `OffscreenCanvas` (en-US) インターフェイス
WebGLRenderingContext.uniform[1234][fi][v]()
============================================

**`WebGLRenderingContext.uniform[1234][fi][v]()`** は WebGL API のメソッドで、ユニフォーム変数の値を指定します。プログラムオブジェクトで定義されたすべてのアクティブなユニフォーム変数は、プログラムオブジェクトが正常にリンクされたときに 0 に初期化されます。それらは、プログラムオブジェクトのリンクが成功し、再び 0 に初期化されるまで、このメソッドの呼び出しによって割り当てられた値を保持します。

**メモ:** ここで書かれている関数の多くは WebGL 2 インターフェイスで拡張されており、
 `WebGL2RenderingContext.uniform[1234][uif][v]()` (en-US) 以下にあります。


構文
--


```js
void gl.uniform1f(location, v0);
void gl.uniform1fv(location, value);
void gl.uniform1i(location, v0);
void gl.uniform1iv(location, value);

void gl.uniform2f(location, v0, v1);
void gl.uniform2fv(location, value);
void gl.uniform2i(location, v0, v1);
void gl.uniform2iv(location, value);

void gl.uniform3f(location, v0, v1, v2);
void gl.uniform3fv(location, value);
void gl.uniform3i(location, v0, v1, v2);
void gl.uniform3iv(location, value);

void gl.uniform4f(location, v0, v1, v2, v3);
void gl.uniform4fv(location, value);
void gl.uniform4i(location, v0, v1, v2, v3);
void gl.uniform4iv(location, value);
```

### 引数

location

`WebGLUniformLocation` (en-US) オブジェクトで、変更するユニフォーム属性の位置を変更します。

`value, v0, v1, v2, v3`

ユニフォーム変数に使用される新しい値です。指定可能な型は次の通りです。

* 浮動小数点の `Number`: 浮動小数点値（"f" の付いたメソッド）に使用します。
* 一連の浮動小数点値（例えば `Float32Array` または数値の `Array`）: 浮動小数点のベクターメソッド（"fv" の付いたメソッド）に使用します。
* 整数の `Number`: 整数値（"i" の付いたメソッド）に使用します。
* `Int32Array`: 整数のベクターメソッド（"iv" の付いたメソッド）。

### 返値

なし。

例
-


```js
gl.uniform1f(u_alpha, 0.8);
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.14.10 |

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

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

関連情報
----

* `WebGLRenderingContext.uniformMatrix()`
WebGLRenderingContext.drawElements()
====================================

**`WebGLRenderingContext.drawElements()`** は WebGL API のメソッドで、配列データのプリミティブを描画します。

構文
--


```js
drawElements(mode, count, type, offset);
```

### 引数

`mode`

`GLenum` で、描画するプリミティブの型を指定します。取りうる値は次の通りです。

* `gl.POINTS`: 単一の点を描きます。
* `gl.LINE_STRIP`: 直線を次の頂点に向けて描きます。
* `gl.LINE_LOOP`: 直線を次の頂点に向けて描き、最後の頂点を最初の頂点に接続します。
* `gl.LINES`: 2 つの頂点の間に線を描きます。
* `gl.TRIANGLE_STRIP`
* `gl.TRIANGLE_FAN`
* `gl.TRIANGLES`: 3 つの頂点のグループで三角形を描きます。

count

`GLsizei` で、レンダリングする要素配列バッファーの要素数を指定します。例えば、 `gl.LINES` を使ってワイヤーフレームの三角形を描く場合、線 1 本あたり 2 つの端点× 3 本 ＝ 6 要素になります。しかし、同じワイヤーフレームの三角形を `gl.LINE_STRIP` で描画する場合、要素配列バッファーは 1 本目の終点/ 2 本目の始点、 2 本目の終点/ 3 本目の始点のインデックスを繰り返さないので、 `count` は 4 個となります。同じ三角形を `gl.LINE_LOOP` で描画する場合、要素配列バッファーは最初と最後の頂点を繰り返さないので、 `count` は 3 となります。

type

`GLenum` で、要素の配列バッファーの値の型を指定します。取りうる値は次の通りです。

* `gl.UNSIGNED_BYTE`
* `gl.UNSIGNED_SHORT`
* `OES_element_index_uint` (en-US) 拡張を使用する場合:
    + `gl.UNSIGNED_INT`

offset

`GLintptr` で、要素の配列バッファー内における倍とオフセットを指定します。指定された `type` の大きさの正しい倍数でなければなりません。

### 返値

なし (`undefined`)。

### 例外

* `mode` が受け付けられる値のいずれでもなかった場合、 `gl.INVALID_ENUM` エラーが発生します。
* `offset` が指定された型の正しい倍数でなければ、 `gl.INVALID_OPERATION` エラーが発生します。
* `count` が負の数であった場合は、 `gl.INVALID_VALUE` エラーが発生します。
例
-


```js
gl.drawElements(gl.POINTS, 8, gl.UNSIGNED\_BYTE, 0);
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.14.11 |

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

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

関連情報
----

* `WebGLRenderingContext.drawArrays()`
* `OES_element_index_uint` (en-US)
* `WEBGL_multi_draw.multiDrawElementsWEBGL()` (en-US)
WebGLRenderingContext: attachShader() メソッド
==========================================

**WebGLRenderingContext.attachShader()** は WebGL API のメソッドで、フラグメントか頂点のどちらかの `WebGLShader` を `WebGLProgram` にアタッチします。

構文
--


```js
attachShader(program, shader)
```

### 引数

`program`

`WebGLProgram`。

`shader`

フラグメントか頂点の `WebGLShader`。

例
-

以下は既存のシェーダーを `WebGLProgram` にアタッチするコードです。


```js
const program = gl.createProgram();

// 既に存在するシェーダーをアタッチ
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

gl.linkProgram(program);

if (!gl.getProgramParameter(program, gl.LINK\_STATUS)) {
  const info = gl.getProgramInfoLog(program);
  throw `WebGL プログラムをコンパイルできませんでした。 \n\n${info}`;
}
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.14.9 |

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

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

関連情報
----

* `WebGLProgram`
* `WebGLShader`
* `WebGLRenderingContext.attachShader()`
* `WebGLRenderingContext.compileShader()`
* `WebGLRenderingContext.createProgram()`
* `WebGLRenderingContext.createShader()`
* `WebGLRenderingContext.deleteProgram()` (en-US)
* `WebGLRenderingContext.deleteShader()` (en-US)
* `WebGLRenderingContext.detachShader()` (en-US)
* `WebGLRenderingContext.getAttachedShaders()` (en-US)
* `WebGLRenderingContext.getProgramParameter()` (en-US)
* `WebGLRenderingContext.getProgramInfoLog()` (en-US)
* `WebGLRenderingContext.getShaderParameter()`
* `WebGLRenderingContext.getShaderPrecisionFormat()` (en-US)
* `WebGLRenderingContext.getShaderInfoLog()`
* `WebGLRenderingContext.getShaderSource()` (en-US)
* `WebGLRenderingContext.isProgram()` (en-US)
* `WebGLRenderingContext.isShader()` (en-US)
* `WebGLRenderingContext.linkProgram()`
* `WebGLRenderingContext.shaderSource()`
* `WebGLRenderingContext.useProgram()`
* `WebGLRenderingContext.validateProgram()` (en-US)
WebGLRenderingContext: unpackColorSpace プロパティ
=============================================

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

**`WebGLRenderingContext.unpackColorSpace`** プロパティは、テクスチャをインポートする際に変換する色空間を指定します。既定値 (`srgb`) の他に、 `display-p3` 色空間も使用することができます。

テクスチャ画像のソースとしては、以下のものが利用できます。

* `ImageBitmap`
* `ImageData`
* `HTMLImageElement`
* `HTMLCanvasElement`
* `HTMLVideoElement`
* `OffscreenCanvas` (en-US)
* `VideoFrame` (en-US)

テクスチャは `WebGLRenderingContext.texImage2D()` (en-US) と `WebGLRenderingContext.texSubImage2D()` (en-US) メソッドを使用してインポートされ、インポート中に指定した `unpackColorSpace` 色空間に変換されます。

これは、 `HTMLImageElement` において `UNPACK_COLORSPACE_CONVERSION_WEBGL` 引数が `NONE` に設定されている場合には適用されないことに注意してください。

値
-

This property can have the following values:

* `"srgb"` selects the sRGB color space. This is the default value.
* `"display-p3"` selects the display-p3 color space.

If an invalid value is specified, then the value of `unpackColorSpace` will remain unchanged.

例
-

### テクスチャ内の sRGB ImageData を display-p3 に変換


```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");

gl.drawingBufferColorSpace = "display-p3";
gl.unpackColorSpace = "display-p3";

// Some sRGB ImageData
// Will be converted from sRGB to Display P3
const imageData = new ImageData(data, 32, 32);

const tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE\_2D, tex);
gl.texImage2D(
  gl.TEXTURE\_2D,
  0,
  gl.RGBA,
  width,
  height,
  0,
  gl.RGBA,
  gl.UNSIGNED\_BYTE,
  imageData,
);
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # DOM-WebGLRenderingContext-unpackColorSpace |

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

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

関連情報
----

* `WebGLRenderingContext.drawingBufferColorSpace`
WebGLRenderingContext: getShaderInfoLog() メソッド
==============================================

**WebGLRenderingContext.getShaderInfoLog** は、指定された `WebGLShader` オブジェクトの情報ログを返します。これには、警告、デバッグ、およびコンパイル情報が含まれます。

構文
--


```js
getShaderInfoLog(shader)
```

### 引数

`shader`

問い合わせ先の `WebGLShader` です。

### 返値

最後のコンパイル操作に関する診断メッセージ、警告メッセージ、その他の情報を含む文字列です。最初に `WebGLShader` オブジェクトが作成されたとき、その情報ログは長さ 0 の文字列になります。

例
-

### コンパイルメッセージの確認


```js
/\* シェーダーのソースコードを読み取る \*/
gl.shaderSource(shader, shaderCode);

/\* シェーダーのソースコードをコンパイル \*/
gl.compileShader(shader);

const message = gl.getShaderInfoLog(shader);

if (message.length > 0) {
  /\* メッセージはエラーまたは警告 \*/
  throw message;
}
```

仕様書
---

| Specification |
| --- |
| WebGL Specification # 5.14.9 |

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

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

関連情報
----

* `WebGLRenderingContext.getShaderParameter()` – `gl.COMPILE_STATUS` と一緒に使用すると、コンパイルに失敗したかどうかをチェックします
* `WebGLRenderingContext.getError()` (en-US)