FlashDevelopなどを使って、AIRアプリを作る（１）

先日、Adobe AIR クックブックを購入した。
と言う事で、早速AIRアプリでも作ろうかと思い、
とりあえずARToolKit Marker Generator Onlineマルチマーカ版をAIRにしてみた。

元々Saqooshaさんが作ったAIRアプリだったものを、
Web版に書き換えただけのアプリをまたAIRにするってどうなの？
とも思ったが、まぁこいつはAIR版無いの？見たいなコメントも貰った事あるし、
一番有益だろうってことで。

と言う事で、今回はFlashDevelopと
Using Badger for Adobe AIR applications | Adobe Developer Connection
で紹介されていたBadgerとか言うアプリを使って、swfファイルをAIRアプリ化し、
インストールバッジを配置するまでの流れを書いていく。

まずは、前半のAIRアプリ作成まで。

FlashDevelopを使って、.airファイルを作る

元々、FlashDevelopにはAIR用のプロジェクトがある。
と言う事で、既存のプロジェクトで作ったswfファイルをAIR化するために、
AIR用プロジェクトで作られるバッチファイルをお借りすることにする。

前準備

まず、FlashDevelopを開き、F10を押してProgram Settingsを開く。
そして、下の方にある「Save UTF-8 Without BOM」を、Trueにする。

FlashDevelopのProgram Settings

これは、swfファイルをAIR化するために必要なバッチファイルにBOMが付いていると、
最初の「@echo off」命令を「[BOM]@echo off」と誤解釈し、
以降、コマンドプロンプトが出っ放しのおかしな表示になってしまうからだ。
（ただし、@echo offが効かないだけなので、プログラムの動き自体は正しいはず）

バッチ準備

次に、メニューの「Project-New Project」から、新規プロジェクトを作成する。
作成するぷロジェクトは「AIR AS3 Prject」で、プロジェクト名は何でも良い。
後で置換しやすそうな名前にしておけばよい。
で、出来たプロジェクトから、以下の3つのファイルをAIR化したいプロジェクトにコピーする。

application.xml
CreateCertificate.bat
PackageApplication.bat

application.xml書き換え

さっき作ったプロジェクトの名前がデフォルトの「New Project」であれば、
以下のようなファイルが出来ているはずだ。

<?xml version="1.0" encoding="utf-8" ?>
<application xmlns="http://ns.adobe.com/air/application/1.5">
<id>NewProject</id>
<version>1.0</version>
<filename>NewProject</filename>
<name>New Project</name>
<description></description>
<copyright></copyright>
<initialWindow>
<title>New Project</title>
<content>NewProject.swf</content>
<systemChrome>standard</systemChrome>
<transparent>false</transparent>
<visible>true</visible>
<minimizable>true</minimizable>
<maximizable>true</maximizable>
<resizable>true</resizable>
</initialWindow>
<!--
More options:
http://livedocs.adobe.com/flex/3/html/File_formats_1.html#1043413
-->
</application>

これを書き換えて、AIR化したいプロジェクトにあわせる。

idを書き換える

applicationの下にあるidタグは、AIRアプリの識別子だ。
とりあえず、アプリのメインになるクラス名を入れておけば、自分の中では一意になる。

versionを書き換える

アプリのバージョンを、好きなように指定すればよい。

filenameを書き換える

最終的に作られる.airファイルは、ここで指定した名前になる。

name、description、copyrightを書き換える

好きなように書き換える。

initialWindowを書き換える

titleを書き換える: 初期ウィンドウのタイトルを、好きなように書き換える
contentを書き換える: swfファイルの名前を記入する。基点は「bin」フォルダとなるので注意
systemChromeを書き換える: 標準のウィンドウを使うのであればstandardのままでよい。
普通にswfファイルにしてたような物なら、standardでよいはず。
それ以外のものを作るなら、最初から狙ってAIRのプロジェクトにしてるはずだ。
なお、standard以外にあるのは「none」だ。
transparentを書き換える: 上記と同じ理由で、falseでよい。
透明なウィンドウを作りたければtrueにすればよい
visibleを書き換える: 初期ウィンドウが見えるか見えないかだが、普通のswfファイル内に
わざわざ初期ウィンドウを見えるようにする処理が組み込まれてるはずが無いので、
trueのままでよい。
minimizableを書き換える: 最小化を許すかどうか。最小化くらい許してやればよいので、trueにしておけ
maximizableを書き換える: 最大化を許すかどうか。以下同文。
resizableを書き換える: サイズ変更を許すかどうか。
swfファイルのサイズが変わってもいいようなロジックを組んでいたならtrueにしてもよいが、
面倒なのでfalseのままでよい。

