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

はじめに

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

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

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

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

手順

前回はアイテムの検索結果を表示するリスト画面(ListView.mxml)を作成しました。今回は初回に作成したホーム画面(HomeView.mxml)からリスト画面への遷移を実装していきます。

ホーム画面からリスト画面へ

SearchボタンにClickイベント処理を追加

まず、ホーム画面であるHomeView.mxmlをソースビューで開きます。初回に行った作業で、以下のようなコードになっていると思います。

ユーザーがSearchボタンをクリックすると、リスト画面に遷移するようにしたいと思います。11行目のSearchボタンにClickイベントを処理する部分を以下のように追記します。

Flash Builderのコード補完機能を使って、Click ハンドラーを生成しましょう。「click=””」の「””」の間にカーソルを合わせて、コード補完機能を呼び出します。コード補完機能の呼び出しは、CMD + Space (Mac) / CTR + Space (Win) です。

Enterキーで確定すると自動的にコードが追加されます。
※「click=””」を記述する際にコード補完機能が自動的に呼び出される場合もあります。その場合、例えば「cli」くらいまで入力すると補完候補が表示され Enter キーで確定させることで、一連の作業を一瞬で完了させることができます。もちろん、「cli」くらいまで入力して、自分でコード補完機能を呼び出しても同様です。

さて、この作業でコードは以下のようになります。

20行目のSearchボタンにclickイベント処理を行うメソッド「button1_clickHandler(event)」が指定されました。指定されたメソッドは、5〜12行目に自動生成された<fx:Script>ブロック内に自動定義されたのが分かります。

画面遷移を指定

では、Searchボタンがクリックされた時に呼び出されるbutton1_clickHandler()メソッドに画面遷移のコードを記述しましょう。

Flexフレームワーク “Hero” では、モバイルアプリケーション用にViewNavigatorという画面(View)の遷移(Navigation)を管理するクラスがあります。このVewiNavigatorクラスは、どのViewからも「navigator」という名前で呼び出す事ができます。

基本的な画面遷移の記述は以下のようになります。

次の画面へ:navigator.pushView(NextViewClassName, data)
前の画面へ:navigator.popView()
Top画面へ:navigator.popToFirstView()

※各遷移系メソッドには、画面間のトランジションを設定するViewTransitionオブジェクトを指定することもできますが、無指定でもデフォルトでトランジション効果が掛かるので問題ありません。オリジナルのトランジション効果(Flipなど)を掛けたい場合は、パフォーマンスに気を付けて指定してください。

モバイルアプリケーション開発でFlexフレームワークを使う大きなメリットの一つに、このViewNavigator機構があると言えます。ViewNavigatorは、画面の遷移を自動的に記憶してくれるので、一つ前の画面に戻る時も簡単な記述で戻ることができます。また、画面が遷移する際には、元の画面オブジェクト(つまりViewオブジェクト)を破棄してメモリを圧迫しないようにしてくれます。常にアクティブな画面のオブジェクトのみが存在するということになります。

各画面で使用するデータだけは自動的に保存され、再び画面遷移で戻ってきた時に自動的に呼び出されて画面に表示されます。意図的に保存したいデータは、Viewクラスのdataプロパティを通して保存しておくことも出来ます。

では、コードに戻ってリスト画面に遷移するための記述をしましょう。
先ほどのbutton1_clickHandler()内にある9行目のコメント「// TODO Auto-generated method stub」を削除して、次のように記述します。

navigator.pushView(ListView);

第2引数は後ほど設定することにして、ここでは単純に次の画面への遷移だけを指定しています。

全てのファイルを保存して実行してみましょう。実行するには、Flash Builderの上部にあるアイコンメニューにある実行ボタン(図の赤枠で囲まれたボタン)を押します。

実行構成というダイアログが開きます。

ここでは起動方法を選択します。最初はデスクトップ上で手軽に試してみたいので、「デスクトップ上:」のラジオボタンをチェックし、プルダウンメニューから適当なデバイスを選択します。

今回はGoogle Nexus Oneを選んでみます。所有のデバイスがリストにない場合は、設定ボタンから自由に追加することができます。

最後に実行ボタンを押して実行します。

ホーム画面が表示されました。

Searchボタンを押すと、リスト画面に遷移します。この時、画面が横にスライドするデフォルトのトランジション効果が確認できるかと思います。

リスト画面にアイテムの情報がリスト表示されました。

