Photoshop Extensionの開発2 フォルダ作成
Microsoft Visual Studio Code からCC Extension Builder をダウンロードしてExtensionの開発環境を整えましょう。
CC Extension Builderダウンロード後にshift + command + pを押すと上のウインドウがアクティブになってExtension Creator create a New CC Extensionが選べると思います。
Brackets で開発する場合Extension Builderをダウンロード後に上のメニューにACC Extension Builderの項目が追加されます。
各種プラグインを起動後、まずIDの入力を求められてその後nameの入力を求められるので入力。このときIDとnameだけ慎重に考えて決める必要があります（後から変えるのがめんどくさいから）。VSCodeの場合さらにtopcoat spectrum theme basic の四種類のテンプレートを選ぶ事になりますがこれらはCSSのテンプレートなので好きなタイプのテンプレートを選べばいいのですが何もわからない内はthemeでいいと思います。インターフェイスを作成するのが面倒だとtopcoatで簡単にフォームのレイアウトを決めるといった事が可能なので慣れたテンプレートで済ませるのもありです。ちなみにBrancket向けにリリースされているプラグインには問答無用でtopcoatのCSSがついくるので注意してください。
項目を入力したら自動的にmacの場合 ライブラリ > Application Support > Adobe > CEP Extensionフォルダに winの場合 ユーザー > AppData > Roaming > Adobe > CEP > extensionの中に打ち込んだIDのフォルダーが出来上がっていると思います。VSCodeでbasicを選んだ以外の場合CSSフォルダーにテンプレートのCSSがついてきます。index.htmlがExtension panelの土台となってCSSでデザインを定義して動きの部分はmain.jsで制御していきます。なのでテンプレートのCSSが要らない場合はhtmlファイルのCSSのリンクを消してしまえば自分で一から作成できます。ちなみにtopcoatのCSSの使い方はこちらから確認できます。使いたいフォームを選択して表示されたhtmlをindex.htmlにコピペすればすぐに使えます。spectrumはまだどのように使うか僕もよくわかっていません。themeはboilerplateというベーシックな部分のみすでに決まったCSSのみが用意されています。CSSのテンプレートについて解説したのですがまだ全体の設定を決めるXMLを設定していないのでそこを次回やりましょう。