recursal/MDN huggingface dataset:
VTTCue: snapToLines プロパティ
=========================

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
**`snapToLines`** は `VTTCue` インターフェイスのプロパティで、 `VTTCue.line` プロパティが行の数を表す整数であるか、動画の大きさに対するパーセント値であるかを示す論理値 (`Boolean`) です。

値
-

論理値 (`Boolean`) です。

例
-

次の例では、新しい `VTTCue` を作成し、 `snapToLines` の値を `true` に設定します。この値はコンソールに出力されます。


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";

let cue1 = new VTTCue(0, 0.9, "Hildy!");
cue1.snapToLines = true;
console.log(cue1.snapToLines);

track.addCue(cue1);
```

仕様書
---

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # dom-vttcue-snaptolines |

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

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

**`lineAlign`** は `VTTCue` インターフェイスのプロパティで、この VTT キューの配置を表します。

値
-

文字列で、以下のいずれかの値になります。

`"start"`

先頭への配置。

`"center"`

中央への配置。

`"end"`

末尾への配置。

例
-

次の例では、新しい `VTTCue` を作成し、 `lineAlign` の値を `"center"` に設定します。この値はコンソールに出力されます。


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";

let cue1 = new VTTCue(0, 0.9, "Hildy!");
cue1.lineAlign = "center";
console.log(cue1.lineAlign);

track.addCue(cue1);
```

仕様書
---

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # dom-vttcue-linealign |

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

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

**`positionAlign`** は `VTTCue` インターフェイスのプロパティで、 `VTTCue.position` が何に結び付けられているのかを指定するのに使用します。

値
-

文字列で、以下のいずれかの値になります。

`"line-left"`

行の左への配置。

`"center"`

中央への配置。

`"line-right"`

行の右への配置。

`"auto"`

自動的に配置が行われ、キューのテキスト配置によって、以下のように解釈されます。

* **line-left:** テキスト配置が左の場合、キューは LTR 言語を使用しており、テキスト配置は先頭、またはキューは RTL 言語を使用しており、テキスト配置は末尾です。
* **line-right:** テキスト配置が右の場合、キューは RTL 言語を使用しており、テキスト配置は先頭、またはキューは LTR 言語を使用しており、テキスト配置は末尾です。
* **center:** テキスト配置位置が設定されていません。

例
-

次の例では、新しい `VTTCue` を作成し、 `positionAlign` の値を `"line-right"` に設定します。この値はコンソールに出力されます。


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";

let cue1 = new VTTCue(0, 0.9, "Hildy!");
cue1.positionAlign = "line-right";
console.log(cue1.positionAlign);

track.addCue(cue1);
```

仕様書
---

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # dom-vttcue-positionalign |

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

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

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
**`getCueAsHTML()`** は `VTTCue` インターフェイスのメソッドで、このキューの内容を含んだ `DocumentFragment` を返します。

構文
--


```js
getCueAsHTML()
```

### 引数

なし。

### 返値

`DocumentFragment` です。

例
-

次の例では、新しい `VTTCue` が作成されます。そして、文書フラグメントとしての値がコンソールに出力されます。


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";

let cue1 = new VTTCue(0, 0.9, "Hildy!");
console.log(cue1.getCueAsHTML());

track.addCue(cue1);
```

仕様書
---

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # dom-vttcue-getcueashtml |

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

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

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
**`vertical`** は `VTTCue` インターフェイスのプロパティで、このキューの書字方向を表す文字列です。

値
-

文字列で、以下のいずれかの値になります。

`""` （空文字列）

横書きであることを表します。

`"rl"`

左方向に進む縦書きであることを表します。

`"lr"`

右方向に進む縦書きであることを表します。

例
-

次の例では、新しい `VTTCue` が作成され、 `vertical` の値が `"rl"` に設定されます。この値はコンソールに出力されます。


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";

let cue1 = new VTTCue(0, 0.9, "Hildy!");
cue1.vertical = "rl";
console.log(cue1.vertical);

