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

インストール済みのウェブアプリケーションをファイルハンドラとして指定する

オペレーティングシステムでアプリをファイルハンドラとして登録します。

Thomas Steiner

ウェブアプリでファイルの読み取りと書き込みを行えるようになったので、次のステップとして、デベロッパーはこうしたウェブアプリを、アプリで作成および処理できるファイルのファイルハンドラとして宣言します。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] を選択します。ソースコードの実装を確認できます。

Excalidraw ファイルが表示されている macOS のファインダーウィンドウ。 — オペレーティングシステムのファイルエクスプローラで、ファイルをダブルクリックするか右クリックします。

ファイルを右クリックしたときに表示されるコンテキストメニュー。[このアプリケーションで開く...] 項目がハイライト表示されている。 — 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 は Eric Willigers、Jay Harris、Raymes Khoury によって指定されました。この記事は Joe Medley によってレビューされました。