八角研究所 : JavaScript使いのためのAIR入門（2） - 今回はAIRパッケージの作成について

JavaScript使いのためのAIR入門（2） - 今回はAIRパッケージの作成について

JavaScript使いのためのAIR入門(2)

クジラ飛行机です。前回より、JavaScriptが分かる人を対象に、話題の技術 Adobe AIR について解説しています。Adobe AIR は、Web プログラミングで習得した技術(HTML/JavaScript/Flashなど)を利用して、デスクトップアプリケーションを作ることができるのです。今回はAIRパッケージの作成について紹介します。

前回までのおさらい

※本稿は、AIRのベータ3(1.0.M6)を使用しています。将来のバージョンでは、多少パラメーターなどが変わる可能性があります。

前回は、AIR をインストールして、Hello, World を表示するプログラムを作ってみました。いつも通り、HTML ファイルに JavaScript を書いたものがブラウザではなく、ウィンドウアプリケーションとして動いたことに感動したでしょうか。

ただ、HTMLファイルだけでなく、AIR アプリケーションのための設定XML(The application descriptor file)を書かなくてはならず、「ちょっと面倒だな」と思ったかもしれません。

ここで、再度、HTML を AIR アプリケーションとして実行するまでの手順をおさらいします。

(1) HTML ファイルを書く
(2) AIR のための設定XMLファイルを書く
(3) コマンドラインツールの adl を利用して実行

この手順(3)の adl ですが、これは以下のように書くことで、AIR アプリケーションを実行できます。adl は、AIR Debug Launcher の略で、AIR のテストを行う時に利用します。

adl (設定XMLファイル) [(ルートディレクトリ)]

テストと言うのは何度も行うものなので、前回は「test.bat」というバッチファイルを作成し、これをダブルクリックすることでプログラムを実行しました。

AIR パッケージの作り方

せっかくコマンドラインの話が出たので、AIR パッケージの作り方を紹介します。AIR パッケージは、AIR アプリケーションの信頼性を高めるために、署名を行わなければならないルールになっています。署名の証明機関から証明書を発行してもらうことで、安全に AIR パッケージを配布できます。

…と、言っても個人の趣味など、ちょっとしたプログラムのために AIR のパッケージを配布するには敷居が高いですよね。そこで、誰にも証明されていない証明書を作ることができます。

パッケージを作成するコマンド「adt」で(証明されていない)証明書を作成することができます。証明書の作り方は次の通りです。(以下は最も単純な書式です。詳しくは AIR のマニュアルをご覧ください。)

adt -cetification -cn (証明書の名前) (暗号の種類) (ファイル名) (パスワード)

暗号の種類には、「1024-RSA」とか「2048-RSA」などを指定します。そして、ファイル名には「.pfx」の拡張子を持つ出力ファイル名を指定します。例えば、以下のようにして証明書を作成することができます。

adt -certificate -cn test 1024-RSA test.pfx pass

これで、「test.pfx」という証明書ができました。

では、前回作成した Hello.html を AIR パッケージに変換してみましょう。これを行うのも、「adt」コマンドを使います。書式は次の通りです。ちょっと長いですが、次のようになっています。(以下の書式は見やすく改行していますが、実際には改行はありません。)

adt -package
    -storetype pkcs12
    -keystore (証明書ファイル)
    -storepass (パスワード)
    (出力ファイル名)
    (設定XMLファイル)
    (梱包するファイル/フォルダを並べる .. 絶対パスの指定は不可)

※2008/1/20訂正～書式がAIRのベータ2(1.0.M5)のままになっていましたので、
AIRのベータ3(1.0.M6)に準拠しました。

先ほど作った証明書(test.pfx)を使ってパッケージを作ってみます。

[ここで用意したファイル]

証明書ファイル: test.pfx
設定XML : Hello.xml
プログラム本体: Hello.html

日本語を表示/入力するには？

次に、Hello.html を少し改良して日本語を表示させてみます。これも、ほとんど普通のHTMLと同じです。しかし、違う部分もあります。それは、文字コードを、UTF-8で保存する必要があるのです。(しかも、BOM無しの UTF-8Nはだめです。)これにより、日本語を表示させることができます。

例えば、以下のような HTML を Hello.html に記述して実行してみるとします。無事、日本語が表示できれば素晴らしいのですが、文字化けしてしまった人は、文字コードを指定して、UTF-8 で保存するようにして再度実行してみてください。

<html><body>こんにちは！</body></html>

