グリッドブラウザ
初投稿です。よろしくお願いします。
とかく他人の趣味・嗜好を垣間見るのは興味深いことです。
WWWの世界をブラウズするという行為にはその人なりの
価値観やらルールやら、またテクニックが存在し、様々な感慨をもたらすでしょう。
普段のブラウジングを孤高の知的探検とするなら、
もちろんピクニック的なブラウジングもあっても良いではないでしょうか。
自分との差異を発見したときに、ツッコミをいれたり茶化したり、賞賛の声を送ったり。
そんな風にリアルタイムでブラウザを共有することに面白さがあるかを探ってみました。
というわけで、AIRです。
先日7/10にAdobe主催のAIR Developers Nightが開かれました。
（こちらのレポートが詳しいです。）
このイベントは前身のApollo α版のミニキャンプに続く開発者イベントで、
AIRと名を変え、新たにβとして発表されたことをうけて開催されました。
今回はそこで紹介させていただきましたブラウザ２種のうち、グリッドブラウザ編です。
AIRとはAdobe Integrated Runtimeの略で、要するにRuntimeライブラリです。
Flashを含め既存のWebコンテンツ作成技術の資源を利用し、.NetのようにOSに依存することなく（.Net自体はOS依存しませんが事実上という意味で）、
JAVAのようにヘビーでなく、リッチなWebアプリケーションを直感的にサクサク作ることができるとのこと。
ローカルファイルに触ることができたり、簡易データベース（SQLite）を用いたりすることもできるので
Webアプリとしてだけでなくオフラインのデスクトップアプリのような機能を構築することも可能です。
今回のものは「AIRだから」できるというものではありませんが、ひとつ生産性が高いというのもAIRの特性として見てみました。
なぜなら、自分自身Flash・Flexの経験があまりない状態で始めているからです。
そういったわけですでにあちこちで同様の情報がありますが、初めてということもあって所感など含め書きたいと思います。
今回使用した開発環境は以下です。
Adobe AIRAIRの実行環境です。
JDK 5AIRのコンパイルに必要。
Flex Builder3 Public betaEclipsのPluginもありますがスタンドアロン版を使いました。一緒についてくるFlashPlayerはこの開発環境独自のものらしいので他では使えません
今回AIRを触ってみると、思いのほかスムーズに作れることにまず感心。
上記「直感的」とあるのはまさにここで、普通のデスクトップアプリを作るような
感覚で画面にコンポーネントを配置、イベントドリブンの宣言をデザイン上で行うとすぐに下記のような
mxmlが記述されます。
<mx:Button label="BackGroundDisp1" width="50" id="btnBackGroundDisp1" click="btnBackGroudDisp1_onClickHandler(event)"/>
ちなみにコントロールの表示非表示の動きも以下のようにすれば簡単にエフェクトをかけることができます。
エフェクト自体も alphaFrom="1.0" alphaTo="0.0" のように自分で効果を定義できます。
<ZoomView id="zoomview" width="100%" height="100%" showEffect="WipeDown" hideEffect="WipeUp">
コードは以下のようにCDATAコンストラクトでラップして書いていきます。
<mx:Script>
<![CDATA[
private function btnBackGroudDisp1_onClickHandler(event:MouseEvent):void
{
alert("DONE!");
}
]]>
AS3自体が自分のようにC#などから入っていくと非常にとっつきやすい言語構造をしているので書きやすかったです。
あと今回のとは関係ありませんがSQLiteへのつなぎもやってみました。
メモということで。
private var con:SQLConnection = new SQLConnection();
private function connect(file:File):void
{
con.addEventListener(SQLEvent.OPEN,
function (event:SQLEvent):void
{
edtMyEdit1.text = "open successed!";
}
);
con.addEventListener(SQLErrorEvent.ERROR,
function (event:SQLErrorEvent):void
{
edtMyEdit1.text = "open failed!";
}
);
con.open(file);
}
でDBとのコネクションを貼ります。fileにはあらかじめ作った.dbファイルを指定。
SQLの実行時は
private function btnExecSql_onClick(event: MouseEvent): void
{
var stmt:SQLStatement = new SQLStatement();
stmt.sqlConnection = con;
stmt.text = sql = "SELECT user_id FROM TEST_TBL";
stmt.addEventListener(SQLEvent.RESULT,
function (event:SQLEvent):void
{
var rs: Array = stmt.getResult().data;
edtMyEdit1.text = rs[0].user_id
}
);
stmt.addEventListener(SQLErrorEvent.ERROR,
function (event:SQLErrorEvent):void
{
edtMyEdit1.text = event.error.message;
}
);
stmt.execute();
}
のようにして結果セットを受け取ります。
いちいちイベントを取らなければいけないのがちょっと手間ですが、既視感を覚えるくらいシンプルにつなぐことができます。
ところでにAIRアプリは実体としてはSWFの乗ったexeです。このexeは二重起動防止が掛かっているみたいなので複数起動できません。
ですがインストールフォルダの[META-INF]-[AIR]フォルダにapplication.xmlがあり、
この中のappIdでプロセス管理してるみたいなので値を変えれば複数起動できます。
本題です。今回私北島と望月さんとで作成したグリッドブラウザの機能概要です。
・画面は９分割の全体モード、単体モードの２種
・ログイン情報は他のログインユーザに通知され、お互いのブラウズ状況を確認できる。
・全体モードで全体チャット。
・単体モード時は同一ＵＲＬの中でカーソルチャットができる。
・全体モードでは任意ユーザに対して「いたずら」機能を利用できる。
・「いたずら」はＵＲＬボム（可視、不可視）、クイズを用意。
・「いたずら」オブジェクトは全体モードにおいては仕掛けたユーザ
単体モードでは仕掛けられたユーザのみ確認できる。
・ＵＲＬボムの飛ばし先ＵＲＬは編集ができる。
他にも色々なおもしろいツールも考えられます。
例えばクイズ。他のユーザに対して辿り着いてほしいページ、探してほしいページへのＵＲＬをセットして仕掛けます。
チャットで色々なヒントを出しながら正解へ導き、見事正解したら、ご褒美ページを見せてあげたり。
また、オンタイムな「教えて！goo 」のように、全員の検索力を借りて自分の知りたい情報へのナビをしてもらうということもできるでしょう。
ナビの筋道ひとつとってもその人の有り様がでます。
今回、バックエンドの処理はFlash Media Serverの技術を用いてます。
リアルタイムにマウスの位置を送信し、通知することで相手ブラウザに
自分のマウスの軌跡を再現します。
その他チャットメッセージやブラウザのロケーションの変更、ログイン情報も同様です。
９人が同時接続してちゃかちゃか動いているのを眺めているだけでも面白く、
コミュニケーションのひとつのあり方が提示できたのではないか、と思います。
（htmlコンポーネントはもう少し何とかならないか）
また、「AIRならでは」というところにもう一歩踏み込んでもっと特性を生かした新しい
AIRアプリのあり方があるのではないかと、そいういった意見もありました。
リンク
Adobe Labs AIR
Adobe Labs AIR