Subscribed unsubscribe Subscribe Subscribe

ダメ人間オンライン

あまり信用しないほうがいい技術メモとか備忘録とかその他雑記

Node.jsでコロンビア(AA略

node.js

f:id:dameninngenn_owata:20120815033747j:plain:w247

意味わからないタイトルですね。すいません。

簡単に言うと「さぁ解答をお書き下さいどうぞ!」と言って解答者が答えを手元のフリップなりなんなりに書いたやつがリアルタイムで視聴者が見れるみたいなのをやりたかったのです。

f:id:dameninngenn_owata:20120815033816j:plain:w391

で、それをNode.jsを使って実装したという話です。Node.jsを使った理由はただ使いたかったというそれだけの理由です。socket.ioを使わずwebsocket-server使ってますし。

node-columbia

canvasを共有してリアルタイムに描画します。わりかし最近のバージョンのsafarichromeで見れます。あとiPhoneiPadのタッチイベントも対応してます。

demoページ(不安定でよく止まるので見れないかもしれません。)複数ブラウザを立ち上げて同じページを見るとどんな感じかわかると思います。

コロンビア

冗長かつ汚いコード・・・

https://github.com/dameninngenn/node-columbia

canvasの共有部分はこちらの方のソースをほぼ丸々参考にさせて頂いてますm(_ _)m

はじめての共同作業 Canvas編 (node.js + websocket) : アシアルブログ

やったことと言えばタッチイベントの追加とidを指定してid毎にcanvasを共有できるようにしたってだけです。

余談

何故これやろうかと思ったかと言うと部署の新卒歓迎会でクイズ番組っぽいことをやりたかったからです。

当日は新卒4名にiPhoneを持たせ解答を書いてもらい、スクリーンに4名の解答がリアルタイムで書かれていく様を映しました。

f:id:dameninngenn_owata:20120815033935p:plain:w319

もちろん正解したらコロンビアのポーズです。

当日はお酒も入っていたのでかなり調子に乗った司会をしてしまいました。謎の宇宙人スーツです。すいません。

f:id:dameninngenn_owata:20110422201805j:plain:w240

リアルタイムwebおもしろいですね!