Flex Builder 3 でつくる AIR

AIR adobe apollo flex

はじめにお断り。以下の説明はWindowsを前提としています。ご了承ください。

はじめてのAIRプログラミング
http://zapanet.info/blog/item/1050


Apolloのときに引き続き、とても分かりやすいです。もう私が付け加えることなどございません。

ただ、懸念するのは、ここで説明されているプログラミングのやり方が人によっては敷居が高いのではないか、と思われること。AIRってインストールは確かに簡単なのは分かったけどプログラムは難しいのね、と思われるのではないかと言うこと。

  • エディタでasファイルを書く
  • amxmlc コマンドでコンパイル。swfファイルができる
  • ADFファイルを書く
  • adl コマンドでデバッグ
  • adt コマンドでAIRファイル作成

コマンドプロンプトになれていない人にはcdコマンドでディレクトリ移動などだけでも分からなくて、もういいや、とかおもうのではないでしょうか。
そして、あー、AIRって作るの面倒なんだ、なんておもって挫折したりするのではないでしょうか。
仮にコマンドプロンプトが扱えるとしても、エディタでごりごりソースを書いて、コマンドプロンプトで作業というのは、最先端技術であるはずのAIRとしてはなんだかイマイチ感が漂います。


さて本題、今回のAIR、その開発環境の本命はFlex Builder 3にあり、だと思っています。
Flex Builder 2の頃はApolloとの親和性イマイチだったんですが、3はいけそうな気配を感じています。
例えるなら、これまでエディタ＆Javac でJavaアプリを作っていたところで初めてEclipseを触った衝撃とでも言いましょうか、それと同じ感覚を味わいました。


というわけで、Flex Builder 3 でつくる AIR、行ってみましょうー。

何が必要なのか。

必要と思われるもの
1. Air Runtime
2. Flex Builder 3
3. Air SDK
4. Flex SDK
5. Java関連
の5つです。


さて、ここであげた5点。この5つすべてが必要なのだろうか？答えはNoである。

まず、3のAir SDK、これは4のFlex SDKをいれれば自動的にインストールされる。よって3は不要。


次に、4のFlex SDK。実はFlex Builder 3のインストールディレクトリ以下にsdks\moxie というフォルダがある。
試しに4をダウンロードして、sdks\moxie と比較したんですがほぼ同じでした。

順番前後しますが、Flex Builer 3でビルド時に、どのSDKを使いますか？と聞かれるんですが、4が無い状態で、（画像）「Flex Moxie M2」が選択できました。
試しにFlex SDKをインストールしてみたんですが、それもFlex Moxie M2（1）と認識されて（画像）同じものと考えて良さそうです。
だめ押しをするなら、
sdks\moxie\flex-sdk-description.xml
の中身が

<?xml version="1.0"?>
<flex-sdk-description>
<name>Flex Moxie M2</name>
<version>3.0 Moxie M2</version>
<build>172357</build>
</flex-sdk-description>

Flex 3 SDK の flex-sdk-description.xml は、

<?xml version="1.0"?>
<flex-sdk-description>
<name>Flex Moxie M2</name>
<version>3.0 Moxie M2</version>
<build>172357</build>
</flex-sdk-description>

とここまでくれば同じものと考えて良いでしょう。長くなりましたが、結論、4のFlex SDK も不要。



問題は5のJavaの環境（JDK、JRE）上記サイトではJDK5が必要とありますが、Flex Builder 3のリリースノート
http://labs.adobe.com/wiki/index.php/Flex_3:Release_Notes
の「System requirements」に

Flex Builder 3 for Windows
・Java ™ Virtual Machine: Sun JRE 1.4.2 (included), Sun JRE 1.5, IBM JRE 1.5

とある。
しかし

Flex 3 SDK
・Java 1.6(Sun), Java 1.5(Sun) or Java 1.4.2 (Sun, IBM, or BEA)

である。

またまた順番が前後するが、Flex Builder 3を入れる際にJRE5.0がインストールされるようである。（インストールフォルダ\jre）
だから、Flex Builder 3を入れた時点で、Flex Builder 3のためのJava環境はできあがりなのではないか。

