Tweet

Flex開発を楽にするFlash Builder 4の11の機能とは

Flash Builder 4の「コーディング自動化」機能

□【4】インデントの訂正

　ソースコードをコピー＆ペーストした際などで、ソースコードのインデントが崩れてしまうケースはよくありますが、Flash Builder 4のテキストエディタでは、ソースコードを選択して［Ctrl］＋［I］キー、または右クリック→［ソース］→［インデントを訂正］でそろえられます。

□【5】Getter/Setterの自動生成

　リファクタリングの機能が強化され、EclipseのJava開発でもおなじみであるGetter/Setterの生成がFlash Builder 4から可能になっています。

　変数を選択して右クリック→［ソース］→［Getter/Setterを生成］をクリックすると、ダイアログが表示され、「元の変数名変更」「Getter/Setterの生成選択」「どこにコードを挿入するか」という選択ができ、［OK］ボタンをクリックすると、Getter/Setterのコードが生成されます。

□【6】テンプレートのサポート

　ActionScriptクラスやMXMLファイルを新規作成する際に、テンプレートがサポートされました。あらかじめ用意されているテンプレートをFlash Builderで編集可能で、「どんな変数が使えるか」はコードヒントで確認できます。

　編集したテンプレートは書き出しでき、チームや組織などで配布して読み込めますので、コーディング規約に沿った初期ファイルを共有することで、ヘッダやコメントなど、お決まりのコーディングをする手間を省けます。

図6　［テンプレートを編集］ダイアログ

□【7】イベントハンドラの自動生成

　デザインビューでコンポーネントを並べて、クリックや変更時のイベントハンドラをマウスクリックで生成可能です。

　あらかじめ呼び出されるイベントハンドラを作成しておかなくても、この自動生成機能を使うことで、エラーを出すことなくコーディングできます。そのため、モック作成時など素早く作るときに、とても有用な機能です。

　また、イベントハンドラを生成する前にfunction名称を入力することで、その名称のイベントハンドラ生成もできます。

Flash Builderを使うデザイン／開発の連携ワークフロー

□【8】Flash Catalyst CS5との連携

　Adobe CS5では新ツールとして、PhotoshopやIllustratorなどのデザインツールで作成したグラフィックを素早くFlexアプリケーションのUI（ユーザーインターフェイス）にできる、Flash Catalyst CS5が加わりました。Flash Builderは、Flash Catalystで作成したプロジェクトをFlexプロジェクトとして直接読み込むことが可能です。

　これにより、「デザイナがインタラクションを含むUIを作成し、その後、開発者がロジックを追加する」という連携が行いやすくなっています。詳細は、連載第1回の「ワークフローを変えるFlex 4とFlash Catalystの基礎」を参考にしてください。

□【9】Flash CS5との連携

　Flash BuilderとFlash CS5を同時に使うときに、連携機能が強化されました。Flash CS5のファイルを読み込んでFlash Builder上で管理ができます。またFlash CS5では、Flash BuilderをActionScriptのエディタとして使用でき、Flash Builderでは、FlashムービーのパブリッシュをFlash CS5のショートカットキー（［Ctrl］＋［Enter］）で呼び出せます。

　「素材の管理やコードを記述するのはFlash Builderで行い、デザインや動きの部分はFlash CS5で行う」という連携も可能です。

□【10】Flexテーマ

　CSSなどで作成されたアプリケーションの概観をFlexテーマとして管理できるようになっています。コンポーネント（コントロール）を並べてUIを作成し、プロパティからテーマを選択してアプリケーションの概観を変更できます。

　テーマは独自に作成したものを読み込めるので、別途デザイナが作成したテーマをFlash Builderで読み込み、アプリケーションの構造ができた段階でテーマを適用して仕上げることもできます。

【11】Flash Builder 4の目玉機能「データ中心開発」

　Flash Builder 4になって大きく強化された機能の1つに「データ中心開発」があります。

　これまでのバージョンでは、Webサービス（WSDL）からのサービス生成と、データベース（MySQL）からのアプリケーション作成が可能でした。しかし、SOAPのバージョンによって制限があったり、PHPやASP.NET、またはWTPプロジェクトで作成されたJ2EE（Java EE）のみが対象だったりと限られた環境のみのサポートでした。

　データ中心開発は、Flash Builder 4における1つのテーマとされ、バージョン3よりも大幅に改善されています。データベースからのアプリケーション作成はサポートされなくなったものの、以下のサービスタイプに接続可能です。

