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

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

アフィリエイト広告を利用しています-

Adobeのアプリケーションには「Extension panel」(エクステンション)という拡張用パネルを追加でき、作業の効率アップさせることができます。

Extension panelは、htmlとCSS、そしてJavaScriptで作製することができるので個人でも意外と簡単に作製することはできます。

これから数回に分けてExtension panelの作製方法を簡単にまとめていこうと思います。

スポンサーリンク

Extension panelできるかな?

Bracketsをインストール

Extension panelを作製するにあたりまずは、“Brackets”をインストールしましょう。

Bracketsとは Adobe Systemsが開発しているオープンソースのテキストエディタです。もちろん無料でダウンロードできます。
詳しいインストールの仕方は、下記のようにすばらしい記事が存在するのでそちらをご覧頂けると良いかと思います。ありがたいです。

拡張機能をインストール

Bracketsに拡張機能“Creative Cloud Extension Builder”をインストールします。

Bracketsを起動後、メニューバーの“ファイル”->“拡張機能マネージャー”を選択。検索項目に『Creative Cloud Extension Builder』と入力して、“Creative Cloud Extension Builder(CEP 7)”をインストールしましょう。

上記の検索では何種類かの“Extension Builder”が出てくると思いますが、CEPに対応している機能の違いがあるだけで同じようにExtension panelの作製はできるようです。
記事を書いた当時はCEP 7対応の“Creative Cloud Extension Builder(CEP 7)”で問題ありませんでしたが、最新のCEP(バージョン)がある場合はそちらをインストールして良いかと思います。

開発をはじめよう

インストールが無事に成功していればBracketsのメニューバーに“CC Extension Builder”が表示されます。“CC Extension Builder”->“New Creative Cloud Extension”を選択しウインドウを開きます。

メニューバーに“CC Extension Builder”表示

“Extension Name”と“Unique ID”は任意の名前を付けて、右下の“Create Extension”ボタンを押しましょう。

New Creative Cloud Extensionウインドウ

“Extension Name”と“Unique ID”は後ほど変更することもできますが、ちょっと面倒でもあるため、ある程度は考えて名前をつけたほうが良いように思います。

基本となるデータができました

上記に書いたとおり“Create Extension”ボタンを押すと“Unique ID”に入力した名前のデータができているはずです。

このデータはボタンがひとつあるパネルでそれを押すとウインドウにメッセージが表示されるという、基本的な作りのデータとなります。

Bracketsの右端にある雷のマークのアイコンを押してみてください。

ライブレビュー」が起動のアイコン

すると“Google Chrome”が立ち上がり「ライブレビュー」が起動します。これでExtension panelのGUIを確認することができます。

バージョン設定をします

Extension panelは設定しだいではAdobeの様々なアプリケーションやバージョンで使用できる為、自分が作るExtension panelが、どのアプリケーションのExtension panelで、どのバージョンで使用できるのかを設定します。

左に表示されているメニューから“CSXS”をクリックして開き“manifest.xml”を開きます。

manifestを開いてバージョンを設定

“manifest.xml”に記載されている箇所で、例えばPhotoshopのExtension panelを作りたい場合は上の画像の“<Host Name=”PHXS” Version=”[15.0,17.9]” />”と“<Host Name=”PHSP” Version=”[15.0,17.9]” />”の両方を使用したいバージョンに変更します。

PhotoshopのバージョンはCC2014 Version 15 ~ CC2018 Version 19となります。
例えばCC2014~CC2018で使用できるExtension panelを作製する場合は『Version=”[15.0,19.9]』という書き方にします。
現在最新のPhotoshopのバージョンはCC2020 Version 21 (CEP 9)となります。

署名設定

今後Extension panelを配信や他人に使用してもらう場合には“デジタル署名”が必要になります。ただし、個人で使用する場合などでは、無署名状態でデバッグモードとして使用することは可能です。

まずはデバッグモードの設定をしてみます。

無署名 デバッグモード

大変申し訳ないのですが自分はWindowsをメインに使用している為、Windowsでの設定方法の説明になります。
regedit.exe”を起動しレジストリの編集をします。
regedit.exeはWindowsのシステムがインストールされているドライブ(例えばCドライブ)のフォルダ「Windows」内にたぶんあるかと思います。見つからない場合はWindowsのスタートボタンの「プログラムとファイルの検索」に入力すると出てくるかと。
左のメニューよりまず“HKEY_CURRENT_USER”のフォルダを探します。
HKEY_CURRENT_USER/Software/Adobe/”のなかにある“CSXS”を編集します。例えばCC2018の場合は“CSXS.8”となりこれを右クリック。新規->文字列値を選び、値の名前『PlayerDebugMode』値のデータ『1』と入力し項目を追加します。
これでデバッグモードの設定が完了します。

デジタル署名設定

デジタル署名設定はパッケージ化をするときに説明しますので、そちらをご覧ください。

アプリケーションで確認

ここまでの設定が完了しているとアプリケーションで確認することができます。Photoshopを起動し(起動していたなら再起動してください)Extensionを読み込みます。

メニューバーの“ウインドウ”->“エクステンション”のなかに“Extension Name”で入力した項目が追加されているはずですので、そちらを選択し下の画像のようなPanelが表示されたら成功です。

表示されたパネル(起動実験)

ボタンをクリックするとメッセージ(“スクリプト警告”のウインドウ)も表示されます。

今回はここまで。おつかれさまでした。





終わりに

とりあえず、これで開発の最初のステップは終了です。

まだ何もしていないって?そうなんですまだ何もしてません、今は基本のPanelが起動できるようになっただけ。でもPanelを表示できるようになりました。すばらしいです。

次回は中身の作り方の説明あたりを予定してます。それではごきげんよう。

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


コメント