AIR

2010年06月30日

FxUG全国ツアーの発表内容詳解

 FxUGの全国ツアーは7月まで続くのだが、自分の登壇は6月19日(北陸)、26日(広島)だったので一応の終わり。(沖縄とか興味あるけどさすがに予算が…。大阪はふらふらっと行くかもしれない)

 北陸でも広島でもAIR2.0のセッションを担当したが、北陸三兄弟で各パートを担当したので"北陸では説明できたこと"、"広島では言えたこと"があり十分に伝えられていない部分があったと思う。

 というわけで、北陸、広島の総まとめ的な記事を書いておく。
 スライドは以下、北陸版よりAdobe HTTP Dynamic Streamingの紹介が増えている。
 
Adobe AIR Sample by ActionScript3_hiroshima




1.こまんどぷろんぷと



screen


 Windows付属のコマンドプロンプトはコピペし辛いよね。

 というちょっとした不便から作ってみたアプリケーション。
 利用しているAIR2.0のAPIはNativeProcessクラス。

 ただしAIR2.0でNativeProcessを使う場合はWindowsならexeにMacならdmgなどにパッケージしなければならず、いろいろなOSで動くというAIRの利点の一つを犠牲にしなければならないケースが多くなりそうなのでよく考えて利用しなければいけない。

 NativeProcessを利用する場合に使用するクラスは主にNativeProcessクラスと、NativeProcessStartupInfo

 NativeProcess.isSupported

 はNativeProcessが利用可能化の判定に用いることができる。
 .airファイルから実行した場合、設定ファイルにextendedDesktopがない場合などなどにこの値がfalseになる。

 NativeProcessのstart()メソッドにNativeProcessStartupInfoを渡すことで任意の実行プログラムを走らせることができる。

 NativeProcessStartupInfo

 NativeProcessの実行ファイル、コマンド引数などを設定できるクラスだ。

 最小限の実行コードは以下のようになる。

var info:NativeProcessStartupInfo = new NativeProcessStartupInfo();

var file:File = new File("C:/Windows/System32/PING.EXE");
var args:Vector.<String> = new Vector.<String>();

info.arguments = args;
info.executable = file;

var process:NativeProcess = new NativeProcess();
process.start(info);


 NativeProcessExitEvent.EXIT

 実行終了時に発行されるイベント。
 終了するまで他の処理を実行させない等に利用。

 ProgressEvent.STANDARD_OUTPUT_DATA

 実行したNativeProcessからの標準出力を得るイベント。
 上記画像のPingの結果などはここで取得している。

 ネイティブインストーラーでパッケージ化

 勉強会ではさらっと述べましたが、AIRアプリでNativeProcessを実行可能にするにはパッケージ化と、xml設定ファイルに設定追加が必要です。

 (参考)パッケージ化について

 設定ファイル({アプリ名}-app.xmlというプロジェクト作成時に生成される)への追記は以下、
 
<supportedProfiles>extendedDesktop</supportedProfiles>



2.えあーさーばー



screen002


 Adobe AIRで動作するWebサーバー(もどき)。

 AIR2.0からソケット待ち受け可能になり、TCPプロトコルでの通信も可能なためできるようになったアプリだ。

 AIR(サーバー)側で待ち受けするにはServerSocketクラスを利用するだけで良い。クライアント側はブラウザがやってくれるので実装の必要はない。

 サーバーとして待ち受けするには以下の数行で良い、

var socket:ServerSocket = new ServerSocket();
socket.bind(1988, "127.0.0.1"); // ローカルホストの1988ポートで待ち受ける場合
socket.listen(); // 待ち受け開始Timerのstart()と一緒でよく忘れる

socket.addEventListener(ServerSocketConnectEvent.CONNECT, this.connectEventHandler);


 サーバーからhttp://localhost:1988にアクセスすることでAIR側のServerSocketConnectEvent.CONNECTが発生する。

 ServerSocketConnectEvent.CONNECTで渡されるイベントクラスのsocketプロパティでクライアントの接続を表すSocketクラスを操作できる

