つくるぶガイドブログ: Adobe AIRでAjax！HTMLとJavaScriptでそのままAIRに移行できるサンプル

こんにちは、JavaScript担当の（株）アークウェブの竹村です。

2008年2月25日にAdobe AIR 1.0 (英語版)がリリースされましたね。

Adobe AIR

AIRはHTMLやJavaScriptなどWebの技術をそのまま利用してクライアントサイドのデスクトップアプリケーションの開発ができるので、今までのWebデベロッパーには親しみやすいと思います。

今回は、このAIRでHTMLとJavaScriptを使ったWebアプリをAIRに変換してユーザに配布するまでについて、書いていきます。

レジュメは↓このようになっています。

AIRアプリケーションを制作できる環境構築
ユーザに配布するまでの流れ
アプリケーション記述ファイルの作成
AIRコンテンツの制作
AIRコンテンツの確認
電子署名の作成
インストールパッケージの作成
Webにアップする (インストールバッジの作成)
おまけ：JavaScriptライブラリを利用したフォーム入力チェックのAIR化
フォーム入力チェックのWeb版を制作
AIRアプリをWebにアップするまで一気におさらい
まとめ

今回作る2つのサンプルは↓こんな感じです。

まずは、Windows環境にAIRアプリケーションを構築できる環境を作って、
パブリッシュした swf をサーバにおいて動作できるようにしてみましょう。

AIRアプリケーションを制作できる環境構築

環境構築に必要となる設定は↓この４手順です。

Adobe AIRランタイムのインストール
JDKのインストール
Adobe AIR SDKのインストール
Windowsの環境変数の変更

Adobe AIRランタイムのインストール

AIRのランタイムは下記からダウンロードできます。

Adobe AIR Download Center

ダウンロード後は、インストーラーに従ってインストールすればOKです。

Java Development Kit (JDK) のインストール

JDK 5.0 か JDK 6.0 のどちらかをインストールする必要があります。ダウンロードは下記からできます。

『JDK 5.0 Update 15』または『JDK 6.0 Update 5』のダウンロードをします。

今回、私の環境では『JDK 6.0 Update 5』の「Windows Offline Installation, Multi-language」(32bit版)をダウンロードしています。

ダウンロード後は、インストーラーに従ってインストールすればOKです。

Adobe AIR SDKのインストール

※既にAIR SDKをインストールされている場合は
↓こちらのブログの手順に従ってアンインストールしてください。

Adobe 上条さんのブログより
http://weblogs.macromedia.com/akamijo/archives/2008/02/adobe_air_3.cfm

Adobe AIR SDKは下記からダウンロードできます。

Adobe AIR SDK

「Download Adobe AIR SDK for Windows」をダウンロードします。

ダウンロード後は、zipを展開してできたディレクトリを、C:\ 直下などに移動させます。私の環境では↓こちらに移動しました。

C:\AdobeAIRSDK\

環境変数の設定

Windowsの環境変数を設定しておくと、コマンドプロンプトからAIR用のコマンドを実行するときに楽になるので設定しておきましょう。

[Windowsロゴ]＋[Break]キーで表示される「システム」ダイアログの「詳細設定」タブの「環境変数」をクリックします。「PATH」をクリックして[編集]ボタンをクリックし、変数値に↓この値を追記して[OK]をクリックします。

『 ;C:\AdobeAIRSDK\bin 』

ユーザに配布するまでの流れ

Flashの場合、制作から配布の流れは単純でした。

Flashコンテンツ制作
Flashからパブリッシュ
HTMLにobjectタグを定義してswfを読ませるように記述
Webにアップする

AIRの場合、これに少しだけ手順が増えます。

アプリケーション記述ファイルの作成
AIRコンテンツの制作 (AIRコンテンツの確認)
電子署名の作成
インストールパッケージの作成
Webにアップする

まずは、簡単にHTML+JavaScriptのサンプルアプリを出力してみます。
そのためのプロジェクトフォルダを作りましょう。私の環境では、↓こちらに作りました。

C:\work\air\ajax_sample\

アプリケーション記述ファイルの作成

「アプリケーション記述ファイル」に配布するAIRに関する情報を記述します。
何を記述するかは、テンプレートとして↓こちらのディレクトリにxmlファイルがあります。

C:\AdobeAIRSDK\templates\descriptor-template.xml

これを訳しているサイトがあったので、参考にしてください。

アプリケーション記述ファイル

今回作成するアプリケーション記述ファイルは↓こちらに下記のように記述しました。

C:\work\air\ajax_sample\ajax_sample_for_air.xml


