UXPの概要
この記事ではUXPの基本の情報を紹介します。概要から開発前に開発者が知っておいた方がいい情報、 特に公式のページをみても見逃しやすい情報を載せます。
UXPとは
CEPの次なるplugin開発システムであるUXP(Unified Extensibility Platform)がPhotoshop2021から搭載されました。 その他InDesign、Premiere Proと他のアプリケーションでも使えるようになりつつあります。 基本はCEPと同じくAdobeのアプリケーションの拡張機能であります。パネルをhtmlとcssで組み立てつつCEP同様scriptでアプリケーションを動かすわけ ですが以下の点でCEPより優れています。
進化した点
- ExtendSciptを使わないのでアプリケーションの部分も含めて最新のECMAでコードを書ける。
- アプリケーション部分とパネルとのやり取りが楽になる。（CEPのようにcsInterfaceで通信を行う必要がない）
- デバッグなどのScriptの開発環境が整っている（もしくは時間と共にもっと整ってくる）ので開発が楽になる。
- CEPより軽くプラグインの立ち上がりなど早い。
とはいえまだまだ発展途上のシステムなので問題点もあります。
問題点
- ローカルFileアクセスがCEPなどに比べて厳しい、 Photoshopの場合2023より一部ローカルファイルへのアクセスが緩和されたがそれでもCEPやExtendScriptに比べて現状不便な環境である。
- ブラウザーベース,CEPで当たり前のように使っている一部機能が使えない。（例 グリッドレイアウト、 CSSアニメーション等）
- CEPと違いNode.jsが使えない。(Node.jsのようなシステムはあるがそれでも機能は限定的)
当初Fileアクセスがユーザーの許可なしできませんでした。つまり従来のように特定のディレクトリーに 特定のファイルを保存という事ができませんでした。そういったファイルアクセスを行う場合は必ずダイアログでアクセスする必要がありました。 なぜこういった仕様だったのかというとセキュリティ上の理由からこういった仕様にしたようですが現在は緩和されつつあります。CEPで使えたNode.jsはUXPに組み込まれていないので現在使えません。 ちなみにReactやwebpackは 使えるようにサポートされていますがブラウザーで使えない機能、Node.jsが使えないことを考慮すると世の中のその他の大部分のnpmパッケージが 使えないと考えた方が良いです。
またUXPはベースがAdobe独自のシステムなのでブラウザーのようでブラウザーベースではない。ここで何が問題になるかというとブラウザー上で当たり前のように使っている 一部機能が使えないという事です。。GoogleChromiumがベースとかでないので何がサポートされていて 何がサポートされているか必ず公式ドキュメントを見てください。最新のCSSだからサポートされていない、古いCSSだから使えるとかでなく Adobeの基準で実装する機能を決めているのでChromiumのバージョン情報を見ても何もあてになりません。実際2025年4月現在も グリッドレイアウトは標準ではサポートされていません。 詳しくは公式のドキュメントを、その他最新の情報等はdeveloper forumも併せて確認すると 良いでしょう。
開発に使うツール
まず開発のベースのファイルはDeveloper Toolを使います。これはCreativeCloudの管理ツールからダウンロードできます。 その他コードを書くのに基本はVsCode、もしくは好みのエディターで行います。ExtendScriptと違ってVsCodeのExtendScript Debugger とか、ExtendScript Toolkitも要りません。consoleはクロームベースのデバッガーで全てチェックできます。ということで細かい情報は他の記事で 紹介します。
ReactとWebpackについて
UXPの公式ドキュメント内でReactに触れられていますがプラグインの開発にこれが 必須なわけではありません。Webpackは複数のjsファイルやCSSファイルをコンパイルするための コンパイラーでReactを使う場合ほぼ必須ですが複雑なUIを作る訳でもなければ両方とも 使う必要はありません。というかUXPに慣れていない時点でReactを無理に使おうとすると 学習効率が落ちかねないのでUXPになれた後にReactを初めた方が良いでしょう。