gihyo.jpサイトのロゴ

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

第9回AIRに挑戦

2008-05-08

最終回となる今回は、Flex3 SDKを利用して、AIRアプリケーションを作成します。AIR（Adobe Integrated Runtime）とは、ActionScript3.0やFlexを利用してデスクトップアプリケーションを作るための仕組みです。OSの違いを意識することなくデスクトップアプリケーションが作成できるのは大変魅力的です。現在、WindowsとMac OSがサポートされていますが、Linux版のランタイムもリリース予定となっています。

コマンドラインツールでAIRを作ろう

AIRでは既存のFlashをAIRアプリケーションとして利用することができます。そこで、第2回で作成したDrawTest1.swfを利用してみます。

AIRとして実行するには、アプリケーション記述ファイルと呼ばれるファイルを作成します。

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

このファイルをDrawTest1-app.xmlとして保存します。同じフォルダにDrawTest1.swfも置いておきます。

テスト実行

テスト実行するにはadl コマンドにアプリケーション記述ファイルを渡します。

adl DrawTest1-app.xml

実行すると次のような画面が表示されます。分かりにくいですが、単独のアプリケーションとして起動されています。Flash Playerが表示されているわけではありません。

画像

パッケージ化

さて、このAIRアプリケーションを配布用にパッケージ化してみましょう。アプリケーションというにはあまりにも寂しいですが、今のうちは我慢してください。

AIRではアプリケーションのセキュリティ確保のために、電子署名する必要があります。ここでは、開発用として自己署名の証明書を作成されます。

adt -certificate -cn SelfSigned 1024-RSA cert.pfx SamplePassword

SamplePassword というパスワードで署名した証明書cert.pfx が生成されました。

証明書が作成できたら、adt-packageコマンドを実行してパッケージ化します。パラメータの数が多くてややこしいですが、次のような順序で指定します。

adt -package -storetype pkcs12
  -keystore [証明書のパス]
  [パッケージのパス]
  [アプリケーション記述ファイルのパス]
  [パッケージに含めるファイル(複数指定可)]

「パッケージに含めるファイル」には AIR アプリケーションを構成するファイルを全て指定します。今回はDrawTest1.swfのみから成り立っているため、DrawTest1.swfのみを指定します。

結果として、adtコマンドのオプションは次のようになります（実際には１行で入力します⁠）⁠。

adt -package -storetype pkcs12
  -keystore cert.pfx
  DrawTest1.air
  DrawTest1-app.xml
  DrawTest1.swf

証明書のパスワードを聞かれるので、先ほど設定したパスワード（ここではSamplePassword）を入力します。

password: SamplePassword

これでDrawTest1.airの完成です。

作成したAIRをインストールする

それでは、作成したアプリケーションをインストールしてみましょう。インストールするには事前にAIRランタイムがインストールされている必要があります。AIRランタイムはhttp://get.adobe.com/airからダウンロードできます。

AIRランタイムが導入された状態でDrawTest1.airを実行すると、インストーラが立ち上がります。

画像

アプリケーションの情報として、Publisher、Application、System Accessという項目が表示されています。PublisherはUNKNOWNになっていますが、これは自己署名の証明書を利用しているためです。Applicationにはアプリケーション記述ファイルで指定した「DrawTest1」という文字列が表示されています。System Access（システムアクセス権）はUNRESTRECTED（無制限）となっていますが、AIR1.0では全てのアプリケーションは無制限にアクセス権を持っています。

Installボタンを押すと、インストールのオプションが表示されます。

画像

Continueボタンを押して少し待つとインストールは完了です。自動的にアプリケーションが起動します。

Windowsの場合、アプリケーションはデフォルトでC:\Program Filesの下にインストールされています。DrawTest1.exeというファイルが作成されていますね。

画像

なお、アプリケーションのアンインストールは、コントロールパネルの「プログラムの追加と削除」から行えます。

FlexでAIRアプリケーションを作成する

先ほどは既存のFlashかAIRアプリケーションを作成しましたが、ここからはFlexフレームワークを用いて、AIRに特化したFlashファイルを作成してみましょう。

FlexフレームワークにAIRアプリケーション専用のMXMLコンポーネントがいくつか用意されています。例えば、ルートタグとしてWindowedApplicationがあります。

サンプルをご覧いただきましょう。前回の最初にお見せしたサンプルのルートタグをWindowedApplicationに変更しています。AirTest1.mxmlとしてUTF-8で保存しておいてください。

<?xml version="1.0" encoding="UTF-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Panel title="Hello Flex!!"
        paddingTop="10" paddingLeft="10"
        paddingRight="10" paddingBottom="10">
        <mx:Label text="ラベル"/>
        <mx:TextInput text="text"/>
        <mx:Button label="OK"/>
    </mx:Panel>
</mx:WindowedApplication>

コンパイルする

AIR用のコンポーネントやクラスを利用した場合は、mxmlcではコンパイルに失敗してしまいます。

mxmlc AirTest1.mxml
Loading configuration file C:\flex3\frameworks\flex-config.xml
C:\samples\AirTest1.mxml: Error: Unable to locate specified base
class 'mx.core.WindowedApplication' for component class 'AirTest1'.

AIR専用のFlashファイルを作成する場合は、amxmlcを利用します。コンパイル方法はmxmlcと同様です。

amxmlc AirTest1.mxml

これで AirTest1.swfが生成されます。AIR専用のコンポーネントを含んでいるため、Flash Player で再生すると次のような例外が発生してしまうので注意してください。

VerifyError: Error #1014: クラス flash.events::NativeWindowBoundsEvent が見つかりません

テスト実行する

それでは、アプリケーション記述ファイルを用意してadlで実行してみましょう。先ほどのアプリケーション記述ファイル中DrawTest1をAirTest1に変えて、AirTest1-app.xmlという名前で保存します。

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

adlコマンドでテスト実行してみましょう。

adl AirTest1-app.xml

次のようなウインドウが表示されます。

画像

このままでもいいのですが、アプリケーション記述ファイルのsystemChromeタグをnoneに、transparentタグをtrueに変更して実行してみます。 

 <systemChrome>none</systemChrome>
        <transparent>true</transparent>

すると、次のようなウインドウになります。

画像

systemChromeをnoneにしたので、OS標準のウインドウ枠ではなくAIRのウインドウ枠が表示されました。このウインドウ枠を表示しているのがWindowedApplicationタグなのです。

見た目をカスタマイズしよう

WindowedApplicationタグに追加の設定をしてみましょう。

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
    title="AirTestです" status="ステータス"
    titleBarColors="[0xff9999, 0xffffff]">

titleプロパティ、statusプロパティ、titleBarColorsプロパティを設定しています。amxmlcでコンパイルして、adlで実行してみます。

画像

プロパティの変更が反映されていますね。タイトルバーの色が変わって、タイトルバーとステータスバーに文字が表示されました。

WindowedApplicationタグで利用できる属性については、Flex 3リファレンスガイドのWindowedApplication クラスをご覧ください。

実践的な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ドキュメンテーションに日本語のドキュメントがたっぷりそろっています。この連載は今回で最終回ですが、今後、皆さんで試行錯誤しながら学習していってくださることを期待しています！

おすすめ記事

記事・ニュース一覧