<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0">
  <id>jp.ark-web.okra.takemura.public.js.adobeair.ajax_sample.sample</id>
  <version>0.1</version>
  <filename>AIR_Ajax_sample</filename>
  <name>AIR sample: Ajax sample</name>
  <initialWindow>
    <content>ajax_sample_for_air.html</content>
    <systemChrome>standard</systemChrome>
    <transparent>false</transparent>
    <visible>true</visible>
  </initialWindow>
</application>

AIRコンテンツの制作

簡単なHTMLとJavaScriptが連携するサンプルを作ってみました。
Web上では↓このような動作をします。

Ajaxで外部ファイルを読み込むサンプル (Web版)


<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript">
document.observe("dom:loaded", initialize, false);
function initialize() {
	$('load-from-package-button').onclick = function(){ releaseLoadButton('request.txt'); };
	$('load-from-web-button').onclick     = function(){ releaseLoadButton('http://okra.ark-web.jp/~takemura/public/js/adobe_air/ajax_sample/request.txt'); };
}
function releaseLoadButton(sFilePath) {
	new Ajax.Request(
		sFilePath,
		{onComplete: loadedText}
	);
}
function loadedText(oResponse) {
	$('viewer').innerHTML = oResponse.responseText;
}
</script>
(...)
<p>[Load]ボタンクリックで、外部ファイルをAjaxで読み込んで表示します。</p>
<button id="load-from-package-button">packageからLoad</button>
<button id="load-from-web-button">webからLoad</button>

<p>▼Loadすると、↓この部分が書き変わります。</p>
<div id="viewer"></div>

prototype.jsを利用して、load-buttonのonclickイベントのハンドラにreleaseLoadButtonを設定し、そのハンドラ内ではAjaxでrequest.txtを読み込んで、完了後は出力しています。

では、これを AIR でやってみましょう。

アプリケーション記述ファイルのcontent部分に ajax_sample_for_air.html という名前をつけましたので、上記のHTMLをこの名前で保存し直します。
できたファイルが↓こちらです。

C:\work\air\ajax_sample\ajax_sample_for_air.html

AIRコンテンツの確認

AIR環境のデバッグを起動するには、ADLを利用します。

[windowsロゴ]＋[R]キーで「ファイルを指定して実行」ダイアログを表示してから、『cmd』と入力してリターンを押すと、コマンドプロンプトが表示されます。

ここからプロジェクトフォルダに移動します。
このときのディレクトリ構成は↓このようになっています。


  cd C:\work\air\ajax_sample\
  dir
  (...)ajax_sample_for_air.html
  (...)ajax_sample_for_air.xml
  (...)ajax_sample_for_web.html
  (...)js
  (...)request.txt
  ※dirの時刻とサイズは割愛しました

この状態から、ADLを実行します。

adl ajax_sample_for_air.xml

■注記１：
下記のエラーが出るようであれば、『環境変数』の設定に失敗しています。もう一度確認してください。

> 'adl' は、内部コマンドまたは外部コマンド、
> 操作可能なプログラムまたはバッチファイルとして認識されていません。

■注記２：
もし、↓このようなエラーが出てしまうようであれば、アプリケーション記述ファイルのapplicationタグ部分を確認してください。

invalid application descriptor: descriptor version does not match runtime version

AIR1.0では下記のようになっています。

<application xmlns="http://ns.adobe.com/air/application/1.0">
※ベータ版では、http://ns.adobe.com/air/application/1.0.M4 などとなっていたはずです

■注記３：
もし、↓このようなエラーが出てしまうようであれば、

invalid application descriptor: invalid application identifier

アプリケーション記述ファイルをよく確認してみてください。複数行になっていたり、idタグに _(アンダーバー) が入っていたりすると表示されるようです。

↓このような画面が表示されて、[Load]ボタンでrequest.txtの内容が表示されればOKです。

電子署名の作成

Adobe AIRでは「署名以降にインストールファイルが変更されていない」ということと「該当の ID が発行者のもの」ということを保障するために電子署名の作成を行う必要があります。

開発中の場合は『自己証明書』を利用します。この電子署名は第三者のよる検証は行われないので一般に配布する場合はVeriSignやThawteが発行する証明書を利用した方が良いそうです。

# ただし、商用証明書は結構高価なので今後の状況を見つつ、という感じでしょうか。

とりあえず、自己証明書で進めます。

コマンドプロンプトから、ADTを実行します。

cd C:\work\air\ajax_sample\ adt -certificate -cn SelfSigned 1024-RSA ajax_sample_for_air.pfx mypassword

これで、mypassword というパスワードで自己署名した拡張子pfx のファイルができあがります。

インストールパッケージの作成

インストールパッケージは、AIRを実行するのに必要な全ファイルと上記で作成した電子証明書ファイルを指定して、パッケージファイルを作成します。

