はじめに

話の内容は、リアルタイムWebな体験をより向上させるコンテンツやサービスってどんなものだろう?というものです。
Nodeと直接関係無いし、技術的な話じゃないので興味無い方はごめんなさい…

実はオープンソースカンファレンス2012島根で、このお話を講演させていただきました。

いいかげん記事を書かなきゃと思っていたところ、Node.jsに関する記事を書くアドカレが進行中でしたので、せっかくなのでそれに便乗して紹介したいと思います。

資料

リアルタイムWebについての考察

きっかけはJxckさんの記事です。

パフォーマンスとかセキュリティとかスケールとか、様々な技術的な議論はとても活発でNodeももの凄い勢いで進化していっていますし、プラクティスも増えています。

でも、「WebSocketでいろいろできるようになった、Nodeも進化している、ではそれで何をするのか?」といった議論をあんまり見ないなぁと思いました。(自分が知らないだけだったらごめんなさい)

技術的な議論と並行して、フロントよりの人やアイディアをもつ人たちが「リアルタイムWebで何をするのか?」をもっと模索すれば、もっと盛り上がるしきっと面白いことになるんじゃないかなぁと思います。

で、ここから「リアルタイムWebで何をするのか?」について最近悶々と考えていることを紹介します。

Ustでも大体自分が考えていることは言っていますが、抜粋して書きたいと思います。

リアルタイムWebには、生のコミュニケーションと同等、またはそれ以上の体験を、オンライン上でできる可能性があるのではと漠然と考えていますが、その可能性をさらに引き出すキーの一つは、「いかに感情を通信するか」があるんじゃないか。

感情を通信することで、ビデオチャットや電話といった従来のものでは到達し得ない、さらにリッチな同期的なコミュニケーションをやり取りできるのではと漠然と感じているわけです。

ではどうやって感情を通信するのか?

  • 表情
  • 音声
  • ジェスチャー
  • 物理法則を使ったインタラクティブ性
  • etc, etc, etc…

人の感情を汲み取とれる部分っていろいろあると思うんですけど、もう一つ大切なのがそれらをどうWeb上で表現すれば一番伝わるかってこと。

muddydixonさんがアドカレ10日目に書かれてたD3.jsのようなデータビジュアライジングもそうですし、Webだと豊かな表現方法がたくさんできます。

そこが生のコミュニケーション以上の体験ができるポイントかなぁと思います。

物理法則と書きましたが、例えば、iOSのスクロールアニメーション(フリックするとすーっとスクロールしていって、端まで到達すると行き過ぎてバネのように引っ張られて戻ってくるやつ)です。

端まで到達したことを分かりやすくするというのもあると思いますが激しくフリックすればそれだけ激しく跳ね返ってくるので、そういう表現にも感情って表されるんじゃないのかと思うのです。

つまり、感情を伝えるあらゆる要素を、よりそれが伝わる表現を使って共有する
(すごくふわっとしてますね…)

今回の講演のスライドは講演者の映像をWebカムで取得してブロードキャストできるようにしているのですが、ただ映像を流すのではなく、スライドになるべく馴染むように加工して流しています。

キャプチャしたそのままの映像を届けるより、その表現の方がブラウザで資料を見ている人との距離が近くなるのではと思ったからです。

スライドのつくり

講演のスライドはJxckさんのSlideStreamを参考にして、(ありがとうございます!)

  • admin認証
  • スライド遷移の同期

の機能をつけています。

加えて、デモの一つとしてfontBombを埋め込んでますが、Nodeでマウス座標とクリックイベントを共有できるように手を入れています。

また、講演者側で立ち上げるNodeプロセス(lib/gUM/gUM.js)にて、Webカムでキャプチャした映像をサーバーへ送っています。

var timer = new Worker("/javascripts/timer.js");
timer.postMessage(1000/config.fps);
timer.onmessage = function(e) {
    var texture = fxcanvas.texture(video);
    fxcanvas.draw(texture).denoise(8).ink(0.8).hueSaturation(0, -1).brightnessContrast(0.31, 1).update();
    socket.emit('img send',{img:fxcanvas.toDataURL('image/jpeg')});
};

参考:http://yusukebe.com/archives/20120805/114551.html

定期的にgetUserMedia APIでWebカムに映った画像を取得しています。

setIntervalでタイマー処理をしていると、タブがアクティブではないときに精度が悪くなるため、WebWorkersを使ってタイマー処理をしています。

glfx.js(WebGLで画像処理をするライブラリ)を使って取得した画像を加工し、それをDataURLの文字列に変換してサーバーへ送っています。

負荷テストなどもしていませんのでクライアントが増えるとどのくらいパフォーマンスが出るのかは分かりません…

今回DataURLでデータをやり取りしていますが、ukyoさんがアドカレ11日目にも書かれているように、バイナリでやりとりするともっと負荷が減ると思います。

その辺はまたチャレンジしたいと思います。

まとめ

なんか唐突にふわふわしたことを言ってるような感じになっちゃいましが、以上が最近考えていることです。

しかしNodeを触っていると、未来のWebを垣間見れるような気がして楽しいですね!

こうした話がきっかけとなりたたき台となって、リアルタイムWebやNodeを取り巻く議論が、技術者だけでなくデザイナーさんだとかもっと広い範囲まで広がって、もっともっと盛り上がってくれるとうれしいです。