[Adobe AIR Advent Calendar 2013 22日目] 今なればこそ？HTMLによるAIR開発を取り上げてみる

この記事は「Adobe AIR Advent Calendar 2013」の22日目の記事です。
まぁ既に22日過ぎているというよりも、クリスマスすら終わっているのでAdventCalendarでもなんでもないんですが、番外編的な感じで見てもらえればと思います。

HTMLでAIR

AIRって、AS3.0で作成するっていう印象がありますが、実はHTMLでも作れるんですね。たまに、AIRのクラス名とかをググったらHTML用のAIRリファレンスにたどり着くことがありませんでしたか？はい、それです。

そんなわけで、簡単なプログラムでも組んで、どんなものか見てみましょう。

ああ、ちなみに、先に警告しておくと、これデスクトップのみしかターゲットにできないらしいので、モバイルにも展開したい人はPhoneGapやりましょう。まぁ似たような感じで作れるとは思いますが。

用意するもの

AIR SDK ( http://www.adobe.com/devnet/air/air-sdk-download.html )
jQuery ( http://jquery.com/ )

1. 環境構築

まずは、適当な場所にフォルダを作りましょう（以下作業フォルダ）。デスクトップでもどこでもいいです。そうしたら、中に以下の空ファイルを作成してください。

Main.html
app.xml

んで、ダウンロードしたjqueryのjsファイルを作業フォルダに入れてください。

最後に、AIR SDK内の「frameworks/libs/air/AIRAliases.js」を作業フォルダにコピーします。

これで、フォルダの中に4つのファイルが出来ました。

最後にWindowsの人であればコマンドプロンプト、Macの人であればターミナルを開き、「cd」と打ったあと、半角スペースの後に作業フォルダをD&Dしてください。これでエンターを押すと、現在ターミナル（或いはコマンドプロンプト）が見ている場所が作業フォルダになります。

これで環境構築完了です。

2. app.xmlの記述

以下をコピペしてください。

<application xmlns="http://ns.adobe.com/air/application/3.9">
 <id>air.jp.test.html.HTMLAIRExample</id>
 <versionNumber>1.0.0</versionNumber>
 <filename>HTMLAIRExample</filename>
 <initialWindow>
 <content>Main.html</content>
 <visible>true</visible>
 <width>600</width>
 <height>600</height>
 </initialWindow>
</application>

まぁAIRやっている方々には説明不要ですかね。

3. Main.htmlの記述

以下をコピペしてください。

<!DOCTYPE html>
<html lang="ja">
 <head>
 <meta charset="utf-8">
 <title>HTMLAIRExample</title>

 <script src="AIRAliases.js" />
 <script src="jquery-1.10.2.min.js"></script>

 <script>
 $(function() {
 $("#alartButton").click( function(event) {
 alert("Yahoooooooooooooo!");
 });
 });
 </script>
 </head>
 <body>
 <h1>Welcome to AIR Program by HTML</h1>
 <button id="alartButton">Click!</button>
 </body>
</html>

まぁこれも説明不要ですかね。ボタン押したらアラートがでる感じですね。

注意点として、jqueryはGoogleなどから動的にダウンロード出来ないので気をつけてください。やると読み込まれまれずにランタイムエラーが起きます。必ずダウンロードして同梱してください。

あと、このHTMLをブラウザで実行しようとしても実行できません。後述するADLを使用する必要があります。どうしてもまずはブラウザで実行して確かめてみたいという人は、AIRAliases.jsのリンクを切ればOKです。

4. デバッグ

AIR SDKのADL(AIR Debug Launchar)を使用します。ADLはAIR SDKの「bin」フォルダに入ってます。

ターミナルにADKファイルをD&Dしてください。パスが通っている人は別にadlって直接叩いて構わないです。

D&Dしたら、次にフォルダ内にあるapp.xmlを更にD&Dします。これで以下のような文字列になっているかと思います。ファイルパスは各自違うと思いますので確認して下さい。

/Users/username/Desktop/AIRSDK/bin/adl /Users/username/Desktop/HTML_AIR/app.xml

これでエンターキーを叩くと、ADLが立ち上がり、デバッグが出来るはずです。もし問題があったり、今回は使用していないですけどair.traceを使うときなどは、ターミナルの方に出力されます。

5. パッケージ化

通常のAIR開発と同様、パッケージ化には証明書が必要になります。

証明書を持ってない方は、適当に作ってください。直接ADTで作ってもいいですし、FlashBuilderやFlashProfessionalで作っても構わないです。一応、ADTで直接作る際のコード載せておきますね。adtと証明書のファイルパスにはご注意ください。パスワードは「password」となります。

adt -certificate -cn SelfSign 1024-RSA /Users/username/Desktop/test.p12 password

そして、以下を入力します。最後のドットまで必ず入れてください。これは謂わばワイルドカード的な意味合いがあります。

adt -package -storetype pkcs12 -keystore test.p12 HelloWorld.air app.xml .

実行するとパスワードを聞かれますので、パスワードを入力してエンターを押すと、airファイルがビルドされます。

あとはインストールして、無事起動しているか確認して下さい。

そんな感じで

なんか、HTMLがもてはやされる今だからこそ、こういう技術の紹介もいいのではないかと思って紹介させていただきました。リファレンスを見ていただければ、そこそこ機能はあるのは分かりますし、NativeProcessも扱えるみたいですので、頑張ればいろんなアプリが作れるのかなと思います。

以上で終了です。お疲れ様でした。

参考資料

AIR SDK を使用した初めての HTML ベースの AIR アプリケーションの作成
http://help.adobe.com/ja_JP/air/build/WS5b3ccc516d4fbf351e63e3d118666ade46-7ecc.html

HTML 開発者用 Adobe® AIR® API リファレンスガイド
http://help.adobe.com/ja_JP/air/reference/html/

ADT package コマンド
http://help.adobe.com/ja_JP/air/build/WS901d38e593cd1bac1e63e3d128cdca935b-8000.html

ファイルとパスのオプション
http://help.adobe.com/ja_JP/air/build/WS901d38e593cd1bac1e63e3d128fc240122-7ff2.html