コマンドプロンプトから、ADTを実行します。


  cd C:\work\air\ajax_sample\
  adt -package -storetype pkcs12 
      -keystore ajax_sample_for_air.pfx 
      -storepass mypassword ajax_sample.air 
      ajax_sample_for_air.xml ajax_sample_for_air.html js request.txt
  ※上記は改行せずに入力してください

「ajax_sample.air」が作成できたら、ダブルクリックで実行してみましょう。
(実行できないようなら、AIRランタイムを入れてください)

AIRのアプリケーションインストーラーが表示されたら、[Install]からインストールできます。

インストール後、exeファイルをダブルクリックすると、ADLでテストしたのと同様のウィンドウで実際に動作することが確認できます。

Webにアップする (インストールバッジの作成)

AIR 1.0からは、ユーザがWebからパッケージをインストールするために、インストールバッジというFlashを表示できるようになっています。

インストールバッジは下記からダウンロードできます。

AIR Badge

ダウンロード後は、zipを展開してできたファイルのうち、下記のファイルをプロジェクトフォルダにコピーします。

- swfobject.js
- AIRInstallBadge.swf
- expressinstall.swf

ただ、AIRのファイルと混ざるとあまり嬉しくないので installer というフォルダを作ってその中に入れました。

C:\work\air\ajax_sample\installer\

次は、インストールバッジを表示するHTMLの作成です。


<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
document.observe("dom:loaded", initialize, false);
function initialize() {
	var so = new SWFObject("AIRInstallBadge.swf", "AIRBadge", "215", "180", "9.0.115", "#FFFFFF");
	so.useExpressInstall('expressinstall.swf');
	so.addVariable("airversion", "1.0");
	so.addVariable("appname", "Ajax sample");
	so.addVariable("appurl", "http://okra.ark-web.jp/~takemura/public/js/adobe_air/ajax_sample/ajax_sample.air");
	so.write("badgePlaceHolder"); //"badgePlaceHolder"はバッジのSWFを表示するdiv要素のid
}
</script>
(...)
<div id="badgePlaceHolder" style="width:215px; height:180px;">

アクセスしてみると、『バッジ』が表示されます。

Ajax sample のインストールバッジ

カッコイイですね☆

Flashの指定バージョン(9.0.115)がインストールされていない場合は↓このような自動アップデートが実行されます。

[Install Now]をクリックして、[Open]をクリックして、[Install]をクリックして、インストールが完了すると、アプリケーションが実行されます。

Web版で作ったのと同じく[Load]ボタンを押すと、Ajaxでrequest.txtを読み込んで出力しています。

サンプル２：JavaScriptライブラリを利用したフォーム入力チェックのAIR化

AIRのアプリケーションを作る流れは理解できたと思いますが、何となくこれだけだとサンプルが寂しいので、フォーム入力チェックをするWebアプリをAIR化してみました。

今回、利用するJavaScriptのフォーム入力チェックのライブラリは↓こちらです。

Realtime validation using Ajax

ユーザが入力したそばから入力チェックが走るライブラリです。

フォーム入力チェックのWeb版を制作

フォーム入力チェックサンプル (Web版)

このライブラリのValidator.register関数の設定については↓こちらに試行錯誤したメモを残しましたので参考までにどうぞ。

JavaScript/自動で入力チェックを行うJavaScriptライブラリ/Realtime validation using Ajaxの設定方法

AIRアプリをWebにアップするまで一気におさらい

アプリケーション記述ファイルの作成

ファイルを↓このように作り、内容を書き込みます。

C:\work\air\form_sample\form_sample_for_air.xml


<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0">
  <id>jp.ark-web.okra.takemura.public.js.adobeair.form-sample.sample</id>
  <version>0.1</version>
  <filename>AIR_Form_sample</filename>
  <name>AIR sample: Form sample</name>
  <initialWindow>
    <content>form_sample_for_air.html</content>
    <systemChrome>standard</systemChrome>
    <transparent>false</transparent>
    <visible>true</visible>
  </initialWindow>
</application>

AIRコンテンツの制作

上記で制作したWeb版をコピーして名前を form_sample_for_air.html に変えて保存します。

C:\work\air\form_sample\form_sample_for_air.html

AIRコンテンツの確認

[windowsロゴ]＋[R]キーで「ファイルを指定して実行」ダイアログを表示してから、『cmd』と入力してリターンを押して、コマンドプロンプトを表示。

プロジェクトフォルダに移動後、ADLを実行します。

cd C:\work\air\form_sample\ adl form_sample_for_air.xml

デバッグして問題なければ次へ進みましょう。

電子署名の作成

adt -certificate -cn SelfSigned 1024-RSA form_sample_for_air.pfx ********** ※実パスワードは「**********」と伏せておきました、適当なパスワードを入れてください

