htmlとcssとJavaScriptでAdobe AIR

Adobe AIRの話はよく見かけるけど、Flex SDKを使ってActionScriptで書くタイプのやり方が多い気がする。もうひとつ、AIR SDKを使ってhtml/css/JavaScriptで書くタイプのやり方もある。今回はこっちを試してみた。

準備

開発するために用意するものは以下。

Javaランタイムは、まあ説明いらないよね。自分の場合はMacJavaの1.5が入ってるのでそのままそれを使った。

AIRランタイムは、AIRの実行のために必要。インストーラがあるのでそれを使って入れるだけ。簡単。

AIR SDKは開発ツール。コンパイラとかデバッガとか、ライブラリとかも含まれるのかな。こっちはインストーラは無いので、自分で好きなところに全ファイルを配置して、その中のbinディレクトリにPATHを通す。

Hello, World

まずはHello, World。基本だよね。

index.html

普通にWebページを作るようにファイルを作る。

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>My first AIR Application</title>
  </head>
  <body>
    <h1>My first AIR Application</h1>
    <p>
      Hello, World!
    </p>
  </body>
</html>

ホントに普通のWebページと同じ。特殊なことはひとつもない。

application.xml

以下のようなxmlファイルを作る。ファイル名は何でもいいらしい。

<?xml version="1.0" encoding="utf-8" ?>
<application xmlns="http://ns.adobe.com/air/application/1.0">
  <id>com.example.HelloWorld</id>
  <name>My first AIR Application</name>
  <version>1.0</version>
  <filename>HelloWorld</filename>
  <initialWindow>
    <content>index.html</content>
    <visible>true</visible>
    <width>400</width>
    <height>200</height>
  </initialWindow>
</application>

idは、本当はユニークなものにする必要がある。今回は練習なので適当だけど。

nameやversionはまあソレっぽいものを指定。

filenameは、アプリとしてインストールしたときのファイル名になるんだそうだ。まだよくわからんけど。

initalWindow以下はアプリの初期ウィンドウの定義。さっき作ったhtmlファイル名やウィンドウのサイズを指定している。

デバッグ実行

これでコードの記述は終わり。まあ画面と定義ファイルしか作ってないけど。

実行してみる。以下のコマンドを実行。

% adl application.xml

adlコマンドは、AIR SDKのbinディレクトリに入ってる。ちゃんとPATHを通していれば呼べるはず。これにさっき作ったxmlファイルを渡す。

おお、できた。

まあHTAみたいなもんか。HTAが使えるようになったIE5が出たのは1999年くらいだから、2007年に登場したAdobe AIRよりも8年も早い。さすがMicrosoftだ。

とりあえずここまで

タイトルに「htmlとcssJavaScriptで」なんて書いたけど、htmlしか使わなかった。その後cssやjsもちょっと書いてみたけど、普通に使えるみたい。

こういうの覚えたら、やっぱりTwitterクライアント作ってみたいよね。なんか、AIRアプリと言えばTwitterクライアントっていうイメージがあるのはなぜだろう。