ZAPAnet総合情報局 > [Z]ZAPAブロ〜グ2.0 > プログラミングTIPS > はじめてのAIRプログラミング

はじめてのAIRプログラミング

このエントリーをはてなブックマークに追加
2007年07月15日 カテゴリ:プログラミングTIPS
NEWS!:当ブログ管理人ZAPAが「Adobe AIRプログラミング入門」執筆しました!Adobe AIRプログラミング入門
Adobe AIRプログラミング入門
Webアプリケーション技術でデスクトップアプリケーションを作る!

ZAPA
工学社
2008-01

by [Z]ZAPAnetサーチ2.0


コードネーム「Apollo」と呼ばれていたWebアプリケーションプラットフォームは、Apollo から Adobe AIR へと名称が変更され、正式名称は「Adobe Integrated Runtime」となりました。
以前、「はじめてのApolloプログラミング」という記事を書きましたが、今回新たにAdobe Airに触れなくてはいけない機会がありました。
そこで、はじめて「AIR」アプリケーションを開発する際の手順を、ここに記しておきます。

1. AIRアプリケーション開発に必要なものをダウンロード
2. AIRアプリケーション開発環境インストール
3. AIRアプリケーション開発環境パス設定
4. はじめてのAIRアプリケーションプログラミング
5. AIRアプリの実行


1. AIRアプリケーション開発に必要なものをダウンロード

AIRアプリケーションを開発するには、当然それを開発するために必要なソフトウェアが存在します。
環境に応じて以下のものが必要となり、全て無料でダウンロードすることができます。
Adobe Integrated Runtime (AIR)
AIRアプリを動作させるために必要なランタイムインストーラです。
Java SE Downloads (JDK 5)
コンパイル時などにJavaが必要になります。
Adobe AIR: Devloping on AIR with Flex and Flash
AIR開発のためのソフトいろいろです。Flex Builder 3,Flex 3 SDK,Adobe AIR SDKなどがあります。
Adobe Integrated Runitime (AIR) SDK
Adobe AIR SDKとそのドキュメントファイルです。

2. AIRアプリケーション開発環境インストール

今回は開発言語にActionScript3.0を選択した場合の、WindowsコマンドプロンプトでAIRアプリをコンパイルする手順を紹介します。
1. Adobe Integrated Runtime (AIR)をインストール。
例:)ダウンロードした「air_b1_win_061107.exe」をダブルクリックして、Setup画面で「I Agree」を選択。
2. Flex 3 SDKを解凍。
例:)ダウンロードした「flex3sdk_b1_061107.zip」を解凍。
以上で、インストール&解凍は終了です。
既存のものを流用しようとせず、新規にAIRアプリ開発用のディレクトリを作ってしまった方が安全で、簡単です。
自分の場合、JDK5はすでにインストール済みだったので、上記二つの手順だけで終わりました。
Flex 3 SDKをインストールする場合、AIR SDKはインストールする必要はありません

3. AIRアプリケーション開発環境パス設定

Windowsのコマンドプロンプトから簡単に実行できるように、環境変数(パス)を設定しておきます。
例えば、Windows XPであれば、デスクトップ上の「マイコンピュータ」を右クリックし「システムのプロパティ」を開き、「詳細設定」タブを開きます。
そして、「環境変数」をクリックし、システム環境変数のPathを編集します。
例えば、以下のパスを追記します。(flex3sdkを解凍したディレクトリに合わせてください)
C:\air\bin\

注意:環境変数に古いApolloのパスが設定してある場合は、古い環境変数は削除しておいた方が良いかもしれません。

4. はじめてのAIRアプリケーションプログラミング

AIRアプリケーションは、Flash、HTML、Ajax、PDFなど既存の技術を流用できます。
今回は、ActionScript3.0でSWFファイルを作成し、デスクトップ上で動作するAIRアプリを作成するサンプルを作ってみました。
AIRアプリケーション上に、「はじめてのAIRプログラミング」と表示するだけの簡単なプログラムです。
本来、はじめてのプログラミングは「Hello World!」が一般的ですが、AIRアプリで日本語が扱えることを確認するために「はじめてのAIRプログラミング」と表示させます。
(AS3については、「はじめてのActionScript3.0プログラミング」、「ActionScript3.0の速さを体感してみよう!」を参考にしてください。)
package {
    import flash.display.*;
    import flash.text.*;
    public class first extends Sprite{
        public function first(){
            var tf1:TextField = new TextField();
            tf1.text = "はじめてのAIRプログラミング";
            tf1.width = 300;    //表示テキスト横幅
            tf1.height = 200;   //表示テキスト縦幅
            tf1.x = 50;         //表示テキスト横位置
            tf1.y = 20;         //表示テキスト縦位置
            addChild(tf1);      //追加

            //ウィンドウの表示
            stage.window.visible=true;
        }
    }
}
上記ソースを、first.asという名前で文字コードUTF-8で保存し、amxmlcを用いてコンパイルします。
WinXPの場合、スタート>アクセサリ>コマンド プロンプトを開き、以下のコマンドを入力します。
cd /d ダウンロード(解凍)したディレクトリ
amxmlc -default-size 400 400 -default-frame-rate=30 -default-background-color=0xCCCCCC first.as
コンパイルに成功すると、ソースディレクトリにfirst.swfファイルが作成されます。
動作の確認をしたい場合は、このSWFファイルをWebブラウザにドラッグアンドドロップすれば確認できます。

