あと何年CEPが使えるかわからないけど、こないだ作ったやつをひもとく

どうもどうも。
先日こしらえたイラスターのCEPエクステンション「ドキュメントのカラーモードに合わせてカラーパネルがひゅんひゅんするやつ」(はたしてそんな名前だったかどうか)の中身を、頼まれてないけど少し紐解いて書き残しておきます。

独自の実装はほぼありません。ほとんど全部、公式Cookbookを読んだり、web上の誰かが公開していた情報だったり、Ten A師匠にだらだら聞いたり、チャピーに聞いたりしたものだけど、どこかの誰かの参考になれば幸いです。
未経験だとちょっと厳しい内容かと思います。

って、ほんとにCEPはいつまで生きていてくれるのやら、ですけど。
Photoshopなんかとっくに動かないよ。4年前のクライアントに申し訳がたたない…

スクショだけで追っていくので、コードはここからてきとうにどうぞ


CSXS

では、manifest.xml から。

Extensionを2こ作りました。
ColorPanelAdapter:ホストアプリケーションの起動中ずっと動くもの
RGBModeSelector:設定パネルのあるもの

ColorPanelAdapterの情報

フォーラムを参考にしたもの。
StartOnタグが重要で、これでよくあるエクステンションと違って起動中ずっと動くことになります。
UIタグは、UIを持たない仕様にするので、よくわからないけどこれで。ひどい解説もあったもんだな。

RGBModeSelectorの情報

ドキュメントがRGBのときRGB/HSBどっちを出すのか選ぶための質素なUIを司るやつです。
jsxは1つしか用意していなくて、ColorPanelAdapterと同時に参照するとローカル変数の挙動がどうなるか想像したくなかったので、こっちではコメントアウト。こっちからjsxに用事があるときはVulcanInterfaceでColorPanelAdapterを経由するようにしました(後述のjs参照)。
他はとくに珍しい記述はありません。

HTML

index.html ではjsの参照のみ。だったらファイル名もっと工夫しろよなー。スクショ割愛でーす。

ui.html は、基本的にはスタイルのリンクと2このラジオボタンのみ。bodyタグには外部からのドラッグやドロップを抑止する工夫がしてあります。これをやらないと恐ろしいことが起こる。前に河野さんに相談して教えてもらったやつです。
ほか、コメントアウトした部分ほのかに哀愁があります。

JavaScript

main.js は、大部分はAIHostAdapterを利用した各種イベントリスナーを書いています。
これが起動直後は不安定だったのでチャピーに相談して、イベントアダプタの読み込みが終わったのを確認してから動き出すようにしてもらいました。チャピーが参考にしたどこかの誰かに頭がさがりますねえ。

ほか、UIからの伝達を受けてjsxに投げるためのVulcanInterface。

と、これはただのデバッグ用だけどコンソールに出したい情報をui.js経由しています。
直接コンソール出力できなかった原因はわからないけど強く生きてます。

ui.js のほうはちょっとごちゃごちゃしています。
はじめにローカルストレージからコレ専用の保存済み情報を取得してmodeVal変数に。

つぎに、ちょっと前後しちゃってるけどラジオボタンのクリックイベント。
アロー関数まったく身についてないくせにwebからコピペで実装したやつ。
RGB/HSBの切り替え結果をmodeVal変数にしまって、ローカルストレージを上書きして、
sendMode関数でjsxに送っています。

と、最初に取り出したmodeVal変数があればUIのラジオボタンに反映。
ない時というのは、初回起動時や、キャッシュを削除したときにあたります。
modeVal変数がundefinedのときはラジオボタンの状態を変数に反映するようにしてます。あんまり意味がない気もする。

ついでに、jsxからコンソール出力したいときはこのui.jsで受け取って渡しています。

ExtendScript

最後にjsxです。
冒頭3行のローカル変数のうちcurrentなになには、無駄な処理をおさえるために前回の状態をとっておくためのもの。
あ、でも1こはもうどこでも使ってないや、しまった…
panelModeはUIのRGB/HSBを覚えておくもの。初期値として”RGB”を定義してあります。
最初のリリース時はui.jsからの送信があるまでundefinedのままだったミスがあり、
UIを一度でも表示させないうちは全体がうまく動かないという不具合に見舞われてしまってましたすみませんー。

changePanelMode関数は、ui.jsのラジオボタンの名前を受け取ってpanelMode変数を上書きするもの。
ついでにパネル表示を変更するswitchColorPanel関数も実行しちゃってますかっこいい。

