Adobe Illustrator Extensionの開発 脱Hello Worldその10
ついにmain.jsに触ります。完成形が以下
今回Node.jsのネイティブモジュールを使用するため冒頭でfsとpathをrequireしてます。更に各種htmlのidタグをdocument.getElementByIdで取得。extensionRoot変数はご存知の通りjsxフォルダーのパスです。
本格的に解説に入る前にnav.jsの関数を実行した時に書いたコードをもう一度確認します。
冒頭の変数を頭に入れつつまずウインドウが開いた時に実行する関数、initから解説します。
非同期処理が入るのでasync関数として定義しています。ここで行っているのは。
- jsxの共通の関数等を外部ファイルとして事前に読み込み。
- デバッグしやすくするためにウインドウを閉じて開いた時にリロードしてコードの編集を反映させる（通常Illustratorを再起動させないと反映されないのでめんどくさい）
- json2ファイルを読み込む
- themeManager.initの実行。
themeManager.initはwindow.onloadのスコープからinit関数スコープに移しただけなので問題ないですね。まずはjsxの読み込みです。後々jsxのpartialフォルダーに外部ファイルとして読み込むjsxファイルを読み込ませます。CEPから実行するjsxはincludeが使用できないのである程度ファイル毎にコード分けたい場合はmain.jsで事前に読み込ませるしかありません。partialフォルダーのファイルを取得し、そのためのNodeのreaddir関数をPromiseで返す関数を定義します。partialフォルダーのjsxもここで用意しましょう。
setColor.jsx
カラーオブジェクトを返す関数のjsx
setGuide.jsx
特定の名前のレイヤーを発見する関数とアクティブなアートボードを取得する関数。
後々hostscript等を実行する場合に呼び出す関数です。
readDirFiles関数で取得したファイルをfilter関数でjsx以外の拡張子を除外します。これでjsxのファイル名を取得した後にforEach関数でevalscript関数でjsxファイルを読み込んでいます。json2も同じやり方で単体のファイルとして読み込んでいます。
次にウインドウのイベントを追加しています。
これでコードを編集した後にパネルに変化を反映させたい場合はウインドウを閉じるだけで反映させられます。