2010年11月26日

AIR アプリのパッケージング

AIR 2.5 は Android 2.2 (Froyo) に対応するようになりました。 データを失いながらもバージョンアップした手元の Xperia は未だに 2.1 ですが、いつかは 2.2 になると思います。 そんな未来に備えて AIR アプリを作れる環境を整えておきます。

実機で AIR を動かせる携帯端末を持っていませんので、まずは HTML+JavaScript+CSS で普通のデスクトップアプリを作ることにします。 AIR アプリを作る場合には Flash もしくは Flex で ActionScript も使えますが、 XML (MXML) の中にスクリプトを書くのは苦手なので JavaScript にします。 こちらの方法で実装しておくと、通常の Web アプリケーションや Chrome 拡張などを流用できるかもしれない、という淡い期待もあります。

セットアップ

Adobe のサイトが非常に整備されていますので、通常のリファレンスだけでなくチュートリアルもここを見るのが良いでしょう。 Google で検索すると上位にきますので、必然的に本家のチュートリアルを見ることになると思います。 ただし、SDK のバージョンによってアプリケーションディスクリプタの名前空間が異なりますので、バージョンが最新であるかを確認する必要があります。 特に、バージョン 2.5 からはバージョンの記法が変わりましたので注意が必要です。

セットアップの手順は次のようになりますので、順番に見ていきましょう。

  1. Adobe のサイト から AIR SDK の ZIP をダウンロードして展開する。
  2. プロジェクトに最低限必要なファイルを準備する。
  3. ディスクリプタファイル (application.xml) を編集する。
  4. デバッグ起動で動作を確認する。

SDK の配置

いずれのチュートリアルでも、SDK の bin ディレクトリにパスを通して... という書き方なので、最初から好き嫌いが別れるかもしれません。 複数のマシンで開発する場合は揃えた方が良いと思いますので、AIR の SDK は次の場所にインストール (ZIP を展開) します。 (もちろん、標準的な置き場所があるならそちらの方がベターですが、見つけられませんでした。)

Windows の場合:C:\Program Files\Adobe\AdobeAIRSDK-2.5
Linux の場合:/usr/local/adobe/AdobeAIRSDK-2.5
Mac OSX の場合:/Applications/Adobe/AdobeAIRSDK-2.5

Adobe のサイト から AIR SDK の ZIP をダウンロードして展開します。 OS によってダウンロードすべきファイルが異なります。 展開したアーカイブにはバージョン番号が付いていませんので、後から識別できるように手動で変更します。 必要があればシンボリックリンクなどを作成してデフォルトの SDK を指定できるようにすると良いかもしれません。

$ sudo ln -s /usr/local/adobe/AdobeAIRSDK-2.5 /usr/local/adobe/AdobeAIRSDK

プロジェクトに必要なファイルの準備

AIR のプロジェクトには、XML 形式のアプリケーションのディスクリプタファイルが必要です。 後でコマンドライン引数に与えることになりますので名前は何でも良いと思いますが、ここでは application.xml としておきます。 ディスクリプタファイルは適当なチュートリアルからコピーしても構わないと思いますが、 SDK に雛形が付属していますので、そこからコピーするのが良いと思います。 初めは分からないことも多く書かれていて非常に冗長ですが、後で機能を拡張するときに役に立つはずです。

JavaScript でアプリケーションを記述する場合は air オブジェクトを利用可能にしてくれるエイリアスファイル (AIRAliases.js) もあると便利です。 これも SDK に付属していますので、そこからコピーします。

最後に、アプリケーションの入り口となる HTML ファイルが必要です。 もちろん、このファイルの名前も任意に指定できます。 試しに プロジェクト名.html としておきます。

ここまでの手順を順番に実行すれば良いのですが、手動でやると間違えてしまうこともありますので セットアップ用スクリプト を用意します。 Python がインストールされている環境で次のように実行します。

$ wget --no-check-certificate -O air-quickstart.py https://github.com/skitazaki/sandbox/raw/master/src/d74.py

$ python air-quickstart.py -d "C:\Program Files\Adobe\AdobeAIRSDK-2.5" sample
C:\Program Files\Adobe\AdobeAIRSDK-2.5\bin\adl application.xml
C:\Program Files\Adobe\AdobeAIRSDK-2.5\bin\adt -certificate -cn SelfSigned 1024-RSA sampleCert.pfx samplePassword
C:\Program Files\Adobe\AdobeAIRSDK-2.5\bin\adt -package -certificate sampleCert.pfx -password samplePassword sample.air application.xml sample.html AIRAliases.js

$ ls sample
AIRAliases.js  application.xml  sample.html

オプション引数 -d に SDK をインストールしたディレクトリを指定して、コマンドライン引数でプロジェクト名を指定します。 3つのコマンドが出力されますが、このコマンドでアプリケーションの実行やパッケージングが可能です。 最後にプロジェクトディレクトリの中身を確認すると、上述のファイルが生成されていることが分かります。

ディスクリプタファイルの編集

