Adobe AIRで作るデスクトップRSSリーダー

　Adobe AIR（Adobe Integrated Runtime）は現在パブリックベータ版の状態だ。Adobe AIRを使うことによって、開発者はFLASHやAjax（HTMLとJavaScript）を含む既存のWeb 2.0技術を用いて、デスクトップ用のデュアルプラットフォームアプリケーションを作成することができる。

　ここではAIRで初めてのアプリケーションを作るのが非常に簡単であることを示し、将来の記事ではそれを拡張してAIRでデスクトップソフトウェアを実現するプロセスを説明していく予定だ。

　われわれは既にAdobeのSpry Ajaxフレームワークについて議論し、機能セットについて2007年6月のBuilder AUの記事（英語）で評価している。ここで作ろうとしているAdobe AIRアプリケーションのロジックの一部には、Spryを利用することにする。

　最初の段階として、Spry Data Libraryを用いてRSSフィードを取り込み、構文解析し、表示するアプリケーションを作る。インターフェースは上下2つに分割され、上半分にはフィードから取り込まれたRSSのリストが表示され、下半分には選択された記事の詳細が表示されるようにする。

ウェブ開発者のためのEclipse：Aptana

　この記事ではまた、Eclipseを基盤とするウェブ開発者用のオープンソースIDEであるAptanaの機能についても一部見ていく。AptanaはEclipseを拡張し、HTML、CSS、JavaScriptのサポートを追加している。Aptanaは無料で、ほとんどのOSで利用できる。Aptanaには多くのAjaxフレームワークが同梱されており、ウェブアプリケーションを作るのに必要な手段を簡単に見つけることができる。Aptanaは最新のものであり、AppleのiPhoneやAdobe AIRで利用できるプラグインも備えている。

プロジェクトを作成する

　Aptanaをダウンロードして少し触ってみれば、多くの人気のあるAjaxフレームワークを同梱していることが分かるだろう。ここでは、Adobe AIR用のAptanaのプラグインと、Adobe AIRアプリケーションを開発しコンパイルするためのAdobe AIR SDKの2つをダウンロードする必要がある。これら2つはどちらもAptanaと同様に、無料でダウンロードでき、無料でアプリケーションの開発、配置に使える。Aptanaのスタートページは、AIR開発の設定を助けるようになっており、簡単なAdobe AIRアプリケーションの作り方のデモを見ることができる。

　AptanaでAdobe AIRのプロジェクトを作成するには、File > New > Projectを選択し、表示されるダイアログでAIR Projectを選択する。次に適切な名前を付け、どこに保存するかを決める。Aptanaはデフォルトのアプリケーションページにプロジェクトの名前を付けるが、これはindex.htmlに変更しておいた方がいいだろう。

　Adobe AIRアプリケーションは、アプリケーションの詳細を設定するapplication.xmlという名前のXMLファイルを必要とする。次のAptanaのダイアログで作成するアプリケーションの基本的な詳細情報を入力すると、この情報に基づいてaptanaがapplication.xmlを作成してくれる。IDは標準的な変数命名ルールに従ったものでなくてはならず、スペースを入れてはならないことに注意して欲しい。

　AIRが現在サポートしている2つのプラットフォーム（WindowsとOS X）では、アプリケーションのアイコンは自動的に処理される。AIRでは多くのフォーマットやアイコンサイズが使われており、ダイアログが表示されて指定されたファイルがプロジェクトにインポートされる。サイズには幅があり、特定のサイズのもの（例えば128x128のもの）がなければ、AIRは自動的にフォールバックする。一番いいのは、アルファチャンネル透過PNGファイルを使うことだ。

　次のダイアログでは、プロジェクトで使用する可能性のあるAjaxフレームワークのライブラリを選択することができる。Aptanaには、Yahoo、Dojo、Scriptaculousなどのよく使われるフレームワークが多く同梱されている。興味のあるものを選択してよいが、ここではアプリケーションの作成にSpryを使うため、今回はこれを最初に選択する。