今回のようにデスクトップ上で起動する場合は、AIR Debug Launcher (ADL) というツールで実行されます。ADLのDeviceメニューには、画面を回転させたり、Androidデバイスに見られるようなBack/Menu/Searchといった操作ボタンのシミュレーションをするための項目があります。

リスト画面からホーム画面へ戻す場合は、ViewNavigatorのpopView()を指定することで実装できますが、特に何も指定しなくてもデバイスのBackボタンが押された時にFlexフレームワークが自動的に画面を戻してくれます。

しかし、Backボタンがない機種もありますので、アプリケーション内にも戻るためのボタンを作成した方が安全です。このようなナビゲーションなどのUI実装は、次回以降で扱って行きたいと思います。

画面間でのデータの受け渡し

さて、今度はホーム画面で入力された検索キーワードをリスト画面に受け渡し、そのキーワードでアイテム検索を実行するようにしていきます。

HomeView.mxmlをコードビューで開き、19行目にあるTextInputに適当なidを付けます。

<s:TextInput id=”searchInput” width=”100%” />

idを付ける事でプログラム上でこのTextInputオブジェクトの呼び出しが簡単になります。

続いて、button1_clickHandler()内に指定した9行目のpushView()メソッドの第2引数に、テキスト入力されたキーワードを指定します。

navigator.pushView(ListView, searchInput.text);

これでSearchボタンが押された時に、テキスト入力に指定された検索キーワードがリスト画面に渡されることになります。ここで指定したpushView()メソッドの第2引数にはString文字列だけでなく、他にもさまざまなオブジェクトを指定することができます。

HomeView.mxmlは以下のようになりました。

受け渡されたデータの利用

ホーム画面から受け渡された検索キーワードを利用して、価格.com Webサービスでアイテム検索をするようにします。

受け渡されたデータは、Viewのdataプロパティから呼び出すことができます。試しにリスト画面のヘッダー部分に表示されるタイトル「ListView」を検索キーワードが表示されるように変更してみましょう。

ListView.mxmlをコードビューで開きます。5行目にあるViewタグのtitleプロパティを次のように変更します。

<s:View xmlns:fx=”http://ns.adobe.com/mxml/2009&#8243;
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:kakakucom=”services.kakakucom.*”
title=”{String(data)}“>

波括弧「{}」をタグの中で使うと、タグの中でもActionScriptが記述できるようになります。「String(オブジェクト)」の表記は、括弧内のオブジェクトをStringにキャスト(型変換)することを意味します。Viewのtitleプロパティは文字列を指定する必要があるため、このようにキャストしています。

では、先ほどの実行ボタンで実行してみましょう。既にADLでPriceComアプリをデスクトップ上に起動してある場合は、ADLを終了してください。同じアプリケーションの二重起動はできませんので、ADLを終了させずに実行すると以下のようなエラーが発生します。

問題なく実行できたら、ホーム画面で適当な検索キーワードを入力して、Searchボタンを押してみましょう。リスト画面のタイトルに入力した検索キーワードが表示されます。

日本語も問題なく受け渡されることが分かります。

次に、受け渡された検索キーワードを価格.com Webサービスの呼び出し部分に指定します。ListView.mxmlの12行目を以下のように書き換えます。

searchResult.token = kakakuCom.search(“XXX”, String(data), “20”);

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

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

全てを保存して実行してみましょう。

ホーム画面で入力した検索キーワードによるアイテム検索のリスト表示が確認できたかと思います。

デバイスで実行する

最後にデバイスでも動作確認をしておきましょう。AIRランタイムがインストールされたAndroidデバイスをUSBで接続します。

※Android 2.2以降であれば、Android MarketからAndroid用のAdobe AIRランタイムを無償で入手できます。

実行ボタンの横にある「▼」をクリックします。

実行の構成を選択します。

実行構成ダイアログの起動方法で「デバイス上:」にチェックを入れます。

実行ボタンを押して実行します。

暫くするとデバイス上でアプリケーションが起動します。(環境によっては時間が掛かるかもしれません)
検索キーワードを入力して、アイテムのリスト表示をしてみてください。検索結果が多数ある場合は、指で直接スクロールさせることができます。このようなスワイプ機能もFlexフレームワークが提供してくれています。また、画面の向きを変えても自動的にレイアウトが変わることが分かります。

ここまでの作業で入力された検索キーワードでアイテムのリスト表示をするところまでが出来ました。

次回は

画面遷移のためのUIなどを実装していきます。

広告

One Response to Flexで作るAndroidアプリ開発チュートリアル 3

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

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

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