あと何年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の技術的な話題は次の機会にー。

InDesign, Illustrator:モジ入力するやつ、まとめました

というわけでアレコレコンパチにしました。
よかったねえ。正直誰も得しないんだけど、書いた人は管理がラクになるだよ。

※結局Windows環境があまりにもあんまりな挙動をしたので、分けなおしました…。
何やってんだー。
使い心地は一緒ですが、InDesignはダイアログのフリをしたパレットなので、出現中もドキュメントをさわれてしまいます。知らないふりして文字入力にいそしんでください。


モジ入力するだけ.jsx

たぶんCS5以降どれでも動きます。
前までのやつはCS4以降で動くと書いてたけど、あれは嘘ですな。CS4がやばいんだ。

2025.06.04 キャンセルしても入力されてしまうマヌケな不具合を修正…すみませんー。また、Windows環境ではダイアログを閉じた時にバックグラウンドのアプリが前面に出てしまう現象を確認しました。ひとまず応急的に対策しましたが、引き続き調査します。
2025.06.05 前日の修正でIllustratorに使えないメソッドを入れてしまったので対応。すみませーん。…と、選択文字列を取り込んだ際にWindows環境ではダイアログ上で選択状態にならなかったのを改善しました。


ここがチガウ

ダイアログをScriptUI仕立てのものに変更しました。
これでダイアログ上でのコピペやショートカットによる「すべてを選択」が可能になりました。
ついでで文字が少し大きくなりました。わざとではないのでこれ以上はどうしようもないんだけど。
まあ、よかったねえ。


ここもチガウ

ちょっと改良して、
スクリプト実行時にshiftキーが押されていると選択した文字列がダイアログに取り込まれます。
macOSでInDesign上で実行したときに限り、そのまま勝手に再変換がかかります。
再変換についてはだいぶ昔につくったやつをわりと安定化させました。
それ以外の環境で再変換したいときは自分でショートカットとかやってください。
※ ATOKなど外部IMを使ってる人のことは知りません
※ Windowsで情報おもちの方、なんかいい話あればおしえてください


つまりはショートカットを2通り登録するだよ

ということで、shiftあり/なし でショートカットを2通り作っておくといいです。
有志のスクリプトランチャーが対応しているかはちょっとわかりません(調べてません)。
InDesignの場合は楽勝で、
「内容」のプルダウンメニューで切り替えて、「オブジェクト」と「テキスト」で振り分けましょう。

Illustratorの場合はちょっとだけ手間をかけます。
新規アクション作成。ファンクションキーをあてます。shiftあり/なしで2こ作ります。

アクションパネルメニューから「メニュー項目を挿入」

で、この画面が出てるうちにメニューからスクリプトを実行すると名前が入るのでOKボタン。
アクション記録中にスクリプトをただ実行しただけだとうまく記録できないので注意。

というわけで。
さあ、安心して働きましょお。