【Photoshop】拡張機能でカスタムパネルを作成する方法

photoshop-make-custom-panel

拡張機能のカスタムパネルを試してみました。(※Photoshop CC 2014以降で作成可能です)

これで自作ツールを並べることができますし、htmlやcssで見た目も調整できるので、かなりテンション上がります。

スポンサーリンク

拡張機能でカスタムパネルを表示する方法

Bracketsのインストール

下記のURLからAdobeが開発のテキストエディタをインストール

Creative Cloud Extension Builder for Bracketsのインストール

Bracketsを起動して、ファイル>拡張機能マネージャー>URLからインストールから下記のURLをコピペして、インストール

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

f:id:min0124:20170421082823p:plain

サンプルの拡張機能を作成

メニューにCC Extension Builderが追加されるので、そこからNew Creative Cloud Extension>Create Extensionを実行

f:id:min0124:20170421083214p:plain

バージョンの記述の変更

このままPhotoshop2017を立ち上げても、ウインドウ>エクステンションの中にHello Worldという名前の拡張機能が読み込まれていません。

f:id:min0124:20170421091138p:plain

まずは、Bracketsに表示されているmanifest.xmlを編集します。

C:\Users\ユーザー名\AppData\Roaming\Adobe\CEP\extensions\com.example.helloworld'\CSXS\manifest.xml

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

<Host Name="PHSP" Version="[18.0,18.9]" />
<Host Name="PHXS" Version="[18.0,18.9]" />

に書き換えます。

※ バージョン参考

・CC2017 Version 18

・CC2015 Version 16

・CC2014 Version 15

※バージョンを[18.0,18.9]と2つ書いているのはその2つのバージョン内という意味

署名の設定の必要

f:id:min0124:20170421091358p:plain

Photoshop2017を立ち上げてウインドウ>エクステンションの中にHello Worldという名前の拡張機能が読み込まれているのを確認します。

ただし、このまま実行しても拡張子を読み込めませんでした。正しくサインされていません。という警告がでます。

f:id:min0124:20170421091435p:plain

無署名を許可する

レジストリを調整して無署名を許可します。

  • Win+Rからregeditを入力して、レジストリ エディターを起動

  • HKEY_CURRENT_USER/Software/Adobe/CSXS.7まで移動して、右クリックから新規>文字列値から、名前をPlayerDebugMode、値を1

f:id:min0124:20170421102919p:plain

もう一度、Photoshop2017を立ち上げてウインドウ>エクステンションの中にHello Worldを選択すると、カスタムパネルが起動し、またボタンも機能します。

f:id:min0124:20170421103308p:plain

追記

.reg作成してみました。

メモ帳に下記のコードをコピペして、PlayerDebugMode_on.regみたな感じで適当な命名+拡張子(reg)に変更。

実行するとレジストリに追記されます。

Windows Registry Editor Version 5.00
[HKEY_CURRENT_USER\Software\Adobe\CSXS.7\]
"PlayerDebugMode"="1"

署名を作成する方法

自分だけで、完結する場合はレジストリ調整して無署名でよいのですが。

レジストリがいじれない場合や他人に渡す場合などは、署名を作成すれば、警告がでてこなくなります。

  • CC Extensions Signing Toolkitのダウンロード

下記のURLからCC Extensions Signing Toolkitをダウンロードします。(こちらが最新のようです)

※下記URLは古いものになります

  • 中身のZXPSignCmd.exeを好きな場所に保存します。

  • Win+Rからcmdを入力して、コマンドプロンプトを起動します。

  • ここで、単純にZXPSignCmd.exeを入力すると、全てのコマンドが表示されます。

Usage:
ZXPSignCmd -sign <inputDirectory> <outputZxp> <p12> <p12Password> [options]
options:
-tsa <timestampURL> - will attempt to timestamp the ZXP using supplied timestamp server. For example, https://timestamp.geotrust.com/tsa
ZXPSignCmd -verify <zxp>|<extensionRootDirectory> [options]
options:
-certInfo - will print out information about certificates (including timestamp and certificate revocation information)
-skipOnlineRevocationChecks - will skip online checks for certificate revocation (certificate revocation checks only happen with -certInfo flag set)
-addCerts <certificate1> <certificate2>... - will verify certificate chain and assess whether or not DER encoded certificates passed in are included
ZXPSignCmd -selfSignedCert <countryCode> <stateOrProvince> <organization> <commonName> <password> <outputPath.p12> [options]
options:
-locality <locality> -orgUnit <orgUnit> -email <email> -validityDays <validityDays> - are optional attributes for self-signed p12 certificates
```ZXPSignCmd -sign <inputDirectory> <outputZxp> <p12> <p12Password>```
  • まず署名を作成します。

ZXPSignCmd -selfSignedCert <outputPath.p12>

[ZXPSignCmd.exeのパス] -selfSignedCert [国] [地域] [組織] [名前] [パスワード] [保存するファイル名]


C:\Users\ユーザー名\ZXPSignCmd.exe -selfSignedCert JP Tokyo My MIN test custompanel.test

  • 次にパッケージ化します。

ZXPSignCmd -sign

