File System Access API: ローカル ファイルへのアクセスを簡素化

File System Access API を使用すると、ウェブアプリでユーザーのデバイス上のファイルとフォルダの変更の読み取りや保存を直接行うことができます。

File System Access API とは

File System Access API を使用すると、Google Cloud とやり取りする強力なウェブアプリを ユーザーのローカル デバイス上のファイル(IDE、写真と動画のエディタ、テキスト エディタなど)変更後 この API を使用すると、ファイルの変更を直接読み取ったり保存したりできるほか、 自動的に表示されます。File System Access API は、ファイルを読み書きするだけでなく、 ディレクトリを開き、その内容を列挙する機能。

これまでにファイルの読み書きに関わったことがある方は、これから紹介する内容の大部分が、 見慣れたものですすべてのシステムに同じものはないので、いずれにしても読んでおくことをおすすめします。

File System Access API は、 Windows、macOS、ChromeOS、Linux です。注目すべき例外は Brave で 現時点ではフラグなしで利用可能です。crbug.com/1011535 では現在、Android のサポートに取り組んでおります。

File System Access API の使用

File System Access API のパワーと有用性を示すために、私は 1 つのファイルテキストを作成しました。 エディタ。テキスト ファイルを開いたり、編集したり、変更内容をディスクに保存したり、 新しいファイルを作成して変更をディスクに保存します。見た目は良くありませんが 理解することが重要です。

ブラウザ サポート

対応ブラウザ

  • Chrome: 86。 <ph type="x-smartling-placeholder">
  • Edge: 86。 <ph type="x-smartling-placeholder">
  • Firefox: サポートされていません。 <ph type="x-smartling-placeholder">
  • Safari: サポートされていません。 <ph type="x-smartling-placeholder">

ソース

機能検出

File System Access API がサポートされているかどうかを確認するには、選択ツールメソッドがサポートされているかどうかを確認してください あるとします

if ('showOpenFilePicker' in self) {
  // The `showOpenFilePicker()` method of the File System Access API is supported.
}

試してみる

File System Access API の動作については、コースリソースにある テキスト エディタのデモ。

ローカル ファイル システムからファイルを読み取る

1 つ目のユースケースは、ユーザーにファイルを選択してもらい、それを開いて読むことです。 表示されます。

読み取るファイルを選択するようユーザーに依頼する

File System Access API のエントリ ポイントは、 window.showOpenFilePicker()。この関数が呼び出されると、ファイル選択ツール ダイアログが表示されます。 ユーザーにファイルの選択を求めるメッセージが表示されます。ファイルを選択すると、API からファイルの配列が返されます。 使用できます。オプションの options パラメータを使用すると、ファイル選択ツールの動作を変更できます。 たとえば、ユーザーが複数のファイルやディレクトリ、異なるファイル形式を選択できるようにします。 オプションを指定しないと、ファイル選択ツールでユーザーは 1 つのファイルを選択できます。これは、 テキストエディタに最適です

他の多くの強力な API と同様に、showOpenFilePicker() の呼び出しは安全な context であり、ユーザー操作内から呼び出す必要があります。

let fileHandle;
butOpenFile.addEventListener('click', async () => {
  // Destructure the one-element array.
  [fileHandle] = await window.showOpenFilePicker();
  // Do something with the file handle.
});

ユーザーがファイルを選択すると、showOpenFilePicker() はハンドルの配列を返します。この場合は 1 つの要素からなる配列に、次のプロパティを含む 1 つの FileSystemFileHandle と メソッドも指定できます。

後で使用できるように、ファイル ハンドルへの参照を保持しておくと便利です。まず ファイルへの変更を保存したり、その他のファイル操作を実行したりするために必要です。

ファイル システムからファイルを読み取る

