画像編集アプリ Photopea が、File Handling API を使用して、ユーザーがファイル エクスプローラーからファイルを開く仕組み

File Handling API を使用すると、ウェブ アプリケーションは、アプリケーションがサポートできるファイル形式のファイル ハンドラとして自身を登録できます。画像編集アプリケーション Photopea がこの API をどのように利用しているかをご覧ください。

Thomas Steiner
Ivan Kutskir
Ivan Kutskir
X GitHub

はじめに

（この記事は動画でもご覧いただけます。）

Photopea は、Ivan Kutskir 氏が開発した無料のオンライン画像エディタです。Ivan 氏は 2012 年にこのアプリの開発を開始し、Photopea に追加した主な機能を紹介するブログを運営しています。Photopea は、PSD（Adobe Photoshop）、XCF（GIMP）、Sketch（Sketch App）、XD（Adobe XD）、CDR（CorelDRAW）の各形式に対応しています。

Photopea アプリ。

Photopea でのファイル操作

インストール可能な PWA である Photopea は、ユーザーがアプリのインストールを選択すると、スタンドアロン ウィンドウで実行されます。これにより、Photopea が多用する PWA の優れた機能であるファイル操作が利用可能になります。

File Handling API の宣言部分

インストール後、Photopea は、サポートするさまざまなファイル形式のファイル ハンドラとしてオペレーティング システムに登録されます。これは、ウェブアプリ マニフェストで file_handlers フィールドを追加することで行います。サポートされている各ファイル形式はオブジェクトです。action の値は相対 URL で、accept オブジェクトは MIME タイプと関連するファイル拡張子のマップです。（例: {"image/jpeg": [".jpeg", ".jpg"]}）。次のコードは、Photopea のウェブアプリ マニフェストのプロダクション版です。関連する部分がハイライト表示されています。

{
    "name": "Photopea",
    "short_name": "Photopea",
    "display": "standalone",
    "icons": [
        {  "src": "promo/icon512.png",     "type": "image/png", "sizes": "512x512"  },
        {  "src": "promo/maskable512.png", "type": "image/png", "sizes": "512x512", "purpose":"maskable"  }
    ],
    "start_url": "/?utm_source=homescreen",
    "background_color":"#0f171d",
    "theme_color": "#474747",
    "file_handlers": [
        { "action": "/", "accept": {  "image/psd" : [ ".psd" ]  } },
        { "action": "/", "accept": {  "image/jpeg": [ ".jpeg", ".jpg" ]  } },
        { "action": "/", "accept": {  "image/png" : [ ".png" ]  } },
        { "action": "/", "accept": {  "image/webp": [ ".webp" ]  } },
        { "action": "/", "accept": {  "image/bmp" : [ ".bmp" ]  } },
        { "action": "/", "accept": {  "image/gif" : [ ".gif" ]  } },
        { "action": "/", "accept": {  "image/svg+xml": [ ".svg" ]  } },
        { "action": "/", "accept": {  "image/pdf" : [ ".pdf" ]  } },
        { "action": "/", "accept": {  "image/tiff": [ ".tif", ".tiff" ]  } },
        { "action": "/", "accept": {  "image/ai"  : [ ".ai"  ]  } },
        { "action": "/", "accept": {  "image/psb": [ ".psb" ]  } },
        { "action": "/", "accept": {  "image/xcf": [ ".xcf" ]  } },
        { "action": "/", "accept": {  "image/sketch": [ ".sketch" ]  } },
        { "action": "/", "accept": {  "image/xd" : [ ".xd"  ]  } },
        { "action": "/", "accept": {  "image/pxd": [ ".pxd" ]  } },
        { "action": "/", "accept": {  "image/cdr": [ ".cdr" ]  } },
        { "action": "/", "accept": {  "image/eps": [ ".eps", ".ps" ]  } },
        { "action": "/", "accept": {  "image/x-icon": [ ".ico" ]  } },
        { "action": "/", "accept": {  "image/jpx": [ ".jpx" ]  } },
        { "action": "/", "accept": {  "image/jp2": [ ".jp2" ]  } },
        { "action": "/", "accept": {  "image/x-tga": [ ".tga" ]  } },
        { "action": "/", "accept": {  "image/vnd-ms.dds": [ ".dds" ]  } }
    ],
    "share_target": {
        "action": "/",
        "method": "POST",
        "enctype": "multipart/form-data",
        "params": {
            "files": [
            {
                "name": "image",
                "accept": ["image/jpeg", "image/png", "image/webp", "image/gif"]
            }
          ]
        }
    }
}

macOS Finder で、ユーザーがファイルを右クリックして [プログラムから開く] で Photopea を選択している。

File Handling API の命令型部分

API の命令型部分は、オペレーティング システムが PWA に渡すファイルの実際の処理を扱います。Photopea のコードは、明らかに大幅に最小化され、難読化されていますが、それでも以下のスニペットの要点はそれほど難しくありません。LaunchQueue インターフェース（N に縮小）には、関数を引数として受け取る setConsumer() メソッドがあります。この関数は、LaunchParams オブジェクト（W に縮小）を受け取ります。この LaunchParams オブジェクトには、FileSystemHandle オブジェクトの読み取り専用配列を指す files プロパティがあります。残りのコードは、この配列をループ処理し、getFile() を呼び出して File オブジェクト（G に縮小）を取得します。このファイルは、ファイルの表示を処理する Photopea の他のロジックに渡されます。

var N = window.launchQueue;
if (N) {
  var $ = this.UA;
  N.setConsumer(function (W) {
    var O = W.files;
    console.log(O);
    for (var Y = 0; Y < O.length; Y++) {
      var T = O[Y];
      T.getFile().then(function (G) {
        $.YO([G], null, null, null, [T]);
      });
    }
  });
}

まとめ

ユーザーは、Photopea を画像のファイル ハンドラにすることを長年求めてきました。2020 年にこの質問が投稿された時点では、この機能はまったく考えられませんでしたが、熱心なユーザーがファイル操作 API を発見したのは、2022 年初頭の初期段階で、まだフラグの背後にあったときでした。ファイル操作は最終的に Chrome 102 でリリースされ、Photopea のユーザーに日常的に使用される人気の機能となりました。ゲームチェンジャーと呼ぶユーザーもいます。ぜひ Photopea をお試しください。デスクトップにインストールして、サポートされているファイル形式のいずれかを開いてみてください。画像編集をお楽しみください。