track.addCue(cue1);
```

仕様書
---

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # dom-vttcue-vertical |

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

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

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
**`align`** は `VTTCue` インターフェイスのプロパティで、このテキストボックス内のテキストの行すべての配置を表します。

値
-

文字列で、以下のいずれかの値になります。

`"start"`

先頭への配置。

`"center"`

中央への配置。

`"end"`

末尾への配置。

`"left"`

左への配置。

`"right"`

右への配置。

例
-

次の例では、新しい `VTTCue` が作成され、 `align` の値に `"start"` が設定されます。この値はコンソールに出力されます。


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";

let cue1 = new VTTCue(0, 0.9, "Hildy!");
cue1.align = "start";
console.log(cue1.align);

track.addCue(cue1);
```

仕様書
---

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # dom-vttcue-align |

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

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

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
**`position`** は `VTTCue` インターフェイスのプロパティで、キューの行内での字下げを表します。

値
-

数値、または `"auto"` でキューの行内での字下げを表します。

例
-

次の例では、新しい `VTTCue` を作成し、 `position` の値を `2` に設定します。この値はコンソールに出力されます。


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";

let cue1 = new VTTCue(0, 0.9, "Hildy!");
cue1.position = "2";
console.log(cue1.position);

track.addCue(cue1);
```

仕様書
---

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # dom-vttcue-position |

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

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

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
**`line`** は `VTTCue` インターフェイスのプロパティで、この WebVTT キューのキュー行を表します。

値
-

この WebVTT キューのキュー行を表す数値、または `"auto"` です。

例
-

次の例では、新しい `VTTCue` が作成され、`line` の値に `1` が設定されます。この値はコンソールに出力されます。


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";

let cue1 = new VTTCue(0, 0.9, "Hildy!");
cue1.line = "1";
console.log(cue1.line);

track.addCue(cue1);
```

仕様書
---

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # dom-vttcue-line |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
VTTCue: 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()`** コンストラクターは新しい `VTTCue` オブジェクトを返します。

構文
--


```js
new VTTCue(startTime, endTime, text)
```

### 引数

`startTime`

 最初のテキストトラックのキュー開始時刻を表す `double` です。
 これは、秒と秒の小数で指定された時刻で、このキューが適用されるメディアデータの範囲の開始時刻を表します。例えば、 50 秒から 1 分 5.5 秒までのキューを表示する場合、 `startTime` は 50.0 になります。


`endTime`

 このテキストトラックのキュー終了時刻を表す `double` です。
 これは、キューをユーザーに表示するのを止める時刻を指定された秒と秒の小数で表したものです。`startTime` で示したキューの例では、`endTime` の値は 65.5 となります。


`text`

`startTime` と `endTime` で示される時刻の間に表示させる、テキストを指定する文字列です。

### 返値

指定された時刻の間に表示されるキューを表す新しい `VTTCue` オブジェクトです。

例
-


```js
// 2 ～ 3 秒の間に表示するキューを作成し、指定されたテキストを使用します。
let cue = new VTTCue(2, 3, "かっこいい文章を表示する");
```

仕様書
---

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

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

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

**`region`** は `VTTCue` インターフェイスのプロパティで、このキューが所属する `VTTRegion` を返したり設定したりします。

値
-

`VTTRegion` オブジェクトです。

例
-

次の例では、新しい `VTTCue` が作成され、 `region` の値がコンソールに出力されます。


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";

let cue1 = new VTTCue(0, 0.9, "Hildy!");
console.log(cue1.region);

track.addCue(cue1);
```

仕様書
---

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # dom-vttcue-region |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSS プロパティと値 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
**CSS プロパティと値 API**（CSS Houdini API の傘下）により、 `CSS カスタムプロパティ`の登録において、プロパティの型チェック、既定値、プロパティの値を継承の有無の登録を行うことができます。

カスタムプロパティの登録
------------

カスタムプロパティを登録すると、カスタムプロパティがどのように動作するかをブラウザーに指示することができます。これは、どのような型が許可されるか、カスタムプロパティがその値を継承するかどうか、カスタムプロパティの既定値は何かです。 プロパティを登録するには、 JavaScript と CSS の 2 つの方法があります。

### CSS.registerProperty

次の例では、 `CSS カスタムプロパティ` として `--my-prop` を `CSS.registerProperty` によって登録します。 `--my-prop` は CSS 色構文を使用し、既定値として `#c0ffee` があり、値を継承しないようにします。