ファイルへのハンドルを取得したので、ファイルのプロパティを取得したり、ファイル自体にアクセスしたりできます。 ひとまず、内容を確認します。handle.getFile() を呼び出すと、File が返されます。 このオブジェクトには blob が含まれます。blob からデータを取得するには、そのデータのいずれかを メソッド、(slice()stream(), text() または arrayBuffer())。

const file = await fileHandle.getFile();
const contents = await file.text();

FileSystemFileHandle.getFile() から返される File オブジェクトは、 ディスク上の元のファイルに変更が加えられていません。ディスク上のファイルが変更されると、File オブジェクトは次のようになります。 判読不能です。getFile() を再度呼び出して新しい File オブジェクトを取得し、変更されたオブジェクトを読み取る必要があります。 分析できます

すべてを組み合わせる

ユーザーが [開く] ボタンをクリックすると、ブラウザにファイル選択ツールが表示されます。ファイルを選択すると アプリがコンテンツを読み取り、<textarea> に配置します。

let fileHandle;
butOpenFile.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  const file = await fileHandle.getFile();
  const contents = await file.text();
  textArea.value = contents;
});

ファイルをローカル ファイル システムに書き込む

テキスト エディタでファイルを保存する方法には、[保存] と [名前を付けて保存] の 2 つがあります。保存 先ほど取得したファイル ハンドルを使用して、変更を元のファイルに書き戻します。しかし、 As は新しいファイルを作成するため、新しいファイル ハンドルが必要です。

新しいファイルを作成する

ファイルを保存するには、showSaveFilePicker() を呼び出します。これにより、ファイル選択ツールが表示されます。 [保存] 内モードを使用すると、ユーザーは新しいファイルを選択して保存できます。テキスト .txt 拡張機能が自動的に追加されるようにするために、 あります。

async function getNewFileHandle() {
  const options = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt'],
        },
      },
    ],
  };
  const handle = await window.showSaveFilePicker(options);
  return handle;
}

ディスクへの変更の保存

ファイルに変更を保存するためのコードはすべて、テキスト エディタのデモ GitHub。主なファイル システムのインタラクションは、 fs-helpers.js。最も単純なプロセスは、次のコードのようになります。 それでは、順を追って各ステップを説明します。

// fileHandle is an instance of FileSystemFileHandle..
async function writeFile(fileHandle, contents) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Write the contents of the file to the stream.
  await writable.write(contents);
  // Close the file and write the contents to disk.
  await writable.close();
}

ディスクへのデータの書き込みには FileSystemWritableFileStream オブジェクト(サブクラス)を使用 /WritableStream。ファイルで createWritable() を呼び出してストリームを作成する 使用します。createWritable() が呼び出されると、ブラウザはまずユーザーが許可したかどうかを確認します。 ファイルへの書き込み権限を付与する必要があります。書き込み権限を付与されていない場合、ブラウザは ユーザーに許可を求めます。権限が付与されていない場合、createWritable()DOMException になると、アプリはそのファイルに書き込むことができなくなります。テキスト エディタで、 DOMException オブジェクトは、saveFile() メソッドで処理されます。

write() メソッドは文字列を受け取ります。これはテキスト エディタに必要なものです。場合によっては BufferSourceBlob のいずれかです。たとえば、ある特定の Google Cloud Storage バケットへの 説明します。

async function writeURLToFile(fileHandle, url) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Make an HTTP request for the contents.
  const response = await fetch(url);
  // Stream the response into the file.
  await response.body.pipeTo(writable);
  // pipeTo() closes the destination pipe by default, no need to close it.
}

ストリーム内で seek() または truncate() を使用して、 ファイルのサイズを変更するか、

推奨のファイル名と開始ディレクトリを指定する

多くの場合、アプリでデフォルトのファイル名や場所の候補を表示できます。たとえば、テキスト エディタでは、デフォルトのファイル名として Untitled ではなく Untitled Text.txt が推奨されます。マイページ これを行うには、showSaveFilePicker オプションの一部として suggestedName プロパティを渡します。

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

