Pusherとcanvasで作るリアルタイムグラフ
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 4,717 views
Uploaded on

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

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

More in: Career
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
4,717
On Slideshare
4,445
From Embeds
272
Number of Embeds
3

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 272

http://d.hatena.ne.jp 163
http://coderwall.com 80
http://tricknotes.hateblo.jp 29

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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