AIR SDK を使用した初めての HTML ベースの AIR アプリケーションの作成

Adobe® AIR® の機能を簡潔かつ実践的に説明するため、以下の手順に従って、HTML ベースの単純な AIR アプリケーション「Hello World」を作成してパッケージ化します。

作業を開始するには、ランタイムをインストールし、AIR SDK を設定しておく必要があります。このチュートリアルでは、 AIR Debug Launcher （ADL）および AIR 開発ツール （ADT）を使用します。ADL および ADT は、コマンドラインユーティリティプログラムで、AIR SDK の bin ディレクトリにあります（ AIR SDK のインストール を参照）。このチュートリアルは、コマンドラインからのプログラムの実行に慣れていること、および使用しているオペレーティングシステムに必要なパス環境変数の設定方法を理解していることを前提にしています。

注意： Adobe® Dreamweaver® をご使用の場合は、 Dreamweaver での初めての HTML ベースの AIR アプリケーションの作成 を参照してください。
注意： デスクトップおよび extendedDesktop プロファイルの場合、HTML ベースの AIR アプリケーションのみを開発できます。モバイルプロファイルはサポートされません。

プロジェクトファイルの作成

すべての HTML ベースの AIR プロジェクトには、2 つのファイルを含める必要があります。1 つはアプリケーションメタデータを指定するアプリケーション記述ファイルで、もう 1 つはトップレベルの HTML ページです。これらの必須ファイルに加えて、このプロジェクトには、AIR API クラスの便利なエイリアス変数を定義する JavaScript コードファイル AIRAliases.js が含まれます。

  1. HelloWorld という名前のディレクトリを作成し、プロジェクトファイルを含めます。

  2. HelloWorld-app.xml という名前の XML ファイルを作成します。

  3. HelloWorld.html という名前の HTML ファイルを作成します。

  4. AIR SDK のフレームワークフォルダーからプロジェクトディレクトリに AIRAliases.js をコピーします。

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

AIR アプリケーションの構築を開始するには、次の構造の XML アプリケーション記述ファイルを作成します。 

<application xmlns="..."> 
    <id>…</id> 
    <versionNumber>…</versionNumber> 
    <filename>…</filename> 
    <initialWindow> 
        <content>…</content> 
        <visible>…</visible> 
        <width>…</width> 
        <height>…</height> 
    </initialWindow> 
</application>

  1. 編集用の HelloWorld-app.xml を開きます。

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

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

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

    <id>examples.html.HelloWorld</id> アプリケーション ID は、（アプリケーションパッケージに署名するために使用された証明書から AIR が取得する）発行者 ID と共にアプリケーションを一意に識別します。アプリケーション ID は、インストール、プライベートなアプリケーションファイルシステムストレージディレクトリへのアクセス、プライベートな暗号化ストレージへのアクセスおよびアプリケーション間の通信に使用されます。

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

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

    注意： AIR 2 以前を使用している場合は、 <versionNumber> エレメントではなく <version> エレメントを使用する必要があります。

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

    <filename>HelloWorld</filename> アプリケーション実行可能ファイル、インストールディレクトリおよびオペレーティングシステムでのアプリケーションに対するその他の参照に使用される名前です。

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

    <content>HelloWorld.html</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/2.7"> 
    <id>examples.html.HelloWorld</id> 
    <versionNumber>0.1</versionNumber> 
    <filename>HelloWorld</filename> 
    <initialWindow> 
        <content>HelloWorld.html</content> 
        <visible>true</visible> 
        <width>400</width> 
        <height>200</height> 
    </initialWindow> 
</application>

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

アプリケーションの HTML ページの作成

次に、AIR アプリケーションのメインファイルとして機能する簡単な HTML ページを作成する必要があります。

  1. 編集用の HelloWorld.html ファイルを開きます。次の HTML コードを追加します。 

    <html> 
<head> 
    <title>Hello World</title> 
</head> 
<body onLoad="appLoad()"> 
    <h1>Hello World</h1> 