デフォルトの start ディレクトリについても同様です。テキスト エディタを作成する場合は、 デフォルトの documents フォルダでファイルの保存またはファイルを開くダイアログを開始します。画像の場合は、 デフォルトの pictures フォルダで開始することもできます。デフォルトの開始日時を startIn プロパティを showSaveFilePickershowDirectoryPicker()、または showOpenFilePicker メソッドも同様。

const fileHandle = await self.showOpenFilePicker({
  startIn: 'pictures'
});

よく知られているシステム ディレクトリのリストは次のとおりです。

  • desktop: ユーザーのデスクトップ ディレクトリ(存在する場合)。
  • documents: ユーザーが作成したドキュメントが通常保存されるディレクトリ。
  • downloads: ダウンロードしたファイルが一般的に保存されるディレクトリ。
  • music: 音声ファイルが通常保存されるディレクトリ。
  • pictures: 写真やその他の静止画が通常保存されるディレクトリ。
  • videos: 動画や映画が一般的に保存されるディレクトリ。

既知のシステム ディレクトリとは別に、既存のファイルまたはディレクトリのハンドルを startIn の値。同じディレクトリでダイアログが開きます。

// Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
  startIn: directoryHandle
});

さまざまなファイル選択ツールの目的を指定する

アプリケーションによっては、目的ごとに異なる選択ツールを使用することがあります。たとえばリッチテキスト形式の テキスト ファイルを開くだけでなく、画像をインポートすることもできます。デフォルトでは、各ファイルは 最後に記憶された場所に選択ツールが開きます。これを回避するには、id 値を格納します。 種類ごとに異なりますid が指定されている場合、ファイル選択ツールの実装は その id の最後に使用した別のディレクトリ。

const fileHandle1 = await self.showSaveFilePicker({
  id: 'openText',
});

const fileHandle2 = await self.showSaveFilePicker({
  id: 'importImage',
});

IndexedDB へのファイル ハンドルまたはディレクトリ ハンドルの保存

ファイル ハンドルとディレクトリ ハンドルはシリアル化可能です。つまり、ユーザーは、 IndexedDB へのディレクトリ ハンドル、または postMessage() を呼び出して同じ最上位レベル間で 含まれます。

ファイルまたはディレクトリのハンドルを IndexedDB に保存すると、状態を保存したり、 すべてのファイルまたはディレクトリが保存されたことを意味します。これにより、最近開いたアイテムのリストを保持し、 編集したファイル、アプリを開いたときに最後のファイルを再度開くよう提案する、以前の作業ファイルを復元する ディレクトリなどです。テキスト エディタで、ユーザーが最近使用した 5 つのファイルのリストを保存する それらのファイルに再びアクセスできるようになります。

次のコード例は、ファイル ハンドルとディレクトリ ハンドルの格納と取得を示しています。Google Chat では こちらの実例をご覧ください。( idb-keyval ライブラリを使用します)。

import { get, set } from 'https://unpkg.com/idb-keyval@5.0.2/dist/esm/index.js';

const pre1 = document.querySelector('pre.file');
const pre2 = document.querySelector('pre.directory');
const button1 = document.querySelector('button.file');
const button2 = document.querySelector('button.directory');

// File handle
button1.addEventListener('click', async () => {
  try {
    const fileHandleOrUndefined = await get('file');
    if (fileHandleOrUndefined) {
      pre1.textContent = `Retrieved file handle "${fileHandleOrUndefined.name}" from IndexedDB.`;
      return;
    }
    const [fileHandle] = await window.showOpenFilePicker();
    await set('file', fileHandle);
    pre1.textContent = `Stored file handle for "${fileHandle.name}" in IndexedDB.`;
  } catch (error) {
    alert(error.name, error.message);
  }
});

