yuiを使ったFlexアプリを作って、
便利さを体感しよう

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

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

yuiの便利さは体感しないと分からない！

　前編の「Flex/AIR開発でデザイナとの協業を楽にする『yui』」では、デザイナとプログラマの協業について説明し、「yui-frameworks」（以下、yui）とは何か？ の概要や“7”つのライブラリ、“3”つの思想、“5”大機能についてお話ししました。

　今回は実際にyuiを使ってFlexアプリケーションを作成していきます。まず完成イメージからご覧ください。このFlexアプリケーションの簡単な説明をしておきます。このFlexアプリケーションでは、表示しているデータに対して、Chartによるデータ編集や、DataGridによるデータ編集の機能を提供しています。そして、そのデータを編集した画面の印刷機能を備えています。図1の画像をクリックすると、別ウィンドウで実際にFlexアプリケーションが動かせます（Flash動画を見るには、Flash Playerが必要になります。Flash Playerのダウンロードページはこちら）。

図1　サンプルアプリケーション完成図

　後編では、はじめにyuiを使うための環境づくりをします。そして、デザイナが画面（View）を作成し、プログラマがAction・Helper・Logicを作成します。その過程で前回説明したyuiの“5”大機能のうち、「Naming Convention」「Auto Event Handler」「Customizer」「Logging API」について具体例を解説していきます。

yuiを使ってデザイナと協業するための環境作り

　筆者がyuiのサンプルを作成した環境は、以下になります。

• Windows Vista
• Eclipse 3.3.2
• FlexBuilder 3 Professional（Plugin版）
• Flex SDK 3.2（注）
• Flash Player 9.0.124
• yui-frameworks
• Safari 3.1.2

注：今後のFlex 4などの展開に備えて、Flex 3.2で開発をすることを推奨しています（参考）

　このFlexアプリケーションを作成するのに必要なファイルが入ったFlexプロジェクトを用意してあるので、ここからダウンロードしてください。

■ サンプルのパッケージ構成

　このプロジェクトを利用して、実際にyuiではどのようにFlexアプリケーションを作成するのか説明します。このFlexアプリケーションのパッケージ構成は以下です。

図2　サンプルアプリケーションのパッケージ構成

　このFlexアプリケーションでは、「src」というフォルダがソースパスのルートです。前編で説明したように、yuiではNaming Conventionの機能を利用するためパッケージから規則に合わせます。

　「example」というパッケージの下にそれぞれの機能がぶら下がるイメージです。これから「datavisualization」という機能を実装しますので、この下に各種レイヤオブジェクトのパッケージとファイルを作成していきます。「datavisualization」の下には「common」フォルダもありますが、ここには共通で使用するようなものを入れます。すでに、commonの中にいくつかクラスが入っていますが、カスタムコンポーネントなどの機能を実現するクラスです。直接yuiの機能には関係しないので、詳細は割愛します。

　また、「libs」フォルダの中には、「yui-frameworks.swc」が入っています。このサンプルでは、すでにyui-frameworks.swcにライブラリパスが通っています。そのため、そのまま実装を開始できる状態です。

■ ライブラリプロジェクトをダウンロードした場合

　開発用にソースが見たいという方は、akabanaのSubversion（以下、SVN）から各ライブラリプロジェクトをダウンロードしてください。ライブラリプロジェクトをダウンロードした場合の設定の仕方は、以下になります。

1. プロジェクトを右クリックして表示された［メニュー］から、［Properties］を選択
   
2. ［Properties］を選択して表示されたダイアログから、［Flexビルドパス］→［ライブラリパス］を選択
   
   

   図3　［Flex ビルドパス］設定画面

   
   
3. 右側にある［プロジェクトの追加］を選択して、ライブラリプロジェクトを参照。これをライブラリプロジェクト分繰り返す
   
   

   図4　［ライブラリプロジェクトの追加］画面

   
   
4. プロジェクトの追加が終わったら、［OK］を押下して完了
   
   

   図5　Flex ビルドパス設定完了

　以上が、ライブラリプロジェクトをダウンロードした場合の設定方法です。では、これでyuiのライブラリを利用できるので、ここから実際にサンプルを実装していきたいと思います。

yuiを利用するまえに

　まずyuiを利用するためには、YuiFrameworkMixinクラスをApplicationのパスに通します。main.mxmlを以下のように書き換えます。YuiFrameworkMixinのconventionsプロパティに「yui.example.datavisualization」と定義しました。yuiでは、パッケージ単位で機能の適用先を記述するため、適用させたいパッケージをここで指定します。

main.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"   xmlns:akabana="http://akabana.seasar.org/yui/mxml"   layout="vertical">   <akabana:YuiFrameworkMixin >     <akabana:conventions>       yui.example.datavisualization     </akabana:conventions>   </akabana:YuiFrameworkMixin> </mx:Application>

■ conventionsの複数指定

　今回は1つのパッケージ（機能）だけが対象なので、conventionsの複数指定をしていませんが、もし複数のパッケージに対して適用する場合は以下のように記述します。

conventionsの複数定義例

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"   xmlns:akabana="http://akabana.seasar.org/yui/mxml"   layout="vertical">   <akabana:YuiFrameworkMixin >     <akabana:conventions>       [ yui.example.login, yui.example.datavisualization ]     </akabana:conventions>   </akabana:YuiFrameworkMixin> </mx:Application>

■ エラーが発生！

　この時点でサンプルをビルドすると、以下のようなエラーが発生すると思います。これは、yui-frameworksの内部でLogging APIを利用しているために起きるエラーです。

図6　ビルドエラー

　これを直すにはどうすればいいのでしょうか。次ページでは、引き続き環境構築を行ってエラーを消し、ロジックの実装などの詳細について解説していきます。

1-2-3-4

INDEX
特集：デザイナとプログラマを“結”ぶオープンソース（後編）　 yuiを使ったFlexアプリを作って、便利さを体感しよう
	Page1 yuiの便利さは体感しないと分からない！ yuiを使ってデザイナと協業するための環境作り yuiを利用するまえに
	Page2 まずは、デザイナが画面を作成 命名規則を利用したAction・Helper・Logicの作成
	Page3 自動イベントハンドリング機能の利用 ロギングAPIも使ってみよう
	Page4 ActionクラスからLogicを利用する HelperでUIの更新 人がお互い助け合うように

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