Fireworksプラグイン開発の備忘録

前置き

職業柄、主にPhotoshopを使っているのだが、WEBデザインをするならやはりFireworksを使ったほうが便利になる点が多々ある。しかし、Fireworksは中の人いわく「一度解散させられたのに必要にかられて再集結させられて、でもそんなにリソースが割けてない小規模組織が作ってる」と言われるほど、他がバージョンアップで新機能盛りだくさんで賑わっている横で、バグフィックスがメインになるという醜態をさらすほどかゆいところに手が届かないアプリケーションである。ましてや、CS4は誰しもが認めるバグの宝庫で、例えるなら「この車は500馬力で乗り心地もよく、見た目コンパクトなのに中が広々してて、燃費もいいし見た目もかっこいいけどエンジンがなかなかかからなかったりすぐにエンストしたりする」といった感じで、とにかく使いものにならない。しかし、会社のマシンに入ってるFireworksがCS4なので、Fireworksを使うならこのポンコツをだましだまし使わなければならないわけだ。

そんなFireworksの中でも一番気に食わないのが、「オブジェクトのリサイズを、縦横比固定のまま、数値指定で行おうとすると、いちいちダイアログを開かなければならない」という点だ。PhotoshopならCtrl+tを押せば、上部にそのサイズが%表示され(px表示に切り替え可能)、カーソルキーやマウスホイールで1pxずつサイズが変更でき、しかもリアルタイムに変形していく。端っこが画面外に出てしまうような大きなオブジェクトをリサイズする際、この機能がとても便利なのである。しかしFireworksは、ダイアログを開いて指定する、という性質上、1pxずつのリサイズが面倒くさい。1pxずつ10px変更してその様子を見るには、10回もダイアログを開く必要がある。面倒くさい。

それ故、Fireworksの便利機能を諦めて、Photoshopで作業をしていたのだが、ちょっとしたことで「そういう機能の拡張を作ればいいんじゃね?」という話になったので、作ることにした。その記録である。

今回の目的

とりあえずFireworksにパネルを作り、アラートを出すだけの動作をしてみる。Fireworksの拡張で、常時表示されるパネルは実はFlashで作ることができる。大雑把に言えば、Fireworksの中でFlash(SWF)を実行し、まるでJavascriptとSWFとが連携するように、FireworksとSWFとを連携させることができる。
とはいえ、わざわざFlashProfessionalを起動するのもアレなので、FlashDevelopを利用してActionScriptCS3を用いて開発することにする。

準備するもの

Fireworks CS4
・FlashDevelop Ver3

手順

1.FlashDevelopで、新規プロジェクトを作る
・AS3 Project でよい

2.FWに命令を送るためのライブラリを読み込む
・import adobe.utils.MMExecute;
これでMMExecute();が使えるようになる。いわばExternalInterface();のようなものだ。

3.private function init(e:Event = null):void{}にアラート文を書き込む
・MMExecute('alert("TEST")');

4.F8キーで書きだす。
F8キーはSWFをビルドするだけで、実行まではしないので、
Flash オーサリングでのみ使用できる機能です。」というエラーが出なくなる。

5.書き出されたSWFファイルをFWのライブラリ配置用フォルダに入れる。
XP:C:\Documents and Settings\<ユーザー名>\Application Data\Adobe\Fireworks CS4\Command Panels\
Vista:ブートドライブ\Users\<ユーザー名>\AppData\Roaming\Adobe\Fireworks CS4\Command Panels\
OS X:/Users/<ユーザー名>/Library/Application Support/Adobe/Fireworks CS4/Command Panels/

パネルを使わないなら、/Commands/を利用。
FlashDevelopの書き出し先を上記にしておけば、パブリッシュするたびに自動的に更新してくれるので便利!

6.おもむろにFWを再起動
起動後、一度ロードされると、その後はパネルを開閉するたびにSWFファイルを読みなおしてくれるので、便利。

7.「ウィンドウ」メニューから、配置したSWFファイルと同名のメニューをクリック
パネルが開くよ!
「TEST」と書かれたアラートが表示されるよ!

8.FlashDevelopで「TEST」の文字を「TSET」に書き換える
9.書きだす!
10.FWでパネルを開閉する!
11.アラーーーーート!