JSXを読み込んで実行する
GeneratorからPhotoshop用JavaScript、JSXを利用できます。Generatorには2つのJSX評価用メソッドが用意されています。1つはevaluateJSXString(string)で文字列でJSXコードを渡すことで処理を実行してくれるメソッドです。文字列で書いていくのは少々しんどいので、外部jsxファイルを読み込んで実行するためにevaluateJSXString(path)というメソッドが用意されています。
まずは自作のプラグインフォルダ内にjsxファイルを用意します。main.jsと同階層です。試しにレイヤーの選択を切り替えるごとにレイヤー名をアラートで表示してみましょう。imageChangedのリスナーが呼ばれたらjsxを読み込むようにしてみます。selectedLayer.jsxというファイル名で下記のコードを記述します。
alert(app.activeDocument.activeLayer);
このjsxファイルをonImageChangedで読み込むようにします。下記のように記述します。ファイルパスはgenerator-core/lib/generator.jsから見た相対パスを指定します。実際にプラグインとして稼働させるにはファイルパスの指定の仕方が変わりますので、本稿の最後のセクションを御覧ください。
function onImageChanged(event) {
console.log("イメージが変更されました。");
_generator.evaluateJSXFile("../../plugins/first-plugin/selectedLayer.jsx").then(
function(result) {
console.log(result);
},
function(error) {
console.error(error);
}
);
}
ここまで用意してからPhotoshopへ再接続し、レイヤーを選択してみると、コマンドラインにレイヤー名が表示されると思います。
プラグインとして稼働させる
このままでは任意のフォルダで開発している状態なので、実行コマンドを打たないと稼働しません。実際にプラグインとして稼働させるには、アプリケーションフォルダ内の下記の場所にプラグインを配置する必要があります。
- /Applications/Adobe Photoshop CC/Plug-ins/Generator/
また、jsxのファイルパスはこの配置によって変わってしまうので、下記の箇所を書き換えます。
_generator.evaluateJSXFile("../../plugins/first-plugin/selectedLayer.jsx")
_generator.evaluateJSXFile(this._photoshop._applicationPath + "/Plug-ins/Generator/first-plugin/selectedLayer.jsx")
これでPhotoshopを起動すると、今度は起動しただけで下図のように［ファイル］-［生成］メニューに「はじめてのプラグイン」が追加されていることが確認できます。これでプラグインとして正式に稼働し始めました。
いかがでしょうか。だいぶやりたいことが膨らんできたと思います。プラグインからjsxにパラメータを渡すこともできるので、JSX上でレイヤー情報を取得してCSSを生成したり、fsモジュールを使ってリアルタイムでファイル生成をしたりして、Photoshopとhtmlコードの自由な連携を独自に生み出すことができそうですね。これを機にnode.jsとjsxを使って楽しんでみてはいかがでしょうか。
本稿のサンプルは下記URLで公開しています。
参考
Generatorのリファレンスは現状見当たらないので、generator.jsのソースが参考になります。
- JSXのリファレンス「Adobe Photoshop Scripting | Adobe Developer Connection［ADC］」
- generator-coreなどAdobe Photoshopリポジトリ「adobe-photoshop（Adobe Photoshop）」
