ETech 2006 レポート

ETech も今日が最終日です。午前中のセッションを終えて、聞きたいものはだいたい全部終わったし、ここらで全体を通してのレポートを書いてみます。一つ一つのセッションについて全部レポートは難しいので、個人的に面白いと思ったトピックやセッションだけ振り返ってみたいと思います。

Attention Economy

今回の ETech のテーマは Attention Economy。ETech は 5 回目ですが、毎年このようにテーマがあるらしく、そういえば去年の ETech は "Remix" がテーマでした。この辺がきっかけて Web 2.0 がどうこうという話が盛り上がりはじめたんだっけ。

Attention Economy というのは

今回のテーマは"Attention Economy"ということで、Attentionをキーワードに色々な話が繰り広げられています。
パソコンはどんどん安くなるし、情報はどこからでも無料で手に入る時代になって、一番貴重なのはAttention=興味。
人の興味の奪い合いが始まっているし、それは時間とかお金の奪い合いになるという話とか、人の興味はどこに行くのか、多数の人の興味をどう集めて、どうやれば拡大できるのか、という話しが主軸です。

と id:jkondo が解説してる通り。もともとは経済学かなんかの話みたいですね。これをウェブの世界にも当てはめて、いかに人の注目を引くか、注目を引くものによって情報過多になったものから必要なものだけを抽出するか...そんなことをテーマにみんなでディスカッションしましょうというのが Etech 2006。

が、実際には Attention Economy の話には Tim O'Reilly の基調講演でも触れられず、あまりそれそのものをテーマにしているセッションは少なかったように思います。普遍的な概念の話なので、各セッションが暗黙的にそれを語ってたと捉えることもできるとは思いますが個人的には Remix や Web 2.0 みたいなムーブメントを起こすワードとはちょっと違うかなあと感じました。

ところで Attention Economy と言えば、江島さんが 展望2006：アテンション・エコノミーの本格化 で今年の初めあたりに言及してます。アンテナ高いなあ。

Ray Ozzie の Live Clipboard

2005年に Microsoft の CTO になった Ray Ozzie による基調講演では、「ウェブ上でクリップボードを実現したい」みたいな話があがりました。名づけて Live Clipboard。これがデモもあって結構面白かったです。

ローカルのPCでは、例えばワードでコピーしたものをエクセルでペーストしたりというのがごくごく一般的に行われている。で、このコピーされたオブジェクトの内容を見て、ペースト時に、ペースト対象のアプリケーションに合わせてデータ構造を変換するといった類のことができるものも多いです。

Ray Ozzie が言うウェブ上でのクリップボードというのは例えば、

• 任意の Blog のページにコピー用のボタンがある。
• それをコピーする
• Bloglines でペーストボタンを押す

と、その Blog を Bloglines に subscribe できる、みたいなもの。

コピーされたデータを、ペースト先でどのように解釈するかは実装次第ですが、そのためには何らかの形で構造化されたデータにメタデータを付与する必要がある。それらに RSS や microformats などが使えないだろうか、といったところ。実際に Internet Explorer や Firefox で動作するデモをプレゼンしていて、その技術的な解説もウェブサイトに掲載されていました。hCard を使ったデモもあります。

これ以外の具体例やより詳しくは 'iandeth. - ETech 06 クリップボードを介して世界を繋げる - Ray Ozzie氏講演' あたりを。

「この Live Clipboard を、Microsoft 単体ではなくウェブ全体で取り組んでいきませんか」 というのが彼の意図するところのようです。

Bionic Software

Tim O'Reilly の基調講演をはじめ、いくつかのセッションで聞えてきたキーワードに "Bionic Software" があります。 Tim によれば "Taking User Empowerment to the Next Level" ということで、要は計算機に加えてユーザーの力を使って何かを実現しようという考え方のことです。

