モノとつないでWebを楽しくしよう
•
6 likes•2,954 views
HTML5 Conference 2015 のエンタメ技術部のセッション「Web技術によるデバイス制御・連携などを、まずは作り手として楽しんでみる♪」（ルームF 11:20-）で利用させていただいた資料です。
More Related Content
モノとつないでWebを楽しくしよう
- 1. モノとつないで Webを楽しくしよう 2015.1.25 @tadfmac HTML5 Conference 2015 フォント「るりいろフォント」：Copyright るりさん 配布元 http://sapphirecrown.xxxxxxxx.jp/ruriiro.html 15年1月25日日曜日
- 2. 自己紹介 @tadfmac http://soundcloud.com/tadfmac http://qiita.com/tadfmac 雑な人です。 H.Kodama （a.k.a. D.F.Mac. @TripArts Music） 普段は通信系会社員。実験音楽や実験工作で遊んでます。 15年1月25日日曜日
- 4. モノとつないで Webを楽しくしよう 2015.1.25 @tadfmac HTML5 Conference 2015 フォント「るりいろフォント」：Copyright るりさん 配布元 http://sapphirecrown.xxxxxxxx.jp/ruriiro.html 15年1月25日日曜日
- 5. 雑な人のため のWoT 2015.1.25 @tadfmac HTML5 Conference 2015 フォント「るりいろフォント」：Copyright るりさん 配布元 http://sapphirecrown.xxxxxxxx.jp/ruriiro.html 15年1月25日日曜日
- 19. 直結できるデバイス ①キーボード (HIDデバイス) ②MIDIデバイス 入出力 入力のみ 入出力 送れる情報 少ない 多い 難易度 かんたん ちょっと面倒 △ ○ △ ○ △○ ブラウザ すべて対応○ まだ だけ△ 接続先 限定できない 限定できる○△ （どんなアプリも受け取っちゃう） 15年1月25日日曜日
- 25. キーボードのサンプルはコチラ。 void setup() { Keyboard.begin(); } void loop() { Keyboard.press('a'); delay(100); Keyboard.release('a'); delay(1000); } スケッチ 15年1月25日日曜日
- 28. Web モノ USBケーブル Web MIDI API MIDIデバイス 準備 Arduino UNO Rev.3 15年1月25日日曜日
- 31. Arduino MIDI Libraryを追加 http://playground.arduino.cc/Main/MIDILibrary 準備Arduino IDE 15年1月25日日曜日
- 33. 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日日曜日
- 34. Web モノ USBケーブル Web MIDI API MIDIデバイス Web MIDI API Webアプリ側では を使う! 15年1月25日日曜日
- 35. の準備 Web MIDI API Chrome://flags で「MIDI」で検索。 →有効にする その後、「デバイス」を繋いでから ブラウザを再起動! こうなってれば有効になってる。 15年1月25日日曜日
- 36. 初期化 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日日曜日
- 37. エラー処理と、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日日曜日
- 38. Web MIDI APIのつづきは 河合さんのセッションで! 「みでゃっぴー」by @g200kgさん 15年1月25日日曜日