```js
window.CSS.registerProperty({
  name: "--my-prop",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});
```

### @property

CSS で同じ登録を行うことができます。 次の例では、 `CSS カスタムプロパティ` として `--my-prop` を `@property` アットルールを使用して登録します。 `--my-prop` は CSS 色構文を使用し、既定値として `#c0ffee` があり、値を継承しないようにします。


```css
@property --my-prop {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```

登録したカスタムプロパティの使用
----------------

プロパティを登録する利点の 1 つは、ブラウザーがトランジションなどでカスタムプロパティを処理する方法を知っていることです。プロパティが登録されていない場合、ブラウザーはそのプロパティをどのように扱えばよいのか分からないため、どのような値でも使用できると仮定し、その結果、そのプロパティをアニメーションすることができません。しかし、プロパティに構文 (syntax) が登録されている場合、ブラウザーはその構文を最適化することができます。

この例では、カスタムプロパティ `--registered` が `<color>` の構文で登録され、線形グラデーションで使用されています。このプロパティは、ホバー時またはフォーカス時に異なる色に遷移します。トランジションは登録されたプロパティでは動作しますが、登録されていないプロパティでは動作しないことに注意してください。

### HTML


```html
<button class="registered">登録されている背景色</button>
<button class="unregistered">登録されていない背景色</button>
```

### CSS


```css
.registered {
  --registered: #c0ffee;
  background-image: linear-gradient(to right, #fff, var(--registered));
  transition: --registered 1s ease-in-out;
}

.registered:hover,
.registered:focus {
  --registered: #b4d455;
}

.unregistered {
  --unregistered: #c0ffee;
  background-image: linear-gradient(to right, #fff, var(--unregistered));
  transition: --unregistered 1s ease-in-out;
}

.unregistered:hover,
.unregistered:focus {
  --unregistered: #b4d455;
}

button {
  height: 40vh;
  display: block;
  width: 100%;
  font-size: 3vw;
}
```

### JavaScript


```js
window.CSS.registerProperty({
  name: "--registered",
  syntax: "<color>",
  inherits: false,
  initialValue: "red",
});
```

### 結果

機能的には正確ではありませんが、上記の例の未登録のプロパティと登録されたプロパティの違いを考える良い方法は、`height` をアニメーションする際の `<custom-ident>` と数値の違いです。ブラウザーは、計算されるまで `auto` の値がわからないため、`auto` から数値にトランジションまたはアニメーションすることはできません。未登録のプロパティを使用すると、ブラウザーは計算されるまで値が*何であるか*を同様に認識しません。 そのため、ある値から別の値へのトランジションを設定できません。しかし、登録された場合は、期待すべき値の型をブラウザーに指示したことになり、ブラウザーはそれを知っているため、トランジションを適切に設定することができます。

落とし穴
----

プロパティの登録には 2 つの落とし穴があります。 1 つ目は、プロパティを一度登録すると更新する方法がなく、JavaScript で再登録しようとすると、プロパティが既に定義されていることを示すエラーが発生することです。

2 つ目は、標準プロパティとは異なり、登録されたプロパティは構文解析されるときに検証されないことです。代わりに、計算時に検証されます。これは、不正な値が要素のプロパティの検査時に無効な値として現れないことと、有効なプロパティの後に無効なプロパティを記載しても、有効なプロパティに代替されないことになります。ただし、無効なプロパティは、登録された既定値に代替されます。

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

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

**`ports`** は `ExtendableMessageEvent` インターフェイスの読み取り専用プロパティで、関連するメッセージチャンネル（メッセージが送信されるチャンネル）のポートを表す `MessagePort` オブジェクトを含む配列を返します。

値
-

`MessagePort` オブジェクトの配列。

例
-

次のコードをサービスワーカー内で使用して、`PushMessageData` を介して受信したデータをチャンネルメッセージを介してメインコンテキストに送信することにより、プッシュメッセージに応答する場合、`onmessage` のイベントオブジェクトは `ExtendableMessageEvent` になります。


```js
let port;

self.addEventListener("push", (e) => {
  const obj = e.data.json();

  if (obj.action === "subscribe" || obj.action === "unsubscribe") {
    port.postMessage(obj);
  } else if (obj.action === "init" || obj.action === "chatMsg") {
    port.postMessage(obj);
  }
});

self.onmessage = (e) => {
  port = e.ports[0];
};
```

