FlashDevelopとFlex 3 SDKでAdobe AIR

前にhtmlとcssとJavaScriptでAdobe AIR - 今日覚えたことというのを書いたけど、今度はActionScriptでAdobe AIRをやってみた。

といっても開発ツールのFlashは使わないで、FlashDevelopとFlex 3 SDKだけを使って、無償で開発できるようにした。

用意するもの

Flex 3 SDK(今回は3.3.0.4852のAdobe Flex SDK版を使った)
FlashDevelop(今回は3.0.0のRC5を使った)
Adobe AIRランタイム(今回は1.5.1を入れた)

あと、Flex 3 SDKの動作のためにはJavaランタイム、FlashDevelopの動作のためには.NET Framework 2.0が必要なのでそれも無い人は入れなきゃいけない。

残念ながらFlashDevelopはWindows専用。Macでは無理。.NET製なのでmonoでいけるかとも思ったけど、Windowsネイティブで作られてる部分があるらしく、無理なんだそうだ。なのでVMware Fusion上で動くVistaで動かした。クロスプラットフォーム版の開発も進んでいるらしいので今後に期待。

インストール

Flex 3 SDKは、zipを解凍して適当なところに置くだけ。例えば「C:\flex」とかでいいと思う。FlashDevelopとAIRランタイムはインストーラーで入れるだけ。

FlashDevelopを起動するとこんな感じ。

設定

FlashDevelopを起動する。
メニューから「Tools」→「Program Settings」を選ぶ。
左のリストの中から「FlashDevelop」を選び、右のリストの「Fallback CodePage」を「UTF8」にする。
左のリストの中から「AS3Context」を選び、右のリストの「Flex SDK Location」を「C:\flex」にする。
「Close」ボタンを押して閉じる。

これで準備完了。

Flex SDK Locationはわかると思うけど、Fallback CodePageの方は、文字コードが認識できないときに強制的に使う文字コード、みたいな意味なのかな？FlashDevelopのエディタはBOMの無いutf-8で文字化けしていた気がするが、その辺が解消されるっぽい。

プロジェクトを作る

さっそく、電卓アプリでも作ってみる。

メニューから「Project」→「New Project」を選ぶ。
上のリストの中から「AIR AS3 Projector」を選ぶ。
Nameのところに好きな名前を入れる(今回は電卓なので「Calculator」とした)。
Locationのところで保存場所を入れる。
Packageのところに好きなパッケージ名を入れる(今回は「com.nacookan.calculator」とした)。
「Create directory for project」にチェックを入れる。その方が管理しやすそう。

これで「OK」を押せばプロジェクトが作成される。プロジェクトファイルだけじゃなく、必要なファイルがいろいろと生成される。

コードを書く

プロジェクトのファイルは、画面右側の「Project」ペインで見れる。

srcの下に、パッケージ名をそのまま階層にしたフォルダがあって、最後に「Main.as」というファイルが作られているので、これをダブルクリックして開く。

ここにコードを書けばいいというわけ。

さっそく書いてみる。

package com.nacookan.calculator
{
    import flash.display.*;
    import flash.events.*;
    import flash.text.*;
    import flash.desktop.NativeApplication;
    
    /**
     * ...
     * @author nacookan
     */
    public class Main extends Sprite 
    {
        public function Main():void 
        {
            var wall:Sprite = new Sprite();
            wall.graphics.beginFill(0x0099ff);
            wall.graphics.drawRect(0, 0, stage.stageWidth - 100, stage.stageHeight - 100);
            wall.graphics.endFill();
            wall.x = 50;
            wall.y = 50;
            addChild(wall);
            
            var format:TextFormat = new TextFormat();
            format.color = 0xffffff;
            format.size = 20;
            var label:TextField = new TextField();
            label.defaultTextFormat = format;
            label.text = 'Hello world!';
            label.autoSize = TextFieldAutoSize.LEFT;
            label.mouseEnabled = false;
            label.x = (wall.width - label.width) / 2;
            label.y = (wall.height - label.height) / 2;
            wall.addChild(label);
            
            wall.addEventListener(MouseEvent.CLICK, function(e:Event):void {
                NativeApplication.nativeApplication.exit();
            });
        }
    }
}

これはまだ電卓じゃないよ。動作確認用の小さなプログラム。F5キー(またはCtrl + Enter)を押すと、ビルドして実行する。

こんなアプリが起動する。青い部分をクリックするとアプリは終了する。まだそれだけ。

AIRパッケージ化

アプリが完成したら、配布するためにAIRパッケージにする。

ホントはコマンド操作がいくつかあるんだけど、FlashDevelopがバッチファイルを生成してくれているので、だいぶ簡単にできる。

コマンドプロンプトを起動して、プロジェクトのフォルダに移動し、以下の操作をする。

C:\Users\nacookan\Documents\air\Calculator>CreateCertificate.bat

Certificate created: SelfSigned.pfx
With password: fd

Hint: you may have to wait a few minutes before using this certificate to build
your AIR application setup.

続行するには何かキーを押してください . . .

C:\Users\nacookan\Documents\air\Calculator>PackageApplication.bat
Signing AIR setup using certificate SelfSigned.pfx.
password:

AIR setup created: air/Calculator.air

続行するには何かキーを押してください . . .

C:\Users\nacookan\Documents\air\Calculator>

ごちゃごちゃ書いたけど、やったことは2つのバッチファイルを起動しただけ。

最初のバッチファイルでは署名を作っている。で、次のバッチファイルでAIRパッケージを作成している感じ。署名を作るのは最初の一回だけで良い。

署名を作るときに自動的に「fd」っていうパスワードが設定されているので、AIRパッケージを作るときにパスワードを聞かれたらそれを入力するのがポイント。パスワードを変更したければ、「CreateCertificate.bat」の中を書き換えればおｋ。

これで、プロジェクトのフォルダの「air」っていうフォルダに、「Calculator.air」っていうファイルが生成された。これが完成品。

.airファイル

このairファイルをダブルクリックすると、さっきのアプリのインストールが始まって、アプリが使えるようになる。アプリを配布したりするときは、このairファイルだけを配布するわけだ。

また、Web上にこのairファイルをアップロードして、Webページに専用のhtmlタグを貼るなどの準備をすると、そのままWebからアプリをインストールできるようになる(シームレスインストール)。アプリの配布がものすごく簡単。

電卓アプリを作る

ってことで、練習として電卓アプリを作ってみた。

Calculator.air

まずAIRランタイムを入れて(まだ入ってないなら)、上記のリンクからairファイルをダウンロードし、ダブルクリックするとインストールが始まる。AIRなのでWindowsでもMacでもLinuxでも動くと思う。シームレスインストールもやってみたかったけど、はてなダイアリーには専用のhtmlタグを貼れないようなのであきらめた。

あとFlash Player 10も必要。

また、インストールが面倒だという人のために、AIRじゃなく普通のFlashとして貼り付けてみる。

Flashの貼り付けにははてなダイアリーに Flash を埋め込むガジェット - てっく煮ブログ跡地を利用させてもらいました。

上記に貼り付けたFlashが見れない人は、swfファイルへのリンクからどうぞ。

見ての通り、単なる電卓のアプリ。ただ、いかにもAIR(Flash)だってことがわかるように、動きをいろいろ付けてみた。小数点が入力できなかったり、桁あふれの処理をしてなかったり、電卓としての実用性はゼロ。あくまでサンプルだと思ってほしい。