Flex SDK を使用した最初の AIR アプリケーションの作成



Adobe® AIR™ の機能を簡潔かつ実践的に説明するため、以下の手順に従って Flex SDK を使用し、SWF ベースの単純な AIR アプリケーション「Hello World」を作成します。SDK と共に提供されているコマンドラインツールを使用した AIR アプリケーションのコンパイル、テストおよびパッケージ化の方法を学習します。

作業を開始するには、ランタイムをインストールし、Adobe® Flex™ 3 を設定しておく必要があります。このチュートリアルでは、AMXMLC コンパイラ、AIR Debug Launcher(ADL)および AIR Developer Tool(ADT)を使用します。これらのプログラムは、Flex 3 SDK の bin ディレクトリにあります(Flex 3 SDK の設定を参照してください)。

AIR アプリケーション記述ファイルの作成

この節では、次の構造を持つ XML ファイルであるアプリケーション記述子の作成方法について説明します。

<application> 
    <id>...</id> 
    <version>...</version> 
    <filename>…</filename> 
    <initialWindow> 
        <content>…</content> 
        <visible>…</visible> 
        <systemChrome>…</systemChrome> 
        <transparent>…</transparent> 
        <width>…</width> 
        <height>…</height> 
    </initialWindow> 
</application>
  1. HelloWorld-app.xml という名前の XML ファイルを作成し、プロジェクトディレクトリに保存します。

  2. 次の AIR 名前空間属性を含め、<application> エレメントを追加します。

    <application xmlns="http://ns.adobe.com/air/application/1.0"> 名前空間の最後のセグメントである「1.0」は、アプリケーションに必要なランタイムのバージョンを指定します。

  3. <id> エレメントを追加します。

    <id>samples.flex.HelloWorld</id> アプリケーション ID は(アプリケーションパッケージに署名するために使用された証明書から AIR が派生させる)発行者 ID と共にアプリケーションを一意に識別します。推奨される形式は、「com.company.AppName」などのピリオド区切りの逆 DNS スタイルのストリングです。アプリケーション ID は、インストール、プライベートなアプリケーションファイルシステムストレージディレクトリへのアクセス、プライベートな暗号化ストレージへのアクセスおよびアプリケーション間の通信に使用されます。

  4. <version> エレメントを追加します。

    <version>0.1</version> インストールしているアプリケーションのバージョンをユーザが確認できるようにします。

  5. <filename> エレメントを追加します。

    <filename>HelloWorld</filename> アプリケーション実行可能ファイル、インストールディレクトリに使用される名前であり、オペレーティングシステム内の参照に対しても同様です。

  6. 次の子エレメントを含む <initialWindow> エレメントを追加して、初期アプリケーションウィンドウのプロパティを指定します。

    <content>HelloWorld.swf</content> 読み込む対象となる AIR のルート HTML ファイルを識別します。

    <visible>true</visible> ウィンドウがすばやく表示されるようにします。

    <width>400</width> ウィンドウの幅(ピクセル単位)を設定します。

    <height>200</height> ウィンドウの高さを設定します。

  7. ファイルを保存します。完全なアプリケーション記述ファイルは、次のとおりです。

    <?xml version="1.0" encoding="UTF-8"?> 
    <application xmlns="http://ns.adobe.com/air/application/1.0"> 
        <id>samples.flex.HelloWorld</id> 
        <version>0.1</version> 
        <filename>HelloWorld</filename> 
        <initialWindow> 
            <content>HelloWorld.swf</content> 
            <visible>true</visible> 
            <systemChrome>none</systemChrome> 
            <transparent>true</transparent> 
            <width>400</width> 
            <height>200</height> 
        </initialWindow> 
    </application>

この例では、設定可能なアプリケーションプロパティのうち、一部のみが設定されています。ウィンドウクロム、ウィンドウサイズ、透明度、デフォルトのインストールディレクトリ、関連付けられているファイルの種類およびアプリケーションアイコンなどを指定できるようにする、アプリケーションプロパティの完全なセットについては、AIR アプリケーションプロパティの設定を参照してください。

アプリケーションコードの記述

注意: SWF ベースの AIR アプリケーションは、MXML または ActionScript™ を使用して定義されたメインクラスを使用できます。この例では、MXML ファイルを使用してメインクラスを定義します。メインの ActionScript クラスを使用して AIR アプリケーションを作成するプロセスは、これに似ています。MXML ファイルを SWF にコンパイルするのではなく、ActionScript クラスファイルをコンパイルします。ActionScript を使用している場合は、メインクラスは、flash.display.Sprite を拡張する必要があります。

すべての Flex アプリケーションと同様に、Flex フレームワークを使用して構築された AIR アプリケーションには、メインの MXML ファイルが含まれます。ただし、AIR アプリケーションは、ルートエレメントとして、Application コンポーネントの代わりに WindowedApplication コンポーネントを使用します。WindowedApplication コンポーネントは、アプリケーションとその初期ウィンドウを制御するためのプロパティ、メソッドおよびイベントを提供します。

