Photoshopのエクステンションを自作する

Photoshopでの作業を効率アップさせる方法は、アクションやバッチ、スクリプト等さまざまですが、そのうちのひとつに「エクステンション」というものがあります。
パネルから操作できるのが特徴で、「GuideGuide」や「Ink」などが有名ですね。

そんなエクステンションですが、実はHTMLとCSS、JavaScriptで作ることが可能です。
今回はエクステンションを作成してパッケージングするまでの流れを簡単にまとめてみました。

※この記事は、macOS 10.13.2及びPhotoshop CC 2018(19.0)で動作確認をしています。

エクステンションの構造とExtendScript

エクステンションの見た目(GUI)はHTMLとCSS、処理の部分はExtendScriptで作ることができます。
ExtendScriptとはAdobe製品で動かせるJavaScriptのことで、ファイル拡張子は.jsxとなります。
Adobe製品の拡張機能のひとつである「スクリプト」もこれで作られています。

じゃあJavaScriptが書けないとスクリプトもエクステンションも自作できないの…？と思ってしまいますが、Adobeより「ScriptingListener」というプラグインが公開されています。
このプラグインをインストールしてPhotoshopで作業をすると、各作業をExtendScriptに変換してログに残してくれます。
このログを組み合わせていくと、JavaScriptが苦手な方でも簡単なスクリプトを作ることができますよ！

プラグインの使い方については割愛いたしますが、下記のサイトで詳しくご説明されています。

参考: オリジナルのスクリプトの作り方 | Dearps

デバッグモードに切り替える

エクステンションの実行には署名が必要で、無署名のものは動作しません。
デバッグモードは無署名のエクステンションを許可し、Chromeからパネルのデバッグをできるようにしてくれます。

公式サイトを参考にデバッグモードに切り替えてみます。
私の環境(CC2018)では次のファイルを変更する必要がありそうです。

/Users/ユーザー名が入ります/Library/Preferences/com.adobe.CSXS.8.plist

ターミナルを開き、次のコマンドを打ちました。

defaults write com.adobe.CSXS.8 PlayerDebugMode 1

何もメッセージが出ないですが、com.adobe.CSXS.8.plistを確認すると「PlayerDebugMode」というキーが追加されています。
開発しない時はデバッグモードをオフに戻しておきます。

defaults delete com.adobe.CSXS.8 PlayerDebugMode

Bracketsに拡張機能をインストール

ここからはAdobe製テキストエディタ「Brackets」を使います。
そして、Bracketsに「Creative Cloud Extension Builder for Brackets」(以降、CC Extension Builderと表記します)をインストールします。
これは拡張機能マネージャーの検索では出てこないため、URLでインストールします。

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

ちなみに、CC Extension Builderは2014年で更新が止まっているようで、他の方が「Adobe CC Extension Builder」というCC2014以降に対応した拡張機能を公開されているのですが、私の環境では上手く動作しなかったため、こちらを使用しています。

CC Extension Builderで新規作成

上記の手順でインストールすると、Bracketsのツールバーに「CC Extension Builder」という項目が追加されます。
「CC Extension Builder > New Creative Cloud Extension」の順に選択すると、下のような新規作成画面が開きます。

1. Extension Name

エクステンションの名前です。
Photoshop上で表示されるので、機能が分かりやすい名前をつけるのが良さそうです。

2. Extension ID

エクステンションを識別するためのIDです。ユニークなものにしておきます。

今回は、どちらもデフォルトのもので作成したいと思います。

CC Extension Builderで生成されるもの

「Create Extension」をクリックすると、エクステンションフォルダに先程設定したIDのフォルダが生成されていました。
エクステンションフォルダのパスは、私の環境では以下のようになりました。

/Users/ユーザー名が入ります/Library/Application Support/Adobe/CEP/extensions/

フォルダの中身はこのような構成になっています。

com.example.helloworld
├ css
│ ├ boilerplate.css
│ ├ styles.css
│ └ topcoat-desktop-dark.min.css
├ CSXS
│ └ manifest.xml
├ icons
│ ├ iconDarkNormal.png
│ ├ iconDarkRollover.png
│ ├ iconDisabled.png
│ ├ iconNormal.png
│ └ iconRollover.png
├ index.html
├ js
│ ├ libs
│ │ ├ CSInterface.js
│ │ └ jquery-2.0.2.min.js
│ ├ main.js
│ ├ themeManager.js
└ jsx
  └ hostscript.jsx

JavaScriptファイルの中身

