Pusherとcanvasで作るリアルタイムグラフ

Phusherと
Canvas 作る
で
リアルタイムグラフ
佐藤竜之介
@tricknotes
Sapporo.js-2010.11.27

自己紹介

佐藤竜之介
@tricknotes

I love Sapporo
I love Ruby
I love JavaScript

自己紹介

時計台の側の会社でプログラマを
やってます

今日のお題目
・Pusherとjqplotについて

・デモアプリ紹介

・使ってみた感想

よろしく
お願いします

今日のお題目
・PusherとjqPlotについて



リアルタイムで更新される
グラフを作ってみます。

Canvas
jqPlot http://www.jqplot.com/

WebSocket
Pusher http://pusherapp.com/

jqPlot
・Canvas要素に簡単にグラフを
　書くためのjQueryプラグイン
・Canvas要素が使えないブラウザ
　にも対応
・IE6にも対応

jqPlot

http://www.jqplot.com/

Pusher
・WebSocketのラッパー
・ブラウザへのPush送信を行う
　サービス
・WebSocketが使えないブラウザ
　にも対応
・ただしIE6以外

Pusher

http://pusherapp.com/docs

Pusher

http://pusherapp.com/price

・PusherとjqPlotについて



アンケート結果をグラフで表示

構成

③集計結果を送信

①画面表示 ②アンケート送信

④データをプッシュ

⑤グラフを更新

プッシュ送信

サーバ側からすべての
クライアントに通知を出せる

それでは、デモへ
→ https://gist.github.com/734888

誰かがボタンを押すと
デモ解説

全員のグラフが更新される

jqPlot
・とても楽、使いやすい
・クロスブラウザすばらしい
・Canvasなので、サーバに負荷が
　かからない

Pusher
・サーバ側の知識が必要
・とても使いやすい
・外部サービスなので利用制限がある

全体的に
HTML5をラップする各種機能が
すでに登場してきていてHTML標
準でできることの幅が広がってき
ているので、今後が楽しみです。

ありがとうございました

Recommended