次に、AIRアプリケーションの設定を記述するADFファイルを作成します。
まず、AIRアプリ用のアイコンとして、同じディレクトリにiconsディレクトリを作成し、各サイズのアイコンを用意します。
デフォルトのアイコンで構わない場合は、samples\iconsディレクトリにアイコンが4つ用意されていますので、このアイコンをコピーして利用するのが簡単です。
ADFファイルとして、ファイル名.xmlを文字コードUTF-8で新規作成し(今回の場合は、first.xml)、以下のように記述します。
<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0.M4" 
    appId="zapanet.info.first" version="1.0">
    <name>first</name>
    <description>first AIR</description>
    <copyright>(C) ZAPAnet</copyright>
    <rootContent
        systemChrome="standard"
        transparent ="false"
        visible     ="true">first.swf</rootContent>
    <icon>
        <image16x16>icons/AIRApp_16.png</image16x16>
        <image32x32>icons/AIRApp_32.png</image32x32>
        <image48x48>icons/AIRApp_48.png</image48x48>
        <image128x128>icons/AIRApp_128.png</image128x128>
    </icon>
</application>
注意:Apollo用のXMLとは少し違う部分があります。

xmlファイルが完成したら、adlコマンドでAIRアプリのデバッグを行います。
以下の書式でデバッグが行えます。
adl first.xml
問題なく動作するようであれば、コマンドプロンプトからadtコマンドを実行すれば、SWFファイルとADF(XML設定ファイル)が読み込まれ、AIRファイルが作成されます。
adt -package first.air first.xml first.swf icons
何もエラーがなければ、first.airというAIRアプリケーションが作成されます。

コマンドプロンプトでのコンパイルの流れは、以下のスクリーンショットのような流れになります。


5. AIRアプリの実行

AIRアプリを実行するには、Adobe Integrated Runtime (AIR)がPCにインストールされた状態で、***.airファイルを実行すれば、自動的にインストールされます。

今回の例では、作成した「first.air」をダブルクリックすると以下の画面が表示されます。

このインストール画面で「Install」をクリックし、次の画面で「Continue」をクリックすればインストール完了です。

インストール後、デスクトップにできたAIRアプリへのショートカットを実行します。


このアプリの実行画面は以下のようになります。


firstというAIRアプリケーション上に、「はじめてのAIRプログラミング」と表示されたはずです。
Action Script 3.0という、今まではWeb上のみの技術であったものが、簡単にデスクトップアプリケーション作成技術へと進化しました。
特別難しい知識が必要というわけではなく、Action Scriptでコーディングした***.asファイルをamxmlcコンパイラでコンパイルし、adtコマンドでAIRアプリとしてパッケージングするだけでデスクトップアプリケーションが作れてしまいます。
しかも、WindowsだけでなくMacなどでも動作するマルチプラットフォームアプリケーションにもなっているところがすごいところです。

最後に

今回はActionScript3.0からAIRアプリを作成しましたが、他の方法でもAIRアプリは作成できます。
Flash、HTML、Ajax、PDFなど既存の技術を流用できるところがAIRの長所ですので、自分の得意な方法でAIRアプリケーションを作成してみてください。

参考になりそうなサイトへのリンク集


Adobe AIRでブラウザを作ってみた (CodeZine編集部ブログ)
Adobe AIRメモ
AIR - Adobe Labs
Apolloポケットガイド邦訳Wiki
背景が透けて表示されるApolloアプリを作成してみよう ─ @IT
自由な形にできるウィンドウのApolloアプリを作成しよう ─ @IT
Apollo File APIを用いてローカルファイルを読むには? ─ @IT
AIRアプリはドラッグ&ドロップでこんなことまで!(1/3) ─ @IT
【連載】今からはじめるAIRプログラミング (1) AIRの概要とインストール方法
押さえておきたい「AIR」の肝--ウェブの強みをデスクトップに:スペシャルレポート - CNET Japan
CodeZine:Adobe AIR開発もサポートしたフリーの開発環境「Aptana IDE」(開発ツール)

ブログ内関連リンク

Apollo から Adobe AIR へ
はじめてのApolloプログラミング
Apolloでニコニコ動画みたいなアプリを作ってみるテスト
もしかしてAdobeの時代が来るのか?
Flex2,ActionScript3.0が優れている9の理由とAjaxとの差
ActionScript3.0の速さを体感してみよう!
ニコニコ動画みたいなものを作ってみるテストと問題点
Flashは検索エンジンに引っかからないという思い込み
なぜFlashは検索エンジンにひっかかりにくいのか?-SEO対策-
FLASHだって検索結果1位を目指せます!-SEO実験結果-