</body> 
</html>

  2. HTML の <head> セクションで、 AIRAliases.js ファイルを読み込みます。 

    <script src="AIRAliases.js" type="text/javascript"></script>

    AIR は、HTML window オブジェクトで runtime という名前のプロパティを定義します。runtime プロパティでは、クラスの完全修飾パッケージ名を使用して、ビルトインの AIR クラスにアクセスできます。例えば、AIR File オブジェクトを作成するには、JavaScript で次のステートメントを追加します。 

    var textFile = new runtime.flash.filesystem.File("app:/textfile.txt");

    AIRAliases.js ファイルは、最も有用な AIR API の便利なエイリアスを定義します。 AIRAliases.js を使用すると、File クラスへの参照を次のように短縮できます。 

    var textFile = new air.File("app:/textfile.txt");

  3. AIRAliases の script タグの下に、 onLoad イベントを処理する JavaScript 関数を含む別の script タグを追加します。 

    <script type="text/javascript"> 
function appLoad(){ 
    air.trace("Hello World"); 
} 
</script>

    appLoad() 関数は、単純に air.trace() 関数を呼び出します。ADL を使用してアプリケーションを実行すると、トレースメッセージがコマンドコンソールに出力されます。トレースステートメントは、デバッグ時に非常に役に立つ場合があります。

  4. ファイルを保存します。

HelloWorld.html ファイルは次のようになります。 

<html> 
<head> 
    <title>Hello World</title> 
    <script type="text/javascript" src="AIRAliases.js"></script> 
    <script type="text/javascript"> 
        function appLoad(){ 
            air.trace("Hello World"); 
        }  
    </script> 
</head> 
<body onLoad="appLoad()"> 
    <h1>Hello World</h1> 
</body> 
</html>

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

コマンドラインからアプリケーションを実行およびテストするには、AIR Debug Launcher（ADL）ユーティリティを使用します。ADL 実行可能ファイルは、AIR SDK の bin ディレクトリにあります。まだ AIR SDK を設定していない場合は、 AIR SDK のインストール を参照してください。

  1. コマンドコンソールまたはシェルを開きます。このプロジェクト用に作成したディレクトリに変更します。

  2. 次のコマンドを実行します。 

    adl HelloWorld-app.xml

    AIR ウィンドウが開き、アプリケーションが表示されます。また、コンソールウィンドウには、 air.trace() を呼び出した結果のメッセージが表示されます。

    詳しくは、 AIR アプリケーション記述ファイル を参照してください。

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

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

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

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

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

ADT は、証明書と関連の秘密キーを含む sampleCert.pfx という名前のキーストアファイルを生成します。

この例では、証明書に対して設定できる最小限の数の属性を使用しています。キーのタイプは、「 1024-RSA 」または「 2048-RSA 」にする必要があります（ AIR アプリケーションへの署名 を参照してください）。

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

コマンドプロンプトから、次のコマンドを入力します（1 行に入力）。 
adt -package -storetype pkcs12 -keystore sampleCert.pfx HelloWorld.air 
HelloWorld-app.xml HelloWorld.html AIRAliases.js

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

HelloWorld.air 引数は、ADT によって作成される AIR ファイルです。HelloWorld-app.xml はアプリケーション記述ファイルです。後続の引数は、アプリケーションによって使用されるファイルです。この例では 2 つのファイルだけが使用されますが、任意の数のファイルとディレクトリを含めることができます。ADT は、メインコンテンツファイル HelloWorld.html がパッケージに含まれることを確認しますが、AIRAliases.js を含めないと、アプリケーションは動作しなくなります。

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

次のステップ

AIR では、HTML と JavaScript コードは通常、一般的な Web ブラウザーと同じように動作します（実際、AIR は Safari Web ブラウザーで使用されているものと同じ WebKit レンダリングエンジンを使用します）。ただし、AIR で HTML アプリケーションを開発する際に理解しておく必要がある重要な違いがいくつかあります。これらの違い、およびその他の重要なトピックについて詳しくは、 HTML および JavaScript のプログラミング を参照してください。