Phusherと  Canvas 作る        でリアルタイムグラフ                        佐藤 竜之介                         @tricknotesSapporo.js-2010.11.27
自己紹介 佐藤竜之介 @tricknotes   I love Sapporo   I love Ruby   I love JavaScript
自己紹介 時計台の側の会社でプログラマを やってます
今日のお題目・Pusherとjqplotについて・デモアプリ紹介・使ってみた感想
よろしくお願いします
今日のお題目・PusherとjqPlotについて・デモアプリ紹介・使ってみた感想
HTML5
Canvas    +WebSocket
リアルタイムで更新されるグラフを作ってみます。
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
誰かがボタンを押すとデモ解説       全員のグラフが更新される
・PusherとjqPlotについて・デモアプリ紹介・使ってみた感想
使ってみた感想
jqPlot・とても楽、使いやすい・クロスブラウザすばらしい・Canvasなので、サーバに負荷が かからない
Pusher・サーバ側の知識が必要・とても使いやすい・外部サービスなので利用制限がある
全体的にHTML5をラップする各種機能がすでに登場してきていてHTML標準でできることの幅が広がってきているので、今後が楽しみです。
ありがとうございました
Upcoming SlideShare
Loading in …5
×

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

5,270 views

Published on

Sapporo.js-2010.11.27 での発表資料です。

Published in: Career
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,270
On SlideShare
0
From Embeds
0
Number of Embeds
288
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. Phusherと Canvas 作る でリアルタイムグラフ 佐藤 竜之介 @tricknotesSapporo.js-2010.11.27
  2. 2. 自己紹介 佐藤竜之介 @tricknotes I love Sapporo I love Ruby I love JavaScript
  3. 3. 自己紹介 時計台の側の会社でプログラマを やってます
  4. 4. 今日のお題目・Pusherとjqplotについて・デモアプリ紹介・使ってみた感想
  5. 5. よろしくお願いします
  6. 6. 今日のお題目・PusherとjqPlotについて・デモアプリ紹介・使ってみた感想
  7. 7. HTML5
  8. 8. Canvas +WebSocket
  9. 9. リアルタイムで更新されるグラフを作ってみます。
  10. 10. Canvas jqPlot http://www.jqplot.com/WebSocket Pusher http://pusherapp.com/
  11. 11. jqPlot・Canvas要素に簡単にグラフを 書くためのjQueryプラグイン・Canvas要素が使えないブラウザ にも対応・IE6にも対応
  12. 12. jqPlot http://www.jqplot.com/
  13. 13. Pusher・WebSocketのラッパー・ブラウザへのPush送信を行う サービス・WebSocketが使えないブラウザ にも対応・ただしIE6以外
  14. 14. Pusher http://pusherapp.com/docs
  15. 15. Pusher http://pusherapp.com/price
  16. 16. ・PusherとjqPlotについて・デモアプリ紹介・使ってみた感想
  17. 17. 作ったアプリ
  18. 18. アンケート結果をグラフで表示
  19. 19. 構成
  20. 20. 構成 ③集計結果を送信 ①画面表示 ②アンケート送信 ④データをプッシュ⑤グラフを更新
  21. 21. プッシュ送信
  22. 22. プッシュ送信サーバ側からすべてのクライアントに通知を出せる
  23. 23. それでは、デモへ→ https://gist.github.com/734888
  24. 24. 誰かがボタンを押すとデモ解説 全員のグラフが更新される
  25. 25. ・PusherとjqPlotについて・デモアプリ紹介・使ってみた感想
  26. 26. 使ってみた感想
  27. 27. jqPlot・とても楽、使いやすい・クロスブラウザすばらしい・Canvasなので、サーバに負荷が かからない
  28. 28. Pusher・サーバ側の知識が必要・とても使いやすい・外部サービスなので利用制限がある
  29. 29. 全体的にHTML5をラップする各種機能がすでに登場してきていてHTML標準でできることの幅が広がってきているので、今後が楽しみです。
  30. 30. ありがとうございました

×