Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
みんなで同時プレイする
クイズWebアプリで
CodeQuizに挑戦!
― オープンソースライブラリで実現するリアルタイムWebアプリ ―
オープンソースカンファレンス 2013 Hokkaido
CLR/H プレゼンツ
At first...
• Twitter, facebook 等への SNS投稿歓迎
• ハッシュタグは #clrh84でよろしくおねがいします。
Let me
introduce myself.
自己紹介させていただきます
勉強会コミュニティ
CLR/H
Why
CodeQuiz?
なぜコードクイズ?
勉強会コミュニティ & 宿泊イベント
Code 2013 in 定山渓
QUIZ WEBAPP
Let’s Play!
早速プレイ!
http://goo.gl/Do4RLU
https://github.com/jsakamoto/quiz-webapp
GNU GPL v2 License
How does it
work?
仕組み
ASP.NET
SignalR
https://github.com/SignalR/SignalR
Apache 2.0 License
SignalR
Supported Transport
•WebSoket
•Server-Sent Events
•Forever Frame
•Long polling
Let’s build it!
作ってみよう!
Express 2012 for Web
http://www.microsoft.com/visualstudio/jpn/
downloads#d-express-web
How to
implementation?
実装
Browser Server
public class Hub1 : Hub
{
public void Foo(bool newState)
{
Clients.All.Bar(newState);
}
}
Browser Server
public class Hub1 : Hub
{
public void Foo(bool newState)
{
Clients.All.Bar(newState);
}
}
Browser Server
public class Hub1 : Hub
{
public void Foo(bool newState)
{
Clients.All.Bar(newState);
}
}
Browser Server
$(function () {
v...
public class Hub1 : Hub
{
public void Foo(bool newState)
{
Clients.All.Bar(newState);
}
}
Browser Server
$(function () {
v...
public class Hub1 : Hub
{
public void Foo(bool newState)
{
Clients.All.Bar(newState);
}
}
Browser Server
$(function () {
v...
public class Hub1 : Hub
{
public void Foo(bool newState)
{
Clients.All.Bar(newState);
}
}
Browser Server
$(function () {
v...
Browser Server
public class Hub1 : Hub
{
public void Foo(bool newState)
{
}
}
$(function () {
var conn = $.hubConnection()...
public class Hub1 : Hub
{
public void Foo(bool newState)
{
Clients.All.Bar(newState);
}
}
Browser Server
$(function () {
v...
$(function () {
var conn = $.hubConnection();
var hub1 = conn.createHubProxy('Hub1');
hub1.on('Bar', function (newState) {...
$(function () {
var conn = $.hubConnection();
var hub1 = conn.createHubProxy('Hub1');
hub1.on('Bar', function (newState) {...
$(function () {
var conn = $.hubConnection();
var hub1 = conn.createHubProxy('Hub1');
hub1.on('Bar',
function (newState) {...
$(function () {
var conn = $.hubConnection();
var hub1 = conn.createHubProxy('Hub1');
hub1.on('Bar',
function (newState) {...
https://github.com/sample-by-jsakamoto/SampleOfSignalR
GNU GPL v2 License
Let’s Publish It!
ネットに公開してみよう!
AppHarbor
https://appharbor.com/
Git
Conclusion
まとめ
SignalR is useful & wonderful!
• Webアプリで、Webサーバー側からブラウザへ呼び出しを発射できる
• Long Poling から Websocket まで、通信技術を意識しないでできる
• サーバー側環境と...
Learn, Practice, Share.
&
Fork, Commit, Pull request.
Thank you!
Prochain SlideShare
Chargement dans…5
×

ASP.NET SignalR によるクイズWebアプリ 「みんなで同時プレイするWebアプリでCodeQuizに挑戦!」

  • Identifiez-vous pour voir les commentaires

ASP.NET SignalR によるクイズWebアプリ 「みんなで同時プレイするWebアプリでCodeQuizに挑戦!」

  1. 1. みんなで同時プレイする クイズWebアプリで CodeQuizに挑戦! ― オープンソースライブラリで実現するリアルタイムWebアプリ ― オープンソースカンファレンス 2013 Hokkaido CLR/H プレゼンツ
  2. 2. At first... • Twitter, facebook 等への SNS投稿歓迎 • ハッシュタグは #clrh84でよろしくおねがいします。
  3. 3. Let me introduce myself. 自己紹介させていただきます
  4. 4. 勉強会コミュニティ CLR/H
  5. 5. Why CodeQuiz? なぜコードクイズ?
  6. 6. 勉強会コミュニティ & 宿泊イベント Code 2013 in 定山渓
  7. 7. QUIZ WEBAPP Let’s Play! 早速プレイ!
  8. 8. http://goo.gl/Do4RLU
  9. 9. https://github.com/jsakamoto/quiz-webapp GNU GPL v2 License
  10. 10. How does it work? 仕組み
  11. 11. ASP.NET SignalR https://github.com/SignalR/SignalR Apache 2.0 License
  12. 12. SignalR Supported Transport •WebSoket •Server-Sent Events •Forever Frame •Long polling
  13. 13. Let’s build it! 作ってみよう!
  14. 14. Express 2012 for Web http://www.microsoft.com/visualstudio/jpn/ downloads#d-express-web
  15. 15. How to implementation? 実装
  16. 16. Browser Server
  17. 17. public class Hub1 : Hub { public void Foo(bool newState) { Clients.All.Bar(newState); } } Browser Server
  18. 18. public class Hub1 : Hub { public void Foo(bool newState) { Clients.All.Bar(newState); } } Browser Server
  19. 19. public class Hub1 : Hub { public void Foo(bool newState) { Clients.All.Bar(newState); } } Browser Server $(function () { var conn = $.hubConnection(); var hub1 = conn.createHubProxy('Hub1'); conn.start(); var state = false; $('#button').click(function(){ state = !state; hub1.invoke('Foo', state); }); });
  20. 20. public class Hub1 : Hub { public void Foo(bool newState) { Clients.All.Bar(newState); } } Browser Server $(function () { var conn = $.hubConnection(); var hub1 = conn.createHubProxy('Hub1'); conn.start(); var state = false; $('#button').click(function(){ state = !state; hub1.invoke('Foo', state); }); });
  21. 21. public class Hub1 : Hub { public void Foo(bool newState) { Clients.All.Bar(newState); } } Browser Server $(function () { var conn = $.hubConnection(); var hub1 = conn.createHubProxy('Hub1'); conn.start(); var state = false; $('#button').click(function(){ state = !state; hub1.invoke('Foo', state); }); });
  22. 22. public class Hub1 : Hub { public void Foo(bool newState) { Clients.All.Bar(newState); } } Browser Server $(function () { var conn = $.hubConnection(); var hub1 = conn.createHubProxy('Hub1'); conn.start(); var state = false; $('#button').click(function(){ state = !state; hub1.invoke('Foo', state); }); });
  23. 23. Browser Server public class Hub1 : Hub { public void Foo(bool newState) { } } $(function () { var conn = $.hubConnection(); var hub1 = conn.createHubProxy('Hub1'); conn.start(); var state = false; $('#button').click(function(){ state = !state; hub1.invoke('Foo', state); }); });
  24. 24. public class Hub1 : Hub { public void Foo(bool newState) { Clients.All.Bar(newState); } } Browser Server $(function () { var conn = $.hubConnection(); var hub1 = conn.createHubProxy('Hub1'); conn.start(); var state = false; $('#button').click(function(){ state = !state; hub1.invoke('Foo', state); }); });
  25. 25. $(function () { var conn = $.hubConnection(); var hub1 = conn.createHubProxy('Hub1'); hub1.on('Bar', function (newState) { alert(newState); }); conn.start(); }); public class Hub1 : Hub { public void Foo(bool newState) { Clients.All.Bar(newState); } } $(function () { var conn = $.hubConnection(); var hub1 = conn.createHubProxy('Hub1'); conn.start(); var state = false; $('#button').click(function(){ state = !state; hub1.invoke('Foo', state); }); }); Browser Server
  26. 26. $(function () { var conn = $.hubConnection(); var hub1 = conn.createHubProxy('Hub1'); hub1.on('Bar', function (newState) { alert(newState); }); conn.start(); }); public class Hub1 : Hub { public void Foo(bool newState) { Clients.All.Bar(newState); } } $(function () { var conn = $.hubConnection(); var hub1 = conn.createHubProxy('Hub1'); conn.start(); var state = false; $('#button').click(function(){ state = !state; hub1.invoke('Foo', state); }); }); Browser Server
  27. 27. $(function () { var conn = $.hubConnection(); var hub1 = conn.createHubProxy('Hub1'); hub1.on('Bar', function (newState) { alert(newState); }); conn.start(); }); public class Hub1 : Hub { public void Foo(bool newState) { Clients.All.Bar(newState); } } $(function () { var conn = $.hubConnection(); var hub1 = conn.createHubProxy('Hub1'); conn.start(); var state = false; $('#button').click(function(){ state = !state; hub1.invoke('Foo', state); }); }); Browser Server
  28. 28. $(function () { var conn = $.hubConnection(); var hub1 = conn.createHubProxy('Hub1'); hub1.on('Bar', function (newState) { alert(newState); }); conn.start(); }); public class Hub1 : Hub { public void Foo(bool newState) { Clients.All.Bar(newState); } } $(function () { var conn = $.hubConnection(); var hub1 = conn.createHubProxy('Hub1'); conn.start(); var state = false; $('#button').click(function(){ state = !state; hub1.invoke('Foo', state); }); }); Browser Server
  29. 29. https://github.com/sample-by-jsakamoto/SampleOfSignalR GNU GPL v2 License
  30. 30. Let’s Publish It! ネットに公開してみよう!
  31. 31. AppHarbor https://appharbor.com/
  32. 32. Git
  33. 33. Conclusion まとめ
  34. 34. SignalR is useful & wonderful! • Webアプリで、Webサーバー側からブラウザへ呼び出しを発射できる • Long Poling から Websocket まで、通信技術を意識しないでできる • サーバー側環境とか相手先デバイスとか関係なくできる • 通信のための設定とか不要でできる • すべてSignalRが実行時に環境に応じて最適にやってくれる
  35. 35. Learn, Practice, Share. & Fork, Commit, Pull request. Thank you!

×