Flex Builderとは

Flex BuilderはAdobeが提供する商用のFlex用統合開発環境だ(FlexはFlashで一般的なGUIアプリケーションを開発するためのフレームワークである)。Flex BuilderはEclipseをベースとしており、最新のFlex Builder 3では話題のRIAプラットフォーム"AIR"にも対応することになっている。AIRではHTMLやFlexを用いてデスクトップアプリケーションを開発することができ、本連載の第9回ではHTMLベースのAIRアプリケーション開発をサポートするIDEとしてAptanaを紹介した。Flex Builderはその名の通り、FlexでのAIRアプリケーション開発をサポートしている。

なお、AIRに対応したFlex Builder 3は現在ベータ版がAdobe Labsから入手可能だ。本稿の内容もこのベータ版に基づいているため、正式版とは若干異なる点があるかもしれない。

Flex Builderの機能

WYSIWYGで画面を作成可能なGUIビルダを搭載

Flex Builderを使っていて最も嬉しいのは、なんといってもFlexアプリケーションのレイアウトをドラッグ&ドロップで編集可能なGUIビルダ機能だろう。MXMLエディタのデザインモードではパレットからコンポーネントを自由に配置することができる。MXMLエディタ上でコンポーネントをドラッグすると他のコンポーネントと位置をあわせるためのガイドラインが表示されるなど、非常に使い勝手が良い。

図1 FlexアプリケーションのGUIビルダ

配置したコンポーネントの細かい設定は右側のFlex Propertiesビューで行う。フォントや色などを設定することができ、設定した内容は即座にMXMLエディタの表示に反映される。

強力なAction Script編集支援機能

Flexアプリケーションではボタンが押されたときの処理などをAction Scriptで記述する。Flex BuilderではAction Scriptの編集支援機能も非常に充実しており、一般的なIDEと同様に[CTRL]+[SPACE]でコードの補完を行うことができる。

図2 ActiobScriptのコード補完

また、スクリプトにエラーがある場合は以下のように該当部分にエラーマーカが表示されるほか、スクリプト中のクラスやメソッド、変数の上で[CTRL]+マウスクリックすることで宣言部にジャンプすることができる([F3]でもジャンプ可能)。そのほかにも[CTRL]+[O]でエディタ上にアウトラインをポップアップ表示できたり、リネームリファクタリング、クラスやメソッドの参照先の検索など、Eclipseでお馴染みの機能を利用することができるため、効率よくActionScriptのコーディングを進めることができるだろう。

アプリケーションの動作確認と配布

作成したアプリケーションはFlex Builder上から実行して動作確認ができるほか、ブレークポイントを設定してデバッグを行うことも可能だ。

図3 Flexアプリケーションのデバッグ

また、アプリケーションを配布可能なAIRパッケージとしてエクスポートするためのウィザードも用意されている。

図4 エクスポートウィザード

このウィザードでエクスポートしたairファイルは、AIRランタイムがインストールされているPCであればダブルクリックすることでインストールを行うことができる。

まとめ - Flexアプリケーションの開発には必須のIDE

Flex BuilderはFlexアプリケーションの開発に必携のツールであることがおわかりいただけたのではないだろうか。GUIビルダに目を奪われがちだが、ActionScriptのコーディング支援機能も非常に充実している。

AdobeからはFlexのコマンドラインコンパイラなどを含んだFlex SDKがオープンソースで提供されており、これを利用することでFlex Builderを使わなくてもFlexアプリケーションの開発を行うことは可能だ(Flex 3 SDKのベータ版はAIRアプリケーションの開発もサポートしている)。しかし、GUIコンポーネントの配置などの作業をMXMLファイルの手書きで行うのはやはり厳しいものがある。Flex/AIRでの開発に興味のある方はぜひ試してみてほしい。