前回に続きパネルのjsとjsxの通信についての記事です。 ヘッドの情報を書き込む機能から。ただこれは前回のガイドを引く機能のようにフォームの情報をjsxに渡して実行するだけなので前回とあまり変わりません。 html js データを書き込む情報を日付とパスアイテムの長さから選べますがどちらとも選択されていない場合は書き込む情報が無くなるのでアラートを出して処理を中止します。 ヘッド情報を書き込む関数です。hostscript.jsxに追加します。パネルの情報によって書き込む内容を変えます。（と言ってもチェックボックスのオン、オフ程度の事ですが）最後に関数分岐用のswitch構文でmakeHead
jsからjsxに通信する場合、jsx内でエラーが起きても具体的にどこで起きているのか分かりにくい、$.write関数（console.logのjsx版）が使えないなどかなり不便です。これをもう少しやりやすくします。とりあえずVSCodeでデバッグするためにExtendScript Debuggerを使用します。CEPの開発をしながらjsxのデバッグもしたいのでvscodeのlaunch.jsonをCEPフォルダーの直下に作ります。 launch.json CEPのフォルダーからjsx内のjsxのテストを実行できるように“program“を “${file}&
今回からjsxとパネルのjsで通信します。main.jsから通信する前に通信の対象となるjsxを作ります。最初はアクティブなアートボードに対してガイドを中央に引くjsxを動かすjsを書きます。singleProcessというフォルダにsetCenterGuide.jsxを作ってその中にガイドを引くコードを書きます。 今回の通信は特にフォームの数値を渡したりするわけではないので単純にガイドを引くだけのシンプルなjsxです。 setCenterボタンを押すとcenterGuide関数が実行されるようにイベントを登録。関数の引数にjsxのファイル名、singleProcessを渡します。事前に準備し
ついにmain.jsに触ります。完成形が以下 今回Node.jsのネイティブモジュールを使用するため冒頭でfsとpathをrequireしてます。更に各種htmlのidタグをdocument.getElementByIdで取得。extensionRoot変数はご存知の通りjsxフォルダーのパスです。 本格的に解説に入る前にnav.jsの関数を実行した時に書いたコードをもう一度確認します。 冒頭の変数を頭に入れつつまずウインドウが開いた時に実行する関数、initから解説します。 非同期処理が入るのでasync関数として定義しています。ここで行っているのは。 jsxの共通の関数等を外部ファイルとし
今回から本格的にjsを書きてゆきます。jsもいくつかのファイルに分けて読み込ませます。その前にいくつか事前準備が必要です。まずはmanifestの編集。 今回メインの処理にNode.jsを使用するためnodeの行を追加します。それに加えて–mixed-contextも加えてください。これがないとウインドウ、リロード時にバグが起きるためです。–mixed-contextを残したくない場合開発終了時に除くこともできます。 次にjson2の配置。jsxとパネルの通信に必要なのでパネル側で読み込ませる前に事前にjsxフォルダーに入れておきます。こちらから入手してくだい。 また詳
Illustrator用Extension、BatchExtendAIを公開します。Photoshopのバッチ機能のようにIllustrator上で開いたファイルに対してアクション処理を使用します。Illustratorだとあらかじめ開いたファイルに対して使用する機能がなかったので作りました。アクションはあらかじめ作成したものを読み込んでくれます。セレクターからセットとアクション名を選んでください。ただしIllustratorが開かれた時にアクションを読み込むので新しいアクションを作成した直後は読み込みません。作成したアクションを新しく読み込み場合はアクション作成後Illustratorを再起
本当はcssを書ききってからjsに行こうかと思ったのですがさすがにmain formの切り替えを実装しないとレイアウトも形にならないので一度タブの切り替えの簡単なjsを書きます。まずこの切り替え用のjsですがメインの処置から独立させたいのでmain.jsとは別にnav.jsという名前でmain.jsと同じ階層にファイルを作ります。 わずか20行程のjsです。main.jsで実行するので全体を関数で囲みます。jsの解説に入る前にもう一度htmlを見てみます。 各種タブのラジオボタンにnav__radioというクラスが割り当てられています。getElementsByClassNameメソッドnav
前回全体のhtmlについて解説しました。ここから細かいタグも打ち込んでゆきます。まずはタブのhtmlからですが各種パネル表示を切り替える際にradioボタンの値で表示の内容を切り替えます。そのためにradioボタンをリスト形式で打ち込みます。 一気にhtmlの構造が複雑化しました。radio ボックスのフォームがリストタグの中に入れてさらにその外側をformタグで囲っています。この各種リストの中のradioフォームは全て同じ構造になっているので同じようなタグが並んでいるだけです。cssで装飾するためのタグも混じっているので一度削って分かりやすくします。 多少分かりやすくなりました。labelの
Extension関係の記事を検索すると環境構築してパネルを立ち上げるとこまでの記事はかなり多いのですが大体そこから先の記事はほとんどありませんでした。いわゆるHellow worldより進んだちょっとだけ複雑なExtensionの作り方を解説してみます。対象は環境構築はできる、もしくは簡単なパネルなら作れるくらいの方です。今回作るパネルには三つくらい機能を持たせてみます。ガイドを引く、ファイル情報をテキストにして印刷用にヘッドを作る、一時的なカラーの数値を保存する機能を持たせる、です。完成版はこちらにアップしておきました。 zxp圧縮版はこちらです。 パネルの完成図は以下のような感じに。 *
実験的にIllustrator用のExtensionを公開します。 Illustrator上でパスアイテムの塗りの色を管理するExtensionです。個人的によく使いそうな機能を主に三つ、一つのパネルにまとめました。 選択したパスアイテムの塗りの色を一括して動かす機能とカラーパターンを一瞬で作成する機能、それと特定の色をパネル上に一時的に保存する機能です。以下詳細。 塗りの色、一括調整機能 選択したパスアイテムをフォームに入力した数値だけ動かします。ばらばらのパスの塗りの色を一括して濃度の調整をしたいと思った事があったので作成。複合パスでもグループ化されたパスでも大体いけます。ただし特殊な設定