作成日

18 November 2009

1 はじめに

AIR 2.0 beta1では、多くの魅力的な新APIが追加されています。
新APIを応用して、今までにないAIRを作成しましたので、ご紹介したいと思います。

Comm On AIR 2.0 は、Stratusを利用して、動画、音声、画像、テキストを共有可能にしたコミュニケーションツールです。
新APIを応用して、今までにないAdobe AIRアプリケーションです。是非、Adobe AIR 2.0の可能性を体験して下さい。

1.1Stratus

Stratusは、Real-Time Media Flow Protocol (RTMFP)と呼ばれる新しいプロトコルが利用できます。 このプロトコルは、ピア同士を接続することができます。よって、P2Pが実現可能になります。

2 必要条件

2.1 動作環境

  • Adobe AIR 2.0 Runtime beta 1

2.2 開発環境

  • Flex Builder 3.0.2
  • Adobe AIR 2.0 SDK beta1

2.3 サンプルファイル

重要: このサンプルアプリケーションは、AIR 2 betaの機能を体験するために作成されています。お試しになる場合は、AIR 2 beta ランタイムを先にインストールする必要があります。なお、既にAIR 1.xのランタイムがOSにインストールされている場合は、上書きされてしまいますのでご注意ください。元に戻す場合は、AIR 2 beta ランタイムをアンインストールし、AIR 1.5.2 ランタイムをインストールします。詳細はリリースノート(英語) をご覧ください。

ネイティブインストーラー beta 2対応
アプリケーション(.exe)のダウンロード

ソース beta 2対応
ソースコード .zip)のダウンロード

機能制限版AIRアプリケーション
ダウンロード(.air)

2.4Stratus beta developer key

Stratusの公開サイトに行きます。
http://labs.adobe.com/technologies/stratus/

Stratusに接続するためのキーであるStratus beta developer keyを取得します。
尚、取得には、Adobe IDが必要になるので事前に取得しておきます。
https://www.adobe.com/cfusion/entitlement/index.cfm?e=stratus

3 Comm On AIR 2.0の使い方

3.1 インストール

Comm On AIR 2.0ネイティブインストーラーをダブルクリックしてインストールします。

3.2 起動

Comm On AIR 2.0が起動するとメイン画面が表示され、タスクトレイにアイコンが表示されます。

コミュニケーションを始めるために、ルームを作成するか、ルームに入るかボタンを押下して決定します。

3.3 ルーム作成

コミュニケーションを始めるためにルームを作成します。

参加者名には、ルーム内で表示されるユーザ名を入れます。
接続キーには、Stratus に接続するためのStratus beta developer keyを入れます。
そして、接続ボタンを押下しますと、Stratusと通信して、参加者IDを決定します。

参加者IDが、表示されたら通知開始を押下します。
そうするとLAN上に通知コードをUDPマルチキャスト送信します。
通知を停止する場合は、通知停止を押下します。
また、インターネットを超えて接続する場合は、通知コードを参加者にメールなどで教えます。

3.4 ルーム参加

コミュニケーションを始めるために既存のルームに参加します。

参加者名には、ルーム内で表示されるユーザ名を入れます。
通知コードが、既にある場合は、通知コードに入力します。
通知コードが、無い場合、LAN内でルーム作成者を見つけるために検索を押下します。
ルーム作成者が見つかった場合、参加者IDとオーナーIDが表示されます。

オーナーIDが決定したら、スタートを押下してルームに入ります。

3.5 ルームメイン

ルームでは、動画、音声、画像、テキストのコミュニケーションが行えます。

3.5.1 参加者カメラリスト

画面左端に縦一列に並ぶのが参加者のカメラ一覧です。一番上には、自身のカメラが表示されます。

3.5.2 お絵かき

白いキャンバスにお絵かきです。ペンは、色と透明度とサイズを変更できます。消しゴムもあります。

3.5.3 画像共有

お絵かきキャンバスの背景画像を共有できます。
画像選択から画像のタイプを選択して、画像を取り込みます。そして、送信を押下し参加者全員と画像を共有します。
共有できる画像は、デスクトップキャプチャ、アプリケーションキャプチャ、画像ファイルです。
画像選択のアプリケーションは、一秒後にキャプチャするので、一秒以内にキャプチャしたいアプリケーションをアクティブにします。

3.5.4 チャット

参加者全員とチャットすることが出来ます。

4 Comm On AIR 2.0の作り方

4.1 アプリケーション設計方針

アプリケーション設計方針として、yui-frameworksを使ったVHAを採用しました。
View:画面定義MXML
Helper:画面操作ロジッククラス
Action:インタラクションロジック

4.2 ライブラリ

RSLとして下記を使用してます。

  • flex-framework 3.4.0
      Flexコンポーネントのために利用するために
  • yui-frameworks 1.0.0 beta4
      yui-frameworksを利用するために
  • akabana_air_lib
      AKABANA用Airのライブラリ

4.3 外部実行ファイル

今回は、Adobe AIR2.0では、不可能なことをC#で作成したexeを使って実現しています。

4.3.1 screencapture.exe

スクリーンキャプチャーをするためにPrintScreenボタンをエミュレートしています。

使い方
screencapture.exe -fs -sd100 -ed1000
-fs:フルスクリーン、この指定がない場合は、アプリケーション単位です。
-sd:スクリーンショット前遅延(ミリ秒)
-ed:スクリーンショット後遅延(ミリ秒)

4.3.2 udpreceiver.exe

マルチキャストデータを受信して、標準出力に出力します。

使い方
udpreceiver.exe -a224.0.0.1 -p10000
-a:マルチキャストデータ送信元IP
-p:マルチキャストデータ送信ポート

4.4 ビルド

 

4.4.1 開発時

Flex Builder 3.0.2を使って、実装テストを行います。

4.4.2 リリース時

Antを使ってネイティブインストーラーを作成しています。

5 AIR 2.0 新API

今回このComm On AIR2.0で用いたAIR2.0の紹介です。

5.1 ネイティブプロセス

AIR2.0の新APIの中でもネイティブプロセスは、もっとも革新的です。
AIR2.0からネイティブプロセスを操作できます。

  • 起動
  • 停止

また、起動したネイティブプロセスと通信も可能です。

  • 標準出力
  • 標準入力
  • 標準エラー

今回は、スクリーンショットやUDPマルチキャスト受信のためにC#で作成したexeを呼び出します。

サンプルコード

var info:info = new NativeProcessStartupInfo(); var file:File = File.applicationDirectory.resolvePath("bin/screencapture.exe"); info.executable = file;

NativeProcessStartupInfoを作成し起動したexeを指定します。

var processArgs:Vector.<String> = new Vector.<String>(); processArgs[0] = "-fs"; processArgs[1] = "-sd 100"; processArgs[2] = "-ed 200"; info.arguments = processArgs;

exeの呼び出し引数をVector.<String>で作成し、NativeProcessStartupInfoに設定します。

process = new NativeProcess(); process.addEventListener(ProgressEvent.STANDARD_OUTPUT_DATA, onOutputData); process.addEventListener(ProgressEvent.STANDARD_ERROR_DATA, onErrorData); process.addEventListener(NativeProcessExitEvent.EXIT, onExit); process.addEventListener(IOErrorEvent.STANDARD_OUTPUT_IO_ERROR, onIOError); process.addEventListener(IOErrorEvent.STANDARD_ERROR_IO_ERROR, onIOError); process.start(info);

NativeProcessを生成して、各種イベントハンドラを設定し、NativeProcessStartupInfo を引数にして、NativeProcess .start関数に呼び出すことで、指定したexeを起動させます。

5.2 ネイティブインストーラー

ネイティブプロセスを使うためには、AIR2.0の新機能の一つであるネイティブインストーラーを作成する必要があります。作成には、下記のコマンドを実行する必要があります。

{AIR2.0 Install Dir}¥bin¥adt -package -storetype pkcs12 -keystore keystore-path -storepass keystore-pass -target native {プロジェクト名}.exe {プロジェクト名}-app.xml {プロジェクト名}.swf

Windowsのコマンドプロンプトで実行しますと、ネイティブインストーラーが作成されます。

また、必ず、下記のアプリケーション定義XMLに記述する必要があります。

<?xml version="1.0" encoding="utf-8" standalone="no"?> <application xmlns="http://ns.adobe.com/air/application/2.0beta"> … <supportedProfiles>extendedDesktop</supportedProfiles> … </application>

5.3 データーグラムソケット

新APIの中でもネットワーク関連において、データグラムソケットは、意外性があります。UDPマルチキャスト送信が可能です。なお、マルチキャストデータ受信には、C#の作成したexeで行います。
今回は、このマルチキャスト送信を使って、オーナーIDを参加者に通知しています。

サンプルコード

var datagramSocket:DatagramSocket = new DatagramSocket(); var data:ByteArray = new ByteArray(); data.writeUTFBytes("UDP MultiCast Data"); datagramSocket.send( data, 0, 0, “224.0.0.1”, 10000);

マルチキャストアドレス224.0.0.1の10000ポートでUDPデータ送信します。

6 まとめ

今回は、AIR2.0の新APIを使ってコミュニケーションツールを作成しました。
実装する上でネイティブプロセスは、今までのAIRに出来なかったことが実現できると確認しました。また、ネットワーク関連のAPIの強化は見逃せないポイントだと思います。さらに今回は、StratusというP2Pを実現するサービスも使って、AIRならではの新たなアプリケーションを作ることができました。
今後は、このアプリケーションをもっとブラッシュアップしていこうと考えています。