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

作って学ぶAIRウィジェットの基礎→応用(1):いまさら聞けないAdobe AIR「超」入門 (4/4)

[福田寅成,クラスメソッド株式会社]
前のページへ 1|2|3|4       

アプリケーションのイベントを実装してみよう

 ここまでで、プログラムの骨格はすべてできました。後は、イベントハンドラの中身を実装するだけです。下記にイベントハンドラごとの処理の実装例を挙げます。

手順【1】初期起動イベントハンドラの実装

ソースコード7 初期起動イベントハンドラの実装
    private function onCreationComplete():void {
        // タイマーオブジェクトの初期化
        timer = new Timer(TIMER_INTERVAL);
        // イベントハンドラの設定
        // (イベントの種類とイベントハンドラ関数名)

        timer.addEventListener(TimerEvent.TIMER, onTimerTick);
        // 時刻の初期表示を03:00にする
        timeLabel.text = "03:00";
    }

 ここでのポイントはタイマーオブジェクトへのイベントハンドラ(リスナ)の登録です。addEventListernerの第1引数はイベントの種類(ここでは一定時間ごとにイベントが発生するタイプのイベント)、第2引数はイベントハンドラの関数名です。この「onTimerTick」関数は後で実装します。

手順【2】スタートボタンをクリック時のイベントハンドラの実装

ソースコード8 スタートボタンクリックイベントハンドラの実装
    private function onStartButtonClick():void {
        // 開始時刻を取得
        startTime = getTimer();
        // タイマーをスタート
        timer.start();
    }

 getTimer()関数で現在時刻を取得し、タイマーをスタートさせています。タイマースタート後TIMER_INTERVALミリ秒ごとにonTimerTick関数が呼ばれることになります。このgetTimer()関数は「import文」を使ってMXMLに読み込まないと使えません。

 import文を書くのは面倒なので、「gett」と入力してCtrl+Spaceキーで入力候補を表示し、Enterキーを押せば、ソースコードの一番上の方に以下のimport文が追加されます。

ソースコード9 自動的なimport文の追加
    import flash.utils.getTimer

手順【3】ストップ・ボタンをクリック時のイベントハンドラの実装

ソースコード10 ストップボタンクリックイベントハンドラの実装
    private function onStopButtonClick():void {
        // タイマーを停止
        timer.stop();
    }

 タイマーを停止しているだけのシンプルな実装です。

手順【4】リセット・ボタンをクリック時のイベントハンドラの実装

ソースコード11 リセットボタンクリックイベントハンドラの実装
    private function onResetButtonClick():void {
        // タイマーを停止
        timer.stop();
        // ラベルの表示をデフォルトに戻す
        timeLabel.text = "03:00";
    }

 タイマーを停止して、時刻の表示を初期値の「03:00」に戻しています。

 ここまで実装しましたが、「onTimerTick」関数が存在していないので、実行しようとしてもエラーで中断してしまいます。

手順【5】タイマーのイベントハンドラの実装

 タイマーイベントのイベントハンドラであるonTimerTick関数を関数の定義から実装していきます。

ソースコード12 タイマーイベントハンドラの実装
    private function onTimerTick(event:TimerEvent):void {
        // 経過時間(秒)
        var elapsedTime:int = (getTimer() - startTime)/1000;
        // 3分から経過時間を引く
        var dispTime:int = 60*3 - elapsedTime;
        // 表示時刻をフォーマットし、ラベルに表示する
        if(dispTime >= 60) {
            var min:int = dispTime/60;
            var sec:int = dispTime - 60*min;
            timeLabel.text = formatTime(min, sec);
        } else if(dispTime >= 0) {
            timeLabel.text = formatTime(0, dispTime);
        } else {
            timeLabel.text = "00:00";
            timer.stop();
        }
    }

 シンプルに表示時刻を計算しています。ここで「formatTime」という関数が出てきていますが、これは下記のようなユーティリティ関数です。onTimerTick関数の直下に実装しておきましょう。