ディスクリプタファイル (application.xml) を編集します。 先ほどのセットアップ用スクリプトでこれも実行できるようにしても良いかもしれません。

変更すべきは次の4つの要素です。

  • id ... DNS の逆形式 (com.example.app.air など衝突しなければ好みで)
  • filename ... パッケージングするファイル名 (sample にする)
  • initialWindow/content ... 起動時に表示するファイル名 (sample.html にする)
  • initialWindow/visible ... 起動時に表示するかどうかのフラグ (まずは true にしておくのが分かりやすい)

デバッグ起動で動作を確認

adl コマンドで起動を確認します。 PATH を通しておくことをお勧めする説明が多いですが、個人的にはとりあえずフルパスの方が分かりやすいと思います。 引数にはディスクリプタファイルを指定します。

$ cd sample
$ "C:\Program Files\Adobe\AdobeAIRSDK-2.5\bin\adl" application.xml

次のようなウィンドウが立ち上がれば成功です。

パッケージング

次に、パッケージを作成します。 自己署名ファイルを作成し、それを参照して .air ファイルを作成します。 コマンドオプションを覚えるのは大変なので、Windows の場合は make.bat 、Unix 系の場合は Makefile を書きます。 Sphinx と同じように、アーキテクチャを問わずに make とタイプするだけでよくなります。 また、ここで絶対パスを使うようにしておくと環境変数 PATH を汚染する必要がありません。

make.bat

@ECHO OFF

REM Command file for AIR application

::set BASEDIR=%PROGRAMFILES(x86)%\Adobe\AdobeAIRSDK-2.5
set BASEDIR=%PROGRAMFILES%\Adobe\AdobeAIRSDK-2.5
set ADT=%BASEDIR%\bin\adt.bat
set ADL=%BASEDIR%\bin\adl.exe

set AIR_DESCRIPTOR=application.xml
set AIR_PACKAGE=sample.air
set AIR_SCRIPTS=sample.html AIRAliases.js

set CERTIFICATE=sampleCert.pfx

if "%1" == "" goto help

if "%1" == "help" (
    :help
    echo.Please use `make ^<target^>` where ^<target^> is one of
    echo.  run     to start up application
    echo.  init    to make a samle certificate file
    echo.  package to make a ".air" package
    goto end
)

if "%1" == "run" (
    echo. "%ADL%"
    "%ADL%" "%AIR_DESCRIPTOR%"
    goto end
)

if "%1" == "init" (
    "%ADT%" -certificate -cn SelfSigned 1024-RSA %CERTIFICATE% samplePassword
    goto end
)

if "%1" == "package" (
    "%ADT%" -package -storetype pkcs12 -keystore %CERTIFICATE% -storepass samplePassword "%AIR_PACKAGE%" "%AIR_DESCRIPTOR%" %AIR_SCRIPTS%
    goto end
)

:end

Makefile

BASEDIR = /Applications/Adobe/AdobeAIRSDK-2.5
#BASEDIR = /usr/local/adobe/AdobeAIRSDK-2.5
ADT = $(BASEDIR)/bin/adt
ADL = $(BASEDIR)/bin/adl

AIR_DESCRIPTOR = application.xml
AIR_PACKAGE = sample.air
AIR_SCRIPTS = sample.html AIRAliases.js

CERTIFICATE = sampleCert.pfx

all:
    $(ADL) $(AIR_DESCRIPTOR)

init:
    $(ADT) -certificate -cn SelfSigned 1024-RSA $(CERTIFICATE) samplePassword

package:
    $(ADT) -package -storetype pkcs12 -keystore %CERTIFICATE% -storepass samplePassword $(AIR_PACKAGE) $(AIR_DESCRIPTOR) $(AIR_SCRIPTS)

.phony: all

あとはコマンドプロンプトなどから次のように実行します。 sample.air が生成されれば成功です。

$ make init

$ make package

パッケージにまとめるファイルを追加する場合には AIR_SCRIPTS に追記していきます。 たとえば jQuery を使う場合には次のようにします。(make.bat の場合)

set AIR_SCRIPTS=sample.html AIRAliases.js jquery-1.4.4.min.js

アンドロイド用のパッケージを生成する場合には -target オプションで apk を指定すれば良いようです。

あと、 make run で動作を確認できます。

終わりに

AIR の SDK を使って .air パッケージを作成してみました。 調べてみると、想像以上にドキュメント類が充実していて驚きました。 今回は簡単なスクリプトを自作しましたが、この手のことはアプリケーションのフレームワークや統合開発環境 (たとえば Aptana Studio ) に委ねてしまう方が良いでしょう。 とはいえ、実際に何が起こっているかを確認しておくことも大事だと思いますので、好き好きではあります。

「一度書けばどこでも動く」という考えは正しくもありそうでないこともあり、、、というのが現実だと思いますが、 手軽にアプリケーションを作れるようになってきたのは間違いないと思います。 あとは Xperia がバージョン 2.2 にアップデートしてくれると嬉しいですね。

コメントを投稿