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

f:id:min0124:20160828093050p:plain

拡張機能のカスタムパネルを試してみました。(※Photoshop2017で作成しています)

これで自作ツールを並べることができますし、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

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

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