モノとつないでwebを楽しくしよう

モノとつないで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日日曜日