recursal/MDN huggingface dataset:
WritableStreamDefaultWriter: WritableStreamDefaultWriter() コンストラクター
===================================================================

**`WritableStreamDefaultWriter()`** コンストラクターは、新しい `WritableStreamDefaultWriter` オブジェクトのインスタンスを作成します。

**メモ:** 通常、このコンストラクターを手動で使用することはありません。 代わりに、`WritableStream.getWriter()` メソッドを使用します。

構文
--


```js
new WritableStreamDefaultWriter(stream)
```

### 引数

`stream`

書き込む `WritableStream`。

### 返値

`WritableStreamDefaultWriter` オブジェクトのインスタンス。

### 例外

`TypeError`

提供された `stream` 値は `WritableStream` ではないか、すでに別のライターにロックされている場合。

例
-

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


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

function sendMessage(message, writableStream) {
  // defaultWriter は WritableStreamDefaultWriter 型です
  const defaultWriter = writableStream.getWriter();
  const encoder = new TextEncoder();
  const encoded = encoder.encode(message, { stream: true });
  encoded.forEach((chunk) => {
    defaultWriter.ready
      .then(() => defaultWriter.write(chunk))
      .then(() => {
        console.log("Chunk written to sink.");
      })
      .catch((err) => {
        console.log("Chunk error:", err);
      });
  });
  // ライターを閉じる前にすべてのチャンクが
  // 確実に書き込まれるように、ready を再度呼び出します。
  defaultWriter.ready
    .then(() => {
      defaultWriter.close();
    })
    .then(() => {
      console.log("All chunks written");
    })
    .catch((err) => {
      console.log("Stream error:", err);
    });
}

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

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


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

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-default-writer-constructor① |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
WritableStreamDefaultWriter: abort() メソッド
=========================================

**`abort()`** は `WritableStreamDefaultWriter` インターフェイスのメソッドで、ストリームを中止し、プロデューサーがストリームに正常に書き込むことができなくなり、キューに書き込まれた書き込みを破棄してすぐにエラー状態に移行することを通知します。

ライターがアクティブな場合、`abort()` メソッドは、関連するストリーム（`WritableStream.abort()`）と同じように振る舞います。 そうでない場合、拒否されたプロミスを返します。

構文
--


```js
abort()
abort(reason)
```

### 引数

`reason` 省略可

文字列で、人間が読むことができる中止の理由を表します。

### 返値

`Promise` です。 `reason` 引数で指定された値で履行されます。

### 例外

`TypeError`

中止しようとしているストリームが `WritableStream` ではないか、ロックされている場合。

例
-


```js
const writableStream = new WritableStream(
  {
    write(chunk) {
      // ...
    },
    close() {
      // ...
    },
    abort(err) {
      // ...
    },
  },
  queuingStrategy,
);

// ...

const writer = writableStream.getWriter();

// ...

// 必要に応じてストリームを中止します
writer.abort.then((reason) => {
  console.log(reason);
});
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-default-writer-abort④ |

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

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

**`ready`** は `WritableStreamDefaultWriter` インターフェイスの読み取り専用プロパティで、ストリームの内部キューの目的のサイズが非正から正に移行したときに解決する `Promise` を返し、背圧が適用されなくなったことを通知します。

値
-

`Promise` です。

例
-

次の例は、`ready` プロパティの 2 つの使用法を示しています。 最初は `ready` を使用して、`WritableStream` が書き込みを完了し、バイナリチャンクを送信する前にデータを受信できるようにします。 2 番目も、`WritableStream` の書き込みが完了しているかどうかをチェックしますが、今度はライターを閉じる前に書き込みを終了する必要があるためです。


```js
function sendMessage(message, writableStream) {
  // defaultWriter は WritableStreamDefaultWriter 型です
  const defaultWriter = writableStream.getWriter();
  const encoder = new TextEncoder();
  const encoded = encoder.encode(message, { stream: true });
  encoded.forEach((chunk) => {
    // ストリームとそのライターがデータを
    // 受信できることを確認します。
    defaultWriter.ready
      .then(() => defaultWriter.write(chunk))
      .then(() => {
        console.log("Chunk written to sink.");
      })
      .catch((err) => {
        console.error(`Chunk error: ${err}`);
      });
    // ライターを閉じる前にすべてのチャンクが
    // 確実に書き込まれるように、ready を再度呼び出します。
    defaultWriter.ready
      .then(() => defaultWriter.close())
      .then(() => {
        console.log("All chunks written");
      })
      .catch((err) => {
        console.error(`Stream error: ${err}`);
      });
  });
}
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-default-writer-ready⑨ |

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

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

