Photoshop CC 2014以降対応オリジナルパネルの作り方。

image
こんにちは！　デザイナーのiuchiです。

Photoshop CC以前のパネルはFlashベースで作られており、オリジナルパネルを作るにはAdobe Configuratorを使えば特別な知識の必要もなく、誰でも簡単に作成可能でした。
しかし、Photoshop CC 2014以降のパネルはhtmlベースに仕様が変わったため、 Adobe Configuratorでは作成できなくなり、作成に多少のhtmlとjsの知識が必要になりました。
今回はその方法をざっくりご紹介します。

★Photoshop CC 2014の場合

1. Bracketsを導入する

BracketsはAdobeが開発しているフリーのテキストエディタです。
こちらから、最新版をダウンロードしてインストールします。

2. BracketsにCreative Cloud Extension Builder for Bracketsをインストールする

Bracketsの画面右端にある拡張機能マネージャーボタンimageをクリック→「URLからインストール…」をクリック→出てきた入力欄に以下のURLを入力して「インストール」をクリックします。

https://github.com/davidderaedt/CC-Extension-Builder-for-Brackets

正常にインストールできたら、メニューに「CC Extension Builder」という項目が追加されます。
image

3. パネル用のファイルを作成する

メニューの「CC Extension Builder」→「New Creative Cloud Extension」をクリックします。
image
名前とIDの入力欄が出てきますが、とりあえずそのまま右下の「Create Extension」をクリックします。
image
「OK」をクリックします。
image
パネル用のファイル一式が作成されました。

4. Photoshop CC 2014でパネルを表示させてみる

上記の拡張機能で作成されたファイルは、そのままパネルとしてPhotoshop CC 2014で使用可能です。
試しにPhotoshop CC 2014を起動させて、初期状態のパネルを表示させてみます。
image
「ウインドウ」→「エクステンション」内の「Hello World」をクリックします。
image
「Call ExtendScript」をクリックすると、「hello from ExtendScript」というアラートが表示されます。

5. パネルをカスタマイズする

html・jsに詳しい人なら大体わかると思いますが、

  • js/main.js
  • jsx/hostscript.jsx
  • index.html

辺りをいじればカスタマイズが可能です。勿論通常のhtmlコーディングと同じで、cssで見た目を変更したり、ボタンに画像を割り当てることもできます。

サンプルとして、私が作ったパネルのデータを載せておきます。

解凍した中身を先ほど作ったファイルが格納されているフォルダ

C:\Users\[ユーザー名]\AppData\Roaming\Adobe\CEP\extensions

の中に一式放り込んで、Photoshopを再起動後、「Sample」パネルを表示します。
image
例えばグラデーションツールを選択するボタンなら、
index.html

<button id="ToolGradien"><img src="images/tool11.png" width="25" height="22" title="グラデーション"/></button>

js/main.js

$("#ToolGradien").click(function () {
    a.evalScript("ToolGradien()")
});

jsx/hostscript.jsx

function ToolGradien() {
    // グラデーションツール
    // ToolGradien
    // =======================================================
    var idslct = charIDToTypeID("slct");
    var desc3 = new ActionDescriptor();
    var idnull = charIDToTypeID("null");
    var ref1 = new ActionReference();
    var idGrTl = charIDToTypeID("GrTl");
    ref1.putClass(idGrTl);
    desc3.putReference(idnull, ref1);
    var iddontRecord = stringIDToTypeID("dontRecord");
    desc3.putBoolean(iddontRecord, true);
    var idforceNotify = stringIDToTypeID("forceNotify");
    desc3.putBoolean(idforceNotify, true);
    executeAction(idslct, desc3, DialogModes.NO);
}

がそれに当たります。

6. Scripting Listener Plug-inで操作内容をjs化→hostscript.jsxに反映する

問題はhostscript.jsxにどう書けばいいのかということですが、jsに詳しくなくても大丈夫です、ご安心ください。

こちらから「Scripting Listener Plug-in」をダウンロードして「ScriptListener.8li」を

C:\Program Files\Adobe\Adobe Photoshop CC 2014\Required\Plug-Ins

の中に移動させます。

Photoshopを起動（していれば再起動）して、何かしら操作をすると、デスクトップに「ScriptingListenerJS.log」というファイルが作成されます。

この「ScriptingListenerJS.log」にはPhotoshopで操作をするたびに、その内容をjs化して出力されていきます。つまり「グラデーションツールを選択する」というjsがほしければ、別ツールからグラデーションツールを選択した際に生成されるコードをそのままhostscript.jsxに貼り付ければOKです。楽チンですね。

ただ、ツールの選択程度ならそのままコピペで大丈夫ですが、操作によっては再現できない場合もあるようです。色々試してみて下さい。

★Photoshop CC 2015の場合

Photoshop CC 2015の場合でもCC 2014と同じ手順でパネルを作成可能ですが、実際にPhotoshop内で使用するにはzxp化する必要がある（？）ようです。（断言はできないです、すいません…）

1. manifest.xmlの変更

「Creative Cloud Extension Builder for Brackets」で作成されたフォルダ内にあるCSXS/manifest.xmlの

<Host Name="PHXS" Version="[15.0,15.9]" />
<Host Name="PHSP" Version="[15.0,15.9]" />

を

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

に書き換えます。

2. Adobe Extension Builderを導入する

こちらの記事の「導入方法」「環境を Adobe Extantion Builderに」という項目を参考に、Adobe Extension Builderを導入します。その下の「環境を cc から cc 2014に」は設定しなくて大丈夫です。

3. ファイルをzxp化する

Adobe Extension Builderの「File」→「New」→「Application Extension Project」をクリックします。
image
プロジェクト名を入力して、「Next >」をクリックします。
image
「Adobe Photoshop」にチェックを入れて「Finish」をクリックします。
image
Adobe Extension Builder起動時に設定したworkspaceフォルダ内にプロジェクト名のフォルダが作成されるので、その中の「ExtensionContent」フォルダの中身を削除して、代わりに作ったパネルの中身を入れます。

ちなみに、このAdobe Extension Builderが生成したファイルでもパネルを作成することは可能ですが、個人的にCreative Cloud Extension Builder for Bracketsが生成するファイルの方がフォルダ階層や中身が分かりやすいので、この方法を取っています。
image
Adobe Extension BuilderをF5でリロードしてから、「Script Explorer」内のプロジェクト名を右クリック→「Export…」をクリックします。
image
「Application Extension」を選んで「Next >」をクリックします。
image
「Certificate（証明書）」が必要なので、「Create…」をクリックして作成します。
image
名前とパスワードと保存場所を入力して「OK」をクリックします。
保存場所はどこでも大丈夫ですが、workspace\[プロジェクト名]フォルダ内に保存すると分かりやすいかと思います。
image
再びこの画面になるので、先ほど入力したパスワードとzxpファイルの出力場所を入力して「OK」をクリックします。
image
zxpファイルが作成されたら、早速インストールして、Photoshopで正常に動作するか確認します。

★まとめ

単純にツールを切り替えるパネルを作るだけならAdobe Configuratorの方が断然簡単ではありましたが、htmlに慣れ親しんでいる人には開発しやすくなった印象です。
（私はあまり得意ではないのでAdobe Configuratorみたいな直感的に作成できるソフトがほしいです…(>_<;;)）

それでは、また。

[デザイン] カテゴリーの最新記事