この辺りは人力検索やはてなブックマークをはじめ、はてなは積極的に取り組んできたこともありますし、そういったユーザー参加型のメディアのようなサイトは結構あってそんなに新しい話には聞えません。しかし、Bionic Software の代表的なものである Amazon の Mechanical Turk を見ると、Bionic "Software" というのはまさいにこういうもののことを言うのだ、というのが良く分かります。

Mechanical Turk で、Mechanical Turk へ参加しているユーザーへの仕事の以来や、その結果を Web API で、プロシージャコールとして使うことができます。ここが重要。つまり、

read (photo);
photoContainsHuman = callMechanicalTurk(photo); 
if (photoContainsHuman == TRUE) {   
  acceptPhoto; 
} else { 
  rejectPhoto; 
}

というコードがあったときに、この callMechanicalTurk() という関数の向こうが、計算機の世界ではなく人力の世界であるという点。まさに Bionic。

この Mechanical Turk の Web API を利用して作られたサイトに castingWords.com というのがあります。これは Podcast の音声を文字起こししてくれるサービスなのですが、実際にはその文字起こしはユーザーによって行われています。人力検索はてなのように、ユーザーは働いた結果としての対価を得ることができるようになっています。このサービスのコアとなる Bionic な部分を、Mechanical Turk で作っているという辺りに次世代ウェブのにおいがぷんぷんする、というわけです。

ちなみにこの castingWords.com は例によって Amazon.com の Jeff Bar の作品だそうで。

TrimPath Junction

今回の聞いたセッションの中でこれはやばいかもと思ったのが TrimPath の TrimJunction という JavaScript MVC フレームワークの紹介でした。

• ウェブアプリケーションがオフラインのとき使えないのは不便だよね
• 飛行機に乗ってるときとか暇だし
• オフラインでも動くアプリケーションを、すでに知ってる知識 (DHTML / CSS / JavaScript etc ) で作りたい
• そういうのをもっとエレガントに作りたいよね

というのがきっかけで作られたフレームワークだそうです。そして、みんな大好き Rails インスパイア。

デモとしてオンライン表計算ソフトの Num Sum が紹介されていました。Num Sum は TrimJunction で作られてるらしい。Firefox を使って、ローカルに HTML を保存して動かしたり、データを保存して復元したりていうのがちゃんと動いてるよね、と解説していました。Num Sum 以外にも Next Action という GTD ツールも紹介されてました。

で、このフレームワークですが

• MVC
• Rails ライクな API
• Template エンジン (JST: JavaScript Templates)
• クライアントサイドの SQL エンジン (TrimQuery AST)
• Write Once Run Anyware (笑)

あたりが特徴。オフラインでも動作する、というアプリケーションの特徴に重要なのが SQL エンジンの TrimQuery AST で、これによりクライアントサイドで Persistency を実現すると。回線が再びオンラインになったときにサーバーサイドと Synchronize したりするためのフレームワークも搭載しているそうです。実装を見てないし触ったことがあるわけでもないので、どのぐらいいけてるかはちょっと未知数ですが、聞いてるだけだとかなりすごい。

あと、セッションの中でこの TrimJunction の各種機能を実現するためのテクニックの概要をいろいろ教えてくれたんですが、英語が早くってちょっと難しかった。メモを取っておいたのでこのエントリーの最後に貼り付けておきます。JavaScript Hacker な人たちに解読してもらいたい。

Comet

僕はこのセッションを聞き逃してしまったのだけど、id:jkondo に概要を聞いたり、Windchase: ETech2006: After AJAX: Low-latency Data to (and from) the Browser を読んで、これは知っておいたほうよさそうだと思ったテクニック。

例えばウェブブラウザでチャットのようなものを表現するとした場合、サーバーからクライアントへの情報の PUSH ができるといいのですが、普通に考えるとそれはできないので、ブラウザを定期的にリロードして擬似的に再現するとかという方法になる。これだとあんまりなので、特定のエレメントだけを動的に書き換えてみようということになり Ajax の出番。Prototype には Ajax.PeriodicalExecuter なんていうクラスもあって、これを使うとクライアントからサーバーに対する定期的な通信とそれにフックするコールバックを簡単に書いたりすることができます。が、これもやはり擬似的にプッシュしているだけで、効率面やリアルタイム性に若干の問題が残る。

