Adobe AIR記事

HTMLベースのAIRアプリケーション開発環境のセットアップ

Adobe® AIR™（Adobe Integrated Runtime）は、デスクトップ上でリッチ・インターネット・アプリケーション（RIA）を実行可能するクロスオペレーティングシステムのランタイムです。Adobe AIRは、Flash／Flex／HTML／JavaScript／Ajaxなどの技術をサポートしており、Web開発の技術を活かしてAdobe AIR用のアプリケーションを開発することができます。この記事では、HTMLベースのAIRアプリケーション開発環境のセットアップとして、以下の項目を解説します。

• Dreamweaver用AIR拡張機能のインストールとその概要
• AIR SDKのインストールとその概要

それぞれの解説に入る前に、Adobe AIRをインストールしておきましょう。

Adobe AIRのランタイムをインストール

以下の手順でAdobe AIRのランタイムをインストールします。

Windowsの場合

1. Adobe Labsから「AIR1_win_beta2.exe」をダウンロードします。
2. AIR1_win_beta2.exeをダブルクリックします。
3. インストールウィンドウに従ってインストールを行います。
4. Flash Playerが使用するmms.cfgを作成している、あるいは修正している場合、AIRアプリケーションの実行時にはこのファイルを取り除いてください。Windowsの場合、このファイルはFlash Playerのフォルダ内に入っています（たとえば、Windows XPでの場合、C:€\winnt€\system32\€macromed€\flash€mms.cfg）

Mac OS Xの場合

1. Adobe Labsから「AIR1_mac_beta2.dmg」をダウンロードします。
2. AIR1_mac_beta2.dmgをダブルクリックします。
3. インストールウィンドウに従ってインストールを行います。
4. Flash Playerが使用するmms.cfgを作成している、あるいは修正している場合、AIRアプリケーションの実行時にはこのファイルを取り除いてください。Mac OS Xの場合、このファイルはFlash Playerのフォルダ内に入っています（たとえば、/Library/Application Support/Macromedia/mms.cfg）

Adobe Labs内にはAIRアプリケーションのショーケースがあります。インストールしたAdobe AIRの動作確認を行う際に利用してください。

Dreamweaver用AIR拡張機能

DreamweaverのAIR拡張機能を使えば、Dreamweaverで作成したWebページをAIR用デスクトップアプリケーションへと変換することができます。ただし、Adobe AIRは、ColdFusionやPHPによるダイナミックページをサポートしていません。しかし、AjaxやAdobe AIR APIsを介して、ColdFusionやPHPで開発されたオンライン上のサービスと連携させることは可能です。

必要ソフトウェア

• Dreamweaver CS3
• 購入
• 体験版
• Adobe Extension Manager CS3
• OS
• Windows XP／Vista、Mac OS 10.4以降
• Java JRE 1.4以降 (Adobe AIRファイルの作成に必要)
• http://java.sun.com/j2se/1.4.2/download.html

Dreamweaver用AIR拡張機能のインストール

1. Adobe Labsから「 Adobe AIR Extension for Dreamweaver Beta 2」をダウンロードします。
2. mxpファイルをダブルクリックします。インストールウィンドウの指示に従って、インストールを行います。
3. インストール完了後、Dreamweaverを再起動します。

「AIR Application and Installer Settings」ダイアログボックス

インストールに成功したら、Dreamweaverのサイトメニューに「AIR Application and Installer Settings」項目が追加されます。「AIR Application and Installer Settings」ダイアログボックスでは、Dreamweaverで作成したWebページをAIRアプリケーションに変換する際の各種設定を行い、「Create AIR File」ボタンで変換します（図1）。

図１.「AIR Application and Installer Settings」ダイアログボックス

ノート：DreamweaverのAIR拡張機能を使ってAIRアプリケーションを作成する場合、変換するWebサイトのルートフォルダに「application.xml」ファイルを作成します。このxmlファイルは、アプリケーションのさまざまなプロパティの定義内容を記したマニフェストのようなものです。

「AIR Application and Installer Settings」ダイアログボックスの設定項目とその内容

アプリケーションのデジタル署名

