Adobe AIR for Flash CS3 (1)

Introduction

Adobe AIR(以降AIRと省略)とはAdobe社が提供している

リッチインターネットアプリケーション(RIA)を
デスクトップに展開するための総合環境です。

従来、デスクトップアプリケーションを作るには初心者には仕切りが高く、さらにOSの違いにより、Windowsでは実行できるが、Macでは実行できないなどということがありました。しかし、AIRを使用することにより、より簡単に、そして異なったOS間でのデスクトップアプリケーションを実行することができます。

また、AIRを実行するためのランタイムにWebKitエンジンとAdobe Flash®エンジンの両方が搭載されているため、HTMLやJavaScriptFlashFlexなどの自分が得意とするプログラミング言語でアプリケーションの構築が可能です。

以下(図1)はオフィシャルページにもありますようにAIRアプリケーション(デスクトップアプリケーション)を構築するには様々な開発環境が提供されており、ユーザーが自分に適した開発環境を選ぶことになります。

official

(図1,AIR開発環境)

今回は、この中の開発環境のうちからFlash CS3を使用し、AIRアプリケーションを作成するまでのレビューをしたいと思います。
デスクトップアプリケーションをAIRアプリケーションで実現することで、より身近に感じてもらえれば幸いです。

List of Content

  1. 全体の流れ
  2. AIRの実行と制作環境設定
    • Flash CS3の環境設定(制作)
    • AIR ランタイムのインストール(実行)

  3. AIRアプリケーション作成
    • コンテンツの作成
    • インストールファイルの設定
    • インストールファイルの作成

  4. AIRアプリケーションの実行
    • インストール
    • AIRアプリケーションの実行
    • アンインストール

  5. まとめ


1. 全体の流れ

まずはじめに、AIRアプリケーションが実行される仕組みについて簡単に説明したいと思います。

AIRアプリケーションは従来のデスクトップアプリケーションとは異なり、OS間で実行環境が異なっても動作することは冒頭でも述べましたが、それを可能にさせるためには共通のAIRランタイムと呼ばれているものをインストールしなければいけません。
これは、皆さんが音楽を再生するために使用するiTuneやQuick Time のようなミュージックプレイヤーと同様のものだと考えて頂いた方が分かり易いかもしれません。
( 図2 の③)



また、Airアプリケーションを作成する時も同様な考え方ができます。

音楽ファイル(例えば .mp3ファイル)などを作成するために専用のツールを使用して作成するというイメージになります。
( 図2 の①)


AR2.gif

(図2、全体のイメージ)

2. 制作と実行の環境設定

AIRアプリケーションを作成するために、制作(図2 の①)と実行(図2 の③)の環境設定をしていきましょう。

Flash CS3の環境設定(制作)

AIRアプリケーションをFlash CS3で作成するには、Flash CS3を拡張する必要があります。

Flash CS3を起動し、ヘルプよりアップデートをするとAIRを作成するための環境が自動でインストールされます。

update.jpg

(図3、ヘルプ->アップデート)

アップデートした後、Flash CS3を再起動してください。

新規作成の欄にFlash ファイル(Adobe AIR)が追加されているはずです。

airmake.JPG

(図4、新規作成)


AIR ランタイムのインストール(実行)

作成したAIRアプリケーションを実行するためにAIRランタイムをインストールします。

AdobeのページよりAIRランタイムを配布しているので、これをダウンロードし、インストールしてください。

( ここをクリックするとAdobeのダウンロードページに飛びます)

Airinst.JPG

(図4、AIRランタイムのダウンロード)

3.AIRアプリケーション作成

ここでは実際にFlash CS3を使用し、AIRアプリケーションファイルを作成するまでを説明したいと思います。( 図2 の① ~ 図2 の② )

コンテンツの作成

ここではAIRを作成することに重点をおいて説明するために、プログラム等は記述しないで簡単なコンテンツを作成します。

今回はFlash CS3で単に円をおいただけです。

desktop.JPG

(図5、コンテンツの作成)

コンテンツを作成できたらファイルを任意の場所に保存してください。

保存する際の注意として日本語の名前が入ったパスが通ってないところに保存しないでください。

