作成日
27 September 2010
・第1回 Adobe AIR 2をはじめよう
・第2回 サーバーソケット／ データグラムソケットなどのネットワーク系機能
・第3回 Safari 4.0.3 と同等の WebKit を搭載
・第4回 プリンタ情報の取得や印刷ダイアログの制御
・第5回 OSネイティブな機能との連携
・第6回 OSネイティブとの統合
・第7回 グローバルエラーハンドラー／IMEテキスト入力の機能強化
第1回目は「Adobe AIR 2をはじめよう」と題し、あらためてAdobe AIRと新機能の概要を説明するとともに、「開発環境の構築→アプリ作成の手順→配布」とAIRアプリケーションを作成する際の一連の流れについて解説します。
本記事のサンプル：AIR2master01sample.zip
Adobe AIRとは
AIRとは「Adobe Integrated Runtime」の略で、 日本語にすれば「アドビ 統合実行環境」となります。Adobe AIRは、ブラウザ内での動作に限定されていたSWFファイルをデスクトップ環境でも動作させる際に必要となる様々な機能を提供し、クロスプラットフォーム化を実現するための実行環境です。
Adobe AIRの最大の利点の1つは、作成したAIRアプリケーションが、Adobe AIRがサポートするOSであれば、どのOSであっても同じように動作するという点です。 例えば、「ウィンドウを開く」という1つの操作にしても、ネイティブアプリケーションを開発する場合は、WindowsとMac OSでは必要な手順や作法が異なります。しかし、AIRアプリケーションの場合は、同一のAPIを通じてOSネイティブなウィンドウ操作を実現することができます。
また、Adobe AIRを通じて、SWF単体では不可能なことを実行することができます。以下は、代表的な例です。
- Adobe AIRに統合されたSQLiteデータベースエンジンを用いれば、ファイルシステム上のデータベースの作成と操作が可能。
- Adobe AIRに統合されたWebKitを用いれば、HTML5やCSS3など最新のWeb標準技術を利用可能。
2008年2月にAdobe AIRの最初のバージョンである1.0がリリースされて以来、デスクトップウィジェットやデスクトップRIAなど、デスクトップに彩りを与える活用例は日々増え続けています。下記サイトでは様々な活用例を見ることができます。
Adobe AIR 2の新機能
Adobe AIR 2（本稿執筆時の最新版は 2.0.3）の新機能のうち、代表的なものを以下に挙げておきます。詳しくは、「Adobe AIR 開発者向けリリースノート」や「Adobe AIR Release Notes」をご覧ください。
- 主要コンポーネントのアップグレード
Flash Player 10.1（10.1.53.64）、SQLite 3.6.16、WebKitはSafari 4.0.3と同等のバージョンにアップグレードしています。 - パフォーマンスの向上
高速になったFlash Player 10.1の恩恵により、パフォーマンスが向上しています。 - Linuxのサポート
AIRアプリケーションがLinuxでも動作可能となりました。 - ネイティブプロセス API
標準入力、標準出力、および標準エラーを通じ、ネイティブプロセス（.exeなど）とのやりとりが可能です。 - ネイティブインストーラの作成
.airだけではなく、.exeや.dmgなどのネイティブインストーラを作成可能となりました（なお、Windows環境で.dmgを作成したり、Mac OS環境で.exeを作成することはできません）。ネイティブプロセスAPIを使用する場合は、ネイティブインストーラでの配布が必須です。 - UDP ネットワーキングのサポート
Adobe AIR 1.xではTCPソケットのみでしたが、UDPでも作成可能となりました。 - 大容量ストレージデバイスの検出
USBストレージなどのデバイス検出が可能です。 - プリンタ関連機能の強化
プリンタ関連APIが増え、プリントダイアログを表示せずにプリントすることも可能です。 - グローバルエラーハンドラーのサポート
Flash Player 10.1の新機能により、トップレベルでの例外を捕捉可能となりました。 - HTTP圧縮応答のサポート（Mac OS X／Linux：2.02、Windows：2.0.3）
サーバサイドでGZIP圧縮されたストリームを、AIRクライアントで受け付けることが可能です。これにより、通信量の軽減がより容易に実現できます。 - Androidサポート
Android端末向けにAIRアプリケーションを開発／配布が可能となります。
開発環境の構築
それでは、Adobe AIR 2向けのアプリケーション開発を始めるのに必要な環境を整えて行きます。AIR2アプリケーションを開発するには、下記のいずれかが必要です。
- Adobe Flash Builder 4
- Adobe Flash Professional CS5
- Adobe Dreamweaver CS 5＋Adobe AIR Extension for Dreamweaver CS4／CS5
本記事では、Flash Builder 4とFlash Professional CS5を取り上げて詳しく解説していきます。
※単体で配布されているAIR 2 SDKやFlex SDK 4.1以降に同梱されているAIR SDKを用いることで、コマンドラインツールによる開発が可能ですが、やや難易度が高くなるため今回は省略します。
Flash Builder 4のセットアップ：バージョン4.0.1以降＋Flex SDK 4.1が必要
Flash Builder 4でAIR 2アプリケーションを開発する場合、バージョン4.0.1以降が必要です。また、Flex SDK 4.1と組み合わせて使用します（Flash Builder 4.0.1のインストールまたはアップデート時に、Flex SDK 4.1も同時にインストールされます）。アプリケーション開発にはFlex Frameworkを利用することが多いですが、Flex Frameworkを使用せずにActionScript 3.0のみで開発することも可能です。
Flash Builder 4を持っていない方は、無償の体験版を利用できます。Flash Builderにはスタンドアローン版とEclipseプラグイン版があり、ここではスタンドアローン版の手順を解説します。
- 「Flash Builder 4 Premium Edition無償体験版ダウンロード」からスタンドアローン版のインストーラをダウンロードします。
- インストーラを起動します。オプションを選択するステップがありますが、デフォルトのままで特に問題ありません。
- インストールが完了したらFlash Builder 4を起動し、メニューから［ヘルプ］→［Flash Builderの更新を検索］を選択してアップデートを行います（バージョン4.0.1以降に）。
- アップデート後、Flex SDKの設定を確認します。メニューから［ウィンドウ］→［設定］を選択します。
- ［Flash Builder］→［インストールされているFlex SDK］を開き、［Flex 4.1］がチェックされていることを確認します。もし「Flex 4.1」がなければ、ダイアログ内の［Flex SDKの他のバージョンの検索とダウンロード］リンクをクリックしてFlex SDK 4.1を入手し、同じように確認作業を行ってください。
以上で、Flex Builder 4でAIR 2アプリケーションを開発するための準備が完了しました。
Flash Professional CS5のセットアップ：アップデート11.0.1以降が必要
Flash Professional CS5でAIR 2アプリケーションを開発する場合、Adobe AIR 2のサポート機能はアップデート11.0.1で追加されたため、アップデートは必須です。Flex SDKが提供する豊富なコンポーネント類などを使う必要がなければ、すべてFlashで作成した方が、よりプリミティブでファイルサイズがコンパクトなAIRアプリケーションを作成することが可能です。
Flash Professional CS5を持っていない方は、無償の体験版を利用できます。以下、インストールの手順を解説します。
- 「Flash Professional CS5無償体験版ダウンロード」からインストーラをダウンロードします。
- インストーラを起動します。オプションを選択するステップがありますが、デフォルトのままで特に問題ありません。
- インストールが完了したらFlash Professional CS5を起動し、メニューから［ヘルプ］→［アップデート］を選択します。
- 詳細を確認し、「アップデート」ボタンをクリックします。
以上で、Flash Professional CS5でAIR 2アプリケーションを開発するための準備が完了しました。
Adobe AIR 2のインストール
Flex Builder 4、Flash Professional CS5、どちらのツールを使う場合でも、作成したAIR 2アプリケーションの動作確認を行うにはAdobe AIR 2ランタイムが必要です。下記サイトから最新版のAdobe AIR 2 ランタイムをインストールします。Flex Builder 4と同時にインストールされるAdobe AIRランタイムのバージョンは1.5.3と古いため、必ずアップデートするようにしてください。
http://get.adobe.com/jp/air/
Adobe AIR 2アプリケーション作成の手順
開発環境が整ったところで、実際にAIR 2アプリケーションを作成してみましょう。作成するのは、現在時刻を表示するだけのシンプルな時計アプリです。ここでは手順を理解してもらうことを目的としているため、コードの解説は省きます。
Flash Builder 4で作成する
ここでは、Flex Frameworkを使用せずにActionScript 3.0で開発する方法を解説します。
- メニューから［ファイル］→［新規］→［Flex プロジェクト］を選択します。
- ［新規Flexプロジェクト］ダイアログが表示されるので、プロジェクト名に「clock」を入力し、アプリケーションの種類は［デスクトップ］を選択して［終了］ボタンをクリックします。すると、プロジェクトに必要なファイルが生成されます。
- ステップ2で、プロジェクト名と同一のMXMLファイルが生成されます。この「clock.mxml」が、Flexアプリケーションの実装ファイルです。以下のように記述します。
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="200"
height="100"
showStatusBar="false"
applicationComplete="applicationCompleteHandler()"
>
<fx:Declarations>
<!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
private function applicationCompleteHandler():void {
var clock:SimpleClock = new SimpleClock();
con.addChild(clock);
clock.start();
}
]]>
</fx:Script>
<s:SpriteVisualElement id="con"/>
</s:WindowedApplication>
※今回のサンプルでは、"時計"のコアとなる部分をFlex Frameworkに依存しない素のActionScript 3.0で記述し、Flexアプリケーションと後述のFlashアプリケーションともに、トップレベルでコア部分を"乗せる"構造になっています。
- 次に、clock.mxmlと同一のパッケージ階層に「SimpleClock.as」を作成します。これは時計の処理を実装するクラスになります。パッケージエクスプローラの（default package）を右クリックし、［新規］→［ActionScript クラス］を選択します。［新規ActionScriptクラス］ダイアログが表示されるので、名前に「SimpleClock」、スーパークラスに「Sprite」と入力します。
- 作成した「SimpleClock.as」をダブルクリックして開き、以下のように記述します。
package {
import flash.display.Sprite;
import flash.events.Event;
import flash.events.TimerEvent;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFieldType;
import flash.text.TextFormat;
import flash.utils.Timer;
/**
* 単純な時計クラス
*/
public class SimpleClock extends Sprite {
/** 時刻を表示するテキストフィールド */
private var timeText:TextField;
/** タイマーインスタンス */
private var timer:Timer;
/**
* コンストラクタ
*/
public function SimpleClock() {
// 時刻を表示するテキストフィールドの生成・設定
timeText = new TextField();
timeText.type = TextFieldType.DYNAMIC;
timeText.autoSize = TextFieldAutoSize.LEFT;
// 時刻を表示するテキストを中央揃えにするために、"stage"プロパティを参照する必要があるが、
// コンストラクタ内では、まだ"stage"プロパティに参照できないため、
// ADDED_TO_STAGEイベントが発生するのを待つ
timeText.addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
// タイマーの生成
timer = new Timer(1000); // 1秒おきにハンドラが呼ばれるようにする
timer.addEventListener(TimerEvent.TIMER, timerHandler);
addChild(timeText);
// 今の時刻を初期表示する
timeText.text = formatDate(new Date());
// 文字のスタイルを設定
var textFormat:TextFormat = new TextFormat();
textFormat.color = 0x000000;
textFormat.size = 18;
timeText.setTextFormat(textFormat);
timeText.defaultTextFormat = textFormat;
}
/**
* 時刻を表示するテキストフィールドがステージに追加され(表示された)時に呼ばれるハンドラ
*/
private function addedToStageHandler(event:Event):void {
// イベントの監視を解除
removeEventListener(event.type, arguments.callee);
// 時刻をステージの中央に表示する
timeText.x = stage.stageWidth / 2 - timeText.textWidth / 2;
timeText.y = stage.stageHeight / 2 - timeText.textHeight / 2;
}
/**
* Timerインスタンスで指定した、規定の間隔が経過した時に呼ばれるハンドラ
*/
private function timerHandler(event:TimerEvent):void {
timeText.text = formatDate(new Date());
}
/**
* 時計を開始する
*/
public function start():void {
timer.start();
}
/**
* 時刻を整形する
*/
private function formatDate(d:Date):String {
var time:String = d.fullYear + "/";
time += leftpadZero(d.month + 1) + "/";
time += leftpadZero(d.date) + " ";
time += leftpadZero(d.hours) + ":";
time += leftpadZero(d.minutes) + ":";
time += leftpadZero(d.seconds);
return time;
}
/**
* 10未満の数に対し左に"0"を追加して、文字列として返す
*/
private function leftpadZero(n:int):String {
var s:String = "";
if (n < 10) {
s = "0" + n;
} else {
s = n.toString();
}
return s;
}
}
}
- clock.mxmlは、以下のように記述します。widthとheightの指定、ステータスバーの非表示、アプリケーション構築完了時のイベントハンドラなどを定義しています。
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="200"
height="100"
showStatusBar="false"
applicationComplete="applicationCompleteHandler()"
>
<fx:Declarations>
<!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
private function applicationCompleteHandler():void {
var clock:SimpleClock = new SimpleClock();
con.addChild(clock);
clock.start();
}
]]>
</fx:Script>
<s:SpriteVisualElement id="con"/>
</s:WindowedApplication>
- 動作確認をしてみましょう。clock.mxmlを選択し、デバッグボタンをクリックします。
下図のような画面が表示されたら、無事に動作しています！
- AIR 2アプリケーションとしてパブリッシュしましょう。メニューから［プロジェクト］→［リリースビルドの書き出し］を選択します。［リリースビルドの書き出し］ダイアログが表示されますので、適切に設定してください。［書き出し］欄で［ネイティブインストーラーに書き出し］を選択すると、OSネイティブな形式で書き出されます。これはAdobe AIR 2の新機能です。デフォルトのまま（［AIRファイルに書き出し］を選択した状態）だと、OSに依存しないAIRファイルとして生成されます。
- 次に電子署名を設定します。電子署名とは、Adobe AIRアプリケーションの作成者を識別するためのもので、正式な電子署名を得るには、外部の証明書発行者から購入する必要があります。正式に配布するAdobe AIRアプリケーションには正式な電子署名が必要となりますが、開発時には仮の電子署名ファイル「自己署名入りデジタル証明書」で十分です。
取得した電子署名ファイルがあれば、それを指定してください。なければ、開発時用として仮の電子署名ファイル「自己署名入りデジタル証明書」を作成します。［証明書］欄の右側にある［作成］ボタンをクリックします。
- 入力欄すべてに「test」と入力し、［OK］ボタンをクリックします。
- ステップ9 のダイアログに戻るので、［このセッション中はパスワードを記憶］にチェックを入れ、「次へ」ボタンをクリックします。これで作業完了です。AIRファイルまたはネイティブインストーラが生成されます。これらは、パッケージエクスプローラから確認することができます。
Flash Professional CS5で作成する
続いて、Flash Professional CS5でAIR 2アプリケーションを作成する手順を紹介します。作成するのはFlash Builder 4の場合と同じ時計アプリです。時計本体を実装するクラスも先ほどと同様のものを用います。クラスのインスタンス化と時計の起動を行う処理の書き方が多少違うだけで、他はほぼ同じです。
- メニューから［ファイル］→［新規］を選択します。［新規ドキュメント］ダイアログが表示されるので、「Adobe AIR 2」を選択し、［OK］ボタンをクリックします。
- メニューから［ファイル］→［名前を付けて保存］を選択し、ファイル名を「clock.fla」とします。また、メニューから［修正］→［ドキュメント］を選択し、幅を200px、高さを100pxに設定します。
- タイムラインのタブを選択し、1フレーム目に以下のコードを記述します。
この処理では、時計クラスをインスタンス化し、直後に時計を開始させています。
import flash.display.DisplayObject;
var simpleClock = new SimpleClock();
var addedChild:DisplayObject = addChild(simpleClock);
if (addedChild != null) {
trace("SimpleClockがステージに追加されました");
}
simpleClock.start();
stop();
- ステップ2の保存先ディレクトリに、「SimpleClock.as」を作成します。コードはFlash Builder 4の場合に記述した内容と同じです。
- メニューから［ファイル］→［パブリッシュ設定］を選択し、オプションを適切に設定します。
- プレビューを行います。以下のような画面が表示されたら正常に動作しています。
- AIR 2アプリとしてパブリッシュします。［アプリケーションとインストーラーの設定］ダイアログの［一般］タブの「Windowsインストーラ（.exe）」にチェックを入れると、EXE形式のネイティブインストーラが生成されます。これはAdobe AIR 2での新機能です。チェックを入れなければ、AIRファイル（.air）が生成されます。
メニューから［ファイル］→［パブリッシュ］を選択して下さい。ダイアログが表示されるので、［署名］タブで電子署名を指定します。電子署名とは、Adobe AIRアプリケーションの作成者を識別するためのもので、正式な電子署名を得るには、外部の証明書発行者から購入する必要があります。正式に配布するAdobe AIRアプリケーションには正式な電子署名が必要となりますが、開発時には仮の電子署名ファイル「自己署名入りデジタル証明書」で十分です。
取得した電子署名ファイルがあれば、それを指定してください。なければ、開発時用として仮の電子署名ファイル「自己署名入りデジタル証明書」を作成します。［証明書］欄の右側にある［作成］ボタンをクリックします。
- すべての欄に「test」と入力し、［OK］ボタンをクリックします。
- ［署名］タブに戻るので、［パスワード］欄に「test」と入力し、［パブリッシュ］ボタンをクリックします。
- 以上で完了です。「clock.air」が生成されているので、ダブルクリックして実行してみましょう。
AIR 2アプリケーションの配布方法
基本的には、作成したAIR 2アプリケーションをWebサーバ上に配置するだけです。Adobe AIR 2ランタイムがユーザのPCにインストールされていれば、ブラウザでサーバ上のAIRファイルにアクセスした際、自動的にAIR 2アプリケーションとして認識され、ファイルを保存するかインストールするかを選択するダイアログが表示されます。
もし、AIRファイルをダウンロードする際に上記のダイアログが表示されない場合、Webサーバ側でAIRファイルが別の形式に誤認識されている可能性があります。その場合には、拡張子が「.air」のファイルの種別をうまく判別させるために、「MIMEタイプ」の設定を追加して下さい。
Apache HTTPD Server:
httpd.conf 又は .htaccessに以下を追加
<code>
AddType application/vnd.adobe.air-application-installer-package+zip .air
</code>
Lighttpd:
<code>
mimetype.assign = (
".air" => "application/vnd.adobe.air-application-installer-package+zip"
)
</code>
今後の予定
Flash Builder 4.0.1やFlash Professional CS5を使用した、はじめてのAIR 2アプリケーション作成手順をステップバイステップで紹介してきました。今後の連載では、下記について取り上げる予定です。お楽しみに!
- 印刷
- デバイス連携（USB、マイク）
- ネットワーク（サーバソケット、UDP、セキュアソケット）
- ネイティブ連携（D&Dの拡張、ファイルをデフォルトアプリで開く）
- ネイティブ統合（ネイティブインストーラー、ネイティブプロセス）
- Webkit（HTML5、CSS3、JavaScript強化）
- グローバルエラーハンドラ、IME強化など
- ジェスチャー、ウィンドーサイズの拡大など
AIRアプリケーションの雛形を生成できる「Adobe AIR Launchpad」
先日、Adobe Labsにて「Adobe AIR Launchpad」がリリースされました。対象は Adobe AIR 2／Flex SDK 4.0以降（4.1推奨）です。
ウィザード形式のユーティリティで、使い方は各ステップごとに項目を選択していくだけと簡単です。AIRアプリケーションの一般的な設定をしていくことで、最後に雛形となるソースコードを生成してくれます。生成されたファイルはFlash Builder 4のプロジェクト形式となっており、Flash Builder 4に直接インポート／ビルドが可能です。
Adobe AIR 2の新機能を使ったサンプルコードを生成する機能もあるので（ウィザードの3ステップ目の「Sample」）、リファレンス的に使うこともできます。「とりあえず動かしてみる」ことができるので、初めて使う新機能を把握するのに便利でしょう。また、特徴的な機能として、AIRアプリケーションの「インストールバッジ」生成機能があります。まだベータ版ではありますが、AIRアプリケーション開発を手助けする優れたツールなので、ぜひ使ってみて下さい。