yui-frameworksで作るmixiボイスAIRアプリ
連載インデックスへ
yui-frameworksで作るmixiボイスAIRアプリ(1)

yuiとmixi Graph APIを使うための基礎知識


株式会社プラグラム 田中豪
2011/3/28


mixiボイスのクライアントをAdobe AIRで作ってみよう

 本連載ではAdobe AIRFlexを使った開発経験はあるが、フレームワークを使用したことがない方のために「yui-frameworks」とは何かを説明し、「mixi Graph API」を利用したサンプルAdobe AIRアプリ「mixiボイスクライアント」を作成して、ソースコードを読みながらyui-frameworksの有用性を解説していきます。

 初回は、yui-frameworksの概要とセットアップ、mixi Graph APIについて説明します

 Adobe AIRを使用することでWindows/MacなどのOSを気にすることなくデスクトップアプリケーションを作成できます。またソースコードは、ほぼそのままFlexのWebアプリケーションを作るときにも流用できます。さらに将来的には、今回のソースコードが、すべてそのまま使えるとは限りませんが、「AIR for Android」機能を使うことでAndroidアプリも作成できると思います。

 以下、今回作成しようとしているアプリの完成イメージです。


なぜ、Adobe AIR/Flexを使うのか?

 最近は、リッチクライアントRIAというキーワードも定着し、あらゆるアプリケーションのユーザーインターフェイスは直感的に操作でき、データの表示も数字だけでなくグラフや図で分かりやすく表示することが求められてきています。

 リッチクライアント/RIAというキーワードが注目された当初、Flashという技術はそのようなリッチクライアントアプリケーションを開発するためのツールの中で代表的なものでしたが、UIユーザーインターフェイス)というよりアニメーションを用いたりした、いわゆる「どう魅せるか」といったことに注力されがちでした。

 そんな中、Googleマップに代表されるJavaScriptを使った「Ajax」という技法が流行すると、瞬く間に「リッチクライアント」というキーワードの中でもUIという部分がより注目されるようになりました。

 現在では、iPhoneやAndroidなどといったスマートフォンの登場によりUIについて考えることは開発者にとっても当たり前のことになりましたが、JavaScriptでの開発やFlash/Flexでの開発でも「使いやすい」アプリケーションを作ろうとすると、細かいイベントや動きなどを作り込んでいく必要があるため、どうしても「読みづらいソースコード」になってしまいます。

 本連載では全3回を通して、サンプルを読みながら「yui-frameworks」というFlex用フレームワークを使用することで「読みやすい、作りやすい」アプリケーション開発ができることをお伝えします。

デザインとロジックを疎結合にする「yui-frameworks」

 yui-framewoksとは、有川榮一氏が開発しているオープンソースのFlex用フレームワークです。yui-frameworksの特徴は「デザインとロジックの分離」にあります。デザインとロジックを疎結合にすることにより、デザイナの作業とデベロッパの作業も、それぞれ分離できます。

 さらに、コード量が多くなりがちなロジックについては役割ごとに細かく用意されたアーキテクチャ(ActionやHelper、Behavior)を使用できます。これらのデザイン/ロジックの分離やyui-frameworksで決められたアーキテクチャを使用することで、デザイナはデザインの作業に集中でき、デベロッパも自分が追加/修正したい処理がどこに書いてあるかが分かる仕組みになっています。

 yui-frameworksについての詳しい記事は以下のページにあります。今回は、内部アーキテクチャについて詳しく説明しないので、興味がある方は下記のリンク先を参考にしてみてください。

yuiでAIRアプリを作る環境をセットアップ

 それでは、早速セットアップから始めましょう。本連載は、すでにAdobe AIR/Flexアプリケーションの開発経験がある方に向けた記事です。アプリケーションの開発にFlash Builder 4ダウンロードして使用します。

 Flash Builder 4の環境のセットアップについては以下の記事をご参照ください(今回は著者がFlash Builder 4の英語版を使用しているため、Eclipseのメニューの説明は適宜、日本語に置き換えてください)。

Flash Builder 4でAdobe AIRアプリを作ってみた
業務用Flashアプリ開発ツールの新機能を試す 新機能の目玉「データ中心型開発」とは何なのか? 簡単なRSSリーダーのサンプルを作りながら、新機能をイロイロ紹介
リッチクライアント & 帳票」フォーラム 2010/3/24

 次ページでは、Flex 4とyui-frameworksの設定の仕方、そして簡単なAIRアプリの作り方を説明します。

  1-2-3

 INDEX
yuiとmixi Graph APIを使うための基礎知識
yui-frameworksで作るmixiボイスAIRアプリ(1)
Page1
mixiボイスのクライアントをAdobe AIRで作ってみよう
なぜ、Adobe AIR/Flexを使うのか?
デザインとロジックを疎結合にする「yui-frameworks」
yuiでAIRアプリを作る環境をセットアップ
  Page2
yuiでもできます「HelloWorld!」
  Page3
mixiの機能を外部で使える「mixi Graph API」とは
mixi Graph APIの認証認可手順
次回は、yuiを使った開発の手順を本格解説


リッチクライアント&帳票 全記事一覧へ



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

注目のテーマ

HTML5+UX 記事ランキング

本日 月間