Adobe AIR 2アプリケーション作成の手順
開発環境が整ったところで、実際にAIR 2アプリケーションを作成してみましょう。作成するのは、現在時刻を表示するだけのシンプルな時計アプリです。ここでは手順を理解してもらうことを目的としているため、コードの解説は省きます。
Flash Builder 4で作成する
ここでは、Flex Frameworkを使用せずにActionScript 3.0で開発する方法を解説します。
- メニューから［ファイル］→［新規］→［Flex プロジェクト］を選択します。
- ［新規Flexプロジェクト］ダイアログが表示されるので、プロジェクト名に「clock」を入力し、アプリケーションの種類は［デスクトップ］を選択して［終了］ボタンをクリックします。すると、プロジェクトに必要なファイルが生成されます。
- ステップ2で、プロジェクト名と同一のMXMLファイルが生成されます。この「clock.mxml」が、Flexアプリケーションの実装ファイルです。以下のように記述します。
- 次に、clock.mxmlと同一のパッケージ階層に「SimpleClock.as」を作成します。これは時計の処理を実装するクラスになります。パッケージエクスプローラの（default package）を右クリックし、［新規］→［ActionScript クラス］を選択します。［新規ActionScriptクラス］ダイアログが表示されるので、名前に「SimpleClock」、スーパークラスに「Sprite」と入力します。
- 作成した「SimpleClock.as」をダブルクリックして開き、以下のように記述します。
- clock.mxmlは、以下のように記述します。widthとheightの指定、ステータスバーの非表示、アプリケーション構築完了時のイベントハンドラなどを定義しています。
- 動作確認をしてみましょう。clock.mxmlを選択し、デバッグボタンをクリックします。
- AIR 2アプリケーションとしてパブリッシュしましょう。メニューから［プロジェクト］→［リリースビルドの書き出し］を選択します。［リリースビルドの書き出し］ダイアログが表示されますので、適切に設定してください。［書き出し］欄で［ネイティブインストーラーに書き出し］を選択すると、OSネイティブな形式で書き出されます。これはAdobe AIR 2の新機能です。デフォルトのまま（［AIRファイルに書き出し］を選択した状態）だと、OSに依存しないAIRファイルとして生成されます。
- 次に電子署名を設定します。電子署名とは、Adobe AIRアプリケーションの作成者を識別するためのもので、正式な電子署名を得るには、外部の証明書発行者から購入する必要があります。正式に配布するAdobe AIRアプリケーションには正式な電子署名が必要となりますが、開発時には仮の電子署名ファイル「自己署名入りデジタル証明書」で十分です。
- 入力欄すべてに「test」と入力し、［OK］ボタンをクリックします。
- ステップ9のダイアログに戻るので、［このセッション中はパスワードを記憶］にチェックを入れ、「次へ」ボタンをクリックします。これで作業完了です。AIRファイルまたはネイティブインストーラが生成されます。これらは、パッケージエクスプローラから確認することができます。
<?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アプリケーションともに、トップレベルでコア部分を"乗せる"構造になっています。
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;
}
}
}
<?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>
下図のような画面が表示されたら、無事に動作しています！
取得した電子署名ファイルがあれば、それを指定してください。なければ、開発時用として仮の電子署名ファイル「自己署名入りデジタル証明書」を作成します。［証明書］欄の右側にある［作成］ボタンをクリックします。
