WebとUIをつなぐトリックスター（3）

画像とコードの触媒
Flash Catalystについて語りますと

＠IT編集部
平田修
2008/12/26

タイムラインとレイヤを備えたFlash制作用Eclipse

　こうしてCatalystを使ってみると、記者は以前からEclipseに使い慣れている元プログラマのため、Catalystは「タイムライン機能とレイヤ機能を備えたFlash制作用Eclipse」という印象を持った。

　米アドビシステムズプラットフォームビジネスユニット担当ゼネラルマネージャ兼バイスプレジデントデイビッド・ワドワーニ（David Wadhwani）氏も、「Flex Builderや、今回発表したCatalyst、Boltなどは皆Eclipseベースのツール」だと語っていた（参考：.NETやPHP、エンタープライズに広がるFlashプラットフォーム）。確かに、Catalystのパッケージの中身を見てみると、「plugins」フォルダがあり、Eclipseベースであることがよく分かる。また、Flex 4.0のSDKも含まれていた。

図35　Catalystの「plugins」フォルダ

図36　CatalystのFlex 4.0 SDKの「bin」フォルダ

　これまでのFlex Builderと同様にGumboもEclipseベースのためアプリケーションのフォルダ構成はCatlystとほぼ一緒だが、「features」フォルダがある。

図37　Gumboのフォルダ構成

　Gumboでは、Eclipseプラグインを追加して機能を拡張することが可能のようだが、Catalystはプラグインの追加機能は見当たらなかった。EclipseプラグインはすでにWeb上で多数公開されていて自作することもできるのでカスタマイズ好きには残念だろうし、Eclipseベースのツールとしての魅力を半減しているといえる。

　しかし、それでもEclipseベースで作ったということは、やはりEclipseが持つコーディングに特化した機能を、デザイナのためのツールに加えたかったのだろう。Eclipseベースというのは、デザイナとプラグラマをつなぐ役割のツールとして象徴的に感じた。

図38　Catalystにもコードのエラーチェック機能が

米アドビシステムズ Adobe AIR担当グループプロダクトマーケテイングマネージャーエイドリアン・ルードウィック（Adrian Ludwig）氏

　米アドビシステムズ Adobe AIR担当グループプロダクトマーケテイングマネージャーエイドリアン・ルードウィック（Adrian Ludwig）氏は、共同インタビューでCatalystについて次のように話した。

「Catalystはデザインされたアセットにアプリケーション作成機能を追加するもので、概念作成のときにデザイナが使うものだが、CS4のようないわゆる“デザインツール”ではない。CS4ではグラフィックの基本アセットを作り、Catalystでは、それらを読み込んでグラフィックの裏にあるコードを使ってビヘイビアやインタラクションを決めるものだ。また、CatalystはGumboとペアで使われる。FXPファイル形式で両方に共通のコードを使うことによって、プログラマはグラフィックをコンポーネントに変換しないで済むことになる」

　確かに、いままでと違ってCSSファイルでアセットとコンポ－ネントをひも付けする手間は必要なく、しかもビヘイビアやインタラクションもすでにコーディングされているコンポーネント群を1つのファイルで読み込めるのは、大きな効率化だろう。

スキンの進化形？ FXGとは何か？

　また記者は、Catalystを使ってみて、FXGというファイル形式はこれまでIllustratorやPhotoshop、Fireworksが拡張機能で実現していたスキン機能が強化されたものではないかとも感じた。

　これまでは、静的なアセットをスキンとして出力し、それをFlex BuilderでインポートするなどしてCSSで定義付けしたMXMLでコンポーネント化していた。アセットにFXGという共通の統一ファイル形式を作ることで静的なデザインツール間でも連携をしやすくし、Catalyst上でもバラバラのファイル形式ではなく同じファイル形式にしてしまった方が、ビヘイビアやインタラクションを付けやすいのではないだろうか。

アドビシステムズ DMOテクニカルエバンジェリスト太田禎一氏

　では、FXGとMXMLの関係性はどうなっているのだろうか。アドビシステムズが日本で12月2日に開催したAdobe MAX US 2008説明会で、DMOテクニカルエバンジェリストの太田禎一氏は以下のように答えた。

「FXGは、MXMLのサブセット（機能の一部）で新しい画像専用のフォーマットになる。Flex 4でサポートする新しいMXMLでないと、FXGは使うことができない。古いMXMLと新しいMXMLではコードレベルでの互換性はなくなるだろう。今回発表があったFlex 3.2の「MarShall Plan」機能は3.1以前の古いMXMLを“塊”として使えるようにするものだ。MarShall Planによって、4と3.1以前のバージョンのSDKで開発されたSWFを1つのアプリケーション内で利用可能にして混在して使えるようになる」