また、残念なことに、原稿執筆時点のAIR 1.0.M5のHTML+JavaScriptでは、日本語を全く入力することができません。将来的には日本語入力も可能になると思いますが、現在はできません。アルファベットや数値などシングルバイトの文字のみ入力可能です。(もちろん、Flex版やFlash版のAIRでは問題なく日本語入力が可能です。これは、JavaScript版の制限です。)

肥満度判定プログラム

では、今回は簡単なサンプルプログラムとして、身長と体重から肥満度を求める BMI 計算ツールを作ってみようと思います。肥満度の判定は次のような式で行うことができます。

BMI = 体重(kg) / 身長(m)^2

そして、このBMIの値が22に近ければ近いほど標準体型であるというものです。今回作るプログラムは、以下のような簡単なアプリケーションです。身長と体重を入力して[計算]ボタンをクリックすると、BMIの値と肥満度を表示します。

HTML は以下の通りです。何の変哲もない HTML + JavaScript のソースです。このプログラムは、Web ブラウザ上でも動きます。そして、何の変更も加えず、AIR のアプリケーションとして作成することができます。これを「BMI.html」という名前で保存します。

<html><body>
<script type="text/javascript"><!--
function calcBMI() {
  var h = height.value;
  var w = weight.value;
  h /= 100; // メートルに直す
  var bmi = w / (h * h);
  var per = Math.floor(100 * (bmi / 22));
  var s = "BMIは、"+bmi+"。<br>肥満度は、" + per + "%";
  $("result").innerHTML = s;
}
function $(id) {
  return document.getElementById(id);
}
//-->
</script>
<h1>BMI 計算ツール</h1>
体重(kg): <input type="text" id="weight" value="60"><br>

身長(cm): <input type="text" id="height" value="160"><br>
<input type="button" onclick="calcBMI()" value="計算">

<div id="result"></div>
</body></html>

これを AIR アプリケーションとして動かすためには、まず、AIR のための設定ファイルを作ります。ここでは以下のようなXMLファイルを作りました。「BMI.xml」という名前で保存しました。

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0.M6"
    version="1.0">
    <name>BMI</name>
    <id>com.kujirahand.test.bmi</id>
    <description>BMI TOOL</description>
    <copyright>kujirahand</copyright>
    <filename>Bmi.air</filename>
    <initialWindow>
    <content>Bmi.html</content>
        <visible>true</visible>
        <width>640</width>
        <height>480</height>
    </initialWindow>
</application>

そして、これを AIR アプリケーションでテストするには、次のようなバッチファイルを作成して、これをダブルクリックすることで、テストを実行できます。

rem TEST
adl BMI.xml

それから、今回、連載の冒頭で紹介した方法で、AIR の配布形式にするには、次のバッチファイルを作成します。

rem BUILD PACKAGE
adt.bat -package -storetype pkcs12 -keystore mycert.pfx -storepass test BMI.air BMI.xml BMI.html

これで、BMI.air という AIR の配布パッケージが完成しました。

今回のまとめ

今回は、主にAIRパッケージの作成方法について紹介しました。ここでみた、BMI ツールのように、HTML + JavaScript を使う方法では、Web ブラウザと、AIR で何も変えることなく同じように動くアプリケーションを作ることができました。ただし、AIR ベータ2 では、日本語が入力できないという致命的な欠点があります。今後のバージョンで対応されることを期待したいと思います。

次回は、AIR API を利用して、AIR らしいプログラムを作ってみようと思います。

役に立つ情報へのリンク

Developing AIR Applications with HTML and Ajax
http://livedocs.adobe.com/labs/air/1/devapps..

Series Navigation«Adobe AIRのJavaScriptについてAIR APIでファイルの書き込み»

Posted by クジラ飛行机 | 2007年12月25日 04:32 | permalink

このサイトについて

株式会社八角研究所のWEBサイトですよー。いろんなものを創り出すことのできる環境をコツコツ構築中。いったい、いつになったらできるのか。この技術情報サイトもそのための活動の一環のつもり。

執筆者紹介

クジラ飛行机

くじらはんど(http://kujirahand/)にて、日本語プログラミング言語「なでしこ」(IPA未踏ユース採択)、テキスト音楽「サクラ」(OSPオンラインソフト大賞入賞)など多くのオンラインソフトを開発。著書に「Flexプロフェッショナルガイド」「なでしこ公式バイブル」、「一週間でマスターするActionScript3.0」など。