JSオジサン #6 「まさかの3日間連続開催だよ！」1日目 https://atnd.org/events/71989

1. 基板とブラウザと私

2. 自己紹介
若狭 正生
フリーランスです。
スベリ芸と巻き込まれ事故が
得意です。

3. 前回までのJSおじさん
※2014年9月 JSおじさん #3

4. 今回のJSおじさん

5. 何が作りたかったの？
QRコードを読むだけで、あなたのスマホが
ロボットの頭脳になる。
• インストールとかしないでどこまで出来
るのか？
• Web標準技術ってヤバいを伝えたい。

6. Maker Faire Tokyoに出しました

7. 何を使ったの？

8. 何を使ったの？
• Android ( Xperia Z3 Tablet Compact )
• OTG USBケーブル
• 仮想MIDI機器 ( Arduino UNO )
• モータードライバ ( SN754410NE )
• 車 (タミヤ アームクローラー工作セット)
• サーボモーター ( SG92 )
• ミニ2軸カメラマウント ( 不明な中華もの )
• その他、車内用タブレット台、
100円ショップのクリップ(のケース)
合計 １万円くらい ( Android以外で )

9. 何を使ったの？
Web MIDI API
getUserMedia
headtrackr.js
Moco For
LUFA
Webカメラ
Chrome 44 以降
Arduino
モータードライバモーター × 2 サーボ × 4

10. #include <MIDI.h>
#include <Servo.h>
Servo servoR1;
void setup(){
MIDI.begin(1);
MIDI.setHandleNoteOn(HandleNoteOn);
servoR1.attach(8);
}
void HandleNoteOn (byte ch, byte note, byte velo){
if(note==60){
servoR1.write(velo*1.4173228);
}
}
※ 思いっきり端折ってます

11. var outputs = [];
navigator.requestMIDIAccess().then(function(midi){
var ot = midi.outputs.values();
for(var o = ot.next(); !o.done; o = ot.next()){
outputs.push(o.value);
}
}
function sendMIDINoteOn(note,velocity){
for(var i=0;i<outputs.length;i++){
outputs[i].send([0x90, note, velocity]);
}
}
※ 思いっきり端折ってます

12. これが動く環境は？
Chromeが動いてUSB端子があるもの
– iOSは対象外
• 対応してるブラウザアプリはあるけどUSBが…
• Bluetooth MIDIはiOS最強説
– AndroidはOTG対応の端末
• トイザらスが4998円で投げ売りしてたことも…
Operaが対応してるらしい
試してない…
Firefoxが対応しそう

13. MIDIとロボット制御
キーボードのイベントと違い、段階がある
– 音階の Note の他に127段階の Velocity がある
→ 単なるキーイベントとは違う
レイテンシが非常に少ない
– 音楽に遅延は命取りだからこそ
→ でもJavaScriptが(ry
物理的なコントローラが大量に存在してる
– 大きなボタンとか頑丈なやつなどなど
→ 小室哲哉並みのキーボード操作

14. そもそもなんでMIDI？
Chromeでサポートしてたから。
USB刺したら認識するものが唯一MIDIだけ
だから、自動的にこうなった。
何か？

15. 余談：MIDIオワコン
「MIDI オワコン」のキーワードで書かれた
とあるブログが、はてぶでちょっと炎上。
まぁ、1983年に発表された規格ですし。
でもね、Android 6から
MIDI制御のAPIが搭載ですよ。
実は僕音楽やったことないからよくわからな(ry

16. ブラウザでロボットを制御する
• P2Pなどネットワークに関して強い！
• カメラが使えて顔認識とか簡単に組める
• 音声認識や合成音声などが手軽に使える
• どんなOSでもだいたい動く
• スマホにだいたい全部入ってる
OS標準のメモ帳で
ロボット開発の世界ができる。
環境も開発環境もインストール無し

18. ブラウザでロボの真の価値
ロボットのプロトタイプをお手軽に作る！
– すぐに壁にあたって詰まるけど、楽しい。
Webエンジニアがロボットの世界へ！
– すぐに壁にあたって詰まるけど、楽しい。
教育としてロボプログラムの世界を気軽に！
– すぐに壁にあたって詰まるけど、楽しい。

19. ブラウザ、
超楽しい！