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

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

Thomas Steiner 氏
Ivan Kutskir 氏
Ivan Kutskir
Twitter 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 は、ユーザーがアプリのインストールを選択するとスタンドアロン ウィンドウで実行されます。これにより、PWA の超能力が解放され、Photopea でファイル処理を多用します。

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"]
            }
          ]
        }
    }
}

ファイルを右クリックして [Photopea で開く] を選択した macOS の Finder。

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 を試してパソコンにインストールし、サポートされているファイル形式で開いてみてください。画像編集機能がお役に立てば幸いです。