しかし、Flex 3 SDK のために
・Java 1.6(Sun), Java 1.5(Sun) or Java 1.4.2 (Sun, IBM, or BEA)
つまり、JDK1.4.2以上が必要なのである、せっかくなので最新のJava1.6を入れることにしよう。（この判断は皆さんにお任せします）

本当にこれがあってるかを確認するために、現在インストールされているJDK、JREをすべて削除する。
（これ、皆さんはやらなくていいですよ。結果を言えばJDK5または6が入っていれば大丈夫です。1.4.2は未確認。。）


さて、お待たせしました。作業開始。

1. Air Runtime のダウンロード、インストール
http://labs.adobe.com/downloads/air.html
より、Windowsの場合は「Download for Windows 」からダウンロード（ファイル名：air_b1_win_061107.exe）
ダウンロードが完了したら実行しましょう。

[I Agree]を押す。



待つ･･･



完了。おつかれさまでした。


次、JDKのダウンロード、インストール（これはすでにJDK5、または6が入っていれば不要です。1.4.2については未確認です。）

現時点での最新版、「JDK 6u2」を入れてみましょう。汗）
Oracle Technology Network for Java Developers | Oracle Technology Network | Oracle
より、JDK 6u2の[Download]ボタンを押し進んでください。（offline 版の場合、ファイル名：jdk-6u2-windows-i586-p.exe）
ダウンロードしたら実行。

[次へ] を押す



同意してください。



そのまま[次へ]



待ちます･･･



そのまま[次へ]



待ちます･･･



[完了] おつかれさまでした。



2. Flex Builder 3 のダウンロード、インストール
http://labs.adobe.com/technologies/air/develop_flex.html
「Get the Flex Builder 3 beta 」から進んで、「Flex Builder 3 beta」を入手できます。あ、ここにFlex 3 SDK が含まれています、て書いてますね。
では「Get the Flex Builder 3 beta 」から進んでいきましょう。ダウンロードにはAdobe IDが必要になります。お持ちでない方はこの画面から作成してください。
Flex Builderには2種類あります。
・単体で動作するもの
・Eclipse（主にJavanの開発として使われるツール）のプラグインとして動作するもの。
今回は単体で動作するもの（Flex Builder 3 Beta?Standalone Installer）をダウンロードします。（ファイル名：flexbuilder3_b1_win_sa_061107.exe）
ダウンロード完了したらダブルクリック！


[Next] を押す。



I accept･･･ をチェックして次へ



インストールするディレクトリを指定します。そのままでもいいですが、個人的にC:\app 以下に。



そのまま [Next]



[Install]ボタンを押すのだ。



インストール中･･･



[Done] を押す。インストール完了。おめでとうございます。


早速立ち上げてみましょう。

スタートメニューからAdobe → Adobe Flex Builder 3を実行



Activation（登録）画面が出るので「Try」を押す。これで評価版として使うことができます。評価版として使用できる期間は18日のようです。訂正。FAQのPDFによると30日だそうです。


File → New → AIR Project
Project Name を適当に、HelloAIRとでもする。

私はIISを使用しているので、Server Typeを「ASP.NET」にする。すると画面下部に設定画面が増える。

Web root：C:\Inetpub\wwwroot
Root URL：http://localhost

とする。念のために[Validation Configuration]ボタンを押すと設定が正しいかどうか確認してくれます。

正しい場合は画面上部に「The web root folder and root URL are valid.」と表示されます。間違っている場合は（わざとlocalhost→localho にしてみた）警告が出ます。

設定が正しいのが確認できたら次へ進みます。

プロジェクトの場所と、使用するSDKを選択します。初期状態のままで次へ



Eclipseを使ったことのある方なら見覚えがあるかもですが、そうでない方には恐怖の画面です。。SourcePath、Library Path、Main Source Folder、Output Folder･･･。何も変更せずにそのまま次へ。。



