いまさら聞けないAdobe AIR「超」入門：作って学ぶAIRウィジェットの基礎→応用（1）（3/4 ページ）

» 2008年01月25日 00時00分公開

[福田寅成，クラスメソッド株式会社]

AIRのソースコードを修正してみよう

　次に、［デザイン］ビューで作成したソースコードを［ソース］ビューで修正していくことにします。まず「ソース」タブで画面を［ソース］ビューに切り替えます。

　手順【2】までで自動的に作成されたソースコードは以下のようになっています。

ソースコード1　［デザイン］ビューでの設計の結果のソースコード

<?xml version="1.0" encoding="utf-8"?>

              <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"   layout="absolute" >

                  <mx:ApplicationControlBar x="0" y="0" dock="true">

                    <mx:Button label="スタート" id="startButton" width="100"/>

                    <mx:Button label="ストップ" id="stopButton" width="100"/>

                    <mx:Button label="リセット" id="resetButton" width="100"/>

                  </mx:ApplicationControlBar>

                  <mx:Label x="354" y="241" text="00:00" id="timeLabel" 

                    fontSize="100"/>

            </mx:WindowedApplication>

　いくつかのポイントを確認していきましょう。

AIR←→Flexを切り替えるには？

一番外側に＜mx: WindowedApplication＞タグがある

　これがデスクトップ・アプリケーションを表すタグです。HTMLでいう＜html＞タグ、Flexでいう＜mx:Application＞タグと同じようにアプリケーションの種類を定義しています（Flex開発をしたことのある方へ：Flexから大きく変わったのは、このタグだけです。Flexに1つのおまじないをすることによりあっという間にAIRに早変わりというわけです）。

コントロールはすべてmxから始まるタグで表現されている

　これはFlexで提供されるコンポーネントで共通しています。WindowedApplicationタグ以外はFlexでも同様に利用ができるコンポーネントです。

手順【1】この段階でレイアウトの設定を微調整する

　少ししつこい感じになりますが、以下ではFlex Builderのソースコード・エディタのソースコード補完機能を利用してソースコードを修正してみることにします。

「timeLabel」の「x」（座標）と「y」（座標）の設定を削り、WindowedApplicationタグの設定を修正
「layout」の前で改行し、「absolute」を削る。ダブルクオーテーション（"）だけになったところでCtrl＋Spaceを押すと、layoutに設定できる属性の候補が表示されるので、「vertical」を選択（Enterキー）。
「layout="vertival"」の次で改行し、キーボードで「ho」と入力し、Ctrl＋Spaceキーを押したたときに最初に出てくる候補の「horizontalAlign」を選択（Enterキー）し、さらに出てくる候補から「center」を選択（Enterキー）
「horizontalAlign="center"」の次で改行し、キーボードで「ver」と入力し、Ctrl＋Spaceを押したたときに最初に出てくる候補の「verticalAlign」を選択（Enterキー）し、さらに出てくる候補から「middle」を選択（Enterキー）
「ApplicationControlBar」の「x」と「y」を削り、horizontalAlignに「center」を設定（上記と同様に補完を利用する）

　これにより、全体に張り付けたコンポーネントが上から下に縦に順にレイアウトされ（vertical）、横方向に中央ぞろえ（horizontalAlign="center"）、縦方向にも中央ぞろえ（verticalAlign="middle"）されるようになります。また、ApplicationControlBar内の3つのボタンが中央に整列されるようになります。

　ここで無駄な空行を削除しておきます。ここまでの結果のソースコードは以下のようになります。

ソースコード2　レイアウト関連の属性修正の結果のソースコード

<?xml version="1.0" encoding="utf-8"?>

              <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" 

                layout="vertical"
                horizontalAlign="center"
                verticalAlign="middle">

                <mx:ApplicationControlBar dock="true" horizontalAlign="center">

                  <mx:Button label="スタート" id="startButton" width="100"/>

                  <mx:Button label="ストップ" id="stopButton" width="100"/>

                  <mx:Button label="リセット" id="resetButton" width="100"/>

                </mx:ApplicationControlBar>

                <mx:Label text="00:00" id="timeLabel" fontSize="100"/>

                </mx:WindowedApplication>

手順【2】ここまでで、いったん実行

　Flex Builder 3の上部の虫のアイコンをクリックして、アプリケーションをデバッグ実行してみましょう。［メニュー］から［実行］→［SimpleTimerのデバッグ］を選ぶか、F11キーを押すことでもデバッグ実行できます。起動したSimpleTimerのイメージは以下のようになります。

図14　実行結果

　実行結果を確認したら、いったん右上の［×］ボタンでアプリケーションを終了しておきます。

アプリケーションのイベントを定義するには？

　各コンポーネントには各種イベントを定義できます。ボタンでは「クリックイベント」が有名ですね。ほかにはマウスが動いたときに起こるイベントや、テキスト入力に文字が入力されたイベントなどが有名です。

手順【1】イベントの定義

