HTML5 Conference 「雑な人のためのWoT (モノをつないでWebを楽しくしよう)」補足

![HTML5 Conf](http://events.html5j.org/conference/2015/1/assets/img/conf2015s-hero/img_01.png)

昨日は[HTML5 Conference 2015](http://events.html5j.org/conference/2015/1/)おつかれさまでした！

また、エンタメ技術部のセッションに参加いただいた方！
本当にありがとうございました！！！！！

[前半の岩永さんのパート 「Web技術でハードウェア制御」](http://www.slideshare.net/YoshihiroIwanaga?utm_campaign=profiletracking&utm_medium=sssite&utm_source=ssslideview)はとても面白かったのですが、その後引き継いだ私のパートになった途端本当にマジかよ。というくらい訳がわからない雑な内容だっただけでなく、缶を叩いてマジうるさいというひどい感じで反省しています。

ええ、楽しかったです！（あまり反省してない？w）

というわけで、HTML5 Conferenceの常識を覆す[ひどいスライド](http://www.slideshare.net/tadfmac/web-43870049)を抹殺すべく、こちらに補足を書いて注意をこちらに向けてごまかそう、という魂胆です。

SlideShareの方は忘れてください。。。w

# モノをWebに直結すればWoTだ！という主張

というわけで、何が言いたかったか。

私のような雑な人にとっては、なんとなくモノとWebが連動してるように見えればそれでWoTっぽくて楽しいので、まわりに転がってるであろうモノをPCにUSB接続可能な周辺機器にしてしまえばいいだろ。という主張です。

- モノをArduinoを使ってUSBデバイス化する
- 上記USBデバイスをブラウザが動作するPC/Macなどと接続する
- USBデバイスと連携するWebアプリをブラウザで動かす

本当にすいません。

# 直結の方法。KeyboardとMIDI

USB機器にもいろいろありますが、Webアプリから直接扱えるものを2種類紹介させていただきました。

1. キーボード (HID)
2. USB MIDI

それぞれ、下記のような特徴があります。

|特徴|キーボード(HID)|MIDI|
|:---:|:---:|:---:|
|PCへのイベント送信|可能○|可能○|
|PCからのイベント受信|不可能×|可能○|
|送信可能な情報|少ない（キーコマンドのみ）△|多い（7bit×3）○|
|難易度|簡単○|ちょっと面倒△|
|対応ブラウザ|すべて○|Chromeのみ△ ※1|
|イベントの送信先|限定できない△ ※2|限定できる○|

## 補足1. 対応ブラウザは実はChromeだけではなかった!

すいません。Chromeだけ、と紹介させて頂いたのですが、iOS 8以降では[Web MIDI Browser (by Takashi Mizuhikiさん)](http://www.taktech.org/takm/WebMIDIBrowser/Web_MIDI_Browser.html)でもWeb MIDI APIが使えます！
こちらを使えば、BLE MIDIという無線のMIDIが使えるので、USB-MIDIとはまた違った連携が楽しめそうです！

## 補足2. キーイベントの送信先アプリが選べる？

なんと、昨日のカンファレンスで展示されていた[「なんでもジェスチャコントロールβ」](https://www.youtube.com/watch?v=TjviLsly8jk&feature=youtu.be)では、イベントの送信先を限定できていたようです！なんてこった！すごい。。。次は[TMCN コミュニティ総会Vol.12 with DeNA](http://tmcn.doorkeeper.jp/events/19520)でも出展されるかも？！詳細知りたい方は突撃しよう！

> 1/27追記
> [出展しました＞「なんでもジェスチャコントロールβ」(viva mambo,Inc さん)](http://www.viva-mambo.co.jp/jp/labo/2015/01/post-7.html) で、仕組みが公開されました！！！
> が！
> 「最前面ウィンドウとして固定」の方法がわからない！！！
> やはり突撃するしか！！！ｗ

# USB-キーボード(HID)デバイスの作り方

Arduino LeonardoかMicroを使えば簡単に作れます。
詳細は、下記を参照してください！

[Arduino Microを使って、センサーと「なんちゃって」デバイス連携するWebアプリを作ろう](http://qiita.com/tadfmac/items/cb1c8b6d96ccec7c7178)

※タイトルは「Arduino Microを使って」とありますが、Leonardoでも同じようにできます！

## 補足3. そういえばマウスでもできました。

当日のセッションでせっかく「キーボードとMIDI以外の方法はありませんか？」とご質問いただいたのに、カメラでも。。。とかよくわからない回答をしてしまい申し訳ありません。
後で思い出したのですが、そういえば、Arduino LeonardoやMicroはキーボード同様にマウスにも対応していました。
マウスでも、マウスクリックや移動などのイベントがとれるので、同じように使うことができそうです。

詳細は、下記を参照してください。

- [Mouse and Keyboard libraries](http://arduino.cc/en/Reference/MouseKeyboard)

# USB-MIDIデバイスの作り方

[「moco for lufa」(@morecat_labさん)](http://morecatlab.akiba.coocan.jp/lab/index.php/aruino/midi-firmware-for-arduino-uno-moco/)と、[Arduino MIDI Library](http://playground.arduino.cc/Main/MIDILibrary)を利用してArduino UNOをMIDIデバイス化する方法を紹介させていただきました。

詳細は下記を参照してください！

- [Arduinoで作るMIDIコン (SlideShare)](http://www.slideshare.net/tadfmac/arduinomidi)
- [超簡単！Arduino UNOをMIDIコントローラーにしよう！](http://qiita.com/tadfmac/items/9136f47ae1eea99a4ef7)

# Web MIDI APIの使い方

こちらは、全然説明足りませんでした。本当にすいません。

Web MIDI APIについては、YAMAHAの@ryoyakawaiさんのセッション「Web Audio API、Web MIDI APIを使ったサウンドプログラミング」で、詳しい説明がありました。
こちらのセッション資料が公開されていますので、参照してください。

- [Web Audio API、Web MIDI APIを使ったサウンドプログラミング by @ryoyakawaiさん](http://www.slideshare.net/ryoyakawai/web-audi-oapi-web-midi-api-2015-html5-conference)
- [上記セッションで利用したコード](https://github.com/ryoyakawai/html5conference2015)

また、ちょこっと使いたいだけで本格的なことは何もしたくない！という雑な方は、下記もみてください。

[JavaScriptだけでMIDIで遊べる！最高に乱暴なWeb MIDI API利用方法](http://qiita.com/tadfmac/items/e26fdf1034ad6dad4504)

# 補足4. ところで、野菜（なまもの）はどうやって繋ぐんだ?

缶はマイクで、ち〜ん（呼び鈴）は上に付いてるスイッチで、となんとなく作り方想像つくと思いますが、野菜（なまもの）はちょっとわかりにくかったと思いますので、この場を借りて補足させてください。

なまものを繋ぐ方法として、

1. 静電容量式センサーにする
2. 通電スイッチにする
3. 物理的スイッチの上に置くw

などが考えられます。

## 1. 静電容量式センサーにする

Arduinoを使って野菜を静電容量式センサーにするのは簡単です。
下記サイトに詳しい解説があります。

[Arduino 日本語リファレンス「CapSense (静電容量センサ)」](http://www.musashinodenpa.com/arduino/ref/index.php?f=1&pos=2159)

また、複数の野菜を静電容量センサーにして1つのArduinoに繋ぎたい場合には、ATTinyなどの安いマイコンで上記のような静電容量センサーで得た値だけをArduinoに渡すようにすることで実現することもできます。

下記記事で作成方法を紹介していますので、興味のある方は是非読んでみてください。

[Arduino UNOとATTiny13Aを使ったタッチセンサーMIDIコントロールデバイスの作り方](http://qiita.com/tadfmac/items/f2172cdacbdd5600256e)

## 2. 通電スイッチにする

すいません。正しくはなんて呼ぶのが正しいのかわからないのですが、人間が野菜などに触ることで電気的に通電して、スイッチとする方法です。

[Makey Makey](http://www.makeymakey.com/)がこの方式で実現されています。

## 3. 物理的スイッチの上に置くw

野菜の下にスイッチなどを置いて、上から圧力をかけて「カチ」っとやれば。。。というバカな方法ですw あまりかっこよくありませんが、非常事態ではこういったバカな方法使ったりするんですよ。どういう事態だ！？という感じしますがw

# おわりに

やっぱり「何がどうWoTなんだよ！ふざけんなこのやろう！」
という内容であることには変わりはありません。
お叱り、いっぱいください！

また、補足といいつつ、まだまだ、わかりにくいことがあると思います。
なんでも、いつでも、質問してください！

よろしくお願いします！！！