Flexで作るAndroidアプリ開発チュートリアル 2

はじめに

FlashのオープンソースフレームワークであるFlexを使って効率良くAndroidアプリケーションを開発する方法をチュートリアル形式で紹介します。

今回使用するツールやSDKは全てアドビシステムズにて開発中のバージョンであり、正式リリース(2011年上半期)前のプレビュー版となります。正式リリース後はツールやSDKの変更が考えられますのでご注意ください。尚、プレビュー版で開発したアプリケーションの利用に対する制約は一切ありません。

サンプル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についての解説は、以下の記事を参考にしてください。

Flex 4 マスターシリーズ #06 データ中心型開発(DCD) Part1
Flex 4 マスターシリーズ #12 データ中心型開発(DCD) Part2

では、このパネルにある「データとサービスに接続…」というリンクをクリックしてみましょう。
サーバ側のサービスタイプを選択するダイアログが表示されました。今回は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の環境では、「パラメーター値を入力して操作を呼び出す」の手順を実施すると「応答は有効な XML または JSON 文字列ではありません」というエラーが発生する場合があります。その場合は、「サンプル XML/JSON 応答を入力」をチェックした後、次の手順で自動検出を行って下さい。

1. 以下のURLをブラウザに貼付けて実行
http://api.kakaku.com/WebAPI/ItemSearch/Ver1.0/ItemSearch.aspx?apiKey=XXX&keyword=bravia&hitNum=20
※「XXX」の部分は自分で取得したAPIアクセスキーに置き換えて下さい

2. アイテム情報が20件表示された事を確認し、ブラウザのメニューの「ページのソース」で実際のXMLデータを表示
※改行されずに、XMLデータが全て一行に表示されてるのが分かります

3. XMLデータを全てコピー

4. Flash Builderに戻り、先ほどのダイアログの「サンプルXML/JSON応答:」の下にあるエリアに、XMLデータを貼付け

5. 「次へ」ボタンを押して、以下のダイアログへ

ツリーを見ると、戻ってきた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%”>
</s:List>

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アクセスキーを使用してください。

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

次回は

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

広告

12 Responses to Flexで作るAndroidアプリ開発チュートリアル 2

  1. ゴロー says:

    初めまして。

    たまたまこちらのブログにヒットし、
    とても親切な説明で、すごく分かりやすく感動しつつ拝見させて頂いてます。

    基本が理解できていない者ですから一語一句見落とさずにマネさせてもらってるのですが、”戻り値の型を設定” で “次へ”を押すと、

    “操作の呼び出し中にエラーが発生しました。” ”応答は有効な XML または JSON 文字列ではありません” 

    となってしまいます。1からやり直すのですが、同じ結果にハマってまして。。

    唐突な質問で失礼ですが、なにかアドバイス頂ければありがたいです。

    環境 : MAC 10.6.6

  2. ksk says:

    ゴローさん

    こんばんは。
    エラーの内容から見ると、正しくHTTPの通信が出来ていないようですね。

    その前のステップで作成したURLをブラウザー上で実行すると、アイテム情報っぽいものが20件ほど表示されますか?

  3. ゴロー says:

    kskさん
    こんばんは。

    早々の返信ありがとうございます。

    答えはイエスでして、

    (http://kakaku.com/item/K0000081868/http://bbs.kakaku.com/bbs/K0000081868/http://review.kakaku.com/review/K0000081868/55600995K00000952203D BRAVIA KDL-40HX800 [40インチ]SONY2010年7月16日省エネ評価:★★★★★ 2010年度エコポイント数:11000点 画面サイズ:40インチ 画素数:1920×1080 倍速液晶:4倍速液晶(モーションフロープロ240Hz)家電>液晶テレビ54.64http://img.kakaku.com/images/productimage/m/K0000095220.jpg)

    × その他20 程の情報が画面全体に表示されてます。

    上記のページURLを ”データとサービスに接続PriceComの”ウィンドウの 

    「操作:」にある「URL」の「Fill_URL_Here」に入れてるんですが、どうしたものかと。。

  4. ksk says:

    なるほど…
    環境を会社に置いて来てしまったので、明日にでも解決策を練ってみたいと思います。

  5. ゴロー says:

    ブリトーをインストし直しましたが、同じ問題発生しました。

    お手数ですが、どうぞよろしくお願いします。

  6. ksk says:

    ゴローさん

    まず、作成したURLが正しくリクエストされて、期待するXMLデータで帰ってきているかを確認しましょう。

    ブラウザでURLを試した時にソースを表示してみて、確実にXML形式のデータになっているか確認できますでしょうか?

    ちなみに、ブラウザの種類とバージョンは何ですか?
    こちらのMac環境で見ると、Safari5.0.3だと文字列だけで表示されるので、表示>ソースを表示でXMLデータを確認できますし、Firefox3.6.13だとそのままXMLデータで表示されました。

  7. ピンバック: Flexで作るAndroidアプリ開発チュートリアル 3 « ksk studio

  8. ゴロー says:

    はい。よろしくお願いします。

    ブラウザはSafari5.0.3で、で始まり、ズラッと文字列が表示されます。

    Firefoxは3.6.8だったので、3.6.13に上げ直して試したところ、

    この XML ファイルにはスタイル情報が関連づけられていないようです。以下にドキュメントツリーを表示します。

    と一言最初にあってから、ズラッと文字列が表示されます。

    なにはともあれ、「戻り値の型を自動検出」試してみましたが、
    やはり
    【応答は有効な XML または JSON 文字列ではありません】
    となりました。

  9. ksk says:

    うーむ、こちらで再現できないので難しいですね…
    問題のFlash Builderのプロジェクトファイル(FXPファイル)を丸ごと頂ければ、確認できるのですが。

    ちなみに、

    ファイル>Flash Builderプロジェクトを書き出し…

    とすると丸っと書き出せます。

    • ゴロー says:

      是非診察して頂きたいのですが、

      書き出した(FXPファイル)を

      どのようにkskさんに送ればよろしいでしょうか?

  10. ksk says:

    上記一連の問題は、Mac OS X 10.6.6だと再現することが分かりましたので、対応策を追記しました。
    これはFlash Builder Burritoのバグである可能性もありますが、正式版リリースの際には修正されていると期待したいところです。

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

%d人のブロガーが「いいね」をつけました。