Digital Signature（デジタル署名）は、アプリケーションの作成後にコードの変更が行われていないことや、コードが破損していないことを保証するためのものです。AIRアプリケーションを配布し、他のユーザーが利用できるようにするには、必ずこのデジタル署名が必要となります。このデジタル署名には、商業の証明書だけでなく、アプリケーション制作者自身が発行する自己証明書を使用することができます。なお、後でデジタル署名を追加するという前提で一時的に署名なしでアプリケーションファイルを作成することもできます。以下の手順でデジタル署名を設定します。

1. 「AIR Application and Installer Settings」ダイアログボックスを開き、Digital signature項目の右側にある「Set」ボタンをクリックすると、「Digital Signature」ダイアログボックスが開きます（図2）。
   
   

   図2.「Digital Signature」ダイアログボックス

2. 以下の作業のどれかを行ってください。
   • 商業の証明書を使用するには、「Browse」ボタンをクリックして証明書を選び、パスワードを入力して「OK」ボタンをクリックします。
   • 自己証明書を作成するには、「Create」ボタンをクリックして「Self-Signed Digital Certificate」ダイアログボックスを開き、各項目を入力します（図3）。Type項目ではセキュリティのレベルを設定します。「1024-RSA」は、1024ビットキーを使い、「2048-RSA」は2048ビットキー（より強固）を使います。
   
   

   図3.「Self-Signed Digital Certificate」ダイアログボックス

• 「Prepare an AIRI package that will be signed later」を選んで「OK」ボタンをクリックすると、 デジタル署名なしにAIRI（AIR Intermediate）アプリケーションを作成することができます。ただし、このAIRIは、ユーザーはインストールできません。インストールができるようにするには、アプリケーション制作者のデジタル署名が必要です。

Adobe AIRのコードヒントとカラーリング

AIR拡張機能をインストールすると、DreamweaverのコードビューにAIRスクリプトのコードヒントとカラーリング機能が追加されます。ただし、この機能が有効なのは、<script>タグ内とJavaScriptファイル内のみです。

Dreamweaverを使ったAIRアプリケーション作成手順

ここからは、DreamweaverでAIR拡張機能を使って、HTMLベースのAIRアプリケーションを作成する手順を紹介します。作成するのは、「Hello World」と表示するだけの至極単純なアプリケーションです。読み進める前に、Adobe AIRランタイムとDreamweaver用AIR拡張機能をインストールしていることを確認しておきましょう。

アプリケーションにするページを作成

AIRアプリケーションには、必ずスタートページが必要です。ここでは、「Hello World!」と表示させるとてもシンプルなスタートページを作成します。このスタートページとアプリケーションに使用する他のページはすべてDreamweaverのサイトとして定義しておく必要があります。

1. Dreamweaverでメニューから「サイト／新規サイト」を選び、新しくサイトを定義します。
　
2. メニューから「ファイル／新規」を選び、新しくHTMLドキュメントを開きます。
　
3. 新しいHTMLファイルに「Hello World! 」と記述します。記述内容は、みなさんの好きな内容で構いません。ページを増やしてお互いをリンクさせてもいいでしょう。
   
   

   図4：新しいHTMLファイルに「Hello World! 」と記述します

　
4. ファイル名「hello_world.html」として保存します。
   
   

   図5：hello_world.htmlファイルが新規に作成したサイト内に定義されているか確認してください

AIRアプリケーションの作成

1. Dreamweaverでhello_world.htmlファイルを開きます。
　
2. メニューから「サイト／AIR Application and Installer Settings」を選び、「AIR Application and Installer Settings」ダイアログボックスを開きます。多くの項目は自動で入力されています。ただ、「Root content」項目は、自分でスタートページを選択しなければなりません。
　
3. 「Root content」項目の右側にある「Browse」ボタンをクリックして、hello_world.htmlファイルを選択します。
　
4. 「Digital signature」項目の右側にある「Set」ボタンをクリックして、「Digital Signature」ダイアログボックスを開きます。
　
5. 「Sign the AIR package with a digital certificate」を選んで、「Create」ボタンをクリックして、「Self-Signed Digital Certificate」ダイアログボックスを開きます。デジタル証明書をすでに持っている場合は、「Browse」ボタンをクリックしてその証明書を選びます。
　
6. 「Self-Signed Digital Certificate」ダイアログボックスの入力項目を記述して、「OK」ボタンをクリックして閉じます。
　
7. 「Digital Signature」ダイアログボックスに戻り、「Self-Signed Digital Certificate」ダイアログボックスで指定したパスワードを入力して、「OK」ボタンをクリックして閉じます。
   「AIR Application and Installer Settings」ダイアログボックスは以下のような入力内容になっているはずです。
   

   図6：設定後の「AIR Application and Installer Settings」ダイアログボックス

　
