Air アプリを作ってみる

今回はいよいよFlexBuilder3を利用してAirアプリを実際に作成してみたいと思います

以下参考サイト
いまさら聞けないAdobe AIR「超」入門 (1/4)：作って学ぶAIRウィジェットの基礎→応用（1） - ＠IT

まず上記のサイトを参考にしながらFlexBuilder3を起動
おぉ、Eclipse のまんまですね。
Javaでの開発経験がある方であれば何の抵抗もなく操作できそうです。
次にFlexプロジェクトを新規作成します
○Flexプロジェクトの作成
［メニュー］の［ファイル］→［新規］→［Flexプロジェクト］を選択
新規Flexプロジェクトが表示されるのでアプリケーションの種類より
「デスクトップアプリケーション」(Adobe AIRで実行)を選択
ここでは他にも「Webアプリケーション」(Flash Playerで実行)が選択できます
Flex アプリケーションをHTMLに貼り付けたりしたい場合はこちらを選択すればよさそうですね。
最後に［終了］ボタンをクリックすると、空のプロジェクトが作成される
実際に作成するアプリケーションのファイルは .mxml というファイルで
新規プロジェクト作成時の雛形は以下のようになりました

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	
</mx:WindowedApplication>

試しに「Webアプリケーション」を選択してFlexプロジェクトを作成すると
.mxml の雛形は以下のようになりました

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	
</mx:Application>

違いは参考サイトでも書かれている通り、先頭mxタグの

Air :WindowedApplication
Flex:Application

の違いだけ

AIR←→Flexを切り替えるにこのおまじないの修正だけで済むとは、とにかく驚きです

次にデザインの作成です
○デザインの作成
こちらもとても簡単です。
.mxmlファイルをデザインビューに切替えて左に表示されているツールボックスより
コンポーネントを作成中の画面ウィンドウにドラッグ&ドロップで配置するだけ
それにしてもFlexBuilder3は、流石にEclipseベースだけあって操作感が素晴らしいです
VisualStudioのもっさりした感じから比べると非常にスムーズにデザインが作成できます
あっという間にUIが作成できました。
ましてや、Javaのアップレットをゴリゴリプログラムしてた頃など遠い日の思い出になりました。

以下、参考サイト以外に作成したくだらないデモアプリイメージ

一番驚いたのは開発中のデザインビューでアコーディオンのバーをクリックすれば
ちゃんと内容が開いて確認できるところです。
この辺りの細かい配慮はVisualStudioに見習って欲しいですね。

次にデザインビューからソースビューに切替えてのソースコードの修正ですが
こちらもEclipseのソースコード補完機能がフルサポートされている為、実に楽チンです。
○ソース編集画面

お馴染みの頭文字入力Ctrl+space にて軽快に補完されます
以下デザインビューにてコントロール配置により記述されたソース

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" 
 layout="absolute" width="572" height="302">
    <mx:ApplicationControlBar x="0" y="0" width="740" height="32">
    </mx:ApplicationControlBar>
    <mx:Accordion x="29.5" y="59" width="511" height="200">
    <mx:Canvas label="コンテンツトップ" width="100%" 
               height="100%" cornerRadius="11" borderColor="#3D95D2">
        <mx:Text x="56" y="24" text="ああああああああ" width="322" height="66"/>
    </mx:Canvas>
    <mx:Canvas label="コンテンツ１" width="100%" height="100%">
        <mx:Text x="56" y="24" text="いいいいいいいい" width="322" height="66"/>
    </mx:Canvas>
    <mx:Canvas label="コンテンツ２" width="100%" height="100%">
        <mx:Text x="56" y="24" text="うううううううう" width="322" height="66"/>
    </mx:Canvas>
    </mx:Accordion>	
</mx:WindowedApplication>

このように mxml にはコンポーネントの位置情報やサイズなどのレイアウト情報をxmlで表します

○イベントとイベントハンドラの定義
Flexアプリでは、VB や ASP.Net のようにイベントドリブン型のプログラミングを行うそうです。
JavaScriptな方からすると、これはフォームのイベントに関数を割り当てるのに似ていますね。

以下、参考サイトのタイマーアプリのソースより抜粋

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

イベントに対応するイベントハンドラ(関数)は
タグを挿入して、ActionScriptにて
直接MXML内にスクリプトを書いて実装していきます

  <mx:Script>
  <![CDATA[
    /**
    * スタートボタンクリックイベントハンドラ
    */
    private function onStartButtonClick():void {
       //スタートボタン押下時の処理を記述
    }
　]]>;
  </mx:Script>

アクションスクリプトの基本は以下のサイトにて後日学習しようと思います
Flashの要となるスクリプト言語「ActionScript」とは？ (1/3)：Flashの基礎を無料で習得！ ActionScript入門（1） - ＠IT
○アプリの実行
［メニュー］の［実行］→［アプリ名××を実行］選択
これでサクット動作の確認が出来ます

○パッケージング
アプリが完成したら、次は配布用の状態に書き出しを行います

［メニュー］→［書き出し］→［リリースビルド］
リリースビルドを実行するとインストーラを含んだ
拡張子が「.air」のファイルが作成されます

また、Airではインストーラを作成するのにデジタル署名を添付する必要があります。
デジタル署名の作成も、リリースビルドにてFlexBuilder3より作成できます。

上記[リリースビルド]実行にて表示されるリリースビルドの書出し
ウィザードにて書出しファイル名.air を確認後次へ選択
デジタル署名設定画面の右端にある作成ボタンを押下
発行者名、パスワードなど必要な情報を入力して保存先を指定して
証明書キーファイルを作成
デジタル署名画面より参照ボタンを押下して作成した証明書を
選択、パスワードを入力して終了ボタンを押下する

○アプリのインストール
書き出された.air ファイルをクリックするとインストーラが起動する

インストーラを実行すると、デスクトップへのショートカット配置
スタートメニューへの登録も行ってくれます。これは便利！！

そんなこんなで、比較的簡単に、ってサンプル見ながら同じもの作成しただけですが・・・
しかし今回だけでも、FlexBuilderの使い勝手の良さを十分に体験することができました。

次回はもう少しActionScriptを勉強してから、もうちっとましで実用的なアプリを作成してみたいと思います