Photoshop UXP Scripting触ってみた
Photoshopのマイナーバージョンアップ(23.5)と共にmanifest.jsonやパネルUIを必須としないScriptingが使えるようになりました。これは従来のExtendScriptの代替のようなものでScriptファイル単体でUXPScriptが実行可能となります。以下ざっくりした特徴になります。
- 基本はUXP Pluginの仕様に準拠。(ES2015が使えたりローカルファイルへのアクセスが制限されていたり)
- psjsという特殊な拡張子を使用。
- 実行自体ファイル -> スクリプト -> 参照からpsjsファイルを選ぶだけ。
- manifestもUIも必須ではない。ただしScriptUIのようにModalWindowを呼び出すことは可能。
- UXP Pluginに比べてアクセスできるモジュールが限られる。
- localStorage等にアクセスしてデータを保持する事ができない。
開発の準備をする。
実際に開発に移る前にUXPScriptは2022年8月から実装されたものなのでUXPPluginが動くからScriptも動くというわけではありません。Photoshopは23.5以上のバージョン、またDeveloperToolは1.6以上のバージョンにアップデートしてください。
そしてpsjsというのは勿論一般的な拡張子ファイルではないのでデフォルトだとコードエディターがただのテキストファイルと認識してコードの補完や認識をしてくれません。以下VsCodeでpsjsをJavaScriptに紐付けた方が良いでしょう。VsCodeの場合Preferencesのメニューからsettingsをクリックして右上の四角いアイコンをクリック、その後settings.jsonを編集すれば自動的に紐付けできるようになります。
最後に以下を追加してください。
成功すればpsjsファイルが自動的にJavaScriptファイルとして認識されるようになります。
実際にHello Worldをやってみる。
それでは実際にコードを実行してみます。といって簡単に”Hello World”をアラートするだけの簡単なコードを実行します。以下のコードを作成します。
コードのハイライトが効かないのでgistのファイル名はjsの拡張子になっていますが実際は必ずpsjsの拡張子にしてください。これをExtendScript同様ファイル -> スクリプト -> 参照からhelloWorld.psjsを選んでください。
アラートが出れば成功です。これで実際に開発が可能です。
デバッグの方法
勿論このやり方だとconsoleも使えないので大変不便です。一応DeveloperToolからデバッグができると公式でも触れられているのですが自分Macの環境だと動かなかったり公式サイトの説明不足？なところもあって今回かなり簡素に触れるに留めておきます。
まずDeveloperToolとPhotoshopを立ち上げます。すると以下のようにDeveloperTool上のPhotoshopのアイコンの下にDebugScriptと表示されます。表示されない場合はPhotoshop,もしくはDeveloperToolのバージョンを確認、アップデートしてください。
上記のボタンをクリックすると以下psjsファイルを選ぶ画面に切り替わります。
psjsファイルを選ぶ、またはドラッグするとデバッグが始まります。この時Photoshopが待ち受けの状態になって直接動かすことができなくなります。デフォルトだとScriptの実行が止まった状態なのでDeveloperToolのデバッグの画面から実行することになるのですが自分のMacの環境だと全く動きませんでした。Windowsの場合はなんとかデバッグできたのですが一度にコードを走らせる事ができず、少しずつ実行させて最後まで終わるとDeveloperToolが落ちました。その他未定義の変数なんかあった場合も落ちたので正直開発できるような感じではありませんでした。とりあえず以上になります。
Pluginと異なる点
Pluginの方はPhotoshop23.0以降executeAsModalスコープ内でないとPhotoshopへのアクセスができませんでした。しかしScriptingの方は以下のようにグローバルスコープ内にPhotoshopのコードを書いても実行できます。Scriptのスコープ全体でPhotoshopにアクセスできます。
Script自身の状態を取得する
Pluginの方はexecuteAsModalメソッドからコールバックでexecutionControlオブジェクトとしてヒストリーやキャンセルの状態を受け取れました。Scriptではuxpモージュールのscriptオブジェクトから同じようなオブジェクトを取得できます。
その他Scriptが走り終わった後に登録したドキュメントを自動的に閉じるexecutionContext.hostControl.registerAutoCloseDocumentメソッド、Scriptがキャンセルされた時に発火するexecutionContext.onCancel.addListenerイベントメソッド（ただし自分が何度やっても発火しなかった。原因は不明）があります。
ScriptUIからDialogへ
ExtendScriptではScirptUIで簡単なUIの作成ができました。UXPScriptでもUIは作成可能ですがDialog上で可能です。ただしHTML+CSSでの作成になるのでScriptUIに比べて勝手が全く違ってきます。むしろHTMLファイルとCSSファイルを別個に用意できない分JavaScriptで全て組み立てる事になるので通常のパネルのUIの作成よりも難しく感じるかもしれません。簡単なタイトルとボタンが一つ、二つあるようなUIだったら問題ないのですがフォームがいくつか並ぶようなUIの場合直でHTMLを書きたくなるでしょう。以下簡単なサンプルです。
正直ちょっと複雑になるともう Reactが使いたくなる。
その他試した事
外部のScriptファイルからのimportを確かめたのですがnodeのmodule.exportsもES2015のexportも使えませんでした。#includeの代替案はあるのでしょうか？公式のドキュメントを読む限りその他のモジュールも一切使えなさそうです。
公式ドキュメントによると23.5現在Photoshop外部Scriptファイル等からの実行もできないようです。Scriptファイル自体に引数を渡すことも不可能ですが将来できるようにするとは書いてあります。外部からのScriptの実行も未来にはもっと緩和されそうな感じはありますが。
結局webpackは必須?
さらっと触った感じ現状ある程度以上の規模のScriptになるとwebpackは必須と感じました。moduleによるファイルの分割、CSSをJavsScriptとしてコンパイルできるので現在未確認ですがおそらくできるとは思います。HTMLはやはりJavaScriptから生成しなければならないでしょうか。ただ基本シンプルに作れるのがメリットのはずなのにwebpackまで使うと気が引ける方も多そうです。
どちらにせよUIの作成はExtendScriptから乗り換える場合開発周りの環境が変わるのである程度の学習コストは覚悟したほうがいいでしょう。
その他相変わらずローカルファイルのアクセスは厳しいままです。特定のディレクトリーにアクセスする場合は必ずダイアログを通してユーザーの許可を求める必要があります。デバッグ環境も現状やりづらく感じるので正直完成直前までPluginとして開発、デバッグして最後にScriptにコードを移した方が楽に開発できそうな気がしました。