CGメソッド

CG制作に関してのヒント

MENU

【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

署名を作成する方法

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

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

  • 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();

}());

HTMLの編集

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

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

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

カスタムパネルの実行

最後にテスト!

f:id:min0124:20170421105509p:plain