UXP Scriptingとは？
PhotoshopおよびInDesignの2023のバージョン(厳密にはその前のマイナーバージョンおよびベータ版)からScriptが 使えるようになりました。これはExtendScriptの後継的な存在でUXP Pluginと違いパネルの開発をせずにScriptファイル単体で 動くまさにExtendScriptのような存在です。今回UXPのScriptの概要と開発についての記事になります。
Pluginと何が違うのか
Pluginの開発はパネルの開発からPluginの概要のmanifestの定義と実際に動かすまで高いハードルがあります。 簡単なコードを動かすのにパネルまでHTMLとCSSまで書くのは躊躇う事もあります。UXP Scriptは単体でScriptファイルとして 動くのでUI自体必須ではありません。（ただしダイアログもオプションで作れる） ファイルの実行も既存のExtendScriptのように実行できてファイルもScriptファイル一つで完結できるので インストール作業も必要ありません。勿論Script自体Plugin同様新しいJSで書けるのでECMA2015以降の構文も使えます。
開発の準備
今回VsCodeを使って開発をします。2022年10月現在PhotoshopとInDesignのみの対応となっています。 拡張子はそれぞれpsjs、idjsとなります。しかしテキストディターはこのままだと何に対して関連づければよいのか わからないのでただのテキストファイルと認識してしまいます。なので一度JavaScriptファイルに関連つけて コードの補完が効くようにしましょう。
VsCodeで紐付けさせる
Preferencesのメニューからsettingsをクリックして右上の四角いアイコンをクリック、 その後settings.jsonを編集すれば自動的に紐付けできるようになります。
最後に以下を追加してください。
InDesignの場合idjsを追加してださい。成功すればpsjsファイルが自動的にJavaScriptファイルとして認識されるようになります。
DeveloperToolを使ってデバッグ
次はデバッグを始めます。ExtendScriptと違ってVsCodeのプラグインではなくAdobe DeveloperToolを使用します。最初に なんでもいいのでScriptをファイルを書いてみましょう。以下Hello worldのコードになります。
その後にDevloperToolと対象のアプリケーションを起動させます。
Script対応可能なアプリケーションが起動している場合左にDebug Scriptの文字と共に表示されます。まず Debug Scriptボタンを押します。
ここからダイアログを呼び出してデバッグ対象のScriptファイルを選択、もしくはこのウインドウの中にScriptファイルを ドラッグ、ドロップしてください。
通常このままだと真ん中にコードが表示されて実行待ちの状態になります。Photoshopの場合アプリケーション自体が 待ち受けの状態になりデバッグ終了まで動かせません。InDesignは何故か普通に動かせます。よくわかりませんが仕様が 違うようです。場合によっては真ん中の画面にコードが表示されない時もありますがその場合コマンド+pを押して出現する バーから該当のScriptファイルのパスを選択すると表示されます ここから右のボタンを押すとScriptを実行できます。
Hello Worldと表示されれば成功ですが成功と同時にデバッグ画面が消滅すると思います。 実はScriptの実行が終わるとこのままデバッグ自体終わってしまうのです。やや不便ですがconsoleを表示させたり する場合は何処かでブレークポイントを設定するなりして止めるしかありません。
主にデバッグツールの画面は上のようになっています。再生ボタンの一番左のボタンを押すとScriptをそのまま実行します。ただし ブレークポイントを設定していないとそのまま終了まで実行してデバッグツールを終了します。Stop over next function callという 左から二つ目のボタンを押すと関数単位で少しづつコードを実行できます。
コンソールからコードを実行
コンソール部分ですが勿論コンソールの値を表示する箇所ですがその他にも直接コードを打ち込んで実行もできます。 簡単なコードを実行する場合はここに打っても良いでしょう。
ScriptUIは?
ScriptUIですが前回のような独自のUIでなく完全にHTML+CSSになりました。別物なので 前回ScriptUI中心に開発してた方は大変かもしれません。
その他公式のサンプルも確認できます。 Dialog上での構築となります。しかしHTMLファイルとCSSファイルが使えないのでJavaScriptのみで UIを構築することになります。正直普通にHTMLファイルとCSSファイルを別々に構築するより はるかに大変です。一度Plugin上で構築してからそのまま移植したほうが場合によっては楽かもしれません。
Script自身の状態を取得する
Pluginの方はexecuteAsModalメソッドからコールバックでexecutionControlオブジェクトとしてヒストリーやキャンセルの状態を受け取れました。 Scriptではuxpモージュールのscriptオブジェクトから同じようなオブジェクトを取得できます。
その他Scriptが走り終わった後に登録したドキュメントを自動的に閉じる executionContext.hostControl.registerAutoCloseDocumentメソッド、 Scriptがキャンセルされた時に発火するexecutionContext.onCancel.addListenerイベントメソッド（ただし自分が何度やっても発火しなかった。原因は不明） があります。その他トップレベルでのawaitが可能なのでいちいち即時async関数で非同期処理を囲む必要もありません。
InDesignのScript引数
InDesignの場合DevloperToolからScript実行する場合において引数の値を渡すことが可能です。まずは引数の取り方から。
uxpモジュールのscript classから引数にアクセスできます。今回のサンプルコードでは引数の内容をアラートで表示するだけの内容です。 肝心の引数の設定ですがこれはDevloperTool実行時に設定します。引数設定以外はPhotoshopと同じです。Scriptファイルをドラッグドロップするとこまで 進めてください。するとPhotoshopの時と違い中央下に引数の値を入力する項目があります。
このテキストボックス内に直接値を打ち込むことで引数の設定ができます。ただし値はArray型なので注意。カンマ区切りで値を区切り、 string,boolean,number,null型で渡せます。ただしstring型の場合はダブルクオートで文字列を囲ってください。
ただし本体のアプリケーションからScriptを実行した場合引数は取れないので注意。InDesignサーバーから実行した場合は渡せるらしいのですが、、、
UXP Scriptサンプル
GitHubにてPhotoshopUXPのサンプルを公開しています。よろしければ参考にしてください。Photoshop UXP Scriptサンプル