// Directory handle
button2.addEventListener('click', async () => {
  try {
    const directoryHandleOrUndefined = await get('directory');
    if (directoryHandleOrUndefined) {
      pre2.textContent = `Retrieved directroy handle "${directoryHandleOrUndefined.name}" from IndexedDB.`;
      return;
    }
    const directoryHandle = await window.showDirectoryPicker();
    await set('directory', directoryHandle);
    pre2.textContent = `Stored directory handle for "${directoryHandle.name}" in IndexedDB.`;
  } catch (error) {
    alert(error.name, error.message);
  }
});

保存されたファイルまたはディレクトリのハンドルと権限

権限はセッション間で常に維持されるとは限らないため、ユーザーが queryPermission() を使用して、ファイルまたはディレクトリへの権限を付与しています。まだ連絡を取っていない場合は、 requestPermission()して(再)リクエストします。ファイルとディレクトリのハンドルについても同様です。マイページ fileOrDirectoryHandle.requestPermission(descriptor) または それぞれ fileOrDirectoryHandle.queryPermission(descriptor) です。

テキスト エディタで、ユーザーがすでにタスクを完了しているかどうかをチェックする verifyPermission() メソッドを作成しました。 権限が付与され、必要に応じてリクエストを行います。

async function verifyPermission(fileHandle, readWrite) {
  const options = {};
  if (readWrite) {
    options.mode = 'readwrite';
  }
  // Check if permission was already granted. If so, return true.
  if ((await fileHandle.queryPermission(options)) === 'granted') {
    return true;
  }
  // Request permission. If the user grants permission, return true.
  if ((await fileHandle.requestPermission(options)) === 'granted') {
    return true;
  }
  // The user didn't grant permission, so return false.
  return false;
}

読み取りリクエストと一緒に書き込み権限をリクエストすることで、権限プロンプトの数を減らしました。 ファイルを開くと 1 つのプロンプトが表示され、読み取りと書き込みの両方の権限が付与されます。

ディレクトリを開いてコンテンツを列挙する

ディレクトリ内のすべてのファイルを列挙するには、showDirectoryPicker() を呼び出します。ユーザー 選択ツールでディレクトリを選択すると、FileSystemDirectoryHandle が表示されます。 これにより、ディレクトリのファイルを列挙してアクセスできます。デフォルトでは、 ディレクトリ内のファイルにはアクセスできますが、書き込みアクセスが必要な場合は、 { mode: 'readwrite' } をメソッドに追加します。

butDir.addEventListener('click', async () => {
  const dirHandle = await window.showDirectoryPicker();
  for await (const entry of dirHandle.values()) {
    console.log(entry.kind, entry.name);
  }
});

たとえば、getFile() を使用して各ファイルにアクセスする必要がある場合、たとえば 各結果に対して await を順次使用するのではなく、 たとえば Promise.all() を使用します。

butDir.addEventListener('click', async () => {
  const dirHandle = await window.showDirectoryPicker();
  const promises = [];
  for await (const entry of dirHandle.values()) {
    if (entry.kind !== 'file') {
      continue;
    }
    promises.push(entry.getFile().then((file) => `${file.name} (${file.size})`));
  }
  console.log(await Promise.all(promises));
});

ディレクトリ内のファイルやフォルダの作成またはアクセス

ディレクトリから、ファイルとフォルダの作成やアクセスを行うには、 getFileHandle() または getDirectoryHandle() メソッドを呼び出します。キーが create、ブール値が次の値を持つオプションの options オブジェクトを渡す true または false を指定する場合、新しいファイルまたはフォルダが存在しない場合に作成するかどうかを指定できます。

// In an existing directory, create a new directory named "My Documents".
const newDirectoryHandle = await existingDirectoryHandle.getDirectoryHandle('My Documents', {
  create: true,
});
// In this new directory, create a file named "My Notes.txt".
const newFileHandle = await newDirectoryHandle.getFileHandle('My Notes.txt', { create: true });

ディレクトリ内のアイテムのパスの解決

