CodeZine(コードジン)

特集ページ一覧

Flash Builder 4の新機能

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2010/05/12 14:00

 設計段階からデータ、コーディング、そしてテストまでRIAの開発作業を強力にサポートするAdobe Flash Builder 4。この記事では、Adobe Flash Builder 4の代表的な新機能を紹介します。

Flash Builder 4の新機能

 ようやく、Adobe Flash Builder 4(旧Adobe Flex Builder)の概要について説明できる運びとなりました。単に製品名が変わっただけではありません。Adobe Flexチームが費やした2年の月日にふさわしい進化を遂げています。Flashプラットフォーム向けの優れたアプリケーションを作成するための開発環境を、あらゆるタイプのデベロッパーの生産性を向上できる新しい刺激的な方向に発展させました。

 名前は変わりましたが、これはまさしくFlex Builder 3が進化したものです。オープンソースのFlexフレームワークによって、リッチインターネットアプリケーション(RIA)とコンテンツを短期間で構築できるようにする、Eclipseベースのプロフェッショナル向け開発ツールに、多くの強力な新機能が加わりました。

 この正式リリースは、2009年中にリリースした2つの公開ベータ版を経て完成されました。ベータ版でプレビューしていただいた機能が完全になっているほか、さらに追加された機能もあります。この記事では、これらの新機能のごく一部を紹介します。他のすべての機能について詳しくは、Adobe Developer Connectionをご覧ください。Flash Builder 4をすぐに体験していただけるように、多くのビデオ、記事、サンプルが用意されています。

必要条件

 この記事を最大限に活用するには、次のソフトウェアとファイルが必要です。

Flash Builder 4
※注

 インストール方法等は、下記の記事を参考にしてください。

この記事に必要な予備知識

 FlexとActionScript 3のいずれか、または両方を使い慣れていることが前提になります。

新機能の紹介

 ほとんどのFlexアプリケーションでは、まずデザインかデータのいずれかに焦点を合わせ、コーディングとテストのプロセスを経て、デプロイ作業に進みます。このプロセスから、このリリースの3つの主な機能のテーマが生まれました。

  • デザイナー/デベロッパーワークフロー
  • データ中心型の開発
  • IDEによる生産性とテスト

デザイナー/デベロッパーワークフローの改善

 アプリケーションが、ひらめきから生まれた非常に特殊なデザインから始まった場合、そのデザインが、最終的なアプリケーションで詳細まで実現されていることが重要です。アドビの先進のクリエイティブツールから生まれたコンテンツが、インタラクティビティの追加プロセスを経て、アプリケーションのロジック、サーバーやサービスとの完全な統合へ至る過程で、デザイナーの当初の意図に忠実であり続けるにはどうすればよいでしょうか?

 この疑問に答えるものが、アドビのデザイナー/デベロッパーワークフローのテーマです。それは、Adobe Flash ProfessionalおよびAdobe Flash Catalystという2つの主要Flashプラットフォーム製品を活用し、Flash Builderを使用するデベロッパーとアドビのクリエイティブツールのユーザーのコラボレーションを強化することです。

新しいワークフロー

 Flash Professional向けとして、Flash Builder 4に、FlashコンテンツをFlexアプリケーションに追加するための新しいワークフローが加わりました。これには、Flash Builderをデザインモードにした状態でコンポーネントパネルから「新規Flashコンポーネント」または「新規Flashコンテナ」をドラッグし、目的のカンバスに配置します。Flash Professionalを起動し、コンテンツを作成または編集した後、[完了]をクリックしてFlash Builder 4に戻ると、FLAファイルとSWCファイルがFlexプロジェクトにエクスポートされています。

 また、このリリースにはFlash BuilderとFlash Professionalの相互運用性を向上する仕組みも施されています。次期バージョンのFlash Professional上では、デフォルトのActionScriptコード編集環境として、内蔵のアクションパネルではなくFlash Builder 4を選択できるようになります。逆に、Flash Builder 4上で新規Flash Professionalプロジェクトを作成する使い方もできます。その場合は単に作業対象のFLAを指定し、必要なActionScriptクラスをコーディングすることで、Flash Professionalでのパブリッシュ、テストおよびデバッグ作業をFlash Builder 4上から実施できます。

