オペレーティング システムでアプリをファイル ハンドラとして登録します。
ウェブアプリでファイルの読み取りと書き込みを行えるようになったので、次のステップとして、デベロッパーはこうしたウェブアプリを、アプリで作成および処理できるファイルのファイル ハンドラとして宣言します。File Handling API を使用すると、これを実現できます。テキスト エディタアプリをファイル ハンドラとして登録し、インストールした後は、macOS で .txt
ファイルを右クリックして [Get Info] を選択し、常にこのアプリで .txt
ファイルをデフォルトとして開くよう OS に指示できます。
File Handling API の推奨ユースケース
この API を使用するサイトの例:
- Office アプリケーション(テキスト エディタ、スプレッドシート アプリ、スライドショー作成者など)
- グラフィック エディタと描画ツール。
- ビデオゲーム レベルのエディタツール。
File Handling API の使用方法
プログレッシブ エンハンスメント
File Handling API 自体はポリフィルできません。ただし、ウェブアプリでファイルを開くには、次の 2 つの方法があります。
- Web Share Target API を使用すると、デベロッパーは自分のアプリを共有ターゲットとして指定し、オペレーティング システムの共有シートからファイルを開くことができます。
- File System Access API はファイルのドラッグ&ドロップと統合できるため、デベロッパーは、すでに開いているアプリでドロップしたファイルを処理できます。
ブラウザ サポート
機能検出
File Handling API がサポートされているかどうかを確認するには、次のコマンドを使用します。
if ('launchQueue' in window && 'files' in LaunchParams.prototype) {
// The File Handling API is supported.
}
File Handling API の宣言型部分
最初のステップとして、ウェブアプリはウェブアプリ マニフェストで、処理できるファイルの種類を宣言的に記述する必要があります。File Handling API はウェブアプリ マニフェストを拡張したもので、ファイル ハンドラの配列を受け入れる "file_handlers"
という新しいプロパティが追加されています。ファイル ハンドラは、次のプロパティを持つオブジェクトです。
- アプリのスコープ内の URL を値として参照する
"action"
プロパティ。 - MIME タイプのオブジェクトをキーとして、ファイル拡張子のリストを値として持つ
"accept"
プロパティ。 "icons"
プロパティ(ImageResource
アイコンの配列)。一部のオペレーティング システムでは、ファイル形式の関連付けにより、関連付けられているアプリアイコンだけでなく、アプリでのそのファイル形式の使用に関連する特別なアイコンも表示できます。- 複数のファイルを単一のクライアントで開くか、複数のクライアントで開くかを定義する
"launch_type"
プロパティ。デフォルトは"single-client"
です。ユーザーが複数のファイルを開くと、ファイル ハンドラに"launch_type"
として"multiple-clients"
のアノテーションが付けられている場合、複数のアプリが起動され、起動するたびにLaunchParams.files
配列(詳細を参照)に要素が 1 つだけ含まれます。
以下の例では、ウェブアプリ マニフェストの関連する抜粋のみを表示することで、より明確に把握できます。
{
"file_handlers": [
{
"action": "/open-csv",
"accept": {
"text/csv": [".csv"]
},
"icons": [
{
"src": "csv-icon.png",
"sizes": "256x256",
"type": "image/png"
}
],
"launch_type": "single-client"
},
{
"action": "/open-svg",
"accept": {
"image/svg+xml": ".svg"
},
"icons": [
{
"src": "svg-icon.png",
"sizes": "256x256",
"type": "image/png"
}
],
"launch_type": "single-client"
},
{
"action": "/open-graf",
"accept": {
"application/vnd.grafr.graph": [".grafr", ".graf"],
"application/vnd.alternative-graph-app.graph": ".graph"
},
"icons": [
{
"src": "graf-icon.png",
"sizes": "256x256",
"type": "image/png"
}
],
"launch_type": "multiple-clients"
}
]
}
これは、/open-csv
のカンマ区切り値(.csv
)ファイル、/open-svg
のスケーラブル ベクター グラフィック(.svg
)ファイル、/open-graf
の拡張子として .grafr
、.graf
、.graph
のいずれかを持つ作成された Grafr ファイル形式を処理する架空のアプリケーションを対象としています。最初の 2 つは単一のクライアントで開きます。複数のファイルが処理されている場合は、最後の 2 つは複数のクライアントで開きます。
File Handling API の命令型
理論上、アプリはどのファイルを処理できる範囲のどの URL で処理できるかを宣言したので、受信ファイルに対して命令的になんらかの処理を行う必要があります。ここで launchQueue
の出番となります。起動されたファイルにアクセスするには、サイトで window.launchQueue
オブジェクトのコンシューマを指定する必要があります。起動は、指定したコンシューマによって処理されるまでキューに入れられます。コンシューマは起動ごとに 1 回だけ呼び出されます。このようにして、コンシューマが指定されたタイミングに関係なく、すべてのリリースが処理されます。
if ('launchQueue' in window && 'files' in LaunchParams.prototype) {
launchQueue.setConsumer((launchParams) => {
// Nothing to do when the queue is empty.
if (!launchParams.files.length) {
return;
}
for (const fileHandle of launchParams.files) {
// Handle the file.
}
});
}
DevTools のサポート
この記事の執筆時点では DevTools のサポートはありませんが、サポートを追加するよう機能リクエストを提出しました。
デモ
漫画スタイルの描画アプリである Excalidraw にファイル処理のサポートを追加しました。テストするには、まず Excalidraw をインストールする必要があります。このファイルでファイルを作成してファイル システム上のどこかに保存すると、そのファイルをダブルクリックまたは右クリックして開き、コンテキスト メニューで [Excalidraw] を選択します。ソースコードの実装を確認できます。
セキュリティ
Chrome チームは、強力なウェブ プラットフォーム機能へのアクセスの制御で定義されている基本原則(ユーザー制御、透明性、人間工学など)を使用して File Handling API を設計、実装しています。
権限、権限の永続性、ファイル ハンドラの更新
ユーザーの信頼とユーザーのファイルの安全性を確保するため、File Handling API ではファイルを開くと、PWA がファイルを表示できるようになる前に権限プロンプトが表示されます。この権限プロンプトは、ユーザーが PWA を選択してファイルを開くと表示されるため、PWA を使用してファイルを開く操作と権限が密接に結びついているため、理解しやすく関連性の高いものになります。
この権限は、ユーザーがサイトのファイル処理を [許可] または [ブロック] をクリックするか、プロンプトを 3 回無視するまで、常に表示されます(その後、Chromium はこの権限を禁止してブロックします)。選択した設定は、PWA を終了して再起動しても維持されます。
マニフェストの更新と "file_handlers"
セクションの変更が検出されると、権限がリセットされます。
ファイル関連の課題
ウェブサイトにファイルへのアクセスを許可することで、さまざまな攻撃ベクトルが開かれます。詳しくは、File System Access API に関する記事をご覧ください。File Handling API が File System Access API を介して提供する追加のセキュリティ機能は、ウェブ アプリケーションに表示されるファイル選択ツールではなく、オペレーティング システムの組み込み UI を使用して特定のファイルへのアクセス権を付与する機能です。
ユーザーが意図せずファイルを開いたときに、ウェブ アプリケーションにそのファイルへのアクセス権を付与してしまうリスクが依然として存在します。ただし、一般的には、ファイルを開くと、そのファイルを開くと、そのファイルの読み取りや操作が可能になります。したがって、ユーザーが [アプリで開く] コンテキスト メニューを使用するなどして、インストール済みのアプリでファイルを開くことは、アプリに対する十分な信頼を示す指標といえます。
デフォルト ハンドラの本人確認
ただし、ホストシステムに特定のファイル形式のアプリケーションがない場合は例外です。この場合、一部のホスト オペレーティング システムでは、ユーザーの介入なしに、新しく登録されたハンドラをそのファイル形式のデフォルト ハンドラに自動的に昇格させることがあります。つまり、ユーザーがその形式のファイルをダブルクリックすると、登録済みのウェブアプリで自動的に開きます。このようなホスト オペレーティング システムでは、ユーザー エージェントがそのファイル形式に対応するデフォルト ハンドラがないと判断した場合、ユーザーの同意なしにファイルの内容を誤ってウェブ アプリケーションに送信しないように、明示的な権限プロンプトが必要になることがあります。
ユーザー コントロール
この仕様では、ファイルを処理できるすべてのサイトをファイル ハンドラとして登録すべきではないとブラウザが規定しています。代わりに、ファイル処理の登録はインストールで制限されるべきであり、特にサイトがデフォルト ハンドラになる場合は、ユーザーによる明示的な確認なしに行われることがあってはなりません。ユーザーがすでにデフォルト ハンドラに登録されている可能性がある .json
などの既存の拡張機能を乗っ取るのではなく、サイトで独自の拡張機能を作成することを検討する必要があります。
透明性
ユーザーはすべてのオペレーティング システムで、現在のファイルの関連付けを変更できます。これはブラウザのサポート範囲外です。
フィードバック
Chrome チームでは、File Handling API の使用感をお知らせしています。
API の設計についてお聞かせください
API に想定したとおりに動作しない点はありますか。あるいは、アイデアを実装するために必要なメソッドやプロパティが欠落していないか?セキュリティ モデルについてご質問やご意見がある場合は、
- 対応する GitHub リポジトリで仕様の問題を提出するか、既存の問題にご意見をお寄せください。
実装に関する問題を報告する
Chrome の実装にバグが見つかりましたか?それとも、実装が仕様と異なりますか?
- new.crbug.com でバグを報告します。できる限り詳細な情報と再現手順を記載し、[Components] ボックスに「
UI>Browser>WebAppInstalls>FileHandling
」と入力します。Glitch は、再現をすばやく簡単に共有するのに便利です。
API のサポートを表示する
File Handling API を使用する予定はありますか?公開サポートにより、Chrome チームは機能の優先順位付けを行い、他のブラウザ ベンダーはサポートがいかに重要であるかを示します。
- その使用方法を WICG Discourse スレッドで共有します。
- ハッシュタグ
#FileHandling
を使用して @ChromiumDev にツイートを送信し、使用場所と使用方法をお知らせください。
関連情報
- 一般公開の説明動画
- File Handling API のデモ | File Handling API のデモソース
- Chromium トラッキング バグ
- ChromeStatus.com のエントリ
- Blink コンポーネント:
UI>Browser>WebAppInstalls>FileHandling
- TAG の確認
- Mozilla 標準の位置
謝辞
File Handling API は Eric Willigers、Jay Harris、Raymes Khoury によって指定されました。この記事は Joe Medley によってレビューされました。