[AdobeCEP]非Web系に向けたAdobeExtention開発

14224 ワード
adobe Cep JSX JSX テキストリンク

皆さん、Adobeエクステンション（CommonExtensibilityPlatform）作ってますか？

jsxでUI出すんじゃなくて規定ツールみたいにウインドウ出せる。htmlやcssでUIを書ける。デザイナーにやさしいですね。
でも実態は証明書発行するだのマニフェストがどうだので全く優しくない。
しかしjsxのUI回りのコマンドもアレなので、コレを作ってみる事にしました。

対象

  • Windows10
  • Photoshop2019
  • VS Code
  • 基本はCG屋。TAと呼ばれる人種。
  • 社内メンバーのみに配布したい
  • npm？node.js？なにそれ？

エクステンション作るために色々調べたけど、そんときのバージョンとかMacとかWeb屋向けとかで色々悩んだので、今回は上記の条件向けに纏めました。
ただのリンク集って言っちゃあそうなんだけど。

リファレンス

CEPのバージョンについて

対応表
https://github.com/Adobe-CEP/CEP-Resources/blob/master/CEP_9.x/Documentation/CEP%209.0%20HTML%20Extension%20Cookbook.md

作成手順

テンプレから開始

@macneko_ayuさんのスライド見てくれれば大体わかるけど、

1.VSCodeの拡張機能から CC Extention Builderを入れる。
2.コマンドパレットにcreate ccと入力。Create a New Extention を選択。
3.ExtentionID、Extention名を指定し、４種のテンプレから選ぶ。よく分かってないけどtopcoatだとパネルがadobe風になる。（そういう風に装飾するcssが付く）
4.デバッグプロジェクト保存場所にテンプレが出来る。

UniqueIDはエクステンションを識別するためのユニークなIDとなります。
このIDはコンフリクトを避ける必要があるために通常は自身の持つドメインをリバースしたものとエクステンション名称を合わせたものを利用します。
特にエクステンションの配布を考える方はこのルールを厳守して下さい。

プロジェクトの保存場所（Win）

証明書付きの完成ファイル

C:\Program Files (x86)\Common Files\Adobe\CEP\extensions

リファレンスだと、64bit版は(x86)の付いてないフォルダの方と書いてあったがこっちっぽい。会社の環境だから？
ここに署名がないファイルを置くと呼び出そうとした時怒られる。

デバッグモード

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

開発中はここに置く。

DebugMode

エクステンションを実行するには証明書付きパッケージにしなければならないとの事だが、いちいちやるのがめんどいのでDebugModeにしたら動かせる

・・・はずだったのだが、Win10はVSCodeのEnable DebugModeが失敗する。
レジストリエディタをいじらなければならないようだ。

https://ymdsny.com/cep-preparations/
https://github.com/Hennamann/CC-Extension-Builder-For-Visual-Studio-Code/issues/10

regedit で「コンピューター\HKEY_CURRENT_USER\Software\Adobe\CSXS.9」に新規文字列値PlayerDebugMode を作り、値に1を追加

処理を書く

テンプレから作ったらいくつかフォルダとファイルが生成される。
いろんなとこに説明書いてあるけど、ここでも一応ざっくり書く。

CSXSフォルダ

manifest.xmlが入っている。

  • どのアプリ向けとかパネルサイズとかアイコンの指定とかコレでする。ちなみにこのファイルを書き換えた場合は適用に再起動が必要。
  • パネルのサイズ指定は<Size></Size>で囲まれた部分を編集。
    • <MinSize><MaxSize>を指定する事により可変に出来る。

index.html

パネル描画用html。

cssフォルダ

パネル描画用cssが入る。

jsフォルダ

main.jsが入っている。

UIの入力をJSXの引数に渡す
サンプルプロジェクトを見ると分かるが、htmlの入力は"main.js"を介して"hostscript.jsx"を実行している。

今回はjQueryのform要素の取得を使って受け渡すことにする。
https://ginpen.com/2012/05/21/how-to-get-values-from-form-with-jquery/

jQuery

ここがとってもわかりやすい。
https://webkikaku.co.jp/blog/webdesign/jquery_start/

<form name="form" id="Aform" action="post">
    <span>ID : </span><input type="text" name="devID" class="topcoat-text-input"><br>
    <input type="button" value="Generate" id="btn_test"><br>
