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

第9回 AIRに挑戦

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

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 クラスをご覧ください。

著者プロフィール

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

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

URLhttp://tech.nitoyon.com/