ソースコード13 時刻フォーマットするユーティリティ関数の実装
    private function formatTime(min:int, sec:int):String {
        var minString:String = "";
        var secString:String = "";

        if(min < 10) {
            minString = "0" + String(min);
        } else {
            minString = String(min);
        }

        if(sec < 10) {
            secString = "0" + String(sec);
        } else {
            secString = String(sec);
        }
        return minString.concat(":").concat(secString);
    }

 これですべての実装が終了しました!! オツカレサマデス!

サンプル・ウィジェットを動かしてみよう!

 Flex Builder 3の[メニュー]から[実行]または[デバッグ]を選んでサンプル・ウィジェットを実行してみましょう。スタートボタンをクリックすると、1秒ごとに時刻がカウントダウンされていくと思います。

AIRウィジェットとしてパッケージングするには?

 ここまでの開発では、すべてFlex Builder 3上で実行していました。完成したサンプル・ウィジェットからインストーラを作成し、メールやWebなどで配布してPCにインストールできるような形にパッケージングしたいと思います。

手順【1】書き出すアプリケーションの設定

 [メニュー]→[書き出し]→[リリースビルド]を選択して、表示されたダイアログのプロジェクト名、アプリケーション名、書き出されたファイル名を確認します。3つ目のファイルが新しく登場する「AIRファイル」です。

 AIRウィジェット(のインストーラ)は拡張子が「.air」のファイルとなります。この設定でプロジェクトフォルダの直下にSimpleTimer.airが生成されることになります。

図15 書き出すウィジェットの設定 図15 書き出すウィジェットの設定

 [次へ]ボタンをクリックします。

手順【2】デジタル署名の設定

 AIRでは、必ずデジタル署名を添付してインストーラを作成する必要があります。ここでは、簡単に署名を新規作成し、インストーラに添付することにします。

 Digital Signature(デジタル署名)画面の右の方にある作成ボタンをクリックして、下記画面を開き、デジタル署名を作成します。

図16 デジタル署名の作成 図16 デジタル署名の作成

 最初に会社名などを、次にパスワードの確認でもう一度パスワードを入力してください。最後に、デジタル署名ファイルを保存する場所とファイル名を指定します。ここでは、マイドキュメントの直下に保存しています。

 [OK]ボタンをクリックすると、デジタル署名の添付画面に戻ります。

図17 デジタル署名の添付 図17 デジタル署名の添付

 準備が終わったので、[終了]ボタンをクリックします。これでSimpleTimerプロジェクトの直下にAIRファイルが生成されます。具体的には「マイドキュメント\Flex Builder 3\SimpleTimer」に生成されています。

図18 AIRインストーラ・パッケージ 図18 AIRインストーラ・パッケージ

 これで、AIR開発の一連の流れが体験できました。前述したようにサンプル・ウィジェットをダウンロードして実行してみましょう。

さらにAIRの特徴を生かしたサンプルを作って学ぼう

 さて今回は、Adobe AIRの概要・特徴やAIRウィジェットの使い方、Flexをベースにした簡単なAIRウィジェットの作り方などを解説しましたが、いかがでしたでしょうか。次回からは、さらにAIRの特徴を生かした楽しいサンプルを作ってAIRウィジェットへの理解を深めていきましょう。

 今回の完全なサンプル(SimpleTimer.mxml)はここからダウンロードできます。また、プロジェクト全体(SimpleTimer.zip)もここからダウンロードできます。

@IT関連記事

Flex2でWebアプリ開発
これまで3週間かかっていたWebアプリのモック開発工程を、3日に短縮できたというFlex2の体験版をダウンロードして簡単アプリを作ってみよう

現場で使えるFlex実践テクニック
本連載では、Flex開発で基本となる特徴的な機能から一歩進んで、実開発の現場でよく使われるテクニックについて、より実践的に解説します

プロフィール

クラスメソッド株式会社 エンタープライズサービス部門 システムエンジニア

福田 寅成(ふくだ ともなり)

大手SIerでの長いJava開発経験を経てクラスメソッドに。 Java、JavaScript/Ajax、Flex、AIR、C#など、さまざまな分野に関する技術調査研究、および業務アプリケーション開発に携わる。 FlexやAIRの開発依頼はコチラ



前のページへ 1|2|3|4       

Copyright © ITmedia, Inc. All Rights Reserved.

編集部からのお知らせ

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。