1. ホーム
2. Developer Connection
3. Adobe Flex Developer Center

イベントレポート「Flash Catalyst / Flash Builder 4 ベータ公開イベント」

2009年7月7日、東京・大崎のゲートシティホールにおいて「Flash Catalyst / Flash Builder 4 ベータ公開イベント」と題したセミナーが開催されました。このセミナーでは、Adobe Flash Platformに加わる新ツールである、Flash CatalystとFlash Builder 4（Flex Builder 3の後継）と、これら2つの新製品を支えるFlex 4 フレームワークの特徴について、アドビ システムズ プラットフォームエバンジェリストのエンリケ・デュボスより、デモを交えて紹介しました。

Adobe Flash Platformの概要とロードマップ

既存のアプリケーションの事例として、以下のコンテンツを紹介しました。

事例の次は、Flash Platformの構成要素について紹介しました。

Flash Platformの核となるのは「クライアント」です。ブラウザの場合Adobe Flash Player、デスクトップの場合Adobe AIRとなります。また、アプリケーションを構築する上で核となるのは、「クライアント」の上にある「フレームワーク」――すなわち、Flexフレームワークとなります。Flexフレームワークは、ActionScript 3.0で稼動します。そして、「ツール製品」―― Flash CS4 Professional、Flash Builder、またはFlash Catalystなどを自由に選んでFlash Platformのアプリケーションを作ることができます。最後に「サーバ」について、オーディオ、ビデオストリーミング用途にはFlash Media Server、高スループット、高アウトプットベースなメッセージング用途にはBlazeDSをご利用いただけます。

実際に、Flash BuilderとFlash Catalystを使用して作成した、ホテル管理アプリケーションのデモを行いました。

まずは、Illustrator CS4、Photoshop CS4などのクリエイティブツールを使ってデザインして作成したファイルをFlash Catalystにインポートします。その後、Flash Catalystでは、インポートしたファイルをFlexベースのコンポーネントに変換します。この一連の作業の中で、デザインしたユーザーインターフェイスに対して、ステートやトランジションなどのアニメーションを定義した後に、Flash Builderにエクスポートします。最終的に、Flash Builder を用いてサーバと接続してデータと紐付ける作業を行います。

Flex 4 SDK の新機能

Flex 4 SDKには、Flash BuilderとFlash Catalystを用いた新しいワークフローをサポートするため、「デザインの重視」、「デベロッパーの生産性」、「フレームワークの進化」という三つのテーマがあります。

「デザインの重視」のために導入したのが、FXGというインタラクティブなXMLベースのグラフィック言語です。そして、このFXGをサポートするためにさらに、新しくMXML 2009というコンポーネントモデルも導入しました。

「デベロッパーの生産性」では、コンパイラのパフォーマンスを改善し、より良くより早くなりました。他には、2-way バインディング、CSSの改善などがあります。

「フレームワークの進化」では、ランタイムの新しい機能を活用できるようにするため、 Flash Player 10のFlash Text Engineの活用、Flexフレームワークの中にある、ステート、エフェクト、アニメーションなどの改善も行いました。

デザイナーには、Flex内での自由度の高いデザイン作業環境を提供するために、新しいコンポーネントモデルが必要と考えました。

現行のFlex 3のコンポーネントモデルでは、ビューとコンポーネントモデルが同じところで提供されています。これは、スキンとコンポーネントの実装を分離することが難しいということを意味しています。

それに対して、新しいSparkコンポーネントモデルでは、ビューとデータと、データをコントロールするモデルを分離しています。

この新しいモデルを用いて作業すると、デザイナーはもちろん、デベロッパーの作業自由度が向上します。デザイナーは、主にスキンや、レイアウト、アニメーション、パーツ、ステートを作る作業に集中でき、デベロッパーは、ビヘイビア、ロジック、データに対しての作業に集中することができます。

このSparkコンポーネントモデルは、MXML 2009の中に含まれています。
MXML 2009とMXML 2006のコンポーネントモデルは組み合わせて使うことができます。
MXML 2009のXMLネームスペースには以下の3種類が用意されています。

• xmlns:fx=http://ns.adobe.com/mxml/2009
  • MXMLの言語タグ（Script, Styleなど）
  • ビルトインの型（Array, String, Numberなど)
• xmlns:s=“library://ns.adobe.com/flex/spark”
  • Flex4の新たなクラス群
  • RPC
  • Graphics
• xmlns:mx=“library://ns.adobe.com/flex/halo”
  • 現在のHaloコンポーネント群
  • States、Validators、RPC etc.
  • 2006年（Flex 2リリース時）に定義された全て

FXGは、デザイナーとデベロッパーのワークフローのコアになります。

After Effects CS4、Illustrator CS4、Fireworks CS4、Photoshop CS4などのクリエイティブツールを用いてネイティブに書き出すことができ、Flashレンダリングモデルがベースになっており、コンパイラに最適化されるようになっています。

実際に、Flash Builderを用いてコードレベルで解説しました。

SparkコンポーネントとHaloコンポーネントを同時に使用した例

LayoutManagerを使用した例

Text Layout Frameworkを使用した例

Flash Catalystのご紹介

Flexアプリケーション開発におけるデザイナーとデベロッパーの現状のワークフローと、Flash Catalystを用いて改善されたデザイナーとデベロッパーの新しいワークフローを比較しながら解説しました。

