Flexの概要とFlash Builder 4 Eclipseプラグインのインストール方法 ～ Java開発者のためのFlex 4入門

1から分かるJava開発者のためのFlex 4入門（前編）

簡単なAIRアプリケーションを作って実行してみる

　インストールが完了したところで、簡単なアプリケーションを作って実行してみたいと思います。今回作るのは、郵便番号を入力すると住所を表示するという簡単なAIRアプリケーションです。Web APIを使って郵便番号から住所を表示します。

郵便番号検索アプリケーションの完成イメージ

※注

　郵便番号検索のためのWeb APIはいろいろありますが、ここでは「郵便番号API」を利用しました。

「TestZip」プロジェクトの作成

　では、さっそく作っていきましょう。Flash Builderを起動したら、メニューから［ファイル］-［新規］-［Flexプロジェクト］を選択します。

メニューから［ファイル］-［新規］-［Flexプロジェクト］を選択

　プロジェクト名に「TestZip」と記入して、アプリケーションの種類で「デスクトップ（Adobe AIRで実行）」を選択し、［終了］ボタンをクリックします。

プロジェクト名を入力してアプリケーションの種類「デスクトップ」を選び、［終了］ボタンをクリック

　プロジェクトを作成すると、アプリケーションのひな形ができます。画面左上に表示されている「パッケージエクスプローラー」を確認してみましょう。メインソースファイルとなる「TestZip.mxml」が作成されており、他にもAIRの設定ファイル「TestZip-app.xml」などがあります。

作成されたひな形を確認してみる

コンポーネントを配置する

　では、早速ボタンやエディタなどのコンポーネントを配置してみます。マウス操作で配置したいので、画面を「デザインモード」に切り替えましょう。画面中央のTestZip.mxmlの編集画面の上方にある「ソース|デザイン」というタブの［デザイン］のボタンをクリックします。

［デザイン］のボタンをクリック、デザインモードに切り替える

　次に、コンポーネントの一覧が並んでいるパレットから、「Button」を1つ、「TextInput」を2つ配置します。コンポーネントを配置するには、マウスでコンポーネントのアイコンをドラッグして、ステージ上でドロップします。

ドラッグ＆ドロップで、コンポーネントのアイコンをステージ上に配置

プロパティを設定する

　コンポーネントを配置したら、コンポーネントのプロパティを設定します。配置したコンポーネントをクリックすると、画面右側の「プロパティ」ビューでプロパティの確認と変更ができるようになります。ここで、次のようにIDとラベルを設定します。

プロパティ設定

種類	ID	ラベル／テキスト
Button	buttonGet	取得
TextInput	textZip
TextInput	textAddress

プロパティビューで、IDやラベルを設定

　「buttonGet」については、クリックした時に郵便番号を取得する処理を記述します。「クリック時」の右側にある稲妻のマークをクリックして、［イベントハンドラーを作成］を選択します。

稲妻のマークをクリックし、［イベントハンドラーを作成］を選択

　すると、自動的に画面がソース編集モードに切り替わり、イベントハンドラーの定義「buttonGet_clickHandler」がソースコードに挿入されます。

「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の魅力に迫ってみたいと思います。