switchColorPanel関数が実行部分です。
ドキュメントのカラースペースを調査して、変える必要があればカラーパネルの表示を変えるもの。
カラーパネル表示の変更には、アクションファイルを作成、読み込み、削除、アクションを実行、削除ということをやっています。

addActionSet関数がアクションの中身で、この内容でファイルを作成して、アプリに読ませたら即削除してますね。
見た目にアクションパネルがせわしなくちゃかっと動くので、「いいよアクション消さなくても残しといてくれても」という人のためにそういうオプションも実装しようと思ったけど、アクションがあるかないかを調べる手段がちょっと厳しいのでやめておきました。

cp関数は、うちがいつも用意する関数でcheck pointの頭文字。変数の値をみる用。
ふだんjsx単体を書くときは$.writeln か alert を出しているんだけど、これはコンソールに出すべくui.jsに送信するやつです。Ten A師匠から授かりました。

以上ですー。全体を眺めてみると、自分にしては無駄な部分が少なめにまとまった印象があります。
自分にしてはだからね。
何かあれば教えてください。
んじゃでは。

Illustrator:ドキュメントのカラーモードに合わせてカラーパネルを自動で切り替えるエクステンションをこしらえたよ

はじめに

きっかけは、はむこさんのぼやき。なんかこの流れわりと多いなw
しょっちゅういいこというからなあ。

https://x.com/hamko1114/status/1980819102185976050

そーなんすよ。
カラーパネルの野郎、今さわってるドキュメントのカラーモードがRGBだろうがCMYKだろうが「まったくそれとは無関係でござい」を貫いて表示してよこすんすよ。頑固っ! 頑固っ!
これがまた、うっかりの勘違いを引き起こす。たまによくやる。

カラーパネルの切り替えはスクリプトのDOMには用意されてない(おれ調べ)。
でもアクションならできるみたい(はむこ調べ)、
んじゃアクションを実行するスクリプトを何らかで連動すればいけるかもね、って。

で、何かいい方法あるかなって探してみたです。
探してみたところで、うちは勝手が効くのがExtendScriptだけなので。プラグイン作れる人はなんでもできる。
この「何かしたら連動して何かなる」というのを叶えるにはイベントリスナーを設定するってことなんだけど、IllustratorはInDesignと違ってそんなの用意されてない。
そう、InDesignならね(ないものねだり)。

でも別の日に別のもの調べてるとき、ちろっと見かけたんですよ。
IllustratorのイベントをExtendScriptでつかまえられるプラグインあるって。
ブラウザの履歴をたどったら、確かにあった。
AIHostAdapter ですって。

https://community.adobe.com/t5/illustrator-discussions/aihostadapter-aip-macos-installation-filepath/td-p/14228574?profile.language=en

https://community.adobe.com/t5/illustrator-discussions/aihostadapter-plugin-windows-install/td-p/12727345?profile.language=en

それをもとに、やれるだけやってみました(やれない部分もあるという意味…)。
よかったら使ってみてくださいまし。


いれかた(ちょっと手順がいくつかあります…)

AIHostAdapter プラグインをもらいにいきましょう。

https://github.com/Adobe-CEP/CEP-Resources/tree/master/CEP_11.x/AIHostAdapter

Win または macOS を、その日の気分でカチ。

なんちゃら.zip をカチ。

画面右上 … ボタンから「Download」。

ダウンロードして展開して、AIHostAdapter.aip を Plug-ins フォルダへ。
どうも入れ場所が諸説あるんですが、自分の環境では Plug-ins フォルダ直下で大丈夫でした。

Windowsの人は
/Applications/Adobe Illustrator 202x/Plug-ins.localized/AIHostAdapter.aip
あたり、らしいです。現在試せませんすみません…

続いて、うちがこしらえたCEPエクステンションをダウンロード。

https://github.com/AJABON/ColorPanelAdapter/blob/main/ColorPanelAdapter.zxp

ソースコードも置いてありますが、このzxpファイルだけで大丈夫です。
例によって右上の … ボタンからダウンロードしてください。

で、このzxpファイルをインストールするためのアプリが必要です(めんどいね、めんどいよね…)。

https://aescripts.com/learn/post/zxp-installer?srsltid=AfmBOoqR6UhtylS3KQe4wYcNsVxQ7sGko-q_Shzt1H_UNkztd_r8uEW_

macOSかWinか、風水に従ってダウンロード。

インストールは直感でやってみて。

野良アプリなので、macOSの場合いちばん最初の起動だけ右クリックから「開く」で。
セキュリティ的なことをゴネられたら、システム設定「プライバシーとセキュリティ」で許してあげて。

