作成日

11 May 2011

※本記事は正式版の情報に基づいて更新されています

はじめに

Android、iOS*、Blackberry Tablet OS* に対応したFlex 4.5 SDK と Flash Builder 4.5 を使って、効率良くモバイルアプリケーションを開発する方法をチュートリアル方式で紹介します。

* 2011年下半期にリリース予定の Flash Builder 4.5 無償アップデーターで対応

今回はターゲットOSをAndroidアプリケーションにしていますが、基本的には他のモバイルOS向けアプリケーションも同様の手順で開発ができますし、Flash Builder 4.5 で作成した一つのFlexモバイルプロジェクトから複数のモバイルOS向けアプリケーション書き出しも可能です。

サンプルAndroidアプリケーションについて

このチュートリアルでは、一般公開されている価格.com Webサービス(REST)を使用して、アイテムの最安値検索を行う簡単なAndroidアプリケーションを作成していきます。欲しいアイテムの名前やキーワードを入力すると、キーワードに合致したアイテム情報がリスト表示されるという簡単なアプリケーションです。

手順

前回はホーム画面のレイアウトを作成しました。今回はアイテムの検索結果を表示するリスト画面を作成していきます。いよいよ価格.com Webサービスとも連携させますので、価格.comのAPIアクセスキーを取得していない場合は、利用申込を済ませて取得完了しておいてください。

価格.com Webサービスの設定

まず、リスト画面を作成する前に、Webサービスの設定をしておきましょう。Flash Builderには、Ver 4.0から「データとサービス」という新しいパネルが追加されています。デフォルトでは、Flash Builderのエディット領域の下に配置されています。

このパネルを使って、サーバ連携に関する面倒なコードやクラスをFlash Builderに自動生成させることができます。この開発手法をデータ中心型開発(Data Centric Development : DCD)と表現しています。DCDについての解説は、以下の記事を参考にしてください。

では、このパネルにある「データとサービスに接続…」というリンクをクリックしてみましょう。

サーバ側のサービスタイプを選択するダイアログが表示されました。今回はRESTのWebサービスを利用しますので、HTTPを選択し、次へ進みます。

このダイアログでは、接続したいHTTPサービスのリクエスト情報を設定します。つまり、URLとパラメーターです。

価格.com Webサービスでアイテムを検索するためのURLとパラメータ情報は、商品検索APIのページに掲載されていますので、自分の設定したいパラメーターを決定します。このサンプルアプリケーションでは、キーワードを入力すると最大で20件の検索結果が表示されるようにしたいと思います。従って、使用するパラメーターは以下の3つになります。

  • ApiKey(必須)
  • Keyword
  • HitNum

指定のURLとこれらのパラメーターを使って「(液晶テレビの)BRAVIAというキーワードの検索結果を20件取得する」というリクエストをする場合、以下のようになります。

http://api.kakaku.com/WebAPI/ItemSearch/Ver1.0/ItemSearch.aspx?apiKey=XXX&keyword=bravia&hitNum=20

XXXの部分は自分で取得したAPIアクセスキーに置き換えて下さい。これをブラウザで実行すると、BRAVIAに関する情報が20件ほど表示され ると思います。表示されない場合は、APIアクセスキーやその他のパラメーターを再度確認してください。問題なく20件の情報が表示されたら、そのURL をコピーします。

Flash BuilderのHTTPサービスを設定するダイアログに戻ります。

操作の設定

「操作:」にある「URL」にある「Fill_URL_Here」に、先ほどコピーしたURLを上書きペーストします。さらに、操作名が分かり易いように「Operation1」となっている操作の名前を「search」に変更しましょう。

パラメーターの設定

「パラメーター:」のエリアは、先ほどペーストしたGET URLから自動的にパラメーター項目が割り出されて追加されます。パラメーターを追加/削除したい場合は、追加ボタン/削除ボタンを使って設定してください。

サービスの詳細の設定

サービスの詳細で、サービス名を「KakakuCom」と入力します。
※サービスパッケージとデータ型パッケージは自動入力されます。

以上の設定をすると、以下のようになります。

終了ボタンを押してダイアログを閉じます。データとサービスのパネルは以下のようになります。

続いて、このパネルのsearchの部分を右クリックして、戻り値の型を設定を選択します。

「サンプルデータから戻り値の型を自動検出」のチェックを確認して、次へ。

「パラメーター値を入力して操作を呼び出す」のチェックを確認。パラメーターのapiKeyに自分で取得したAPIアクセスキーが入力されているかを確認。(下図はダミーのAPIアクセスキー値ですので注意。) 問題なければ次へ。