Adobe Flash Catalyst

 新製品のAdobe Flash Catalystを使用すると、デザイナーがAdobe Creative Suiteツールからアートワークを読み込み、Flexフレームワークを基にして簡単にRIAユーザーインターフェースを作成できます。Flash Builder 4には、今後のバージョンのFlash Catalystから簡単なワークフローでプロジェクト全体またはコンポーネントスキンのセットを読み込む機能が用意されています。このため、デザイナーは今までにない気軽さでデベロッパーとの共同作業を進めることができます。

データ中心型の開発の実現

 総合的なデザインから着手するアプリケーションも多く存在しますが、ほとんどの場合、存在するのはまずデータです。企業データベースの情報を分かりやすく提示するダッシュボードを作成することもあれば、既存のColdFusionまたはPHPアプリケーションに新しいフロントエンドを提供することもあります。あるいは、RESTやSOAPなどのサードパーティサービスに大きく依存していることもあります。サーバーやサービスの詳細は変更されることもありますが、基本は同じです。

 必要なものは、それらのすべてのサービスに接続し、Flexコンポーネントにバインドするための簡単な方法です。それが、 Flash Builder 4によるデータ中心型開発手法のテーマの本質です。Flexの経験豊富なデベロッパーでも、Flexを初めて使用するWebアプリケーションデベロッパーでも、これらの機能によって作業期間が大幅に短縮され、ブラウザのHTMLだけでは非常に困難か、あるいは不可能な、データ中心型のエクスペリエンスを実現できます。

 Flash Builder 4によるデータ中心型の開発には、以下の3つの主なステージがあります。

  • データ/サービスモデルの定義
  • Flexコンポーネントへのサービス操作のバインド
  • ページングやデータ管理などの高度なデータ機能の実装

データ/サービスモデルの定義とバインドが簡単に

 データ/サービスモデルは、サーバーまたはサービス操作とそれらが返すデータを、すべてFlash Builder 4環境で表示するためのアプローチです。

 まず、既存ロジック(ColdFusionコンポーネント、PHPクラス、Javaクラス、Webサービス、HTTPベースのサービス、またはローカルXMLデータファイル)をFlash Builderでイントロスペクトします。すると、Flash Builderの新しい「データとサービス」パネルにそれらのサービスがツリービューで表示されます。各種バックエンドテクノロジーに基づく、さまざまなサービスを1つのモデルで表示できます。

 操作名をドラッグしてコンポーネントにドロップすれば、サーバー側の操作の結果をFlexコンポーネント(データグリッドやリストなど)に簡単にバインドできます。サービスを使用して、マスター/詳細機能のフォームを生成したり、チャートを作成するのも簡単です。

 既存ロジックをまだ作成していない場合は、PHPまたはColdFusion環境向けにFlash Builder 4でサンプルサービスを作成できます。データベース内のテーブルを指定すると、一般的なデータアクセス操作をすべて実装したColdFusionコンポーネントまたはPHPクラスが自動的に生成されます。これは、実際に使えるサーバー側ロジックを迅速に作成し、サービスの実装方法を理解するための方法として非常に有効です。

高度なデータ管理機能

 もちろん、データ中心型のアプリケーションで重要なのは、操作をコンポーネントにバインドすることだけではありません。Flash Builderでは、サービスのデータ管理をクライアント側で行うことができるため、データをオンデマンドでフェッチして大量のデータを簡単かつ効率的にスクロールできます。

 また、変更履歴によってアクションを取り消したり、通常はハードコードしなければならない共通のCRUD(作成、読み取り、更新、削除)関数を自動生成することも可能です。その結果、通常のHTMLフロントエンドでは不可能な豊かな体験を提供するアプリケーションを作成できます。

