Flexフレームワークで変わるRIA開発の現場
連載インデックスへ
第1回

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


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


これからのUIデザインワークフロー

 デザイナは、Flash Catalystを使うと、MXML/ActionScriptに精通していなくても、プログラマに実装を頼まなくても、自分のアイデアをそのまま具現化することが可能になるのです。プログラマへの説明や、実際には実装が難しいために再度デザインを考えるといった手戻りからも解放されます。

 これらの設計情報はMXMLファイルとして保存されます。Flash Catalystにはデザインビューとコードビューが存在し、コードビューに切り替えると、Flash BuilderのようなプロジェクトファイルのツリービューとコンポーネントのMXMLコードが表示されます。作成および編集したプロジェクトは、Flash Builderでインポート可能なFXPFleX Project)ファイルとして保存できます。

図2 「gdata/java/」フォルダの構成
図2 これからのUIデザインのワークフロー

 FXPファイルは従来のFlexプロジェクトをそのままZIP圧縮したようなものです。このFXPファイルによって、デザイナからプログラマへ設計をシームレスに引き渡すワークフローを実現できます。

Flex 4で進化したMXML、その中身は?

 先ほど、Flash Catalystによってさまざまなインタラクション設計が可能になると書きましたが、これは同時にMXMLのみで完全にそれらの定義を完了できることを意味します。Flex 3までは、豊かなスキンの描画処理する場合、コンポーネントの内部仕様を理解して、ActionScriptでコーディングしなければなりませんでした。

 そのため、Flex 4では新しい「Sparkコンポーネント」アーキテクチャを導入することで、コンポーネントの振る舞いとスキンやレイアウトを分離、独立化し、Flash Catalystでの設計がMXMLベースで行えるようになりました。

Sparkコンポーネント

 Sparkコンポーネントは、Flex 3までの「mx.*」でパッケージが始まるコンポーネント(以下、「Haloコンポーネント」)の内部仕様(ライフサイクル)にオーバーラップしたアーキテクチャです。Sparkコンポーネントの継承関係を見ていくと、「mx.core.UIComponent」というHaloコンポーネントと同じ基底クラスに行き着くことが分かります。

 また、SparkコンポーネントにはDataGridなどは現状存在しないので、Haloコンポーネントも必要に応じて同時に使うことになります。

Flex 4の名前空間

 Flex 4のMXMLは、Sparkコンポーネントの導入など以外にも明確にビジュアルと非ビジュアル要素を分離するためにタグの構成が変更されました。それに伴って名前空間(パッケージ)が再定義されています。

名前空間 プレフィックス URI 概要
MXML2009 fx http://ns.adobe.com/mxml/2009 新しいMXML言語用の名前空間。非ビジュアルな要素をコンポーネントから分離するために使用する
Sparkコンポーネント s library://ns.adobe.com/flex/spark MXML2009とともにSparkコンポーネントの定義に使用
Haloコンポーネント mx library://ns.adobe.com/flex/mx MXML2009とともに従来のHaloコンポーネントの定義に使用
MXML2006 mx http://www.adobe.com/2006/mxml Flex 3までの従来のMXML言語仕様をFlex 4で使う場合に、上記の3つとは別に使用する後方互換用の名前空間

MXMLでのグラフィックス定義を可能にするFXG

 Flex 4では、「FXGFleX Graphics)」というMXMLの一部としてグラフィックス定義用のサブセットの要素群があります。このFXGは拡張子.fxgとしてファイルフォーマットも追加されています。Photoshop、FireworksそしてCS5からは、Flash ProfessionalでFXGフォーマットでの書き出しが行えます。また、ベクターグラフィックスが扱えるIllustratorでは読み込みと保存ができます。

 Flash Catalyst上でいったん読み込んだオブジェクトのデザインを再度変更したい場合、コンテキストメニューからIllustratorでの編集を開始できます。一部分での編集と終了後の反映がシームレスにできるようになります。

コラム 「プロトタイピングツールとしても高性能なFlash Builder!?」

Flash Catalystを使うほどでもない、インタラクティブなデザインを求めないアプリケーション開発もあると思います。そんなときはFlash Builderのみでモックデザインをすることもできます。Flexには多種多様なコンポーネントが備わっています。これらをドラッグ&ドロップなどのGUI操作が可能なMXMLのデザインビューが用意されています。

