Flash CS3 でゼロからはじめよう
AIRアプリケーション作成講座 Vol.1

今年の3月にアルファ版が提供されて以降、EdgeではAdobe AIRについて様々な情報をお伝えしてきました。AIRをとりまく状況は刻一刻と進化しています。先月には待望の Flash CS3 用のアップデータが提供され、Flash CS3でAIRアプリケーションの開発が行えるようになりました。一方、Flash Player の普及率はなんと99%に達し、その中で ActionScript 3 に対応した Flash Player 9 も 90% を超えています。つまり、Flash CS3 と ActionScript 3 で開発を進めれば、それはほぼすべての Web ブラウザで稼働し、さらに将来のデスクトップアプリケーション展開が約束されているというわけです。このように、開発の敷居は下がり、開発したものは誰もが楽しめるという状況の中、Edge では今月から「AIR アプリ開発記」の詳細版として、Edge 上で簡単なアプリケーションの作成を紹介していきます。

AIR をインストールする

まずは AIR の実行環境をインストールしましょう。現在のところ Windows と Mac OS X 用の実行環境が提供されています。使用しているOSに適したインストーラを以下のリンクからダウンロードし、ダブルクリックするとインストール完了です。

Download the Adobe AIR Installer

次に Flash CS3 用のアップデータをインストールします。以下のリンクのページにある「Japanese」から日本語用のものをダウンロードしてください。

Download the Adobe AIR update for Flash CS3

インストール自体はダブルクリックで完了しますが、このプログラムだけを別途アンインストールすることはできません。不具合が発生した場合は Flash CS3 のアプリケーションそのものを再インストールする必要がありますので、あらかじめご了承ください。

アップデータをインストールすると Flash CS3 に以下の機能が追加されます。

以上の作業で AIR アプリケーション作成の準備は整いました。

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

AIR アプリケーション作成の第一歩として、まずは簡単な Flash コンテンツを作り、そこから AIR アプリケーションとしてインストールと実行を試してみましょう。

●Flash コンテンツの作成

新規作成には、Flash CS3 の「ファイル」メニューにある「新規」からではなく、アプリケーションのスタートアップスクリーンから「Adobe AIR 1.0」をクリックしてください。

Flash CS3 スタートアップスクリーン

もしもスタートアップスクリーンが表示されない場合は、「環境設定」の「一般」カテゴリにある「起動時」のプルダウンメニューを「スタートアップスクリーン」にして Flash CS3 を再起動してください。次に「About Authoring Adobe Air」 の 画面が表示されますのでそのまま「OK」を押します。

About Authoring Adobe Air

ここでは何か簡単なテストとして、ステージ上に矩形ツールで絵を描いてファイルを保存します。ファイルパスに日本語やスペース、記号が含まれると正しく実行できないので、半角英数字のみを使用します。ここでは仮に「testAir.fla」とします。

AIR としてパッケージングするためには、先に以下の2つのファイルを生成しておく必要があります。

「制御」メニューの「ムービープレビュー」や、「ファイル」メニューの「パブリッシュ」をクリックするなどしてあらかじめそれらを書き出しておきます。

●AIR アプリケーションとインストーラの設定


次に、「コマンド」メニューの「AIR - Application and Package Settings」をクリックしてください。下のダイアログで AIR アプリケーションとインストーラの設定を行います。設定が沢山あるので戸惑うかも知れませんが、ここで注意するのは下の「Destination folder」と「Included files」の2項目です。

AIR Application & Installer Settings

「Destination folder」はパッケージ化されたインストーラの書き出し先を指定するものですが、 Mac 用ベータ版ではこちらの設定の変更は行えません。

「Included files」の中にパッケージ化に必要なファイルを追加します。すでに先ほどパブリッシュした SWF ファイルと XML ファイルが初期値として設定されていますが、もし外部ファイルをロードするような場合は「+」ボタンをクリックし、その外部ファイルも忘れないように追加する必要があります。今回はそのままで結構です。

その他、「Window Style」は AIR アプリケーションのウィンドウ外観の設定、「Icon」は独自のアプリケーションアイコンを使用する場合に設定します。今回はこれもそのままの設定で結構です。

このダイアログで設定した内容は XML ファイル(ここでは「testAir-app.xml」)に書き出されます。変更を行う場合は、このダイアログ上で前回の設定内容から引き続き行いたいところですが、まだベータ版ということもありダイアログの設定内容は「OK」を押しても保存されません。そのため、パッケージ化を行う度に再度同じように設定を行う必要があります。特に「Included files」につきましてはパッケージ前に再確認することをお奨めします。

