htmlとcssとJavaScriptでAdobe AIR
Adobe AIRの話はよく見かけるけど、Flex SDKを使ってActionScriptで書くタイプのやり方が多い気がする。もうひとつ、AIR SDKを使ってhtml/css/JavaScriptで書くタイプのやり方もある。今回はこっちを試してみた。
準備
開発するために用意するものは以下。
- Javaランタイム(1.4以降)
- Adobe AIRランタイム
- Adobe AIR SDK
Javaランタイムは、まあ説明いらないよね。自分の場合はMacにJavaの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ファイル名やウィンドウのサイズを指定している。
とりあえずここまで
タイトルに「htmlとcssとJavaScriptで」なんて書いたけど、htmlしか使わなかった。その後cssやjsもちょっと書いてみたけど、普通に使えるみたい。
こういうの覚えたら、やっぱりTwitterクライアント作ってみたいよね。なんか、AIRアプリと言えばTwitterクライアントっていうイメージがあるのはなぜだろう。
参考
- http://www.tkrb.jp/guide/2008/03/just_shift_to_adobe_air_by_html_and_javascript.html
- 2008-03-06 - Adobe AIR を javascript + HTML で
- http://fgug.anthill.jp/modules/bwiki/index.php?AIR%20for%20JavaScript%20Developers%2FIntroduction
- http://fgug.anthill.jp/modules/bwiki/index.php?AIR%20for%20JavaScript%20Developers%2FChapter2
- http://fgug.anthill.jp/modules/bwiki/index.php?AIR%20for%20JavaScript%20Developers%2FChapter3
- http://help.adobe.com/ja_JP/AIR/1.1/devappshtml/WS5b3ccc516d4fbf351e63e3d118666ade46-7fb5.html
- http://help.adobe.com/ja_JP/AIR/1.1/devappshtml/WS5b3ccc516d4fbf351e63e3d118666ade46-7ecc.html