8. 「Create AIR File」ボタンをクリックします。そうすると、AIRアプリケーションファイルとapplication.xmlファイルがサイトのルートフォルダに作成されます。

AIRアプリケーションのインストール

AIRアプリケーションファイルを作成したところで、デスクトップアプリケーションとして実行してみましょう。

1. AIRアプリケーションファイル（ここでは、「AIRsample.air」）をデスクトップに移動させます。他のマシンのデスクトップでも構いません。
　
2. AIRアプリケーションファイルをダブルクリックして、インストールウィンドウに従ってインストールを行います。
　
3. AIRアプリケーションファイルが実行されると、「Hello World! 」と記述された画面が表示されます。

AIR SDK

AIR SDKには、アプリケーションデータをAIRアプリケーションファイルへとパッケージするために必要なコマンドラインツールが含まれています。

AIR Debug Launcher（ADL）： インストールせずにアプリケーションを実行するツール

AIR Development Tool（ADT）：AIRアプリケーションを配布可能なインストールパッケージとしてパッケージングするツール

これらのツールを利用するにはJavaが必要です。Java JREかJava JDKを使用します。

AIR SDKは、以下の手順でインストールします。

＜Windowsの場合＞ 　

1. Adobe Labsから「 Adobe AIR SDK」をダウンロードします。
　
2. ダウンロードしたファイルをローカルのフォルダに解凍します（たとえば、C:€Program Files€Adobe€AIRSDK やC:€AIRSDK）。
　
3. ADLやADTは、解凍したフォルダのbinフォルダ内に入っています。Java環境でADLを動作させるには、パスの設定が必要です。
　
4. Windows XPの場合は、[マイコンピュータ]-[プロパティ]-[詳細設定]-[環境変数]を開きます。「<ユーザー名>のユーザ環境変数」の中にPathという項目がある場合は、「編集」ボタンを押して、変数値の最後に「;C:\\bin」を追加します。Path項目が無い場合は、新規作成で変数名「Path」を作成し、変数値に「C:\\bin」を入力すればOKです。

＜Macintoshの場合＞ 　

1. Adobe Labsから「 Adobe AIR SDK」をダウンロードします。
　
2. ダウンロードしたファイルをローカルのフォルダに解凍します（たとえば、/ユーザ/ユーザー名/Applications/AIRSDK）。
　
3. ADLやADTは、解凍したフォルダのbinフォルダ内に入っています。Java環境でADLを動作させるには、パスの設定が必要です。
　
4. ユーザーのホームディレクトリにある不可視ファイル「.profile」を開き、最後に「PATH=$PATH://bin/」を追加して保存ます。「.profile」がない場合は、新しく作成してください。不可視ファイルに対応したテキストエディタとしては、Jeditやmiなどがあります。
　
5. ターミナルを起動し、ホームディレクトリで「source .profile」を実行すれば、設定完了です。

＜AIR SDKに含まれているもの＞
　AIR SDKには以下のファイルが含まれています。ファイル名はWindowsでの表記です。

AIR SDK内の主なファイル

AIR SDKを使ったAIRアプリケーション作成手順

AIR SDKを使ってHTMLベースのAIRアプリケーションを作成する場合、必ず2つのファイルを用意しなければなりません。1つは、アプリケーションのメタデータを記述したアプリケーション記述ファイル。もう1つは、トップレベルHTMLファイルです。なお、ここで作成する「Hello World! 」サンプルアプリケーションでは、JavaScriptを使って外部テキストファイルに記述したHTMLソースをトップレベルHTMLファイルに読み込むようにしています。また、AIR APIクラスのエイリアスを定義しているAIRAliases.jsファイルも使用します。

1. アプリケーション用のフォルダとして、「helloAIR」という名前のフォルダを作成します。
　
2. SDKからAIRAliases.jsファイルを「helloAIR」フォルダにコピーします。

アプリケーション記述ファイルの作成

1. 以下のXMLコードを記述した「HelloAIR-app.xml」ファイルを作成します。

   <application> 
   	<name>...</name> 
   	<initialWindow> 
   		<content>...</content> 
   		<visible>...</visible> 
   	</initialWindow> 
   </application> 

　
