Submit Search
Upload
Pusherとcanvasで作るリアルタイムグラフ
•
1 like
•
3,585 views
Ryunosuke SATO
Follow
Sapporo.js-2010.11.27 での発表資料です。
Read less
Read more
Career
Report
Share
Report
Share
1 of 30
Download now
Download to read offline
Recommended
20130202 fe勉強会 canvas
20130202 fe勉強会 canvas
Keisuke Aizawa
Webページで学ぶJavaScript2013 第7回
Webページで学ぶJavaScript2013 第7回
京大 マイコンクラブ
【もくもく会】Windows環境でSassを使う!Gulp導入のキモ
【もくもく会】Windows環境でSassを使う!Gulp導入のキモ
Masako Miyazaki
Yeoman RIAビルドツール超入門
Yeoman RIAビルドツール超入門
Masakazu Muraoka
Chart.jsで簡単にグラフを描画する
Chart.jsで簡単にグラフを描画する
iPride Co., Ltd.
LT.20 Wordpress x nuxt.jsで実現するSPA
LT.20 Wordpress x nuxt.jsで実現するSPA
GIG inc.
Web班
Web班
XMLProJ2014
デザイナーさんでもできる Browsersync からはじめる作業効率化
デザイナーさんでもできる Browsersync からはじめる作業効率化
Kumiko SHIMIZU
Recommended
20130202 fe勉強会 canvas
20130202 fe勉強会 canvas
Keisuke Aizawa
Webページで学ぶJavaScript2013 第7回
Webページで学ぶJavaScript2013 第7回
京大 マイコンクラブ
【もくもく会】Windows環境でSassを使う!Gulp導入のキモ
【もくもく会】Windows環境でSassを使う!Gulp導入のキモ
Masako Miyazaki
Yeoman RIAビルドツール超入門
Yeoman RIAビルドツール超入門
Masakazu Muraoka
Chart.jsで簡単にグラフを描画する
Chart.jsで簡単にグラフを描画する
iPride Co., Ltd.
LT.20 Wordpress x nuxt.jsで実現するSPA
LT.20 Wordpress x nuxt.jsで実現するSPA
GIG inc.
Web班
Web班
XMLProJ2014
デザイナーさんでもできる Browsersync からはじめる作業効率化
デザイナーさんでもできる Browsersync からはじめる作業効率化
Kumiko SHIMIZU
Angular js meets cakephp at cloud on the beach 2014 前夜祭
Angular js meets cakephp at cloud on the beach 2014 前夜祭
司 知花
Wcan12
Wcan12
occhii105
Touhou Project on JavaScript
Touhou Project on JavaScript
sairoutine
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
Kumiko SHIMIZU
kanazawa.rb LT gem
kanazawa.rb LT gem
BeMarble
自動化ツール「Grunt.js」について
自動化ツール「Grunt.js」について
Seiko Kuchida
Fukuoka.php 第一回勉強会 LTスライド
Fukuoka.php 第一回勉強会 LTスライド
YUKI YAMAGUCHI
Web frontend performance tuning
Web frontend performance tuning
ssuser3c214d
Let's make quickly mock up by bootstrap.
Let's make quickly mock up by bootstrap.
matsuohideaki
Make TypingGame in JavaScript
Make TypingGame in JavaScript
undertale1
201311 webデザイナとエンジニアのチームワークを加速させるテンプレートエンジンmixer2 devlove現場甲子園
201311 webデザイナとエンジニアのチームワークを加速させるテンプレートエンジンmixer2 devlove現場甲子園
Y Watanabe
RGで生き抜くためのレンタルサーバー講座ヽ(•̀ω•́ )ゝ✧
RGで生き抜くためのレンタルサーバー講座ヽ(•̀ω•́ )ゝ✧
Mariko Kobayashi
Cakecon xoops cubeなのにcake-phpを使う
Cakecon xoops cubeなのにcake-phpを使う
ha1t
2013-09 テンプレートエンジンMixer2紹介 HTML5J&JJUG合同勉強会LT
2013-09 テンプレートエンジンMixer2紹介 HTML5J&JJUG合同勉強会LT
Y Watanabe
CG技術を魔法に喩えて分かりやすく!
CG技術を魔法に喩えて分かりやすく!
mamo20
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
Hajime Ogushi
Bootstrap
Bootstrap
Masaki Kusuhata
日曜プログラマーとigoogle先生
日曜プログラマーとigoogle先生
Yuusuke Takeuchi
ソースコードをAAに変換するやつやってみた
ソースコードをAAに変換するやつやってみた
Takahashi Koki
Nightmarejs
Nightmarejs
和樹 川端
Bidirektionale Verbindungen für Webanwendungen
Bidirektionale Verbindungen für Webanwendungen
Marco Rico Gomez
テスト
テスト
Masashi Sato
More Related Content
What's hot
Angular js meets cakephp at cloud on the beach 2014 前夜祭
Angular js meets cakephp at cloud on the beach 2014 前夜祭
司 知花
Wcan12
Wcan12
occhii105
Touhou Project on JavaScript
Touhou Project on JavaScript
sairoutine
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
Kumiko SHIMIZU
kanazawa.rb LT gem
kanazawa.rb LT gem
BeMarble
自動化ツール「Grunt.js」について
自動化ツール「Grunt.js」について
Seiko Kuchida
Fukuoka.php 第一回勉強会 LTスライド
Fukuoka.php 第一回勉強会 LTスライド
YUKI YAMAGUCHI
Web frontend performance tuning
Web frontend performance tuning
ssuser3c214d
Let's make quickly mock up by bootstrap.
Let's make quickly mock up by bootstrap.
matsuohideaki
Make TypingGame in JavaScript
Make TypingGame in JavaScript
undertale1
201311 webデザイナとエンジニアのチームワークを加速させるテンプレートエンジンmixer2 devlove現場甲子園
201311 webデザイナとエンジニアのチームワークを加速させるテンプレートエンジンmixer2 devlove現場甲子園
Y Watanabe
RGで生き抜くためのレンタルサーバー講座ヽ(•̀ω•́ )ゝ✧
RGで生き抜くためのレンタルサーバー講座ヽ(•̀ω•́ )ゝ✧
Mariko Kobayashi
Cakecon xoops cubeなのにcake-phpを使う
Cakecon xoops cubeなのにcake-phpを使う
ha1t
2013-09 テンプレートエンジンMixer2紹介 HTML5J&JJUG合同勉強会LT
2013-09 テンプレートエンジンMixer2紹介 HTML5J&JJUG合同勉強会LT
Y Watanabe
CG技術を魔法に喩えて分かりやすく!
CG技術を魔法に喩えて分かりやすく!
mamo20
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
Hajime Ogushi
Bootstrap
Bootstrap
Masaki Kusuhata
日曜プログラマーとigoogle先生
日曜プログラマーとigoogle先生
Yuusuke Takeuchi
ソースコードをAAに変換するやつやってみた
ソースコードをAAに変換するやつやってみた
Takahashi Koki
Nightmarejs
Nightmarejs
和樹 川端
What's hot
(20)
Angular js meets cakephp at cloud on the beach 2014 前夜祭
Angular js meets cakephp at cloud on the beach 2014 前夜祭
Wcan12
Wcan12
Touhou Project on JavaScript
Touhou Project on JavaScript
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
kanazawa.rb LT gem
kanazawa.rb LT gem
自動化ツール「Grunt.js」について
自動化ツール「Grunt.js」について
Fukuoka.php 第一回勉強会 LTスライド
Fukuoka.php 第一回勉強会 LTスライド
Web frontend performance tuning
Web frontend performance tuning
Let's make quickly mock up by bootstrap.
Let's make quickly mock up by bootstrap.
Make TypingGame in JavaScript
Make TypingGame in JavaScript
201311 webデザイナとエンジニアのチームワークを加速させるテンプレートエンジンmixer2 devlove現場甲子園
201311 webデザイナとエンジニアのチームワークを加速させるテンプレートエンジンmixer2 devlove現場甲子園
RGで生き抜くためのレンタルサーバー講座ヽ(•̀ω•́ )ゝ✧
RGで生き抜くためのレンタルサーバー講座ヽ(•̀ω•́ )ゝ✧
Cakecon xoops cubeなのにcake-phpを使う
Cakecon xoops cubeなのにcake-phpを使う
2013-09 テンプレートエンジンMixer2紹介 HTML5J&JJUG合同勉強会LT
2013-09 テンプレートエンジンMixer2紹介 HTML5J&JJUG合同勉強会LT
CG技術を魔法に喩えて分かりやすく!
CG技術を魔法に喩えて分かりやすく!
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
Bootstrap
Bootstrap
日曜プログラマーとigoogle先生
日曜プログラマーとigoogle先生
ソースコードをAAに変換するやつやってみた
ソースコードをAAに変換するやつやってみた
Nightmarejs
Nightmarejs
Viewers also liked
Bidirektionale Verbindungen für Webanwendungen
Bidirektionale Verbindungen für Webanwendungen
Marco Rico Gomez
テスト
テスト
Masashi Sato
HTML5など社内勉強会 Vol.5 - 入門JavaScript [非同期通信]
HTML5など社内勉強会 Vol.5 - 入門JavaScript [非同期通信]
George Harada
HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋
HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋
Staffnet_Inc
Canvas勉強会
Canvas勉強会
Tsutomu Kawamura
『Business Model Canvas ~再演~』第15回 POStudy 〜プロダクトオーナーシップ勉強会〜
『Business Model Canvas ~再演~』第15回 POStudy 〜プロダクトオーナーシップ勉強会〜
満徳 関
初心者向けJavaScript/HTML5ゲームプログラミング
初心者向けJavaScript/HTML5ゲームプログラミング
Kazuki Miyanishi
Web業務アプリの新しい潮流
Web業務アプリの新しい潮流
久司 中村
Cordovaで業務アプリを作る 〜その事例とノウハウ〜
Cordovaで業務アプリを作る 〜その事例とノウハウ〜
Kenichi Inoue
HTML5でギャルゲーを作れるか?
HTML5でギャルゲーを作れるか?
deflis
Html canvas shooting_and_performanceup
Html canvas shooting_and_performanceup
Yohei Munesada
次世代Web業務アプリケーション
次世代Web業務アプリケーション
Fumio SAGAWA
Seleniumの薄っすい話 百八式 @ 第3回 日本Seleniumユーザーコミュニティ勉強会
Seleniumの薄っすい話 百八式 @ 第3回 日本Seleniumユーザーコミュニティ勉強会
Hiroshi Toda
第3回日本seleniumユーザーコミュニティ勉強会
第3回日本seleniumユーザーコミュニティ勉強会
Nozomi Ito
ルータでルータのプレゼンをした話。 ~# 技術解説
ルータでルータのプレゼンをした話。 ~# 技術解説
Takumi Sueda
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
アシアル株式会社
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
Fumio SAGAWA
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Hiroaki Okubo
OSSのブラウザ自動テストツール「Selenium」を使った、開発・テストの効率化
OSSのブラウザ自動テストツール「Selenium」を使った、開発・テストの効率化
Nozomi Ito
Selenium Antipatterns
Selenium Antipatterns
Jumpei Miyata
Viewers also liked
(20)
Bidirektionale Verbindungen für Webanwendungen
Bidirektionale Verbindungen für Webanwendungen
テスト
テスト
HTML5など社内勉強会 Vol.5 - 入門JavaScript [非同期通信]
HTML5など社内勉強会 Vol.5 - 入門JavaScript [非同期通信]
HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋
HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋
Canvas勉強会
Canvas勉強会
『Business Model Canvas ~再演~』第15回 POStudy 〜プロダクトオーナーシップ勉強会〜
『Business Model Canvas ~再演~』第15回 POStudy 〜プロダクトオーナーシップ勉強会〜
初心者向けJavaScript/HTML5ゲームプログラミング
初心者向けJavaScript/HTML5ゲームプログラミング
Web業務アプリの新しい潮流
Web業務アプリの新しい潮流
Cordovaで業務アプリを作る 〜その事例とノウハウ〜
Cordovaで業務アプリを作る 〜その事例とノウハウ〜
HTML5でギャルゲーを作れるか?
HTML5でギャルゲーを作れるか?
Html canvas shooting_and_performanceup
Html canvas shooting_and_performanceup
次世代Web業務アプリケーション
次世代Web業務アプリケーション
Seleniumの薄っすい話 百八式 @ 第3回 日本Seleniumユーザーコミュニティ勉強会
Seleniumの薄っすい話 百八式 @ 第3回 日本Seleniumユーザーコミュニティ勉強会
第3回日本seleniumユーザーコミュニティ勉強会
第3回日本seleniumユーザーコミュニティ勉強会
ルータでルータのプレゼンをした話。 ~# 技術解説
ルータでルータのプレゼンをした話。 ~# 技術解説
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
OSSのブラウザ自動テストツール「Selenium」を使った、開発・テストの効率化
OSSのブラウザ自動テストツール「Selenium」を使った、開発・テストの効率化
Selenium Antipatterns
Selenium Antipatterns
More from Ryunosuke SATO
片手間JS on Rails
片手間JS on Rails
Ryunosuke SATO
Ember コミュニティとわたし
Ember コミュニティとわたし
Ryunosuke SATO
gem の探し方
gem の探し方
Ryunosuke SATO
Rails あるある
Rails あるある
Ryunosuke SATO
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
Ryunosuke SATO
もっとはじめる Ember.js !! ~ Getting started with Ember.js more ~
もっとはじめる Ember.js !! ~ Getting started with Ember.js more ~
Ryunosuke SATO
はじめる Ember.js!! ~ Getting started with ember.js ~
はじめる Ember.js!! ~ Getting started with ember.js ~
Ryunosuke SATO
How to relaunch "sapporojs.org" ~Introduction to middleman~
How to relaunch "sapporojs.org" ~Introduction to middleman~
Ryunosuke SATO
Introduction for Browser Side MVC
Introduction for Browser Side MVC
Ryunosuke SATO
コミュニティのある風景
コミュニティのある風景
Ryunosuke SATO
capybara で快適なテスト生活を
capybara で快適なテスト生活を
Ryunosuke SATO
Testable JavaScript
Testable JavaScript
Ryunosuke SATO
Social coding をもっと楽しみたいあなたへ
Social coding をもっと楽しみたいあなたへ
Ryunosuke SATO
Clean Javascript
Clean Javascript
Ryunosuke SATO
Node.jsってどうなの?
Node.jsってどうなの?
Ryunosuke SATO
アジャイル的アプローチから見えてきたこと
アジャイル的アプローチから見えてきたこと
Ryunosuke SATO
脱レガシー化計画
脱レガシー化計画
Ryunosuke SATO
ServerSideJavaScript
ServerSideJavaScript
Ryunosuke SATO
More from Ryunosuke SATO
(18)
片手間JS on Rails
片手間JS on Rails
Ember コミュニティとわたし
Ember コミュニティとわたし
gem の探し方
gem の探し方
Rails あるある
Rails あるある
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
もっとはじめる Ember.js !! ~ Getting started with Ember.js more ~
もっとはじめる Ember.js !! ~ Getting started with Ember.js more ~
はじめる Ember.js!! ~ Getting started with ember.js ~
はじめる Ember.js!! ~ Getting started with ember.js ~
How to relaunch "sapporojs.org" ~Introduction to middleman~
How to relaunch "sapporojs.org" ~Introduction to middleman~
Introduction for Browser Side MVC
Introduction for Browser Side MVC
コミュニティのある風景
コミュニティのある風景
capybara で快適なテスト生活を
capybara で快適なテスト生活を
Testable JavaScript
Testable JavaScript
Social coding をもっと楽しみたいあなたへ
Social coding をもっと楽しみたいあなたへ
Clean Javascript
Clean Javascript
Node.jsってどうなの?
Node.jsってどうなの?
アジャイル的アプローチから見えてきたこと
アジャイル的アプローチから見えてきたこと
脱レガシー化計画
脱レガシー化計画
ServerSideJavaScript
ServerSideJavaScript
Pusherとcanvasで作るリアルタイムグラフ
1.
Phusherと Canvas
作る で リアルタイムグラフ 佐藤 竜之介 @tricknotes Sapporo.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.
ありがとうございました
Download now