Photoshop UXP プログレスバーの実装
2021年12月15日追記。
Photoshop 2022からはUXPにデフォルトで簡単にプログレスバーの実装ができるようになりました。2022以降、余程こだわりがない限りデフォルトのプログレスバーを使うのが言いでしょう。詳しくはこちらの記事。
Photoshop UXPではアプリケーションとパネル側のシステムが統一される、ということでキャンセルボタン同様プログレスバーの自作も今後できるようになるでしょう。勿論アプリケーション側の処理は基本非同期での処理でしょうから非同期での実装を想定します。ということで今回非同期の配列処理を取り上げます。このあたりに関してこちらの記事を参照。
大まかな構造
プログレバーの進捗ですが例えば非同期で処理しなければならない処理が10個あったとして一つ終わる事にプログレスバーを進めます。Photoshopでいうと10枚のファイルを保存するとします。一枚保存される度にプログレスバーを進めれば良い、という具合ですね。このプログレスバーの状態を変数で管理すれば大体簡単にできます。
今回ただのサンプルということでブラウザーでも動くようにsetTimeout関数による非同期処理でプログレスバーを実装してみました。プログレバーは今回CSSで作成して処理が進むほどプログレスバーのdiv要素のwidthが伸びてゆく、という仕組みです。勿論逐次処理でも実装可能です。
非同期の繰り返し処理さえ出来れば実装は難しくありません。html,cssも含めた完全なサンプルはCodeSandBoxに上げました。UXP上での実装例としてPhotoshop UXP Plugin documentBoardでも実装しています。尚プログレスバーを実装するに当たり前のように使われているcanvas、cssによるtransition,animationはUXP上で使えないので注意してください。
今までLoading画面はできましたがこういったこともUXPでの開発ができるようになると実装されるようになるのではないでしょうか。