色々生成されましたが、基本的にはmain.jsとhostscript.jsxしか触りません。

main.js

index.htmlから呼び出されており、hostscript.jsxのトリガーが記述されています。
デフォルトでは、「index.htmlの#btn_testをクリックしたとき、hostscript.jsxのsayHello()を呼び出す」という内容になっています。

(function () {
  'use strict';
  var csInterface = new CSInterface();
  function init() {
    themeManager.init();
    $("#btn_test").click(function () {
      csInterface.evalScript('sayHello()');
    });
  }
  init();
}());

hostscript.jsx

メインの処理が記述されています。
デフォルトでは、「hello from ExtendScript」というアラートを出すようになっています。

function sayHello(){
  alert("hello from ExtendScript");
}

manifest.xmlを修正

manifest.xmlには、エクステンションに関する情報が記述されています。
そして、この中に実行できるアプリケーション及びバージョンを指定している箇所があります。

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

これは、Photoshopのバージョン15〜15.9で動作するという意味です。バージョン15はCC2014にあたります。
今回はCC2017〜CC2018で動かせるようにしようと思うので、数字を18と19に変更します。
Photoshopのバージョンが分からない場合は「Photoshop CC > Adobe Photoshop CCについて」で確認できます。

<!-- Photoshop -->
<Host Name="PHXS" Version="[18.0,19.9]" />
<Host Name="PHSP" Version="[18.0,19.9]" />

修正してこのようになりました。

エクステンションが追加されているのを確認

Photoshopを起動して、エクステンションが追加できたかどうかを確認してみます。
「ウインドウ > エクステンション」を開くと先程作成したエクステンションがありました。

パネルでボタンを押してみると、「hello from ExtendScript」とダイアログが出てきました！

デバッグする

main.jsのデバッグは、Chromeからできます。実際に確認してみましょう。
main.jsを下記のように編集しておきます。

(function () {
  'use strict';
  var csInterface = new CSInterface();
  function init() {
    themeManager.init();
    $("#btn_test").click(function () {
      console.log('ボタンがクリックされました'); // この記述を追加
      csInterface.evalScript('sayHello()');
    });
  }
  init();
}());

