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のアーキテクチャ
図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 サンプルアプリケーションのパッケージ構成
図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 [Flex ビルドパス]設定画面

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

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

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

    図5 Flex ビルドパス設定完了
    図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 ビルドエラー
図6 ビルドエラー

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

  1-2-3-4

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




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

注目のテーマ

HTML5+UX 記事ランキング

本日 月間