仕様書
---

| Specification |
| --- |
| Service Workers # extendablemessage-event-ports |

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

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

関連情報
----

* サービスワーカーの使用
* サービスワーカーの基本的なコード例（英語）
* ServiceWorker の準備はできていますか？（英語）
* チャンネルメッセージング
ExtendableMessageEvent.origin
=============================

**`origin`** は `ExtendableMessageEvent` インターフェイスの読み取り専用プロパティで、メッセージを送信した `Client` のオリジンを返します。

値
-

文字列です。

例
-

次のコードをサービスワーカー内で使用して、 `PushMessageData` を介して受信したデータをチャンネルメッセージを介してメインコンテキストに送信することにより、プッシュメッセージに応答する場合、`onmessage` のイベントオブジェクトは `ExtendableMessageEvent` になります。


```js
let port;

self.addEventListener("push", (e) => {
  const obj = e.data.json();

  if (obj.action === "subscribe" || obj.action === "unsubscribe") {
    port.postMessage(obj);
  } else if (obj.action === "init" || obj.action === "chatMsg") {
    port.postMessage(obj);
  }
});

self.onmessage = (e) => {
  console.log(e.origin);
  port = e.ports[0];
};
```

仕様書
---

| Specification |
| --- |
| Service Workers # extendablemessage-event-origin |

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

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

関連情報
----

* サービスワーカーの使用
* サービスワーカーの基本的なコード例（英語）
* ServiceWorker の準備はできていますか？（英語）
* チャンネルメッセージング
ExtendableMessageEvent.source
=============================

**`source`** は `ExtendableMessageEvent` インターフェイスの読み取り専用プロパティで、メッセージの送信元の `Client` オブジェクトへの参照を返します。

値
-

`Client`、`ServiceWorker`、`MessagePort` の何れかのオブジェクトです。

例
-

次のコードをサービスワーカー内で使用して、`PushMessageData` を介して受信したデータをチャンネルメッセージを介してメインコンテキストに送信することにより、プッシュメッセージに応答する場合、`onmessage` のイベントオブジェクトは `ExtendableMessageEvent` になります。


```js
let port;

self.addEventListener("push", (e) => {
  const obj = e.data.json();

  if (obj.action === "subscribe" || obj.action === "unsubscribe") {
    port.postMessage(obj);
  } else if (obj.action === "init" || obj.action === "chatMsg") {
    port.postMessage(obj);
  }
});

self.onmessage = (e) => {
  console.log(e.source);
  port = e.ports[0];
};
```

仕様書
---

| Specification |
| --- |
| Service Workers # extendablemessage-event-source |

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

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

関連情報
----

* サービスワーカーの使用
* サービスワーカーの基本的なコード例（英語）
* ServiceWorker の準備はできていますか？（英語）
* チャンネルメッセージング
ExtendableMessageEvent()
========================

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

構文
--


```js
new ExtendableMessageEvent(type)
new ExtendableMessageEvent(type, options)
```

### 引数

`type`

 文字列で、イベントの名前です。
 大文字小文字を区別し、ブラウザーは `messageerror` または `message` を設定します。


`options` 省略可

*`ExtendableEvent()` で定義されたプロパティに加えて*、下記のプロパティを持つオブジェクトです。

`data` 省略可

イベントのデータです。これはどのデータ型でもかまいません。既定値は `null` です。

`origin` 省略可

 文字列で、対応するサービスワーカーの環境設定オブジェクトのオリジンを定義します。
 既定値は `""` です。


`lastEventId` 省略可

文字列で、イベントソースの最後のイベント ID を定義します。

`source` 省略可

 メッセージを送信した `Client`、`ServiceWorker`、`MessagePort` のいずれかです。
 既定値は `null` です。


`ports` 省略可

 メッセージを送信するチャネルに接続された `MessagePort` オブジェクトを含む配列です。
 既定値は空の配列です。



### 返値

新しい `ExtendableMessageEvent` オブジェクトです。

例
-


```js
const options = {
  data: "hello message",
  source: MessagePortReference,
  ports: MessagePortListReference,
};

const myEME = new ExtendableMessageEvent("message", init);
```

