HTML5+CSS3+Javascriptをベースとする「CEP」によって、Adobe系アプリケーションのExtensionは以前より簡単に作成することが可能になりましたが、HTMLとCSSによるGUI作成はその自由度と引き換えに意外と面倒なものです。

そのUI作成の負担を軽減するために、「Nakatoji UIライブラリ」というものを用意しました。

参照:Nakatoji UI ライブラリ

ライブラリのダウンロード:nakatojiUiLib-0.15-min.zip

ここでのプラグイン制作はこのライブラリを使います。使い方は上記の参照ページにも書いていますが、記事中でも適宜リンクを提示したりあらためて説明します。

 

<導入手順>

これ以降に続くプラグイン制作記事は、BracketsにCC Extension Builderがインストール済で(参照)、Nakatoji UIライブラリがセットされた状態から始めます。

そこまでの手順は以下の通りです。

 

メニュー「CC Extension Builder > New Creative Cloud Extension」から新規プロジェクトを作成します。

作成時には以下のようなダイアログが出ます。

 

「Extention Name」に作成するプラグインの名前、「Unique ID」にはAdebe系プラグインとして他と重複しない名前を付けるのですが、初期値にならって「com.作成者.プラグイン名」のようにしておけばよいでしょう(3つの要素があれば重複する確率が低いので)。

なお、これらの名称は作成後に書き換えることができますので、とりあえず初期値のまま作成してしまっても問題ありません。

作成に成功した旨のアラートが表示され、新規プロジェクトが出来上がります。

 

このプロジェクトにダウンロードした「Nakatoji UIライブラリ」を読み込みます。

zipファイルを解凍すると「nakatojiUiLib-0.15-min.js」というファイルがありますので、これをプロジェクトの適当な場所に配置します。すでに他のライブラリのために「libs」というフォルダが存在していますので、そこへ読み込むことにします。

左ペインの「libs」フォルダを右クリックし、メニューから「エクスプローラーで表示(Macはファインダー)」を選択すると該当フォルダが開きますので、そこへ「nakatojiUiLib-0.1-min.js」をコピーします。

  

※画像ではバージョンが「0.1」となっていますが、現在のバージョンは「0.15」です。

 

Bracketsを戻ってみると、すでにプロジェクトへ読み込まれているのが確認できます。

これでプラグイン制作を始める準備が整いました。

 

不要なファイルは消去したいという人は、以下のファイルは削除することができます。

  • Nakatoji UIライブラリのみでUIを作成する場合、CSSフォルダはすべて不要です
  • スクリプトを送信するだけであればCSInterface.jsも不要です(Nakatoji UIライブラリに内包)
  • themeManager.js(Nakatoji UIライブラリが対応しています)

削除後は以下のようになります。

  

 

Joomla templates by a4joomla