　これでプロジェクトが作成される。libというディレクトリが追加されるが、前の手順で選んだAjaxライブラリがこのディレクトリに置かれることになる。また、プロジェクトで選択されたライブラリごとに、サンプルファイルが1つずつ置かれる。

RSSフィードの取得と構文解析

　このアプリケーションではプロジェクトのデフォルトHTMLページをベースとして使い、それに加えてCSSとJavaScriptファイルを使う。このアプリケーションで表示するRSSファイルを取得し、構文解析を行うため、SpryフレームワークからxpathとSpryData JavaScriptファイルの両方をインポートする。この2つはどちらもプロジェクトを作成した際に加えたSpryライブラリに含まれており、lib/spry/includesのパスに置かれている。これらは、labs.adobe.comからダウンロードできるSpryにも含まれている。

　次に、Spry XMLDataSetのインスタンスを生成する。ここではこのインスタンスにrssDataという名前を付けた。インスタンス化には、XMLファイルの場所と、データを持つXMLノードを識別するXPath表現の2つのパラメータが必要になる。このアプリケーションの今回のバージョンを作成する際に唯一わかりにくいところがあるとすれば、ノードを見つけることだろう。これには、RSSファイルのXMLを直接読む必要がある。ただし、RSSは単にRSSではなく、RDFでもあるということに注意すべきだ。これは、見ているRSSには2つのDocument Type Definition（DTD）があり得るということだ。サンプルコード1は、ここまで説明してきたものだ。Aptanaにはそれ自体がAIRプラグインの一部になっているJavaScriptファイルを持っていることに注意して欲しい。

サンプルコード1

<script src="AIRAliases.js" type="text/javascript"></script>
<title>Spry RSS Parser</title>
<script type="text/javascript" src="lib/spry/includes/SpryData.js"></script>
<script type="text/javascript" src="lib/spry/includes/xpath.js"></script>
<script type="text/javascript">
<!--
var rssData = new Spry.Data.XMLDataSet("http://builderau.com.au/feeds/rss/index.htm?tag=latest_blogs", "rss/channel/item");
//-->
</script>

フィードを表示する

　次に、取得したデータを表示する必要がある。これには、divの中でSpryの動的領域をrssData XMLDataSetに設定する。これは、Spryのデータセットの領域オブザーバーだ。この内側に、trタグにSpryの繰り返しを指定したテーブルを置き、RSSフィードから取り出されたデータ列に対して繰り返し処理を行う。各行ではSpryに対し波括弧（{}）で指定された、rssDataの2つの変数を出力する（サンプルコード2）。

サンプルコード2

<div spry:region="rssData">
  <table width="100%">

    <tr spry:repeat="rssData">
      <td>
        {title}<br />
        {pubDate}
      </td>
    </tr>

  </table>
</div>

　次にapplication.xmlを開いてアプリケーションの表示サイズを調整する。rootContentタグを探し、widthを620に、heightを385に変更する。そして、実行（run）ボタンをクリックしてこのコードをテストしよう（スクリーンショット）。これで、スクロールするリストを含むAIRウィンドウが現れるはずだ。さらに、このコードを修正し、既にあるdivを別のdivで囲む（サンプルコード3）。この新しいdivは、RSSフィードのリストを表示するパネルを作るもので、ここではパネルの外見を管理するCSSクラスを加えている。このコードでは、Spryの繰り返し処理を含むtrの部分で、組み込みのデータを表示するSpryクラスを使って表の行の色を変えていることに注意して欲しい。

スクリーンショット

サンプルコード3

<div id="feedListingPanel" class="feedsDisplayPanel">
  <div spry:region="rssData">
    <table width="100%">
      <tr spry:repeat="rssData" class="{ds_EvenOddRow}">
        <td>
          {title}<br />
          {pubDate}
        </td>
      </tr>
    </table>
  </div>
</div>

　サンプルコード4は最新のCSSのリストを表示するためのもので、feedsDisplayPanelサイズ属性でパネルの大きさを制御しており、オーバーフロー属性をautoに設定することで縦スクロールできるようにしていることに注意して欲しい。evenとoddという予約名のスタイルは、行の色を交互に変えるために加えたものだ。

