リアルタイムWebについて考えてみる

はじめに

話の内容は、リアルタイム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を取り巻く議論が、技術者だけでなくデザイナーさんだとかもっと広い範囲まで広がって、もっともっと盛り上がってくれるとうれしいです。

The Weather, City Edition スクリーンセーバー

screensaver

“The Weather, City Edition”は、Mac用のスクリーンセーバーです。

天気、温度、時間、日付が表示されます。

世界中の様々な都市のバージョンが用意されています。

http://www.stefantrifan.com/theweather/

 

ミニマルなデザインがとても気に入ったので、今回メールで連絡をとり、僕が現在住んでいる”島根県松江市バージョン”をリストに加えてもらいました。

現在リストに無い都市でもリクエストすると快く対応してくれますので、気になった方は連絡をとってみてはいかがでしょうか。

ちなみにiPad版も現在製作中とのことです。そちらも楽しみです。

 

ではでは。

Adobe Kuler + Colllor + ColorChooserが便利

WebサイトをデザインしていてもアプリのUIを設計していても、必ずつきまとうのが「色」の設計です。

そんな色を扱う際に、現在個人的にベストだと思っているツールの組み合わせが最近完成したので紹介します。

Adobe Kuler

Adobe Kulerは、配色の組み合わせを作成、保存、共有できるAdobeのWebサービスです。色のセットは、Photoshop や Illustrator などのスウォッチ形式としてダウンロードもできます。

類似色や補色といった特定のセオリーに従った配色パターンも簡単に作成できるし、公開されている配色パターンをカスタマイズして作成することもできます。

Colllor

Colllorは、指定した色を中心にその色から派生する色調のカラーパレットを生成してくれるWebサービスです。

色を一つ指定すると、明度、彩度、別の色とのミックス、近似色のカラーパレットが作成されます。

ColorChooser

ColorChooserは、カラーピッカーで選択した色を自動的に UIColor や NSColor のコードに変換して、クリップボードにコピーできるMac用のアプリケーション(有料)です。メニューバーに常駐するので、どこからでも呼び出せます。

同様のものとしてDeveloper Color Picker(無料)がありますが、こちらはMac標準のカラーピッカーを拡張するものなので、個人的にはメニューバーに常駐しているColorChooserの方が使いやすいです。

自分の使い方としては、

  1. Adobe Kulerで配色パターンを作成し、
  2. 使いどころによって明度や彩度のコントラストを増減したいときはColllorでパレットを作成して、
  3. ColorChooserでサクっとコード(主にCocoa)に反映する

1で全体的な配色パターンを決めたら、2と3を繰り返して画面を見ながら部分的な調整していくといった感じです。

画面で確認しながら色を行ったり来たりして比較するスタイルでやっているので、2と3が気軽に簡単にできる2つのツールはかなり便利に使わせてもらっています。

また、Adobe Kulerは組み合わせの勉強にも使わせてもらっています。

まあこの手のものは自分のスタイルに合った好みのものを使えばいいと思うので、今使っていて個人的にベストだと思っている組み合わせを一例として紹介しました。

何かの参考になったらうれしいです。

ではでは。

iOSシミュレータに動画を保存する

iOSシミュレータに動画を取り込む方法を探していて以下の記事を発見したのでメモ。

iPhone/iPadシュミレーターのカメラロールに動画を登録する方法

大まかな手順は、

  • 該当のディレクトリに手で動画を配置
  • シミュレータのカメラロールのメタ情報を再構築

 

カメラロール内のファイルをディレクトリから直接操作する場合は、メタ情報の再構築がセットで必要ですね。

記事の中ではiOS5.0で確認されていましたが、iOS5.1でもできました。

が、あくまで自己責任でお願い致します。

もっといい方法は無いものか…

 

ではでは。

Blogを開始します

ここでは、日々のアイデアとかメモとか考えていることをアウトプットしていきます。

アウトプットすることで考えを纏めて深めていくことが目的です。

なので中には支離滅裂や矛盾なこともあるかも知れません。

また、テクニカルな記事も書くと思いますが、何分未熟者のため、間違いや最適解ではないものもあるかと思います。

何かしらフィードバックをいただけると嬉しく思います。

よろしくお願いします。

大変申し訳ありませんが、このウェブサイトではお使いのブラウザは現在サポートされておりません。

また、旧型のブラウザはセキュリティ機能も古く、脆弱性に問題があります。

最新のInternet Explorerにアップグレードを行うか、または下記にあるような他ブラウザの導入をお勧め致します。