[ZXPSignCmd.exeのパス] -sign [Extensionのソースフォルダのパス] [保存するzxpのパス] [署名のパス] [署名のパスワード]

C:\Users\ユーザー名\ZXPSignCmd.exe -sign "C:\Users\ユーザー名\AppData\Roaming\Adobe\CEP\extensions\com.example.helloworld'" custompanel.zxp custompanel.test test

custompanel.zxpが作成されます。

f:id:min0124:20170421123510p:plain

  • ちなみに.zxpはただのZIPファイルなので、試しに解凍してみます。

META-INFフォルダと言うものが追加されていて、その中にsignatures.xmlというファイルが署名になります。

スポンサーリンク

カスタムパネルから設定した機能を実行する方法

JSXの編集

Hello WorldのサンプルデータC:\Users\ユーザー名\AppData\Roaming\Adobe\CEP\extensions\com.example.helloworld'から、カスタマイズしてみます。

jsx > hostscript.jsxの中身を以前、作成したスクリプトを置換します。【Photoshop】グループを作成するスクリプト – CGメソッド

function makeGroup(){
//顔
var layer_face = app.activeDocument.layerSets.add();
var layer_face_paint = layer_face.layerSets.add();
var layer_face_line = layer_face.layerSets.add();
layer_face.name = '顔';
layer_face_paint.name = '塗り';
layer_face_line.name = '線画';
//見本
var layer_template = app.activeDocument.layerSets.add();
layer_template.name = '見本';
}

JSの編集

js > main.js から先程の関数(makeGroup)を記述します。

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

関数がわからない時

evalFile関数を使用して、もう1スクリプト間にかます。

function AAA() {
var external = $.evalFile("C:/Users/AAA.jsx");
}

HTMLの編集

index.htmlを編集します。今回はボタン名だけ変えてみます。

<button id="btn_test" class="topcoat-button--large hostFontSize">グループ作成</button>

あとはお好みでCSSなり画像なり入れて、パネルをカスタマイズしていきます。

カスタムパネルの実行

最後にテスト!

f:id:min0124:20170421105509p:plain

スポンサーリンク

カスタムパネルのデザインの調整方法

こちらに記事を書きました。

スポンサーリンク

<追記>拡張機能でカスタムパネルを表示する方法(簡易版)

要素を最小限にして、カスタムパネルを表示させてみます。

  • %USERPROFILE%\AppData\Roaming\Adobe\CEP\extensions にTESTというフォルダを作成

  • その階層下にCSXSというフォルダを作成

  • CSXSの中にmanifest.xmlというファイルを作成

  • manifest.xmlの中身を下記のコードをコピペ

<?xml version="1.0" encoding="UTF-8"?>
<ExtensionManifest Version="5.0" ExtensionBundleId="com.example.test" ExtensionBundleVersion="1.0"
ExtensionBundleName="TEST" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<ExtensionList>
<Extension Id="com.example.test" Version="1.0" />
</ExtensionList>
<ExecutionEnvironment>
<HostList>
<!-- Uncomment Host tags according to the apps you want your panel to support -->
<!-- Photoshop -->
<Host Name="PHSP" Version="[18.0,18.9]" />
<Host Name="PHXS" Version="[18.0,18.9]" />
</HostList>
<LocaleList>
<Locale Code="All" />
</LocaleList>
<RequiredRuntimeList>
<RequiredRuntime Name="CSXS" Version="5.0" />
</RequiredRuntimeList>
</ExecutionEnvironment>
<DispatchInfoList>
<Extension Id="com.example.test">
<DispatchInfo >
<Resources>
<MainPath>./index.html</MainPath>
<ScriptPath>./jsx/hostscript.jsx</ScriptPath>
</Resources>
<Lifecycle>
<AutoVisible>true</AutoVisible>
</Lifecycle>
<UI>
<Type>Panel</Type>
<Menu>TEST</Menu>
<Geometry>
<Size>
<Height>300</Height>
<Width>300</Width>
</Size>
<!--<MinSize>
<Height>550</Height>
<Width>400</Width>
</MinSize>
<MaxSize>
<Height>550</Height>
<Width>400</Width>
</MaxSize>-->
</Geometry>
<Icons>
<Icon Type="Normal">./icons/suimin.png</Icon>
</Icons>
</UI>
</DispatchInfo>
</Extension>
</DispatchInfoList>
</ExtensionManifest>

manifest.xmlだけでも、Photoshopを起動すると拡張機能にTESTのパネルが追加されています。

  • さらにiconsフォルダを作成して、その中に画像(suimin.png)を追加

f:id:min0124:20170809000042p:plain

  • index.htmlを作成、中身は下記のコードに
<html>
<head>
</head>
<img src="icons/suimin.png">
</html>

f:id:min0124:20170808235932p:plain

ということで、パネルの中に画像が表示できました。

ちゃんとデータの役割を理解すると、カスタムパネルの作成も簡単に感じます。

コメント

  1. 匿名 より:

    サインツールはgithubよりダウンロードしましょう。
    https://github.com/Adobe-CEP/CEP-Resources

  2. min0124 より:

    情報ありがとうございます。追記させていただきました!