昨日はHTML5 Conference 2015おつかれさまでした！
また、エンタメ技術部のセッションに参加いただいた方！
本当にありがとうございました！！！！！
前半の岩永さんのパート 「Web技術でハードウェア制御」はとても面白かったのですが、その後引き継いだ私のパートになった途端本当にマジかよ。というくらい訳がわからない雑な内容だっただけでなく、缶を叩いてマジうるさいというひどい感じで反省しています。
ええ、楽しかったです！（あまり反省してない？w）
というわけで、HTML5 Conferenceの常識を覆すひどいスライドを抹殺すべく、こちらに補足を書いて注意をこちらに向けてごまかそう、という魂胆です。
SlideShareの方は忘れてください。。。w
モノをWebに直結すればWoTだ！という主張
というわけで、何が言いたかったか。
私のような雑な人にとっては、なんとなくモノとWebが連動してるように見えればそれでWoTっぽくて楽しいので、まわりに転がってるであろうモノをPCにUSB接続可能な周辺機器にしてしまえばいいだろ。という主張です。
- モノをArduinoを使ってUSBデバイス化する
- 上記USBデバイスをブラウザが動作するPC/Macなどと接続する
- USBデバイスと連携するWebアプリをブラウザで動かす
本当にすいません。
直結の方法。KeyboardとMIDI
USB機器にもいろいろありますが、Webアプリから直接扱えるものを2種類紹介させていただきました。
- キーボード (HID)
- USB MIDI
それぞれ、下記のような特徴があります。
| 特徴 | キーボード(HID) | MIDI |
|---|---|---|
| PCへのイベント送信 | 可能○ | 可能○ |
| PCからのイベント受信 | 不可能× | 可能○ |
| 送信可能な情報 | 少ない（キーコマンドのみ）△ | 多い（7bit×3）○ |
| 難易度 | 簡単○ | ちょっと面倒△ |
| 対応ブラウザ | すべて○ | Chromeのみ△ ※1 |
| イベントの送信先 | 限定できない△ ※2 | 限定できる○ |
補足1. 対応ブラウザは実はChromeだけではなかった!
すいません。Chromeだけ、と紹介させて頂いたのですが、iOS 8以降ではWeb MIDI Browser (by Takashi Mizuhikiさん)でもWeb MIDI APIが使えます！
こちらを使えば、BLE MIDIという無線のMIDIが使えるので、USB-MIDIとはまた違った連携が楽しめそうです！
補足2. キーイベントの送信先アプリが選べる？
なんと、昨日のカンファレンスで展示されていた「なんでもジェスチャコントロールβ」では、イベントの送信先を限定できていたようです！なんてこった！すごい。。。次はTMCN コミュニティ総会Vol.12 with DeNAでも出展されるかも？！詳細知りたい方は突撃しよう！
1/27追記
出展しました＞「なんでもジェスチャコントロールβ」(viva mambo,Inc さん) で、仕組みが公開されました！！！
が！
「最前面ウィンドウとして固定」の方法がわからない！！！
やはり突撃するしか！！！ｗ
USB-キーボード(HID)デバイスの作り方
Arduino LeonardoかMicroを使えば簡単に作れます。
詳細は、下記を参照してください！
Arduino Microを使って、センサーと「なんちゃって」デバイス連携するWebアプリを作ろう
※タイトルは「Arduino Microを使って」とありますが、Leonardoでも同じようにできます！
補足3. そういえばマウスでもできました。
当日のセッションでせっかく「キーボードとMIDI以外の方法はありませんか？」とご質問いただいたのに、カメラでも。。。とかよくわからない回答をしてしまい申し訳ありません。
後で思い出したのですが、そういえば、Arduino LeonardoやMicroはキーボード同様にマウスにも対応していました。
マウスでも、マウスクリックや移動などのイベントがとれるので、同じように使うことができそうです。
詳細は、下記を参照してください。
USB-MIDIデバイスの作り方
「moco for lufa」(@morecat_labさん)と、Arduino MIDI Libraryを利用してArduino UNOをMIDIデバイス化する方法を紹介させていただきました。
詳細は下記を参照してください！
Web MIDI APIの使い方
こちらは、全然説明足りませんでした。本当にすいません。
Web MIDI APIについては、YAMAHAの@ryoyakawaiさんのセッション「Web Audio API、Web MIDI APIを使ったサウンドプログラミング」で、詳しい説明がありました。
こちらのセッション資料が公開されていますので、参照してください。
また、ちょこっと使いたいだけで本格的なことは何もしたくない！という雑な方は、下記もみてください。
JavaScriptだけでMIDIで遊べる！最高に乱暴なWeb MIDI API利用方法
補足4. ところで、野菜（なまもの）はどうやって繋ぐんだ?
缶はマイクで、ち〜ん（呼び鈴）は上に付いてるスイッチで、となんとなく作り方想像つくと思いますが、野菜（なまもの）はちょっとわかりにくかったと思いますので、この場を借りて補足させてください。
なまものを繋ぐ方法として、
- 静電容量式センサーにする
- 通電スイッチにする
- 物理的スイッチの上に置くw
などが考えられます。
1. 静電容量式センサーにする
Arduinoを使って野菜を静電容量式センサーにするのは簡単です。
下記サイトに詳しい解説があります。
Arduino 日本語リファレンス「CapSense (静電容量センサ)」
また、複数の野菜を静電容量センサーにして1つのArduinoに繋ぎたい場合には、ATTinyなどの安いマイコンで上記のような静電容量センサーで得た値だけをArduinoに渡すようにすることで実現することもできます。
下記記事で作成方法を紹介していますので、興味のある方は是非読んでみてください。
Arduino UNOとATTiny13Aを使ったタッチセンサーMIDIコントロールデバイスの作り方
2. 通電スイッチにする
すいません。正しくはなんて呼ぶのが正しいのかわからないのですが、人間が野菜などに触ることで電気的に通電して、スイッチとする方法です。
Makey Makeyがこの方式で実現されています。
3. 物理的スイッチの上に置くw
野菜の下にスイッチなどを置いて、上から圧力をかけて「カチ」っとやれば。。。というバカな方法ですw あまりかっこよくありませんが、非常事態ではこういったバカな方法使ったりするんですよ。どういう事態だ！？という感じしますがw
おわりに
やっぱり「何がどうWoTなんだよ！ふざけんなこのやろう！」
という内容であることには変わりはありません。
お叱り、いっぱいください！
また、補足といいつつ、まだまだ、わかりにくいことがあると思います。
なんでも、いつでも、質問してください！
よろしくお願いします！！！