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

はじめに

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

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

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

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

準備

API アクセスキーの取得

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

開発環境の取得

Androidアプリ開発に対応するFlash Builder の次期バージョン(コードネーム”Burrito”)のプレビュー版をAdobe Labsからダウンロードしてきます。(Adobe IDが必要になります。)
ダウンロードしたFlash Builder Burritoをインストールします。(Flex SDK、AndroidのSDKやドライバなどは同梱されているので不要です。)

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

手順

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

プロジェクトを新規作成

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

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

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

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

ホーム画面をレイアウト

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

<s:View xmlns:fx=”http://ns.adobe.com/mxml/2009&#8243;
xmlns:s=”library://ns.adobe.com/flex/spark” title=”ホーム”>

とあります。

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

分かり易くするために、このファイル名をFlash Builder のリファクタリング機能を使ってHomeView.mxmlとリネームしましょう。パッケージエクスプローラのツリー構造からviewsパッケージの下にある_PriceCom.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″」は、それぞれ<s:View>内で水平方向中央、垂直方向中央に<s:HGroup>を配置する、という設定になります。これらの設定は、後述するデザインビューのプロパティパネルの「サイズと位置」にある「制約」でも確認、及び編集することができます。

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

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

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

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

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

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

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

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

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

次回は

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

広告

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

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

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

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