Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
モノとつないで
Webを楽しくしよう
2015.1.25 @tadfmac
HTML5 Conference 2015
フォント「るりいろフォント」:Copyright るりさん 配布元 http://sapphirecrown.xxxxxxx...
自己紹介
@tadfmac
   
http://soundcloud.com/tadfmac
http://qiita.com/tadfmac
雑な人です。
H.Kodama (a.k.a. D.F.Mac. @TripArts Music)...
このコーナーのターゲット
雑な人
15年1月25日日曜日
モノとつないで
Webを楽しくしよう
2015.1.25 @tadfmac
HTML5 Conference 2015
フォント「るりいろフォント」:Copyright るりさん 配布元 http://sapphirecrown.xxxxxxx...
雑な人のため
のWoT
2015.1.25 @tadfmac
HTML5 Conference 2015
フォント「るりいろフォント」:Copyright るりさん 配布元 http://sapphirecrown.xxxxxxxx.jp/ru...
雑な人のモチベーション
てきとうに、簡単に、
そのへんにあるモノ
を何でも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日日曜日
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');
d...
キーボード
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/aruin...
詳細は、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...
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 ou...
エラー処理と、MIDI受信
Web MIDI API
function onMIDIFailure(msg){
console.log("onMIDIFailure()呼ばれただと?:"+msg);
}
function onMIDIEvent...
Web MIDI APIのつづきは
河合さんのセッションで!
「みでゃっぴー」by @g200kgさん
15年1月25日日曜日
雑な人でも
直結なら行ける!
まとめ
15年1月25日日曜日
http://soundcloud.com/tadfmac
ありがとうございました
15年1月25日日曜日
Upcoming SlideShare
Loading in …5
×

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

0 views

Published on

HTML5 Conference 2015 のエンタメ技術部のセッション「Web技術によるデバイス制御・連携などを、まずは作り手として楽しんでみる♪」(ルームF 11:20-)で利用させていただいた資料です。

Published in: Technology
  • Be the first to comment

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

  1. 1. モノとつないで Webを楽しくしよう 2015.1.25 @tadfmac HTML5 Conference 2015 フォント「るりいろフォント」:Copyright るりさん 配布元 http://sapphirecrown.xxxxxxxx.jp/ruriiro.html 15年1月25日日曜日
  2. 2. 自己紹介 @tadfmac     http://soundcloud.com/tadfmac http://qiita.com/tadfmac 雑な人です。 H.Kodama (a.k.a. D.F.Mac. @TripArts Music) 普段は通信系会社員。実験音楽や実験工作で遊んでます。 15年1月25日日曜日
  3. 3. このコーナーのターゲット 雑な人 15年1月25日日曜日
  4. 4. モノとつないで Webを楽しくしよう 2015.1.25 @tadfmac HTML5 Conference 2015 フォント「るりいろフォント」:Copyright るりさん 配布元 http://sapphirecrown.xxxxxxxx.jp/ruriiro.html 15年1月25日日曜日
  5. 5. 雑な人のため のWoT 2015.1.25 @tadfmac HTML5 Conference 2015 フォント「るりいろフォント」:Copyright るりさん 配布元 http://sapphirecrown.xxxxxxxx.jp/ruriiro.html 15年1月25日日曜日
  6. 6. 雑な人のモチベーション てきとうに、簡単に、 そのへんにあるモノ を何でもWebに繋いで、 Web Of Things! やってるぞ感 を出したい。 15年1月25日日曜日
  7. 7. そんな人のための ソリューション 15年1月25日日曜日
  8. 8. 直結 とブラウザを そんな人のための ソリューション そのへんにあるモノ 15年1月25日日曜日
  9. 9. そのへんにあるモノ 15年1月25日日曜日
  10. 10. たとえば缶 そのへんにあるモノ 15年1月25日日曜日
  11. 11. 缶 たたくと 画面かわる 直結 15年1月25日日曜日
  12. 12. なまもの そのへんにあるモノ 15年1月25日日曜日
  13. 13. さわると 画面かわる 爆音なるw なまもの 直結 15年1月25日日曜日
  14. 14. ちーん 必ずそのへんにある 15年1月25日日曜日
  15. 15. こっちで ちーんすると あっちで ちーん ちーん 本日実物を展示中!! 直結 直結 15年1月25日日曜日
  16. 16. 直結 の方法 15年1月25日日曜日
  17. 17. そのまんまじゃつながらない いろいろな モノ Web × 15年1月25日日曜日
  18. 18. 仕方ないので Arduinoを使ってデバイス化。 いろいろな モノ Web 15年1月25日日曜日
  19. 19. 直結できるデバイス ①キーボード (HIDデバイス) ②MIDIデバイス 入出力 入力のみ 入出力 送れる情報 少ない 多い 難易度 かんたん ちょっと面倒 △ ○ △ ○ △○ ブラウザ すべて対応○ まだ  だけ△ 接続先 限定できない 限定できる○△ (どんなアプリも受け取っちゃう) 15年1月25日日曜日
  20. 20. ①キーボード 15年1月25日日曜日
  21. 21. Web モノ USBケーブル KeyEvent キーボード 15年1月25日日曜日
  22. 22. Web モノ USBケーブル KeyEvent Arduino Micro Arduino Leonardo キーボード 15年1月25日日曜日
  23. 23. Web モノ USBケーブル KeyEvent タッチセンサー マイク、 ピエゾなど アナログ入力 キーボード 15年1月25日日曜日
  24. 24. Web モノ USBケーブル KeyEvent センサー信号 キーイベントに変換 アナログ入力 キーボード 15年1月25日日曜日
  25. 25. キーボードのサンプルはコチラ。 void setup() { Keyboard.begin(); } void loop() { Keyboard.press('a'); delay(100); Keyboard.release('a'); delay(1000); } スケッチ 15年1月25日日曜日
  26. 26. キーボード Web モノ センサー USBケーブル KeyEvent $(document).keydown(function(ev){...}); アナログ入力 15年1月25日日曜日
  27. 27. MIDIデバイス 15年1月25日日曜日
  28. 28. Web モノ USBケーブル Web MIDI API MIDIデバイス 準備 Arduino UNO Rev.3 15年1月25日日曜日
  29. 29. 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日日曜日
  30. 30. 詳細は、SlideShareで! http://www.slideshare.net/tadfmac/arduinomidi 準備 15年1月25日日曜日
  31. 31. Arduino MIDI Libraryを追加 http://playground.arduino.cc/Main/MIDILibrary 準備Arduino IDE 15年1月25日日曜日
  32. 32. Web モノ USBケーブル Web MIDI API MIDIデバイス 準備が終わったら、 スケッチを書こう! 15年1月25日日曜日
  33. 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. 34. Web モノ USBケーブル Web MIDI API MIDIデバイス Web MIDI API Webアプリ側では を使う! 15年1月25日日曜日
  35. 35. の準備 Web MIDI API Chrome://flags で「MIDI」で検索。 →有効にする その後、「デバイス」を繋いでから ブラウザを再起動! こうなってれば有効になってる。 15年1月25日日曜日
  36. 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. 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. 38. Web MIDI APIのつづきは 河合さんのセッションで! 「みでゃっぴー」by @g200kgさん 15年1月25日日曜日
  39. 39. 雑な人でも 直結なら行ける! まとめ 15年1月25日日曜日
  40. 40. http://soundcloud.com/tadfmac ありがとうございました 15年1月25日日曜日

×