MacにAdobe CEPの開発環境を構築する with Visual Studio Code

## 概要
Adobeアプリケーションのエクステンション（CEP：Common Extensibility Platform）をMacで開発するための開発環境を構築する。
過去に[Bracketsを利用した開発環境構築の記事](http://www.macneko.com/entry/build-adobe-cep-development-environment-on-mac)を書いたが、Adobe公式のVisual Studio Codeプラグインである[ExtendScript Debugger](https://marketplace.visualstudio.com/items?itemName=Adobe.extendscript-debug)が発表されたので、開発環境をVisual Studio Codeに移行することにし、記事にまとめることにした。  

## この記事でやること
* 開発環境について
* 開発環境の構築について
* サンプルエクステンションの作成・起動について

## この記事でやらないこと
* エクステンションの開発について

## 想定する環境
* macOS 10.13.6
* Adobe Creative Cloudの2015以降のアプリケーションがインストール済

## 開発環境について
### 開発環境の選定
概要でも述べたがAdobeが今後のスクリプト開発の環境としてVisual Studio Codeを選択した（気まぐれかもしれないが）ので、開発環境はVisual Studio Codeとなる。
Visual Studio CodeはBrackets以上に開発を効率化してくれるプラグインが豊富にあるため、HTML5＋CSS＋JavaScriptで構成されているCEPの開発にはもってこいだろう。

### Visual Studio Codeとは
Visual Studio Codeは、Microsoftが開発したオープンソースのコードエディタ。https://azure.microsoft.com/ja-jp/products/visual-studio-code/
  
拡張機能が豊富で、自分の使いたい機能を追加、もしくは開発して公開することが可能である。
どんな機能拡張があるかは、下記のサイトを参照。
https://marketplace.visualstudio.com/vscode

## 開発環境の構築
ここからは実際に開発環境を構築していく手順を紹介する。  

### Visual Studio Codeのインストール
前述した公式サイトからダウンロードできる。

1. 公式サイトから最新版のzipをダウンロードする
1. ダウンロードしたzipを展開したらそのフォルダ内に `Visual Studio Code.app` が現れる
1. アプリケーションをApplicationsディレクトリにコピーする
1. コピーしたアプリケーションを起動する

### Visual Studio Code拡張機能の `CC Extension Builder` をインストール
`CC Extension Builder` は、簡単にCEPのテンプレートプロジェクトを作成することができるプラグイン。
https://marketplace.visualstudio.com/items?itemName=hennamann.cc-extension-builder  

1. Visual Studio Codeのサイドバーメニューの機能拡張を選択し、検索フィールドにCC Extension Builderと入力する
2. 検索フィールドで「CEP」と入力、表示された `CC Extension Builder` をクリックする
3. Visual Studio Code上で `CC Extension Builder` のページが開くので、インストールボタンをクリック
4. さきほどクリックしたインストールボタンがアンインストールボタンになっていればインストール成功

### `Player Debug Mode` の設定
CEPをアプリケーションにインストールするには、本来はCEPのプロジェクトをパッケージしたzxpをインストールする必要がある。
そしてパッケージするためには、証明書が必要だったり、他ツールのインストールが必要だったりするんだけど、その準備がなかなか面倒くさく、かつデバッグのたびにパッケージするのも手間だ。
そこで、デバッグモードを有効にする。

まず、メニューから `表示 > コマンド パレット...` を選択して、コマンドパレットを表示する。ショートカットは `cmd + shift +p` だ。
表示されたパレットの検索フィールドに「cep debug」と入力し、絞り込まれた選択肢の中から「Extension Creator: Enable CEP Debug Mode」を選択し、デバッグモードを有効にする。 
デバッグモードを有効にすることでインストールする手間がなくなり、所定のディレクトリにCEPを設置することでデバッグ実行が可能になる。

## サンプルエクステンションの作成・起動について
CEPの開発環境が構築できているか、サンプルエクステンションを作成して確認する。  

### サンプルエクステンションの作成手順
1. メニューから `表示 > コマンド パレット...` を選択して、コマンドパレットを表示する
1. 表示されたパレットの検索フィールドに「create cc」と入力し、絞り込まれた選択肢の中から「Extension Creator: Create a New CC Extension」を選択する
1. 作成するExtension IDを入力するパレットが表示される。Extension IDはドメインを逆転させた形式となり、デフォルトでは `com.example.helloworld` と入力されているので、任意のIDを入力してEnterを押す
1. 続いて作成するExtensitonの名前を入力するパレットが表示される。任意の名前を入力してEnterを押す
1. 最後に作成するテンプレートの形式を選択する。「basic」「topcoat」「spectrum」「theme」の4種類が選択できる。各テンプレートにどんな差があるかは調べられていないので [VSCodeで始めるAdobe CEP Extension開発](http://uske-s.hatenablog.com/entry/2018/12/18/003437#%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%92%E9%81%B8%E6%8A%9E) を読むと良さそう
1. 以下のパスにサンプルエクステンションが作成されている。設定は次の項で行う
	
```bash
/Users/(user_name)/Library/Application Support/Adobe/CEP/extensions/com.example.helloworld
```

### サンプルエクステンションの設定
作成したサンプルエクステンションの設定を変えて、InDesignで利用できるようにする。  
変更するところは `CSXS/manifest.xml` にある以下の3つの項目。

- InDesignのバージョン表記行
- CEPのバージョン × 2ヶ所

前項で作成したサンプルエクステンションがVisual Studio Codeで開かれていると思うので、`CSXS/manifest.xml` を開く。 

まず、InDesingのバージョン表記行を変更する。
作成された状態ではPhotoshopのみ有効になっているので、InDesignでの読み込み部分のコメントアウトを解除する。行頭の `<!-- ` と行末の ` -->` を削除するか、ショートカットの `cmd + /` でコメントアウトが解除できる。
そのあとは、エクステンションを利用できるInDesignのバージョンを変更する。 `Version="[10.0,99.9]"` の `[10.0,99.9]` が「バージョン番号10から99.9まで対象」という意味になっている。
ここではInDesign CC 2018で利用するためにバージョンを `[10.0,13.1]` に変更する。  

続いて、CEPのバージョンを変更する。
`<ExtensionManifest Version="9.0"` と記載されているところを探して、`9.0` の部分を `7.0` に変更する。
そのあと `<RequiredRuntime Name="CSXS" Version="9.0" />` と記載されているところを探して、`9.0` の部分を `7.0` に変更する。  

以上でInDesign 2018で利用できるように設定できた。
変更箇所を以下にまとめておく。

**変更前**

```xml
<!-- <Host Name="IDSN" Version="[10.0,99.9]" /> -->
<ExtensionManifest Version="9.0"
<RequiredRuntime Name="CSXS" Version="9.0" />
```

**変更後**
	
```xml
<Host Name="IDSN" Version="[10.0,13.1]" />
<ExtensionManifest Version="7.0"
<RequiredRuntime Name="CSXS" Version="7.0" />
```

### サンプルエクステンションを利用する

1. InDesign CC 2018を起動する
1. メニューから `ウィンドウ＞エクステンション＞Hello World` を選択
1. パネルが表示されるので、`Call ExtendScript` ボタンをクリック
1. アラートが表示され、`hello from ExtendScript` というメッセージが表示されていれば成功

## 注意点
CEPが読み込まれない場合は、設定が誤っている可能性が高い。
簡単なチェックリストを紹介する。  

* `Player Debug Mode` が有効になっているか
* 利用したいアプリケーションが `manifest.xml` でコメントアウトされていないか、もしくは記載が削除されていないか
* 利用したいアプリケーションのバージョンが `manifest.xml` に含まれているか

## 公式ドキュメント
アプリケーションのIDや対応しているCEPのバージョン、各アプリケーションのCEP上でのバージョンなどはGitHubのリポジトリから参照できる。
https://github.com/Adobe-CEP/CEP-Resources

## 最後に
出遅れた感はあるが、Visual Studio CodeでCEP開発を行うための環境構築について簡単にまとめた。
筆者自身は最近CEPを書いていないので情報が不足している部分も多いと思うので、このブログを参照して不足部分を補った記事を公開して筆者に教えていただけると、とても嬉しい。