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