はじめに
OSXとテキストエディタを使ってはじめてのAIRアプリケーションを作成してみましょう。AirとはFlashやAjaxなどweb技術を用いてデスクトップ用のアプリケーションを作成するためのフレームワークです。
Airの特徴として、ブラウザ上で動作しているアプリケーションで実現するには難しい、デスクトップからファイルをDrag&Dropしたり、ローカルファイルシステムへのアクセスなどOSの機能を利用することもできます。
またAirで作成されたアプリケーションはWindows、OSX、Linuxで動作するためより幅広いクライアント環境で動作させることができます。
Airを作成するためのSDKはadobeが無料で公開しており、Flashアプリケーションを作成するためのFlexもオープンソース化されたことにより無料で開発環境が用意できます。
さらにFlexBuilderという有料のIDEも用意されているためVisualStudioやEclipseに慣れた開発者の方はこちらを購入するとよいと思います。
今回はIDEは使用せずにテキストエディタとコマンドラインで開発しています。
ここではAdobeのドキュメントに従って半透明なウィンドウにHelloWorldと表示させるアプリケーションを作りながらFlexとAirのSDKの使い方とアプリケーション開発の流れを紹介しています。
完成アプリケーションはこのようになります。
開発環境を準備する
ここではOSX環境で説明していますが、WindowsやLinuxでも基本は同じです。
FlexSDKとAIR SDKをダウンロードします。
AIR_SDKディレクトリとflex_sdk_3ディレクトリをそれぞれ/Applicationsディレクトリにコピーします。
Pathに各ディレクトリのbinを設定します。
ここでは.bashrcに次のように追加しました。
export PATH="........ /Applications/flex_sdk_3/bin:\ /Applications/AIR_SDK/bin/"
ターミナルを立ち上げコマンドラインから
>adl -help >amxmlc -help
が実行できればAIRとFlexの開発環境が整いました。
AIRアプリケーション記述ファイル作成
HelloWorld-app.xmlというファイル名で、次のようなアプリケーション記述ファイルを作成します。
<pre><?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0">
<id>samples.flex.HelloWorld</id>
<version>0.1</version>
<filename>HelloWorld</filename>
<initialWindow>
<content>HelloWorld.swf</content>
<visible>true</visible>
<systemChrome>none</systemChrome>
<transparent>true</transparent>
<width>400</width>
<height>200</height>
</initialWindow>
</application></pre>
この例ではいくつかの設定しか記述していません。透明度やアイコン、ディフォルトのインストール先など、数多くの設定可能なすべてのプロパティはドキュメントを参照してください。
アプリケーションのコードを書く
SWFベースのAIRアプリケーションはMXMLを使ってもActionScriptを使っても作成できますが、ここではFlexSDKとMXMLを使っています。
1. テキストエディタを開きHelloWorld.mxmlという名前で次のコードを入力します。
<?xml version="1.0" encoding="utf-8"?>
<pre><?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="Hello World">
<mx:Style>
WindowedApplication
{
background-color:"0x999999";
background-alpha:"0.5";
}
</mx:Style>
<mx:Label text="Hello World" horizontalCenter="0" verticalCenter="0"/>
</mx:WindowedApplication></pre>
mx:Labelで中央にHelloWorldを表示し、mx:Styleで背景色と透明度の設定をしています。
アプリケーションをコンパイルする
amxmlcコンパイラを使ってMXMLファイルをSWFファイルにコンパイルします。
HelloWorld.mxmlのディレクトリに移動し、次のコマンドでコンパイルします。正常にコンパイルできれば、HelloWorld.swfが作成されます。
amxmlc HelloWorld.mxml
アプリケーションのテスト
AIRデバッガーランチャー(ADL)を使い、アプリケーション記述ファイルを指定してAIRアプリをデバッグ実行することができます。
コマンドラインから次のコマンドを入力するとアプリケーションが起動します。
>adl HelloWorld-app.xml
AIRインストーラーファイルの作成
アプリケーションが完成したらADTユーティリティを使用してAIRインストーラーファイルにパッケージ化します。
アプリケーションの安全のため、すべてのAIRアプリケーションはデジタル署名が必要となっています。ここでは開発用の自己証明書を使ってインストーラーファイルを作成します。自己証明書の場合インストール時に表示される配布者アイデンティティがUnknownとなります。
製品向けにアプリケーションを配布する場合は VeriSignやThawteからキーを購入することができます。
1.自己証明書を作成する
次のコマンドを実行します。
adt -certificate -cn SelfSigned 1024-RSA sampleCert.pfx samplePassword
2.インストーラーの作成
次のコマンドを実行します。（実際は一行です）
パスワード入力が求められるので上で入力したsamplePassowrdを入力してください。
adt -package -storetype pkcs12 -keystore sampleCert.pfx HelloWorld.air HelloWorld-app.xml HelloWorld.swf
これでHelloWorld.airが作成されました。このファイルをダブルクリックすることで、アプリケーションをインストールし、実行することができます。
簡単ですね。実際にはMXMLでより複雑なアプリケーションを作成していくことでしょう。または、SWFのかわりに、HTMLとJavascriptを用いてもAIRアプリケーションを作成することができます。
タグ: air, flex