private function connectEventHandler(event:ServerSocketConnectEvent):void
{
event.socket.addEventListener(ProgressEvent.SOCKET_DATA, this.socketDataEventHandler);
}


 複数のクライアントを処理したり、任意のタイミングで接続クライアントへの通信を行いたい場合はevent.socketを変数に格納しておくと良い。
 今回はその必要がないので、ProgressEvent.SOCKET_DATA(クライアントからデータが送られてきた際に発生するイベントハンドドラー)をセットして終了。

 データ受信時のコードは以下、

private function socketDataEventHandler(event:ProgressEvent):void
{
var client_socket:Socket = event.target as Socket;

this.log_text.text += client_socket.readUTFBytes(this._client_socket.bytesAvailable); // クライアントからの情報をテキストエリアに表示する


var head:String = "HTTP/1.0 200 OK\n" +
"Server:AdobeAIR\n" +
"Content-Type:text/html\n";
var ret:String = "\r\n";
var body:String = "<h1>I'm AIR Server!!</h1>";

client_socket.writeUTFBytes(head);
client_socket.writeUTFBytes(ret);
client_socket.writeUTFBytes(body);
client_socket.flush();

client_socket.close();
}


 クライアントソケットの操作の参考になれば光栄です。
 最初に(もどき)と書いたのは、このアプリがどんなURLにアクセスしようが静的にデータを返すだけだからです。

sceen003


3.AIR meets Silverlight



 実はここまで話すとこのサンプルの説明はほぼ終わっていて、NativeProcessクラスでOutOfBrowserとしてインストールしたSilverlightアプリを起動、ServerSocketでソケット接続して通信するというのがその仕組みです。

 Silverlight側のコードは後程紹介予定。


4.Adobe HTTP Dynamic Streaming



 勉強会では簡単な紹介だけですませましたが、詳細は自分のブログの記事を読んでいただければと思います。

 Adobe HTTP Dynamic Streamingを使ってみる
 Adobe HTTP Dynamic Streamingを使ってみる(その2):Linux編

 

全国ツアーはまだまだ続くよ



 FxUG全国ツアーは7月末まで続きます。
 技術的な発見と、優れた(変態?)技術者との出会いがあるFxUG全国ツアーにぜひご参加ください!!



(追記)スライドのエフェクトについてTwitter上で質問がいくつかありましたがPowerPoint2010でデフォルトで使えるものです。

2010年01月21日

Web Designingにちょっとだけ載りました

 こんにちは今だ正月気分のcoelacanthです。
 ブログのタイトルもまどろんだ感じなので調度良い心境…と言っているわけにもいかないのでそろそろ今年もペースを上げて行きたいと思います。

 新年一発目の大きな話題として、Web Designing 2010年 02月号にほんのちょっとですが掲載していただきました。

 1ページの半分にも満たない記事ですが、自分にとってははじめての雑誌掲載なので非常に嬉しいです。
 
 北陸AIR三兄弟の名前で掲載いただいたので、ちゃっかり雑誌も人数分頂いちゃいました。

 昨年、北陸エンジニアグループの立ち上げや、その他色々な勉強会、カンファレンスに参加して色々と新しい出会い、経験をすることができたのですが、今回の縁もその中の「Adobe AIR Day」登壇により生まれたものでした。

 AIR Dayの裏話といいますか、一般に公開されたAIR Dayの前にプレスリリースという形で記者や雑誌社の方とお話する機会を得ることができ、その出会いが今回の掲載への橋渡しになりました。

 この場をかりて、このような場を作ってくださいましたAdobe轟さんには大きな感謝を申し上げます。

 そして北陸三兄弟の次男、三男(自分が長男なのは一番歳を取っているからにすぎません)、毎日コミュニケーションズの担当様、そして一緒に盛り上げてくれたFlexユーザーグループの仲間、最後に自分のやる気の糧である北陸のエンジニアの皆様に感謝しながら今年も全力でエンジニアであることを楽しんで行きたいと思います。

 最後に、こんな動きもあって凄い楽しみです。
 http://twitter.com/cmrr_xxx/status/8015216012



2008年12月01日

