プログラマのためのFlash遊び方

第9回 AIRに挑戦

この記事を読むのに必要な時間:およそ 5 分

実践的なAIRアプリケーション

最後に,実践的なAIRアプリケーションを作ってみましょう。前回まで作成してきたロゴジェネレータをAIRアプリケーションに移植してみます。AIRの特徴を生かして,ロゴを画像ファイルとして保存できるようにします。

MXMLの修正

まずは,MXML(ComponentTest.mxml)の修正です。ルートタグをWindowedApplicationに変更して,ボタンを追加します。

<?xml version="1.0" encoding="UTF-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:comp="*"
    title="ロゴジェネレータ(AIR版)" backgroundColor="#ffffff">
    <mx:Script>
        <![CDATA[
            private function save():void {
              // あとで実装する
            }
        ]]>
    </mx:Script>
    <mx:Form>
        <!--中略-->
        <mx:FormItem>
            <mx:Button label="保存" click="save()";/>
        </mx:FormItem>
    </mx:Form>

    <mx:Canvas width="100%" height="100%" borderColor="0xcccccc" borderStyle="solid">
        <comp:LogoGenerator id="logo"/>
    </mx:Canvas>
</mx:WindowedApplication>

先ほどと同じように,amxmlcを使ってコンパイルします。

amxmlc ComponentTest.mxml

アプリケーション記述ファイルComponentTest-app.xmlを作成します。

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0">
    <id>LogoGenerator</id>
    <version>0.1</version>
    <filename>LogoGenerator</filename>
    <initialWindow>
        <content>ComponentTest.swf</content>
        <visible>true</visible>
        <systemChrome>none</systemChrome>
        <transparent>true</transparent>
    </initialWindow>
</application>

adl コマンドで実行すると次のようなウインドウが表示されます。

画像

AIRアプリケーションの見た目は完成しました。

ファイル選択ウインドウの表示

次に,ボタンクリック時の処理をActionScript3.0で書いていきます。

まずは保存するファイルを選択するためのウインドウを表示します。FileクラスのbrowseForSave()メソッドが便利です。

import mx.graphics.codec.PNGEncoder;

private function save():void {
    var file:File = new File();
    file.browseForSave("保存するファイルを選択してください")
    file.addEventListener("select", function(event:Event):void {
        // あとで書く
    });
}

Fileクラスはローカルのファイルを扱うための,AIR専用のクラスです。ここまでで再度コンパイルして実行してみましょう。

保存ボタンを押すと,次のようにファイル選択ウインドウが表示されるようになりました。

画像

PNG形式で保存する

最後の仕上げに,指定されたファイル名で保存する部分を実装します。ファイルが選択されると,selectイベントが発生します。selectイベントのハンドラには,次のように記述します。

    // BitmapData オブジェクトにロゴを描画する
    var bmd:BitmapData = new BitmapData(logo.width, logo.height);
    bmd.draw(logo);

    // PNG 画像に変換する
    var encoder:PNGEncoder = new PNGEncoder();
    var bytes:ByteArray = encoder.encode(bmd);
    
    // ファイルに保存する
    var stream:FileStream = new FileStream();
    stream.open(file, FileMode.WRITE);
    stream.writeBytes(bytes);
    stream.close();

PNGファイルをして保存するためにPNGEncoderクラスを利用しています。変換後のデータはByteArrayオブジェクトとして受け取ります。ByteArrayクラスはバイナリデータを扱うためのクラスです。

ファイルに保存するために,FileStreamオブジェクトを作成して,ファイルを書き込み用で開いています。ファイル名はファイル選択ウインドウで選択されたものを利用します。writesBytesメソッドを呼び出してByteArray の中身を書き込んでファイルを閉じています。

これで完成です。最終的にソースコードは次のようになりました。

まとめ

AIRアプリケーションの開発方法を簡単に紹介しました。今回お見せしたように,既存のFlashやFlexアプリケーションを,デスクトップアプリケーションとして再利用できるのも魅力的です。AIRの開発については,gihyo.jpの連載Adobe AIRで作るデスクトップアプリケーションも参考になるでしょう。

この連載では,Flex 3 SDKを利用したFlashの作り方に絞ってActionScript3.0やFlex,AIRの開発方法を説明してきました。この連載をきっかけに,少しでもActionScriptやFlex,AIRに興味を持っていただけたなら幸いです。

繰り返しになりますが,ActionScriptやFlexは,Adobe-Flex:Flexドキュメンテーションに日本語のドキュメントがたっぷりそろっています。この連載は今回で最終回ですが,今後,皆さんで試行錯誤しながら学習していってくださることを期待しています!

著者プロフィール

最田健一(さいたけんいち)

有限会社 CO-CONV勤務のプログラマ。京都在住の京都好き。趣味で ActionScript 3.0やFlex 2を触っていたら,いつの間にか仕事でも使うことになっていた。個人ブログは「てっく煮ブログ」。

URLhttp://tech.nitoyon.com/