Catalystによるワークフロー改善

こうした問題を抱えた前述の図は、Flash Catalystによって、以下のような図へと改善される。

Flash Catalystによって改善されたワークフロー

この図のポイントを以下に解説していこう。

デザイナと開発者の作業領域が分離

先ほどの図と比べて一目瞭然なのは、デザイナと開発者の作業領域がかなり明確に分かれていることだ。デザイナの役目は、Illustratorなどを用いてデザインを作成し、Catalystでさらにインタラクションやエフェクトを追加すること。開発者は、Catalystが生成したプロジェクトをFlex Builder 4で読み込み、ソフトウェアとしての振舞いを追加する。実はこの際、開発者は多少Catalystを触る羽目になるかもしれない……が、とりあえずFlash Catalystは「デザイナが利用するためのツール」であると言ってよいだろう。

矢印(作業の方向)が双方向になっている

先ほどの図では、デザインから開発に向けての一方向の矢印しかなかったが、この図では全てが双方向になっている。つまりCatalystのおかげで、デザインと開発を相互に行き来できる仕組みができたという訳だ。

ただその仕組みを説明しようとすると、どうしてもツール間のファイル形式など、細かい話にならざるを得ない。以下にその解説を行うが、まだ一般には手に入らないソフトウェアでもあるし、概要だけ押さえておきたいという方は、最後の「まとめ」まで読み飛ばしてしまっても問題ないだろう。中身を知らないと納得できない、という方だけこの先を読み進んで欲しい。

デザインツールとCatalystの間で、双方向のワークフローを実現するための肝となるのが、「fxg」(Flex Graphicsの略という説が有力)というファイル形式だ。このファイル形式はグラフィックを表現するためのもので、MXMLのサブセットとなるXMLフォーマットである。また、単一のファイルとして用いることができるだけではなく、MXML内に直接グラフィックス要素として埋め込むことも可能だ。

そして、Illustrator CS4は、実は既にFXG形式でのイメージを読み書きできるようになっているため、Catalystとのシームレスなやり取りが可能なのだ(PhotoShop CS4は現在書き出しのみ。将来的には、図中のツール全てが読み書き可能となる)。

もう一つ重要なのは、CatalystとFlex Builder 4の間が「fxp」という矢印で繋がれていることだ。fxpとは「Flex Project」の略であり、両ツールが読み書きすることのできる、標準的なプロジェクト形式のことである。つまり、一つのプロジェクトをどちらのツールでもオープンできる訳だ。これにより、デザイナの作業成果を開発者がそのまま受け取り、コーディングを行うことができる。Flex Builderで編集されたあとのUIも、Catalystで全く問題なく開くことができる。

Flash CatalystによるRIA開発のおさらい

Flash CatalystがRIA開発をどのように改善するか、おわかり頂けただろうか。もう一度、ポイントだけわかりやすくおさらいしておく。

• Catalystは、主にデザイナのためのツールである。デザイナはCatalystを用いて、Illustratorなどで作成したデザインにインタラクションやエフェクトを追加する。ただし、開発者がCatalystを触る可能性はゼロとは言えない(具体的には、次回以降で説明する)

• Catalystによって、デザインと開発の間で双方向のワークフローを実現できる。ポイントとなるのはfxgとfxp。fxgはMXMLのサブセット。fxpは、CatalystとFlex Builder間で互換性のあるプロジェクト形式

今回は、Flash Catalystに関する前提知識の話であった。Catalystのようなツールを使い始めるには、まずツールの目的を先に押さえておくことが重要と思い、かなり詳しく解説した。

次回はいよいよ、実際にコラボレーション作業を行ってみた結果をレポートする。乞うご期待!