ディレクトリ内のファイルやフォルダを操作する場合、アイテムのパスを解決しておくと、 確認できます。これを行うには、適切な名前の resolve() メソッドを使用します。解決のために、 アイテムには、ディレクトリの直接または間接の子を指定できます。

// Resolve the path of the previously created file called "My Notes.txt".
const path = await newDirectoryHandle.resolve(newFileHandle);
// `path` is now ["My Documents", "My Notes.txt"]

ディレクトリ内のファイルとフォルダを削除する

ディレクトリへのアクセス権を取得したら、 removeEntry() メソッドを使用します。フォルダの場合、削除は任意で再帰的に行うことができます。 すべてのサブフォルダとサブフォルダ内のファイルをバインドします。

// Delete a file.
await directoryHandle.removeEntry('Abandoned Projects.txt');
// Recursively delete a folder.
await directoryHandle.removeEntry('Old Stuff', { recursive: true });

ファイルまたはフォルダを直接削除する

ファイルまたはディレクトリ ハンドルにアクセスできる場合は、FileSystemFileHandle に対して remove() を呼び出すか、 FileSystemDirectoryHandle をクリックして削除します。

// Delete a file.
await fileHandle.remove();
// Delete a directory.
await directoryHandle.remove();

ファイルやフォルダの名前変更と移動

move() を呼び出すと、ファイルやフォルダの名前を変更したり、新しい場所に移動したりできます。 FileSystemHandle インターフェース。FileSystemHandle には子インターフェース FileSystemFileHandleFileSystemDirectoryHandlemove() メソッドは 1 つまたは 2 つのパラメータを受け取ります。1 つ目の方法は、 新しい名前の文字列か、宛先フォルダへの FileSystemDirectoryHandle にします。 後者の場合、オプションの 2 番目のパラメータは新しい名前の文字列であるため、移動と名前変更は まとめることができます。

// Rename the file.
await file.move('new_name');
// Move the file to a new directory.
await file.move(directory);
// Move the file to a new directory and rename it.
await file.move(directory, 'newer_name');

ドラッグ&ドロップ統合

HTML ドラッグ&ドロップ インターフェース ウェブ アプリケーションが ドラッグ&ドロップしたファイル ウェブページ上に表示されますドラッグ&ドロップ オペレーション中、ドラッグしたファイルとディレクトリのアイテムが ファイル エントリとディレクトリ エントリで構成します。DataTransferItem.getAsFileSystemHandle() メソッドは、ドラッグされたアイテムがファイルの場合、FileSystemFileHandle オブジェクトを含む Promise を返します。 ドラッグされたアイテムがディレクトリの場合は、FileSystemDirectoryHandle オブジェクトと Promise を返します。次の掲載情報 見てみましょうドラッグ&ドロップ インターフェースの DataTransferItem.kind: ファイルとディレクトリの両方に対して "file"、File System Access API の FileSystemHandle.kind は、 ファイルの場合は "file"、ディレクトリの場合は "directory" です。

elem.addEventListener('dragover', (e) => {
  // Prevent navigation.
  e.preventDefault();
});

elem.addEventListener('drop', async (e) => {
  e.preventDefault();

  const fileHandlesPromises = [...e.dataTransfer.items]
    .filter((item) => item.kind === 'file')
    .map((item) => item.getAsFileSystemHandle());

  for await (const handle of fileHandlesPromises) {
    if (handle.kind === 'directory') {
      console.log(`Directory: ${handle.name}`);
    } else {
      console.log(`File: ${handle.name}`);
    }
  }
});

配信元のプライベート ファイル システムへのアクセス

