先日、ExtendScriptの次期アップデートがVSCodeの拡張機能としてリリースされるという情報がAdobe Tech Blogにて公開されました。
先日のもくもく会ではVSCodeの機能性などが紹介され、僕はスクリプトの開発環境をBracketsからVSCodeに移したところです。
そしてInDesignのスクリプト開発環境は、今後VSCodeがデファクトスタンダードになっていくと思われます。というわけで、僕自身も模索しながら開発環境を整えてみました。そういった拡張機能などを紹介していきます。これでCEP開発に踏み出せそう…かな？^^;;
VSCodeのインストール
まずはVSCode。以下よりインストールできます。Mac、Win、ともに対応しています。
VSCodeの開発環境を整える拡張機能
日本語ローカリゼーション
VSCodeは、インストールした段階ではUIがすべて英語になっています。日本語版は拡張機能としてインストールします。
詳しくはこちらなど。
拡張機能のインストールはすべてこの方法で行います。なので以下は拡張機能の紹介だけします。
対応する括弧を色付け
起こし括弧に対応する受け括弧を色分けしてくれる拡張機能です。超便利。
jsx/jsxbinファイルのサポート
2019/2/1 追記
この記事で取り上げましたが、Typescriptによるトランスパイルを前提とした開発に移行しています。
ですので、下の拡張機能は現在使っておりません。
追記ここまで
ExtendScriptのファイル拡張子をサポートしてくれる拡張機能です。
普通のJavaScriptなどでExtendScriptのシンタックスカラーリングは実現できますが、例えば#targetengineなど、#が不当な文字としてエラー扱いされてしまいます。このプラグインを利用すればそのような文法上のエラーが起きなくなります。
JSDocのサポート
前回のもくもく会#10で、めんたいこさんが紹介してくださった拡張機能です。
JSDocとは、JavaScriptでブロックコメントとして書き込む定型書式で、関数や変数についての詳細な説明を記述しておき、コードの中身をユーザーにわかりやすく説明するものです。詳しくはググってくださいw
この「Document This」という拡張機能を導入すると、JSDocの記述作業が劇的に楽になります。
このJSDocというものが便利だ、必要だ、と思う（思ってもらえる）人には響くと思いますが、そもそもExtendScript（もっといえばJavaScript）は、細かい文法をあまり気にせず比較的自由に書ける言語です。ましてDTPではコードが評価されることはなく（断言）、スクリプトを実行した結果だけが評価されます。DTPとして有用なスクリプトかそうでないかだけが評価対象なのです。多くの人には「JSDoc？そんなの必要なの？」と思われるかもしれません。
そのような「DTPにおけるスクリプト」でも、スクリプト開発者としては（言語規格／仕様に準じたという意味で）正しいコード、効率の良いコードを、書けるかどうかはまた別問題ですが、個人的には追求していきたいと思っています。
InDesignを使ってても同じだと思うのです。最終的な印刷物しか評価されないわけですが、データを作る者としては、不具合が起きにくい、正しく出力できる、効率のいいデータ作りを求めるべきだと思います。スクリプト開発もまったく同じです。それでお金をいただくなら尚更です。
そのためにJSDocなどを利用し、開発者フレンドリーな、正しく読みやすく効率の良いコードを書いていきたいなと思っています。
Vimっぽいキーバインド
これについては好みです^^;;
DTPerなのでVimと言われてもピンと来ない勢です*1が、この前のもくもく会でVSCodeとVimについてめんたいこさんがご紹介くださいました。
こんなこともできますよ、という感じです。
また、拡張機能自体はこれです。
僕はひとまず入れて試し始めたところですが…まだ慣れませんw
VSCodeでCEPを開発する準備
さて、本題のCEP Extension開発用の拡張機能を紹介します。
これをインストールしたら、早速CEP Extensionのひな形を作成してみましょう。
ひな形作成するには、まず表示メニューから「コマンドパレット」を実行します（デフォルトでは⌘+Shift+P）。
すると>が入った状態でコマンドパレットが開くと思います。ここから「create CC」などと入力して「Create a New CC Extension」コマンドを見つけましょう。
Extension IDを入力
実行すると、Extension IDの入力を求められます。よく使われるのは自分のWEBサイトなどのドメインをピリオド単位でひっくり返したものですが、実際には何でもいいらしいです*2。ちなみにデフォルトでは「com.example.helloworld」が入力されます。
Extension Nameを入力
続いて、Extensionの名称を入力します。その名の通り、このExtensionの名称です。
テンプレートを選択
以下の４つから、どのテンプレートを利用するか選択します。
- basic
- topcoat
- spectrum
- theme
basicは単純な「Hello World」のよくあるテンプレートですが、中身のファイルには本当に基本的なものしか記述されていません。ある程度自由に書けるようになったらこれが一番いいかもしれません。 topcoatはAdobeのオープンソースCSSライブラリの名称で、要するにこのCSSを導入します。僕のようにまだCSSに不慣れな場合はこれがいいのかな。 spectrumはtopcoatの代わりにspectrumというCSSライブラリを用いたものです。この辺は詳しくないので、WEB系のサイトを見てください。 themeは（詳しくはわかりませんが）、こちらもCSSまわりがtopcoatなどと違います。
これからCEPを作り始める自分のような者にとっては、正直それぞれの違いが明確に分かっていません（CSSが違うのかな、くらい）。その辺りはこれから勉強していこうという感じです。 まぁとりあえずtopcoatで始めようかなと思います。
テンプレートの作成場所
デフォルトではユーザーフォルダ内のライブラリフォルダの中、以下のパスにExtensionのひな形が作成されます（Macの場合）。
~/Library/Application Support/Adobe/CEP/extensions/
これを、ユーザーフォルダのライブラリではなく、起動ボリュームのライブラリフォルダの中に移動させます。移動先は以下のパス。
/Library/Application Support/Adobe/CEP/extensions/
ここに置いてあるExtensionは、manifestで指定したアプリケーションとバージョンすべてで利用可能です（後述）。
InDesignでCEPを利用する
InDesignで使えるように、manifestファイルを修正します。 CSXSフォルダにあるmanifest.xmlを開いてください。テンプレートを作成した段階では、Photoshopでしか利用できないようになっています。
<!-- InDesign --> <Host Name="IDSN" Version="10.0" />
<!-- InDesign -->とコメントアウトされている部分があるので、ここを上記のように変更します。バージョン表記はこのように単一バージョン表記だと、そのバージョン以降となります（この例では10.0＝CC2014以降）。動作バージョンを範囲で指定する場合は[10.0, 13.1]のように配列っぽく記述します。
このmanifestファイルについては、Adobe自動化総合フォーラムのここがもっとも分かりやすいです。
https://forums.adobe.com/docs/DOC-8786forums.adobe.com
DebugModeを設定する
続いて、VSCodeのコマンドパレット（⌘+Shift+P）の小窓に「debug mode」などと入力して、「Enable CEP Debug Mode」を実行します。これでCEP Extensionをテストできる状態になります（もとに戻すときはDisableのほうを実行）。
これで一通りの環境は整いました。InDesignから実行してみましょう。
InDesignからCEPの呼び出し
manifestでバージョン指定したInDesignを起動し、ウィンドウメニュー＞エクステンションと開くと、先程サンプルとして作成したCEPが選べると思います。
まだ「Hello World」なレベルですが、これをクリックすると一応CEPとして動作します。ここまでがCEPの第一歩です。
以上、VSCodeでCEP Extension開発の第一歩を踏み出すまでを記事にしてみました。年内に何かしらCEPが作れるか、この記事の続編が書けるかわかりませんが、まぁがんばります…^^;;
