トップ » 技術記事 » JavaScript使いのためのAIR入門（1） - Adobe AIRのJavaScriptについて

JavaScript使いのためのAIR入門（1） - Adobe AIRのJavaScriptについて はてなブックマーク数 このエントリーをブックマークに追加


JavaScript使いのためのAIR入門

クジラ飛行机です。今回は、JavaScriptが分かる人を対象に、話題の技術 Adobe AIR を使って何か簡単なプログラムを動かすまでを解説してみたいと思います。Adobe AIR は、とても面白い技術です。Web プログラミングで習得した技術(HTML/JavaScript/Flashなど)を利用して、デスクトップアプリケーションを作ることができるのです。

連載予定

Adobe AIR とは

AIR は面白い技術です。これまで使ってきた Web アプリケーションの技術、JavaScriptやFlashを利用して、デスクトップアプリケーションを作ることができます。

これまでJavaScriptで(または Flashで)既に何か作ったものがあれば、それを、デスクトップアプリケーションとして作成することができます。もう少し考えると、Web で動くアプリケーションと、デスクトップで動くアプリケーションの両方を提供するのが非常に簡単になるでしょう。

Web ブラウザで動くアプリケーションは、そのサイトを訪れるだけで使えるようになるのが利点なのですが、その反面、作りこめば作りこむほど、ブラウザの中で動かすことの限界を感じるようになります。それは、例えば、各機能へのショートカットキーを提供したくても、ブラウザのショートカットキーと衝突してうまく機能しないなどの点があります。

そこで、初めての人やインストールが嫌な人には、ブラウザで動くアプリケーションを提供しておき、頻繁にそのアプリケーションを使う人のために、AIR 版を提供することも容易でしょう。しかも、AIR 版ではファイルやローカルデータベースへのアクセスを実現しているので、AIR 版では Web アプリケーションで、実現できなかった様々な機能を追加することができます。

また、先日の Adobe のイベントでは、AIR を利用する次のようなシナリオが紹介されました。今では、さまざまなデータベースが Web で集中管理されています。多くのWebアプリケーションはオフラインの状況では利用できません。そのため、オフラインの状況で（例えば顧客のところを訪問した際に）得た情報は、一度社内に持ち帰り、それから Web のデータベースに入力するのが一般的です。これは非常に手間がかかる作業です。もし、AIR を使ってデスクトップアプリケーションを作るなら、オフラインの環境では、ローカル環境にデータを保存しておき、オンラインになったときに、そのデータを Web のデータベースと同期することができます。Web のデータベースを、ローカルと同期することで、オフラインの時もそのアプリケーションを問題なく利用することができるようになるというわけです。

AIR アプリはどうやって作るのか？

そして、AIR が面白いのは、AIR のアプリケーションを作る方法がいくつも用意されていることです。現在提供されているのは、次の方法です。

  • Flex Builder 3 を使う方法
  • Flash 9 以降を使う方法
  • HTML + JavaScript で書く方法

本稿は、JavaScript使いのためのAIR入門ですので、主にJavaScriptを使った方法を紹介します。これから数回に渡って、JavaScript で AIR アプリケーションを作っていきましょう。

AIR SDK のインストール

なお、本稿は、2007年12月に書いたものなので、2008年始め頃に正式版が出る頃には、URLが変更になっている可能性があります。

もしも、独自XMLで高度なアプリケーションの開発できる「Flex」で開発したいという方は、Adobe Labs の Web サイトより、Flex Builder3 をダウンロードします。そして、Flash 9 を使う場合には、Flash を購入し、その後、Adobe Labs からAIR プラグインをダウンロードしてインストールします。

Adobe Labs

そして、AIRの開発を行うことができる開発方法の中で、もっとも手軽なのが、HTML と JavaScript を使って開発する方法です。この方法を使う場合でも、Adobe Labsから AIR の SDK と AIR ランタイムをダウンロードしてインストールしなければなりません。しかし、これまでの Web アプリケーション開発と似た方法で（つまり、テキストエディタさえあれば）開発を行うことができます。