サンプルコード4

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.feedsDisplayPanel {
  margin: 0px;
  padding: 3px;
  border-left: solid 1px #CCC;
  border-right: solid 1px #999;
  border-top: solid 1px #999;
  border-bottom: solid 1px #CCC;
  width: 590px;
  height: 180px;
  overflow: auto;
}

.even {
  background-color: #FFAB00;
}

.odd {
  background-color: #CC8900;
}

　次のコードは選択された記事の詳細を表示する2つめのパネルを追加する（サンプルコード5）ものだ。これは最初のパネルのコードに似ている。違うのはネストされたdivに、rssData XMLDataSetに割り当てられたSpryの詳細領域のインスタンスが設定されていることだ。ここでのCSSクラスはheight以外は同じものになっている。

サンプルコード5

<div id="feedDetailPanel" class="feedDetailsPanel">
  <div id="articleDetail" spry:detailregion="rssData">
    {title}<br />
    {description}<br />
    <a href="{link}">[Read full article]</a>
  </div>
</div>

　詳細情報のテキストを表示するSpryのonclickイベントを、テーブルの個々のフィードの見出しを表示する行に加える。これは、feedDetailPanel内部のtitle、description、linkの各変数を設定するものだ（サンプルコード6）。このonclickイベントは、カーソルがクリックできるものの上に置かれているということを示す視覚的な変化を引き起こさないため、適切なカーソルを表示できるようにスタイルシートのtrタグを修正した（サンプルコード7）。他にも、アプリケーションの外見を向上させるためにスタイルを修正しているので、このアプリケーションのサンプルコードをダウンロードして、最終版のコードを見てみて欲しい。

サンプルコード6

<tr spry:repeat="rssData" onclick="rssData.setCurrentRow('{ds_RowID}');" class="{ds_EvenOddRow}">

サンプルコード7

tr { 
  cursor: pointer;
}

アプリケーションのパッケージング

　最後に、アプリケーションをパッケージングして、配布、インストールが可能なAIRファイルを作成する。プロジェクトを選択した状態でツールバーのExport AIRボタンをクリックし、表示されたダイアログでアプリケーションに必要なファイルを選択する。Spryライブラリが入っているlibディレクトリ全体を選択し、パッケージングすれば非常に簡単だが、これはよくない。2Mバイト以上の不必要なファイルまでAIRパッケージに加えられてしまうからだ。このディレクトリから2つのSpry JavaScriptファイルが入っているディレクトリを探し、それらのファイルだけを含めるようにすべきだ。

　よりよい方法は、新しいディレクトリを作っておき、そこに必要なSpry JavaScriptファイルをコピーしておくことだ。何度もアプリケーションのパッケージングをしたい場合は、特にこの方法が役に立つ。この場合、アプリケーションのコードのパスを変更しておくのを忘れないこと。

　作成されたAIRパッケージは、Adobe AIRのランタイムがインストールされていれば、どんなマシンでも実行できる。AIRはベータ版のソフトウェアであるということに注意しておいて欲しい。その証拠に、AIR内部のWebkitの状況も進化している。Windows版のApolloの性能はMacに比べて低いが、これはまだWebkitが十分最適化されていないためだ。今回のサンプルコードは、MacとWindowsではレイアウトの表現に若干違いがあることが分かっているが、これはWebkitの実装の違いのせいだろう。

次の一歩

　さて、これがAdobe AIRでAjaxアプリケーションを作りパッケージングする最初の一歩だ。これはあまり美しいものではないし、CSSに習熟している読者であれば、もっといいスタイルにすることもできるだろう。しかし、このRSSリーダーが40行未満のコードで書かれていることを考えて欲しい。

　明らかに、このアプリケーションを改良するいくつかの簡単な方法がある。最初にできることは、RSSフィードを読み込んでいる待ち時間にユーザーを楽しませるローダーを加えることだろう。