• BlazeDS
• Live Cycle Data Services
• PHP
• ColdFusion
• HTTPサービス
• Webサービス
• XML

　また、接続できるサービスは拡張できるように、「拡張ポイント」を持っています。上記にないサービスも、独自に作成できるので、今後新しいサービスタイプも接続できるように公開されていくことも期待できます。

　データ中心開発はサービスと接続できるだけでなく、サービス呼び出しをした結果をリストや、コンボボックスなどとバインディング（結び付け）でき、ほとんどコードを書かなくてもデータの表示をするアプリケーションを作成できます。

□BlazeDS 4アプリを作って「データ中心開発」を試してみよう

　ここからは、Flexとともにバージョン4になった「BlazeDS」のサンプルを使ってデータ中心開発の機能を紹介します。手順を具体的に紹介するので、読者の皆さんもやってみてください。

□手順0．Flash Builder 4の環境構築

　Flash Builder 4の環境構築は、以下の記事を参考に ダウンロード して済ましておきましょう。

Flash Builder 4でAdobe AIRアプリを作ってみた 業務用Flashアプリ開発ツールの新機能を試す　新機能の目玉「データ中心型開発」とは何なのか？ 簡単なRSSリーダーのサンプルを作りながら、新機能をイロイロ紹介 「リッチクライアント ＆ 帳票」フォーラム 2010/3/24

□手順1．BlazeDS 4のダウンロード

　BlazeDS 4は、アドビシステムズのオープンソースサイトからダウンロードできます。本稿では、Tomcatを同梱していてすぐに使える「BlazeDS turnkey」をダウンロードします。

□手順2．RDSサーバの設定を追加

　Flash Builder 4でサービス一覧を取得できるように、RDS（Remote Data Services）サーバの設定を追加します。ダウンロードして解凍した「blazeds-turnkey-4.0.0.14931\tomcat\webapps\samples\WEB-INF」以下にある「web.xml」に「RDSDispachServlet」を設定します。

  <servlet>
        <servlet-name>RDSDispatchServlet</servlet-name>
        <display-name>RDSDispatchServlet</display-name>
        <servlet-class>flex.rds.server.servlet.FrontEndServlet</servlet-class>
        <init-param>
            <param-name>useAppserverSecurity</param-name>
            <param-value>false</param-value>
        </init-param>        
        <load-on-startup>10</load-on-startup>
    </servlet>
 
    <servlet-mapping id="RDS_DISPATCH_MAPPING">
        <servlet-name>RDSDispatchServlet</servlet-name>
        <url-pattern>/CFIDE/main/ide.cfm</url-pattern>
    </servlet-mapping>

　悪意のあるユーザーからサービスの一覧にアクセスできないように、通常ではセキュリティ設定を行いますが、ここでは開発環境で使うので、セキュリティ設定をオフにしておきます。<init-param>のuseAppserverSecurityをfalseに設定することで、認証なしでアクセス可能になります。

　実環境に配置するときにはRDSDispatchServletの設定を外すか、useAppserverSecurityを適切に設定してください。

□手順3．サーバの起動

　BlazeDSのサンプルが使用しているデータベースを起動します。回答した「BlazeDS turnkey」以下の「sampledb」（blazeds-turnkey-4.0.0.14931\sampledb）に移動し、startdbコマンドで起動できます。

　次に、「blazeds-turnkey」に付属しているTomcatを起動し、BlazeDSにアクセスできるようにします。「blazeds-turnkey-4.0.0.14931\tomcat\bin」でstartupコマンドを実行します。

　Webブラウザで「http://localhost:8400/samples/」にアクセスして動作確認しましょう。

図7　BlazeDSのサンプルページ

1-2-3

INDEX
Flexフレームワークで変わるRIA開発の現場（2） Flex開発を楽にするFlash Builder 4の11の機能とは
	Page1 「Flash Builder 4」の掲げる3つのテーマ Flash Builder 4の「生産性の向上」機能
	Page2 Flash Builder 4の「コーディング自動化」機能 Flash Builderを使うデザイン／開発の連携ワークフロー 【11】Flash Builder 4の目玉機能「データ中心開発」
	Page3 Flex 3の案件でもFlash Builderは生産性を向上させる

リッチクライアント＆帳票 全記事一覧へ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）