手順(1) : AIR ランタイムを入手する

まずは、AIR のランタイムを入手しましょう。ランタイムは実行ファイル形式になっているので、OSごとに用意されているランタイムを選んでダウンロードします。後はアイコンをダブルクリックして実行すればインストールができます。

手順(2) : AIR SDK を入手する

次に、AIR SDK をダウンロードして解凍します。ライセンス条項に同意して、アーカイブをダウンロードします。

手順(3) : Java ランタイムを入手する

開発には、バージョン1.4.2以上のJava実行環境が必要です。もし、Java がインストールされていなければ以下よりインストールしてください。

手順(4) : パスを通す～Windows の場合

次に、コマンドラインから手軽に、AIR SDK が利用できるようにパスを通します。

ここでは、Windows の手順を示します。AIR SDK を「c:\air_sdk」にインストールしたとします。

Windows 2000/XP での設定方法
  • スタートメニュー→コントロールパネル
  • [システム]をクリック
  • [詳細]パネルの[環境変数]のボタンをクリック
  • [システム環境変数]から[Path]を選んで[編集]をクリック
  • 変数値に「;c:\air_sdk」を追加
Windows Vista での設定方法
  • スタートメニュー→コンピューター→コントロールパネル
  • [システムとメンテナンス]→[システム]をクリック
  • 画面左の[システムのプロパティ]をクリック
  • [環境変数]のボタンをクリック
  • [システム環境変数]から[Path]を選んで[編集]をクリック
  • 変数値に「;c:\air_sdk」を追加

Hello, World を作る

それでは、簡単な「Hello, World」を作ってみましょう。AIRアプリケーションを作る場合、用意するファイルが最低２つあります。それは、HTMLファイルと、AIR アプリケーションの設定を行う XML ファイルです。ここでは、以下のような名前のファイルを作りました。

  • 設定ファイル: Hello.xml
  • HTMLファイル: Hello.html
  • コンパイル用: test.bat

それぞれのファイルの中身を確認してみます。まずは、「Hello.xml」からです。これは、もうお決まりのファイルなので、毎回これをコピーして部分的に書き換えて使うと良いでしょう。注意したいのは、以下のファイルは、AIR のベータ3(1.0.M6)を対象としているということで、将来のバージョンでは、若干内容が変わるかもしれません。

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

次に、アプリケーションのメインファイル「Hello.html」です。こちらは、ボタンをクリックすると「Hello, World!」と表示するだけのJavaScriptを記述したHTMLファイルです。

<html>
<head>

<title>Hello</title>
<script type="text/javascript"><!--
    function sayHello() {
        alert("Hello, World!");
    }
//-->
</script>
</head>
<body>
  <input type="button" onclick="sayHello()" value="click"/>

</body>
</html>

そして、最後に、AIRファイルを作成するためのバッチファイル「test.bat」です。このファイルをダブルクリックすることで、HTMLをAIRアプリケーションとして実行することができます。

adl Hello.xml
pause

今回のまとめ

このように、Adobe AIR を使うと、Web アプリケーション開発で培った知識をベースにして、クライアントアプリケーションを作ることができます。ただ、今回見たプログラムでは、AIR として配布する意味はないかもしれません。次回、AIR ならではの機能を追加していきたいと思います。

※Adobe AIR は、2008年の始め頃に正式版が発表される予定です。本稿執筆時点では、まだベータ版を試すしかありませが、正式版でも基本的な作り方はそのまま利用できると思います。

役に立つ情報へのリンク

なお、AIR for JavaScript Developers Pocket Guide の邦訳を次のサイトで見ることができます。詳細なAPIの使い方など、以下より参照することができます。

最後に、以下のエディタを使うと、面倒なパスの設定などが不要で、簡単に AIR の実行ができます。

Series Navigation今回はAIRパッケージの作成について»

Posted by クジラ飛行机 | 2007年12月19日 06:31 | permalink

このサイトについて

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

執筆者紹介

クジラ飛行机

クジラ飛行机

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

TrackBack URL :