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

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


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


- PR -

Adobe AIRプロジェクトの作成

 Flash Builder4のセットアップが完了したら、次はプロジェクトFlexプロジェクトを作成します。Flash Builderの[File]→[New]から[Flex Project]を選択します。

 プロジェクト名を入力し[Application Type]に[Desktop]を選択します。Flex SDKのバージョンが現時点で最新のFlex 4.1になっていることを確認します。サーバ側は今回、mixi Graph APIを使用しますので、[Application server type]は[None/Other]を選択します。

 [Finish]を選択してプロジェクトを作成します。


yui-frameworksの設定

 プロジェクトの作成が完了したら次はyui-framworksを設定します。ダウンロードページからyui-frameworksをダウンロードしFlex/AIRプロジェクトを作成してみましょう。2011年2月28日の原稿執筆時の最新バージョンはyui-frameworks-1.0.2です。

 Flex4の項目から「Flex+AIR+DS」の「リリース版」もしくは「デバッグ版」をダウンロードしてください。

 ダウンロードしたファイルを展開し、その中のフォルダから「yui-frameworks-fx4-airds-fp10-1.0.2.swc」があることを確認します。作成したFlexプロジェクトを右クリックし[Properties]→[Flex Build Path]から右側のペインの[Library Path]を選択して[Add SWC...]をクリックして先ほどのswcファイルを追加します。

 追加したyui-frameworksの詳細を開き[Link Type]を選択し、[Edit]ボタンをクリックしてください。[Link Type]を「Merged into code」から「Runtime shared library(RSL)」、[Verification]は「None」に変更します。

※3月31日補足
yui-frameworks-fx4-airds-fp10-1.0.2.swcのリンクタイプ([Link Type])を変更しようとすると、[ランタイム共有ライブラリの警告]が出る場合がありますが、[更新しない]を選択してください。[更新する]を選択した場合、変更しなくてもよいswcのリンクタイプも「RSL」になってしまうため、正常に動作しない場合があります

 同様の作業をFlex 4.1の以下のSWCファイルにも行います(Mac OS Xの場合)。

  • aircore.swc
  • airframework.swc
  • airspark.swc
※3月31日補足
この作業だけではWindows環境では正常に動作しません。以下のswcファイルに対しても追加で同様の設定をしてください。
  • textLayout.swc
  • osmf.swc
  • framework.swc
  • spark.swc
  • rpc.swc
  • sparkskins.swc

 これでFlex 4とyui-frameworksの設定は完了です。

yuiでもできます「HelloWorld!」

 早速、yui-frameworksを使った簡単なHelloWorldアプリケーションを作成してみましょう。

命名規約の設定

 まずは、yui-frameworksの命名規約の基になる「conventions.properties」ファイルを以下の内容で、「src」フォルダ直下に作成します。

  conventions.properties
package=helloworld

View、Helper、Actionを作成

 続いて、前ページで紹介したyui-frameworks内部アーキテクチャの記事にもあるようにView、Helper、Actionをそれぞれ作成していきます。

  helloworld.view.HelloView
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">

<s:layout>
<s:VerticalLayout/>
</s:layout>

<s:Label id="lblHello" width="150" height="50"/>
<s:Button id="btnHello" label="Say Hello."/>

</s:Group>

  helloworld.view.HelloHelper
package helloworld.helper
{
    import helloworld.view.HelloView;
 
    public class HelloHelper
    {
        public var view:HelloView;
        
        public function showHello():void {
            view.lblHello.text = "Hello World.";
        }
    }
}

  helloworld.view.HelloAction
package helloworld.action
{
    import helloworld.helper.HelloHelper;
    
    import org.seasar.akabana.yui.framework.ns.handler;
 
    public class HelloAction
    {
        public var helper:HelloHelper;
        
        handler function btnHello_click():void {
            helper.showHello();
        } 
    }
}

メインアプリケーションを設定

 View-Helper-Actionを作成したら、最後にメインアプリケーションをWindowedApplicationからYuiWindowedApplicationに変更してrootViewClassに先ほど作成したViewを設定します。

  メインアプリケーション:HelloWorld.mxml
<?xml version="1.0" encoding="utf-8"?>
<yui:YuiWindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:yui="http://yui.akabana.seasar.org/1.0"
rootViewClass="helloworld.view.HelloView"
width="200" height="150">

<fx:Script source="dependencies.as" />

</yui:YuiWindowedApplication>

参照を持たせるActionScript

 また参照を持たせてコンパイル対象にするために「dependencies.as」ファイルを作成し、そこに先ほど作成したViewやHelper、Actionを追加します。

  dependencies.as
import helloworld.action.HelloAction;
import helloworld.helper.HelloHelper;
import helloworld.view.HelloView;
 
HelloView;
HelloHelper;
HelloAction;

初めてのyuiアプリを実行

 プロジェクト名を選択しツールバーの[Run]→[Run プロジェクト名]で実行することでAIRアプリケーションを起動できます。

 以上、簡単なサンプルでしたが、このようにyui-frameworksではデザイン(MXML)とロジック(ActionScript)が分離でき、シンプルに記述できることが分かってもらえたと思います。

 次ページでは、mixi Graph APIを使用したmixiボイスのクライアントアプリを作るための前段階としてAPIの説明と認証認可手順を紹介します。

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 記事ランキング

本日 月間
ソリューションFLASH