目次

作成日

16 March 2010

必要条件

この記事に必要な予備知識

HTMLとJavascriptの基本知識が必要です。

ユーザーレベル

初級

その他の要件

はじめに

AIRプログラミングに関する基本知識から開発方法の基礎を習得していただくことを目的とする連載です。対象とする読者は次のような方です。

  • デザイナーでAIRによるデスクトップRIAの概要や開発方法を知りたい方
  • Visual Basic、Visual C#、Visual C++、Delphiなどのデスクトップアプリケーション開発者で、AIRアプリケーション開発に関心がある方
  • FlashやDreamweaverでサイト構築をしている方でAIRアプリケーション開発に関心がある方

この連載ではプログラミングの経験を問わず、RIA、デスクトップRIAの概念、AIRの基本を理解したうえで、シンプルなAIRアプリケーションを作成できることを目標とします。

第3回目はDreamweaver によるAjax版AIRアプリケーションの開発手順をご紹介します。

学習できること

  • Dreamweaver でAjaxによるHello AIRアプリケーションの構築

Dreamweaver拡張機能の入手とインストール

第2回「AIRランタイム、AIR SDKの入手とインストール」でご紹介したように、AIRアプリケーションを作成してインストーラを構築するには、AIR SDKの入手とインストールが必要です。その手順は第2回記事をご覧ください。ここでは、Dreamweaver拡張機能をインストールしてAIRアプリケーションを作成する準備を整える手順をご紹介します。

Ⅰ．Dreamweaver用Adobe AIRエクステンションのインストール

DreamweaverのAIR拡張機能により、作成するAIRアプリケーションのデザイン編集を行いながら開発を進めることができます。AIR拡張機能は、Adobeの次のページからダウンロードして入手します。手順はWindows、Mac OSとも、ほぼ共通になります。Dreamweaver CS4の場合、ダウンロードページには、[コマンド]メニュー － [AIR拡張機能の取得] で直接アクセスできます。

Adobe - AIR：Ajax用ツール

AIR 拡張機能のインストールは、Extensionファイルを実行するだけですが、あらかじめDreamweaver がインストールされていることが必要です。

入手したAIR 拡張機能セットアップファイル「Adobe_AIR_CS3_jp.mxp（DreamweaverCS3の場合）」または｢Adobe_AIR_CS4_jp.mxp（DreamweaverCS4の場合）｣をダブルクリックして実行すると、Adobe Extention Managerが起動してインストールが始まります。

! セットアップが開始する前にJRE(Java Runtime Environment)のインストールを促すエラーメッセージが表示されたら、第2回「AIRランタイム、AIR SDKの入手とインストール」の「Ⅲ．JREの確認」に記述されているJREインストール(確認)手順により、セットアップを行ってください。

セットアップが終了すると、Adobe Extension Managerが表示されて、「Adobe AIR Extension for Dreamweaver」を確認できます。イメージはDreamweaver CS4のものです。

Ⅱ．DreamweaverでAdobe AIR拡張機能を確認

Dreamweaver を起動すると、AIR拡張機能が確認できます。すでにDreamweaverを開いていた場合、終了して再度立ち上げます。

[サイト]メニューに[AIR アプリケーション設定…] サブメニューと[AIRファイルを作成]サブメニューが作成されていたら、拡張機能のインストールは成功です。

Dreamweaver でHello AIR アプリケーションを作成する

Ⅰ． 作成するHello AIRアプリケーション

第2回でご紹介したSDKによる作成を行ったときと同様のシンプルなHello AIRアプリケーションを作成します。次のようなHTMLドキュメントを作成し、AIRアプリケーションとして実行した結果はシンプルなものです。

このHTMLドキュメントから次のようなAIRアプリケーションを構築できます。ブラウザではなく、独自のウィンドウで実行されていることに注目してください。

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

DreamweaverでHTMLドキュメントを作成して、AIRアプリケーションとしてビルドできます。その手順をご紹介します。

まず、Dreamweaverでアプリケーション用のサイトを定義します。次に、サイトのローカルルートフォルダにHTMLドキュメントを作成します。

下記の例では「air_app_dw」という名前のサイトを定義し、helloAIR.htmlというドキュメントを作成しています。

Ⅲ．AIRアプリケーションとしてプレビューする

HTMLドキュメントの準備ができたら、AIRアプリケーションを作成します。作成する前に、このHTMLがどのようなAIRアプリケーションになるか、プレビューで確認できます。

Dreamweaverの[ファイル]メニューにある[ブラウザでプレビュー]サブメニューを選択すると、[Adobe AIRでプレビュー]というメニューが拡張機能によって作成されています。このメニューを選択して、AIRアプリケーションを作成、実行してすぐに確認できます。Dreamweaver のAIR拡張機能を使用すると、SDKのADLコマンドで行ったアプリケーションの実行がワンクリックで行えることがわかります。

