Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

5,663 views

Published on

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

Published in: Career
  • Be the first to comment

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. ありがとうございました

×