インストールパッケージの作成


  adt -package -storetype pkcs12 
      -keystore form_sample_for_air.pfx 
      -storepass ****** form_sample.air 
      form_sample_for_air.xml form_sample_for_air.html js images
  ※上記は改行せずに入力してください

「form_sample.air」が作成できたら、ダブルクリックで実行して、インストールして内容をチェックします。

アンインストールは、[Windowsロゴ]＋[C]キーでコントロールパネルを開いて、「プログラムの追加と削除」から『AIR sample: Form sample』を削除します。

Webにアップする (インストールバッジの作成)

installer フォルダを作って、AIR Badgeの下記ファイルをコピーします。

- swfobject.js
- AIRInstallBadge.swf
- expressinstall.swf

C:\work\air\ajax_sample\installer\

インストールバッジを表示するHTMLの作成。


<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
document.observe("dom:loaded", initialize, false);
function initialize() {
	var so = new SWFObject("AIRInstallBadge.swf", "AIRBadge", "215", "180", "9.0.115", "#FFFFFF");
	so.useExpressInstall('expressinstall.swf');
	so.addVariable("airversion", "1.0");
	so.addVariable("appname", "Form sample");
	so.addVariable("appurl", "http://okra.ark-web.jp/~takemura/public/js/adobe_air/form_sample/form_sample.air");
	so.write("badgePlaceHolder"); //"badgePlaceHolder"はバッジのSWFを表示するdiv要素のid
}
</script>
(...)
<div id="badgePlaceHolder" style="width:215px; height:180px;">

バッジにアクセスします。

Form sample のインストールバッジ

[Install Now]をクリックして、[Open]をクリックして、[Install]をクリックして、インストールが完了し、アプリケーションを実行して内容を確認します。

まとめ

今回はAdobe AIRの制作環境を構築し、ユーザに配布するまでの流れを順を追って説明していきました。最後に超特急でしたが全工程をおさらいもしましたし、これで制作と配布はできるようになったと思います。

また、Web版のHTML+JavaScriptのコードをそのままAIRにパッケージ化することができることもお分かりいただけたと思います。

次回は、もう少し具体的にまた何かマッシュアップしつつ、AIRが提供するAPIとの連携をやりたいと思っています。では、また次回お楽しみに☆

最近のエントリー

最近のコメント

カテゴリー

アーカイブ

Adobe AIRでAjax！HTMLとJavaScriptでそのままAIRに移行できるサンプル

AIRアプリケーションを制作できる環境構築

Adobe AIRランタイムのインストール

Java Development Kit (JDK) のインストール

Adobe AIR SDKのインストール

環境変数の設定

ユーザに配布するまでの流れ

アプリケーション記述ファイルの作成

AIRコンテンツの制作

Ajaxで外部ファイルを読み込むサンプル (Web版)

AIRコンテンツの確認

電子署名の作成

インストールパッケージの作成

Webにアップする (インストールバッジの作成)

Ajax sample のインストールバッジ

サンプル２：JavaScriptライブラリを利用したフォーム入力チェックのAIR化

フォーム入力チェックのWeb版を制作

フォーム入力チェックサンプル (Web版)

AIRアプリをWebにアップするまで一気におさらい

アプリケーション記述ファイルの作成

AIRコンテンツの制作

AIRコンテンツの確認

電子署名の作成

インストールパッケージの作成

Webにアップする (インストールバッジの作成)

Form sample のインストールバッジ

まとめ

タグ:

最近のエントリー

最近のコメント

カテゴリー

アーカイブ

Adobe AIRでAjax！HTMLとJavaScriptでそのままAIRに移行できるサンプル

AIRアプリケーションを制作できる環境構築

Adobe AIRランタイムのインストール

Java Development Kit (JDK) のインストール

Adobe AIR SDKのインストール

環境変数の設定

ユーザに配布するまでの流れ

アプリケーション記述ファイルの作成

AIRコンテンツの制作

Ajaxで外部ファイルを読み込むサンプル (Web版)

AIRコンテンツの確認

電子署名の作成

インストールパッケージの作成

Webにアップする (インストールバッジの作成)

Ajax sample のインストールバッジ

サンプル２：JavaScriptライブラリを利用したフォーム入力チェックのAIR化

フォーム入力チェックのWeb版を制作

フォーム入力チェック サンプル (Web版)

AIRアプリをWebにアップするまで一気におさらい

アプリケーション記述ファイルの作成

AIRコンテンツの制作

AIRコンテンツの確認

電子署名の作成

インストールパッケージの作成

Webにアップする (インストールバッジの作成)

Form sample のインストールバッジ

まとめ

タグ:

フォーム入力チェックサンプル (Web版)