CCエクステンションアイコン

AdobeCCのExtensionをBracketsで開発しよう 1/5

然ですが、Adobe CCバージョンよりHTML5+JSXで容易にExtension(エクステンション:機能拡張)が開発できるようになりました。

ExtensionIcon

HTML5ベースになりハードルが下がった

インターフェースをHTML5+JSで記述するため(「Chrome」ベース)、それ相応の知識は必要ですが、(容易はどうした!)jQueryやその他色々なJSプラグインが使えるため、かなり凝ったものが作れそうです(CS6まではFlashベース)。Bracketsのプラグインも公開され始めてますので、ここがチャンス到来と見ました。今回から5回(たぶん)シリーズでExtensionの開発日記を記していきたいと思います。

ちなみにCC2015くらいから「Adobe Extension Manager」による拡張機能の追加が行えなくなってます。公式(サードパーティー含)なものは「Adobe Add-ons」から追加を行う模様です。つまり審査してもらい、通ったら公式追加が行えるというものです。まぁ安全ですよね、、、。いろいろ登録されているみたいなので、興味のある方はいろいろ探してみてください。

後述するつもりですが、非公式(コマンドラインから)に追加する方法もあります(→ExMan)。練習で作るものなので、この方法で追加したいと思います。なので、この連載で作っていくのはCC2015対応のExtensionです。

開発環境を整える

第1回目は開発環境を整えます。まず「Brackets」をインストールします。

これがBracketsだ!
ダウンロードはここから

BracketsはAdobeが公開している無料のコードエディターです。無料なのに多機能で最近はもっぱらコレを使ってます。これ使ってると、Dreamweaverの出番が減ります。大丈夫か!Dreamweaver!がんばれ!Dreamweaver!

Dreamweaverの応援も終わった頃にインストール完了していると思いますが、インストールが終わったら、起動してウィンドウの右端にある「機能拡張マネージャー」ボタンを押して下さい。

Bracketsの初期画面

スポンサーリンク

機能拡張開発のための機能拡張をインストール

そうです、機能拡張を開発するための機能拡張をインストールします!出てきたウインドウの右上の検索ボックスに「Creative Extension」とかで検索し、「Creative Cloud Extension Builder」をインストールしてください。

Bracketsのプラグイン検索画面

何かを応援する間もなく、インストールが終わると、メインウィンドウに「CC Extension Builder」というメニューが増えてますので、そこから「New Creative Cloud Extension」を選択!

CC Extension Builderがメニューに追加された

そんだら、Extension名とユニークIDを決定し、

CC Extension Builderの新規作成画面

これで開発環境は整いました。下記画像が初期状態です。

CC Extension Builderの新規作成からの初期画面

う~ん、これホントに5回で終わるのか

スポンサーリンク

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です