Adobe Illustrator Extensionの開発 脱Hello Worldその11
今回からjsxとパネルのjsで通信します。main.jsから通信する前に通信の対象となるjsxを作ります。最初はアクティブなアートボードに対してガイドを中央に引くjsxを動かすjsを書きます。singleProcessというフォルダにsetCenterGuide.jsxを作ってその中にガイドを引くコードを書きます。
今回の通信は特にフォームの数値を渡したりするわけではないので単純にガイドを引くだけのシンプルなjsxです。
setCenterボタンを押すとcenterGuide関数が実行されるようにイベントを登録。関数の引数にjsxのファイル名、singleProcessを渡します。事前に準備した関数に簡単にjsxを実行できます。非同期なのでasync関数の中でawaitでjsxからコールバックが返ってくるまで待ちます。自作の関数ではPromiseを返すようにしているのでasync,awaitで簡単に描けるようにしています。返ってきた値はconsole.logでデバッグのために表示。IllustratorのExtensionはjsx内でエラーが起きた場合エラーの内容を返してくれます。jsx内では最後に何かしらの値を返すようにしておきます。
これは簡単ですね。次にフォームの値を渡すjsxを実行します。アートボードの周りにマージンとなるガイドをつける機能を作ります。今回はパネル上のフォームに入力した数値をjsxに渡します。ガイドフォームの長さの単位（mm,point,centi）とマージンの長さの数値をjsxに渡して単位とマージンの数値をもとにガイドをアートボードに引きます。
まずdocument.unitForm.unit.valueで単位の種類を取得します。これはhtmlのformの名前、ラジオの名前から値を取得します。具体的にはdocument + unitForm(formタグのname属性) + unit(ラジオボタンのname属性) + valueです。各種単位のラジオのタグに同じunitのname属性がつけられていますがこれによってどこかのボタンをチェックした時に他のラジオボタンのチェックが外れるようになっています。必ずラジオボタンをつけるようにしておきます。これで長さの単位を取得できます。マージンの長さはnumberフォームのidを最初に取得してそこからバリューで取得できます。（
document.getElementById(“marginValue”).value）最後にこれらの値をhostProcess関数に渡してhostscriptを実行します。ちなみにtype:”setGuide”はjsx内の関数の種類を分岐するためのプロパティーです。一度hostscriptに移ります。
hostscript
hostscript.jsxのコードをhostscriptの関数スコープで囲んでいます。main.jsのhostProcess関数内でhostscript関数を呼び出すようにしてその中のswitch文で引数のオブジェクトのtypeプロパティの中身で分岐するようにしています。グローバルスコープにコードを書くのを避けるためにこういった形をとっています。今回typeプロパティはsetGuideでjsx内でsetGuide関数を呼び出すようにしています。その他の機能は後に書くのですがとりあえず空欄です。これでアートボードにマージンのガイドをつける機能もできました。
しかしjsxとjsの開発でつまづいた時によくデバッグに苦しむ事が多いでしょう。エラーが起きた時にjsとjsxのどちらでエラーが起きているか、特にjsx内でうまく動かなかった時にどこが動かないとか拾いづらいです。勿論jsxのデバッグを先に単体で終わらせるのが良いでしょうがフォームの値を渡しながらデバッグしたい時もあります。それでは次回パネルとjsxのデバッグについて掘り下げます。