LoginSignup
12
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@macneko(Kojiro Yokota)

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

Posted at

概要

Adobeアプリケーションのエクステンション（CEP：Common Extensibility Platform）をMacで開発するための開発環境を構築する。
過去にBracketsを利用した開発環境構築の記事を書いたが、Adobe公式のVisual Studio CodeプラグインであるExtendScript Debuggerが発表されたので、開発環境を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をダウンロードする
  2. ダウンロードしたzipを展開したらそのフォルダ内に Visual Studio Code.app が現れる
  3. アプリケーションをApplicationsディレクトリにコピーする
  4. コピーしたアプリケーションを起動する

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. メニューから 表示 > コマンド パレット... を選択して、コマンドパレットを表示する
  2. 表示されたパレットの検索フィールドに「create cc」と入力し、絞り込まれた選択肢の中から「Extension Creator: Create a New CC Extension」を選択する
  3. 作成するExtension IDを入力するパレットが表示される。Extension IDはドメインを逆転させた形式となり、デフォルトでは com.example.helloworld と入力されているので、任意のIDを入力してEnterを押す
  4. 続いて作成するExtensitonの名前を入力するパレットが表示される。任意の名前を入力してEnterを押す
  5. 最後に作成するテンプレートの形式を選択する。「basic」「topcoat」「spectrum」「theme」の4種類が選択できる。各テンプレートにどんな差があるかは調べられていないので VSCodeで始めるAdobe CEP Extension開発 を読むと良さそう
  6. 以下のパスにサンプルエクステンションが作成されている。設定は次の項で行う
/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で利用できるように設定できた。
変更箇所を以下にまとめておく。

変更前

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

変更後

<Host Name="IDSN" Version="[10.0,13.1]" />
<ExtensionManifest Version="7.0"
<RequiredRuntime Name="CSXS" Version="7.0" />

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

  1. InDesign CC 2018を起動する
  2. メニューから ウィンドウ＞エクステンション＞Hello World を選択
  3. パネルが表示されるので、Call ExtendScript ボタンをクリック
  4. アラートが表示され、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を書いていないので情報が不足している部分も多いと思うので、このブログを参照して不足部分を補った記事を公開して筆者に教えていただけると、とても嬉しい。

12
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
12
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?