仕様書
---

| Specification |
| --- |
| Service Workers # dom-extendablemessageevent-extendablemessageevent |

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

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

関連情報
----

* サービスワーカーの使用
* サービスワーカーの基本的なコード例（英語）
* ServiceWorker の準備はできていますか？（英語）
* チャンネルメッセージング
ExtendableMessageEvent.data
===========================

**`data`** は `ExtendableMessageEvent` インターフェイスの読み取り専用プロパティで、イベントのデータを返します。任意のデータ型を使用できます。

### 値

任意のデータ型です。

例
-

次のコードをサービスワーカー内で使用して、 `PushMessageData` を介して受信したデータをチャンネルメッセージを介してメインコンテキストに送信することにより、プッシュメッセージに応答する場合、`onmessage` のイベントオブジェクトは `ExtendableMessageEvent` になります。


```js
let port;

self.addEventListener("push", (e) => {
  const obj = e.data.json();

  if (obj.action === "subscribe" || obj.action === "unsubscribe") {
    port.postMessage(obj);
  } else if (obj.action === "init" || obj.action === "chatMsg") {
    port.postMessage(obj);
  }
});

self.onmessage = (e) => {
  console.log(e.data);
  port = e.ports[0];
};
```

仕様書
---

| Specification |
| --- |
| Service Workers # extendablemessage-event-data |

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

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

関連情報
----

* サービスワーカーの使用
* サービスワーカーの基本的なコード例（英語）
* ServiceWorker の準備はできていますか？（英語）
* チャンネルメッセージング
ExtendableMessageEvent.lastEventId
==================================

**`lastEventID`** は `ExtendableMessageEvent` インターフェイスの読み取り専用プロパティで、サーバー送信イベントにおける、イベントソースの最後のイベント ID を表します。 これは空の文字列です。

値
-

文字列です。

例
-

次のコードをサービスワーカー内で使用して、`PushMessageData` を介して受信したデータをチャンネルメッセージを介してメインコンテキストに送信することにより、プッシュメッセージに応答する場合、`onmessage` のイベントオブジェクトは `ExtendableMessageEvent` になります。


```js
let port;

self.addEventListener("push", (e) => {
  const obj = e.data.json();

  if (obj.action === "subscribe" || obj.action === "unsubscribe") {
    port.postMessage(obj);
  } else if (obj.action === "init" || obj.action === "chatMsg") {
    port.postMessage(obj);
  }
});

self.onmessage = (e) => {
  console.log(e.lastEventId);
  port = e.ports[0];
};
```

仕様書
---

| Specification |
| --- |
| Service Workers # extendablemessage-event-lasteventid |

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

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

関連情報
----

* サービスワーカーの使用
* サービスワーカーの基本的なコード例（英語）
* ServiceWorker の準備はできていますか？（英語）
* チャンネルメッセージング
ファイルとディレクトリー項目 API の Firefox における対応
===================================

元のファイルシステム API は、ユーザーのストレージ機器上のサンドボックス化された仮想ファイルシステムにアクセスする対応をブラウザーの実装するために作成されたものです。この仕様を標準化する作業は 2012 年に中止されましたが、この時点では Google Chrome が API を独自に実装していました。時間が経つにつれ、多くの人気サイトやウェブ標準アプリケーションがこの API を使用するようになりましたが、標準 API にフォールバックする手段や、API が利用可能かどうかを使用前に確認することすら提供されないことが多くありました。Mozilla は代わりに、同じ問題の多くを解決するために使用できる他の API、例えば IndexedDB を実装することを選択しました。詳細については、ブログ記事 Why no FileSystem API in Firefox? をご覧ください。

このため、Chrome 以外のブラウザーでは、多くの人気ウェブサイトが正しく動作しない問題が発生しました。そのため、Google の API の機能を提供し、コンセンサスを得ることができる仕様を作成する試みが行われました。その結果、ファイルとディレクトリー項目 API が誕生しました。Chrome が提供する API のサブセットであり、まだ完全に仕様化されていません。しかし、ウェブの互換性の観点から、この API のサブセットを Firefox で実装することが決定され、Firefox 50 で導入されました。

