まだベータ版だがWeb技術をそのままにクライアントアプリ化できる「Adobe AIR」。
既存のWebページを即AIR化したいなら『Aptana IDE』が最適!

 『Aptana IDE』 とは

まず『Aptana IDE』とはHTML/JavaScript/CSSの統合開発環境である。
Eclipsベースで作られているが単体でも使用できるのがこのIDE版である。
さらに Windows/Mac OS X/Linux と環境も幅広い。

Aptana IDEの主な機能は
  • コード開発支援機能
  • コード警告機能
  • UIカスタマイズ機能
  • エクステンション機能
  • スニペット機能
  • HTML/CSSのアウトライン表示
  • FTP機能
など数多い。

特筆すべきはコード補完機能である。
HTMLの補完はもちろんJavaScriptの補完機能が強力である。

ブラウザによってサポートされているかどうかがアイコンで表示されたり
どのオブジェクトに属するものかが一目でわかるのである。

 Aptana IDE のセットアップ

Aptana IDE のインストール

まずはここのページ右上の[Download Aptana IDE]をダウンロードしてインストールします。
ウィザードに従っていけば良いので特に難しいことはありません。








Aptana plugin for Adobe AIR Support のインストール

AptanaではAIRアプリを簡単に生成できるプラグインがあります。
この機能により通常はWebページを作成する感覚でAptanaを使用し、
AIRアプリに生成するときにのみ少しだけ特別な手順をするだけでAIRが作れます。

その前に
 1)Adobe AIR SDKをダウンロードして適当なフォルダに解凍しておく
 2)実行ランタイムもダウンロードしてインストールする




いよいよ
 3)プラグインのインストール
  上の画像のようにAptana IDEを起動するとスタートページが表示されます。
  その真ん中にある Plugins 内の「Aptana plugin for Adobe AIR Support」の
  Download and install をクリックするとプラグインインストールのダイアログが
  表示されるのでチェックして進んでいきます。

  再始動確認画面が表示されたら「はい」をクリックする。


 4)AIR 設定
  1.Aptana IDE のメニュー[ウィンドウ]−[設定]を選択して設定ダイアログを表示
  2.[Aptana]−[AIR SDKs]を選択
  3.「Add」ボタンを押して1)で解凍したフォルダを[Adobe AIR SDK Direcotry]に
    [Adobe AIR SDK name]に適当な名前を指定して「OK」をクリック





  4.[一般]−[ワークスペース]を選択
  5.「テキスト・ファイル・エンコード」でその他に「UTF-8」を指定して「OK」をクリック
  6.「OK」をクリックして設定ダイアログを閉じる
  

 AIR プロジェクトの作成








1)Aptana IDE メニューの[ファイル]−[新規]−[プロジェクト]を選択

2)ダイアログツリーの[Adobe AIR]−[AIR Project]を選択して「次へ」









3)「プロジェクト名」に任意の名前(例:HelloWorld)を指定し、
   プロジェクトフォルダを「ロケーション」で指定する











Webページを作成するときにはオープンソースライブラリ(SpryやPrototypeなど)
をプロジェクトに取り込むことも可能です。

生成されたHelloWorld.html が本体のHTMLファイルであり、
application.xml は設定ファイルで、3)の右画像で設定した内容が反映されるが変更も可能である。

HelloWorld.html をベースに通常のHTMLと同様にページを作成していく。
Webページと同様のため、下位階層フォルダを作成してJavaScriptライブラリや画像も使用することができる。

 AIR ファイルの作成





コンテンツができたら

1)Project ツリーのプロジェクト名を右クリックして[エクスポート]を選択して
  ダイアログツリーの[Adobe AIR]ー[Adobe AIR Package]を選択
  して「次へ」をクリック








2)「Include files」でパッケージに含めるファイルを指定
  「Save as」にAIRファイルの保存先を指定






3)「終了」ボタンをクリックすると指定パスにHelloWorld.airファイルが出力されます。



4)このAIRファイルをダブルクリックすると実行ランタイムがインストールされていれば
  ダイアログに従うだけで最後にAIRアプリが実行されます。

   

 Adobe AIR を試す

やっぱり試しに既存のWebコンテンツをAIR化してみないと気が済まないので
Google Gadgetで作ったlivedoor天気情報をさっそくAIR化してみる。


XMLHttpRequestクラスなどもそのまま利用でき
JavaScriptはブラウザと同様動くようだ。


しかしまったく完全ではなく特に日本語の扱いがまだ完全ではないよう。
最初移行時は右画像のようにフォントがカクカクしていて行間隔も詰まって
なんかおかしい…

似たような現象がWindows版Safariであるような記事を見つけ
その対策と同じように対応したところ左画像のように正常になった。


発覚した問題点
  • ソース中の固定HTMLに日本語を書くと化けてしまう
    画像の「Pin Point Weather」は本来「ピンポイント天気予報」
    であったのだが文字化けするので変更
  • フォント指定はとりあえず英数字だけのフォント名を必ず指定
    例:*{ font-family: MS UI Gothic; }