PhusherCanvasと

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

佐藤 竜之介@tricknotesSapporo.js-2010.11.27

自己紹介

佐藤竜之介@tricknotes

I love SapporoI love RubyI love JavaScript

自己紹介

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

今日のお題目

・Pusherとjqplotについて

・デモアプリ紹介 ・使ってみた感想

よろしくお願いします

今日のお題目

・PusherとjqPlotについて

・デモアプリ紹介 ・使ってみた感想

HTML5

WebSocketCanvas

+

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

WebSocket

CanvasjqPlot http://www.jqplot.com/

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

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

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

・PusherとjqPlotについて

・デモアプリ紹介 ・使ってみた感想

使ってみた感想

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

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

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

全体的に

ありがとうございました