問題ないようであれば「Package」をクリックしてインストーラの作成を行います。「Destination folder」で指定されたフォルダの中にあるインストーラをダブルクリックし、アプリケーションとして実行できることを確認してください。インストーラは以下のようなアイコンで、拡張子は「.air」になります。

Air Installer アイコン

作成したアプリケーションのインストールが完了すると起動を確認されるので、そのまま起動してみてください。無事に Flash ムービーがデスクトップ上で再生できたかと思います。Flash 上でのムービープレビューと同じような見た目なので、あまり代わり映えがしないように感じるかもしれませんが、実際には AIR ランタイム環境上で再生されているのです。

すでにインストールされたアプリケーションを修正する場合は、再度パッケージ化してからインストールを行うと、古いバージョンを上書きするかどうか確認してきますので、「OK」を押してアプリケーションの更新を行ってください。ただし、FLA ファイル上で修正を行い、そのままいきなりパッケージ化しても SWF は新たに書き出されないため、古い SWF ファイルがそのままパッケージ化されてしまいます。パッケージ化の前には必ずパブリッシュやテストムービーを行うなどして SWF の書き出しを行うようにしましょう。

ここまでが AIR の第一歩です。それでは早速、いかにも Web アプリケーションっぽい AIR アプリケーション開発に挑戦してみましょう。

Web ブラウザの作成に挑戦

Adobe AIR には アップルの Web ブラウザである Safari に採用されているオープンソースの HTML/JavaScript レンダリングエンジンである WebKIT が内蔵されています。先ほどのアップデータをインストールすることで、Flash CS3 のオーサリング環境上から WebKIT API を使用したコンテンツが作成できるようになります。そこで簡単な Web ブラウザの作成に挑戦してみましょう。現時点では Flash CS3 向けのドキュメントやコードヒントなどは用意されていないのですが、Flex 用のドキュメントが充実した内容になっていますので、以下のリンクをブックマークして、いつでも参照できるようにしておくと良いでしょう。

リファレンスウィンドウ

Adobe AIR ActionScript 3.0 Language Reference for Flex.

まずは先ほどと同様、スタートアップスクリーンから新規に FLA ファイルを作成し、半角英数字のファイル名で保存してください。上記のリファレンス、flash.htmlパッケージの項を参照すると、HTMLControlクラスというものがあります。Adobe AIR の Web ブラウザ機能はこのクラスを使用します。サンプルコードを参考にして、メインタイムラインの第1フレームに以下のようなコードを記述します。

import flash.html.HTMLControl;
import flash.net.URLRequest;

//読み込む外部HTMLデータの設定
var urlReq:URLRequest = new URLRequest("http://www.adobe.com/jp/");

//HTMLデータの読み込みと表示設定
var html:HTMLControl = new HTMLControl();
html.width = stage.stageWidth;
html.height = stage.stageHeight;
html.load(urlReq);

//表示処理
this.addChild(html);

最初のimport文でHTMLControlクラスを使用できるようにし、その後はアドレスの取得と表示処理となります。ではムービープレビューを試してみましょう。驚くほど簡単に Web ブラウズ機能が実現しました。現在はこの HTML 表示内における Flash ムービーの動作はサポートされていないのですが、今後サポートされる予定です。

それではもう少しブラウザのウィンドウらしくするために、このHTMLControlを使って表示した HTML をスプライトに貼り付け、それをスクロールパネルコンポーネントの中に入れてみましょう。まず、ステージ上に「コンポーネント」パネルから「スクロールパネル」コンポーネントをドラッグして配置し、「プロパティ」ウィンドウでそのインスタンス名をscrollpane_spとします。

Flash CS3上での編集。ステージにコンポーネントをドラッグして名前をつける

ここで問題が発生です。どうもスクロールパネルコンポーネントはHTMLControlで設定した表示サイズをそのままでは認識できないようなのです。これの対処として、あらかじめ HTML と同じサイズでダミーの矩形オブジェクトをスプライトに配置し、そのスプライトをスクロールパネルコンポーネントの表示ソースとして設定してみました。具体的なコードは以下のようになります。

import flash.display.Sprite;
import fl.containers.ScrollPane;

//HTMLControlクラスの読み込み
import flash.html.HTMLControl;
import flash.net.URLRequest;

//読み込む外部HTMLデータの設定
var urlReq:URLRequest = new URLRequest("http://www.adobe.com/jp/");
var contentWidth:Number=900;
var contentHeight:Number=1248;

//HTMLControlの表示設定
var html:HTMLControl = new HTMLControl();
html.width = contentWidth;
html.height = contentHeight;
html.load(urlReq);

//スクリプトでスプライトを作成し、HTMLと同じサイズの矩形を描画
var webContent:Sprite= new Sprite;
webContent.graphics.beginFill(0xFFFFFF, 1);
webContent.graphics.drawRect(0, 0, contentWidth, contentHeight);
webContent.graphics.endFill();

