Extension panel(エクステンション)を自分でつくる方法-3

Extension panelを自分でつくる方法-3アイキャッチAdobeCC
この記事は約9分で読めます。

Adobeのアプリケーションには「Extension panel」(エクステンション)という拡張用パネルを追加でき、作業の効率アップさせることができます。Extension panelは、htmlとCSS、そしてJavaScriptで作製することができるので個人でも意外と簡単に作製することはできます。

今回は第3回目、Extension panelのパッケージの仕方の説明について簡単にまとめようかと思います。

前のページ:Extension panel(エクステンション)を自分でつくる方法-2
スポンサーリンク

Extension panelできるかな?

Extension panelがそれなりにできてきたら、“パッケージ化”してみましょう。

今までは無署名状態でデバッグモードで使用していました、個人で使用するだけであればこれでも問題はないのですが、他のパソコンや他人が使用する場合はパッケージ化して使用する必要があり“デジタル署名”をして“証明書”を発行しなければなりません。

パッケージ化とは? パッケージ化することで“zxp”という拡張子のデータが出来上がります。これを作り「Adobe Exchange」で配布することで多くのユーザーが、あなたの作ったExtension panelを使用することができるようになります。ただしAdobe Exchangeで配布するにはAdobeの審査が必要です。

パッケージ化しよう

まずはツールをダウンロード

パッケージ化するためにツールをGitHubからダウンロードしてきましょう。

右上にある緑色のボタン『Clone or download』を押して『Download ZIP』から『CEP-Resources-master.zip』をダウンロードします。ダウンロードしたファイルは展開(解凍)してください。

大変申し訳ないのですが自分はWindowsをメインに使用している為、Windowsでの設定方法の説明になります。

展開(解凍)して出来たフォルダ『CEP-Resources-master』->フォルダ『ZXPSignCMD』->フォルダ『4.0.7』と開いていき次は使用しているOSのフォルダ(例:フォルダ『win64』)内にある“ZXPSignCmd.exe”を適当な場所にコピー/ペーストします。

適当な場所 正直どこでもいいのですが、できるだけわかりやすい所がよかったりします。後々にパスを記入することになるので、そのことも念頭に置いておくと良いと思います。

証明書を発行

まずは“証明書”を発行します。証明書の発行には“コマンドプロンプト”を使用します。

コマンドプロンプトはWindowsのスタートボタンの「プログラムとファイルの検索」に“cmd”入力すると“cmd.exe”が出てくるかと思いますが、そやつです。

コマンドプロンプト(cmd.exe)を起動し以下を入力します。

[ZXPSignCmd.exeのパス] -selfSignedCert [国] [地域] [組織] [名前] [パスワード] [保存ファイルパス]
[]内は任意の文字列となります。
例えば、先ほどの“ZXPSignCmd.exe”の適当な場所が“Cドライブの直下”、国は“日本”、地域は“東京”、組織は“AAA”、名前は“hanako”、パスワードは“pass”、保存ファイルパスが“Dドライブの直下にextensionpanel”として出力だったりすると
C:\ZXPSignCmd.exe -selfSignedCert JP Tokyo AAA hanako pass D:\extensionpanel
のように入力してください。

証明書”の発行に成功していれば、下記の文章が表示され、指定した保存ファイルパスに指定した名前でファイルが出力されていると思います。

Self-signed certificate generated successfully

パッケージ化

次は“パッケージ化”します。パッケージ化にも“コマンドプロンプト”を使用し、証明書も必要となります。

起動していなければコマンドプロンプト(cmd.exe)を起動し以下を入力します。

[ZXPSignCmd.exeのパス] -sign “[Extensionフォルダパス]” [保存zxpパス] [証明書パス] [証明書のパスワード]
[]内は任意の文字列となります。
例えば、先ほどの“ZXPSignCmd.exe”の適当な場所が“Cドライブの直下”、Extensionフォルダパスは“D:\extensions\helloworld”、保存zxpパスは“D:\helloworld.zxp”、証明書パスは“D:\extensionpanel”、証明書のパスワードは“pass”だったりすると
C:\ZXPSignCmd.exe -sign “D:\extensions\helloworld” D:\helloworld.zxp D:\extensionpanel pass
のように入力してください。

パッケージ化”に成功していれば、下記の文章が表示され、指定した保存ファイルパスに指定した名前でzxpファイルが出力されていると思います。

Signed successfully




インストールしよう

Adobe Exchangeで配布していないzxpファイルは自力で各アプリケーションにインストールしなければなりません。

ここでもツールをダウンロード

Adobeさんから「ExMan Command Line Tool」をダウンロードします。

