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

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

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

今回は第2回目、Extension panelの中身の作り方の説明について簡単にまとめようかと思います。

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

Extension panelできるかな?

上にリンクを用意してますが、前回の設定で用意した基本の型“helloworld”さんを使ってみていこうと思います。

基本となるExtension panelのデータ構造
helloworldさんの中身

各種紹介

基本的なExtension panelの場合は、以下の5つのデータを変更するだけで自分だけのExtension panelを作ることができます。

  • manifest.xml
  • index.html
  • styles.css
  • main.js
  • hostscript.jsx

manifest.xml

CSXS/manifest.xml

manifest”さんは前回でも少し登場しました、覚えていらっしゃるでしょうか? 前回ではExtension panelが使用するアプリケーションやそのバージョンの設定などを記載しました。

“manifest”にはExtension panelに関係する各種情報が格納されています。パネル自身のサイズやパネルに表示するアイコンをどれを使うかなんかもこちらに記載します。あと忘れちゃいけない、Extension panelの名称やバージョン番号なんかも“manifest”に記載します。

index.html

index.html

index”さんはGUIの部分ですね、HTML形式で書かれています。

“index”を書き換えることで、GUIの構成を自由にマークアップすることができます。基本の型ではボタンが一つあったと思いますが、これを二つにしたり三つにしたりできるわけです。

styles.css

css/styles.css
styles”さんもGUIに関わる部分ですね、“index”さんと仲が良く装飾をしてくれます。

“styles”は凝りだすとキリがない部分でもあります。デフォルトの状態でもそれなりに装飾されたものになっているとは思います。無理していじらなくても問題ないですが、いろいろ試すと面白いです。

main.js

js/main.js
main”さんはGUIの部分の動作や制御などが書かれています、“index”さんと仲が良くすぐ呼び出しをくらいます。

基本の型では「id=”btn_test”」のボタンが押されたときにどのように動くかが書いてあります。

hostscript.jsx

jsx/hostscript.jsx

“hostscript”さんはExtension panelのメインの動作が書かれています。jsx形式になっています。

基本の型では“main”さんでボタンが押されたときに呼び出される処理がこちらに書かれており、アラートを表示するようになっています。

jsxとは? Adobeのアプリケーションで使用するJavaScriptでExtendScriptとも言います。開発には“ExtendScript Toolkit”などを使用したりしますが、中身はJavaScriptなので他のテキストエディタでも開発はできます。




終わりに

あとは自分で望むようなExtension panelを作るだけです。アプリケーションを使用しているときにこんなことできるパネルが欲しいとか、ショートカットを集めたパネルとか自分だけの自由なパネルがいろいろ作れちゃいます。

次回はExtension panelのパッケージ化の仕方を説明予定です。それではごきげんよう。

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


コメント