基板とブラウザと私

基板とブラウザと私

自己紹介

若狭　正生

フリーランスです。スベリ芸と巻き込まれ事故が

得意です。

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

今回のJSおじさん

何が作りたかったの？

QRコードを読むだけで、あなたのスマホがロボットの頭脳になる。

•  インストールとかしないでどこまで出来るのか？

•  Web標準技術ってヤバいを伝えたい。

Maker Faire Tokyoに出しました

何を使ったの？


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


Web MIDI API

getUserMedia

headtrackr.js

Moco For LUFA

Webカメラ

Chrome 44 以降

Arduino

モータードライバモーター × 2 サーボ × 4

#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); }}

※　思いっきり端折ってます

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]); }}

※　思いっきり端折ってます

これが動く環境は？

Chromeが動いてUSB端子があるもの –  iOSは対象外

• 対応してるブラウザアプリはあるけどUSBが… •  Bluetooth MIDIはiOS最強説

– AndroidはOTG対応の端末 • トイザらスが4998円で投げ売りしてたことも…

Operaが対応してるらしい試してない…

Firefoxが対応しそう

MIDIとロボット制御

キーボードのイベントと違い、段階がある – 音階の Note の他に127段階の Velocity がある

　　→ 単なるキーイベントとは違う

レイテンシが非常に少ない – 音楽に遅延は命取りだからこそ

　　→ でもJavaScriptが(ry

物理的なコントローラが大量に存在してる – 大きなボタンとか頑丈なやつなどなど

　　→ 小室哲哉並みのキーボード操作

そもそもなんでMIDI？

Chromeでサポートしてたから。

USB刺したら認識するものが唯一MIDIだけだから、自動的にこうなった。

何か？

余談：MIDIオワコン

「MIDI オワコン」のキーワードで書かれたとあるブログが、はてぶでちょっと炎上。

まぁ、1983年に発表された規格ですし。

でもね、Android 6から MIDI制御のAPIが搭載ですよ。

実は僕音楽やったことないからよくわからな(ry

ブラウザでロボットを制御する

•  P2Pなどネットワークに関して強い！ •  カメラが使えて顔認識とか簡単に組める •  音声認識や合成音声などが手軽に使える •  どんなOSでもだいたい動く •  スマホにだいたい全部入ってる

OS標準のメモ帳で　　　　　　ロボット開発の世界ができる。　　環境も開発環境もインストール無し

ブラウザでロボの真の価値

ロボットのプロトタイプをお手軽に作る！ – すぐに壁にあたって詰まるけど、楽しい。

Webエンジニアがロボットの世界へ！ – すぐに壁にあたって詰まるけど、楽しい。

教育としてロボプログラムの世界を気軽に！ – すぐに壁にあたって詰まるけど、楽しい。

ブラウザ、　　超楽しい！

Engineering

基板とブラウザと私