はじめに

ここには、CEP（Common Extensibility Platform）とやらに手を染めていく経緯を書き綴っていきます。
ExtendScriptしか武器のない身で（大昔にポケコンBASICをかじった、数年前ActionScript3を少しかじった、Cを少しかじったけどカケラも覚えていない、HTML5+CSS3も同様）太刀打ちできるのか、いや全然太刀打ちできてないんですが。
誰の役にも立たなそうですが、何も作らないうちからあまりにもハマりどころが多かったので、恥晒しがてら記録を残していくことにします。後発の妨げにならぬよう、理解の固まった部分だけ書き記していく予定ですが、どこかしらおかしなところがあれば即座にツッコミ入れていただけると大いに助かります。

着手開始まで

DTP作業のかたわら、ちまちまとスクリプトを書いて、ちょっと便利そうなのができて「これは汎用性あるぞ」と思ったらScriptUIでパレットなど作ったりしてて。
このパレットをアクリケーション標準装備のパネル群とドッキングできたら、さぞかしよかろうなあと思い、いわゆるプラグインはどんなもんじゃろうとSDKを覗いてみましたが、さっぱりわからずそっと閉じ。
しばらくしてFlashベースのUIがGUI操作で簡単に作れるConiguratorが到来。Coniguratorによるパネル作成はたいした専門知識も必要なかったので大喜びでいくつか作りました。

が、敢えなくディスコンに。CC2015からはビタイチ使えなくなりました。Flashここまで追い込まれるほど憎まれてるの…
同時にConiguratorから生成したzxpファイルをインストールするためのExtensionManagerも終わりました。以後はAdobe Add-ons上でやれ、という事らしいです。
で、いよいよ、CEPおやりなさい、と天啓が。

いざ着手（環境整備）

なんでもかんでもわかっている人にとってはテキストエディタひとつで作れる物…らしいのですが。
ExtendScript以外まるでわからないのでそういうわけには行きませぬ。
「Adobe CEP Extension」などでweb検索してみたとして、いろんなページに当たるわけですが、
人によりほぼ情報がバラバラです。とくに2015年以前の記事は混乱を招くので関わらぬが吉、と出ました。
いずれにしても、足元がおぼつくまでは、あっちこっち全部を参考にしていたらきっとわけがわからなくなることうけあい。
ウチの場合は幸いにしてten先生に手ほどきを乞うことができました。以後、全ての罠に律儀に嵌りながら進む無様っぷりの記録というわけです。
この記録は誰かのお役に立てば、という意識はほとんどなく、自分が同じ轍を踏まないように時折振り返るために書き留めておこう、というやつです。道のりが遠い。
つとめて自己の無知っぷり・できないっぷりを露見しつつになるのがとても痛いんだけど、まあがまん。
でもまあほら、つまづいたぶんだけ理解が深まる気もするし。。それにしてもつまづきすぎているのだが。

経典1：
CEP EXTENSION PRIMER 1 – SETTING UP TOOLS

ten先生によるお導きページ。文中のリンクも含め何度か（何度も）読み返すことになる経典。
書かれている通りにやれば一歩は踏み出せるようになっている。
…らしいのだが。はずだったのだが。

まあ、上記リンクの内容に沿って環境をこしらえます。
まずはBracketsのインストール。
今回の用途に向け非常に強力な、あのーアレである（言えよw）。
インストール後、起動します。アイコンは残念ながらブラでもケツでもありません。

機能拡張マネージャーから、先人がリリースされたエクステンションをどんどこインストールできます。

まあお好みで。ここではお薦めなど挙げませんが…

以下、必須項目。名称の一部を検索欄にどうぞ。紛らわしい名称の別物が出てくる場合もあるので注意。
Creative Cloud Extension Builder(CEP 7)
将来的にCEPバージョンは上がると思いますっていうか、コレ書いてる間に上がるっぽいです。CC2018出たし。
インストール後、ただちにメニューバーに項目「CC Extension Builder」が追加されます。

メニュー項目の詳細についてはのちほど。
※ウチはここから順調につまづき始めます

PlayerDebugModeの設定

次、経典に沿って、PlayerDebugModeの設定。詳しくは経典の後半を参照してください。

~/Library/Preferences/com.adobe.CSXS.<当該バージョンNo.>.plist
に追記せよ、とあります。

つまづき：
ユーザ>ライブラリ ではなく起動ディスク>ライブラリを見に行きました。

そっからかよ、と言われそうですが、まあ、そっからです。。
いざ書類は見つけたんですが
“「PlayerDebugMode」というエントリを追加して値を1（String）に設定”
がおぼつかず、ターミナルコマンドを授かりました。

defaults write com.adobe.CSXS.5 PlayerDebugMode 1

とくに説明ありませんでしたが（信頼されている）、
<コンピュータ名>:~ <ユーザ名>$　からではファイルパスが通らないのでcdコマンドが必要です。
cd （←半角スペースつける）
まで打って、ユーザ>ライブラリ>Preferencesフォルダを投げ込んでreturnします。
カレントディレクトリを移動、というやつです。
<コンピュータ名>:Preferences <ユーザ名>$　になったら授かりコマンドをペースト。
CC2017でテストするので、5を7に書き換え、

defaults write com.adobe.CSXS.7 PlayerDebugMode 1

とし、事なきを得ました。
経典1はここまで。まだ準備の半分です。。

経典2：
CEP EXTENSION PRIMER 2 BUILD UP PROJECTS 1

