連載一覧へ

作って学ぶAIRウィジェットの基礎→応用（1）

いまさら聞けないAdobe AIR「超」入門

クラスメソッド株式会社
福田寅成
2008/1/25

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>

- PR -

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

■ 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タグ）とボタンタグにイベントを定義し、そのイベントの「イベントハンドラ」を指定します。「イベントハンドラ」とはイベントが起こった際に何らかの処理を行う「関数」です。

表5　イベントとイベントハンドラの定義

タグ（id）	イベント	イベントハンドラ
<mx:WindowedApplication>	creationComplete	onCreationComplete()
<mx:Button>（startButton）	click	onStartButtonClick()
<mx:Button>（stopButton）	click	onStopButtonClick()
<mx:Button>（resetButton）	click	onResetButtonClick()

　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;

定数は「const」キーワードで定義
変数は「var」キーワードで定義
定数はアルファベット大文字

　「定数がアルファベット大文字」などは、ほかの言語でのコーディング規約とも同じものです。タイマーのインターバルはTimerオブジェクトの初期化のときに、カウントダウン開始時刻はスタートボタンが押されたときに時刻を保持するために後で使います。

　タイマーは1秒ごとにカウントダウンしていくように作るので、タイマーのインターバルは1秒でもよいのですが、精度を高くするために間隔を短くしています（サンプル・ウィジェット完成後、インターバルを1000ミリ秒にして実験してみると、表示がおかしくなる場合があることが分かると思います）。

　いよいよ次ページでは、プログラムを完成させてAIRウィジェットとしてパッケージングします。

1-2-3-4

INDEX
作って学ぶAIRウィジェットの基礎→応用（1）いまさら聞けないAdobe AIR「超」入門
	Page1 「Adobe AIR」とは何か？「アドビの空」？これだけは知っておきたいAIRの5大特徴まずは体験！ AIRウィジェットを動かしてみよう
	Page2 AIRウィジェット作成の準備をしよう AIRプロジェクトを新規作成するには？見た目を作るのは難しい？ソースコードで書くの？
	Page3 AIRのソースコードを修正してみようアプリケーションのイベントを定義するには？ AIRウィジェットにタイマーを設定するには？
	Page4 アプリケーションのイベントを実装してみよう AIRウィジェットとしてパッケージングするには？さらにAIRの特徴を生かしたサンプルを作って学ぼう

作って学ぶAIRウィジェットの基礎→応用バックナンバー

第1回いまさら聞けないAdobe AIR「超」入門
第2回 Flex／AIRウィジェットのデザインをCSSでカッコよく
第3回 Flex Builder 3でサクっとActionScriptコーディング！
最終回 SQLiteのDB操作を追加してAIRウィジェットを完成

リッチクライアント＆帳票全記事一覧へ

TechTargetジャパン

リッチクライアント & 帳票フォーラム新着記事

次のモバイルアプリはどのフレームワークで作る？ （2012/5/24）
スマホアプリの開発を容易にするJavaScriptのフレームワークが続々と増えている。それぞれの良さや仕組み、何がどこまでできるのかを徹底解剖する
「LESS＆専用エディター」でCSSをシンプルに書こう （2012/5/23）
「LESS」はCSS初心者に向けた、シンプルなライブラリだ。「LESS」で、変数などのプログラミングの基礎的な考え方もCSSで学ぼう
学校が世界一のデジタル環境になったら （2012/5/18）
授業はアーカイブに蓄積され、家からも見られる。家族が授業テーマのアイデアを出す。そんな姿が実現されるかもしれない
1000万ドル調達も夢じゃないクラウドファウンディング （2012/5/15）
クラウドファンディングは、寄付型でも投資型でもない「購入型」が主流。商品を“開発する前に販売”して開発費用を集める逆転のシステムだ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial

＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -

アクセスランキング

ニュース一覧へ

お勧め求人情報

転職／派遣情報を探す

エンジニアの求人情報、ただいま増加中
【転職サーチ】SIer／Web企業／新規事業
スマホ開発で、あなたのキャリアを生かす

派遣エンジニアにお役立ちの仕事情報
「派遣・フリーで働くメリット」とは？
活躍する派遣エンジニアの本音

エンジニアのキャリア実現を応援します

ITトレメ「ビジネス基礎」シリーズ開始
「マナー＆コミュニケーション編」「法律・知財・債権管理編」

＊先週の人気講座ランキング＊
～ Android編～

ホワイトペーパー（TechTargetジャパン）