</form>
main.js
$("#btn_test").click(function () {
    var text = $('#Aform [name=devID]').val();
    csInterface.evalScript("testcall('" + text + "')");
});
hostscript.jsx
function testcall(stringA){
    alert(stringA);
}
フォーム作成時注意

formタグでinputとbutton作って、formタグの中にスクリプト実行するbuttonがあると勝手にフォームの中身がクリアされる！！余計なお世話じゃい

スクリプト実行ボタンは外に出しておいた方が良い

<input type="text">からディレクトリパスを受け取る

$('#Aform [name=dir]').val().replace('\\','/');
だと置換する前にスラッシュが消えてしまった・・・

$('#Aform [name=dir]').val().replace(/\\/g,'/');
でいけた。

jsxフォルダ

実際動かす処理はここに。

iconsフォルダ

manifest.xmlで指定したアイコン画像の置き場所。

ZXPファイルの作成

処理とかパネルが出来たら、配布するためにはZXPファイルというものに固めなければならない。コレは独自の圧縮ファイルらしい。

とりあえずココをみてZXPファイルの作成は出来たものの、使ってもらうにはコレを解凍してインストールしてもらわねばならない。

CC2015以降、方法はAdd-Onsサイトに登録して配布するかコマンドラインで解凍するか。。。
コマンドラインて、一般の人に対してハードル高すぎじゃね？？

rem セルフサイン証明書を発行する
rem ZXPSignCmd -selfSignedCert 国 地域 組織 名前 パスワード 出力ファイル名
ZXPSignCmd -selfSignedCert JP Tokyo AdobeJapan AndyHall myPassword123 myCert.p12

rem エクステンションをパッケージする
rem ZXPSignCmd -sign ソース 出力ファイル名 証明書 パスワード
ZXPSignCmd -sign "../extensionSource" myExt.zxp myCert.p12 myPassword123

注意！
出力ファイルが存在する場合にそれを上書きしないので、ビルドスクリプトでやるなら事前に削除しよう

ZXPを解凍してインストールしてもらう

ExManCmdとは
ZMPをコマンドラインで解凍するためのツール。

ExMan Command Line Tool
https://partners.adobe.com/exchangeprogram/creativecloud/support/exman-com-line-tool.html

Extension Manager コマンドラインからの作業
https://cat.adodtp.com/2016/08/02/?p=349

とりあえず落としてきたZip解凍して、どっかに置いてExManCmd_winフォルダと同じディレクトリに作ったzxpファイル置いて、以下のようなインストールバッチ作って実行してもらえばなんとかなる。

cd /d %~dp0
ExManCmd_win\ExManCmd.exe /install エクステンションの名前.zxp

という事で、自分は配布時はExManCmd_WinフォルダとZXPファイル、インストールバッチを同じディレクトリに置いてそっからインストールしてもらいました。

これでめでたく社内配布成功です。

追記

ZXPの解凍について

コメントで頂きましたがZXPはZIP展開でも解凍できるそうです。
解凍したものを所定のフォルダに入れれば使えるそうです。

node.jsを有効にする

なんだかんだnode.jsを使う必要が出てきたので、cepでnode.jsを使うには以下のコードをmanifest.xmlの<ScriptPath>の下あたりに追加する。

<CEFCommandLine>
    <Parameter>--enable-nodejs</Parameter>
</CEFCommandLine>

そしたら、main.jsでrequireするまえにcep_nodeを付ける。

const fs = cep_node.require('fs');

追記
cep_node無くても大丈夫です。
今となってはどこから出てきたのか分からず…。

参考
https://www.macneko.com/entry/how-to-http-request-on-cep
macneko-ayuさんマジでありがてえ・・・

公式にはExtension Cookbookに
Below listed changes are applicable when --enable-nodejs is passed as CEFCommandline parameter.
としか書いてない。

Objectを受け渡す

main.jsからjsxにオブジェクトを受け渡そうと思ってもそのままでは上手く渡せませんでした。
受け渡す際はJSON.stringify()してから受け渡すと、jsx側でObjectとして認識してくれるようです。
https://stackoverflow.com/questions/55555324/how-do-i-pass-an-object-to-adobe-extendscript-from-javascript-adobe-cep