何行目かに『Download for Windows』とあるのでそちらからダウンロードします。ダウンロードしたファイルは展開(解凍)してください。

展開(解凍)して出来たフォルダ『ExManCmd_win』を適当な場所にコピー/ペースト(移動でも可)します。

適当な場所 こちらも正直どこでもいいのですが、できるだけわかりやすい所がよかったりします。後々にフォルダ『ExManCmd_win』内の「ExManCmd.exe」のパスを記入することになるので、そのことも念頭に置いておくと良いと思います。

インストール

zxpファイル(エクステンション)をインストールします。インストールにも“コマンドプロンプト”を使用します。

起動していなければコマンドプロンプト(cmd.exe)を起動し以下を入力します。インストールするアプリケーションは一応閉じておいたほうが良いと思います。

[ExManCmd.exeのパス] /install [zxpパス]
[]内は任意の文字列となります。
例えば、先ほどの適当な場所に配置したフォルダ『ExManCmd_win』のExManCmd.exeのパスは“D:\extensions\ExManCmd_win\ExManCmd.exe”、zxpパスは“D:\helloworld.zxp”だったりすると
D:\extensions\ExManCmd_win\ExManCmd.exe /install D:\helloworld.zxp
のように入力してください。

zxpファイル(エクステンション)によっては多少時間が掛かりますが、インストールに成功すると下記が出力されます。最後のzxpファイルはインストールしたファイルのパスになります。

Installation Successful for extension with file path = D:\helloworld.zxp

インストールしているエクステンションの確認

各アプリケーションでどんなzxpファイル(エクステンション)をインストールしているか確認するには以下の方法で確認できます。

起動していなければコマンドプロンプト(cmd.exe)を起動してください(お約束感)

[ExManCmd.exeのパス] /list all
[]内は任意の文字列となります。
例えば、先ほどの適当な場所に配置したフォルダ『ExManCmd_win』のExManCmd.exeのパスは“D:\extensions\ExManCmd_win\ExManCmd.exe”だったりすると
D:\extensions\ExManCmd_win\ExManCmd.exe /list all
のように入力してください。

しばらくすると、各アプリケーションごとにインストールされているzxpファイル(エクステンション)が出力されます。

アンインストール

zxpファイル(エクステンション)をアンインストールするには以下の方法でアンインストールできます。

起動していなければコマンドプロンプト(cmd.exe)を起動してください(お約束感)

[ExManCmd.exeのパス] /remove [Extensionの名前]
[]内は任意の文字列となります。
例えば、先ほどの適当な場所に配置したフォルダ『ExManCmd_win』のExManCmd.exeのパスは“D:\extensions\ExManCmd_win\ExManCmd.exe”、Extensionの名前は“helloworld”だったりすると
アンインストールの場合はzxpファイル名ではなくエクステンションの名前になります。名前は上記の「インストールしているエクステンションの確認」で確認することもできます。
D:\extensions\ExManCmd_win\ExManCmd.exe /remove helloworld
のように入力してください。

インストール(外道編)

実は内緒なのですがツールを使用しなくてもインストールは出来たりします。ただし当たり前ですが正規のツールを使用するインストールが正しい道であるため、こちらでのインストールで何か不具合が起きた場合の責任は自己責任でよろしくです。

zxpファイルを展開(解凍)しよう

これも内緒なのですがzxpファイルは実はzipファイルだった問題!

リネームで拡張子をzipに書き換えると展開(解凍)することができます。あらたいへん。

展開(解凍)したフォルダを・・・・・・

エクステンションフォルダにぶん投げます(移動もしくはコピペ)

エクステンションフォルダはデフォでアプリをインストールしている場合はたぶんこのあたりにあるかと

C:\Program Files (x86)\Common Files\Adobe\CEP\extensions
なかったらごめんなさい。
これで任意のアプリケーションを起動(再起動)するとインストールされているはずです。(はずです)
追記:2018年10月 Photoshop CC2019 (20.0)では、今自分の環境で確認したところ証明書がないとエラーではじかれてしました。 もしかしたら今回のアップデートでこのインストールのやり方は使えなくなっているのかもしれません。




終わりに

これでパッケージ化とインストールの手順は終了です。

結構面倒なので個人で使用する場合はデバッグモードでほんと事足ります。あとはそれ以外の状況ですよね。まぁそこはがんばってください。パッケージ化が出来たら配布できるのですよ、そこをモチベーションにして作業しましょう(笑)

次回は……まだ続くのかな? 次回はそうだAdobe Exchangeへの登録の説明あたりを予定してます。それではごきげんよう。

次のページ:Extension panel(エクステンション)を自分でつくる方法-4


コメント