次の手順に従って、Hello World アプリケーションを作成します。

  1. テキストエディタを使用して、HelloWorld.mxml という名前のファイルを作成し、次の MXML コードを追加します。

    <?xml version="1.0" encoding="utf-8"?> 
    <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" 
        layout="absolute" title="Hello World"> 
    </mx:WindowedApplication>
  2. 次に、アプリケーションに Label コンポーネントを追加(WindowedApplication タグ内に記述)します。

  3. Label コンポーネントの text プロパティを "Hello AIR" に設定します。

  4. 中央に配置されるようにレイアウト制約を設定します。

    次の例は、これまでに説明したコードを示します。

    <?xml version="1.0" encoding="utf-8"?> 
    <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
        title="Hello World"> 
            <mx:Label text="Hello World" horizontalCenter="0" verticalCenter="0"/> 
    </mx:WindowedApplication>
  5. 次のスタイルブロックを追加します。

    <mx:Style> 
        WindowedApplication 
        { 
            background-color:"0x999999"; 
            background-alpha:"0.5"; 
        } 
    </mx:Style>

    これらのスタイルはアプリケーション全体に適用され、ウィンドウの背景がやや透明な灰色に設定されます。

アプリケーションコードの全体は、次のとおりです。

<?xml version="1.0" encoding="utf-8"?> 
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="Hello World"> 
    <mx:Style> 
        WindowedApplication 
        { 
            background-color:"0x999999"; 
            background-alpha:"0.5"; 
        } 
    </mx:Style> 
    <mx:Label text="Hello World" horizontalCenter="0" verticalCenter="0"/> 
</mx:WindowedApplication>

アプリケーションのコンパイル

アプリケーションを実行およびデバッグする前に、amxmlc コンパイラを使用して MXML コードを SWF ファイルにコンパイルする必要があります。amxmlc コンパイラは、Flex 3 SDK の bin ディレクトリにあります。必要に応じて、Flex 3 SDK bin ディレクトリを含めるようにコンピュータのパス環境を設定して、コマンドラインで簡単にユーティリティを実行できるようにすることができます。

  1. コマンドシェルまたは端末を開き、AIR アプリケーションのプロジェクトフォルダに移動します。

  2. 次のコマンドを入力します。

    amxmlc HelloWorld.mxml 

amxmlc を実行することにより、HelloWorld.swf が作成されます。これには、コンパイルされたアプリケーションのコードが格納されています。

注意: アプリケーションがコンパイルされない場合、シンタックスエラーまたはスペルミスを修正します。エラーと警告は、amxmlc コンパイラの実行に使用するコンソールウィンドウに表示されます。

詳しくは、amxmlc コンパイラを使用した AIR アプリケーションのコンパイルを参照してください。

アプリケーションのテスト

コマンドラインからアプリケーションの実行とテストを行うには、AIR Debug Launcher(ADL)を使用し、アプリケーション記述ファイルを使用してアプリケーションを起動します(ADL は、Flex 3 SDK の bin ディレクトリにあります)。

 コマンドプロンプトから、次のコマンドを入力します。
adl HelloWorld-app.xml 

次のような AIR アプリケーションが表示されます(緑色の背景はデスクトップです)。

Label コントロールの horizontalCenter プロパティと verticalCenter プロパティが使用され、テキストがウィンドウ中央に配置されます。一般のデスクトップアプリケーションと同様に、ウィンドウを移動したりサイズを変更したりします。

詳しくは、AIR Debug Launcher(ADL)の使用を参照してください。

AIR インストールファイルの作成

アプリケーションが正常に実行されたら、ADT ユーティリティを使用して、アプリケーションを AIR インストールファイルにパッケージ化できます。AIR インストールファイルは、ユーザに配布できるアプリケーションファイルを格納するアーカイブファイルです。パッケージ化された AIR ファイルをインストールする前に Adobe AIR をインストールする必要があります。

アプリケーションのセキュリティを確保するには、すべての AIR インストールファイルに電子署名する必要があります。開発のために、ADT または別の証明書生成ツールを使用して基本的な自己署名入り証明書を生成できます。VeriSign や Thawte などの商用の証明機関から商用コード署名証明書を購入することもできます。ユーザが自己署名入り AIR ファイルをインストールした場合、インストールプロセスの間、発行者は「不明」として表示されます。これは、自己署名入り証明書は AIR ファイルが作成されてから変更されていないことだけを保証するからです。なりすましの AIR ファイルの自己署名や、それをアプリケーションとして提示することを防ぐことはできません。AIR ファイルを一般にリリースする場合は、検証可能な商用証明書を強くお勧めします。AIR のセキュリティに関する問題については、AIR のセキュリティを参照してください。

自己署名入り証明書とキーのペアの生成

 コマンドプロンプトから、次のコマンドを入力します(ADT 実行可能ファイルは、Flex 3 SDK の bin ディレクトリにあります)。
adt –certificate -cn SelfSigned 1024-RSA sampleCert.pfxsamplePassword

この例では、証明書に対して設定できる最小限の数の属性を使用しています。イタリックのパラメータに対しては任意の値を使用できます。キーのタイプは 1024-RSA または 2048-RSA にする必要があります(AIR ファイルへの電子署名を参照してください)。

AIR インストールファイルの作成

 コマンドプロンプトから、次のコマンドを入力します(1 つのライン)。
adt -package -storetype pkcs12 -keystore sampleCert.pfx HelloWorld.air 
HelloWorld-app.xml HelloWorld.swf

キーストアファイルパスワードを求めるプロンプトが表示されます。

HelloWorld.air 引数は、ADT によって作成される AIR ファイルです。HelloWorld-app.xml はアプリケーション記述ファイルです。後続の引数は、アプリケーションによって使用されるファイルです。この例では、これらの 3 つのファイルだけが使用されますが、任意の数のファイルとディレクトリを含めることができます。

AIR パッケージが作成された後に、パッケージファイルをダブルクリックすることによって、アプリケーションをインストールおよび実行できます。シェルウィンドウまたはコマンドウィンドウで、コマンドとして AIR ファイル名を入力することもできます。