このページは Cloud Translation API によって翻訳されました。

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

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

Pete LePage

Thomas Steiner

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 つのファイルテキストを作成しました。エディタ。テキストファイルを開いたり、編集したり、変更内容をディスクに保存したり、新しいファイルを作成して変更をディスクに保存します。見た目は良くありませんが理解することが重要です。

ブラウザサポート

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<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();

注: ほとんどのユースケースでは、 stream()、text()、または arrayBuffer() メソッド。ファイルのコンテンツにランダムアクセスを取得する場合: slice() メソッドを使用します。

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;
}

重要なポイント: 保存されるデータの処理に時間がかかることがあるため、アプリの [Save] ボタンをクリックします。よくある問題は、この作業を行うことが、 showSaveFilePicker() コードが実行され、 SecurityError Failed to execute 'showSaveFilePicker' on 'Window': Must be handling a user gesture to show a file picker.。代わりに、まずファイルハンドルを取得し、そのファイルハンドルを取得してからのみ、提供します。

ディスクへの変更の保存

ファイルに変更を保存するためのコードはすべて、テキストエディタのデモ 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() メソッドは文字列を受け取ります。これはテキストエディタに必要なものです。場合によっては BufferSource、Blob のいずれかです。たとえば、ある特定の 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() を使用して、ファイルのサイズを変更するか、

注意: 次のいずれかの方法で、ストリームを閉じるまで、変更はディスクに書き込まれません。 close() の呼び出し時か、ストリームがパイプによって自動的に閉じられたとき。

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

多くの場合、アプリでデフォルトのファイル名や場所の候補を表示できます。たとえば、テキストエディタでは、デフォルトのファイル名として 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 プロパティを showSaveFilePicker、showDirectoryPicker()、または 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 には子インターフェース FileSystemFileHandle と FileSystemDirectoryHandle。move() メソッドは 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');

注: FileSystemHandle.move() メソッドは、元のプライベートファイルシステム（OPFS）内のファイルに対して標準で提供されています。ソースまたは宛先が OPFS の外部にある場合、ファイルのフラグの背後にあります。ディレクトリではまだサポートされていません。

ドラッグ&ドロップ統合

「 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 });

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<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 });

注: createAccessHandle() メソッド（つまり、メインスレッドやウェブワーカーなど）で crbug.com/1323922 をご覧ください。

ポリフィル

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> 読み取るために既存のファイルを開くために使用されるファイル選択ツール。

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

ファイルをディスクに保存するためのファイル選択ツール。 — </ph> ファイルをディスクに保存するために使用するファイル選択ツール。

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

制限付きフォルダ

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

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

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

権限プロンプト

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

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

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

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

透明性

</ph>

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

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

権限の永続性

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

フィードバック

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

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

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

WICG File System Access GitHub リポジトリで仕様に関する問題を提出するか、ご意見をお聞かせください役立ちます

実装に問題がある場合

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

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

File System Access API とは

File System Access API の使用

ブラウザ サポート

機能検出

試してみる

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

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

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

すべてを組み合わせる

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

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

ディスクへの変更の保存

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

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

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

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

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

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

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

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

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

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

ドラッグ&ドロップ統合

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

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

ポリフィル

セキュリティと権限

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

制限付きフォルダ

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

権限プロンプト

透明性

権限の永続性

フィードバック

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

実装に問題がある場合

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

関連情報

謝辞

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

ブラウザサポート

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

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

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

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

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

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