次の経典です。
この内容に沿って続けるとします。

新規Extensionの作成

Extensionプロジェクトの生成。さきほど増えたメニュー項目「CC Extension Builder」から「New Creative Cloud Extension」を実行。
ここでエクステンション名とユニークIDの入力がありますが、最初の最初だし、テストってことでHello Worldのまま進めます。

で、プロジェクトが作られるんですが、内容はというと「『Hello World! とアラートを出すためのボタンが1個あるだけのパネル」です。

ホストアプリケーションの指定

経典に沿って、Bracketsのウィンドウ左側から CSXS>manifest.xml を開き、最低限いじります。
最低限とは、ホストアプリケーションの指定。ウチはInDesignにしました。

つまづき：
CC2014以下では動きません

たまたま起動してたCS6を対象にしようとしてしまいました。けっこう恥ずかしい。
気を取り直して、InDesignCC2017をホストに指定します。
manifest.xml の <HostList> タグ内に見慣れたアプリケーション名が連なっているので、

<!– Photoshop –>

の下2行ぶんをコメントアウトします。前後の行にならって “<!—“と “–>”で括ります。
続いて、コメントアウトされているInDesignのホスト名をコメント解除します。

つまづき：
末尾のスラッシュ “/“は削除しちゃだめ

なんだかとても疲れていたので、”/>”がエスケープされていると錯覚したらしいです。すごく恥ずかしい。

次に、その行のバージョン指定を変更します。
既存の”[10.0,10.9]” はCC2014を指しています。CC2017で動かすために”[12.0,12.9]”としました。

manifest.xml はここまで。保存します。
経典のほうはその他の要素について解説が続きますが、今回は最低限をやるので割愛。

経典3：
BRACKETS用エクステンション、リリースしました(^-^)/

ここで、ten先生謹製のBracketsエクステンションを頂戴します。

packagetoolのインストール

Bracketsの拡張機能マネージャー（前述です）を開き、ウィンドウ下部の「URLからインストール」から、ten先生謹製「packagetool」をインストールします。
直リンも行儀がわるいので、経典3のほうでURLをコピーしてきてくださいまし。本文中の最初のリンクのやつです。
インストールするとメニューバー項目「Package Current Project」が追加されます。

ZXPSignCmdのインストール

次に経典でいうところの「肝心のツール」をダウンロードします。

CEP-Resources > ZXPSignCMD > 4.0.7 > osx10 > ZXPSignCmd.dmg まで掘り下げていくとダウンロードボタンあります。
とりゃえずCC2017で試すだけなので最新のをもらってきましたが
頂いて展開したZXPSignCMDフォルダは、どこか適当なところに置いておきます。オデコの上とかそういうのはだめです。

つまづき：
当該ファイルだけダウンロードするのがおぼつかず、CEP-Resources全体をダウンロードしちまいました。重かった。

そしたらメニュー「Package Current Project」から「Packager Preferences」を実行。
設定画面が出ます。

上の項目で、さっきもらってきたZXPSignCMDファイルを指定。
下の項目にタイムスタンプサーバのURLを入れます。どれを使うかはごじぶんで決めてください。何も言えない。

.p12ファイルの用意

準備があとひとつあります。.p12ファイルの用意です。ウチは既に持っていました。

つまづき：
Configuratorで作成したp12ファイルはだめ

Adobeつながりでも流用不可でした。。認証サーバが店じまいしている。
ten先生に相談したところ、「AdobeExchangePackagerを使えばいいかも」とのことで。
なんかわからないまま、p12ファイルを作るだけのために以下のアプリをダウンロード。
https://www.adobeexchange.com/api/Packager.dmg
インストール＆起動して、右上の「Certificate and Settings」をカチ。

「Create Certificate..」ボタンからp12ファイルを作成できます。
作成時に設定したパスワードはパッケージ時に必要になるので忘れないように。
どこか適当なところに置いておきます。オデコの上とかそういうのはだめです。

（やっと）エクステンション作成

えー、いよいよのエクステンション作成。
メニュー「Package Current Project」から「Package Current Project」を実行。

3つの項目を埋めます。
1番目でp12ファイルを指定
2番目で書き出し先を指定
3番目でp12ファイルのパスワードを入力。
書き出しに成功すればその旨ゆってきます。

ちなみに書き出し失敗した時のエラーがこちら。エラーコード26はp12ファイルが不正。

というわけでzxpファイルが生成できました。やれやれ。
しかしこれで終わりではないのです。。

野良zxpや自分テスト用zxpファイルのインストールにはZXPInstallerを使わせてもらいます。
http://zxpinstaller.com
これをダウンロードして起動します

このウィンドウにzxpファイルを投げ込むとインストールが始まり…
ませんでした。

よくわからなくなったので新規のHelloWorldを作成。今度こそうまくいき…
ませんでした。

これは前述のマニフェストのスラッシュ削除によるもの。……ぜぇぜぇ。

…という感じで、やっとインストール成功。

ten先生の寸評：
「ドーテーの初体験見ているようだったw」

おわりに

毎日の昼休みでだけさわってたんですが、
この一歩を踏み出すのに2週間以上かかった勘定になります。おつかれさま。。
さてー、いよいよなんか作ってみるとしますっ。
わりと先が思いやられます。

今から始める人たちが、ここまでをつまづかずにやれるたら何よりです（などといった心配はたぶん無用で、まわりの人たちはさくさく進んでおられるようす…）。