yuiとmixi Graph APIを使うための基礎知識
株式会社プラグラム 田中豪
2011/3/28
mixiボイスのクライアントをAdobe AIRで作ってみよう
本連載ではAdobe AIR／Flexを使った開発経験はあるが、フレームワークを使用したことがない方のために「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を使った開発の手順を本格解説 |
||
 |
リッチクライアント＆帳票 全記事一覧へ |
- GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 （2017/7/12）
資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する - GET／POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 （2017/7/10）
HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】 - PHPのfor文＆ループ脱出のbreak/スキップのcontinue【更新】 （2017/6/26）
素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】 - Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート （2017/6/12）
Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
 |
|
|
|
|
