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を使うための環境づくりをします。そして、デザイナが画面(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)から各ライブラリプロジェクトをダウンロードしてください。ライブラリプロジェクトをダウンロードした場合の設定の仕方は、以下になります。
- プロジェクトを右クリックして表示された[メニュー]から、[Properties]を選択
- [Properties]を選択して表示されたダイアログから、[Flexビルドパス]→[ライブラリパス]を選択
![図3 [Flex ビルドパス]設定画面](04.gif)
図3 [Flex ビルドパス]設定画面
- 右側にある[プロジェクトの追加]を選択して、ライブラリプロジェクトを参照。これをライブラリプロジェクト分繰り返す
![図4 [ライブラリプロジェクトの追加]画面](05.gif)
図4 [ライブラリプロジェクトの追加]画面
- プロジェクトの追加が終わったら、[OK]を押下して完了

図5 Flex ビルドパス設定完了
以上が、ライブラリプロジェクトをダウンロードした場合の設定方法です。では、これでyuiのライブラリを利用できるので、ここから実際にサンプルを実装していきたいと思います。
yuiを利用するまえに
まずyuiを利用するためには、YuiFrameworkMixinクラスをApplicationのパスに通します。main.mxmlを以下のように書き換えます。YuiFrameworkMixinのconventionsプロパティに「yui.example.datavisualization」と定義しました。yuiでは、パッケージ単位で機能の適用先を記述するため、適用させたいパッケージをここで指定します。
| main.mxml | |
|
■ conventionsの複数指定
今回は1つのパッケージ(機能)だけが対象なので、conventionsの複数指定をしていませんが、もし複数のパッケージに対して適用する場合は以下のように記述します。
| conventionsの複数定義例 | |
|
■ エラーが発生!
この時点でサンプルをビルドすると、以下のようなエラーが発生すると思います。これは、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の更新 人がお互い助け合うように |
||
デザイナとプログラマを“結”ぶオープンソース バックナンバー
- 第1回 Flex/AIR開発でデザイナとの協業を楽にする「yui」
- 最終回 yuiを使ったFlexアプリを作って、便利さを体感しよう
ホワイトペーパー(TechTargetジャパン)
- 画像を美しく魅せる効果を加えるjQueryプラグイン3選 (2010/3/17)
2つ重ねて比較するBefore/After、部分ごとに切り替えるpanelGallery、ズーム/カーテンなどができるcycle - 現場の無駄な流血を止めるための「プロトタイプ」とは (2010/3/12)
サイトやWebアプリ/RIAの設計やデザインを効率良く進めるには、プロジェクト関係者の想定を一致させていくことが大事だが… - Flashを閃光のごとく高速化するための基礎知識 (2010/3/9)
Flash高速化のための基礎知識や実践的テクニックを紹介する連載。初回は“処理負荷”を調べる具体的な方法を解説します - Windows 7でどんだけ“おばか”なアプリが作れるの? (2010/3/4)
おばかの発想の源やアプリの作り方などについて、おばかアプリ選手権の歴戦の受賞者や、マイクロソフトの代表者に話を伺った。アイデアのご参考に
|
|
スキルアップ/キャリアアップ(JOB@IT)
スポンサーからのお知らせ
| 「いつかは壊れるサーバ」そんな故障に 迅速で安価に手軽に対応する方法とは? New! |
| 「特権ユーザー」の事件を防げ! 万能権限を持つユーザーの管理方法とは? New! |
| 仮想環境の構築とデータ保護の特効薬?! 実績と信頼性の高いパッケージで安心運用 |
| 仮想環境のバックアップもこれまでどおり 「まるごと取ってまるごと戻す」簡単運用 |
| おばかアプリ選手権、第4弾開催中!! ムダにカッコよくてくだらない作品求ム! |
| 社内ファイルサーバを“クラウド”に統合 VPN直結「クラウド型ストレージ」を紹介 |
| その数、なんと400台以上! グループ内 サーバの「統合管理」によるメリットは? |
| 美人!? まあまあ? 気になる いやし系!! PV急増で「美人時計」がとった手段とは? |
| 進化を続ける富士通ストレージETERNUS DX 製品開発者の自信を裏付けるものとは何か |
| 運用管理の課題を“2つの観点”から分析 ユーザー満足度の高い「仮想環境」とは? |
お勧め求人情報

**先週の人気講座ランキング**
〜CCNA編〜
| ◆ | TomcatやJBossなどAPサーバ環境に関する 情報を集約! “業務”用APサーバ大百科 New! |
| ◆ | 一気に解説! 最新のクラスタストレージ 「RAIDを超えたストレージ基準」……など New! |
| ◆ | クラウド的ユーザー体験の変化は脅威か? 仮想化技術を使いこなす運用管理術を紹介 New! |

| ◆ | 上司や部下、部署内メンバーとの情報共有 を“ガラッ”と変えるコラボツールとは? New! |
| ◆ | おばかアプリ選手権、第4弾開催中!! ムダにカッコよくてくだらない作品求ム! |
| ◆ | 社内ファイルサーバを“クラウド”に統合 VPN直結「クラウド型ストレージ」を紹介 |

| ◆ | Twitterのアカウントはなぜ突破された? メールによる新手の攻撃手法とその対策 |
| ◆ | もう仮想化のお試しフェイズは終わりだ! Hyper-V 2.0が基幹システムも仮想化 |
| ◆ | 美人!? まあまあ? 気になる いやし系!! PV急増で「美人時計」がとった手段とは? |

| ◆ | クライアント企業から求められる人材 ⇒IT技術と経営戦略を併せ持つ「戦略家」 |
| ◆ | .NET編集長が実践する「技術情報検索術」 サンプル・コードを簡単に探す“技”は? |
| ◆ | 業務効率と情報セキュリティ対策を両立! 手間なく確実に機密情報を守る方法とは? |

| ◆ | 進化を続ける富士通ストレージETERNUS DX 製品開発者の自信を裏付けるものとは何か |
| ◆ | 運用管理の課題を“2つの観点”から分析 ユーザー満足度の高い「仮想環境」とは? |

| ◆ | 【CTC事例】約30の基幹システムを統合! 膨大なバッジジョブを制御した方法は? |
| ◆ | 仮想化すればコストは削減できるか? 仮想化に必要な「3つの視点」を解説する |
| ◆ | その数、なんと400台以上! グループ内 サーバの「統合管理」によるメリットは? |









