最終回となる今回は、Flex3 SDKを利用して、AIRアプリケーションを作成します。AIR(Adobe Integrated Runtime)とは、ActionScript3.0やFlexを利用してデスクトップアプリケーションを作るための仕組みです。OSの違いを意識することなくデスクトップアプリケーションが作成できるのは大変魅力的です。現在、WindowsとMac OSがサポートされていますが、Linux版のランタイムもリリース予定となっています。
コマンドラインツールでAIRを作ろう
AIRでは既存のFlashをAIRアプリケーションとして利用することができます。そこで、第2回で作成したDrawTest1.swfを利用してみます。
AIRとして実行するには、アプリケーション記述ファイルと呼ばれるファイルを作成します。
このファイルをDrawTest1-app.xmlとして保存します。同じフォルダにDrawTest1.swfも置いておきます。
テスト実行
テスト実行するにはadl コマンドにアプリケーション記述ファイルを渡します。
実行すると次のような画面が表示されます。分かりにくいですが、単独のアプリケーションとして起動されています。Flash Playerが表示されているわけではありません。
パッケージ化
さて、このAIRアプリケーションを配布用にパッケージ化してみましょう。アプリケーションというにはあまりにも寂しいですが、今のうちは我慢してください。
AIRではアプリケーションのセキュリティ確保のために、電子署名する必要があります。ここでは、開発用として自己署名の証明書を作成されます。
SamplePassword というパスワードで署名した証明書cert.pfx が生成されました。
証明書が作成できたら、adt-packageコマンドを実行してパッケージ化します。パラメータの数が多くてややこしいですが、次のような順序で指定します。
「パッケージに含めるファイル」には AIR アプリケーションを構成するファイルを全て指定します。今回はDrawTest1.swfのみから成り立っているため、DrawTest1.swfのみを指定します。
結果として、adtコマンドのオプションは次のようになります(実際には1行で入力します)。
証明書のパスワードを聞かれるので、先ほど設定したパスワード(ここではSamplePassword)を入力します。
これでDrawTest1.airの完成です。
作成したAIRをインストールする
それでは、作成したアプリケーションをインストールしてみましょう。インストールするには事前にAIRランタイムがインストールされている必要があります。AIRランタイムはhttp://get.adobe.com/airからダウンロードできます。
AIRランタイムが導入された状態でDrawTest1.airを実行すると、インストーラが立ち上がります。
アプリケーションの情報として、Publisher、Application、System Accessという項目が表示されています。PublisherはUNKNOWNになっていますが、これは自己署名の証明書を利用しているためです。Applicationにはアプリケーション記述ファイルで指定した「DrawTest1」という文字列が表示されています。System Access(システムアクセス権)はUNRESTRECTED(無制限)となっていますが、AIR1.0では全てのアプリケーションは無制限にアクセス権を持っています。
Installボタンを押すと、インストールのオプションが表示されます。
Continueボタンを押して少し待つとインストールは完了です。自動的にアプリケーションが起動します。
Windowsの場合、アプリケーションはデフォルトでC:\Program Filesの下にインストールされています。DrawTest1.exeというファイルが作成されていますね。
なお、アプリケーションのアンインストールは、コントロールパネルの「プログラムの追加と削除」から行えます。
FlexでAIRアプリケーションを作成する
先ほどは既存のFlashかAIRアプリケーションを作成しましたが、ここからはFlexフレームワークを用いて、AIRに特化したFlashファイルを作成してみましょう。
FlexフレームワークにAIRアプリケーション専用のMXMLコンポーネントがいくつか用意されています。例えば、ルートタグとしてWindowedApplicationがあります。
サンプルをご覧いただきましょう。前回の最初にお見せしたサンプルのルートタグをWindowedApplicationに変更しています。AirTest1.mxmlとしてUTF-8で保存しておいてください。
コンパイルする
AIR用のコンポーネントやクラスを利用した場合は、mxmlcではコンパイルに失敗してしまいます。
AIR専用のFlashファイルを作成する場合は、amxmlcを利用します。コンパイル方法はmxmlcと同様です。
これで AirTest1.swfが生成されます。AIR専用のコンポーネントを含んでいるため、Flash Player で再生すると次のような例外が発生してしまうので注意してください。
テスト実行する
それでは、アプリケーション記述ファイルを用意してadlで実行してみましょう。先ほどのアプリケーション記述ファイル中DrawTest1をAirTest1に変えて、AirTest1-app.xmlという名前で保存します。
adlコマンドでテスト実行してみましょう。
次のようなウインドウが表示されます。
このままでもいいのですが、アプリケーション記述ファイルのsystemChromeタグをnoneに、transparentタグをtrueに変更して実行してみます。
すると、次のようなウインドウになります。
systemChromeをnoneにしたので、OS標準のウインドウ枠ではなくAIRのウインドウ枠が表示されました。このウインドウ枠を表示しているのがWindowedApplicationタグなのです。
見た目をカスタマイズしよう
WindowedApplicationタグに追加の設定をしてみましょう。
titleプロパティ、statusプロパティ、titleBarColorsプロパティを設定しています。amxmlcでコンパイルして、adlで実行してみます。
プロパティの変更が反映されていますね。タイトルバーの色が変わって、タイトルバーとステータスバーに文字が表示されました。
WindowedApplicationタグで利用できる属性については、Flex 3リファレンスガイドのWindowedApplication クラスをご覧ください。
実践的なAIRアプリケーション
最後に、実践的なAIRアプリケーションを作ってみましょう。前回まで作成してきたロゴジェネレータをAIRアプリケーションに移植してみます。AIRの特徴を生かして、ロゴを画像ファイルとして保存できるようにします。
MXMLの修正
まずは、MXML(ComponentTest.mxml)の修正です。ルートタグをWindowedApplicationに変更して、ボタンを追加します。
先ほどと同じように、amxmlcを使ってコンパイルします。
アプリケーション記述ファイルComponentTest-app.xmlを作成します。
adl コマンドで実行すると次のようなウインドウが表示されます。
AIRアプリケーションの見た目は完成しました。
ファイル選択ウインドウの表示
次に、ボタンクリック時の処理をActionScript3.0で書いていきます。
まずは保存するファイルを選択するためのウインドウを表示します。FileクラスのbrowseForSave()メソッドが便利です。
Fileクラスはローカルのファイルを扱うための、AIR専用のクラスです。ここまでで再度コンパイルして実行してみましょう。
保存ボタンを押すと、次のようにファイル選択ウインドウが表示されるようになりました。
PNG形式で保存する
最後の仕上げに、指定されたファイル名で保存する部分を実装します。ファイルが選択されると、selectイベントが発生します。selectイベントのハンドラには、次のように記述します。
PNGファイルをして保存するためにPNGEncoderクラスを利用しています。変換後のデータはByteArrayオブジェクトとして受け取ります。ByteArrayクラスはバイナリデータを扱うためのクラスです。
ファイルに保存するために、FileStreamオブジェクトを作成して、ファイルを書き込み用で開いています。ファイル名はファイル選択ウインドウで選択されたものを利用します。writesBytesメソッドを呼び出してByteArray の中身を書き込んでファイルを閉じています。
これで完成です。最終的にソースコードは次のようになりました。
まとめ
AIRアプリケーションの開発方法を簡単に紹介しました。今回お見せしたように、既存のFlashやFlexアプリケーションを、デスクトップアプリケーションとして再利用できるのも魅力的です。AIRの開発については、gihyo.jpの連載「Adobe AIRで作るデスクトップアプリケーション」も参考になるでしょう。
この連載では、Flex 3 SDKを利用したFlashの作り方に絞ってActionScript3.0やFlex、AIRの開発方法を説明してきました。この連載をきっかけに、少しでもActionScriptやFlex、AIRに興味を持っていただけたなら幸いです。
繰り返しになりますが、ActionScriptやFlexは、Adobe-Flex:Flexドキュメンテーションに日本語のドキュメントがたっぷりそろっています。この連載は今回で最終回ですが、今後、皆さんで試行錯誤しながら学習していってくださることを期待しています!