2. <application>要素に以下の属性を追加します。
   • 　「appId="samples.HelloAIR"」：アプリケーションに固有のIDを付けます。IDの付け方は、「com.company.AppName」のようにドットデリミタで逆DNSスタイルがおすすめです。このIDは、インストール時や、アプリケーションファイルシステムストレージにアクセスする時、アプリケーション間でコミュニケーションする時などに使用されます。
   　
   • 「xmlns="http://ns.adobe.com/air/application/1.0.M5"」：AIRの名前空間。最後のセグメントは、アプリケーションの実行に必要なランタイムのバージョンです。
   　
   • 「version="0.1" 」：アプリケーションのバージョン。
   　
3. 要素にアプリケーションの名前を記述します。ここでは、Hello AIR!とします。
　
4. 要素内では、アプリケーションのウィンドウの表示に関する設定を行います。trueとすれば、アプリケーションのウィンドウが表示されます。非表示にしたい場合は、falseにします。要素には、アプリケーションのルート（トップレベル）HTMLファイルを記述します。ここでは、HelloAIR.htmlとします。
　
5. 最終的なアプリケーション記述ファイルは以下のようになります。

   <?xml version="1.0" encoding="UTF-8"?> 
   
     <application xmlns="http://ns.adobe.com/air/application/1.0.M5" appId="samples.HelloWeb" version="0.1"> 
   
     <name>Hello AIR!</name> 
   
     <initialWindow> 
   
     <content>HelloAIR.html</content> 
   
     <visible>true</visible> 
   
     </initialWindow> 
   
     </application> 
   

アプリケーションのHTMLページを作成

ここで作成するトップレベルHTMLには、基本的なHTMLコードとJavaScriptコードを記述します。 　

1. 以下のHTMLコードを記述した「HelloAIR.html」ファイルを作成します。このファイル名は、HelloAIR-app.xmlファイルの<content> に記述した名前と同じにする必要があります。

   <html> 
   
       <head> 
   
     <title>Hello AIR!</title> 
   
     </head> 
   
     <body onLoad="appLoad();"> 
   
     <h1>AIR</h1> 
   
     <div id="replace"> 
   
     <p>Placeholder</p> 
   
     </div> 
   
     </body> 
   
     </html> 

2. 次にonLoadイベントで実行するJavaScript関数をhead要素内に追加します。

   <script src="AIRAliases.js" type="text/javascript"></script> 
   
       <script type="text/javascript"> 
   
       function appLoad(){ 
   
       air.trace("Hello AIR."); 
   
       xmlhttp = new XMLHttpRequest(); 
   
       xmlhttp.open("GET", "request.txt",true); 
   
       xmlhttp.onreadystatechange=function() { 
   
       if (xmlhttp.readyState==4) { 
   
       document.getElementById('replace').innerHTML = xmlhttp.responseText;
   
       } 
   
       } 
   
       xmlhttp.send(null) 
   
       } 
   
     </script> 
   
    

   このappLoad関数では、まずAIRランタイムが定義されているかどうかをチェックして、定義されている場合はair.trace関数を呼びます。ADLを使ってこのアプリケーションを実行した場合は、トレースメッセージがコマンドコンソールに表示されます。AIRは、HTMLページがロードされる際に、HTMLウィンドウオブジェクトにランタイムプロパティを追加します。AIR APIsを呼び出す際は、すべてこのオブジェクトを介して行われます。呼び出す際に、APIクラスのパッケージをフルパスで記述する必要がありますが、AIRAliases.jsを利用すると短くすることができます。たとえば、AIRAliases.jsを使わない場合、

      var myFile = new runtime.flash.filesystem.File(); 

   AIRAliases.jsを使うと、

      var myFile = new air.File();

   と短くできます。 appLoad関数の残りのコードは、通常のJavaScriptです。XMLHttpRequestを使って、ローカルにあるファイル（request.txt）からデータを取得して、HelloAIR.html内のテキストを置き換えています。
