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.
2014/06/14 @tututen
聞くだけじゃもったいない!
観客と発表者の双方向通信を実現する
「投げ銭BOX」
自己紹介
•CLR/H 参加者
•某IT企業 会社員
•三十路カウントダウン@2年
北見から来ました
パネルでポンが得意
◯□◯□動画でのタグ
Ohotechの運営
詳しくは
北海道企画で!
提 供
CLR/H
Ohotech
AOSC
投げ銭BOXとは
作
者
石澤 大さん
Ohotech 特盛#05
で発表して頂きました
発表者の評価を
アンケート等を介さず
リアルタイムで評価できる
是非使いたい!
いくつかのハードル
WAN経由での通信非対応
(LAN環境必須)
iPhoneアプリしかない!
iPhone持ってないと
投げ銭出来ない!!
Webから投げ銭
出来るようにしよう!!
用意したもの
Python
・Flask
・Twisted
・txosc
Python
・Flask
・Twisted
・txosc
Web Framework
OSC
Python
・Flask
・Twisted
・txosc
Web Framework
OSCとは?
•Open Sound Control (OSC)とは、電
子楽器(特にシンセサイザー)やコンピ
ュータなどの機器において音楽演奏デー
タをネットワーク経由でリアルタイムに
共有するための通信プロトコルである。
UDP 通信
Port 8999
UDP 通信
Port 8999
/path/to args1 args2 ...
UDP 通信
Port 8999
/mouse/button “y10”
from txosc import osc, sync
sender = sync.UdpSender('127.0.0.1', 8999)
osc_msg = osc.Message('/mouse/button', 'y10')
sende...
作ったもの
開発プロトタイプ
コントローラVer.1
見本
見本
@tomio2480 氏が
一晩で作成くれました!
でも、まだ問題が
WAN経由での通信非対応
(LAN環境必須)
お手元 壇上
/mouse/button “y10”
WAN経由で通信しよう?
VPNを使おう!!
お手元 壇上
VPS
お手元 壇上
VPS
HTTP VPN
お手元 壇上
VPS
POST
お手元 壇上
VPS
OSC
\チャリーン/
Ohotech 特盛#08
実戦投入!!
特盛#08 前半
いい感じに評価されてる!
後半戦
BOXを見る限り
盛況なプレゼン
ここでアンケートを
見てみましょう
銭が多くなった発表
何もしてないことでお賽銭
を稼ぐシステムでした
(`・ω・´)
失敗すると評価される
この世界は厳しいなと思っ
た。なにもしてなくても評
価されるのは人望だなーと
思ったり?となったり。
プレゼンに対して
煽 り
の意味で銭を投げる
プレゼンに対して
非難・煽り
に対して銭を投げる
予定外の
投げ銭の使い方!
そんな反応の中…
ダメ銭
Dis銭
としての
新たな可能性!
とても前向きでした
総  評
1種類のコインだと評価の
善し悪しがわかりにくい
BOXをVPN−OSC経由だと
パケット詰まりを感じた
VPNの準備が大変
Next Step!
VPNの準備がネック
煽り銭の実装
herokuにデプロイ
VPNの準備がネック
↓
BOXのWebアプリ化
VPNの準備がネック
↓
BOXのWebアプリ化
BOXで物理演算使用
↓
HTML5でどうにか
↓
JS版Box2Dを使おう
BOXで物理演算使用
↓
HTML5でどうにか
↓
JS版Box2Dを使おう
BOXで物理演算使用
↓
HTML5でどうにか
↓
JS版Box2Dを使おう
Box2D.js
Box2DWeb
jsbox2d
Matter.js
Box2D.js
Box2DWeb
jsbox2d
Matter.js
「Box2D Web」
で検索した結果
単一ファイルで完結する
新しいのを基準に作成
Box2D.js
Box2DWeb
jsbox2d
Matter.js
煽り銭の実装
herokuにデプロイ
↓
gunicornが必要
↓
Flask-SocketIOとの相性…
herokuにデプロイ
↓
gunicornが必要
↓
Flask-SocketIOとの相性…
herokuにデプロイ
↓
gunicornが必要
↓
Flask-SocketIOとの相性…
https://github.com/miguelgrinberg/Flask-SocketIO/issues/14
fixされてますが
上手く動かず…
ですので
Nodejsで作りなおす!
(14年5月19日)
用意したもの
"socket.io": "^0.9.16"
"ejs": "^1.0.0"
"express": "^4.3.0"
"morgan": "^1.1.1"
"qrcode-npm": "0.0.3"
移植はさくさく(5日)
Gitの使い方に四苦八苦
hg revert 相当?
git st 省略不可? 
git push repo先 [???]
git commit [ここ] が省略できない?
公開鍵登録しての
Error: Permission denied (publickey)
heroku toolbelt
にも四苦八苦
install.shだけでは動かない
登録したパスワード忘れる…
ruby 1.8系で動作せず
※インストール後PATH通しましょう
公式DocsよりStackOverFlow
あとはスムーズ
投げ銭使ってみたい方?
gitクライアント
heroku toolbelt
があれば5分で出来ます!
Demo
(https://github.com/ohotech/nagesen_web)
ね、簡単でしょ?
Ohotech 特盛#09
実戦投入!!
運用上の問題
ソフト上の問題
運用上の問題
・煽り銭の扱い方
・プロジェクタ
・ネットの配備
ソフト上の問題
・銭の桁上げ問題
・煽り銭表示可否
・スクリプト実行対策
実践するたびに
問題発生
創意工夫する
時期ですので
感想をお願いします!
対戦しませんか?
対戦しませんか?
ご静聴
ありがとう
ございました
Osc2014 聞くだけじゃもったいない!観客と発表者の双方向通信を実現する「投げ銭box」
Osc2014 聞くだけじゃもったいない!観客と発表者の双方向通信を実現する「投げ銭box」
Osc2014 聞くだけじゃもったいない!観客と発表者の双方向通信を実現する「投げ銭box」
Osc2014 聞くだけじゃもったいない!観客と発表者の双方向通信を実現する「投げ銭box」
Upcoming SlideShare
Loading in …5
×

Osc2014 聞くだけじゃもったいない!観客と発表者の双方向通信を実現する「投げ銭box」

2,784 views

Published on

  • Be the first to comment

Osc2014 聞くだけじゃもったいない!観客と発表者の双方向通信を実現する「投げ銭box」

  1. 1. 2014/06/14 @tututen 聞くだけじゃもったいない! 観客と発表者の双方向通信を実現する 「投げ銭BOX」
  2. 2. 自己紹介 •CLR/H 参加者 •某IT企業 会社員 •三十路カウントダウン@2年
  3. 3. 北見から来ました
  4. 4. パネルでポンが得意
  5. 5. ◯□◯□動画でのタグ
  6. 6. Ohotechの運営
  7. 7. 詳しくは 北海道企画で!
  8. 8. 提 供 CLR/H Ohotech AOSC
  9. 9. 投げ銭BOXとは
  10. 10. 作 者 石澤 大さん
  11. 11. Ohotech 特盛#05 で発表して頂きました
  12. 12. 発表者の評価を アンケート等を介さず リアルタイムで評価できる
  13. 13. 是非使いたい!
  14. 14. いくつかのハードル
  15. 15. WAN経由での通信非対応 (LAN環境必須)
  16. 16. iPhoneアプリしかない!
  17. 17. iPhone持ってないと 投げ銭出来ない!!
  18. 18. Webから投げ銭 出来るようにしよう!!
  19. 19. 用意したもの
  20. 20. Python ・Flask ・Twisted ・txosc
  21. 21. Python ・Flask ・Twisted ・txosc Web Framework
  22. 22. OSC Python ・Flask ・Twisted ・txosc Web Framework
  23. 23. OSCとは? •Open Sound Control (OSC)とは、電 子楽器(特にシンセサイザー)やコンピ ュータなどの機器において音楽演奏デー タをネットワーク経由でリアルタイムに 共有するための通信プロトコルである。
  24. 24. UDP 通信 Port 8999
  25. 25. UDP 通信 Port 8999 /path/to args1 args2 ...
  26. 26. UDP 通信 Port 8999 /mouse/button “y10”
  27. 27. from txosc import osc, sync sender = sync.UdpSender('127.0.0.1', 8999) osc_msg = osc.Message('/mouse/button', 'y10') sender.send(osc_msg) sender.close() Python コード例
  28. 28. 作ったもの
  29. 29. 開発プロトタイプ
  30. 30. コントローラVer.1 見本 見本
  31. 31. @tomio2480 氏が 一晩で作成くれました!
  32. 32. でも、まだ問題が
  33. 33. WAN経由での通信非対応 (LAN環境必須)
  34. 34. お手元 壇上 /mouse/button “y10” WAN経由で通信しよう?
  35. 35. VPNを使おう!!
  36. 36. お手元 壇上 VPS
  37. 37. お手元 壇上 VPS HTTP VPN
  38. 38. お手元 壇上 VPS POST
  39. 39. お手元 壇上 VPS OSC \チャリーン/
  40. 40. Ohotech 特盛#08 実戦投入!!
  41. 41. 特盛#08 前半
  42. 42. いい感じに評価されてる!
  43. 43. 後半戦
  44. 44. BOXを見る限り 盛況なプレゼン
  45. 45. ここでアンケートを 見てみましょう
  46. 46. 銭が多くなった発表
  47. 47. 何もしてないことでお賽銭 を稼ぐシステムでした (`・ω・´)
  48. 48. 失敗すると評価される この世界は厳しいなと思っ た。なにもしてなくても評 価されるのは人望だなーと 思ったり?となったり。
  49. 49. プレゼンに対して 煽 り の意味で銭を投げる
  50. 50. プレゼンに対して 非難・煽り に対して銭を投げる 予定外の 投げ銭の使い方!
  51. 51. そんな反応の中…
  52. 52. ダメ銭 Dis銭 としての 新たな可能性!
  53. 53. とても前向きでした
  54. 54. 総  評
  55. 55. 1種類のコインだと評価の 善し悪しがわかりにくい BOXをVPN−OSC経由だと パケット詰まりを感じた VPNの準備が大変
  56. 56. Next Step!
  57. 57. VPNの準備がネック 煽り銭の実装 herokuにデプロイ
  58. 58. VPNの準備がネック ↓ BOXのWebアプリ化
  59. 59. VPNの準備がネック ↓ BOXのWebアプリ化
  60. 60. BOXで物理演算使用 ↓ HTML5でどうにか ↓ JS版Box2Dを使おう
  61. 61. BOXで物理演算使用 ↓ HTML5でどうにか ↓ JS版Box2Dを使おう
  62. 62. BOXで物理演算使用 ↓ HTML5でどうにか ↓ JS版Box2Dを使おう
  63. 63. Box2D.js Box2DWeb jsbox2d Matter.js
  64. 64. Box2D.js Box2DWeb jsbox2d Matter.js
  65. 65. 「Box2D Web」 で検索した結果
  66. 66. 単一ファイルで完結する 新しいのを基準に作成
  67. 67. Box2D.js Box2DWeb jsbox2d Matter.js
  68. 68. 煽り銭の実装
  69. 69. herokuにデプロイ ↓ gunicornが必要 ↓ Flask-SocketIOとの相性…
  70. 70. herokuにデプロイ ↓ gunicornが必要 ↓ Flask-SocketIOとの相性…
  71. 71. herokuにデプロイ ↓ gunicornが必要 ↓ Flask-SocketIOとの相性…
  72. 72. https://github.com/miguelgrinberg/Flask-SocketIO/issues/14
  73. 73. fixされてますが 上手く動かず…
  74. 74. ですので
  75. 75. Nodejsで作りなおす! (14年5月19日)
  76. 76. 用意したもの
  77. 77. "socket.io": "^0.9.16" "ejs": "^1.0.0" "express": "^4.3.0" "morgan": "^1.1.1" "qrcode-npm": "0.0.3"
  78. 78. 移植はさくさく(5日)
  79. 79. Gitの使い方に四苦八苦
  80. 80. hg revert 相当? git st 省略不可?  git push repo先 [???] git commit [ここ] が省略できない? 公開鍵登録しての Error: Permission denied (publickey)
  81. 81. heroku toolbelt にも四苦八苦
  82. 82. install.shだけでは動かない 登録したパスワード忘れる… ruby 1.8系で動作せず ※インストール後PATH通しましょう 公式DocsよりStackOverFlow
  83. 83. あとはスムーズ
  84. 84. 投げ銭使ってみたい方?
  85. 85. gitクライアント heroku toolbelt があれば5分で出来ます!
  86. 86. Demo (https://github.com/ohotech/nagesen_web)
  87. 87. ね、簡単でしょ?
  88. 88. Ohotech 特盛#09 実戦投入!!
  89. 89. 運用上の問題 ソフト上の問題
  90. 90. 運用上の問題
  91. 91. ・煽り銭の扱い方 ・プロジェクタ ・ネットの配備
  92. 92. ソフト上の問題
  93. 93. ・銭の桁上げ問題 ・煽り銭表示可否 ・スクリプト実行対策
  94. 94. 実践するたびに 問題発生
  95. 95. 創意工夫する 時期ですので 感想をお願いします!
  96. 96. 対戦しませんか?
  97. 97. 対戦しませんか? ご静聴 ありがとう ございました

×