SpryとAIRもDreamweaverで楽々

　Spryを利用すれば、Webサイトでさまざまな演出を施したり、機能を向上することができるのはこれまで紹介したとおりだ。しかし、Spryの利用範囲はWebサイトだけにはとどまらない。この先、アプリケーションソフトの開発にも活用できる可能性があるのだ。そのキーワードとなるのが「AIR（エアー）」である。

　AIRは「Adobe Integrated Runtime」の略称で、一般的に「Adobe AIR」と略される。開発中は「Apollo」というコードネームで呼ばれていたプロダクトである。

　「ランタイム」という種類のソフトウェアで、アプリケーションソフトの土台となるOSソフトのような存在だ。通常、アプリケーションソフトというのはWindowsやMac OSなど、いわゆるOSソフトに依存して作られる。そのため、Windows向けのソフトウェアは、Mac OSでは動作しないし、その逆もまた然りだ。

　しかし、Adobe AIRを利用すると図のように「AIRアプリケーション」と呼ばれるアプリケーションソフトが「Adobe AIR」というランタイムの上で動作する。そして、このランタイムがWindows用、Mac OS用に提供されているため、結果的にAIRアプリケーションはどちらのOSソフトでも動作するという仕組みである（図1-1）。

図1-1 Air アプリケーションの動作概念

　このようなランタイム自体は、古くはJavaの「Java Virtual Machine（JVM）」や、最近ではMicrosoftの「Silverlight」など多くの種類がある。その中でAdobe AIRの最大の特徴としてはその作り方にある。Adobe AIRには、Flash PlayerやAdobe Readerなどのソフトウェアに相当するものが内蔵されており、FlashコンテンツやPDFファイルをそのまま表示させることができる。AdobeやMacromediaがこれまで培ってきた技術を、遺憾なく発揮することができるのだ。

　また、WebブラウザもApple Safariと互換性のある「WebKit」というWebブラウザが内蔵されている。そのため、HTML文書やJavaScriptのスクリプトなどがそのまま動作するのだ。ここに、Spryの活躍の場がある。AIRアプリケーションを制作するには、HTMLやJavaScriptファイルをまとめる「パッケージング」という作業が必要になる。しかし、Adobe Dreamweaver CS3（以下、DWCS3）を利用していれば、拡張機能で簡単に作業することができる。その方法を紹介しよう。

　ただし、現在Spryはもちろん、AIRやこれから紹介する「Adobe AIR Extension for Dreamweaver CS3 beta（以下、Extension）」も、すべて開発中のプロダクトとなっている。特に、「Extension」についてはインストールするとDWCS3がエラーメッセージを表示するようになるというバグが含まれているため、業務で使っているマシンへのインストールなどは避けた方がよいだろう。試す場合には、自己責任でお願いしたい。

　さて、それではまずはAdobe AIRのランタイムをインストールしよう。次のサイトから入手することができる。

Adobe Labs - Downloads: Adobe Integrated Runtime (AIR)

　自分にあったプラットフォーム向けのインストーラーをダウンロードして起動すると、図1-2のようにしてインストール作業が始まる。これで、AIRアプリケーションを利用できるようになった。

図1-2 Airのインストール

　次に、DWCS3向けのExtensionをインストールしよう。次のサイトから入手することができる。

AIR:Dreamweaver CS3 Extension - Adobe Labs

　ダウンロードすると「.mxp」という見慣れない拡張子のファイルが現れる。これは、旧Macromediaの各種ソフトウェア（Dreamweaver、Flash、Fireworks）で利用できる拡張モジュールで、「Extension Manager」というソフトウェアで管理することができる。ダウンロードしたファイルをダブルクリックすれば、インストールが開始されるだろう（図1-3）。

図1-3 Airのインストール

　インストールが完了したら、DWCS3を再起動すれば準備完了だ。ただ、先にも書いたとおりこのExtensionにはバグが含まれていて、DWCS3を起動すると図1-4のような警告が表示されてしまう。しかも、ことあるごとに2-3回表示されることもあるが、どれも動作自体には支障がないので、安心してほしい。

図1-4 エラーの表示されるバグが……

　それでは、AIRアプリケーションを作ってみよう。まずは、「サイト」を作る必要がある。［サイト］［新規サイト］メニューをクリックして、ダイアログの上部タブで「詳細設定」を選ぼう（図1-5）。サイト名とディレクトリを適当に設定したら、［OK］ボタンをクリックする。

図1-5 サイトの定義

　ここにAIRアプリケーションの本体を作り上げていく訳だが、特別な気構えは必要なく、普通のWebページを作ればよいだけだ。例えばここでは、前回の連載で作ったアコーディオンウィジットを使ったWebページの例を作ってみた。（図1-6）

図1-6 通常のWebページと同じように製作すれば問題ない

　できあがったら、［サイト］［Package as Adobe AIR Application...］メニューをクリックする。図1-7のようなダイアログが表示されるので、それぞれの項目を設定していこう。Spryを使った場合は、ライブラリのファイルを同梱する必要があるので画面下部の「Included files/folders」で、「SpryAssets」というフォルダを追加しておこう。［Package］ボタンを押すと、同じディレクトリ内に「.air」という拡張子のファイルができあがる。これで完成だ。

図1-7 パッケージングの設定

　できあがったAIRファイルをダブルクリックしてみよう。図1-8のような画面が表示されてインストールを促される。指示に従ってインストールしていけば完了だ。起動すると、図1-9のように今作っていたWebページが単独のアプリケーションとして起動していることが確認できる。アイコンもDock内に表示され、アプリケーションの切り替えなどでも切り替えることができるようになっている。

図1-8 ダブルクリックでインストール

図1-9 できあがったAirコンテンツ

　このように、HTMLとJavaScriptだけで、非常に自由度の高いアプリケーションソフトを作ることができる。しかも、WindowsでもMac OSでも同様の動作をすることができるので、魅力的なアプリケーション開発環境といえる。

　今後、AdobeはSpryの開発を進めるに当たり、このようなAIRアプリケーションでの利用を前提としたウィジットなどを増やすことも考えられるだろう。Spryの今後に、目が離せない。