AIR:チャットアプリβ版公開

 久しぶりにチャットアプリ修正。
 当初予定していたログ機能と、ファイル転送機能も実装したので、後はバグフィックスとユーザビリティ向上をチョコチョコと進めて行く予定。

 次はFxUG@北陸勉強会のネタ用意予定。

 iPhoneとこれで手一杯だろうなぁ。Ruby触れない。

 チャットアプリは1対1のチャットで同じログインIDでログインすることでチャットが成立する仕組みです。

 AIR版インストールが不安な場合はWeb版で動作を見てみればよいかなと思います。

 ちなみにWeb版はログ保存機能とファイル送信機能はありません。

 AIR版はこちらからDLできます。

 ソースコードは人様に見せれるようにしてから公開予定。

2008年11月26日

AIR1.5デビュー

 FlexBuilder plugin 3.0.2が公開され、ようやくEclipse3.4でFlexBuilderが利用できるようになりました。

 ということで、早速AIRファイルをコンパイル・・・。
 エラー。

 エラーメッセージを見ると、AIRのバージョンが1.5なのが問題らしい。
 修正は簡単で-app.xmlファイルの

 application xmlns="http://ns.adobe.com/air/application/1.1"

 を

 application xmlns="http://ns.adobe.com/air/application/1.5"

 に書き換えるだけ。
 というわけで初AIR1.5デビューでした。

2008年11月03日

TouchlessからAIRに座標データ送信成功

 Touchlessで取得したマーカー座標をAIRに送信できるようになりました。

 これでWebカメラをデバイスにして、AIRを操作するアプリが作れそうです。

 まだ何を作るか決めてないんですけどw

 ソケット通信とかC#とか今回は色々新しいことが学べて面白いです。

 サンプルコードを見る

2008年11月02日

AIR+デスクトップアプリのsocket通信サンプル

 FlashでTouchlessを利用するために、C#アプリとswfまたはAIR間の通信が必要になったので、ソケット通信でデータをやり取りするアプリケーションのサンプルを公開してみました。

 ちょうどWEB+DB PRESS Vol.47でswfでのセキュリティ問題に言及していたので、第一歩は実現しやすいAIRで実装。

 Touchlessを使う場合に、Flash側でカメラデバイスを利用可能か確かめてみたけど、結論としては、

 カメラが2個必要・・・

 これはリアルじゃないよね(そんなサービスを開発したことはあるけどw)。

 というわけで、AIR側はカメラを使わないアプリを考えよう。

 サンプルコードをみてみる

2008年11月01日

メモ:AIRサイト

【Mashup Awards 4 で発見したAIRアプリケーションの最前線】
http://www.adobe.com/jp/newsletters/edge/october2008/articles/article4/index.html

2008年10月19日

Red5:AIR版チャットアプリ公開 (微アップデート)

 Red5+AIRのチャットアプリを微妙に修正しました。

 修正点は音声の利用可能と、
 その他操作性部分の修正です。

 一応今回からバージョン0.8と開発バージョンを付与。

 今後の予定としては現状の動作で、Web版の公開。
 その後にAIR独自の機能を追加(ようやくAIRでやりたかったことに手が届く!!)

 ダウンロードは以下のページよりお願いします。

 ダウンロードページに行く。

2008年10月17日

AIRでSQLite接続を試してみたメモ001

 会社の後輩がAIRでデータベース操作する処理で、はたから見ていても楽しいぐらいエラーを出していたのでサンプルになりそうなソースを書いてみた。その1、接続編。

 まずDBへのアクセスはDBコントローラーを通してしか操作できないようにして、排他処理等が必要になったときに行いやすいように設計しておく。