Flash Builder 4には、Flash Catalystにおけるコンポーネントのデフォルトテーマであるワイヤーフレームのテーマが最初からインストールされているので、プロトタイプデザインが簡単にできるようになっています。試しに、期間限定の無料版を ダウンロード して使ってみると、分かると思います。

RIA開発の“チーム構成”も変わるのか?

 Flash Catalystは、SWFファイルへのエクスポートも可能です。そのままユーザーに渡してFlash Playerでデザイン確認ができるわけです。そのためのサンプルデータの編集も可能です。モックによるユーザーへのデザイン確認のフェイズを、プログラマがかかわらずに進められることはオーバーヘッドの軽減につながるでしょう。

 ただ、非Flashデザイナにとっては「アニメーションがどこまで可能なのか」といったような、押さえなくてはならない範囲は広がります。逆に最大限にデザイナの実力が発揮できる環境がRIA開発に整ったともいえます。

 Flash PlayerがAndroidなどのモバイル環境にも広まっていく中、デザイナの担当する仕事は増えて、プログラマとの開発内での人数比率にも変化が出てくるかもしれません。

@IT関連記事


いまさら聞けないFlex、そして、いまこそ入門のとき!?
Flex 3正式版リリース! Flexの過去・現在・未来
 
先日ついに正式リリースされたFlashベースのRIA技術Flex 3。いまが入門に最適なFlexの過去・現在・未来を一挙に解説
リッチクライアント & 帳票」フ ォーラム 2008/3/31
デザイナだからこそ作れるUXに企業が注目している
D89クリップ(14) 
Illustratorのプロダクトマネージャに聞く、Illustrator CS4の面白い機能やFlash Catalyst、デザインの未来。Fireworksがあれば、Illustratorは要らない?
PHPとFlex作法の違いをずばり解説
PHPプログラマのためのFlex入門 PHPとFlex Builderの開発作法の違いを知って、Flashへの苦手意識を克服しよう。勉強会で簡単なサンプルを作ってみませんか?
リッチクライアント & 帳票」フォーラム 2009/11/11
Java開発者のためのActionScript/Flex Builder入門
Javaプログラマでも知っておくべきFlexのポイント なぜJava開発者にFlexはお勧めなのか? その理由とともに両者の類似点や動くサンプルでFlexの便利機能を紹介する
リッチクライアント & 帳票」フォーラム 2009/8/28
作って学ぶAIRウィジェットの基礎→応用
最近よく聞くAdobe AIRって何だっけ? ウィジェットを簡単に作れるらしいけど…… と曖昧な知識のあなたに贈る超入門連載。楽しいサンプルを作って基礎から応用まで学ぼう
業務用RIAの本命!? Flex+Java開発入門
本連載では、サーバサイドとしてJava、リッチなクライアントサイドとしてJavaと相性の良いFlexを用いたRIA開発の基礎を解説します。EclipseベースのIDEであるFlex Builderを使って、Tomcatで動くRIAをいくつか作成しましょう
速いFlash/ActionScriptチューニング入門
Flash/ActionScriptチューニングの基礎知識から実践的テクニックまでを紹介する連載。読みながら試せるオンライン・サンプルもあります。Adobe AIR/Flexにも応用可能です
デザインハック」コーナー
現場で使えるFlex実践テクニック
本連載では、Flex開発で基本となる特徴的な機能から一歩進んで、実開発の現場でよく使われるテクニックについて、より実践的に解説します
Flex2でWebアプリ開発
これまで3週間かかっていたWebアプリのモック開発工程を、3日に短縮できたというFlex2の体験版をダウンロードして簡単アプリを作ってみよう

プロフィール:高橋 俊光(たかはし としみつ)
Twitter(@tilfin
ティルフィン合同会社 代表。
メーカー企業で5年間業務パッケージソフトの開発等に携わった後、ティルフィン合同会社を設立しフリーエンジニアとして活動。開発実務ではFlex+Javaの経験が長い。
個人ではデスクトップアプリ、Webサービス、ガジェットなどの制作で、使用したプログラミング言語は多岐に渡る。

1-2  

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


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



HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間