で、いざ起動するとこういう画面が出るので、zxpファイルを投げ込んでみましょう。
(このあと金のzxpと銀のzxpを手に持った女神が出てきますうそです)

以上が終わったらIllustrator起動。
起動済みだったら再起動。
以上でーす。


つかいかた

この時点でもうエクステンションは仕事しています。今回そういう造りです。
オフにするにはエクステンションをアンインストールするしかない。強気だー。

で、ドキュメントがRGBのとき、カラーパネルはHSBで表示したい、という大元の希望があったんだけど
配るにあたり、RGBがいい人もいるだろうということで、
切り替えるためのパネルも作りました。ウィンドウメニューから出します。
これは切り替えにだけ使うもので、パネルが出ていなくても仕事はします。

で、「WebセーフRGB」はバグがあるようで、どうしてもアクション実行から切り替えられませんでした。
ざんねーん。なので今回はCMYK、RGBまたはHSB のいずれかとなります。

冒頭の経緯にあるように、処理じたいは即席でアクションを作って、実行してすぐ削除しています。
Illustratorのスクリプトではけっこう常套手段なんだけど、気になる人は気になってしまうかも。
慣れましょうね(としか言えない)。

使い始めは少しだけギクシャクするかもしれません。
何度か動かしてるうちにスムースになっていく感じです。
何に対してもわりと言えることですね(いいのかそれで)。
なんでかはちょっとわかってない…たぶん変数が出揃ってないんだ。
まあ、ちょっと使ってみてくださいまし。

CEPの技術的な話題は次の機会にー。

しょぼめにAdobe Exchangeデビューしました

CEPエクステンションパネル というのを、今までいくつか作ってまして。
つっても、ほとんどはNDAありの受注ものなので世に出せないんですが。
一般公開しているものは、gyogyomojierjsxTimer あたりがそれです。

こいつら、Adobe Exchangeに有償公開(マーケットプレイス出品)するには年貢を納めないといけなくて、めんどうなのでBOOTH頒布という形を取らせてもらってまして。
外部サイトで頒布するデメリットは、インストールの手順が直感的でないこと。慣れればなんてことないんだけど。
ひとつ、Creative Cloud デスクトップアプリから入れられるものを用意して、
そして全世界にモテてみたい。そしてドルがもらえるおいしい仕事を受注したい。
…などとはツユほども考えていませんが、まあ、やってみたかっただけ。

そんなわけで、ちょっと肩慣らしに無償のプラグインをひとつアップしてみました。
一度リジェクトされましたが、ようやく承認されての公開です。
ついったーでねちっこくチラ見せしてたやつです。
よかったら使ってみてー。
IllustratorとInDesignで動きます。Photoshopのことは忘れましょう。

alignXY

世界的には「alignXY」という名前だけど、
日本人の皆さんには「タテヨコいっぺんに整列」って出ます。
かわいらしかろう。

パネルの余白が気になる人は、まだまだですね(何がよ)。
標準パネルの最小サイズに合わせてあります。これより小さくしてもいいことがなくて。

v1.1.1より、空きスペースに操作の不安を和らげるポエム(違う)を入れました。


あそびかた

インストールしたら、メニュー ウィンドウ > エクステンション から出してください。

使い方の説明は、とくにありません。…と言いたかった。審査時の申し送り欄にも “Nothing.” って書いたんだ。
そしたら検証にヘンな使い方されて、動かないからダメーって差し戻された…

2つ以上のオブジェクトを選択した状態で、ボタンを押してください。
タテヨコいっぺんに整列できます。それだけのやつです。
Illustratorでは、標準の整列パネルで設定してある整列先が効きます(アートボードに整列、選択範囲に整列、キーオブジェクトに整列)。
InDesignでは、標準の整列パネルで設定してある整列先は効きません。キーオブジェクトだけは使えます。
これ、独自に設定できるようにしてもよかったんだけど、逆に混乱を招きそうなので作りませんでした。
シンプルなままにしたかった。

v1.1.1より、アプリ標準の整列パネルでできること全部できるようになりました。
Illustratorではアンカーポイントの整列にも使えます。
InDesignでも[マージン、ページ、スプレッド]などの整列先が効くようになりました。あらかじめアプリ標準の整列パネルで設定しておいてください。


このプラグインは機能よりもUIのボタンアクションに一番チカラがこもってます。
マウス重ねたり、カチしてみたり、標準パネルと遜色ないものをめざしました。
そう、何もしないで作ったやつは、遜色あるんですよ。これ、わざわざ言わないとわからないやつ。
ぜひ見比べてみてねー。
(でも、あんまり厳しい目では見ないでねー…)