これでパネルのボタン(#btn_test)をクリックしたとき、コンソールにログが出力されるはずです。main.jsはここで一旦保存しておきます。
さて、CC Extension Builderで生成されたファイルの一つに「.debug」というデバッグの設定ファイルがあり、この中に下記のような記述があります。

<Host Name="PHXS" Port="8088"/>

この場合、Photoshopはポートが8088に割り当てられているようです。
なお、仕様としてパネルが閉じている時はデバッグできず、デバッグ中にパネルを閉じると接続は解除されます。
なので、パネルを開いた状態でlocalhost:8088に繋いでみます。すると「CEF remote debugging」というページが開きました。

リンクをクリックするとインスペクタが開きます。
パネルのボタンをクリックしてみます。ログがきちんと取れているのを確認できました。

hostscript.jsxの中身を変更した場合、パネルを開閉することでリロードされます。
そのため、同時にデバッグすると再接続の手間がかかってしまうので、分けてデバッグしたほうが良さそうです。

ちなみに、ExtendScriptのデバッグは「Extendscript Toolkit CC」を使うとエラーが分かりやすいです。(ただし2018年1月現在、MacはEl Capitanまでしか対応していません…)

他の人が使えるように証明書を発行してパッケージ化する

上に書きましたように、無署名のエクステンションは通常では動作しません。
自分だけで使うなら、デバッグモードを常にオンにしておけば良いかもしれませんが、
せっかく作ったし社内やプロジェクトで使いたい！ということもあると思います。
その時、全員にデバッグモードにしてもらうわけにもいかないですし、セキュリティ的にも気になりますよね。

今度は、デバッグモードにしなくてもエクステンションが使えるように証明書を発行してみましょう。

その前に、Photoshopのエクステンションパネルを閉じ、Photoshop自体も落としてデバッグモードをオフにしておきます。

デバッグモードのオフはターミナルで以下を入力します。(CC2018の場合)

defaults delete com.adobe.CSXS.8 PlayerDebugMode

証明書発行ツールをダウンロード

証明書を発行するためのツールは、GitHubで公開されています。
今回は「Download ZIP」で直接ダウンロードしてみました。

ダウンロードしてきたファイルを解凍すると、「CEP-Resources-master」というフォルダが出てきます。
このフォルダを開いて、「ZXPSignCMD > 4.0.7 > osx10」と辿っていくと「ZXPSignCmd.dmg」というファイルがあります。

このZXPSignCmd.dmgをダブルクリックして開くと、「ZXPSignCmd」や「ZXPSignCmd-minimal」などのファイルが入っているので、すべてコピーします。
そして適当な場所にフォルダを作成して、中にペーストします。
私はデスクトップに「sample」というフォルダを作り、その中にペーストしました。

そして、ターミナルでツール一式をペーストしたフォルダへ移動します。

なお、ターミナルが見当たらない場合は、アプリケーションのユーテリティフォルダの中に入っています。
ターミナルでフォルダを移動するときはcdコマンドを使用します。

cd 移動したいフォルダへのパス

私の場合は下記のようになります。

cd "/Users/ユーザー名が入ります/Desktop/sample/"

パスを打つのが少々面倒な場合は、「cd 」(後ろに半角スペース)を入力した後、移動したいフォルダをターミナル画面にドラッグドロップすることでも移動できます。

証明書を発行してみる

ツールのコマンドは「PACKAGING AND SIGNING ADOBE EXTENSIONS TECHNICAL NOTE」というドキュメントで確認できます。
証明書の発行は4ページ目に記載されていました。

ZXPSignCmdまでのパス -selfSignedCert 国名コード 地域 組織 名前 パスワード 出力ファイルパス.p12

ターミナルで次のように入力してみます。

./ZXPSignCmd -selfSignedCert JP Osaka TAM TipsNote password ./extensionSample.p12

すると、ZXPSignCmdと同じ階層にextensionSample.p12が生成されました。

最後にパッケージ化する

今度はエクステンションをパッケージ化します。ターミナルは閉じずにそのままにしておきます。
ソースファイルが必要なので、CC Extension Builderで生成されたフォルダをZXPSignCmdと同じ階層に移動させます。

私の場合は、このフォルダをデスクトップのsampleに入れます。

/Users/ユーザー名が入ります/Library/Application Support/Adobe/CEP/extensions/com.example.helloworld

移動が済んだら、上記のフォルダは削除するか別のフォルダへ避難させるかしておきましょう。extensions以下に存在しないようにします。

そしてターミナルでコマンドを入力します。パッケージ化のコマンドはこんな感じのようです。

ZXPSignCmdまでのパス -sign ソースフォルダのパス 出力ファイルパス.zxp 証明書.p12 設定した証明書のパスワード

このように入力しました。

./ZXPSignCmd -sign "./com.example.helloworld" extensionSample.zxp extensionSample.p12 password

すると、extensionSample.zxpが生成されました。これでパッケージ化は完了です。

ZXPをインストールする

ZXPをAdobe製品へインストールするには、ツールが必要となります。
以前は「Adobe Extension Manager」というものがあったのですが、現在は開発終了して利用できません。
その代わり、「ExMan Command Line Tool」というコマンドラインツールが公開されています。

本来ならこのツールでインストールするのが正しいのですが、ZXPを解凍して出てきたフォルダを直接エクステンションフォルダの中に入れても一応動作します。
今回の手順で作ったものであれば、ファイルの拡張子を.zxpから.zipに変更すれば解凍することが可能です。

まず、ファイル拡張子を.zipに変更します。本当に変えて良いのか聞いてきますが、OKします。

そして解凍するとフォルダが出てくるので、このフォルダをそのまま下記のextensionsフォルダに入れます。
CC Extension Builderがファイルを生成するextensionsフォルダとは別のフォルダです。

/Library/Application Support/Adobe/CEP/extensions/

これでデバッグモードでないときでも自作のエクステンションを使用することができます。
ただし、セキュリティの問題があるので、この方法でインストールするのは社内やチームなどで作ったものに留めておいたほうがよろしいかと思います。

まとめ

以上がPhotoshopのエクステンションを自作する流れでした。
メインの処理の部分(jsx)さえ作ってしまえば、あとはWebサイト制作と同じ感じで開発することができそうですね。
興味のある方はぜひ作ってAdobe Add-onsなどで公開してみてください！

参考サイト

• AdobeCCのExtensionをBracketsで開発しよう 1/5 | shock DTP&cats
• 【Photoshop】拡張機能でカスタムパネルを作成する方法 - CGメソッド
• Adobe Photoshop CC 2015 エクステンション開発 ハマりどころ - Qiita
• CEPスーパー メガ ガイド： HTML5＋Node.jsでAdobeのツールを拡張する | aphall.com
• CEP Extension Primer 1 - Setting up tools - 手抜きLab＠DTPの現場