モノとつないで
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 API
Webアプリ側では
を使う!
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日日曜日