Webアプリも、Arduinoを使った変なセンサーをつなぐだけで、俄然IoTっぽくなります。そう。見た目だけは。
なんとなく凄いコトしてそうな
今回、こうした見掛け倒しを簡単に実現する方法を紹介します！
真面目にやろうとすると結構めんどくさい
ArduinoとWebアプリをつなごうとすると、普通は下記のような構成になります。
センサーの細かな値が欲しい場合や、Webアプリ側からセンサーに指示を出したい場合は、こうした構成にする必要がありますが、これは結構作り込まなければなりません。
できるだけ、手抜きしたいですよね！
今回は「なんちゃって」連携！
今回は、下記のような手抜き構成でやってみます。
いかにも、怪しい適当な感じですね。。。。
それでは、やり方を見ていきましょう〜
準備するもの
今回は、光センサー（CdSセル）を使ってWebアプリと連携するサンプルを作ります。
下記を準備します。
- Arduino Microか Leonardo × 1
- CdS × 1
- 10KΩ抵抗 × 1
- ブレッドボード × 1
- ジャンパーワイヤー 少々
- USBケーブル（ArduinoとPCをつなぐもの）× 1
- ブラウザが動作する PC or Mac
こんな感じです。
これに加え、
なんとなく見た目をゴチャゴチャさせ、難しいことやってるっぽくするための、実は使ってないボードっぽいモノを近くに置く
ケーブルは無駄に長いのにする
などの小細工があると、ベターですw
注意：ArduinoはUNOやMegaじゃなくArduino MicroかArduino Leonardoでないと、下記スケッチが使えません！
今回は、Arduino Microで話を進めます。
配線
Arduino MicroとCdSは、下記のように配線してください。
(Arduino Microの Analog 5番に CdSを接続)
Arduino Microのスケッチ
Arduino MicroやLeonardoにはATmega32u4というAVRが搭載されていて、これを使うと簡単にHIDなどのUSB機器を作ることができます。
もうおわかりですねw
今回は、センサーの値を読み取って、HIDキーボードでキーコマンドをPCに送りつけるデバイスを作るわけです。
#define CDS 5
boolean CdsState = false;
void setup() {
Keyboard.begin();
}
void loop() {
int value = analogRead(CDS);
if(value > 400){
if(CdsState == false){
Keyboard.press('A');
delay(100);
Keyboard.release('A');
}
CdsState = true;
}else{
CdsState = false;
}
delay(500);
}
めんどうくさいので、CdSセルを手で覆って暗くなったときだけ、キーコードAを送信しています。
もちろん、暗くなったときと、明るくなったときで違うキーコードを送ることもできます。
また、今回はCdSを使いましたが、センサーは何でも良いです。
普通に大きな押しボタンを繋ぐだけでもそれっぽいですし、測距センサーや、加速度センサーを繋いでも面白そうです。
Webアプリ側はキーイベントに対応させるだけw
Arduino Microがキーボードの代わりになりますので、Webアプリ側はキーイベントに対応させるだけで、連携してるっぽく動くアプリがつくれます。
今回は、CdSに手をかざして暗くした回数をカウントするだけのアプリです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>なんちゃってデバイス連携</title>
</head>
<body>
<div id="count">0</div>
<script src="jquery.js"></script>
<script>
var counter = 0;
$(document).keydown(function(ev){
if(ev.keyCode == 65){ // 'A'キー
counter ++;
$("#count").text(counter);
}
});
</script>
</body>
</html>
はい。できました！
それっぽく見せるためのコツなど
今回の作戦では、Arduinoはキーボードの代わりになります。
なので、formがあるようなアプリとの相性は悪いです。
あと、このArduinoは、ブラウザ画面でなくてもキーコードを送り続けるので、
ブラウザが終わったり、違うサイトに飛んだりすると、すぐにカッコ悪いことが起こりますw
なので、実際には、アプリ起動後にキーボードを外しておける、１枚もののようなWebアプリにしか使えないと思います。
センサーに反応するサイネージのようなものであれば、結構いけちゃうような気がします。
Arduino UNOとかじゃダメなの?
Arduino UNOでもHIDを作ることができます。
ただ、LeonardoやMicroと比べるとちょっと面倒。
下記サイトが参考になりますので、挑戦したい方はどうぞ。
Arduino Uno DFU プログラミング / TETRASTYLE-dev-BLOG
※上記記事はArduino UNO Rev.2の頃のものですので、Arduino UNO Rev.3で挑戦される方は、ATmega8u2の部分はATmega16u2に読み替えてください。
まとめ
一見使いどころが難しそうなキーボード連携ですが、本物のキーボードを外して（あるいは隠して）、その代わりに怪しげに仕立て上げたデバイスを繋ぐだけで、簡単に風変わりなWebアプリが実現できます。
楽しい使い方を考えてみてくださいね！
2015.02.24
つづき書きました!