　以下のように、一番外側のタグ（mx:WindowedApplicationタグ）とボタンタグにイベントを定義し、そのイベントの「イベントハンドラ」を指定します。「イベントハンドラ」とはイベントが起こった際に何らかの処理を行う「関数」です。


タグ（id）	イベント	イベントハンドラ
＜mx:WindowedApplication＞	creationComplete	onCreationComplete()
＜mx:Button＞（startButton）	click	onStartButtonClick()
＜mx:Button＞（stopButton）	click	onStopButtonClick()
＜mx:Button＞（resetButton）	click	onResetButtonClick()
表5　イベントとイベントハンドラの定義

　startButtonを例に取ると、「click=onStartButtonClick」という感じでプロパティとプロパティ値がタグに追加されることになります。この例を日本語に訳すると、「スタートボタンをクリックした場合、onStartButtonClick関数が呼ばれる」というような意味になります。イベントハンドラ名はここでは「on＋ID＋イベント種別」という規則で命名しています。

手順【2】ソースコードの確認

　ここまでのソースコードは以下のようになります。ただし、ここまでの段階では、［ソース］ビューの左側に×印が4つ現れていて、エラーが発生している状態です。

ソースコード3　コンポーネントにイベントを定義したソースコード

<?xml version="1.0" encoding="utf-8"?>

              <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" 

                layout="vertical"
                horizontalAlign="center"
                verticalAlign="middle"

                creationComplete="onCreationComplete()">

                <mx:ApplicationControlBar dock="true" horizontalAlign="center">

                  <mx:Button label="スタート" id="startButton" width="100" 

                     click="onStartButtonClick()"/>

                    <mx:Button label="ストップ" id="stopButton" width="100" 

                         click="onStopButtonClick()"/>

                        <mx:Button label="リセット" id="resetButton" width="100" 

                             click="onResetButtonClick()"/>

                          </mx:ApplicationControlBar>

                            <mx:Label text="00:00" id="timeLabel" fontSize="100"/>

                            </mx:WindowedApplication>

手順【3】＜mx:Script＞タグを作成

　次に、イベントを処理するイベントハンドラを作成します。ここからはスクリプトを書く必要があります。今回は直接MXML内にスクリプトを書くことにします。

　ここで出てくる「スクリプト」が「ActionScript」です。JavaやC#、JavaScriptに似たスクリプト言語で、Javaなどを経験したことのある方はスムーズに理解できると思います（ActionScriptの基本的な部分に関しては、連載「Flashの基礎を無料で習得！ ActionScript入門」を参照してください）。

　では、＜mx:Script＞タグを作成してみましょう。

「"onCreationComplete()">」の次で改行
「<」を入力する
「s」を入力する
最初に出てきた補完候補の「mx:Script」を選択（Enterキー）
「>」を入力する

　上記作業で以下のスクリプトタグが作成されます。

ソースコード4　<mx:Script>タグ

   <mx:Script>

                <![CDATA[

              

                ]]>

              </mx:Script>

　この「CDATA[」の次の行から実際にスクリプトを記述していくことになります。

手順【4】空のイベントハンドラを作成

　以下のソースコードのように、4つの空のイベントハンドラを定義します。

ソースコード5　空のイベントハンドラ

     /**

                  * 初期起動イベントハンドラ

    */

                  private function onCreationComplete():void {

              

                  }

                  /**

                  * スタートボタンクリックイベントハンドラ

    */

                  private function onStartButtonClick():void {

              

                  }

                  /**

                  * ストップボタンクリックイベントハンドラ

    */

                  private function onStopButtonClick():void {

              

                  }

                  /**

                  * リセットボタンクリックイベントハンドラ

    */

                  private function onResetButtonClick():void {

              

                }

　それぞれ、スコープとして「private」、関数を表す「function」を付けて、先にメソッド名を定義し、その後に、戻り値の型「void」を指定しています。

　また、ASDocのコメントも付けています。JavaDocなどと同じ流儀で変数や関数にコメントを書いておくことができます。

手順【5】実行＆ソースコードの保存

　エラーなく実行できるか確認してみましょう。先ほどはデバッグ実行をしてみましたが、今回は普通の「実行」を行ってみます。右矢印ボタンか、［メニュー］の［実行］→［SimpleTimerを実行］で実行できます。忘れずにソースコードを保存しておきましょう！

AIRウィジェットにタイマーを設定するには？

　タイマー処理を実装するために、「タイマー」を利用することにします。「タイマー」は一定時間ごとに決まった処理を行いたい場合に使うオブジェクトです。

　以下のソースコードを先ほど実装した関数の「前」の部分に追加します。

ソースコード6　タイマーオブジェクトなど変数／定数の実装

     /** タイマーのインターバル */

                  private const TIMER_INTERVAL:int = 10;

                  /** Timerオブジェクト */

                  private var timer:Timer;

                  /** カウントダウン開始時刻（ミリ秒） */

                private var startTime:int;