はじめてのAIRプログラミング
2007年07月15日 プログラミングTIPS
NEWS！:当ブログ管理人ZAPAが「Adobe AIRプログラミング入門」執筆しました！ → Adobe AIRプログラミング入門
コードネーム「Apollo」と呼ばれていたWebアプリケーションプラットフォームは、Apollo から Adobe AIR へと名称が変更され、正式名称は「Adobe Integrated Runtime」となりました。
以前、「はじめてのApolloプログラミング」という記事を書きましたが、今回新たにAdobe Airに触れなくてはいけない機会がありました。
そこで、はじめて「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アプリの実行
- 2. 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の場合、スタート＞アクセサリ＞コマンド プロンプトを開き、以下のコマンドを入力します。
コンパイルに成功すると、ソースディレクトリにfirst.swfファイルが作成されます。cd /d ダウンロード（解凍）したディレクトリ amxmlc -default-size 400 400 -default-frame-rate=30 -default-background-color=0xCCCCCC first.as
動作の確認をしたい場合は、このSWFファイルをWebブラウザにドラッグアンドドロップすれば確認できます。
次に、AIRアプリケーションの設定を記述するADFファイルを作成します。
まず、AIRアプリ用のアイコンとして、同じディレクトリにiconsディレクトリを作成し、各サイズのアイコンを用意します。
デフォルトのアイコンで構わない場合は、samples\iconsディレクトリにアイコンが4つ用意されていますので、このアイコンをコピーして利用するのが簡単です。
ADFファイルとして、ファイル名.xmlを文字コードUTF-8で新規作成し（今回の場合は、first.xml）、以下のように記述します。
<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="https://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アプリのデバッグを行います。
以下の書式でデバッグが行えます。
問題なく動作するようであれば、コマンドプロンプトからadtコマンドを実行すれば、SWFファイルとADF（XML設定ファイル）が読み込まれ、AIRファイルが作成されます。adl first.xml
何もエラーがなければ、first.airというAIRアプリケーションが作成されます。adt -package first.air first.xml first.swf icons
コマンドプロンプトでのコンパイルの流れは、以下のスクリーンショットのような流れになります。
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」（開発ツール）
- Adobe AIRメモ