UXP

UXPのCSS環境がIE以前の時代で止まっているという話は何度もしてきました。まだまだ大きな進歩はする気配がありませんが久しぶりにWebViewを使ってみたらCSS周りの環境がかなり変わっていました。ちなみに今回はPhotoshop26.8.1のUXP8.3.0で行っています。

WebViewとは？

簡単に言えばIframeみたいなもので外部のサイトを指定した枠の中で表示する要素になります。詳しくは過去の記事をご覧ください。
それで前もって言っておきますとパネルのUI部分とPhotoshopのエンジン部分が別々になるのでシステムの構築が複雑になります。

どんなCSSが使えるのか

以下のようなCSSが使用できました。

簡単に試して、以下の機能が使えるのを確認しました。

• ネスト
• containerクエリ
• Grid layout
• Subgrid

2025年7月現在から見てもかなり新しい機能が使えます。CSSネストの対応が2023年3月頃なので少なくとも2023年ごろまでのCSSは使えるという認識で良さそうです。CEP12よりもかなり新しい環境になります。ちなみにPhotoshop beta版26.0ではネストもsubGridもContainerも対応してなかったはずなのでだいぶ進化しました。だからと言って勿論喜べることばかりではありません。

内部処理が複雑化する

一番の問題がWebView自体Iframeのようなものなので別途表示用のシステムを構築しないといけません。ただローカル上のHTMLを読み込む機能が実装されたので別途サーバー上にサイトを構築しなくてもHTMLファイルをローカル上に用意すれば大丈夫です。それでデータの受け渡しですが送り側はpostメソッドで送って受けて側はイベントで待ち受けするという形になります。

UXP側はWebview要素からpostMessageメソッドで外部HTMLにデータを送る、ローカル側からはwindow.uxpHost.postMessageメソッドからデータをプラグイン側に送るという形になります。ちなみにstring型しか送れないみたいなのでObjectを送る場合はJSON.stringifyメソッドを使います。受け取る場合はwindowに”message”イベントを登録して待ち受けするのは両サイドとも変わりません。勿論どんな値が入ってくるのか双方向で管理しないといけないのでUXP側のエンジン単体で管理していた時に比べて複雑さがグッと上がります。特にフレームワークとか使ってコンパイルする場合はUXP側とローカル側での両方の環境構築も必要になります。ただElectronのメインプロセスとレンダラーと似たような感じなのでElectronをPhotoshop上で使うと考えれば楽に思えてくるかも？（ない）

デバッグ

UXP側はいつもの通りDevToolsでデバッグが立ち上がるのですがWebView側はどうやってデバッグするか気になると思います。この辺もきちんと別途デバッグできるようになっています。まずHTML側でdebug属性を加えます。上記のHTMLコードにもあったように該当のWebViewに以下の属性と値を加えます。

uxpallowinspector="true"

その後プラグインを立ち上げてWebView上で右クリックを押すと要素の表示という項目が出現します。

すると以下のようにコンソールが表示されます。

ちなみにuxpallowinspector自体を埋め込まなかった場合は外部ウインドウとしてデバッカーが立ち上がりました。本番環境で表示自体させたくない場合はfalseを指定すれば右クリックしても何も反応しません。

使用用途

何度も言っていますがUXP本体のCSS、HTML周りはかなり古いままなので少しでも凝ったUIを作ろうと思うとかなりの労力が必要になります。そこでこのWebView越しのHTML上でUIを構築すれば新しい環境での構築が可能になりますがどうしても新しいブラウザ環境と複雑化するシステムはどちらかが犠牲になります。おそらく最終的な結論としては

• シンプルなプラグインはUXP内で完結させる。
• ある程度以上の規模のプラグインはWebViewを使って新しいブラウザ環境でUIを構築する。

という結論になるでしょう。正直UXPのSpectrum UXP関係のバグ、フレームワークの対応の狭さを考慮すると長い目での開発のプラグインはどうしてもUI部分はUXPではなくブラウザ環境のWebViewを使いたくなります。今後もUXPのフロント周りの進化が期待できないので尚更でしょうか。ちなみにInDesign、Premiere Proの場合UXPの対応がPhotoshopよりも遅いので対応バージョンには気をつけてください。