この記事では、ファイルとディレクトリー項目 API の Firefox の実装が、他の実装や仕様とどのように異なるかを記述しています。

仕様から外れた Chrome
--------------

まだ残っている最大の互換性課題は、Chrome が API 内の多くのインターフェイスに、関連しているものの異なる仕様を実装したため、古い名称を使用していることです。

| 仕様書での名前 | Google Chrome での名前 |
| --- | --- |
| `FileSystemDirectoryEntry` | `DirectoryEntry` |
| `FileSystemDirectoryEntrySync` | `DirectoryEntrySync` |
| `FileSystemDirectoryReader` | `DirectoryReader` |
| `FileSystemDirectoryReaderSync` | `DirectoryReaderSync` |
| `FileSystemEntry` | `Entry` |
| `FileSystemEntrySync` | `EntrySync` |
| `FileSystemFileEntry` | `FileEntry` |
| `FileSystemFileEntrySync` | `FileEntrySync` |

コードでは、両方の名前を使用できるようにすることで、この点を考慮するようにしてください。Chrome が近いうちに、新しい名前を使用するように更新されることを期待します。

以下のようにすることで、コードが Chrome と他のブラウザーの両方で確実に動作するようになります。


```js
const FileSystemDirectoryEntry =
  window.FileSystemDirectoryEntry || window.DirectoryEntry;
const FileSystemEntry = window.FileSystemEntry || window.Entry;
```

Firefox での制限
------------

次に、Firefox に実装されている API の制限について見ていきましょう。大まかに言えば、それらの制限は以下のようにまとめられます。

* コンテンツスクリプトは、ファイルシステムを作成したり、ファイルシステムへのアクセスを開始することはできません。ファイルシステムの項目にアクセスする方法は、現時点では 2 つしかありません。
    + `<input>` 要素で、`HTMLInputElement.webkitEntries` プロパティを使用して、読み込めるファイルシステム項目を示す `FileSystemEntry` (en-US) オブジェクトの配列にアクセスする。
    + ドラッグ＆ドロップを使用する場合、`DataTransferItem.webkitGetAsEntry`メソッドを呼び出すことで、ドロップゾーンにドロップしたファイルの`FileSystemFileEntry`または`FileSystemDirectoryEntry`を取得することができる。
* Firefox は `"filesystem:"` URL スキームに対応していません。
関連情報
----

* ファイルとディレクトリー項目 API
* ファイルとディレクトリー項目 API の紹介
* File and Directory Entries API 仕様書
* 元の仕様書である File API: Directories and System （"FileSystem API" と呼ばれる）。Google Chrome はこの**放棄された** API を実装している唯一のブラウザーです。
DataTransferItem.getAsFileSystemHandle()
========================================

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

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

**`getAsFileSystemHandle()`** は `DataTransferItem` インターフェイスのメソッドで、ドラッグ中の項目がファイルであれば `FileSystemFileHandle` を、ドラッグ中の項目がディレクトリーであれば `FileSystemDirectoryHandle` を返します。

構文
--


```js
getAsFileSystemHandle()
```

### 引数

なし。

### 返値

`Promise` で、`FileSystemFileHandle` または `FileSystemDirectoryHandle` で履行されます。

### 例外

なし。

例
-

この例では、`getAsFileSystemHandle` メソッドを使用して、ドロップした項目に対して `ファイルハンドル` を返します。


```js
elem.addEventListener("dragover", (e) => {
  // ナビゲーションを防ぐ
  e.preventDefault();
});
elem.addEventListener("drop", async (e) => {
  // ナビゲーションを防ぐ
  e.preventDefault();

  // すべてのアイテムを処理する
  for (const item of e.dataTransfer.items) {
    // ファイルやディレクトリーの項目では、kind は 'file' になる
    if (item.kind === "file") {
      const entry = await item.getAsFileSystemHandle();
      if (entry.kind === "file") {
        // 項目がファイルのとき、コードを実行する
      } else if (entry.kind === "directory") {
        // 項目がディレクトリーのとき、コードを実行する
      }
    }
  }
});
```

仕様書
---

| Specification |
| --- |
| File System Access # dom-datatransferitem-getasfilesystemhandle |

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

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

関連情報
----

* ファイルシステムアクセス API
* The File System Access API: simplifying access to local files