送信元の非公開ファイル システムは、名前が示すように、 基づいています。ブラウザは通常、この URL の内容を永続化することでこれを実装しますが、 どこかのディスクに送信元のプライベートファイルシステムを送信する場合、そのコンテンツは アクセスできるようにします。同様に、名前と一致する名前のファイルやディレクトリは、 オリジンのプライベート ファイル システムの子の名前が存在する。ブラウザによっては 内部にはファイルがあります。これはオリジンのプライベート ファイル システムであるため、ブラウザは これらの「ファイル」保存する必要があります。この API を使用すると 作成されたファイルがハードディスク上のどこかで 1 対 1 で一致することは想定しないでください。以下では、通常どおり運用できます: ルート FileSystemDirectoryHandle にアクセスできるようになったら、元の非公開ファイル システム。

const root = await navigator.storage.getDirectory();
// Create a new file handle.
const fileHandle = await root.getFileHandle('Untitled.txt', { create: true });
// Create a new directory handle.
const dirHandle = await root.getDirectoryHandle('New Folder', { create: true });
// Recursively remove a directory.
await root.removeEntry('Old Stuff', { recursive: true });

対応ブラウザ

  • Chrome: 86。 <ph type="x-smartling-placeholder">
  • Edge: 86。 <ph type="x-smartling-placeholder">
  • Firefox: 111。 <ph type="x-smartling-placeholder">
  • Safari: 15.2。 <ph type="x-smartling-placeholder">

ソース

パフォーマンスが最適化されたファイルに元のプライベート ファイル システムからアクセスする

送信元の非公開ファイル システムでは、高度に高度な特別な種類のファイルへのオプション アクセスが提供されます。 パフォーマンスが最適化されます。たとえば、ファイルに対するインプレース書き込みアクセスと排他的書き込みアクセスが 説明します。Chromium 102 以降では、オリジンの非公開ファイル システムに、 ファイル アクセスの簡素化: createSyncAccessHandle()(同期読み取りおよび書き込みオペレーションの場合) FileSystemFileHandle で公開されていますが、 ウェブワーカー

// (Read and write operations are synchronous,
// but obtaining the handle is asynchronous.)
// Synchronous access exclusively in Worker contexts.
const accessHandle = await fileHandle.createSyncAccessHandle();
const writtenBytes = accessHandle.write(buffer);
const readBytes = accessHandle.read(buffer, { at: 1 });

ポリフィル

File System Access API メソッドを完全にポリフィルすることはできません。

  • showOpenFilePicker() メソッドは、<input type="file"> 要素で近似できます。
  • showSaveFilePicker() メソッドは、<a download="file_name"> 要素でシミュレートできます。 プログラムによるダウンロードがトリガーされ、既存のファイルを上書きすることはできません。
  • showDirectoryPicker() メソッドは、非標準の <input type="file" webkitdirectory> 要素。

ファイルを使用する browser-fs-access というライブラリを開発しました。 可能な限りシステム アクセス API を使用し、次善の選択肢にフォールバックする 対応できます

セキュリティと権限

Chrome チームは、コア原則に基づいて File System Access API を設計、実装しました。 強力なウェブ プラットフォーム機能へのアクセスの制御で定義されている コントロールと透明性、ユーザーの人間工学といった 要素を重視しています

ファイルを開く、新しいファイルを保存する

<ph type="x-smartling-placeholder">
</ph> 読み取り用にファイルを開くファイル選択ツール <ph type="x-smartling-placeholder">
</ph> 読み取るために既存のファイルを開くために使用されるファイル選択ツール。

ファイルを開く際、ユーザーはファイル選択ツールを使用してファイルまたはディレクトリを読み取る権限を付与します。 開いているファイル選択ツールは、セキュアな コンテキストです。気が変わった場合は、ファイルでの選択をキャンセルできます サイトには何もアクセスできなくなります。これは <input type="file"> 要素。

<ph type="x-smartling-placeholder">
</ph> ファイルをディスクに保存するためのファイル選択ツール。 <ph type="x-smartling-placeholder">
</ph> ファイルをディスクに保存するために使用するファイル選択ツール。

