Adobe Illustrator Extensionの開発 脱Hello Worldその13
前回に続きパネルのjsとjsxの通信についての記事です。
ヘッドの情報を書き込む機能から。ただこれは前回のガイドを引く機能のようにフォームの情報をjsxに渡して実行するだけなので前回とあまり変わりません。
html
js
データを書き込む情報を日付とパスアイテムの長さから選べますがどちらとも選択されていない場合は書き込む情報が無くなるのでアラートを出して処理を中止します。
ヘッド情報を書き込む関数です。hostscript.jsxに追加します。パネルの情報によって書き込む内容を変えます。（と言ってもチェックボックスのオン、オフ程度の事ですが）最後に関数分岐用のswitch構文でmakeHead関数を追加します。
これでヘッド関数はできました。これは簡単ですが次の色情報を一時的に保存してドキュメント上に保存する関数はjsxから情報を拾ってパネルに反映させたりパネルの色情報をドキュメント上に反映させます。
loadColor.jsx
これは現在のツールパレットで選択されている塗りの色の情報を取得するjsxです。singleProcessフォルダーの中に新しく作ってください。パネル側に渡すためオブジェクトを新しく生成してからカラーオブジェクトのプロパティーをfor..in構文で新しいオブジェクトに渡しています。ちなみにアプリケーションのネイティブオブジェクトをそのままパネル側に渡そうとするとエラーで渡せません。オブジェクトを渡す場合はネイティブオブジェクトをそのまま渡したい場合も新しいオブジェクトに値を渡してください。それで、一度パネルのjsに移ります。
colorObjはIllustrator側から取得したカラー情報を格納したオブジェクトです。このカラー情報が格納されたオブジェクトの中身ですがcyan,magenta,yellow,blackもしくは、red,blue,greenとtypename(色情報の種類の名前)になっています。こちらのページで詳しく見ることができます。それでこのオブジェクト情報をパネルのnumberフォームに反映させるのですがこう言った大量の情報を一々一つ一つ入力するのは面倒です。それでhtmlを見てください。
各種numberフォームのidにカラーのオブジェクトのプロパティ名が対応しているようになっています。つまりdocument.getElementByIdメソッドのid名にオブジェクトのプロパティ名を渡すだけで各種numberフォームの要素を取得できます。ここのvalueプロパティーに数値を渡すだけでフォームに情報を反映させることができます。一連の流れをObject.entriesメソッドで行います。ちなみにtypenameプロパティーの値に関してはここでは必要ないのでkeyの名前がtypenameの場合は省略するようにしています。
最後にパネルのフォームの数値をカラーパスアイテムとして書き出すメソッドを搭載させます。
pastOnDoc関数
カラー情報が格納されたフォームから数値を取得してIllustratorに書き出します。その前にIllustrator上のドキュメントのカラータイプを取得したいのでsingleProcessフォルダーに以下のgetColorSpace.jsxを追加します。
Illustratorからカラースペースを取得する簡単なコードです。取得したカラースペースをパネルに渡して値によってRGBのフォームから取得するかCMYKから取得するか決めます。しかしフォームの数値を再度オブジェクトにしたいのでdocument.getElementsByClassNameメソッドで取得したフォーム要素をArray.fromメソッドでArrayオブジェクトに変換.。setColorSpace関数で取得したカラースペースの名前からRGBかCMYKのstringを返し、それをそのままdocument.getElementsByClassNameメソッドに渡します。これでフォームの要素取得できるのでそれをそのままreduce構文でオブジェクトに変換。初期値に空のオブジェを渡して各種要素のid名をプロパティ名にしてnumberフォームの数値を代入します。これでIllustratorのカラーのネイティブオブジェそっくりなオブジェクトがまた生成できました。これをjsxに渡してhostscriptを実行します。
pasteColor関数
パスアイテムを生成するオブジェクトからパスアイテムをIllustrator上に作成してパネルから渡された色情報を反映させます。パスアイテムカラーをセットするメソッド、setColorメソッドで色情報をセットしますがこの中の関数は別途partialフォルダーの中のsetColor.jsxファイルの中で関数を宣言してパネル側で事前に読み込んでいます。
setColorメソッドでカラースペースの種類によって返す関数を判別、setColor.jsx内の関数にパネルで取得した色情報オブジェクトを渡す、それをそのままカラーオブジェとしてパスアイテムのfillColorプロパティーにセットします。最後にhostscriptのswitch文にsetColor関数をセットして終わりです。
ついに完成しました。一連のCEPの機能を説明しようと思ったら思いの外長くなってしまいました。やはりCEP独自の仕様やjs,jsxとの通信など難しい要素が多々あるため簡単に説明するのは難しいですね。ただ次回おまけ的にload eventの搭載を最後に続きます。