昨年から、たびたびPhotoshopをプログラムで動かしたいことがあって、下記のようなPhotoshop内にGUIで表示されるタイプの拡張機能を作成したときのメモ。

 

スポンサーリンク

はじめに

また雛形から作成していった方がわかりやすそうだったので、なにか簡単にパッとできる雛形がないかなと探したところ、Bracketsの拡張機能「Creative Cloud Extension Builder」でできるようなので、この雛形から作成してみました。

前提条件

  • Bracketsのインストール
    まずBracketsが入っていない場合は、インストールします。

下準備 Bracketsに拡張機能を追加する

1. Bracketsを起動します。

Bracketsを起動します。

2. Bracketsの拡張機能マネージャーから「Creative Cloud Extension Builder」をインストールします。

Bracketsの拡張機能マネージャーを起動します。

拡張機能マネージャーのURLの箇所に、リポジトリURLを入力します。

入力すると拡張機能のインストールが始まります。

※「Creative Cloud Extension Builder」の「Installation」を参考にしてください。

インストールが完了したら、メニューに「CC Extention Builder」の項目が増えます。

これで、「Creative Cloud Extension Builder」のインストールは完了です。
下準備ができました。

拡張機能を作成してPhotoshopで動かしてみる

とりあえず雛形に入っている「Hello world」を拡張機能としてPhotoshopで動かしてみたいと思います。

Photoshopは「Photoshop CC 2015」、Mac OS X Yosemiteです。

1. 新しい拡張機能の雛形を作成します。

Bracketsを起動して、「CC Extention Builder」>「New Creative Cloud Extention」を選択します。

2. 画面が開くので拡張機能の情報を入れます。

「Extention Name」には、拡張機能の名前。

「Unique ID」にはユニークな任意の値を入れます。

今回はとりあえずそのまま進めます。

3. 新しい拡張機能の雛形が作成されました。

表示が出てファイルが開きます。アラートは「OK」で閉じます。

ファイルは以下の場所にあります。
/Users/ユーザー名/Library/Application Support/Adobe/CEP/extensions

4. 「manfest.xml」を変更します。

まず、「manfest.xml」を開きます。

開いてなければ、下記から開きます。
「/Users/ユーザー名/Library/Application Support/Adobe/CEP/extensions/作成した拡張機能名/CSXS/manfest.xml

「manfest.xml」に先ほど入力した拡張機能の名前などが反映されています。

5. アプリケーションのバージョンによって記述を変更します。

動作させるアプリケーションによって「HostList」の部分を変更します。

今回は、「Photoshop CC 2015」で使用したいので、下記へ変更します。

/CSXS/manfest.xml

<Host Name="PHXS" Version="[16.0,16.9]" />
<Host Name="PHSP" Version="[16.0,16.9]" />

変更したら、保存します。

6. Photoshopで起動してみます。

6-1. Photoshopを起動します。

6-2. 作成した拡張機能を表示します。

メニューパネル、「ウィンドウ」>「エクステンション」から、作成した拡張機能の名前をクリックします。

そうするとどこかに表示されるはずなので、クリックしてパネルを開きます。

初期では赤いアイコンになっているので、アイコンをクリックしてパネルを表示します。

7. 「Call ExtendScript」のボタンをクリックします。

ためしに、表示されているボタンをクリックしてみます。

アラートが表示されればOKです。

表示ができました!

簡単なファイル構成など

作成していく場合、特に下記あたりのファイルを変更すればだいたい事足りると思います。

/CSXS/manifest.xml

拡張機能の情報、設定

/index.html

パネルの部分がHTMLで記載されてます。

HTMLなので、ボタンやテキストなど簡単に変更ができます。

/js/main.js

クリックした時の動作、処理などが記載されています。

jqueryでかけるのでやりやすいです。htmlと処理をつないでるかんじ。

ここから、hostscript.jsxでかかれている関数を呼び出してます。

/jsx/hostscript.jsx

ここにクリックされた時の動作。

Photoshopでの動作が書かれています。

Photoshopでの動作は、下記のサイトが大変参考になりました!

Adobe Photoshop CC 2014自動化作戦

まとめ

雛形を使うとわかりやすかったです。

変更したらPhotoshopの再起動で変更が反映されます。


スポンサーリンク