ガレージ暮らしのトライタム

プログラムやツールの解説や技術を公開する場所

PhotoshopExtensionでmain.jsを経由して、複数のjsxを呼び出す

これは何?

blacketsで作成したテンプレートから、自作のjsxシートを呼び出す処理の説明です。

テンプレート作成まで

テンプレート作成までは以下の記事を参考にしています。
www.tam-tam.co.jp

ここではテンプレート作成までの説明は割愛します。

実装手順

main.jsに記述を追加する

テンプレートが作成できたら、jsxフォルダの下に自作jsxや呼び出したいjsxを入れます。
呼び出す方法は「.jsxまでのフルパス」を指定すれば呼び出せます。

記述例

var basePath = csInterface.getSystemPath(SystemPath.EXTENSION);

$("#btn_sample").click(function () {
  var path = basePath + "/jsx/original_extension.jsx";
  csInterface.evalScript('$.evalFile("'+path+'")');
});

index.htmlに記述を追加する

#btn_sampleはindex.htmlのボタンの方で設定します。class idをこれで登録します。
記述例

<button id="btn_sample" class="topcoat-button--large hostFontSize">Preprocess</button>

注意点

jsxでメソッドが切られていない場合は、前述で実行できます。

  • もしjsx内部がメソッド単位で処理が切られている場合、メソッド名まで呼ぶ必要があります
  • 記述例:csInterface.evalScript('$.evalFile("'+path+'")/method()');