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

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

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

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

- PR -

　前編の「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の更新
人がお互い助け合うように

デザイナとプログラマを“結”ぶオープンソース バックナンバー


TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事
  • NFCやLTE対応予定のiPhoneと、先行するAndroid （2012/2/9）
    iPhoneとAndroid、そしてWindows Phoneという3つのOSの今後を占う。それぞれの通信規格とコンセプトは？
  • 家電のUIになるブラウザ （2012/2/3）
    未来の家電はインターネットに接続でき、ブラウザが内蔵されてくる。家電にブラウザが載ったらどうなるか？ 未来のホームネットワークを想像しよう
  • 「汎用のUI技術」として広がるHTML5 （2012/2/2）
    すさまじい勢いで成長しているHTML5を中心としたオープンなWebプラットフォーム。HTML5やAPI、Webブラウザのアップデート情報をお伝えする
  • ビヨンド・クールジャパン!? （2012/1/27）
    コンテンツという文化力と、ものづくりという技術力を掛け合わせる。両方を国内に持ち合わせている国は多くない。チャンスなのだ

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

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH