Skip to content

Commit 3e18b4c

Browse files
2023/10/26 時点の英語版に基づき更新 (#17229)
* 2023/10/26 時点の英語版に基づき更新 * 2023/10/26 時点の英語版に基づき新規翻訳 * ヘッダー部分の更新忘れを修正 * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
1 parent 7908a22 commit 3e18b4c

File tree

2 files changed

+223
-37
lines changed

2 files changed

+223
-37
lines changed

files/ja/web/api/file_system_api/index.md

+24-37
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,54 @@
11
---
2-
title: File System Access API
2+
title: ファイルシステム API
33
slug: Web/API/File_System_API
4+
l10n:
5+
sourceCommit: 835d6632d59993861a0458510402787f8a2c3cb3
46
---
57

6-
{{securecontext_header}}{{DefaultAPISidebar("File System Access API")}}
8+
{{securecontext_header}}{{DefaultAPISidebar("File System API")}}
79

8-
File System Access API により、ファイルの読み込み、書き込み、管理ができます
10+
ファイルシステム API は - [ファイルシステムアクセス API](https://wicg.github.io/file-system-access/) を介して提供される拡張機能により - 端末のファイルシステム上のファイルにアクセスし、読み取り、書き込み、ファイル管理機能を使用することができます
911

1012
## 概念と使用法
1113

12-
この API を用いると、ユーザーのローカルデバイス上のファイルや、ユーザーがアクセス可能なネットワークファイルシステムを操作することができます。この API の基本機能として、ファイルの読み込み、ファイルの書き込み (保存)、ディレクトリー構造へのアクセスがあります。
14+
この API を用いると、ユーザーのローカルデバイス上のファイルや、ユーザーがアクセス可能なネットワークファイルシステムを操作することができます。この API の基本機能として、ファイルの読み込み、ファイルの書き込み(保存)、ディレクトリー構造へのアクセスがあります。
1315

1416
ファイルやディレクトリーの操作のほとんどは、ハンドルを介して行います。親クラスの {{domxref('FileSystemHandle')}} の補助により {{domxref('FileSystemFileHandle')}} および {{domxref('FileSystemDirectoryHandle')}} の 2 個の子クラスが定義されており、それぞれファイルおよびディレクトリーの操作に用います。
1517

1618
ハンドルは、ユーザーのシステム上のファイルやディレクトリーを表します。まず、{{domxref('window.showOpenFilePicker()')}} や {{domxref('window.showDirectoryPicker()')}} などのメソッドを用いてユーザーにファイルピッカーまたはディレクトリーピッカーを表示し、ファイルやディレクトリーへのアクセス権を得ることができます。これらのメソッドが呼ばれると、ファイルピッカーが現れ、ユーザーがファイルまたはディレクトリーを選択します。この流れがうまくいくと、ハンドルが返されます。
1719

1820
以下の方法によりファイルハンドルへのアクセス権を得ることもできます。
1921

20-
- {{domxref('HTML Drag and Drop API', 'HTML Drag and Drop API', '', 'nocode')}} の {{domxref('DataTransferItem.getAsFileSystemHandle()')}} メソッド
21-
- [File Handling API](https://developer.chrome.com/en/articles/file-handling/)
22+
- {{domxref('HTML Drag and Drop API', 'HTML ドラッグ&ドロップ API', '', 'nocode')}} の {{domxref('DataTransferItem.getAsFileSystemHandle()')}} メソッド
23+
- [ファイルハンドリング API](https://developer.chrome.com/en/articles/file-handling/)
2224

23-
それぞれのハンドルが自身の機能を提供し、どっちを使っているかによって少し違いがあります。(詳細は、[インターフェイス](#%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A7%E3%82%A4%E3%82%B9)の節を参照してください) ファイルのデータや、選択されたディレクトリーの情報 (子を含む) にアクセスできます。この API により、ウェブに欠けていた潜在的な機能への道が開きます。それでも、セキュリティは API の設計時に最大限考慮するべきことであり、ファイルやディレクトリーのデータへのアクセスはユーザーが特に許可しない限り禁止されています。
25+
それぞれのハンドルが自身の機能を提供し、どっちを使っているかによって少し違いがあります詳細は、[インターフェイス](#%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A7%E3%82%A4%E3%82%B9)の節を参照してください)。ファイルのデータや、選択されたディレクトリーの情報子を含むにアクセスできます。この API により、ウェブに欠けていた潜在的な機能への道が開きます。それでも、セキュリティは API の設計時に最大限考慮するべきことであり、ファイルやディレクトリーのデータへのアクセスはユーザーが特に許可しない限り禁止されています(これは、ユーザーから見えない[オリジンプライベートファイルシステム](#オリジンプライベートファイルシステム)の場合とは異なります)
2426

25-
> **メモ:** API の機能を使う際に投げられる可能性がある例外は、仕様書での定義に沿って関連するページに一覧が載っています。しかし、API と下層のオペレーティングシステムの相互作用により、状況はより複雑になります。[仕様書でエラーの対応関係を一覧にする](https://github.com/whatwg/fs/issues/57)ための提案がなされており、ここに有用な関連情報があります。
27+
> **メモ:** API の機能を使う際に投げられる可能性がある例外は、仕様書での定義に沿って関連するページに一覧が載っています。しかし、 API と下層のオペレーティングシステムの相互作用により、状況はより複雑になります。[仕様書でエラーの対応関係を一覧にする](https://github.com/whatwg/fs/issues/57)ための提案がなされており、ここに有用な関連情報があります。
2628
2729
> **メモ:** {{domxref("FileSystemHandle")}} をベースとするオブジェクトは、{{domxref("IndexedDB API", "IndexedDB", "", "nocode")}} のデータベースのインスタンスにシリアライズしたり、{{domxref("window.postMessage", "postMessage()")}} を介して転送したりできます。
2830
2931
### オリジンプライベートファイルシステム
3032

31-
[オリジンプライベートファイルシステム (OPFS)](https://fs.spec.whatwg.org/#origin-private-file-system) は、ページのオリジン固有のストレージのエンドポイントであり、パフォーマンスに高度に最適化された特別な種類のファイルへのアクセスを選択可能です。例えば、ファイルの内容を in-place で排他的に書き換えることができます。
33+
オリジンプライベートファイルシステム (OPFS) は、ページのオリジン固有のストレージのエンドポイントであり、パフォーマンスに高度に最適化された特別な種類のファイルへのアクセスを選択可能です。例えば、ファイルの内容をその場 (in-place) で排他的に書き換えることができます。
3234

33-
OPFS へのファイルの保存は、({{domxref("IndexedDB API", "IndexedDB API", "", "nocode")}} などの) ブラウザーが提供する他のページのオリジンに固有のデータを保存する仕組みに似ています。すなわち、OPFS 内のファイルは、ピッカーを用いて選択されたファイルとは以下の点で異なります。
34-
35-
- OPFS 内のファイルへのアクセスには、許可の要求は必要ありません。
36-
- サイトのデータを消去すると、OPFS も消去されます。
37-
- OPFS は、ブラウザーが使う容量の制限の対象になります。
38-
39-
OPFS 内のファイルは、以下の 3 ステップで操作できます。
40-
41-
1. (ワーカーやメインスレッドで [`navigator.storage.getDirectory()`](/ja/docs/Web/API/Navigator/storage) で得られる) {{domxref("StorageManager.getDirectory()")}} メソッドを呼び、ディレクトリーとその中身にアクセスするための {{domxref("FileSystemDirectoryHandle")}} オブジェクトへの参照を得ます。これは、OPFS のルートを表します。
42-
2. {{domxref("FileSystemDirectoryHandle.getFileHandle()")}} メソッドを呼び、ディレクトリ内の特定のファイルのハンドルを表す {{domxref('FileSystemFileHandle')}} オブジェクトを得ます。
43-
3. そのファイルハンドルで {{domxref('FileSystemFileHandle.createSyncAccessHandle', 'createSyncAccessHandle()')}} メソッドを呼び、ファイルの読み書きに利用できる {{domxref('FileSystemSyncAccessHandle')}} オブジェクトを得ます。これは、_同期式の_ 読み書き操作を行うための高効率なハンドルです。(他のハンドルの種類では非同期です) このクラスの同期式であるという性質は、([WebAssembly](/ja/docs/WebAssembly) などの) 非同期の操作が大きなオーバーヘッドに繋がる状況での使用を意図した、パフォーマンスの優位性をもたらします。なお、これはそれ用の [Web Workers](/ja/docs/Web/API/Web_Workers_API) 内でのみ使用可能です。
44-
45-
ブラウザーは通常 OPFS の内容をディスク上のどこかに保存して永続化することで実装しますが、これは内容にユーザーが簡単にアクセスできるようにすることを意図したものではありません。ブラウザーはファイルがあるように見せるかもしれない一方、データベースや他の任意のデータ構造に保存されているかも知れません。作成したファイルがハードディスク上のどこかに 1 対 1 対応で置かれていることを期待することはできません。
46-
47-
> **メモ:** {{domxref('FileSystemSyncAccessHandle.write()')}} による書き込みは in-place で行われます。すなわち、変更は writer に書き込まれると同時に実際の対応するファイルに書き込まれます。これは ({{domxref('FileSystemFileHandle.createWritable()')}} などの) この API で利用可能な書き込みのための他の仕組みでは成り立たず、書き込みストリームが閉じられるまで変更はディスクに書き込まれません。
35+
使い方の説明は、[オリジンプライベートファイルシステム](/ja/docs/Web/API/File_System_API/Origin_private_file_system)を読んでください。
4836

4937
### ファイルの保存
5038

51-
「保存」の機能があります。
52-
5339
- 非同期ハンドルでは、{{domxref('FileSystemWritableFileStream')}} インターフェイスを使います。保存したいデータを {{domxref('Blob')}}、{{jsxref("String")}} オブエクト、文字列リテラル、{{jsxref('ArrayBuffer', 'buffer')}} のいずれかの形式にしたら、ストリームを開いてデータをファイルに保存できます。既存のファイルも新しいファイルも保存先にできます。
54-
- 同期式の {{domxref('FileSystemSyncAccessHandle')}} では、{{domxref('FileSystemSyncAccessHandle.write', 'write()')}} メソッドを用いて変更をファイルに書き込みます。特定のタイミングで変更をディスクに書き込みたい場合は、{{domxref('FileSystemSyncAccessHandle.flush', 'flush()')}} を呼ぶことができます。(これを呼ばない場合、下層のオペレーティングシステムに任せて都合のいいときに処理させることができ、ほとんどの場合はこれでいいでしょう)
40+
- 同期的に {{domxref('FileSystemSyncAccessHandle')}} では、{{domxref('FileSystemSyncAccessHandle.write', 'write()')}} メソッドを用いて変更をファイルに書き込みます。特定のタイミングで変更をディスクに書き込みたい場合は、{{domxref('FileSystemSyncAccessHandle.flush', 'flush()')}} を呼ぶことができます。(これを呼ばない場合、下層のオペレーティングシステムに任せて都合のいいときに処理させることができ、ほとんどの場合はこれでいいでしょう)
5541

5642
## インターフェイス
5743

5844
- {{domxref("FileSystemHandle")}}
59-
- : **`FileSystemHandle`** インターフェイスは、エントリーを表すオブジェクトです。複数のハンドルが同じエントリーを表すことがあります。ほとんどの場面では、`FileSystemHandle` を直接扱うことはなく、子インターフェイスの {{domxref('FileSystemFileHandle')}} や {{domxref('FileSystemDirectoryHandle')}} を扱うことになるでしょう。
45+
- : **`FileSystemHandle`** インターフェイスは、項目を表すオブジェクトです。複数のハンドルが同じ項目を表すことがあります。ほとんどの場面では、`FileSystemHandle` を直接扱うことはなく、子インターフェイスの {{domxref('FileSystemFileHandle')}} や {{domxref('FileSystemDirectoryHandle')}} を扱うことになるでしょう。
6046
- {{domxref("FileSystemFileHandle")}}
61-
- : ファイルシステムのエントリーを表すハンドルを提供します
47+
- : ファイルシステムの項目を表すハンドルを提供します
6248
- {{domxref("FileSystemDirectoryHandle")}}
6349
- : ファイルシステムのディレクトリーを表すハンドルを提供します。
6450
- {{domxref("FileSystemSyncAccessHandle")}}
65-
- : ディスク上の単一のファイルを in-place で操作する、ファイルシステムのエントリーへの同期式のハンドルを提供します。このファイルの読み書きを同期式で行える性質は[WebAssembly](/ja/docs/WebAssembly) などの非同期操作が大きなオーバーヘッドに繋がる場面における重要なメソッドで処理効率を高めることを可能にします。このクラスは、それ用の [Web Workers](/ja/docs/Web/API/Web_Workers_API) 内で[オリジンプライベートファイルシステム](#%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%B3%E3%83%97%E3%83%A9%E3%82%A4%E3%83%99%E3%83%BC%E3%83%88%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0)内のファイルを扱う場合のみ使用可能です。
51+
- : ディスク上の単一のファイルをその場 (in-place) で操作する、ファイルシステムの項目への同期的にハンドルを提供します。このファイルの読み書きを同期的に行える性質は[WebAssembly](/ja/docs/WebAssembly) などの非同期操作が大きなオーバーヘッドに繋がる場面における重要なメソッドで処理効率を高めることを可能にします。このクラスは、それ用の[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)内で[オリジンプライベートファイルシステム](#オリジンプライベートファイルシステム)内のファイルを扱う場合のみ使用可能です。
6652
- {{domxref("FileSystemWritableFileStream")}}
6753
- : ディスク上の単一のファイルを操作する便利な関数が追加された {{domxref('WritableStream')}} です。
6854

@@ -137,7 +123,7 @@ async function returnPathDirectories(directoryHandle) {
137123
// relativePaths は、相対パスを表す名前の配列
138124

139125
for (const name of relativePaths) {
140-
// 各エントリーを記録する
126+
// 各項目を記録する
141127
console.log(name);
142128
}
143129
}
@@ -182,13 +168,13 @@ writableStream.write({ type: "seek", position });
182168
writableStream.write({ type: "truncate", size });
183169
```
184170

185-
### OPFS 内のファイルを同期式で読み書きする
171+
### OPFS 内のファイルを同期的に読み書きする
186172

187-
この例では、[オリジンプライベートファイルシステム](#%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%B3%E3%83%97%E3%83%A9%E3%82%A4%E3%83%99%E3%83%BC%E3%83%88%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0) 内のファイルを同期式で読み書きします
173+
この例では、[オリジンプライベートファイルシステム](#オリジンプライベートファイルシステム)内のファイルを同期的に読み書きします
188174

189175
以下の非同期のイベントハンドラー関数は、ウェブワーカー内にあります。メインスレッドからメッセージを受信した時、以下の処理をします。
190176

191-
- 同期式のファイルアクセスハンドルを生成する
177+
- 同期的にファイルアクセスハンドルを生成する
192178
- ファイルのサイズを取得し、格納するための {{jsxref("ArrayBuffer")}} を生成する
193179
- ファイルの内容をバッファーに読み込む
194180
- メッセージをエンコードし、ファイルの最後に書き込む
@@ -202,7 +188,7 @@ onmessage = async (e) => {
202188
// OPFS 内の draft ファイルのハンドルを得る
203189
const root = await navigator.storage.getDirectory();
204190
const draftHandle = await root.getFileHandle("draft.txt", { create: true });
205-
// 同期式のアクセスハンドルを得る
191+
// 同期的にアクセスハンドルを得る
206192
const accessHandle = await draftHandle.createSyncAccessHandle();
207193

208194
// ファイルのサイズを得る
@@ -224,7 +210,7 @@ onmessage = async (e) => {
224210
};
225211
```
226212

227-
> **メモ:** 仕様書の以前のバージョンでは、{{domxref("FileSystemSyncAccessHandle.close()", "close()")}}{{domxref("FileSystemSyncAccessHandle.flush()", "flush()")}}{{domxref("FileSystemSyncAccessHandle.getSize()", "getSize()")}}{{domxref("FileSystemSyncAccessHandle.truncate()", "truncate()")}} は人間工学に反して非同期メソッドとされていました。これは現在では[変更されています](https://github.com/whatwg/fs/issues/7)が、まだ非同期バージョンをサポートしているブラウザーもあります。
213+
> **メモ:** 仕様書の以前のバージョンでは、{{domxref("FileSystemSyncAccessHandle.close()", "close()")}}{{domxref("FileSystemSyncAccessHandle.flush()", "flush()")}}{{domxref("FileSystemSyncAccessHandle.getSize()", "getSize()")}}{{domxref("FileSystemSyncAccessHandle.truncate()", "truncate()")}} は人間工学に反して非同期メソッドとされていました。これは現在では[変更されています](https://github.com/whatwg/fs/issues/7)が、まだ非同期バージョンをサポートしているブラウザーもあります。
228214
229215
## 仕様書
230216

@@ -236,4 +222,5 @@ onmessage = async (e) => {
236222

237223
## 関連情報
238224

239-
- [The File System Access API: simplifying access to local files](https://web.dev/file-system-access/)
225+
- [The File System Access API: simplifying access to local files](https://developer.chrome.com/articles/file-system-access/) (web.dev)
226+
- [The origin private file system](https://web.dev/articles/origin-private-file-system) (web.dev)

0 commit comments

Comments
 (0)