AIRアプリケーション記述ファイル

Dreamweaver拡張機能による開発では、HTMLドキュメントからAIRアプリケーションのインストールパッケージも作成できます。

プレビューで動作の確認ができたら、AIRインストールパッケージを作成できますが、その前にHTMLドキュメントからAIRアプリケーションを作成するために必要な設定を行います。これはSDKで作成するときに編集した、「AIRアプリケーション記述ファイル」と同じものになります。

Ⅰ．記述ファイルの設定項目

Dreamweaverのサイト（S）メニューから「AIRファイルを作成（C）」を選択してAIRアプリケーション記述ファイルを作成できます。この設定には、次のメイン情報、およびその他の設定情報が含まれます。設定できる項目は下記の表にまとめてあります。

  • アプリケーション名
  • バージョン番号
  • スタートページの指定

SDKのときはエディタでXMLファイルを編集しましたが、Dreamweaver 拡張機能を使用すると、この設定をダイアログボックスで編集して、自動的にファイルを生成できるようになります。

「AIR アプリケーションとインストーラの設定」ダイアログボックスの設定項目

項目 内容 必須
項目
ファイル名 アプリケーションの実行ファイルのファイル名。初期状態では、Dreamweaverでのサイト名が表示されますが、自由に変更できます。ただし、使用できる文字はASCIIキャラクターのみで、ファイル名の最後にピリオドを使用することはできません。 ○
名前 ユーザーがアプリケーションをインストールする際に、インストールウィンドウに表示される名前。初期状態では、Dreamweaverでのサイト名が表示されますが、自由に変更できます。なお、文字の使用に制限はありません。  
ID 作成したアプリケーションに割り振る固有のID。初期状態では、Dreamweaverが自動でIDを割り振りますが、自由に変更できます。IDに使用できる文字は、英数字と「ドット（.）」、「ダッシュ（-）」です。 ○
バージョン 作成したアプリケーションのバージョン。 ○
イニシャルコンテント アプリケーションのスタートページを指定。「Browse」ボタンをクリックして、スタートページを選択します。スタートページは、必ずルートフォルダ内に置く必要があります。 ○
説明 ユーザーがアプリケーションをインストールする際に、インストールウィンドウに表示されるアプリケーションの解説。  
著作権 ユーザーがアプリケーションをインストールする際に、インストールウィンドウに表示されるコピーライト表記。  
ウィンドウスタイル アプリケーション実行時のウィンドウスタイル。「システムクローム」は、OSの標準ウィンドウスタイル。「カスタムクローム (不透明) 」は、制作者オリジナルのスタイル（オリジナルスタイルは、パッケージ化するHTMLページ内で定義します）。「カスタムクローム (透明)」は、オリジナルスタイルのエッジを透明化したもの。  
ウィンドウサイズ アプリケーションを開いた時のウィンドウサイズ  
アイコン アプリケーションのアイコンに使用する画像を選択（初期状態では、Adobe AIRのロゴが使用されます）。「Select Icon Images」ボタンをクリックすると、「Icon Images」ダイアログボックスが開き、各サイズで使用する画像を指定します。このアイコンに使用できる画像の形式はPNGのみです。また、画像ファイ ルは、アプリケーションのフォルダ内に置く必要があります。  
関連付けるファイルタイプ OSが管理するファイルタイプにAIRアプリケーションを登録できます。登録後は関連付けられたファイルを開くとAIRアプリケーションが起動するようになります。これは例えば .fla という拡張子を持つファイルを開くとFlashオーサリングツールが起動することと同じ原理です。  
アプリケーションの更新 インストール後のアプリケーションアップデートをデフォルトの方法でなく独自のプロセスで行いたい場合、trueにします。  
インストーラ設定
含めるファイル アプリケーションに含めるファイルやフォルダの選択。追加できるのは、HTMLファイル、CSSファイル、画像ファイル、JavaScriptファイルです。「_mmServerScripts」や「 _notes」といったフォルダを追加しないでください。  
電子署名 電子署名の追加。詳細は、以下のセクションを参考にしてください。 ○
プログラムメニューフォルダ アプリケーションへのショートカットを、Windowsのスタートメニューのどのサブディレクトリに作成するかを指定（Macintoshでは適用されません）。  
出力先 作成したAIRアプリケーションの保存先を指定。初期状態では、Webサイトのルートとなっており、「参照」ボタンをクリックして任意の場所を指定することができます。 ○

Ⅱ． 拡張機能ダイアログで必須項目を設定する

拡張機能のダイアログ上では、必須項目には「＊」がつけられています。必須項目のみを設定した場合の例として、次のような設定値になります。

設定項目 設定値
ファイル名 HelloAIR
ID examples.html.HelloWorld
バージョン 0.1
イニシャルコンテント helloAir.html
電子署名 次の節で作成します
出力先 air_app_dw

