1
1
---
2
- title : File System Access API
2
+ title : ファイルシステム API
3
3
slug : Web/API/File_System_API
4
+ l10n :
5
+ sourceCommit : 835d6632d59993861a0458510402787f8a2c3cb3
4
6
---
5
7
6
- {{securecontext_header}}{{DefaultAPISidebar("File System Access API")}}
8
+ {{securecontext_header}}{{DefaultAPISidebar("File System API")}}
7
9
8
- File System Access API により、ファイルの読み込み 、書き込み、管理ができます 。
10
+ ファイルシステム API は - [ ファイルシステムアクセス API] ( https://wicg.github.io/file-system-access/ ) を介して提供される拡張機能により - 端末のファイルシステム上のファイルにアクセスし、読み取り 、書き込み、ファイル管理機能を使用することができます 。
9
11
10
12
## 概念と使用法
11
13
12
- この API を用いると、ユーザーのローカルデバイス上のファイルや、ユーザーがアクセス可能なネットワークファイルシステムを操作することができます。この API の基本機能として、ファイルの読み込み、ファイルの書き込み (保存) 、ディレクトリー構造へのアクセスがあります。
14
+ この API を用いると、ユーザーのローカルデバイス上のファイルや、ユーザーがアクセス可能なネットワークファイルシステムを操作することができます。この API の基本機能として、ファイルの読み込み、ファイルの書き込み(保存) 、ディレクトリー構造へのアクセスがあります。
13
15
14
16
ファイルやディレクトリーの操作のほとんどは、ハンドルを介して行います。親クラスの {{domxref('FileSystemHandle')}} の補助により {{domxref('FileSystemFileHandle')}} および {{domxref('FileSystemDirectoryHandle')}} の 2 個の子クラスが定義されており、それぞれファイルおよびディレクトリーの操作に用います。
15
17
16
18
ハンドルは、ユーザーのシステム上のファイルやディレクトリーを表します。まず、{{domxref('window.showOpenFilePicker()')}} や {{domxref('window.showDirectoryPicker()')}} などのメソッドを用いてユーザーにファイルピッカーまたはディレクトリーピッカーを表示し、ファイルやディレクトリーへのアクセス権を得ることができます。これらのメソッドが呼ばれると、ファイルピッカーが現れ、ユーザーがファイルまたはディレクトリーを選択します。この流れがうまくいくと、ハンドルが返されます。
17
19
18
20
以下の方法によりファイルハンドルへのアクセス権を得ることもできます。
19
21
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/ )
22
24
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 の設計時に最大限考慮するべきことであり、ファイルやディレクトリーのデータへのアクセスはユーザーが特に許可しない限り禁止されています(これは、ユーザーから見えない [ オリジンプライベートファイルシステム ] ( #オリジンプライベートファイルシステム ) の場合とは異なります) 。
24
26
25
- > ** メモ:** API の機能を使う際に投げられる可能性がある例外は、仕様書での定義に沿って関連するページに一覧が載っています。しかし、API と下層のオペレーティングシステムの相互作用により、状況はより複雑になります。[ 仕様書でエラーの対応関係を一覧にする] ( https://github.com/whatwg/fs/issues/57 ) ための提案がなされており、ここに有用な関連情報があります。
27
+ > ** メモ:** API の機能を使う際に投げられる可能性がある例外は、仕様書での定義に沿って関連するページに一覧が載っています。しかし、 API と下層のオペレーティングシステムの相互作用により、状況はより複雑になります。[ 仕様書でエラーの対応関係を一覧にする] ( https://github.com/whatwg/fs/issues/57 ) ための提案がなされており、ここに有用な関連情報があります。
26
28
27
29
> ** メモ:** {{domxref("FileSystemHandle")}} をベースとするオブジェクトは、{{domxref("IndexedDB API", "IndexedDB", "", "nocode")}} のデータベースのインスタンスにシリアライズしたり、{{domxref("window.postMessage", "postMessage()")}} を介して転送したりできます。
28
30
29
31
### オリジンプライベートファイルシステム
30
32
31
- [ オリジンプライベートファイルシステム (OPFS)] ( https://fs.spec.whatwg.org/#origin-private-file-system ) は、ページのオリジン固有のストレージのエンドポイントであり、パフォーマンスに高度に最適化された特別な種類のファイルへのアクセスを選択可能です。例えば、ファイルの内容を in-place で排他的に書き換えることができます。
33
+ オリジンプライベートファイルシステム (OPFS) は、ページのオリジン固有のストレージのエンドポイントであり、パフォーマンスに高度に最適化された特別な種類のファイルへのアクセスを選択可能です。例えば、ファイルの内容をその場 ( in-place) で排他的に書き換えることができます。
32
34
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 ) を読んでください。
48
36
49
37
### ファイルの保存
50
38
51
- 「保存」の機能があります。
52
-
53
39
- 非同期ハンドルでは、{{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()')}} を呼ぶことができます。(これを呼ばない場合、下層のオペレーティングシステムに任せて都合のいいときに処理させることができ、ほとんどの場合はこれでいいでしょう)
55
41
56
42
## インターフェイス
57
43
58
44
- {{domxref("FileSystemHandle")}}
59
- - : ** ` FileSystemHandle ` ** インターフェイスは、エントリーを表すオブジェクトです。複数のハンドルが同じエントリーを表すことがあります 。ほとんどの場面では、` FileSystemHandle ` を直接扱うことはなく、子インターフェイスの {{domxref('FileSystemFileHandle')}} や {{domxref('FileSystemDirectoryHandle')}} を扱うことになるでしょう。
45
+ - : ** ` FileSystemHandle ` ** インターフェイスは、項目を表すオブジェクトです。複数のハンドルが同じ項目を表すことがあります 。ほとんどの場面では、` FileSystemHandle ` を直接扱うことはなく、子インターフェイスの {{domxref('FileSystemFileHandle')}} や {{domxref('FileSystemDirectoryHandle')}} を扱うことになるでしょう。
60
46
- {{domxref("FileSystemFileHandle")}}
61
- - : ファイルシステムのエントリーを表すハンドルを提供します 。
47
+ - : ファイルシステムの項目を表すハンドルを提供します 。
62
48
- {{domxref("FileSystemDirectoryHandle")}}
63
49
- : ファイルシステムのディレクトリーを表すハンドルを提供します。
64
50
- {{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 ) 内で[ オリジンプライベートファイルシステム] ( #オリジンプライベートファイルシステム ) 内のファイルを扱う場合のみ使用可能です。
66
52
- {{domxref("FileSystemWritableFileStream")}}
67
53
- : ディスク上の単一のファイルを操作する便利な関数が追加された {{domxref('WritableStream')}} です。
68
54
@@ -137,7 +123,7 @@ async function returnPathDirectories(directoryHandle) {
137
123
// relativePaths は、相対パスを表す名前の配列
138
124
139
125
for (const name of relativePaths) {
140
- // 各エントリーを記録する
126
+ // 各項目を記録する
141
127
console .log (name);
142
128
}
143
129
}
@@ -182,13 +168,13 @@ writableStream.write({ type: "seek", position });
182
168
writableStream .write ({ type: " truncate" , size });
183
169
```
184
170
185
- ### OPFS 内のファイルを同期式で読み書きする
171
+ ### OPFS 内のファイルを同期的に読み書きする
186
172
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
+ この例では、[ オリジンプライベートファイルシステム] ( #オリジンプライベートファイルシステム ) 内のファイルを同期的に読み書きします 。
188
174
189
175
以下の非同期のイベントハンドラー関数は、ウェブワーカー内にあります。メインスレッドからメッセージを受信した時、以下の処理をします。
190
176
191
- - 同期式のファイルアクセスハンドルを生成する
177
+ - 同期的にファイルアクセスハンドルを生成する
192
178
- ファイルのサイズを取得し、格納するための {{jsxref("ArrayBuffer")}} を生成する
193
179
- ファイルの内容をバッファーに読み込む
194
180
- メッセージをエンコードし、ファイルの最後に書き込む
@@ -202,7 +188,7 @@ onmessage = async (e) => {
202
188
// OPFS 内の draft ファイルのハンドルを得る
203
189
const root = await navigator .storage .getDirectory ();
204
190
const draftHandle = await root .getFileHandle (" draft.txt" , { create: true });
205
- // 同期式のアクセスハンドルを得る
191
+ // 同期的にアクセスハンドルを得る
206
192
const accessHandle = await draftHandle .createSyncAccessHandle ();
207
193
208
194
// ファイルのサイズを得る
@@ -224,7 +210,7 @@ onmessage = async (e) => {
224
210
};
225
211
```
226
212
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 ) が、まだ非同期バージョンをサポートしているブラウザーもあります。
228
214
229
215
## 仕様書
230
216
@@ -236,4 +222,5 @@ onmessage = async (e) => {
236
222
237
223
## 関連情報
238
224
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