2020年9月版 Adobe CEPの開発環境
Adobe一般, Extension, javascript
Adobe JSXと違ってCEP周りの環境は日々進化しています。既に3,4年前に比べて開発環境が大きく変わったのでここに私の開発環境を書いておきます。
テキストエディター
今から始めるならVSCode一択でしょうか。Extend script debuggerのプラグインでJSXのデバッグもできます。CC Extension BuilderでCEPの雛形も作ってくれます。Adobe bracketsは一時期人気がありましたが今はどうでしょうか？だんだん古い情報しか検索に引っかからないようになりました。
デバッグ
2020年上旬あたりに突然Google chromeでCEPでのデバッグが出来なくりました。それまではCEPを立ち上げている間にローカルホストに接続するとデバッグ用のURLに飛べたのですが真っ白な画面が表示されるだけです。古いCEPのデバッグのやり方はこちらから。
解決策としてcefclientを使用する。ここからダウンロードできます。
もう一つが今まで通り最新のchromeを使用してchrome://inspect/#devicesにアクセス。表示されたdevtools画面からconfigureをクリックしてローカルホストのアドレス（Photoshopならlocalhost:8088）くわくしはこちらを参照Remote Targetより表示されるExtensionをクリックするとデバッグができるようになります。
polyfillとか外部script
JSON2は必須です。パネルとJSXとのやり取りで必要なので。詳しくはこちらから
CEP上でAdobeのアプリ同士でやり取りする場合はVulcan.jsを使用。詳しくはこちらから
CEPエンジン絡み
CEPの詳しいスペックに関してはこちらからECMA2015はCEP 8.0から対応です。それ以前のバージョン（もう手に入らなくなっちゃたけど）はIE並みに古いエンジンなので注意。ECMA2015以降の対応に関しては不明なのでモダンなコードを書きたい場合はトランスパイラー必須です。Node.jsが2020年9月の時点でLTSが12.18.3なのにCEPではNode.js 8.6.0になってます。古いですね。CEP10はNode12.3.1になるようです。たまに一部のmodulesがNodeが古すぎて動かなかったりするので注意。例えばfsの機能を拡張するfs-extra。9.0.1が既にCEP9で動かなくなっています。8.0.0なら動きますのでnpmでインストールする場合はnpm i fs-extra@8.0.0のようにインストール。
webpack
webpackは最新のバージョンで書かれたJavaScriptのバージョン古いブラウザで動くように下げたりimport文で読み込まれたファイルを一つにまとめるバンドラーです。フレームワークとか最新のjsの書き方を始めるあたりで導入するといいでしょう。詳しくはこちら。
jsのトランスパイラは必須なのでbabel、またはtypeScriptを使用している場合typeScript自身がトランスパイラの役割を果たしてくれます。sassを使用する場合なんかもwebpackでcssに変換可。古いCEPに対応させる場合はベンダープレフィックスも必要になるのでautoprefixerも必須です。本番開発時の圧縮にterser-webpack-pluginもあると便利です。production書き出し時にサイズを圧縮してくれて尚且つconsole.logも自動的に取り除いてくれます。
JSXとパネル側のシステムを同時にデバッグする
JSXはパネル側から動かすと具体的にエラーを返してくれなかったり$.writelnメソッドが使えないためにデバッグがすごぶる難しくなります。なのでJSXはJSX単体でデバッグする必要があります。
またJSXの外部scriptの読み込みは通常#inculdeで読み込みますがCEP側からデバッグする場合はエラーを返して使用できません。事前にCEP側で読み込むことで外部ファイルとして使用できます。詳しくはこちら