そこで、ウェブサーバーの Socket 周りの処理を Hack しつつ、クライアントとブラウザのコネクションを close せずに繋げっぱなしにして本当の意味での PUSH を実現しましょうというのが Comet というテクニックです。

• Comet: Low Latency Data for the Browser

すでにいくつかのサービスで使われているらしい。このカンファレンスをきっかけに色々情報が出てきて、Hack されるのかなと期待してます。

Putting the Fun in Functional

個人的に一番面白かったのは、"Putting the Fun in Functional: Applying Game Design to Mobile Services" というセッション。ShuffleBrain というゲームのコンサルティングの会社かな? の中の人による、ゲームにおけるエンターテイメントの作り方の5つの法則を、ウェブサイトに当てはめて考えてみましょうという話。あんまりテクノロジーや Web 2.0 あたりとは直接関係なかったんだけど、ゲーム好きな僕にはすごく良かった。

この法則というのは

• Collecting
• Points
• Feedback
• Exchanges
• Customization

の5つ。

例えば Collecting の例として World of Warcraft (WoW)のスクリーンショットを交えつつ、ゲームでアイテムをコレクトするというのはそのゲームをプレイするための目的として強いモチベーションを生むし、すごいコレクションは人に自慢したい欲を生み出し、さらなるコレクション欲を生み出す。WoW のほかにもポケモンとかが良い例です、と。そして、MySpace (海外の Mixi みたいなの) では、友人をコレクトするのがコレクションを集めることに等しい。MySpace はコレクター魂を刺激するようにうまく作られてる...といった感じでいろんな事例を紹介してました。

しかしプレゼンターはキャリアウーマン風のなかなか知的な女性だったんですが、World of Warcraft を絶賛。やっぱり欲しくなっちゃったなあ...いかんいかん。

このセッションの内容は O'Reilly の How Game Mechanics Can Make Your App More Fun に詳しいレポートがあるので、興味のある方はぜひどうぞ。資料も公開するといってたので、間もなくだと思います。

そのほか

初日の基調講演では YouTube - Multi-Touch Interaction で話題になってた、両手で操るタッチインタフェースの実機がデモされて喝采を浴びてました。それから Adobe Lab の Flex という Flash + Ajax なフレームワークもなかなかすごそうでした。あと、なんかあちこちで Second Life が話題に上ってたのも印象的でした。

このカンファレンスに参加していている方で、日本語で丁寧なレポートが読めるおすすめの blog は以下の二つ。

• http://iandeth.dyndns.org/mt/ian/
• http://windchase.jp/blog/

日本人の方も結構多かったのでここ以外にもあるかもしれません。知ってたら教えてください。

全体を通しての感想

初めての ETech だったんですが、どんだけすごいテクノロジーの発表とかがあるのかなーと思ったものの、「これはすごすぎて真似できない」みたいなものはあまりありませんでした。例のタッチパネルのやつとかはだいぶ畑が違うのでさすがにすごいとは思ったけど。また、そんなの初めて聞いたよーというのもそれほど多くなく。(Windows Live! みたいに作りこみ具合とか工数のかけ具合とか、別の意味で真似できないという感じのものはあったりしましたが...)

それでまあ、最初は ETech ってもしかしたらあんますごくないのかなとか思っちゃったんですが、冷静に考えてみたら違うんですよね。やっぱりこれは blog やソーシャルブックマークの影響だと思うのです。