ここで、Flash Builderは設定された情報を元に、実際にサービスにRequestを送信します。そして、戻ってきた値(ここではXML)を解析して、以下のようにツリー構造で表示してくれます。

Mac OS X 10.6.6の環境

Mac OS X 10.6.6の環境では、「パラメーター値を入力して操作を呼び出す」の手順を実施すると「応答は有効な XML または JSON 文字列ではありません」というエラーが発生する場合があります。その場合は、「サンプル XML/JSON 応答を入力」をチェックした後、次の手順で自動検出を行って下さい。

  1. 以下のURLをブラウザに貼付けて実行
http://api.kakaku.com/WebAPI/ItemSearch/Ver1.0/ItemSearch.aspx?apiKey=XXX&keyword=bravia&hitNum=20

    ※「XXX」の部分は自分で取得したAPIアクセスキーに置き換えて下さい

  1. アイテム情報が20件表示された事を確認し、ブラウザのメニューの「ページのソース」で実際のXMLデータを表示
    ※改行されずに、XMLデータが全て一行に表示されてるのが分かります
  2. XMLデータを全てコピー
  3. Flash Builderに戻り、先ほどのダイアログの「サンプルXML/JSON応答:」の下にあるエリアに、XMLデータを貼付け
  4. 「次へ」ボタンを押して、以下のダイアログへ

ツリーを見ると、戻ってきたXMLデータのルートにProductInfoノードがあることが分かります。今回欲しいのは、リスト表示するためのアイテムの配列データなので、「ルートを選択:」からItemを選択します。

すると、以下のように「ルートを選択:Item」となり、「配列ですか?」のところにチェックが入りました。このデータ型の名前をItem_typeからItemに変更します。(データ型 / 作成する新規データ型の名前を入力 / 配列のテキスト入力欄です)

終了ボタンを押します。

ここまでの作業でデータとサービスのパネルには、上記のような表示になったと思います。これは、

KakakuComという名前のサービスのsearchメソッドに3つのパラメーター(apiKey、keyword、hitNum)を渡すと、Item型の配列が戻ってくる

という設定を意味します。
この設定は今回のプロジェクト内ならどこからでも呼び出せる事になります。

リスト画面を新規作成

次に、上記で設定したsearchメソッドの結果をリスト表示するための画面を作成します。 Flash Builderのパッケージエクスプローラのviewsパッケージを右クリックし、新規>MXML コンポーネント を選択します。

新規 MXML コンポーネントのダイアログが表示されるので、名前に「ListView」と入力します。この時、パッケージ「views」、ベース「spark.components.View」となっていることを確認してください。(パッケージは任意ですが、Flash Builderの自動生成ルールに合わせて、今回はviewsとしておきます。)

すると、ListView.mxmlがソースビューに表示されます。

ListView.mxmlの6行目付近にある</fx:Declarations>の下に以下のコードを記述します。

<s:List id="list" width="100%" height="100%" />

ListView.mxmlは以下のようになります。

Listとアイテムの検索結果を連携

ここまでの作業で、アイテムの検索を行うためのサービス設定とその結果をリスト表示する画面レイアウトが完成しました。後は検索結果をListコンポーネントに表示させるだけです。幾つか方法がありますが、今回はデザインビューを使って直感的に設定してみましょう。

ListView.mxmlをデザインビューで表示して、Listコンポーネントをマウスで直接選択します。

Flash Builderの右サイドにあるプロパティパネル上部に「s:List」と表示されていれば、Listコンポーネントが正しく選択されています。

データとサービスパネルから、KakakuComのsearchを選択します。そのままマウスでドラッグして、デザインビューのListコンポーネントにドロップします。

「データにバインド」というダイアログが表示されるので、「ラベルフィールド:」からProductNameを選択して、アイテム名がリスト表示されるように設定します。

OKを押してダイアログを閉じます。

すると、ListView.mxmlがソースビューで表示されます。以下の部分のコードが自動的に生成されました。

青くハイライト表示されている部分は、Flash Builderによって値の入力を促されている箇所になります。次のステップで簡単に動作確認をするために、取得したAPIアクセスキーとキーワード、件数をここでは固定値で指定しておきましょう。

上記12行目にあたる1行を次のように書き換えます。

searchResult.token = kakakuCom.search("XXX", "bravia", "20″);

※「XXX」の部分は自分で取得したAPIアクセスキーを使用してください。

ここまでの作業でアイテムの検索結果を表示させる準備が出来ました。次回のステップで実際に以下のようなリスト画面を表示させてみましょう。

次回は

ホーム画面からリスト画面へ遷移する設定を行い、今回作成したアイテムの検索結果の動作確認をしていきます。