Arduino Microを使って、センサーと「なんちゃって」デバイス連携するWebアプリを作ろう

Webアプリも、Arduinoを使った変なセンサーをつなぐだけで、俄然IoTっぽくなります。そう。**見た目だけ**は。

**なんとなく凄いコトしてそうな**
![なんとなくIoTっぽい](http://img.dfm.lrv.jp/keyboard/device.png)

今回、こうした見掛け倒しを簡単に実現する方法を紹介します！

## 真面目にやろうとすると結構めんどくさい

ArduinoとWebアプリをつなごうとすると、普通は下記のような構成になります。

![普通の構成](http://img.dfm.lrv.jp/keyboard/1.png)

センサーの細かな値が欲しい場合や、Webアプリ側からセンサーに指示を出したい場合は、こうした構成にする必要がありますが、これは結構作り込まなければなりません。

できるだけ、手抜きしたいですよね！

## 今回は「なんちゃって」連携！

今回は、下記のような手抜き構成でやってみます。

![なんちゃって連携](http://img.dfm.lrv.jp/keyboard/2.png)

いかにも、怪しい適当な感じですね。。。。

それでは、やり方を見ていきましょう〜

## 準備するもの

今回は、光センサー（CdSセル）を使ってWebアプリと連携するサンプルを作ります。

下記を準備します。

- [Arduino Micro](http://akizukidenshi.com/catalog/g/gM-08286/)か [Leonardo](http://akizukidenshi.com/catalog/g/gM-07384/) × 1
- CdS × 1
- 10KΩ抵抗 × 1
- ブレッドボード × 1
- ジャンパーワイヤー 少々
- USBケーブル（ArduinoとPCをつなぐもの）× 1
- ブラウザが動作する　PC or Mac

こんな感じです。

これに加え、

> なんとなく見た目をゴチャゴチャさせ、難しいことやってるっぽくするための、実は使ってないボードっぽいモノを近くに置く
> ケーブルは無駄に長いのにする

などの小細工があると、ベターですw

> 注意：ArduinoはUNOやMegaじゃなく[Arduino Micro](http://akizukidenshi.com/catalog/g/gM-08286/)か[Arduino Leonardo](http://akizukidenshi.com/catalog/g/gM-07384/)でないと、下記スケッチが使えません！
> 今回は、Arduino Microで話を進めます。

## 配線

Arduino MicroとCdSは、下記のように配線してください。

![回路図](http://img.dfm.lrv.jp/keyboard/board.png)

(Arduino Microの Analog 5番に CdSを接続)

## Arduino Microのスケッチ

Arduino MicroやLeonardoにはATmega32u4というAVRが搭載されていて、これを使うと簡単にHIDなどのUSB機器を作ることができます。

> もうおわかりですねw

今回は、センサーの値を読み取って、HIDキーボードでキーコマンドをPCに送りつけるデバイスを作るわけです。

```c
#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に手をかざして暗くした回数をカウントするだけのアプリです。

```html
<!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](http://dev.tetrastyle.net/2011/05/arduino-uno-dfu.html)

※上記記事はArduino UNO Rev.2の頃のものですので、Arduino UNO Rev.3で挑戦される方は、`ATmega8u2`の部分は`ATmega16u2`に読み替えてください。

## まとめ

一見使いどころが難しそうなキーボード連携ですが、本物のキーボードを外して（あるいは隠して）、その代わりに怪しげに仕立て上げたデバイスを繋ぐだけで、簡単に風変わりなWebアプリが実現できます。

楽しい使い方を考えてみてくださいね！


> 2015.02.24
> [つづき](http://qiita.com/tadfmac/items/cb1c8b6d96ccec7c7178
)書きました!