はじめに
Adobe AIRと言えば、Windows／Mac OS X／Linuxなど、OSに依存しないデスクトップアプリケーションの実行環境（ランタイム）として脚光を浴びてきましたが、2010年10月にリリースされたAIR 2.5からは、さらにPC以外のモバイル端末やスマートTVなどにも対応しました。特にAndroidは「AIR for Android」として大幅に強化されています。
今まで、このAIR for Android上で動作するアプリケーションを作るには、Adobe技術に精通している必要がありましたが、先日試用版ダウンロードがスタートした統合開発環境「Flash Builder 4.5」によって、手軽に高度なアプリケーションが開発できるようになりました。本稿では、Flash Builder 4.5の基本的な使い方や開発のフローを体験してもらうために、「複数画面を持つ単位変換アプリケーション」を作っていきます。
対象読者
- Androidアプリケーションの開発に興味がある方
- IDEでもっと簡単にAndroidアプリケーションを作りたいVB／C#／Javaユーザーの方
- AIR for Androidについて知りたい方
Flash Builder4.5によるAndroidアプリ開発の概要
AIR for Androidアプリケーションの開発メリット
AIR for Android向けのアプリケーションを開発するメリットは、「Flex」という今までのデスクトップアプリケーション作成時と同じフレームワークを使って開発を行うことができる点です。
Flexフレームワークは、オープンソースで提供されているフレームワークです。Adobe Flash PlayerやAIR上で動作するアプリケーションの作成に利用できます。アプリケーションを作成するための工数を大きく削減できる多数のコンポーネントが含まれています。「ActionScript」というプログラミング言語や「MXML」というXMLファイルを使ってアプリケーションを作成できます。
このFlexフレームワークが利用できることで、タブによる画面遷移を実現したいと思ったときなどに、面倒な処理を記述する必要がありません。さらに、コンポーネントの拡張性が高く、独自UIをコンポーネントとして手軽に再利用することも可能です。そのため、高度なアプリケーションを手軽に作ることができます。
また、モバイルとデスクトップアプリケーション共通のフレームワークとなっており、画面サイズなど各デバイスの特性に合わせてUIを変更する必要はありますが、ロジック部分を流用することができるのもポイントです。デスクトップアプリケーションとして作成したものを、Androidなどにも流用する必要がある、といった場合、大幅に工数を削減することができます。
統合開発環境「Flash Builder 4.5」とは？
こうしたAIRアプリケーションを開発するためのツールが「Adobe Flash Builder」です。
Flashと言えば、Webアニメーションからゲームまで作成可能な、「Adobe Flash Plofessional」を想像する方も多いと思います。Flash Builderは、Flashと違うのでしょうか。もちろん、Flash Builderは「Adobe Flash Platform」ツール群の一員ですが、Flash Professionalのように、イラストや絵を描くための機能はついていません。
Flash Builderはプログラマー向けの開発環境と言えます。Java開発でおなじみの「Eclipse」をベースにした統合開発環境で、コード補完機能やリファクタリングの機能を利用でき、AIRアプリケーションの開発、テスト、デプロイメントなどをサポートしています。Visual Studioなどのフォームデザイナーのように、パレットからコンポーネントをドラッグ＆ドロップでペタペタ貼り付けていくことで、画面を作成することが可能です。
そして前述のとおり、最新バージョンの4.5から新たにAndroidアプリケーションの開発に対応しました（※）。作成したAndroidアプリケーションは、「AIR Debug Launcher（ADL）」というシュミレーター上でプレビューやデバッグも可能です。Flashをベースとしているため、Android SDK標準のエミュレータよりも軽快に動作し、素早くアプリケーションの実行結果を確認して、デバッグできます。さらに、Android Marketへアップロードして対象デバイスにインストールできる形式（.apkファイル）で処理されるため、アプリケーションの開発から公開まで、スムーズに行うことができます。
2011年下半期のリリースが予定されている無償アップデーターにより、iOSとBlackberry Tablet OSアプリケーションの開発にも対応する。
では、アプリケーション作成の準備を整えていきましょう。
Flash Builder 4.5のインストール方法
Flash Builder 4.5には、無償体験版が用意されているので、誰でも試すことができます。まずは、下記のボタンをクリックして体験版をダウンロードし、インストールしてみましょう。
ダウンロード方法やインストール方法については、下記の記事で詳細に説明しています。一つ前のバージョンの解説になりますが、手順はほとんど同じです。
作成するサンプルアプリケーション
今回は、Flash Builder 4.5を使って次のようなAndroid端末向けの単位変換アプリケーションを作ってみます。［長さ］［重さ］［温度］の単位のタブをクリックして、それぞれの変換画面が表示されます（添付サンプルソース内「UnitConverter」フォルダ）。
大まかな作成手順
Flash Builderでの大まかな開発手順は次のようになります。親切なウィザードが用意されているので、一歩目のステップを踏み出すのが容易です。
- 新規プロジェクトを作成する
- デザイン画面でコンポーネントを配置する
- コンポーネントの振る舞いをActionScriptで記述する
- デバッグする
- 目的のアプリケーションができるまで、手順2～4を繰り返す
（1）新規プロジェクトの作成
では、早速開発していきましょう。Flash Builderを起動したら、メインメニューから［ファイル > 新規 > Flexモバイルプロジェクト］をクリックします。プロジェクト名に「UnitConverter」と入力して、［次へ(Next)］ボタンをクリックします。
続いて、プロジェクトのテンプレートを選択する画面になります。「タブ付きアプリケーション」を今回は選びます。どのようなタブが必要かを指定できるので、［長さ］［重さ］［温度］の3つのタブを作成して［完了(Finish)］ボタンをクリックします。
以上の手順で、プロジェクトのひな形が作成されます。次のような画面が表示されたら、画面左上の「パッケージエクスプローラ」に注目してみてください。メインファイルとなるのが、プロジェクト名を冠した「UnitConverter.mxml」です。そして、「views」パッケージの中には先ほど作成したタブの数だけMXMLファイルが作成されています。それぞれ、View1.mxmlが長さ、View2.mxmlが重さ、View3.mxmlが温度のタブのビューを表します。
MXMLは、XMLをベースとしたUIの記述言語です。例えば、ボタンを作成するには、次のように記述できます。本稿では、マウス操作でコンポーネントを配置しますが、データはMXML形式で出力されるので、細かい部分を手作業で修正するのも簡単です。
<s:Button x="24" y="34" label="ボタン"/>
（2）デザイン画面でコンポーネントを配置する
では、マウス操作で単位変換ツールをデザインしていきましょう。画面左側のパッケージエクスプローラから、View1.mxml（長さのタブの画面を表すMXMLファイル）をダブルクリックして編集を行います。画面中央の上部にある［ソース|デザイン］のボタンから、［デザイン］のボタンをクリックします。
画面に、TextInputとListの組み合わせを2セット作ります。画面左下の「コンポーネントパネル」のコントロールの中から、「TextInput」と「List」を探して、マウスでドラッグ＆ドロップし、次の画面のように配置します。
配置したら、画面右側の「プロパティパネル」でIDを設定します。ここでは以下のようなIDを付けています。
| コンポーネント | 入力したID | 用途 |
| TextInput | text1 | ユーザーに値を入力してもらうもの |
| List | list1 | 基本となる単位を選択するためのもの |
| TextInput | text2 | 変換後の値を表示するためのもの |
| List | list2 | 変換先の単位を選択するためのもの |
FlexのListコンポーネントは、アイテムを水平方向に配置したり、タイル状に並べたりと、色々なスタイルに切り替えることができます。これは「レイアウトプロパティ」から設定できます。例えば、アイテムを垂直方向に配置したい場合は「spark.layouts.VerticalLayout」を選択します。
今回作成するアプリケーションは、複数の中から1つの単位を選択するものなので、できるだけスペースを有効に使えように、タイル状にアイテムを並べることにします。そこで、Listのレイアウトプロパティを「spark.layouts.TileLayout」に設定します。
上記の画面では、分かりやすく単位の一覧が既に表示されていますが、Listを配置した時点では、灰色で塗りつぶされた矩形が配置されるだけです。
（3）コンポーネントの振る舞いをコードで記述する
ここから、配置したコンポーネントの振る舞いをプログラミングしていきます。プログラムを書く前に、リストの中に表示する単位データをMXMLで定義しておきましょう。画面中央の上部にある［ソース］のボタンを押して、ソース編集画面を表示すると、マウス操作で配置したコンポーネントの配置情報がMXMLで表示されます。
ソース編集画面が出たら、単位データを記述します。MXMLでは、単位データの情報など『画面に見えない情報は、<fx:Declarations>タグの内側に書く』というルールがあります。そのため、<fx:Declarations>タグの内側に次のような単位情報をXMLで記述します。ここでは、単位情報のデータを<s:ArrayCollection>と定義し、このデータに「unit_length」というIDを付与しました。
<fx:Declarations> <!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 --> <s:ArrayCollection id="unit_length"> <fx:Object label="メートル(m)" value="1" /> <fx:Object label="キロメートル(km)" value="1000" /> <fx:Object label="センチメートル(cm)" value="0.01" /> <fx:Object label="ミリメートル(mm)" value="1000" /> <fx:Object label="インチ(in)" value="0.0254" /> <fx:Object label="フィート(ft)" value="0.3048" /> <fx:Object label="マイル" value="1609.344" /> <fx:Object label="尺" value="0.30303" /> </s:ArrayCollection> </fx:Declarations>
MXMLで単位データを定義したら、Listコンポーネントでこれを表示するようにします。デザイン画面に戻り、プロパティパネルの上方にある［データプロバイダー］という項目に「{unit_length}」と入力します。これで、リストに単位の一覧が表示されるようになります。［データプロバイダー］のの下にある［選択したインデックス］は「0」（メートル）と入力し、Listの初期値にしておきます。
では、単位変換のプログラムを記述します。まず、デザイン画面で「TextInputのtext1」（画面上の入力ボックス）を選択します。選択した状態で、プロパティパネルの［変更時］という項目に注目してください。この項目の右側に「稲妻の形をしたアイコン」があるので、クリックします。すると、「イベントハンドラを生成」が表示されるので、さらにクリックします。
ソース編集画面に切り替わり「text1_changeHandler()」メソッドが、自動的に定義されます。そこで、このメソッドを次のように記述します。
protected function text1_changeHandler(event:TextOperationEvent):void
{
calcUnit();
}
protected function calcUnit():void {
var unit1:Number = list1.selectedItem.value;
var unit2:Number = list2.selectedItem.value;
var v:Number = (parseFloat(text1.text) * unit1) / unit2;
text2.text = v.toString();
}
次に、Listのアイテムを選択した時の処理を記述します。こちらも先ほどと同様、デザイン画面の［変更時］の項目からイベントハンドラを作成できます。しかし今回は、イベントハンドラを作らなくても、直接ActionScriptのコードを記述して処理を実行できるということを示すために、「calcUnit()」とだけ記述してみましょう。
（4）デバッグ実行してみる
ここまで作成したら、一度デバッグを実行してみます。メインメニューから［実行 ＞ デバッグ］をクリックすると、デバッグ設定ダイアログが表示されます。ダイアログ下部にある、「起動方法」で［デスクトップ上］を指定して、実行してみましょう。
デスクトップ上にAIR for Android専用のシュミレーター（ADL）が起動し、デバッグが行われます。
もちろん、実機で実行することも可能です。方法は後ほど紹介します。
（5）［重さ］タブの画面を実装する
以上で［長さ］タブ画面の作成は完了したので、他のタブの画面も実装してみましょう。［重さ］のタブは、「View2.mxml」を編集します。これが［長さ］のタブと違うのは、中に表示する単位だけなので、「View1.mxml」のソースを全部コピーして、「View2.mxml」に貼り付けます。そして、単位を表すMXMLを以下のように書き換えます。
<fx:Declarations> <!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 --> <s:ArrayCollection id="unit_weight"> <fx:Object label="グラム(g)" value="1" /> <fx:Object label="キログラム(kg)" value="1000" /> <fx:Object label="ミリグラム(mg)" value="0.001" /> <fx:Object label="貫(カン)" value="3750" /> <fx:Object label="斤(キン)" value="600" /> <fx:Object label="トン(t)" value="1000000" /> <fx:Object label="カラット(ct)" value="0.2" /> </s:ArrayCollection> </fx:Declarations>
さらに、二行目にある<s:View>タグのtitle属性を「重さ」と書き換えます。
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:supportClasses="spark.skins.mobile.supportClasses.*" title="重さ">
続けて、Listのlist1、list2のデータプロバイダーを「{unit_weight}」と変更します。
（6）［温度］タブの画面を実装する
最後に［温度］タブを作成します。温度は、摂氏・華氏・絶対温度をそれぞれ計算する形になります。View3.mxmlを開いたら、Labelを3つ、その横にTextInputを3つ配置します。
配置が完了したら、次のように各コンポーネントを設定します。
| コンポーネント | ID | テキスト |
| Label | (なし) | 摂氏（℃） |
| TextInput | textC | (なし) |
| Label | （なし） | 華氏（F） |
| TextInput | textF | （なし） |
| Label | (なし) | 絶対温度（K） |
| TextInput | textK | （なし） |
さらに、TextInputごとに、プロパティパネルの［変更時］の項目でイベントハンドラを生成します。それぞれのイベントハンドラは、次のように記述します。これは、各温度単位への変換式を記述したものです。
protected function textC_changeHandler(event:TextOperationEvent):void
{
var v:Number = parseFloat(textC.text);
textF.text = String(v * 9 / 5 + 32);
textK.text = String(v + 273.15);
}
protected function textF_changeHandler(event:TextOperationEvent):void
{
var v:Number = parseFloat(textF.text);
var c:Number = (v-32) * 5 / 9;
textC.text = String(c);
textK.text = String(c + 273.15);
}
protected function textK_changeHandler(event:TextOperationEvent):void
{
var v:Number = parseFloat(textK.text);
var c:Number = v - 273.15;
textC.text = String(c);
textF.text = String(c*9/5+32);
}
Flash Builder 4.5から実機で実行してみる
最後に、実機で実行してみましょう。Flash Builder 4.5では、Android端末をUSBでつないで実行するだけで、アプリケーションが自動的に実機へ転送されインストールが行われます（このときAndroid端末側のアプリケーションの設定で［提供元不明のアプリを使えるようにする］にチェックしておきます）。
メインメニューの［実行 > デバッグ構成］をクリックしてダイアログが表示されたら、起動方法を「デバイス上（アプリケーションをUSB経由のデバイスにインストール）」に変更してデバッグを実行します。このとき、Android端末に、AIRランタイムの最新版が自動的にインストールされます。
型チェックが厳しいActionScript 3.0
AIR for Androidアプリケーション開発では、スクリプト言語に「ActionScript 3.0」を使います。ActionScript 3.0は、JavaScriptの標準仕様であるECMAScriptの4th Edition（既にJavaScript標準からは外れました）を元に作られています。そのため、JavaやJavaScriptが分かる人ならば、少し学習するだけでActionScriptを使えるようになります。
ActionScript 3.0では、型を明示できます。今回のサンプルの中でも、数値を計算するときに、「var v:Number」のように、Number型の変数を宣言しています。加えて、TextInputのtextプロパティは、String型であるため、String()関数を使って、Number型の値を文字列型に変換してから値を設定することが必要になっています。
var v:Number = 123.45; text2.text = String(v); // あるいは text2.text = v.toString();
型が厳密に指定できるため、コード補完機能がさくさく動作するのが利点です。
タブ実現の仕組み
ウィザードで自動化されていたので、肝心のタブの仕組みがよく分からなかったかもしれません。そこで、メインファイルの「UnitConveter.mxml」を開いて、MXMLを覗いてみましょう。そこには、<s:TabbedViewNavigatorApplication>タグがあり、その子要素として複数の<s:ViewNavigator>タグがあります。
<s:TabbedViewNavigatorApplication
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:ViewNavigator label="長さ" width="100%" height="100%"
firstView="views.View1"/>
<s:ViewNavigator label="重さ" width="100%" height="100%"
firstView="views.View2"/>
<s:ViewNavigator label="温度" width="100%" height="100%"
firstView="views.View3"/>
</s:TabbedViewNavigatorApplication>
この<s:ViewNavigator>が、タブの1ページに相当します。例えば、“新たに「体積」のタブを追加する”といった場合には、タブ画面を「View4.mxml」に定義し、次のように<s:ViewNavigator>タグを追加することになります。
<s:ViewNavigator label="体積" width="100%" height="100%" firstView="views.View4"/>
このように、タブコンポーネントでは、タブの1ページを1つのMXMLファイルとして作っていきます。そのため、画面の設計がとても分かりやすいのが特徴です。
また、Flexフレームワークの素晴らしいところは、画面の一部を分かりやすい単位でファイルごとに分割できる点です。分割した単位はコンポーネントとなり、再利用が可能なため、複雑な画面構成のアプリケーションを作るときに役立ちます。
（補足）横画面に対応する方法
今回のアプリケーション作成では、「マウス操作で軽快にアプリケーションを作れる」という部分に重きを置きました。そのため、端末を横向きにすると、画面の一部が切れてしまうという状態が発生してしまいます。
ステージからはみ出した部分をスクロールできるようにするには、スクロールさせたい範囲を<s:Scroller>というタグで囲むことで自動的にスクロール可能になります。また、別の対処として設定ファイルの<autoOrients>項目を「false」にすることで縦画面固定にすることもできます。
しかし、せっかくのAndroid端末向けアプリケーションですし、マウス操作で手軽に横画面へ対応できるのも、Flash Builder 4.5のよいところなので、簡単に手順を紹介しておきたいと思います（添付サンプルソース内「20110421nBTsb3-UnitConverter.fxp」ファイル）。
実はFlex 4.5には「ステート（状態）」という素晴らしい機能があります。これを使うことで、手軽にレイアウトの切り替えが実現できます。単純に縦横に対応するだけでなく、それぞれの向きで見せる内容をカスタマイズしたい、といった場合にも可能です。
長さのタブを表す「View1.mxml」を再びデザインモードで開いてみてください。右上に［ステート］というビューがあります。デフォルトでは、「<ステート1>」という表示が出ているだけです。
ここで、まずは縦画面（portrait）と横画面（landscape）という2つのステートを作成します。手順としては、新規で「landscape」というステートを作り、その後、もともとあった「ステート1」を「portrait」という名前に編集します。
次に、［ステート］ビューで「landscape」をクリックし、横向き用のレイアウトになるように、配置済みのコンポーネントをマウスで移動させます。
「長さ（View1）」「重さ（View2）」「温度（View3）」のすべてのタブで同様の操作を行います。以上の手順で、横画面への対応は完了です。Flex 4.5フレームワークは、縦横の画面方向の変更を感知して、自動的にステートを「portrait」「landscape」と切り替えてくれる機能があるので非常に便利です。
その他にもまだまだあるFlex 4.5のモバイル向け機能
本稿の冒頭でも記述したように、AIR for Androidアプリケーションを開発するメリットは、フレームワークであるFlexを利用できる点にあります。今回のアプリケーション作成ではすべてを紹介できませんでしたが、Flex 4.5にはモバイル開発を強力にサポートする多くの特徴があります。
その1つが「画面遷移」です。モバイルアプリケーションの場合、端末の画面が小さいため、どうしても多階層の画面構造を持つことになります。そういう場合、Flex 4.5にはモバイルアプリケーション用にViewNavigatorという画面遷移を管理する専用のクラスが用意されています。画面遷移を自動的に記憶してくれたり、メモリを圧迫しないように調整してくれたりと非常に便利なクラスです。
その他にも、デフォルトでタッチ操作によるスクロールに対応しているListコンポーネントなど、まだまだたくさんの機能が存在します（参考記事：Flex 4.5 SDKとFlash Builder 4.5を使用したモバイルアプリケーション開発）。詳細な情報が知りたい方は、Adobe Developer Connectionに技術記事があるので、そちらを参照ください。
まとめ
以上、単位変換ツールの作成を通して、Flash Builder 4.5を使ったAndroidアプリケーションの制作の過程を紹介しました。単位変換ツールの作成では、画面にコンポーネントをペタペタ貼り付け、単位の元となるデータと、変換のための計算式を入力するくらいでアプリケーションを完成させることができました。
AIR for Androidアプリケーション開発における、さわりの部分を紹介したに過ぎませんが、本稿がAIR for Android開発をはじめる一歩となれば幸いです。
