第1回

ワークフローを変えるFlex 4とFlash Catalystの基礎知識

ティルフィン合同会社
高橋 俊光
2010/5/31

Adobe CS5の新しい中核を担うFlex 4のフレームワーク。ワークフローを初めRIA開発現場がどう変わるかを、Flash Builder 4やFlash Catalyst、Adobe AIR 2などの技術・ツール・フレームワークなどの機能を紹介しながら解説する連載（編集部）

CS5の新しい中核を担うFlex 4のフレームワーク

　Flashをリッチクライアント/RIA（リッチ・インターネット・アプリケーション）の有力なプラットフォームへと押し上げた開発フレームワーク「Flex」は、とうとう先日バージョン4がリリースされました。Eclipseベースの統合開発環境のFlash Builder（旧、Flex Builder）も同様にバージョン4へと進化を遂げました。

　さらに大きいのは「Flash Catalyst」というインタラクションデザインツールの登場です。Flash Catalystは「Adobe Flash Catalyst CS5」として「Adobe Creative Suite 5」（以下、CS5）の1つとなり、日本でも5月28日から販売が開始されたばかりです（参考：アドビ、「Creative Suite 5」日本語版を発表）。

　Flash Catalystはスチールデザインを読み込み、さまざまなエフェクトやトランジションといったインタラクションを含めて、GUIでの編集によってインターフェイスを構築していくことを可能にしてくれます。

　ちなみに、Flash Catalyst CS5と同様にFlash Builder（Standard Edition）もCS5のWeb PremiumとMaster Collectionに含まれることになり、RIA開発の環境整備が楽になりました。

Flash CatalystでRIA開発は、どう変わる？

　Flex 4、そしてFlash Catalystの登場によって、RIA開発のワークフローも進化することになります。

□ これまでのUIデザインワークフロー

　FlexによるFlashベースのRIA開発では、ユーザーインターフェイス（以下、UI）デザインはスチールデザインに対して、UIデザイナ（以下、デザイナ）自身か、プログラマがそれをMXMLに起こして、さらに画面状態ごとの外観定義やその状態間の遷移におけるエフェクト設定といった動的なインタラクションをMXML/ActionScriptによるコーディングで肉付けしていくものでした。これらの作業は、いずれもFlash Builder上でプログラマもしくはMXML/ActionScriptに理解のあるデザイナが行う必要がありました。

　デザイナ自身がインタラクションまでの実装を行えれば理想ですが、実際のところデザイナの作業はPhotoshop、Fireworks、Illustratorでのスチールデザインとインタラクションの創造までが多いでしょう。そのアウトプットを見ながら、インタラクションデザインの伝達はデザイナとプログラマが直接打ち合わせつつ、プログラマがFlash Builderで実装し、できたモックの動作を再度デザイナが確認しながら詰めていくのが、UIデザインの一般的なワークフローでした。

図1　これまでのUIデザインのワークフロー

　これでは、RIAがRich（リッチ）であるために必要な設計シーンがコミュニケーションベースであり、実際の実装はプログラマによるため結果的に本来のデザイナーの考えが正確に反映するのが難しい問題がありました。

　これを解決してくれるツールがFlash Catalystです。次ページで、ワークフローがどう変わるのか説明します。

1-2

INDEX
Flexフレームワークで変わるRIA開発の現場（1） ワークフローを変えるFlex 4とFlash Catalystの基礎知識
	Page1 CS5の新しい中核を担うFlex 4のフレームワーク Flash CatalystでRIA開発は、どう変わる？
	Page2 Flex 4で進化したMXML、その中身は？ コラム　「プロトタイピングツールとしても高性能なFlash Builder!?」 RIA開発の“チーム構成”も変わるのか？

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

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