同様に、ウェブアプリが新しいファイルを保存しようとするとき、ブラウザにはファイル選択ツールが表示されます。 これにより、ユーザーは新しいファイルの名前と場所を指定できます。新しいファイルが保存されるため 追加すると(既存のファイルを上書きするのではなく)、ファイル選択ツールがアプリに ファイルに書き込みます。

制限付きフォルダ

ユーザーとユーザーのデータを保護するため、ブラウザはユーザーによる保存を特定の範囲に制限する場合があります。 Windows などのコア オペレーティング システムのフォルダ、[macOS Library] のフォルダなどです。 その場合、ブラウザにはプロンプトが表示され、別のオプションを選択するようユーザーに求めます。 フォルダに配置されます。

既存のファイルまたはディレクトリの変更

ウェブアプリは、ユーザーから明示的な許可を得ていない限り、ディスク上のファイルを変更できません。

権限プロンプト

以前に読み取りアクセス権を付与したファイルに変更を保存する場合、 ディスクに変更を書き込む許可をサイトに求める権限プロンプトが表示されている。 権限のリクエストは [保存] をクリックするなどのユーザー操作によってのみトリガーできる ] ボタンを離します。

<ph type="x-smartling-placeholder">
</ph> ファイルを保存する前に表示される権限プロンプト。 <ph type="x-smartling-placeholder">
</ph> ブラウザに書き込みが許可される前にユーザーに表示されるプロンプト 追加することもできます。

あるいは、IDE などの複数のファイルを編集するウェブアプリも、保存権限をリクエストできます。 入社時に変更されます。

ユーザーが [キャンセル] を選択し、書き込みアクセス権を付与しなかった場合、ウェブアプリは 作成します。データを保存するための代替手段をユーザーに提供する必要があります。 たとえば、「ダウンロード」クラウドにデータを保存したり、クラウドにデータを保存したりすることもできます。

透明性

<ph type="x-smartling-placeholder">
</ph> アドレスバー アイコン <ph type="x-smartling-placeholder">
</ph> ユーザーがウェブサイトへのアクセスを許可したことを示すアドレスバーのアイコン ローカル ファイルに保存します。

ユーザーがウェブアプリにローカル ファイルを保存する権限を付与すると、ブラウザにアイコン 」と入力します。このアイコンをクリックするとポップオーバーが開き、ユーザーが指定したファイルのリストが表示されます。 できます。ユーザーはいつでもそのアクセス権を取り消すことができます。

権限の永続性

ウェブアプリでファイルへの変更内容を保存するには、ウェブアプリのすべてのタブに対応するよう求めるメッセージは表示されません。 閉じられます。タブを閉じると、サイトはすべてのアクセスを失います。次回ユーザーが ファイルへのアクセスを求めるメッセージが再度表示されます。

フィードバック

File System Access API について、ご意見、ご感想をお聞かせいただけますと幸いです。

API 設計について教えてください

API で想定どおりに機能していないものはありますか?あるいは不足しているメソッドがあるか アイデアを実現するために必要なものやプロパティは?セキュリティに関する質問またはコメント どうすればよいでしょうか。

実装に問題がある場合

Chrome の実装にバグは見つかりましたか?または、実装が仕様と異なっていますか?

  • https://new.crbug.com でバグを報告します。できるだけ詳細に説明してください [Components] を Blink>Storage>FileSystem に設定します。 Glitch は、すぐに再現を共有するのに最適です。

API の使用をご計画の場合は、

サイトで File System Access API の使用をご計画の場合は、皆様の公的なサポートは、Google が優先順位付けを行い、 他のブラウザ ベンダーのサポートの重要性についても説明しました。

  • どのように使用する予定なのかを WICG の談話スレッドで共有してください。
  • ハッシュタグを使用して @ChromiumDev にツイートしてください #FileSystemAccess、 どこで、どのように使用されているかをお知らせください。

関連情報

謝辞

File System Access API の仕様は Marijn Kruisselbrink