例えば、今回はMy testフォルダの下にAirというフォルダを作成し"D:\My test\Air\"に今制作したFlashファイルを保存しました。

もし、デスクトップなどに置いて保存した場合、AIRアプリケーションを書出す場合にエラーが起こるので注意してください。

erroe.JPG

(図6、エラー)

インストールファイルの設定

作成したコンテンツをAIRアプリケーションとしてインストールさせるためにairファイルと呼ばれるインストールファイルを作成する
必要があります。

また、デスクトップアプリケーションを作成する際には、作成者の名前、ライセンス、署名など情報を記述しなければいけません。
同様に、AIRアプリケーションもこれらの情報をairファイルに記述します。

ですので、airファイルを作成する前に情報の設定をしていきます。



"コマンド->AIRアプリケーションとインストーラの設定"を開いてください。

installer.jpg

(図7、コマンド->AIRアプリケーションとインストーラ

始めにairファイルとして書出されるときのファイル名、名前、説明、デスクトップアイコンなどの情報を記述します。

今回は背景を透過させて、AIRアプリケーションの面白さを1つ伝えたいので

"ウィンドウスタイル->カスタムクローム(透明)"と設定してください。

この設定により、コンテンツ作成時の白い背景が取り除かれます

次に、"電子署名"の右側にある"変更"をクリックしてください。

settei.JPG

(図8、AIR アプリケーションとインストーラ設定)

ここでは電子証明書電子署名に設定します。

電子証明書というのはAIRアプリケーション製作者の情報を記述したデータでAIRアプリケーションを作成する際には必ず
この証明書を設定する必要があります。

電子証明書を作成されてない方は作成を押してください。

パスワードにはこれから作成する電子証明書のパスワードを指定します。

shomei.JPG

(図9、電子署名

ここでは電子証明書に製作者の情報を記述します。

一度電子証明書を作成すれば別のAIRアプリケーションを作成する際にも同じ証明書が使えるので、
それを考慮して保存場所を指定してください。

jikosekinin.JPG

(図10、自己署名の電子証明書の作成)

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

以上の設定が完了したら、 "AIRファイルをパブリッシュ"( 図 8 ) をクリックしてください。

フォルダの中にairファイルが作成されたのが確認できるはずです。

air.JPG

(図12、airファイル)

4. AIRアプリケーションの実行

ここでは実際に作成したairファイルのインストールから実行、アンインストールまでを説明します。( 図2 の ③ )

インストール

作成したairファイル( 図12 )を実行してAIRアプリケーションをインストールしてみましょう。

airファイルを実行してみると、普段皆さんがインストールするのと同様にインストールウィンドウが開きます。

任意の場所を指定してインストールしてください。

inst.JPG

(図12、AIRインストールウィンドウ)

AIRアプリケーションの実行

インストールが終了するとAIRアプリケーションが実行できるはずです。

デスクトップに自分が作成したAIRアプリケーションを確認できましたか?

今回は背景に透過処理の設定をしましたので普段四角のウィンドウと比べると違和感を感じると思いますが、

とても普段デスクトップでみられない形をしています。

これがAIRアプリケーションの強みの一つだといえるでしょう。

AIRアプリケーションを終了させるには、AIRアプリケーションがアクティブな状態で"Alt+F4"、または、
タスクバーのAIRアプリケーションバーで右クリックから終了させてください。

pre.JPG

(図13、AIRアプリケーションの実行)

アンインストール

作成したairファイル( 図12 )をもう一度実行してみてください。

今度はアンインストールが行えるようになります。

また"プログラムファイルの設定と削除"からもアンインストールが可能です。

anst.JPG

(図14,アンインストール)


5.まとめ

お疲れ様でした。

AIRアプリケーションで実現するデスクトップアプリケーションがどの様なものかという雰囲気が伝わりましたでしょうか?

AIRを使用することによって自分だけの様々な機能やスキンをもったデスクトップアプリケーションの作成が可能になります。
Adobe AIR for Flash CS3 (2)では実際にブラウザ機能とAIRならではの機能を実装したアプリケーションを作成してみたので
こちらもあわせてご覧になってください。


Adobe AIR for Flash CS3 (2)へ