//HTMLをスプライトに貼り付け
webContent.addChild(html);

//スクロールパネルコンポーネントの表示ソースに、作成したスプライトを割り当て
this.scrollpane_sp.source=webContent;

プレビューをお試し下さい。コンポーネントのお陰で随分とブラウザらしくなったのではないでしょうか。

コンポーネントの中にHTMLガ表示されている画像

では次に、ブラウザの「戻る」ボタンを作成してみましょう。ステージにback_btnというインスタンス名のボタンを配置して、そのボタンを押したときに履歴を進めるような場合は以下のようなコードになります。

//履歴を戻って表示
this.back_btn.addEventListener(MouseEvent.CLICK, hisBack);

function hisBack(event:MouseEvent):void {
	 html.historyBack();
}

HTMLControlには、上記のような表示処理や JavaScript の History 機能以外にもページをリロードさせたり PDF ファイルの読み込みを行うこともできます。詳細についてはリファレンスなどを参照しながら試してみてください。

ウィンドウの制御

せっかくのデスクトップアプリケーションですので、ここでウィンドウを透明にしてみましょう。「コマンド」メニューの「AIR - Application and Package Settings」をクリックした際に表示されるダイアログの項、「Window Style」はアプリケーションウィンドウの表示外観を設定するものです。初期値の「System Chrome」は OS 標準のウィンドウスタイルを使用しますが、この設定を「Custom Chrome」に変更することでウィンドウ枠を非表示にできます。

WindowStyleの選択

「opaque」はウィンドウ枠は表示されなくなるのですが、ステージの背景色が透明にならないので、ここでは「transparent」を選びます。

プレビューを行うと、OS 標準のウィンドウ機能が使えなくなるため、クローズボックスによる終了やウィンドウのドラッグといった一般的なウィンドウ操作が行えないことにお気づきかと思います。AIR にはウィンドウ処理の API が実装されていて、Flash CS3 のオーサリング環境からも制御できるようになっています。AIR のウィンドウ制御は主にflash.displayパッケージのNativeWindowクラス等を使用しますが、コードが煩雑になることもあり、ここでは SWF を表示した際に AIR が自動的に作成するstage.windowクラスを使用します。作成したアプリケーションからさらに別のウィンドウを開いたり、マルチウィンドウのアプリケーションを作成する場合などは、別途リファレンスのNativeWindowクラスの項などを参照してみてください。

ウィンドウをドラッグできるようにするためには、startMove()メソッドを使用します。ここでは、先ほど配置したコンポーネントの下にムービークリップを配置し、bgというインスタンス名をつけました。スクリプトによって、このbg上でマウスが押されるとウィンドウがドラッグされるように指定しています。同様に、close_btnというインスタンス名のボタンをステージ上に配置し、ボタンが押されたらstage.window.close()メソッドが発生してウィンドウが閉じるようにしています。具体的なコードは以下です。

//ステージ上の背景(bg)をクリックするとウィンドウを移動できるようにする
this.bg.addEventListener(MouseEvent.MOUSE_DOWN, windowMove);

function windowMove(event:MouseEvent):void {
     stage.window.startMove();
}
  
//close_btn ボタンをクリックしてウィンドウを閉じる
this.close_btn.addEventListener(MouseEvent.CLICK, closeApli);

function closeApli(event:MouseEvent):void {
     stage.window.close();
}
アプリケーションの最終的なイメージ

これらのことを踏まえて、最終的には右のようなアプリケーションが作成されるかと思います。今回作成したアプリケーションのソースファイルとインストーラをダウンロードできるようにしておきますので、興味のある方はそれぞれダウンロードして、いろいろと自分なりに調整してみてください。コード自体は大変シンプルなものですので、あとはこれを土台にみなさんが自身の手でデザインに注力したり、より機能を追加してもらえると幸いです。

AIR アプリケーション作成の第一歩を紹介しましたが、いかがでしたでしょうか。AIR での開発は従来の Flash をさらに超えた自由なアプローチが試せるので、開発を楽しみながらスキルがどんどん上達していきます。そこで、ぜひ11月1日より開催される Adobe MAX Japan 2007 にご参加ください。今回紹介したような Flash ユーザ向けAIR アプリケーション開発について、より踏み込んだ内容のセッションが予定されています。

C-1 11月1日(木) 13:00-14:00
  ActionScript 3.0 はじめの一歩
B-6 11月2日(金) 14:20-15:20
  僕らはこれを待っていた!Flash ユーザに捧げる AIR 開発手法

 

詳細につきましては Adobe MAX Japan 2007 Webサイトをご覧ください。