モノとつないでwebを楽しくしよう
TRANSCRIPT
モノとつないでWebを楽しくしよう
2015.1.25 @tadfmac
HTML5 Conference 2015
フォント「るりいろフォント」：Copyright るりさん 配布元 http://sapphirecrown.xxxxxxxx.jp/ruriiro.html
15年1月25日日曜日
自己紹介
@tadfmac http://soundcloud.com/tadfmac
http://qiita.com/tadfmac
雑な人です。
H.Kodama （a.k.a. D.F.Mac. @TripArts Music）
普段は通信系会社員。実験音楽や実験工作で遊んでます。
15年1月25日日曜日
このコーナーのターゲット
雑な人15年1月25日日曜日
モノとつないでWebを楽しくしよう
2015.1.25 @tadfmac
HTML5 Conference 2015
フォント「るりいろフォント」：Copyright るりさん 配布元 http://sapphirecrown.xxxxxxxx.jp/ruriiro.html
15年1月25日日曜日
雑な人のためのWoT
2015.1.25 @tadfmac
HTML5 Conference 2015
フォント「るりいろフォント」：Copyright るりさん 配布元 http://sapphirecrown.xxxxxxxx.jp/ruriiro.html
15年1月25日日曜日
雑な人のモチベーション
てきとうに、簡単に、そのへんにあるモノを何でもWebに繋いで、
Web Of Things!やってるぞ感を出したい。
15年1月25日日曜日
そんな人のためのソリューション
15年1月25日日曜日
直結とブラウザを
そんな人のためのソリューション
そのへんにあるモノ
15年1月25日日曜日
そのへんにあるモノ
15年1月25日日曜日
たとえば缶
そのへんにあるモノ
15年1月25日日曜日
缶
たたくと
画面かわる
直結
15年1月25日日曜日
なまもの
そのへんにあるモノ
15年1月25日日曜日
さわると
画面かわる
爆音なるw
なまもの
直結
15年1月25日日曜日
ちーん必ずそのへんにある
15年1月25日日曜日
こっちでちーんすると
あっちでちーん
ちーん
本日実物を展示中!!
直結 直結
15年1月25日日曜日
直結の方法
15年1月25日日曜日
そのまんまじゃつながらない
いろいろな
モノ Web ×
15年1月25日日曜日
仕方ないのでArduinoを使ってデバイス化。
いろいろな
モノ Web 15年1月25日日曜日
直結できるデバイス①キーボード
(HIDデバイス)②MIDIデバイス
入出力 入力のみ 入出力
送れる情報 少ない 多い
難易度 かんたん ちょっと面倒
△ ○
△ ○
△○
ブラウザ すべて対応○ まだ だけ△
接続先 限定できない 限定できる○△（どんなアプリも受け取っちゃう）
15年1月25日日曜日
①キーボード
15年1月25日日曜日
Web
モノ
USBケーブル
KeyEvent
キーボード
15年1月25日日曜日
Web
モノ
USBケーブル
KeyEvent
Arduino Micro
Arduino Leonardo
キーボード
15年1月25日日曜日
Web
モノ
USBケーブル
KeyEvent
タッチセンサー マイク、ピエゾなど
アナログ入力
キーボード
15年1月25日日曜日
Web
モノ
USBケーブル
KeyEvent
センサー信号
キーイベントに変換
アナログ入力
キーボード
15年1月25日日曜日
キーボードのサンプルはコチラ。
void setup() { Keyboard.begin();}void loop() { Keyboard.press('a'); delay(100); Keyboard.release('a'); delay(1000);}
スケッチ
15年1月25日日曜日
キーボードWeb
モノセンサー
USBケーブル
KeyEvent
$(document).keydown(function(ev){...});
アナログ入力
15年1月25日日曜日
MIDIデバイス
15年1月25日日曜日
Web
モノ
USBケーブル
Web MIDI API
MIDIデバイス
準備
Arduino UNO Rev.3
15年1月25日日曜日
ArduinoにUSB-MIDI機能を追加するファームを書き込む。
もあ（@morecat_lab）さん作（moco fo LUFA）http://morecatlab.akiba.coocan.jp/lab/index.php/aruino/midi-firmware-for-arduino-uno-moco/
準備
15年1月25日日曜日
詳細は、SlideShareで!
http://www.slideshare.net/tadfmac/arduinomidi
準備
15年1月25日日曜日
Arduino MIDI Libraryを追加
http://playground.arduino.cc/Main/MIDILibrary
準備Arduino IDE
15年1月25日日曜日
Web
モノ
USBケーブル
Web MIDI API
MIDIデバイス
準備が終わったら、スケッチを書こう!
15年1月25日日曜日
MIDIデバイスのサンプルはコチラ。
#include <MIDI.h>void setup() { MIDI.begin(4);}void loop() { int val = analogRead(A0); if (val > 512) { MIDI.sendNoteOn(42,127,1); } delay(500);}
スケッチ
15年1月25日日曜日
Web
モノ
USBケーブル
Web MIDI API
MIDIデバイス
Web MIDI APIWebアプリ側では
を使う!
15年1月25日日曜日
の準備
Web MIDI API
Chrome://flags で「MIDI」で検索。→有効にするその後、「デバイス」を繋いでからブラウザを再起動!
こうなってれば有効になってる。
15年1月25日日曜日
初期化
Web MIDI API
navigator.requestMIDIAccess().then(onMIDISuccess,onMIDIFailure);var midi = null;var inputs = [];var outputs = [];
function onMIDISuccess(m){ midi = m; var it = midi.inputs.values(); for(var o = it.next(); !o.done; o = it.next()){ inputs.push(o.value); } var ot = midi.outputs.values(); for(var o = ot.next(); !o.done; o = ot.next()){ outputs.push(o.value); }
for(var cnt=0;cnt < inputs.length;cnt++){ inputs[cnt].onmidimessage = onMIDIEvent; }}
15年1月25日日曜日
エラー処理と、MIDI受信
Web MIDI API
function onMIDIFailure(msg){ console.log("onMIDIFailure()呼ばれただと？:"+msg);}
function onMIDIEvent(e){ if(e.data[0] == 0x90){ // ch.1にNoteON受信 // なにかをうけとったときの処理 }}
MIDI送信function sendMIDINoteOn(note){ if(outputs.length > 0){ outputs[0].send([0x90,note,0x7f]); }}
15年1月25日日曜日
Web MIDI APIのつづきは河合さんのセッションで!
「みでゃっぴー」by @g200kgさん
15年1月25日日曜日
雑な人でも直結なら行ける!
まとめ
15年1月25日日曜日
http://soundcloud.com/tadfmac
ありがとうございました
15年1月25日日曜日