参考動画

Flash Builder 4でのDCD/PHP利用編
Flash Builder 4でのDCD/JAVA利用編

デベロッパーの生産性の向上

 アプリケーション開発のワークフローを、Adobe Flash Catalystを使用して開始する場合も、データ中心型の機能を使用するサービスをベースとして開始する場合も、アプリケーション開発作業の多くはコードの記述とテストです。Adobe Flash Builder 4には、日常的なコード記述とテストの生産性を向上する多くの新機能や強化機能が盛り込まれています。

  • Flex Builder 3のリファクタリング、デバッグ、プロファイラーについて、最も要望の多かった機能強化を行いました。
  • デバッグ機能には、条件きブレークポイント、ウォッチポイント、指定行までの実行、式評価が追加されています。
  • プロファイラーの「Object References(オブジェクト参照)」レポートを改善しました。
  • リファクタリング機能は、パッケージ名の変更、パッケージの移動、および複数ファイルの移動に対応しました。

 IDEによる新しい生産性機能を確認するには、次の操作を試してください。

  • getter/setterの生成
  • イベントコードの生成
  • 新しいPackage Explorer
  • ASDocツールチップのサポート

 また、MXML、ActionScript、CSS向けのカスタムファイルテンプレートの作成もサポートされています。なお、ここに挙げた生産性向上機能は、プロジェクトをFlex 4に移行したりSparkコンポーネントセットを使用したりしなくても利用できます。Flash Builder 4ではFlex 3 SDKの使用と「MXのみ」のFlex 4プロジェクトがサポートされており、Sparkコンポーネントを使用しない開発プロジェクトを扱うことができます。

参考動画

Flash Builder 4でのコーディング

テストの進化

 Adobe Flash Builder 4には、コード記述の生産性のほか、アプリケーションをテストするための2つの重要な新機能が加わっています。ネットワークの監視機能と、FlexUnitのサポートです。

 ネットワークの監視機能では、Flashクライアントとバックエンドサーバーの間のネットワークトラフィックをFlash Builder内から確認できます。これにより、Flexアプリケーションのデータアクセスの部分のデバッグや、クライアントとサーバーの間に存在するパフォーマンス問題の診断が容易になります。

 アプリケーション開発プロセスでは、ユニットテストも重要です。FlexUnitのサポートを組み込むことで、ユニットテストが簡単に行えるようになりました。テストの設定、テスト用ファイルの作成、テスト実行、テスト結果の分析が可能です。

コマンドラインによるビルドとデプロイ

 アプリケーションのビルドとデプロイの準備が整ったら、Flash Builderに新たに追加されたコマンドラインビルド機能を使用できます。これによって、Flexを企業の自動ビルドシステムに簡単に組み込むことができます。

Flash Builder 4をいっそう有効活用するために

 Flexの使用が初めての場合、アプリケーションを最初に起動したときに表示される新しいスタートページで、豊富な情報を参照できます。生産性向上にすぐに役立つチュートリアル、機能説明のビデオ、サンプルコードを用意しています。

 設計段階からデータ、コーディング、そしてテストまで、Adobe Flash Builder 4はRIAの開発作業を強力にサポートします。このツールを使って素晴らしいアプリケーションが生み出されることを、製品チーム一同楽しみにしています。

「FlexではじめるRIA開発」特集、絶賛公開中!
  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • Andrew Shorten()

    アドビのFlash Builder担当シニアプロダクトマネージャ。コンピューターベース体験の品質、豊かさ、価値を高めるために奮闘中です。富士通に在職中は、政府および 企業顧客向けのWeb、キオスク、モバイルユーザーインターフェイスの開発に携わっていました。その後、Macromedia、Micros...

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5