IDをユニークにしてください、と警告が出ます。とりあえず、IDをp-nix.HelloAir
としました。NameはHelloAirで。ようやく[Finish]ボタンが！ポチッ。



MXMLの編集画面が出ましたー。外観はまんまEclipseですが。。
[Design]タブを押すとデザインモードに。左下の「Components」に部品があります。ではこれを使ってHello,AIRを作りましょう。
Labelを画面にドラッグ。ボタンを画面にドラッグ。位置、大きさは適当に。


ボタンをクリックするとLabeに文字を表示したい。そのために、LabelにID名をつけてください。そうしないとあとで困るので。
IDをlabel1
とします。（MSのVisual Studioだとすべてのコントロールに自動的にID付与されるのでちょっと違和感）
Fontサイズを24くらいにして、Textの値を空にします。

画面的にはLabelが見えなくなりますが。

次、ボタンのクリックイベントを作りましょう。ボタンをクリックしたら「Hello, AIR!」と表示することにしましょう。

ボタンをダブルクリック、してもダメですからね。（´・ω・`）　Visual Studioなら･･･
[Source]タブに切り替えてクリックイベントハンドラを記述。赤字の部分を手書きします。関数には括弧が必須です。忘れないように。（ちなみにWPFのXAMLでは不要ですよね。ややこしい）


<mx:Button x="155" y="232" label="Button" width="98" height="40" click="ButtonClicked()"/>

ButtonClicked() の実装は、MXML上に書くことにします。実はまだ分かっていないのですが、本来はasファイルなどに外出しする、などのやり方が正統派なのかもしれない。しかし今回は手を抜いて、MXML上に直接書きます。（.NET脳な私は、コードビハインドはないのかー、とか思ってしまいます。。しかし頭を切り換えなければ）
タグの中に（大文字小文字区別するので注意。scriptではなくScriptです）CDATAセクションを作ってその中にスクリプトを記述します。

<mx:Script>
	<![CDATA[
	public function ButtonClicked():void
	{
		label1.text = "Hello, Air!";
	}
	]]>
</mx:Script>


最終的にできあがったMXMLは、

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
	<![CDATA[
	public function ButtonClicked():void
	{
		label1.text = "Hello, Air!";
	}
	]]>
</mx:Script>
	<mx:Label x="97" y="59" width="233" height="38" fontSize="24" id="label1"/>
	<mx:Button x="155" y="232" label="Button" width="98" height="40" click="ButtonClicked()"/>
	
</mx:WindowedApplication>

実行しましょう。緑色の三角ボタンをクリック。


ボタンを押すと、

出ましたー。おめでとうございまーす。

配布

正常に動作が確認できたら、パッケージとして配布しましょう。
Project → Export AIR Package



そのままで[Finish]ボタン。完了画面でないのでいつ終わったか分からないけど。


ではそのPackegeを確認してみましょう。ブラウザから
http://localhost/helloair/helloair.air

[開く]を押します。


インストール画面が現れます。

[Install]を押します。


アイコンを置く場所、ファイルを置く場所の設定画面

そのままで[Continue]


インストール完了

[Finish]ボタンを押す。

実行

ボタンが一つの画面が現れました。


ボタンをクリックすると、めでたく「Hello, AIR!」が表示されます。


再度実行したい場合は、スターメニュー → HelloAir、またはデスクトップのHelloAirショートカットから実行できます。

削除する場合は、コントロールパネル → プログラムの追加と削除 から行います。


以上、Flex Builderで作るAIRでした。


感想

もしかすると、Flash使いの方は、なぜFlex Builderにはタイムラインがないんだ、と思いになるかもしれません。
でもFlashMX、MX2004のActionScript2のころからいわゆる「スクリプト派（非タイムライン派）」と呼ばれる、タイムラインを使わず、asファイルを使ったオブジェクト指向的プログラミング手法はあったわけでその延長上と考えれば納得いくかな、なんて言いながら、対抗馬であるMicrosoftのWPFのデザイナー向けツールである、Expression Blendにはタイムラインが搭載された、という両社の思惑の交錯具合が興味深いです。