作成日

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アプリケーションを作成していきます。欲しいアイテムの名前やキーワードを入力すると、キーワードに合致したアイテム情報がリスト表示されるという簡単なアプリケーションです。

準備

h4>API アクセスキーの取得

価格.com Webサービスのページにある「価格.com WebサービスAPI 利用申込みページ」のリンクから申し込んで価格.com WebサービスのAPI アクセスキーを取得します。申し込むと数分内にAPIアクセスキーに関する情報が登録したメールに送られてきます。

開発環境の取得

モバイルアプリ開発に対応した Flash Builder 4.5 を前述の「必要な環境」を参照して入手し、インストールします。(Flex SDK、AndroidのSDKやドライバなどは同梱されているので不要です。)

以上でAndroidアプリケーションを開発する準備が整いました。

手順

インストールしたFlash Builderを起動して、以下の手順でAndroidアプリケーションを開発してみましょう。(起動時に体験版の使用を選択しても機能制限はありません。)

プロジェクトを新規作成

まず、Flexモバイルプロジェクトを作成します。ファイルメニューから、新規>Flexモバイルプロジェクトを選択します。

以下のようなダイアログが開きます。ここではプロジェクト名を「PriceCom」と入力します。

フルスクリーン表示をするアプリにしてみたいので、アプリケーション設定のフルスクリーンにチェックを入れます。終了ボタンを押してダイアログを閉じます。

すると、PriceCom.mxmlとPriceComHomeView.mxmlの二つのファイルが自動的にエディター部分に開かれます。

ホーム画面をレイアウト

エディター部分に開いているPriceComHomeView.mxmlのコード部分を見ると、2〜3行目に

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">

とあります。

つまり、このPriceComHomeView.mxmlはViewを継承したコンポーネントであることを意味します。Flexのモバイル用アーキテクチャでは、一つの画面をViewコンポーネントに定義していくことになります。

分かり易くするために、このファイル名をFlash Builder のリファクタリング機能を使ってHomeView.mxmlとリネームしましょう。パッケージエクスプローラのツリー構造からviewsパッケージの下に あるPriceComHomeView.mxmlを選択し、右クリックで表示されるメニューから[名前を変更]を選択します。

クラスの名前を変更ダイアログが表示されるので、新規の名前にHomeViewと入力して、OKを押します。

名前の変更が反映されたことが確認できると思います。

この方法だとファイル名だけでなく、参照している部分にも変更が反映されるので安心してリファクタリングが出来ます。

それでは、ホーム画面のレイアウトに移りましょう。HomeView.mxmlの6行目にある</fx:Declarations>の下に以下のコードを記述します。
※ソースビューに行番号が表示されていない場合は、環境設定 > 一般 > エディター > テキスト・エディター として、「行番号の表示」にチェックを入れます。

<s:HGroup left="10" right="10" verticalAlign="middle" horizontalCenter="0" verticalCenter="0"> <s:TextInput width="100%" /> <s:Button label="Search" /> </s:HGroup>

Macの場合、Command + Space(WindowsはCtrl + Space)を使ってコードヒンティングを利用すると入力を補完してくれるので、手早く書けます。HomeView.mxmlは以下のようになります。

<s:HGroup>タグを使用すると、囲まれたオブジェクトを水平方向に整列させることができます。ここでは、TextInputオ ブジェクトとButtonオブジェクトが水平方向に整列されます。<s:HGroup>タグのプロパティで「left="10"」 「right="10"」と指定している所は、一階層上の<s:View>の左右の端から10の場所を<s:HGroup>自身 の両端とする、という設定になります。同様に「horizontalCenter="0"」「verticalCenter="0"」は、それぞれ& lt;View>内で水平方向中央、垂直方向中央に<s:HGroup>を配置する、という設定になります。これらの設定は、後述する デザインビューのプロパティパネルの「サイズと位置」にある「制約」でも確認、及び編集することができます。

「verticalAlign="middle"」は、<s:HGroup>内で水平方向に整列する各オブジェクトを 中央揃えに配置する、という設定になります。こちらもプロパティパネルの「レイアウト」にある「位置」の「整列:」で確認、及び編集することができます。

ここで一度デザインビューで実際にどのようなデザインビューになっているのかを確認してみましょう。ソースエディット領域のすぐ上に、「ソース」と「デザイン」というボタンがあるので、「デザイン」の方を押します。

すると、デザインビューに切り替わりました。

Flash Builderでは、Flexフレームワークを使ったプロジェクトの場合(今回はFlexモバイルプロジェクト)、デザインビューでレイアウトを確認、及 び調整していくことができます。TextInputやButtonの配置もソースビューのエディターで記述するのではなく、最初からデザインビューでレイ アウトすることも可能です。その場合は、Flash Builder画面左下のコンポーネントパネルからDrag&Dropして直接配置することができます。慣れた開発者は、ソースビューで手書きし て、デザインビューでチェックし、調整するというやり方が多いようです。

先ほどソースビューで記述したHGroupの調整をデザインビューでしたい場合は、以下のようにHGroupをマウスで直接選択します。

すると、Flash Builderの右側にあるプロパティパネルに選択中のHGroupの編集可能なプロパティが表示されます。

このプロパティパネルの値を編集して、お好みのレイアウトや見た目に調整してみてください。

尚、今回のレイアウトではコンポーネントの位置調整に絶対値を指定していません。中央揃いや右端からどれくらいの位置に配置するか、など全て相対値で指定しています。これは、画面サイズや解像度の異なる様々な画面で表示させてもレイアウトが崩れないようにするためです。

パフォーマンスに気を使う場合は、HGroupやVGroupを使って多重グループ構造にしないことが大事です。レイアウト構造は できるだけシンプルにしましょう。絶対値指定の方がパフォーマンス面では有利ですが、マルチスクリーン対応を考えた場合は相対値指定をオススメします。

次回は

検索結果を表示するリスト画面を作っていきます。