SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Adobe Developer Connection(PR)

Adobe AIR 2をはじめよう
~ Adobe AIR 2 マスターシリーズ

  • このエントリーをはてなブックマークに追加

Adobe AIR 2アプリケーション作成の手順

 開発環境が整ったところで、実際にAIR 2アプリケーションを作成してみましょう。作成するのは、現在時刻を表示するだけのシンプルな時計アプリです。ここでは手順を理解してもらうことを目的としているため、コードの解説は省きます。

Flash Builder 4で作成する

 ここでは、Flex Frameworkを使用せずにActionScript 3.0で開発する方法を解説します。

  1. メニューから[ファイル]→[新規]→[Flex プロジェクト]を選択します。
  2. [新規Flexプロジェクト]ダイアログが表示されるので、プロジェクト名に「clock」を入力し、アプリケーションの種類は[デスクトップ]を選択して[終了]ボタンをクリックします。すると、プロジェクトに必要なファイルが生成されます。
  3. ステップ2で、プロジェクト名と同一のMXMLファイルが生成されます。この「clock.mxml」が、Flexアプリケーションの実装ファイルです。以下のように記述します。
  4. <?xml version="1.0" encoding="utf-8"?>
    <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                           xmlns:s="library://ns.adobe.com/flex/spark" 
                           xmlns:mx="library://ns.adobe.com/flex/mx"
                           width="200"
                           height="100"
                           showStatusBar="false"
    
    applicationComplete="applicationCompleteHandler()"
                           >
        <fx:Declarations>
            <!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 -->
        </fx:Declarations>
    
        <fx:Script>
            <![CDATA[
                private function applicationCompleteHandler():void {
                    var clock:SimpleClock = new SimpleClock();
                    con.addChild(clock);
                    clock.start();
                }
            ]]>
        </fx:Script>
    
        <s:SpriteVisualElement id="con"/>
    
    </s:WindowedApplication>
    
    ※注意

     今回のサンプルでは、"時計"のコアとなる部分をFlex Frameworkに依存しない素のActionScript 3.0で記述し、Flexアプリケーションと後述のFlashアプリケーションともに、トップレベルでコア部分を"乗せる"構造になっています。

  5. 次に、clock.mxmlと同一のパッケージ階層に「SimpleClock.as」を作成します。これは時計の処理を実装するクラスになります。パッケージエクスプローラの(default package)を右クリックし、[新規]→[ActionScript クラス]を選択します。[新規ActionScriptクラス]ダイアログが表示されるので、名前に「SimpleClock」、スーパークラスに「Sprite」と入力します。
  6. 作成した「SimpleClock.as」をダブルクリックして開き、以下のように記述します。
  7. package  {
    
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.TimerEvent;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;
    import flash.text.TextFieldType;
    import flash.text.TextFormat;
    import flash.utils.Timer;
    
    /**
     * 単純な時計クラス
     */
    public class SimpleClock extends Sprite {
    
        /** 時刻を表示するテキストフィールド */
        private var timeText:TextField;
    
        /** タイマーインスタンス */
        private var timer:Timer;
    
        /**
         * コンストラクタ
         */
        public function SimpleClock() {
            // 時刻を表示するテキストフィールドの生成・設定
            timeText = new TextField();
            timeText.type = TextFieldType.DYNAMIC;
            timeText.autoSize = TextFieldAutoSize.LEFT;
    
            // 時刻を表示するテキストを中央揃えにするために、"stage"プロパティを参照する必要があるが、
            // コンストラクタ内では、まだ"stage"プロパティに参照できないため、
            // ADDED_TO_STAGEイベントが発生するのを待つ
            timeText.addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
    
            // タイマーの生成
            timer = new Timer(1000); // 1秒おきにハンドラが呼ばれるようにする
            timer.addEventListener(TimerEvent.TIMER, timerHandler);
    
            addChild(timeText);
    
            // 今の時刻を初期表示する
            timeText.text = formatDate(new Date());
    
            // 文字のスタイルを設定
            var textFormat:TextFormat = new TextFormat();
            textFormat.color = 0x000000;
            textFormat.size = 18;
            timeText.setTextFormat(textFormat);
            timeText.defaultTextFormat = textFormat;
        }
    
        /**
         * 時刻を表示するテキストフィールドがステージに追加され(表示された)時に呼ばれるハンドラ
         */
        private function addedToStageHandler(event:Event):void {
            // イベントの監視を解除
            removeEventListener(event.type, arguments.callee);
    
            // 時刻をステージの中央に表示する
            timeText.x = stage.stageWidth  / 2 - timeText.textWidth  / 2;
            timeText.y = stage.stageHeight / 2 - timeText.textHeight / 2;
        }
    
        /**
         * Timerインスタンスで指定した、規定の間隔が経過した時に呼ばれるハンドラ
         */
        private function timerHandler(event:TimerEvent):void {
            timeText.text = formatDate(new Date());
        }
    
        /**
         * 時計を開始する
         */
        public function start():void {
            timer.start();
        }
    
        /**
         * 時刻を整形する
         */
        private function formatDate(d:Date):String {
            var time:String = d.fullYear + "/";
    
            time += leftpadZero(d.month + 1) + "/";
            time += leftpadZero(d.date) + " ";
            time += leftpadZero(d.hours) + ":";
            time += leftpadZero(d.minutes) + ":";
            time += leftpadZero(d.seconds);
            return time;
        }
    
        /**
         * 10未満の数に対し左に"0"を追加して、文字列として返す
         */
        private function leftpadZero(n:int):String {
            var s:String = "";
            if (n < 10) {
                 s = "0" + n;
            } else {
                s = n.toString();
            }
            return s;
        }
    }
    
    }
    
  8. clock.mxmlは、以下のように記述します。widthとheightの指定、ステータスバーの非表示、アプリケーション構築完了時のイベントハンドラなどを定義しています。
  9. <?xml version="1.0" encoding="utf-8"?>
    <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
    
    xmlns:s="library://ns.adobe.com/flex/spark" 
    
    xmlns:mx="library://ns.adobe.com/flex/mx"
                                                      width="200"
                                                      height="100"
                                                      showStatusBar="false"
    applicationComplete="applicationCompleteHandler()"
                                                      >
        <fx:Declarations>
            <!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 -->
        </fx:Declarations>
    
        <fx:Script>
            <![CDATA[
                private function applicationCompleteHandler():void {
                    var clock:SimpleClock = new SimpleClock();
                    con.addChild(clock);
                    clock.start();
                }
            ]]>
        </fx:Script>
    
        <s:SpriteVisualElement id="con"/>
    
    </s:WindowedApplication>
    
  10. 動作確認をしてみましょう。clock.mxmlを選択し、デバッグボタンをクリックします。
  11.  下図のような画面が表示されたら、無事に動作しています!

  12. AIR 2アプリケーションとしてパブリッシュしましょう。メニューから[プロジェクト]→[リリースビルドの書き出し]を選択します。[リリースビルドの書き出し]ダイアログが表示されますので、適切に設定してください。[書き出し]欄で[ネイティブインストーラーに書き出し]を選択すると、OSネイティブな形式で書き出されます。これはAdobe AIR 2の新機能です。デフォルトのまま([AIRファイルに書き出し]を選択した状態)だと、OSに依存しないAIRファイルとして生成されます。
  13. 次に電子署名を設定します。電子署名とは、Adobe AIRアプリケーションの作成者を識別するためのもので、正式な電子署名を得るには、外部の証明書発行者から購入する必要があります。正式に配布するAdobe AIRアプリケーションには正式な電子署名が必要となりますが、開発時には仮の電子署名ファイル「自己署名入りデジタル証明書」で十分です。
  14.  取得した電子署名ファイルがあれば、それを指定してください。なければ、開発時用として仮の電子署名ファイル「自己署名入りデジタル証明書」を作成します。[証明書]欄の右側にある[作成]ボタンをクリックします。

  15. 入力欄すべてに「test」と入力し、[OK]ボタンをクリックします。
  16. ステップ9のダイアログに戻るので、[このセッション中はパスワードを記憶]にチェックを入れ、「次へ」ボタンをクリックします。これで作業完了です。AIRファイルまたはネイティブインストーラが生成されます。これらは、パッケージエクスプローラから確認することができます。

次のページ
AIR 2アプリケーションの配布方法

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
Adobe Developer Connection連載記事一覧

もっと読む

この記事の著者

クラスメソッド株式会社 篠崎 大地(シノザキ ダイチ)

クラスメソッド株式会社(http://www.classmethod.jp/)所属テクニカルスペシャリスト。金融系システムのRIA化を得意とし、日々アーキテクチャー設計と実装に奮闘中。Adobe Certified Flex 2.0 Developer。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5489 2010/11/08 22:23

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング