Flex/AIR開発でデザイナとの
協業を楽にする「yui」

特集：デザイナとプログラマを“結”ぶオープンソース（前編）

クラスメソッド株式会社
渡邊 佳一
2008/10/1

■ 機能【その3】各レイヤのフィールドに対してDIを行う「Customizer」

　「Customizer」は、各レイヤオブジェクトに定義されたフィールドに対して、インスタンスの管理（DI）を行います。レイヤオブジェクトはPOJOとして定義され役割を果たしますが、関連するレイヤオブジェクトをフィールドとして持つことになります。

　下記のActionクラス定義例をご覧ください。下記の例ではViewのドキュメントルートがcreationCompleteイベントを発生した際に、Helperを利用してChartコンポーネントに対してデータの代入を行っています。

xxxAction.as

package examples.yui.datavisualization.action{ import mx.events.FlexEvent; import examples.yui.datavisulaization.helper.XxxHelper; public class XxxAction{     public var helper:XxxHelper;     public function onCreationCompleteHandler(event:FlexEvent ):void{         // Viewの初期化が完了したら、         // Chartコンポーネントをセットアップする         helper.setupChart();     } } }

xxxHelper.as

package examples.yui.datavisualization.helper{ import examples.yui.datavisulaization.helper.XxxView; public class XxxHelper{     public var view:XxxView;     public function setupChart():void{         //chartのdataProviderにデータを代入         view.chart.dataProvider = new ArrayCollection( [ … ] );     } } }

　各レイヤオブジェクトでは、ほかのレイヤオブジェクトのインスタンスを利用することで、役割を果たします。命名規則に従って定義したフィールドはCustomizerの機能を利用してDIされ、newによるインスタンス化や変数の代入などを行うことなく利用できます。

　また、各レイヤオブジェクトに定義すると、CustomizerによってDIの対象となるフィールドには規約があります。以下に、それぞれのレイヤオブジェクトに定義するとDIの対象となるフィールドを表3に示します。最初のアーキテクチャ図1と併せてご覧ください。

表3　レイヤオブジェクトに定義するとDIの対象となるフィールド

レイヤオブジェクト DIの対象となるレイヤオブジェクトのフィールド View なし Helper public var view : xxxView; Action public var helper : xxxHelper; public var logic : xxxLogic; public var service : xxxService;（※） Logic public var service : xxxService;

※ レイヤオブジェクトのフィールドは、publicなフィールドとして定義する必要がある ※ インスタンス名は自由。Customizerはクラス名からレイヤオブジェクトの役割を解決している

　このように各レイヤオブジェクトはPOJOとしてシンプルなオブジェクトでありながら、Customizerによって拡張されることで最大限の役割を果たすことができるようになっています。

■ 機能【その4】ログ管理／操作を行う「Logging API」

　「Logging API」は、Javaで有名な「log4j」というロギングフレームワークをActionScript 3.0で移植したものです。Javaのlog4jと同じように使用できるので、一度でも使ったことがある方であれば、難なく使用可能だと思います。

　そして、yuiのLogging APIはmxのパッケージに依存してないため、単体で利用可能です。下記に、Logging APIの使用例を示します。

XxxAction.as

package examples.yui.datavisualization.action{ import flash.events.MouseEvent; import examples.yui.datavisulaization.helper.XxxHelper; import examples.yui.datavisulaization.logic.XxxLogic; public class XxxAction{     public var helper:XxxHelper;     public var logic:XxxLogic;     //logger変数の定義     public var logger:Logger = LogManager.getLogger(ExampleAction);     public function onCreationCompleteHandler(event:FlexEvent):void{         //loggerを利用して、コンソールに文字列を出力         logger.debug( "start onCreationCompleteHandler");         helper.setupChart();         logger.debug( "end onCreationCompleteHandler");     } } }

　ログレベルやログ出力先の指定などの設定も「log4yui.properties」ファイルという設定ファイルで一元管理を行っています。本記事では細かくは取り上げませんが、参考として以下に示します。詳しく知りたい方は記事「効率的なログ出力をCommonsで実現」を参照してください。

log4yui.properties

log4yui.properties log4yui.category.org.seasar=DEBUG, C log4yui.category.yui.example=DEBUG, C log4yui.appender.C=org.seasar.akabana.yui.logging.appender.SimpleAppender log4yui.appender.C.layout=org.seasar.akabana.yui.logging.layout.PatternLayout log4yui.appender.C.layout.pattern=%d [%c] %l - %m%t log4yui.rootLogger=INFO, A1 log4yui.appender.A1=org.seasar.akabana.yui.logging.appender.SimpleAppender log4yui.appender.A1.layout=org.seasar.akabana.yui.logging.layout.PatternLayout log4yui.appender.A1.layout.pattern=%d [%c] %l - %m

　yuiを使用したアプリケーションをデバッグ起動すると、以下のようなログが出力され、yuiがアプリケーションの各機能を利用して解析しているのが分かります。

図4　アプリケーション実行時のログの例（画像をクリックすると拡大します）

■ 機能【その5】RPC接続を可能にする「RPCコンポーネント」

　yuiでは、S2Flex2またはBlazeDSのGatewayへの接続を可能にする「RPCコンポーネント」を実装しています。

　Customizerの部分で一部取り上げたように、Serviceのレイヤオブジェクトはフィールドとして定義します。通常のRPCコンポーネントは、呼び出すサーバサイドのRemoteSerivceをdestinationによって選択しますが、yuiのRPCコンポーネントではフィールド名を「destination」と名前を合わせることで、destinationを解決できます。以下にコード例を示します。

package examples.yui.datavisualization.action{ import org.seasar.akabana.yui.service.event.* import org.seasar.akabana.yui.service.rpc.remoting.*; public class XxxLogic{     //dataServiceという名前のDestinationが設定される     public var dataService:RemotingService;     public function getData(resultHandler:Function,         faultHandler:Function ):void{         dataService.addEventListener(ResultEvent.RESULT,resultHandler);         dataService.addEventListener(FaultEvent.FAULT,faultHandler);         dataService.getData();     } } }

　上記の例では、「dataService」という名前で定義されたdestinationを持つRemoteServiceを呼び出しています。このソースはS2Flex2への接続を想定したものですが、BlazeDSに登録されているサービスを呼び出す場合は、ライブラリの参照にyui-dsを追加して上記のRemoteServiceをmx.rpc.RemoteObjectに変更すれば、同じように使用できます。

yui（結）でデザイナとプログラマを“結”び付けよう

　yuiは「ゆい」と読みます。これは偶然ですが、結（ゆい）をWikipediaで検索すると、「主に小さな集落や自治単位における共同作業の制度である。1人で行うには多大な費用と期間、そして労力が必要な作業を、集落の住民総出で助け合い、協力し合う相互扶助の精神で成り立っている」とありました。

　これをRIA開発に当てはめると、「多様な技術を駆使し作成するアプリケーション開発（膨大で労力が必要な作業）は、デザイナとプログラマの協業（助け合い、協力し合う相互扶助）によって、成り立つのだ」といえます。yuiという制度（フレームワーク）によって、お互いを結び付けることができ、より大きな力を得ることができるのです。

　後編では、実際にyuiを使用したFlexアプリケーションの作成をしてみましょう。次回もお楽しみに。

■ ＠IT関連記事

WebとUIをつなぐトリックスター Webサイト制作の要となるエンジニアとデザイナのチームワーク。異なる者同士をつなぐトリックスターからヒントを探る 「デザインハック」コーナー

業務用RIAの本命!? Flex＋Java開発入門 本連載では、サーバサイドとして「Java」、リッチなクライアントサイドとしてJavaと相性の良い「Flex」を用いたRIA開発の基礎を解説します。EclipseベースのIDEである「Flex Builder」を使って、「Tomcat」で動くeラーニングのRIAが完成するまでお届けする予定です

Flashの基礎を無料で習得！ ActionScript入門 ActionScriptを知っていますか？ Flash技術の要となる言語で無料で簡単にFlashアプリケーションを作れます。そのActionScriptについて初心者のために一から丁寧に解説していきます

作って学ぶAIRウィジェットの基礎→応用 最近よく聞くAdobe AIRって何だっけ？ ウィジェットを簡単に作れるらしいけど…… と曖昧な知識のあなたに贈る超入門連載。楽しいサンプルを作って基礎から応用まで学ぼう

Flex／AIRの開発環境 Flex Builder 3を使ってみよう 現場で使えるFlex実践テクニック（特別編）　今秋に機能確定版がリリース予定のFlex Builder 3。EclipseベースのFlex／AIR開発環境のインストール方法と新機能を紹介 「リッチクライアント ＆ 帳票」フ ォーラム 2007/9/6

プロフィール：渡邊 佳一（わたなべ けいいち）） クラスメソッド株式会社 情報システム部門 ITアーキテクト Adobe Certified Professional Flex 2.0 Developer認定技術者 Flex技術コンサルティングやFlex技術トレーニングを主な業務としている元Javaエンジニア。名前だけだが、Akabanaプロジェクトのコミッターとしての顔を持つ。たまにFxUGなどのコミュニティに顔を出したり出さなかったり。とある事情で会社のHPには載っていない。

1-2-3

INDEX
特集：デザイナとプログラマを“結”ぶオープンソース（前編）　 Flex/AIR開発でデザイナとの協業を楽にする「yui」
	Page1 RIA開発におけるデザイナとプログラマの協業問題 コラム　「Flexのフレームワークといえば“Cairngorm”ってなかったっけ？」 「yui-frameworks」って、どんなもの？ コラム　「Flexであまり考慮されない“テストのしやすさ”」
	Page2 コラム　「yuiを理解するのに必要な3つの設計思想、CoC・DI・POJOとは？」 分業を楽にするyuiの“5”大機能
	Page3 yui（結）でデザイナとプログラマを“結”び付けよう

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