installFolderタグで、インストール場所を書き換える

AIRアプリは通常、プログラムフォルダの直下に入る。
Windowsであれば「C:\Program Files」に入るが、他の場所に入れたい気分の時もある。
そんな時は、installFolderタグを、initailWindowタグの兄弟として書き加えておく。
例えば、「C:\Program Files\tarotarorg」にしたい時は、こうだ。

<installFolder>tarotarorg</installFolder>

programMenuFolderタグで、プログラムメニュー位置を書き換える

AIRアプリをインストールすると、Windowsのプログラムメニュー内では
「すべてのプログラム」の直下にショートカットが置かれる。
それが嫌な場合、programMenuFolderタグを足してやる。
例えば、「すべてのプログラム\tarotarog」以下にしたい時は、こうだ。

<programMenuFolder>tarotarorg</programMenuFolder>

iconタグで、アイコンを指定する

AIRアプリでは、16×16、32×32、48×48、128×128の、4種類のサイズのアイコンを
指定できる。が、面倒なので一番大きい128×128のみ指定してやればよい。

<icon>
<image128x128>icon128.png</image128x128>
</icon>

これも、binフォルダを起点としておく。

customUpdateUIタグを、とりあえずtrueにしておく

何か、シームレスインストールとかに関係しているタグらしい。
説明を読んだが良くわからなかったが、自動更新機能とかの野望があるなら、
とりあえずtrueにしておけと言った所か。

<customUpdateUI>true</customUpdateUI>

最終的に、こんなXMLファイルになった。

<?xml version="1.0" encoding="utf-8" ?>
<application xmlns="http://ns.adobe.com/air/application/1.5">
<id>org.tarotaro.flash.ar.MarkerGeneratorMulti</id>
<version>0.1</version>
<filename>MarkerGeneratorMulti</filename>
<name>MarkerGeneratorMulti</name>
<description>ARToolKit用マーカジェネレータ（複数マーカ版）</description>
<initialWindow>
<title>MarkerGeneratorMulti</title>
<content>MGM.swf</content>
<systemChrome>standard</systemChrome>
<transparent>false</transparent>
<visible>true</visible>
<minimizable>true</minimizable>
<maximizable>true</maximizable>
<resizable>false</resizable>
</initialWindow>
<installFolder>tarotarorg</installFolder>
<programMenuFolder>tarotarorg</programMenuFolder>
<icon>
<image128x128>icon128.png</image128x128>
</icon>
<customUpdateUI>true</customUpdateUI>
<!--
More options:
http://livedocs.adobe.com/flex/3/html/File_formats_1.html#1043413
-->
</application>

バッチファイルを書き換える

次に、バッチファイルを編集する。
バッチファイルには、証明書を作るための「CreateCertificate.bat」と、
AIRアプリを作るための「PackageApplication.bat」がある。
これを、自分用に書き換える必要がある。

まず、「CreateCertificate.bat」を書き換える。
書き換えるのは、11行目以下の3行。

:: Certificate information
set NAME=<証明書の名前>
set PASSWORD=<パスワード>
set CERTIFICATE=<証明書ファイル名(.pfxファイル)>

上記3箇所を好きなように記入し、バッチを実行する。
FlashDevelopからなら、右クリックしてExecuteで実行できる。
成功すると、指定したファイル名で証明書が出来ている。

次に、「PackageApplication.bat」を書き換える。
17行目の

set AIR_FILE=<AIRファイル名(.airファイル)>

を、作りたいAIRアプリのファイル名に変更する。
で、実行するとパスワードを聞かれるので、「CreateCertificate.bat」で指定した、
証明書のパスワードを入力する。

これで、AIRファイルが出来る。