3. 最終的なHelloAIR.htmlファイルは以下のようになります。

      <html> 
   
      <head> 
   
   <title>Hello AIR!</title> 
   
   <script src="AIRAliases.js" type="text/javascript"></script> 
   
   <script type="text/javascript"> 
   
   function appLoad(){ 
   
   if(window.runtime){ 
   
   air.trace("Hello AIR."); 
   
   } 
   
   xmlhttp = new XMLHttpRequest(); 
   
   xmlhttp.open("GET", "request.txt",true); 
   
   xmlhttp.onreadystatechange=function() { 
   
   if (xmlhttp.readyState==4) { 
   
   document.getElementById('replace').innerHTML = xmlhttp.responseText; 
   
   } 
   
   } 
   
   xmlhttp.send(null) 
   
   } 
   
   </script> 
   
   </head> 
   
   <body onLoad="appLoad();"> 
   
   <hi>AIR</h1> 
   
   <div id="replace"> 
   
   <p>Placeholder</p> 
   
   </div> 
   
   </body> 
   
   </html> 

外部テキストファイルの作成

JavaScriptで読み込む外部テキストファイルを作成します。 　

1. テキストファイルに以下のHTMLコードを記述します

   Hello AIR! 

2. ファイル名を「request.txt」として保存します。

アプリケーションのテスト

ADLを使用してアプリケーションのテストを行います。コマンドコンソールを開いて、このアプリケーションのディレクトリに移動し、以下のコマンドを実行します。

adl HelloAIR-app.xml 

AIRアプリケーションのウィンドウが開き、コマンドコンソールには「air.trace()」のメッセージが表示されます。

アプリケーションのインストールファイルの作成

アプリケーションの実行が成功したら、次はADTを使ってアプリケーションファイルをAIRインストールファイルへとパッケージします。AIRインストールファイルには、アプリケーションに必要なすべてのファイルが含まれています。なお、配布する前にはデジタル署名を行う必要があります。デジタル署名には、ADTや他の証明書ツールを使って作成した自己証明書や、VeriSignやThawteが発行する証明書を利用することができます。自己証明書を利用した場合は、アプリケーションのインストール時の「publisher」項目には、「unverified」と表示されます。自己証明書は、「AIRアプリケーションのコードが制作時から変更されていない」ということを証明するだけで、そのアプリケーションに悪意あるコードが含まれていないことを保証するものではありません。開発用には自己証明書でも構いませんが、一般に配布する際は検証された商業の証明書を利用することを強くおすすめします。

ADTで自己証明書を作成する際は、ランダムなキーが生成されます。同じキーが同時に生成されることはありません。なお、一度ADTでデジタル署名したアプリケーションを更新する際は、同じ証明書で署名しなければなりません。

ノート：AIRのベータ版では証明書をしませんが、正式版では証明書を使用します。ベータ版でAIRアプリケーションを配布する場合は、商業の証明書で署名してください。そうすれば、AIR 1.0のリリースに伴い、AIRアプリケーションの正式版を公開する際、ユーザーはアップデートしやすくなります。

自己証明書の発行

自己証明書の発行するには、コマンドコンソールを開いて、以下のコマンドを実行します。

adt –certificate -cn SelfSigned 1024-RSA sampleCert.pfx samplePassword 

上記のコマンドは、証明書を発行する上で最低限必要な内容です。イタリック文字の部分はユーザー自身が任意で設定します。また、キータイプの部分は「1024-RSA」か「2048-RSA」でなければなりません。

AIRインストールファイルの作成

AIRインストールファイルの作成するには、コマンドコンソールを開いて、以下のコマンドを実行します（1行で記述してください）。

adt –package -certificate sampleCert.pfx -password samplePassword HelloAIR.air HelloAIR-app.xml HelloAIR.html AIRAliases.js request.txt 

HelloAIR.airは、ADTが生成するAIRアプリケーションファイルです。HelloAIR-app.xmlは、アプリケーション記述ファイルです。その後に続くファイル名は、アプリケーションに含まれるファイルです。この例では2つのファイルしかありませんが、アプリケーションに必要なファイルやフォルダの数だけ列記します。

AIRアプリケーションファイルの作成後は、ファイルをダブルクリックしたり、コマンドコンソールでコマンドを実行したりしてアプリケーションを実行します。

さらに学習したい方へ

本記事で解説したのは、HTMLベースのAIRアプリケーション開発環境のセットアップ方法と、基本的な制作手順です。より詳しい情報、最新情報については下記のリソースを参照してください。

• Developing AIR Applications with HTML and Ajax*
• Adobe AIR Extension for Dreamweaver*
• Adobe AIR Developer Center for HTML and Ajax*

著者について