1. 2014/06/14 @tututen
聞くだけじゃもったいない！
観客と発表者の双方向通信を実現する
「投げ銭BOX」

2. 自己紹介
•CLR/H 参加者
•某IT企業 会社員
•三十路カウントダウン＠２年

4. 北見から来ました

5. パネルでポンが得意

6. ◯□◯□動画でのタグ

8. Ohotechの運営

9. 詳しくは
北海道企画で！

10. 提 供
CLR/H
Ohotech
AOSC

11. 投げ銭BOXとは

13. 作
者
石澤 大さん

14. Ohotech 特盛#05
で発表して頂きました

15. 発表者の評価を
アンケート等を介さず
リアルタイムで評価できる

16. 是非使いたい！

17. いくつかのハードル

18. WAN経由での通信非対応
（LAN環境必須）

19. iPhoneアプリしかない！

20. iPhone持ってないと
投げ銭出来ない！！

21. Webから投げ銭
出来るようにしよう！！

22. 用意したもの

23. Python
・Flask
・Twisted
・txosc

24. Python
・Flask
・Twisted
・txosc
Web Framework

25. OSC
Python
・Flask
・Twisted
・txosc
Web Framework

26. OSCとは？
•Open Sound Control (OSC)とは、電
子楽器（特にシンセサイザー）やコンピ
ュータなどの機器において音楽演奏デー
タをネットワーク経由でリアルタイムに
共有するための通信プロトコルである。

27. UDP 通信
Port 8999

28. UDP 通信
Port 8999
/path/to args1 args2 ...

29. UDP 通信
Port 8999
/mouse/button “y10”

30. 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 コード例

31. 作ったもの

32. 開発プロトタイプ

33. コントローラVer.1
見本
見本

34. @tomio2480 氏が
一晩で作成くれました！

35. でも、まだ問題が

36. WAN経由での通信非対応
（LAN環境必須）

37. お手元 壇上
/mouse/button “y10”
WAN経由で通信しよう？

38. VPNを使おう！！

39. お手元 壇上
VPS

40. お手元 壇上
VPS
HTTP VPN

41. お手元 壇上
VPS
POST

42. お手元 壇上
VPS
OSC
＼チャリーン／

43. Ohotech 特盛#08
実戦投入！！

44. 特盛＃08 前半

45. いい感じに評価されてる！

46. 後半戦

47. BOXを見る限り
盛況なプレゼン

48. ここでアンケートを
見てみましょう

49. 銭が多くなった発表

50. 何もしてないことでお賽銭
を稼ぐシステムでした
(`・ω・´)

51. 失敗すると評価される
この世界は厳しいなと思っ
た。なにもしてなくても評
価されるのは人望だなーと
思ったり？となったり。

52. プレゼンに対して
煽 り
の意味で銭を投げる

53. プレゼンに対して
非難・煽り
に対して銭を投げる
予定外の
投げ銭の使い方！

54. そんな反応の中…

55. ダメ銭
Dis銭
としての
新たな可能性！

56. とても前向きでした

57. 総 評

58. 1種類のコインだと評価の
善し悪しがわかりにくい
BOXをVPN−OSC経由だと
パケット詰まりを感じた
VPNの準備が大変

59. Next Step！

60. VPNの準備がネック
煽り銭の実装
herokuにデプロイ

61. VPNの準備がネック
↓
BOXのWebアプリ化

62. VPNの準備がネック
↓
BOXのWebアプリ化

63. BOXで物理演算使用
↓
HTML5でどうにか
↓
JS版Box2Dを使おう

64. BOXで物理演算使用
↓
HTML5でどうにか
↓
JS版Box2Dを使おう

65. BOXで物理演算使用
↓
HTML5でどうにか
↓
JS版Box2Dを使おう

66. Box2D.js
Box2DWeb
jsbox2d
Matter.js

67. Box2D.js
Box2DWeb
jsbox2d
Matter.js

68. 「Box2D Web」
で検索した結果

69. 単一ファイルで完結する
新しいのを基準に作成

70. Box2D.js
Box2DWeb
jsbox2d
Matter.js

71. 煽り銭の実装

72. herokuにデプロイ
↓
gunicornが必要
↓
Flask-SocketIOとの相性…

73. herokuにデプロイ
↓
gunicornが必要
↓
Flask-SocketIOとの相性…

74. herokuにデプロイ
↓
gunicornが必要
↓
Flask-SocketIOとの相性…

75. https://github.com/miguelgrinberg/Flask-SocketIO/issues/14

76. fixされてますが
上手く動かず…

77. ですので

78. Nodejsで作りなおす!
(14年5月19日)

79. 用意したもの

80. "socket.io": "^0.9.16"
"ejs": "^1.0.0"
"express": "^4.3.0"
"morgan": "^1.1.1"
"qrcode-npm": "0.0.3"

81. 移植はさくさく(5日)

82. Gitの使い方に四苦八苦

83. hg revert 相当?
git st 省略不可?
git push repo先 [???]
git commit [ここ] が省略できない?
公開鍵登録しての
Error: Permission denied (publickey)

84. heroku toolbelt
にも四苦八苦

85. install.shだけでは動かない
登録したパスワード忘れる…
ruby 1.8系で動作せず
※インストール後PATH通しましょう
公式DocsよりStackOverFlow

86. あとはスムーズ

87. 投げ銭使ってみたい方？

88. gitクライアント
heroku toolbelt
があれば5分で出来ます!

89. Demo
(https://github.com/ohotech/nagesen_web)

90. ね、簡単でしょ?

91. Ohotech 特盛#09
実戦投入！！

93. 運用上の問題
ソフト上の問題

94. 運用上の問題

95. ・煽り銭の扱い方
・プロジェクタ
・ネットの配備

96. ソフト上の問題

97. ・銭の桁上げ問題
・煽り銭表示可否
・スクリプト実行対策

98. 実践するたびに
問題発生

99. 創意工夫する
時期ですので
感想をお願いします！

100. 対戦しませんか？

101. 対戦しませんか？
ご静聴
ありがとう
ございました