package As.Controller
{
import As.Model.Database.Hoge1;
import As.Model.Database.Hoge2;

import flash.data.SQLConnection;
import flash.data.SQLMode;
import flash.events.SQLErrorEvent;
import flash.events.SQLEvent;
import flash.filesystem.File;

public class DatabaseController {
private var _sql_connection:SQLConnection;
private var _db_file:File;

private var _hoge1_table:Hoge1;
private var _hoge2_table:Hoge2;

private var _is_db_inited:Boolean;

public function DatabaseController() {
this._is_db_inited = true;
this._db_file = null;

this._favorite_table = null;
this._option_table = null;
}

public function init():void {
trace(File.applicationDirectory.nativePath);
trace(File.applicationStorageDirectory.nativePath);
trace(File.desktopDirectory.nativePath);
trace(File.documentsDirectory.nativePath);
trace(File.userDirectory.nativePath);

// ディレクトリが存在するか確認
var dir:File = new File(File.applicationDirectory.nativePath + "/DataBaseFile");
if (!dir.exists) {
dir.createDirectory();
}

// データベースファイルが存在するか確認(無い場合は各テーブルを初期化するためのフラグを変更)
this._db_file = new File(File.applicationDirectory.nativePath + "/DataBaseFile/database.db");
if (!this._db_file.exists) {
this._is_db_inited = false;
}

// DBファイルへの接続確率
this._sql_connection = new SQLConnection();

this._sql_connection.addEventListener(SQLEvent.OPEN, this._sqlOpenEvent);
this._sql_connection.addEventListener(SQLErrorEvent.ERROR, this._sqlOpenErrorEvent);

this._sql_connection.openAsync(this._db_file, SQLMode.CREATE);
}

private function _sqlOpenEvent(event:SQLEvent):void {
trace("db open success");

// hoge1テーブル操作用クラス作成
if (!this._hoge1_table) {
this._hoge1_table = new Hoge1(this._sql_connection);
}
this._hoge1_table.init(this._is_db_inited);

// hoge2テーブル操作用クラス作成
if (!this._hoge2_table) {
this._hoge2_table = new Hoge2(this._sql_connection);
}
this._hoge2_table.init(this._is_db_inited);
}

private function _sqlOpenErrorEvent(event:SQLErrorEvent):void {
trace("db open failed");
}
}
}


 初期化処理でファイルが存在しているかを確認。
 存在していない場合は新規作成DBファイル作成(これは半ば自動)+テーブル作成を行うようにする。

 その制御はthis._is_db_initedフラグで各テーブルの初期化メソッドの引数に渡すことで各テーブル操作用クラスで動作を判別する。

 テーブル操作用のクラスはまだテーブルを作成する部分しか書いていないが以下のようにする。

 package As.Model.Database
{
import flash.data.SQLConnection;
import flash.data.SQLStatement;
import flash.events.SQLErrorEvent;
import flash.events.SQLEvent;

public class Hoge1{
private var _sql_connection:SQLConnection;

public function Hoge1(sql_connection:SQLConnection) {
this._sql_connection = sql_connection;
}

public function init(is_inited:Boolean = true):void {
if (is_inited) {
// dispatch event
} else {
this._createTable();
}
}

public function _createTable():void {
if(!this._sql_connection.connected) {
// エラー処理
return;
}

var sql_statement:SQLStatement = new SQLStatement();

sql_statement.sqlConnection = this._sql_connection;

sql_statement.addEventListener(SQLEvent.RESULT, this._createTalbeCompleteEvent);
sql_statement.addEventListener(SQLErrorEvent.ERROR, this._createTableErrorEvent);

// @memo INTかつPRIMARY KEYにnullをインサートするとautoincrementとして動作するらしい
sql_statement.text = "CREATE TABLE IF NOT EXISTS hoge1 (id INTEGER PRIMARY KEY, value INTEGER)";

sql_statement.execute();
}

private function _createTalbeCompleteEvent(event:SQLEvent):void {
trace("create table success Hoge1");
}

private function _createTableErrorEvent(event:SQLErrorEvent):void {
trace("create table failed Hoge1");
}
}
}


 コメントにも書いたが、
 Autoincrementは

 INTかつPRIMARY KEYにnullをインサートするとautoincrementとして動作

 するらしい。
 今日のところはこんな感じ。後でまとめてサンプルを公開します。

2008年10月11日

AIR:AIRのtraceツールについて

 Flash開発者お馴染みのFireFoxアドオン、FlashTracerはAIRでもちゃんとtraceメッセージを確認することができました。
 リリースビルドでもtraceは見れるようなのでリリースする際は注意ですね。Flexの場合traceをオフにしてパブリッシュするようなオプションはありませんので(FlashCS3はある)さらに注意です。

 自分の家のPC(Vista)の場合FlashTracerの日本語化けが無いので、使っていませんがtraceRabbitの場合はなぜかairを閉じた時にtrace全文が出力されました??

 とりあえずFlashTracer+FireFoxが便利です。

Profile

シーラカンス

Recent Comments
QRコード
QRコード
livedoor Readerに登録
RSS
livedoor Blog(ブログ)