**`desiredSize`** は `WritableStreamDefaultWriter` インターフェイスの読み取り専用プロパティで、ストリームの内部キューを埋めるために必要な希望サイズを返します。

値
-

整数。 キューがいっぱいになった場合、これは負になる可能性があることに注意してください。

値は、（エラーが発生したか、中止がキューに入れられたために）ストリームに正常に書き込むことができない場合、 `null` になり、ストリームが閉じられると `0` になります。

### 例外

`TypeError`

ライターのロックが解除されてた場合。

例
-


```js
const writableStream = new WritableStream(
  {
    write(chunk) {
      // ...
    },
    close() {
      // ...
    },
    abort(err) {
      // ...
    },
  },
  queuingStrategy,
);

// ...

const writer = writableStream.getWriter();

// ...

// ストリームの希望サイズを返します
let size = writer.desiredSize;
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-default-writer-desired-size⑥ |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
WritableStreamDefaultWriter: releaseLock() メソッド
===============================================

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

構文
--


```js
releaseLock()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-


```js
const writableStream = new WritableStream(
  {
    write(chunk) {
      // ...
    },
    close() {
      // ...
    },
    abort(err) {
      // ...
    },
  },
  queuingStrategy,
);

// ...

const writer = writableStream.getWriter();

// ...

// 必要に応じて、ストリームのライターのロックを解除します
writer.releaseLock();
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-default-writer-release-lock② |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
WritableStreamDefaultWriter: write() メソッド
=========================================

**`write()`** は `WritableStreamDefaultWriter` インターフェイスのメソッドで、渡されたデータのチャンクを `WritableStream` とその基になるシンクに書き込み、その後、書き込み操作の成功または失敗を示すために解決される `Promise` を返します。

「成功」の意味は、基になるシンク次第であることに注意してください。 単にチャンクが受け入れられたことを示しているだけで、必ずしも最終的な宛先に安全に保存されているとは限りません。

構文
--


```js
write(chunk)
```

### 引数

`chunk`

`WritableStream` に渡すバイナリデータのブロック。

### 返値

`Promise` です。 書き込みが成功すると `undefined` で満たされ、書き込みプロセスが開始される前に書き込みが失敗するかストリームがエラーになると拒否されます。

### 例外

`TypeError`

対象のストリームは書き込み可能なストリームではないか、オーナーがない場合。

例
-

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


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

function sendMessage(message, writableStream) {
  // defaultWriter は WritableStreamDefaultWriter 型です
  const defaultWriter = writableStream.getWriter();
  const encoder = new TextEncoder();
  const encoded = encoder.encode(message, { stream: true });
  encoded.forEach((chunk) => {
    defaultWriter.ready
      .then(() => defaultWriter.write(chunk))
      .then(() => {
        console.log("Chunk written to sink.");
      })
      .catch((err) => {
        console.log("Chunk error:", err);
      });
  });
  // ライターを閉じる前にすべてのチャンクが
  // 確実に書き込まれるように、ready を再度呼び出します。
  defaultWriter.ready
    .then(() => {
      defaultWriter.close();
    })
    .then(() => {
      console.log("All chunks written");
    })
    .catch((err) => {
      console.log("Stream error:", err);
    });
}

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

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


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

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-default-writer-write①② |

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

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

`IntersectionObserverEntry` インターフェイスの読み取り専用の **`time`** プロパティは、 `DOMHighResTimeStamp` で、文書の作成時刻を基準とする交差状態が発生した時刻を示します。

値
-

`DOMHighResTimeStamp` で、 `target` 要素がこの `IntersectionObserverEntry` で示す交差状態の変化を検出した時刻を表します。時刻はそれを含む文書が作成されてからのミリ秒単位で指定します。

例
-

`time` プロパティを使用して、要素がユーザーに表示されている時間を追跡する完全な例については、交差オブザーバー API による要素の表示時間設定を参照してください。

仕様書
---

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserverentry-time |

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

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

`IntersectionObserverEntry` インターフェイスの読み取り専用の **`isIntersecting`** プロパティは、対象要素が交差オブザーバーのルートと交差している場合に `true` になる論理値です。この値が `true` の場合、 `IntersectionObserverEntry` は交差状態への変わり目にあります。 `false` の場合、交差ありから交差なしへの変わり目であることがわかります。

値
-

論理値で、 `target` 要素が交差状態に遷移したか (`true`) または交差状態から脱したか (`false`) を示します。

例
-

この単純な例では、交差コールバックを使用して、現在いくつの対象となる要素が交差ルートと交差しているかのカウンターを更新します。


```js
function intersectionCallback(entries) {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      intersectingCount += 1;
    } else {
      intersectingCount -= 1;
    }
  });
}
```


より具体的な例については、交差状態の変化の扱いをご覧ください。

仕様書
---

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserverentry-isintersecting |

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

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

`IntersectionObserverEntry` インターフェイスの読み取り専用の **`rootBounds`** プロパティは `DOMRectReadOnly` であり、この `target` のルート耕作系に対応します。指定されていれば、 `IntersectionObserver.rootMargin` によるオフセットを含みます。

値
-

`DOMRectReadOnly` で、ルート交差矩形を表します。 `Document` のビューポートであるルートの場合、この矩形は文書全体の境界矩形となります。そうでない場合は、ルート要素の境界となります。

この矩形のオフセットは `IntersectionObserver.rootMargin` の値で指定します。

仕様書
---

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserverentry-rootbounds |

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

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

`IntersectionObserverEntry` インターフェイスの読み取り専用の **`intersectionRatio`** プロパティは、対象の要素が現在どの程度見えているかを、ルートの交差比率で 0.0 から 1.0 の間の値で示します。

値
-

 0.0 から 1.0 の間の数値で、対象要素がルートの交差矩形内で実際にどの程度表示されているかを示します。
 より正確には、この値は交差矩形の面積 (`intersectionRect`) と対象の外接矩形の面積 (`boundingClientRect`) の比になります。

対象の外接矩形の面積が 0 の場合、 `isIntersecting` が `true` ならば 1、そうでないならば 0 が返されます。

例
-

この単純な例では、交差コールバックはそれぞれの対象要素の `opacity` を、その要素とルートとの交差比率に設定します。


```js
function intersectionCallback(entries) {
  entries.forEach((entry) => {
    entry.target.style.opacity = entry.intersectionRatio;
  });
}
```


より具体的な例については、交差状態の変化の扱いをご覧ください。

仕様書
---

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserverentry-intersectionratio |

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

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

`IntersectionObserverEntry` インターフェイスの読み取り専用の **`boundingClientRect`** プロパティは、簡単にいえば、対象要素全体を含む最小の矩形を記述した `DOMRectReadOnly` を返します。

値
-

`DOMRectReadOnly` で、交差状態の変化を記述している対象要素のすべての部分を含む、最小の矩形を記述します。この値は `Element.getBoundingClientRect()` と同じアルゴリズムで取得されるので、この矩形を得るために何が行われ、何がその境界内に含まれ、何が含まれないかという正確な内容については、その記事を参照してください。

しかし、一般的なケースでは、これを対象要素の外接矩形と考えるのが無難でしょう。

仕様書
---

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserverentry-boundingclientrect |

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

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

`IntersectionObserverEntry` インターフェイスの読み取り専用の **`target`** プロパティは、交差ルートとの交差量が変化したのがどの対象要素であるかを `Element` で示します。

値
-

`IntersectionObserverEntry` の `target` プロパティは、以前に `IntersectionObserver.observe()` を呼び出して対象とした `Element` の中で、ルートとの交差量が変化したものを示します。

例
-

この単純な例では、対象となるそれぞれの要素の `opacity` が、その `intersectionRatio` に設定されます。


```js
function intersectionCallback(entries) {
  entries.forEach((entry) => {
    entry.target.style.opacity = entry.intersectionRatio;
  });
}
```


より具体的な例については、交差状態の変化の扱いをご覧ください。

仕様書
---

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserverentry-target |

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

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

`IntersectionObserverEntry` インターフェイスの読み取り専用の **`intersectionRect`** プロパティは `DOMRectReadOnly` オブジェクトで、交差ルート内に現在表示されている対象要素の部分全体を含む、最小の矩形を記述したものです。

値
-

`DOMRectReadOnly` で、対象要素のうち、ルートの交差矩形内に現在表示されている部分を表します。

この矩形は `boundingClientRect` と `target` の各先祖のクリップ矩形の交差部分をとって算出されます。ただし、交差ルート (`root`) 自体を除きます。

例
-

この単純な例では、交差コールバックは、対象要素のコンテンツを描画するコードが後で使用するために交差矩形を格納し、可視領域のみが再描画されるようにしています。


```js
function intersectionCallback(entries) {
  entries.forEach((entry) => {
    refreshZones.push({
      element: entry.target,
      rect: entry.intersectionRect,
    });
  });
}
```

仕様書
---

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserverentry-intersectionrect |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Worklet.addModule()
===================

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

**`addModule()`** は `Worklet` インターフェイスのメソッドで、指定した JavaScript ファイルで定義されるモジュールを現在の `Worklet` に読み込みます。

構文
--


```js
addModule(moduleURL);
addModule(moduleURL, options);
```

### 引数

`moduleURL`

文字列で、追加するモジュールの JavaScript ファイルの URL を指定します。

`options` 省略可

次のオプションを指定するためのオブジェクトです。

`credentials`

モジュールをロードする際に、資格情報（例: Cookie や HTTP 認証）を送信するかどうかを指定する `Request.credentials` 値です。 `"omit"`, `"same-origin"`, `"include"` のいずれかを指定することができます。既定値は `"same-origin"` です。 `Request.credentials` も参照してください。


返値
--

指定された URL のモジュールが追加されると解決される `Promise` です。このプロミスは値を返しません。

### 例外

`addModule()` が失敗した場合、プロミスを拒否し、以下のいずれかのエラーを拒否ハンドラーに送出します。

`AbortError` `DOMException`

指定されたスクリプトが無効であるか、または読み込むことができませんでした。

`SyntaxError` `DOMException`

指定された `moduleURL` が無効です。

例
-

### AudioWorklet の例


```js
const audioCtx = new AudioContext();
const audioWorklet = audioCtx.audioWorklet;
audioWorklet.addModule("modules/bypassFilter.js", {
  credentials: "omit",
});
```

### PaintWorklet の例


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


`paintWorklet` (en-US) がインクルードされると、 CSS の `image/paint()` 関数を使用して、ワークレットが作成した画像を引用することができます。


```css
@supports (background-image: paint(id)) {
  h1 {
    background-image: paint(hollowHighlights, filled, 3px);
  }
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-worklet-addmodule-dev |

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

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

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

**`element`** は `CSSPseudoElement` インターフェイスの読み取り専用のプロパティで、擬似要素の元要素、言い換えれば親要素への参照を返します。

値
-

この擬似要素の元要素を表す `Element` です。

例
-

下記の例は、 `CSSPseudoElement.element` と `Element.pseudo()` の関係を示しています。


```js
const myElement = document.querySelector("q");
const cssPseudoElement = myElement.pseudo("::after");
const originatingElement = cssPseudoElement.element;

console.log(myElement === originatingElement); // true を出力
console.log(myElement.parentElement === originatingElement); // false を出力
console.log(myElement.lastElementChild === cssPseudoElement); // false を出力
console.log(myElement.lastChild === cssPseudoElement); // false を出力
console.log(myElement.nextElementSibling === cssPseudoElement); // false を出力
console.log(myElement.nextSibling === cssPseudoElement); // false を出力
```

仕様書
---

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # dom-csspseudoelement-element |

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

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

関連情報
----

* `Element.pseudo()`
CSSPseudoElement: type プロパティ
============================

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

**`type`** は `CSSPseudoElement` インターフェイスの読み取り専用プロパティで、擬似要素の型を CSS セレクターの形の文字列で表します。

値
-

以下の値のいずれかを格納する文字列です。

* `"::before"`
* `"::after"`
* `"::marker"`
例
-

下記の例は、 `CSSPseudoElement.type` と `Element.pseudo()` の関係を示しています。


```js
const myElement = document.querySelector("q");
const mySelector = "::after";
const cssPseudoElement = myElement.pseudo(mySelector);
const typeOfPseudoElement = cssPseudoElement.type;

console.log(mySelector === typeOfPseudoElement); // true を出力
```

仕様書
---

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # dom-csspseudoelement-type |

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

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

関連情報
----

* `Element.pseudo()`
* 標準的な擬似要素の索引
Storage Access API の使用
======================

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

埋め込まれたクロスオリジンの文書で Storage Access API を使用して、ファーストパーティストレージにアクセスできるかどうかを確認し、そうでない場合はアクセスを要求する必要があります。 一般的なストレージアクセスのシナリオについて簡単に説明します。

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

Storage Access API は、ユーザーのブラウザーがすべてのサードパーティのクッキーをブロックするように設定されている場合にブロックされるストレージへのアクセスを埋め込まれたコンテンツが要求できるように設計されています。 埋め込まれたコンテンツはユーザーが使用しているストレージポリシーを認識しないため、ストレージからの読み取りまたは書き込みを試みる前に、常に埋め込まれたフレームにストレージアクセスがあるかどうかを確認するのが最善です。 これは、`Document.cookie` へのアクセスの場合に特に当てはまります。 サードパーティのクッキーがブロックされると、ブラウザーはしばしば空のクッキージャーを返すためです。

埋め込まれたクロスオリジン iframe でユーザーのクッキーにアクセスする
--------------------------------------

この例では、埋め込まれたクロスオリジン `<iframe>` が、サードパーティのクッキーをブロックするストレージアクセスポリシーの下でユーザーのクッキーにアクセスする方法を示します。

まず、`<iframe>` がサンドボックス化されている場合、次のように、埋め込まれたウェブサイトは `allow-storage-access-by-user-activation` sandbox トークンを追加して、ストレージアクセス要求が成功することを許可するとともに、`allow-scripts` と `allow-same-origin` を使用して API の呼び出しを許可し、クッキーを持つことができるオリジンで実行します。


```html
<iframe
 sandbox="allow-storage-access-by-user-activation
 allow-scripts
 allow-same-origin">
  ...
</iframe>
```


次に、埋め込まれた文書内で実行されるコードに進みます。 現在ストレージにアクセスできるかどうかはわからないため、最初に `Document.hasStorageAccess()` を呼び出す必要があります。 その呼び出しが `false` を返す場合、`Document.requestStorageAccess()` を呼び出すことができます。 それが返した結果は、前の Promise 呼び出しにチェーンできます。 最後の `then` では、ファーストパーティストレージへのアクセスが可能になります。


```js
document
  .hasStorageAccess()
  .then((hasAccess) => {
    if (!hasAccess) {
      return document.requestStorageAccess();
    }
  })
  .then((\_) => {
    // これで、ファーストパーティストレージにアクセスできます！

    // ファーストパーティのクッキージャーからいくつかのアイテムにアクセスしましょう
    document.cookie = "foo=bar"; // クッキーを設定
    localStorage.setItem("username", "John"); // localStorage エントリにアクセス
  })
  .catch((\_) => {
    // ストレージアクセスの取得エラー。
  });
```


埋め込まれたコンテンツがタップやクリックなどのユーザージェスチャーを現在処理していない限り、アクセス要求は自動的に拒否されることに注意してください。 このコードは、例えば、次のようなユーザージェスチャーベースのイベントハンドラー内で実行する必要があります。


```js
btn.addEventListener("click", () => {
  // ここでコードを実行します
});
```
序文
==

序文
--

W3C 標準で気付かされる流行の一つは、スタイルからコンテンツを分ける努力がなされていることです。これにより、同じスタイルを複数のコンテンツで再利用することができ、簡単なメンテナンスでコンテンツの外観を (一つのファイルの修正のみで) すばやく変更することができます。

CSS (Cascade Style Sheets) は W3C によって最初に提唱された方法の一つでした。CSS は簡単な方法でスタイルルールをウェブ文書に適用します。これらのスタイルルールは、文書（その中のコンテンツ）のレイアウトを定義します。しかしながら、プログラミング構造や複雑なレイアウトモデルの作成能力に欠陥があるなどいくつかの制限があります。CSS はまた、要素の配置の変更のサポートも制限されています。

XSL (Extensible Stylesheet Language) 変換は二つの部分で構成されています。 XML ツリーを他のマークアップツリーおよび XPath へ変換可能にする XSL 要素、ツリーのための選択言語。XSLT は XML 文書（そのコンテンツ）を取得し、XSL スタイルシートの規則によって新しい文書を生成します。XSLT によって、オリジナルの XML 文書から要素を追加、削除、再構成することができるため、結果的に文書構造をより細かく制御することができます。

XSLT による変換は、テンプレートからなる規則を基にしています。各テンプレート (XPath を使用) は入力する XML 文書の断片に一致すると、新しい文書を生成するため、テンプレートをその断片の代わりとなる部分に適用します。
XSLT の基本的な例
===========

 この最初の例では、ブラウザーで XSLT 変換を設定する基本を示します。
 この例では、記事に関する情報（タイトル、著者の一覧、本文）を含む XML 文書を取り込み、それを人間が読める形式で表示します。

XML 文書 (**example.xml**) は次の通りです。


```xml
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="example.xsl"?>
<Article>
  <Title>My Article</Title>
  <Authors>
    <Author>Mr. Foo</Author>
    <Author>Mr. Bar</Author>
  </Authors>
  <Body>This is my article text.</Body>
</Article>
```


この XML ファイルの `?xml-stylesheet` 処理命令により、その `href` 属性で適用する XSLT スタイルシートを指定します。

XSL スタイルシートファイル (**example.xsl**) は次の通りです。


```xml
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:output method="text"/>

  <xsl:template match="/">
    Article - <xsl:value-of select="/Article/Title"/>
    Authors: <xsl:apply-templates select="/Article/Authors/Author"/>
  </xsl:template>

  <xsl:template match="Author">
    - <xsl:value-of select="." />
  </xsl:template>

</xsl:stylesheet>
```


 XSLT スタイルシートは、最終的な出力を生成するためのすべてのテンプレートを含む、`xsl:stylesheet` 要素で始まります。
 この例には 2 つのテンプレートがあります。一つはルートノードに対応し、一つは Author ノードに対応します。
 ルートノードが出力する記事のタイトルにテンプレートが一致すると、（`apply-templates` を通して） Authors ノードの子の、すべての Author ノードに対応するテンプレートが処理されます。

例を試してみましょう。

1. ファイルシステム上にディレクトリーを作成し、その中に上記の `example.xml` と `example.xsl` を作成します。
2. ファイルのあるディレクトリーでローカルサーバーを起動します。
 これにより、あたかもインターネット上でホスティングされているかのように、ディレクトリー内のファイルを閲覧することができます。


**警告:** ファイルシステムからスタイルシートを読み込むことはオリジン間リクエストであり、既定で許可されないためです。
 XML とスタイルシートを同じローカルサーバーでホスティングすることで、同一のオリジンになることが保証されます。
3. ブラウザーから **example.xml** を開きます。
4. ブラウザーの出力は次のようになります。
```

Browser Output :

    Article - My Article
    Authors:
    - Mr. Foo
    - Mr. Bar
```