AzureとAdobe AIR for モバイル(iOS/Andoroidアプリ)の連携サンプル


Adobe AIRを用いると、比較的簡単にクロスプラットフォーム(iOS/Android等)のアプリケーションを作成する事が可能です。今回は、Adobe Flash Builderを用いて、Azureと連携する簡単なサンプルアプリを作成してみます。

興味をお持ちの方は、90日間利用可能な体験版がこちらにありますので試してみてください。
Flash Builder 4.5 Premium Edition無償体験版ダウンロード

今回は、AIRとAzureの連携に、SOAP WebServiceを利用してみます。初めに、VisualStudio2010でサーバ側のサービスを実装します。

Windows Azure プロジェクトを選びます。

image

ASP.NET Webロールを追加します。

image

テンプレートから、ASP.NET Webが作成されました。

image

新しい項目を追加します。

image

Webサービスを選択し、適当な名前を付けます。(今回は、AirWebService.asmxとしました)

image

HelloWorld Webメソッドが実装された、SOAP WebServiceが作成されました。

image

とりあえず、動かしてみます。

image

動作が確認できました。

image

image

image

一応、Windows Azure Compute Emulatorで動く事を確認しておきます。
(ブラウザに、http://127.0.0.1:81/AirWebService.asmxを入力)

image

image

HelloWorld Webメソッドだけでは面白くありませんので、Listを返すWebメソッドを実装しておきます。

   1: using System;

   2: using System.Collections.Generic;

   3: using System.Linq;

   4: using System.Web;

   5: using System.Web.Services;

   6:  

   7: namespace WebRole1

   8: {

   9:     /// <summary>

  10:     /// AirWebService の概要の説明です

  11:     /// </summary>

  12:     [WebService(Namespace = "http://tempuri.org/")]

  13:     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

  14:     [System.ComponentModel.ToolboxItem(false)]

  15:     // この Web サービスを、スクリプトから ASP.NET AJAX を使用して呼び出せるようにするには、次の行のコメントを解除します。 

  16:     // [System.Web.Script.Services.ScriptService]

  17:     public class AirWebService : System.Web.Services.WebService

  18:     {

  19:  

  20:         [WebMethod]

  21:         public string HelloWorld()

  22:         {

  23:             return "Hello World";

  24:         }

  25:  

  26:         /// <summary>

  27:         /// 単純なリストを返します

  28:         /// </summary>

  29:         [WebMethod]

  30:         public List<SampleData> SampleList()

  31:         {

  32:             var SampleList = new List<SampleData>();

  33:  

  34:             for (var idx = 0; idx < 10; idx++)

  35:             {

  36:                 var sampledata = new SampleData();

  37:                 sampledata.Id = idx;

  38:                 sampledata.Value = "これはサンプルデータ" + idx.ToString();

  39:  

  40:                 SampleList.Add(sampledata);

  41:             }

  42:             return SampleList.ToList();

  43:         }

  44:     }

  45:     /// <summary>

  46:     /// サンプルデータのクラスです。

  47:     /// </summary>

  48:     [Serializable]

  49:     public class SampleData

  50:     {

  51:         public int Id;

  52:         public string Value;

  53:     }

  54: }

 

とりあえずこれで、Azure(サーバサイド)の実装は完了とします。続いて、このWebサービスを利用する、AIRアプリの実装を行います。

Flash Builderを起動して、Flexモバイルプロジェクトを作成します。

image

プロジェクトの場所で、プロジェクト名を入力して次へ

image

モバイル設定は、デフォルトのまま次へ

image

サーバ設定は、アプリケーションサーバの種類を、なし/その他として終了します。

image

すると、空のViewが1つ自動生成されたパッケージが生成されます。

image

image

準備が整いましたので、連携をしていきます。まず、先ほど作成した、Azure SOAP WebServiceを、VisualStudio2010からデバッグ実行します。

image

この状態で、Flash BuilderからWebサービスに接続…を実行します。

image

分析する WSDL URIの指定ダイアログが表示されるので、先ほどデバッグ実行したWebサービスのURIを入力します。(これは、上記画面の「サービスの説明」リンクのとなります)

また、サービスの詳細を適宜入力し次へ。(今回はデフォルトで設定された値)

image

Webサービスが解析され、コード生成を設定ダイアログが表示されます。
ここに、先ほど実装したサービスとメソッドの一覧が表示されるので、読み込む操作を選択で必要なメソッドを選択します。今回は全て選択した状態で終了します。

image

すると、services.airwebserviceフォルダとvalueObjectsフォルダが作成され、そのフォルダー内にWebサービスアクセス用のプロキシ―コードが自動生成されますので、これを利用して実装を進めていきます。

image

先ほど自動生成された、MainHomeView.mxml に、”Hello World”とリストを表示するコードを実装します。デザインビューに切り替え、コンポーネントから、LabelとListをDrog&Dropして配置します。

image

とりあえず、この状態でデバッグ実行をしてみたいと思います。

image

初回実行時は、デバッグ構成で起動方法を選択してくださいとエラーになっていると思いますので、起動方法の、デスクトップ上を選択します。シミュレートするデバイスを選択で、今回はiPhone4を選択してみました。

image

そして、デバッグを行うと、iPhone4のシミュレータが起動します。
ターゲットプラットフォームとデバイスの選択で、様々なデバイス上でのシミュレートを行えるようになっています。

image

ラベル上で、コンテキストメニューを表示させ、データにバインドを選択します。

image

データにバインドダイアログで、HellowWorld操作を選択します。

image

リストに対しても同様に操作し、SampleList操作を選択し、ラベルフィールドでValueを選択します。

image

MainHomeView.mxml のソースを見ると、バインド用のコードが自動生成されている事が確認できます。

image

   1: <?xml version="1.0" encoding="utf-8"?>

   2: <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"

   3:         xmlns:s="library://ns.adobe.com/flex/spark"

   4:         xmlns:airwebservice="services.airwebservice.*"

   5:         title="HomeView">

   6:     <fx:Script>

   7:         <![CDATA[

   8:             import mx.events.FlexEvent;

   9:             

  10:             protected function label2_creationCompleteHandler(event:FlexEvent):void

  11:             {

  12:                 HelloWorldResult.token = airWebService.HelloWorld();

  13:             }

  14:             

  15:             

  16:             protected function list_creationCompleteHandler(event:FlexEvent):void

  17:             {

  18:                 SampleListResult.token = airWebService.SampleList();

  19:             }

  20:             

  21:         ]]>

  22:     </fx:Script>

  23:     <fx:Declarations>

  24:         <s:CallResponder id="HelloWorldResult"/>

  25:         <airwebservice:AirWebService id="airWebService"/>

  26:         <s:CallResponder id="SampleListResult"/>

  27:         <!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 -->

  28:     </fx:Declarations>

  29:     <s:Label id="label2" x="10" y="21" width="100%"

  30:              creationComplete="label2_creationCompleteHandler(event)" text="{HelloWorldResult.lastResult}"/>

  31:     <s:List id="list" x="11" y="78" creationComplete="list_creationCompleteHandler(event)"

  32:             labelField="Value"  width="100%" height="100%">

  33:         <s:AsyncListView list="{SampleListResult.lastResult}"/>

  34:     </s:List>

  35: </s:View>

 

完成したサンプルコードで、シミュレータでデバッグ実行しました。左が縦の状態、右は横にした状態です。
スタイル等は全く指定していない為、殺風景なアプリとなっていますが、簡単にサービス連携による、モバイル用アプリが作成できることがお分かり頂けたかと思います。

image image

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中