Extension Builder(Brackets)で新規プロジェクトを作成すると、ボタンをクリックするとExtendScript側でアラートを出すという簡単なサンプルがセットされます。これはPlugin開発に最低限必要な構成になっていますので、これらをテンプレートとして開発が行えるようになります。

なお、これらのファイルの名称は設定によって変更ができますので、あくまで関連性だけに注目します。

 

<css関連>

  • boilerplate.css
  • styles.css
  • topcoat-desktop-dark.min.css

Webのそれと同様にHTMLの見た目を決めるCSSファイルですが、なにぶん詳細なコメントがついているわけではないので、すんなり活用できるシロモノではありません。

また、このCSSはCCアプリケーションの見た目とも違うので、これを解析するよりも独自のCSSを作ったほうが何かと利便性がよいと思います。

 

<manifest.xml>

「マニフェスト」と呼ばれる、Pluginがアプリケーションに読み込まれる際に参照されるファイルです。「Pluginの名称」「対応するCCアプリケーション」「CEPのバージョン」などを記載します(参照:<解説> マニフェスト)。

 

<アイコン画像>

  • iconDarkNormal.png
  • iconDarkRollover.png
  • iconDisabled.png
  • iconNormal.png
  • iconRollover.png

パネルをツールバーへ接続したときに表示されるアイコンです。「通常」「カーソルが重なった時」など、状況に応じた5種類を用意します(参照:<解説> マニフェスト)。

 

<JavaScriptファイル>

  • CSInterface.js
  • jquery-2.0.2.min.js
  • main.js
  • themeManager.js

必須となるファイルは「CSInterface.js」です。このライブラリによって、CEPパネルからCCアプリケーションのオブジェクトをExtendScriptで操作できるようになっています(参照:)。なお、CEPのバージョンによって内容が変わりますが、動作環境(CCアプリケーション)は古いバージョンと上位互換になっています。

「jquery-2.0.2.min.js」はWeb構築で使用されているものと同等のもので、Extension Builderが追加しているライブラリです。GUI構築で使用していれば必要になります。GUIを作りこもうとすれば必須と言えます。

「main.js」が独自の機能を実装するスクリプトを書き込むファイルです。このサンプル上でCCアプリケーションとやりとりする部分はここに書かれています。

「themeManager.js」もExtension Builderが追加しているライブラリです。CCアプリケーションでUIテーマが変更された場合、このライブラリを使って各種設定値を取得することができます。

なお、これらのファイル群は利便的な観点から分けられているに過ぎず、読み込み順で問題が発生しなければ、何がどこに書かれていても差し支えありませんし、ライブラリから不要な関数を削って軽量化することも可能です。

もっとも、通常は用意されたテンプレートに逆らう必然性が低いので、ライブラリはそのままにし、独自のスクリプトをmain.jsに書き込んでいくのが無難です。


<ExtendScriptファイル>

CCアプリケーションのオブジェクトを操作するExtendScriptは、別個のファイルとして用意します。このサンプルでは「hostscript.jsx」という名称になっており、CCアプリケーションで "hello from ExtendScript" というアラートを出すスクリプトが書かれています(参照:ExtendScriptの実行)。

 

<デバッグ設定ファイル>

CCアプリケーションはデバックモードを備えており、Webブラウザを使ってパネル(Plugin)と通信できるようになっています。「.debug」ファイルにはその際のポートを設定します(参照:)。

 

<HTMLファイル>

通常のWeb作成と同じ意味合いで存在し、CSSと連動してパネルのGUIを構成します(参照:<解説> HTMLファイル)。

 

Joomla templates by a4joomla