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')
sender.send(osc_msg)
sender.close()
Python コード例
作ったもの
開発プロトタイプ
コントローラ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」