今までのワークフローでデザイナーが行ってきたユーザーインターフェイスの定義とは、静的なワイヤーフレームの構築であり、デベロッパーは、そのデザインを元に、またゼロからユーザーインターフェイスを構築する作業を行わなければなりませんでした。

このワークフローを改善するためには、デザイナーがデベロッパーに渡すカンプを、デベロッパーにとって使えるものにするという、新しいワークフローが必要になります。

この新しいワークフローを確立させるため、Flash Catalystでは、静的なデザインコンテンツに対してステート、インタラクション、アニメーションなどのデザインを加えることができ、デザインの精度を維持するために、デザイナーがフルにFlexコンポーネントをコントロールできるようになります。

コンポーネントの外観を調整したいときは、任意のタイミングでCS4のクリエイティブツールを使った編集作業に戻るというラウンドトリップが可能になります。

すべての作業がおわったら、Flash Builderで読み込み可能なプロジェクトファイル（FXP）してそのまま書き出すことができます。

なお、Flash Catalystは、インタラクティブデザイナー、インフォメーションアーキテクト、グラフィックデザイナー、クリエイティブディレクターをターゲットユーザーとして捉えています。

Flash Catalystの利用シーンは、以下のような使用ケースが上げられます。

• アプリケーションのUI
• インタラクティブなコンテンツ
• ポートフォリオ
• 製品ガイド
• プロトタイプ
• ワイヤーフレーム
• マイクロサイト
• サイトナビゲーション
• Widget
• 教育

デモでは、Photoshop CS4で作成した静的なワイヤーフレームを元に、Flash Catalystを用いて、ログインのページとダッシュボードのページを持ったアプリケーションを構築するデモを行いました。

Flash Builder 4の新機能

Flex Builder からFlash Builderへと、ツールの名前を変えた理由は、Flashのブランドを統一するためです。Flash Platformの説明をするとき、Flash Catalyst、Flashランタイム、Flash Professionalの話をします。これらの観点で考えると妥当と考えたからです。

Flexとツールを分ける…差別化するというのも一つの目的です。
Flexアプリケーションは、Flex Builderを持っていなくても開発できますが、「持っていないとFlexアプリケーションの開発ができないのではないか」――という混乱が、マーケット上で起きました。名称を変更したことにより、これらの混乱を防ぐことができます。

Flash Builder 4ですが、引き続きEclipseベースのIDEになります。
IDEを使うということは、さまざまなメリットがあります。
IDEを使うメリットとして、高度なコードの編集、ビジュアルなレイアウトとスタイルの設定、インタラクティブなデバッグ/プロファイリングなどがあります。

Flexアプリケーションをつくるにあたって、二つの観点からアプリケーションを作ることができます。

Flash Builderは、どちらの場合にも享受できる環境が揃っています。

Flash Builder 4のテーマは、大きく分けて以下の3つになります。

• デザイナー/デベロッパー連携
  • デザインをそのままに
  • ワークフローの促進
  • マニュアル工程の排除
• データ中心型開発
  • 様々なバックエンドのサービスをサポート
  • データ管理を簡素化
  • データをベースにしたUI自動生成
• 開発環境の生産性とテスト
  • コード入力作業の向上
  • チューニングとデバッグのスピードアップ
  • 確立したテスト方法とビルドプロセスに対応

Flash Builderの新機能の解説を交えながら、Flash Catalystのデモで書き出したファイルを用いて、アプリケーション構築のデモを行いました。

クラス名またはMXMLタグにフォーカスを合わせるだけで、簡単にASDocを表示させることができるようになりました。

データサービスのパネルを使用すると、BlazeDS、ColdFusion、HTTPService、LiveCycle Data Services、PHP、WebServiceなどに接続することができます。デモでは、ColdFusionのサービスに接続しました。Flash Builderを使用すれば、クライアント側でもサーバ側でも、ColdFusionのコードを生成することもできます。

新機能であるネットワーク・モニタを使用すると、クライアント/サーバ間のデータコミュニケーションを見ることができ、デバッグやプロファイリングを行うときに大変便利です。

Flash Builder4の中でFlashのコンポーネント/コンテナを作成できる機能が追加されました。Flash Professional CS4と連動して作業を行うことができます。

全体Q&A

最後に、全体を通しての質疑応答が行われました。来場者の多くがFlash, Flex制作者ということもあり、「Flash ProfessionalでFlex SDKのコンポーネントを直接扱えるようになるのか？」といった声が挙りました。それに対してエンリケは「Flash BuilderとFlash Professionalでコンポーネントを相互に追加・拡張可能」と回答し、その他にも「Flex 3とFlex 4のHaloコンポーネントモデルは同じものか」、「Flex 3アプリケーションをそのままFlex 4に移行できるか？」といった質問に対しては、「まだベータで完全な状態ではないが、サードパーティー製のコンポーネントを含む、どんなFlex 3アプリケーションでもFlex 4に移行できるようにしていく」と、回答しました。

Flash BuilderとFlash Catalystを利用すれば、今までFlexアプリケーションを開発してきたデベロッパーはもちろん、これからFlexアプリケーションを開発するデザイナーやデベロッパーがよりシームレスに作業を行えるようになることは間違いないでしょう。