(注：Destinationは、デフォルトでサイトのルートになっており、編集する必要はありません)

上記の項目を設定すると、ダイアログは次のようになります。この画面の設定により、ルートフォルダに「application.xml」という名前のAIRアプリケーション記述ファイルが作成されます。

電子署名の必要性とSelf-Sign電子署名の作成手順

Ⅰ．電子署名

AIRインストールパッケージの作成では、「電子署名」の添付も必須になっています。今作ろうとしているのは、作成したAIRアプリケーションを別のパソコンにもインストールすることができるパッケージを作成しています。つまり、作成したインストールパッケージをネット上で公開するなどして配布することができるようになります。その場合、パッケージをダウンロードして自分のパソコンにインストールする人は、

  • そのAIRプログラムはどこのだれが作ったものか
  • ダウンロードしたパッケージは、その作者が作った「オリジナル」バージョンか

を確認する手段が必要になります。これは、作者以外の人物が、プログラムの一部を修正（改ざん）するなどした、「偽物」を配布している可能性や、オリジナルバージョンであってもダウンロード中などにファイルが破損してしまうことがあるためです。

電子署名をインストールパッケージに添付することによって、利用者はそのような改変されたファイルや、壊れたファイルかどうかを検知できるようになります。「署名」という名のごとく、本人であることを示す「サイン」の役割を果たすデータです。

Ⅱ． AIRアプリケーションの電子署名を作成する

ダイアログ下部の「*電子署名：設定されていません」表示の右にある「設定」ボタンをクリックすると、電子署名ダイアログが表示されます。このダイアログにある、「参照」ボタンで購入済みの電子署名を選択するか、「作成」ボタンを押して自分で署名した(Self-Sign)電子署名を作成することができます。

 ダイアログ下部にある「AIRI(AIR Intermediate)パッケージとして作成し、後で署名する」を選んで「OK」ボタンをクリックすることで電子署名なしにアプリケーションを作成することができますが、インストール不可能なパッケージになります。この場合のアプリケーションはAIRI（AIR Intermediate）と呼ばれるフォーマットになります。

ここでは、「作成」を押して電子署名を作成します。必須項目にはやはり「*」がついているので、必ず入力します。

「*保存先: 」欄では作成する電子署名のファイル名と保存場所を指定することができます。サイトルートに適切な名前を付けて保存しましょう。また、パスワードはすぐ後で使用するので、覚えておきます。「OK」ボタンを押して自分の電子署名を生成します。

 「Type」で選択可能な「1024-RSA」と「2048-RSA」の「RSA」は暗号化方式、数値は鍵とよばれるデータのビット数を表します。2048-RSAは1024-RSAよりもセキュリティレベルが高い方式になります。

Self-Sign電子署名データの作成ダイアログ

生成が成功すると、メッセージが表示され、電子署名の設定ダイアログに戻ります。ここで署名作成時に設定したパスワードを入力して、「OK」を押します。

AIRインストーラの作成とインストール実行

Ⅰ．インストーラの作成

電子署名の設定が終わると、AIRインストーラを作成できます。「AIRアプリケーションとインストーラの設定ダイアログ」で「AIR ファイルを作成」をクリックして作成しましょう。

上記のダイアログが表示されると作成が成功しています。サイトルートに次のファイルが作成されていることを確認してください。

ファイル 内容
Airappdw.air AIRアプリケーションインストーラ
application.xml AIRアプリケーション記述ファイル
myAirCert.p12 電子署名

Ⅱ． インストーラの実行

次にインストーラを起動してAIRアプリケーションをインストールしてみましょうairappdw.airファイルをダブルクリックして実行します。そのまま進み、インストールが完了すると、アプリケーションが実行できます。HelloAIRウィンドウが表示されたでしょうか？

今回は最もシンプルなHTMLでアプリケーションを作成しましたが、JavaScriptの処理が記述してあれば、その動作はAIRアプリケーションに引き継がれます。また、ハイパーリンクで別の文書を開いている場合も同じように実現されます。また、AIRランタイムにはローカルデータベースが搭載されており、AIRアプリケーションはOSのファイルシステムやクリップボードにアクセスできます。それらの機能をJavaScriptを使用して利用できるように、HTML開発者用のAIR APIが提供されています。自分のHTML/Ajaxスキルを駆使して、AIRアプリケーションを作成してみましょう。

最後に

今回はDreamweaver用Adobe AIR エクステンションの入手、インストールを行い、HTMLで作成したAIRアプリケーションのインストーラを作成する手順をご紹介しました。
Dreamweaver用Adobe AIR エクステンションにより、自己署名電子署名の作成が行えるほか、AIRインストーラの作成も行うことができます。このことは、Dreamweaverユーザであれば、Ajaxにより作成したアプリケーションをAIR アプリケーションとして作成し、デスクトップアプリケーションとして配布できることを意味します。
次回はシームレスインストールとその設定方法についてご紹介します。