js->jsxの通信部分のデバッグ Adobe Illustrator Extensionの開発 脱Hello Worldその12

Illustrator, 開発してみる

jsからjsxに通信する場合、jsx内でエラーが起きても具体的にどこで起きているのか分かりにくい、$.write関数(console.logのjsx版)が使えないなどかなり不便です。これをもう少しやりやすくします。とりあえずVSCodeでデバッグするためにExtendScript Debuggerを使用します。CEPの開発をしながらjsxのデバッグもしたいのでvscodeのlaunch.jsonをCEPフォルダーの直下に作ります。

Vscode json

launch.json

CEPのフォルダーからjsx内のjsxのテストを実行できるようにprogram“を ${file}“にセットします。これでjsxのテストをCEPのディレクトリーから実行ができます。そしてjsxに渡す引数のオブジェクトをそのままjsxに渡さないで一度jsonとして書き出します。

fs.writeFileSyncでjsxに渡すオブジェクトを一度jsonとして書き出し、それをjsxにコピペします。

data.json

これが書き出されたjsonですが少し見辛いですね。整理します。右クリックでドキュメンのフォーマット選択。

フォーマット

フォーマット

綺麗になりました。詳しくはこちらの記事が参考になります。

これをhostscriptにペーストしてデバッグします。

main.jsで事前にjsxを外部ファイルとして読み込んでいる場合デバッグ時にjsx内でincludeで外部ファイルを読み込まないとパネル側から実行した時の状態を再現できません。勿論include等は本番実行時にはコメントアウト等で無効化しておきます。(パネル側から実行するとエラーの原因になる)

こんな感じでhostscriptの頭にペーストしてhostscript関数も実行します。貼り付けたオブジェクトを引数としてhostscript関数に渡してExtendScript Debugger上で擬似的にパネルとjsxの通信ができます。デバッグ

少し手間がかかるので簡単な機能のCEPの開発では必要ないかもしてませんが規模が大きくなると有効かもしれません。

Beer 寄付してサイトを応援する。