米アドビシステムズプラットフォームエバンジェリストライアン・スチュワート（Ryan Stewart）氏

　また、現在のCS4ではFXG形式はどれぐらいサポートされているのだろうか。これについて、スチュワート氏は特別セッションで次のように答えた。「Photoshopで作成するアセットはFXGで保存できるが、Photoshopでは開けない。CS5でもっと連携が実現するかもしれない。IllustratorはベクタデータだからCS4で連携できる。Fireworksでも連携できて、しかもFXG形式のサポートはFireworksが一番速かった」

　まだ完ぺきとはいえないが、いずれFXGを中心にRIAのワークフローを確立するようだ。米アドビシステムズ Adobe Flex グループプロダクトマーケティングマネージャーデイブ・グルーバー（Dave Gruber）氏は、今後について次のように付け加えた。

米アドビシステムズ Adobe Flex グループプロダクトマーケティングマネージャーデイブ・グルーバー（Dave Gruber）氏

「ツールの連携は何年かかけて深める必要がある。Catalystはまだ、Maxプレビューリリース版でベータ版にすらなっていない。2009年のQ1にベータ版がリリース予定だ。確かに、CS4からCatalystへの連携は100％ではないので、せひ使ってみてバグレポートを送ってほしい」

　2009年1月29・30日の「Adobe Max Japan」でも、Catalystを中心にしたデザイナ／プログラマ協業のデモは披露されるとのことなので、興味を持った読者は足を運んでみてはいかがだろうか。

■ ＠IT関連記事

Officeやファイル共有も!? 米のAdobe Max2007総評
連載：Flash観測所（7）　先ごろ米で開催されたユーザーカンファレンスAdobe Max2007。RIAの今後の方向性を知るうえで非常に重要な発表が今年も山盛りでした

「リッチクライアント＆帳票」フォーラム 2007/10/15

デザイナーだけでなく企業ユーザーも取り込むAdobe
連載：Flash観測所（8）　Adobe Maxがついに日本でも開催され、日本初披露のものや日本独自のコンテンツ、セッションが登場しました。その模様を凝縮してお届けします

「リッチクライアント＆帳票」フォーラム 2007/11/6

いまさら聞けない！ FlashとActionScriptについて
いまさら聞けないリッチクライアント技術（5）　今回は一般的にもおなじみの技術であるFlashの利点や欠点、作り方、中核技術であるActionScript、歴史などについて解説

「リッチクライアント＆帳票」フォーラム 2007/10/18

Flash制作を簡単にするActionScriptライブラリとは？
Flasherに便利なオープンソース「Spark project」　Flashの複雑なアニメーションや機能をどのように制作していますか？実は、無料で簡単に実現する方法があります

デザインハック＜リッチクライアント 2008/12/10

いまさら聞けないFlex、そして、いまこそ入門のとき!?
Flex 3正式版リリース！ Flexの過去・現在・未来　先日ついに正式リリースされたFlashベースのRIA技術Flex 3。いまが入門に最適なFlexの過去・現在・未来を一挙に解説

「リッチクライアント＆帳票」フォーラム 2008/3/31

Flex/AIR開発でデザイナとの協業を楽にする「yui」
デザイナとプログラマを“結”ぶオープンソース（前編）　Flex/AIR開発でデザイナと協業することになったら、ぜひ試してみてほしいオープンソースのフレームワークがあります

「リッチクライアント＆帳票」フォーラム 2008/10/1

5/5

INDEX
WebとUIをつなぐトリックスター（3）　画像とコードの触媒Flash Catalystについて語りますと
	Page1 あらためて、「Flash Catalyst」とは何か？いままでのFlashプラットフォームの協業ワークフロー
	Page2 Flash Catalystを使ってみた
	Page3 Flex Builder 4も使ってみた
	Page4 Flex Builder 4の新機能3つ
	Page5 タイムラインとレイヤを備えたFlash制作用Eclipse スキンの進化形？ FXGとは何か？

[an error occurred while processing this directive]

「デザインハック」コーナーへ

HTML5 + UX フォーラム新着記事

GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 （2017/7/12）
　資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する
GET／POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 （2017/7/10）
　HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】
PHPのfor文＆ループ脱出のbreak/スキップのcontinue【更新】 （2017/6/26）
　素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】
Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート （2017/6/12）
　Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する