おそらく数年前は、海外のプログラマやエンジニアの間ですら何が盛り上がってるかとか、どういう技術がいま熱いかという話題を共有するのはなかなか難しかったはずです。そういう状況でカンファレンスに出席すると、すべてのものが初めてで、おそらく相当なショックを受けたのかなと思います。ところが、このご時世、先のタッチパネルのデモなども YouTube にあがっててソーシャルブックマークで見たことがあったわけで、会場でみたときにそこまで驚くことはなかったし、今回数多くみられた Ajax 周りの発表も同じくそんな感じで事前に知ってる情報や、あるいは実際に自分で手を動かしてノウハウをある程度持ってる、みたいなものが多かったと。インターネット全体のレベルでの情報共有というのが進んだおかげで、こういった最新技術について触れるためのコストが圧倒的に下がったんだなあと、それをすごく実感しました。

さて、技術のトレンドですが、いろいろセッションに参加してきて

• JavaScript / Ajax によるユーザーインタフェースプログラミング
• Microformats などによるメタデータ活用

の二点がよく話題に上っていたという印象です。どちらも昨年も盛り上がってた話ですが、フレームワークとかそれらを実際に活用したアプリケーションとか、Microformats / Ajax そのものがどうしたこうしたというより、それぞれもう少しレイヤの高い話が多かったです。(そんな折に Writely が Google に買われちゃったりして、きてるなあ。) あとはやっぱり Web API ですね。

日本に比べて、こちらでは Web 2.0 という言葉が、僕でももう少し受け入れやすい形、つまりは技術的な視点でそれを語るということが多かったのも印象的。注目を集めるためのバズワードではなく、Web 2.0 として出てきたテクノロジーを使ってどうしましょうとか、ちゃんとそういうことを議論している。その結果として、Ajax や Microformats について語ってるから、話の内容に厚みがある、そんな印象でした。

Rails によるサーバーサイドプログラミングへのインパクトみたいなのはもう落ち着いたのか、あまりその手の話題はみかけませんでしたね。というか、もはや Rails は基本、ぐらいの感じだったのかも。

ちとまとまりはないですが、僕の手による ETech レポートはこんなところです。とにかく英語がわかんなくて、もうすこしちゃんと英語が聞き取れる/喋れるようになってからこないと意味がないなあと思ったのも事実。まずは英語漬けでがんばろう...。

ということで最後に TrimJunction のセッションのメモを貼り付けておきます。殴り書きなので typo もいっぱいあると思うけど許してください。

Persistence の実現

• Keep your data in the DOM tree
• myHiddenDataDiv.innerHTML = bigString
• Whenever user saves the HTML page, you're ok

• Flash 8 Storage
• Flash to JavaScript bridge
• Seamless!
  • そんなにいっぱい保存できないかもしれないけどね

• IE'isms
• IE persistence
• IE offline data

どういうところで使われてるか

• DOM Page Saving Tech
  • TiddlyWiki
  • Num Sum
  • Next Action
• Flash
  • AMASS demos
  • Wiwywiki / AFLAX
  • ideaShulb

Synchronization

• Data / record level semantics
• Tracking deltas
• Change requests, not changes
• INSERTs only
• Unique ID gen
• Or, just punt
  • Wiki semantics

Client Side API

• Client Programming Model
  • Visual Basic Style ×
  • Rails Style ○
    • Write Once Run Anywhere

• SQL Everywhere
  • SQL on the server
  • SQL on the client
  • Aside: Firefox future?

TrimPath Junction

• MVC for JavaScript
  • Rails-like API with client-side SQL
• Designed for WORA
  • Server runs Rhino
• Designed for > 1 storage provide
  • DOM Page, Flash or other

Building your own Junction

• What are core tricks?
  • eval and with
    • ダイナミックスコープ
• Junction では with 使いまくり

• Domain specific mini language are eqsy
  • DSL

• JST Template Engine
  • JavaScript Templates
  • Hand rolled parser
  • Generate JavaScript function String

<h1>Welcome Back! ${Customer.name}</h1>

• TrimQuery AST
  • SQL Engine
  • TrimQuery JOIN driver