簡単なAIRアプリケーションを作って実行してみる
インストールが完了したところで、簡単なアプリケーションを作って実行してみたいと思います。今回作るのは、郵便番号を入力すると住所を表示するという簡単なAIRアプリケーションです。Web APIを使って郵便番号から住所を表示します。
郵便番号検索のためのWeb APIはいろいろありますが、ここでは「郵便番号API」を利用しました。
「TestZip」プロジェクトの作成
では、さっそく作っていきましょう。Flash Builderを起動したら、メニューから［ファイル］-［新規］-［Flexプロジェクト］を選択します。
プロジェクト名に「TestZip」と記入して、アプリケーションの種類で「デスクトップ（Adobe AIRで実行）」を選択し、［終了］ボタンをクリックします。
プロジェクトを作成すると、アプリケーションのひな形ができます。画面左上に表示されている「パッケージエクスプローラー」を確認してみましょう。メインソースファイルとなる「TestZip.mxml」が作成されており、他にもAIRの設定ファイル「TestZip-app.xml」などがあります。
コンポーネントを配置する
では、早速ボタンやエディタなどのコンポーネントを配置してみます。マウス操作で配置したいので、画面を「デザインモード」に切り替えましょう。画面中央のTestZip.mxmlの編集画面の上方にある「ソース|デザイン」というタブの［デザイン］のボタンをクリックします。
次に、コンポーネントの一覧が並んでいるパレットから、「Button」を1つ、「TextInput」を2つ配置します。コンポーネントを配置するには、マウスでコンポーネントのアイコンをドラッグして、ステージ上でドロップします。
プロパティを設定する
コンポーネントを配置したら、コンポーネントのプロパティを設定します。配置したコンポーネントをクリックすると、画面右側の「プロパティ」ビューでプロパティの確認と変更ができるようになります。ここで、次のようにIDとラベルを設定します。
| 種類 | ID | ラベル／テキスト |
|---|---|---|
| Button | buttonGet | 取得 |
| TextInput | textZip | |
| TextInput | textAddress |
「buttonGet」については、クリックした時に郵便番号を取得する処理を記述します。「クリック時」の右側にある稲妻のマークをクリックして、［イベントハンドラーを作成］を選択します。
すると、自動的に画面がソース編集モードに切り替わり、イベントハンドラーの定義「buttonGet_clickHandler」がソースコードに挿入されます。
コードを記述する
後は、ここにWeb APIにアクセスして郵便番号を調べる処理を記述します。buttonGet_clickHandler()を次のように書き換えます。郵便番号のWeb APIにアクセスするために、URLLoaderやXMLといったクラスを利用しているので、ActionScript 3に慣れていないとちょっと驚くかもしれませんが、10行程度のコードなのでコピーして貼り付けてみてください。
<fx:Script>
<![CDATA[
protected function buttonGet_clickHandler(event:MouseEvent):void
{
var loader:URLLoader = new URLLoader();
var request:URLRequest = new URLRequest();
// APIのURLとパラメータをセット
request.url = "http://api.aoikujira.com/zip/xml/get.php" +
"?zn=" + textZip.text;
// APIにアクセスする
loader.addEventListener(Event.COMPLETE, showResult);
loader.load(request);
// 実行結果の表示
function showResult(event:Event):void {
var xml:XML = new XML(event.target.data);
textAddress.text = xml.value.disp;
}
}
]]>
</fx:Script>
実行してみる
Eclipseのツールボタンにあるデバッグのアイコンをクリックして、アプリケーションをデバッグ実行します。
2つ並んだテキストボックス（TextInput）の上側（textZip）に「150-0034」などの郵便番号を入力してボタンをクリックすると、Web APIにアクセスして、郵便番号が取得され下側のテキストボックス（textAddress）に住所が表示されます。
まとめ
今回は、Flexについて概要を紹介して、Flash Builderのインストールし、それを使って簡単なサンプルアプリケーションを作ってみました。今回作ったサンプルでは、プロジェクト作成から実行までの手順の確認が目的でしたので、詳しくコードの解説などできませんでしたが、次回は、もう少し本格的なアプリケーションを作成し、Flexの魅力に迫ってみたいと思います。
