AIRチュートリアル Dreamweaver 第１回 AIRアプリをはじめてみよう ～環境を設定する～
作成日
8 April 2004
ページ ツール |
必要条件
ユーザーレベル
初級
必要な製品
- Dreamweaver CS3 (Download trial)
- Extension Manager
はじめに
Dreamweaver ユーザー待望のアプリケーション実行環境であるAIR（Adobe Integrated Runtime）がリリースされました。しかし、AIRアプリケーションの開発は「難しいのでは？」と、思われがちです。特にデザイナーの方にとっては、プログラムをたくさん記述しないと作れないのでは？と心配される方も多いと思います。ですがそれは違います。普段Dreamweaverを使用しているデザイナーの方でも簡単にAIRアプリケーションを作ることができます。ここでは、Dreamweaverユーザーがはじめて作るAIRアプリケーションのファーストステップをご紹介します。どのぐらい簡単にできるのか、実際に操作して試してみてください！
Dreamweaverで作るAIRアプリケーション開発の必要構成
Adobe Dreamweaver CS3でAIRアプリケーションを開発するには、以下のフローを実行する必要があります。ここでは、簡単なDreamweaverドキュメントを作成し、AIRアプリケーションの作り方を学んでみましょう。
Dreamweaverで作るAIRアプリケーションの開発フロー
次に作成環境を用意します。AIRアプリケーションをDreamweaverで開発するためにDreamweaverの拡張機能を追加します。
この記事では、以下のソフトウェアを使用しています。
【Dreamweaver AIR 1.0拡張機能】
※サイト下部のDreamweaver用Adobe AIRエクステンションをダウンロード（MXP：32.5MB） をクリックします。
ダウンロードした拡張機能をダブルクリックして、拡張機能をインストールします。Adobe Extension Managerウィンドウ内に、Adobe AIR Extension for Dreamweaver 1.0.407が追加されます。チェックボックスにチェックがついていることを確認し、Adobe Extension Managerを終了します。
Dreamweaverドキュメントの準備
Adobe Dreamweaver CS3 を起動します。
拡張機能が有効である場合、「サイト]メニューをクリックすると「AIR Application Settings」・「Create AIR File」が追加されます。
※ Dreamweaverでサイト定義を行っていない場合は、本追加機能は非表示状態で使用できません。
AIRアプリケーション作成の第一歩として、簡単なDreamweaverドキュメントを作成し、そこからAIRアプリケーションを作成してみましょう。
Dreamweaver CS3 を起動します。新規にAIRアプリケーションを作成する場合には、サイト定義を行う必要があります。「サイト」メニューから「新規サイト」を選択します。
ここでは、サイト名を[AIR_sample]とし、ローカルルートフォルダをC:￥AIR_sample￥として設定しました。
次に簡単なWebサイトを構築します。Dreamweaver CS3から追加されたレイアウトを使用してみましょう。
「ファイル」メニューから「新規」を選択し、カテゴリ：「空白ページ」、ページタイプ：「HTML」、レイアウト：「2列をハイブリッドに、左にサイドバー、ヘッダーとフッター」を選択します。作成後、「ファイル」メニューから「保存」をクリックします。
保存先C:￥AIR_sample￥ に、ファイル名をsample.htmlと名前を付けて保存します。
AIRアプリケーションインストーラー設定
ドキュメントの準備ができたら、AIRアプリケーション設定を追加します。
「サイト」メニューの「AIR Application Settings」を選択します。
AIR Application and Installer Settingsダイアログが表示されます。
【AIR Application and Installer Settings】
File name：アプリケーションの実行ファイルのファイル名。初期状態では、Dreamweaverでのサイト名が表示されますが、自由に変更できます。ただし、使用できる文字はASCIIキャラクターのみで、ファイル名の最後にピリオドを使用することはできません。
Name：ユーザーがアプリケーションをインストールする際に、インストールウィンドウに表示される名前。初期状態では、Dreamweaverでのサイト名が表示されますが、自由に変更できます。なお、文字の使用に制限はありません。
ID：作成したアプリケーションに割り振る固有のID。初期状態では、Dreamweaverが自動でIDを割り振りますが、自由に変更できます。IDに使用できる文字は、英数字と「ドット（.）」、「ダッシュ（-）」です。
Version：アプリケーションのバージョンを指定します。
Initial content：アプリケーションのスタートページを指定。「Browse」ボタンをクリックして、スタートページを選択します。スタートページは、必ずルートフォルダ内に置く必要があります。
Description：ユーザーがアプリケーションをインストールする際に、インストールウィンドウに表示されるアプリケーションの解説。
Copyright：MacintoshにインストールされたAdobe AIRアプリケーションのAbout情報に表示される著作権の表記です。この情報はWindowsにインストールされたアプリケーションには使用されません。
Window style：アプリケーション実行時の、使用するウィンドウスタイルを指定します。
- System chrome OSの標準ウィンドウで表示します。
- System chrome（opaque） OSの標準ウィンドウ枠を非表示にします。
- System chrome（transparent） ページに透過情報を追加します。
Window size：アプリケーション実行時のウィンドウサイズを指定します。
Icon：アプリケーションのアイコンに使用する画像を選択（初期状態では、Adobe AIRのロゴが使用されます）。「Select Icon Images」ボタンをクリックすると、「Icon Images」ダイアログボックスが開き、各サイズで使用する画像を指定します。このアイコンに使用できる画像の形式はPNGのみです。また、画像ファイルは、アプリケーションのフォルダ内に置く必要があります。
Associated File Types：作成したファイルタイプを関連づけさせます。
Application Updates：チェックボックスをつけると、AIRアプリケーションの実行に必要なバージョンのAIRがユーザーのマシンにインストールされていない場合、アップデートが促されます。Included files：アプリケーションに含めるファイルやフォルダの選択。追加できるのは、HTMLファイル、CSSファイル、画像ファイル、JavaScriptファイルです。「_mmServerScripts」や「 _notes」といったフォルダを追加しないでください。
Digital signature：デジタル署名を指定します。AIRアプリケーションでは書き出しにはこの設定が必要です。
Program menu folder：アプリケーションへのショートカットを、Windowsのスタートメニューのどのサブディレクトリに作成するかを指定（Macintoshでは適用されません）。
Destination：作成したAIRアプリケーションの保存先を指定。初期状態では、Webサイトのルートとなっており、「Browse」ボタンをクリックして任意の場所を指定することができます。
「Initial content」を設定します。
「Browse」ボタンをクリックして、先ほど作成したsample.htmlファイルを参照させます。ここで指定を行うと、Included filesにsample.htmlが追加されます。
※Include filesに追加されたファイルがAIRアプリケーションとなります。デフォルトでは、AIRアプリケーション作成に必要な application.xml（アプリケーションの設定を書き込むXML ファイル）のみが追加されています。
ここまでの設定で、AIRで実行されたプレビューができるようになります。
「Preview」ボタンをクリックして、確認してみましょう。
AIRアプリケーションが表示されました！
※Adobe AIRは レンダリングエンジンとして、Safariブラウザでも使用されているWebKitを使用しています。
そのため、フォントやレイアウトなどがInternet ExplorerやFirefoxと多少異なる場合もあります。
確認後、Dreamweaverに戻ります。
最終出力の前に、AIRアプリケーションの作成には、デジタル署名を使用します。
※Digital Signature（デジタル署名）は、アプリケーションの作成後にコードの変更が行われていないことや、コードが破損していないことを保証するためのものです。AIRアプリケーションを配布し、他のユーザーが利用できるようにするには、必ずこのデジタル署名が必要となります。このデジタル署名には、商用の証明書だけでなく、アプリケーション制作者自身が発行する自己証明書を使用することができます。なお、後でデジタル署名を追加するという前提で一時的に署名なしでアプリケーションファイルを作成することもできます。以下の手順でデジタル署名を設定します。
※デジタル署名は、Acrobatなどで使用されているデジタル署名ファイル（拡張子.pfxや.p12）と同じ形式です。
ここでは、新規にデジタル署名を作成してみましょう。Digital signature:has not been set の「SET」ボタンをクリックします。Digital signatureダイアログの「Create」ボタンをクリックします。
デジタル署名の内容を入力し[OK]ボタンをクリックします。
- 商用の証明書を使用するには、「Browse」ボタンをクリックして証明書を選び、パスワードを入力して「OK」ボタンをクリックします。
- 自己証明書を作成するには、「Create」ボタンをクリックして「Self-Signed Digital Certificate」ダイアログボックスを開き、各項目を入力します。Type項目ではセキュリティのレベルを設定します。「2048-RSA」は、「1024-RSA」にくらべ複雑な暗号化を行います。
Digital Signatureダイアログに戻ります。Password欄にデジタル署名を作成した際に入力した、Passwordを入力します。パスワードを記憶させておきたいときは、「Remember password for this session」のチェックボックスをオンにします。最後に「OK」ボタンを選択します。
ここまででAIRアプリケーションを書き出すための設定が完了です。
最後に「Create AIR File」を選択します。
AIRアプリケーションの実行
書き出したAIRアプリケーションファイルを確認します。
「AIRsample.air」がAIRアプリケーションインストーラーです。
ダブルクリックで実行します。
今回は、デジタル署名を自作で行ったため、Publisher:がUNKNOWNになっています。デジタル署名発行機関で、デジタルIDを購入した場合は、Publisher：の名称が入ります。Installボタンを選択します。
デスクトップのアイコン配置・スタートメニューの項目追加・インストール場所を設定します。
設定後「Continue」を選択します。
※インストールには使用しているコンピューターの管理者権限が必要です。
インストールしたAIRアプリを実行すると作成したAIRアプリが確認できます。
もっと学ぶには
Dreamweaverの基本しっかりとおさえたい方にオススメのトレーニングコースです。
基本的なWebサイト構築における手順、サイトのナビゲート、CSS（カスケーディングスタイルシート）を使ったWebページのレイアウトのデザイン、大規模なサイトの構築や維持管理の手法など、サイト制作に欠かせない要素を多数ご説明します。
Adobe Dreamweaver CS3: Fundamentals Webサイト構築の基礎
http://m-school.biz/training/dreamweaver_cs3_fundamentals.htm
