たった1日で出来たWeb + Android + Arduinoのリアルタイム連携プロトタイピング

はじめに

今回のネタは、早稲田大学で行われているAndroidアプリ開発養成講座TechInstituteで、センサー回りの講座を受け持つことになり、Androidのセンサーを使った応用例として作成しました。

動作概要

Android

動作としては某L◯NEの「ふるふる」っぽい動作をAndroidでは行います。「加速度センサー」で、ある一定の加速度を超えたら、「GPSセンサー」で位置情報をサーバに送信します。Webサーバでは送信された位置情報をGoogleMapにマッピングします。

Arduino

Arduinoには何かセンサーを接続します。なんでもいいのですが、「照度センサー」とします。照度センサーにより、周囲が暗くなったらサーバに「暗くなった」ことを通知します。

Web

Webサーバは送られてきた位置情報のマッピングを行います。またブローカサーバがArduinoからのセンサー情報を、接続している全Android端末にPush配信を行います。

構成

ざっくりこんな感じです。

f:id:tomo_watanabe:20140820234129p:plain

もうちょっと詳しく書くと

f:id:tomo_watanabe:20140820234656p:plain

Androidアプリから、位置情報をMQTTプロトコルでブローカにpublishすることで、subscribeしているWebサーバがそれを受信して、GoogleMap上にマッピングします。Arduinoから「暗くなった」とブローカにpublishすると、Androidアプリでは事前にそのTopicをsubscribeしているようにしてあるので、Pushが飛んできます。※MQTTについてはこちらを参照

使っている技術は難しくありません。

  • Androidアプリ:加速度センサー、GPSセンサー、MQTTクライアント
  • Arduino:照度センサー、MQTTクライアント
  • MQTTブローカサーバ:mosquitto
  • Webサーバ:Node.js + WebSocket(Socket.IO) + MQTTライブラリ

それぞれの画面

Androidアプリ

スクリーンネームを入れて、スタートボタンを押して「振る」単純なアプリです。加速度センサーをチェックして、振れ幅が大きくなったら位置情報を送信します。

f:id:tomo_watanabe:20140820235916p:plain

Arduino

UIは無いです。Cdsセルで周囲の照度を測定して、一定値以下になったら「暗くなった」と通知します。

f:id:tomo_watanabe:20140821101028j:plain

AndroidにはPushで通知が飛んできます。

f:id:tomo_watanabe:20140821101840p:plain

Web

Node.jsでWebSocketを使用して、送信された位置情報とスクリーンネームマッピングします。

f:id:tomo_watanabe:20140821000241p:plain

作成の流れ

  1. Androidのセンサー応用例のデモを作ろう
  2. ふるふるっぽいのなら、加速度センサーとGPSセンサーでできそうだな(ここまで前日案)
  3. 位置情報を表示するMapが欲しいな。んじゃMQTTを使ってNode.jsで受けるか
  4. MQTTブローカサーバ立てる
  5. PyhtonでMQTTのPubSubのサンプルを作成して動作を確認
  6. Node.js + Socket.IOでGoogleMap表示部作成
  7. MQTTライブラリをNode.jsに組み込んで、ブローカをSubscribeするようにする
  8. PythonでMQTTのサンプルのPublishを作成して、ダミーの位置情報をブローカに送信するとNode.js上のGoogleMap上にマッピングできることを確認
  9. Androidアプリで加速度センサーとGPSを組み合わせてアプリを作る
  10. MQTTライブラリを送信用に組み込んで、8で作成したtopicフォーマットに沿って送信するようにする
  11. Andoridアプリをふるふるすると、無事GoogleMapに表示できた\(^o^)/
  12. Arduinoも講義で扱うし、ArduinoにもMQTTクライアントがあるからこれも繋げてみよう
  13. 題材で使用する照度センサーとArduino Ethernetを組み合わせてMQTTでブローカに投げるようにする
  14. Androidアプリの方にArduinoの通知を受け取れるように、MQTTブローカへのSubscribeを追加
  15. ほぼ完成\(^o^)/

ここまででほぼ1日8時間くらいの作業という感じでした(途中買い物行ったりしてので、出来たのは夜中近く)

参考情報(Topicの扱い)

  • Android

    • subscribe "PUBLIC/location/port/all/#"
    • publish "PUBLIC/location/state/hogefuga" ← hogefugaはスクリーンネームが入る
  • Node.js

    • subscribe "PUBLIC/location/state/#"
  • Arduino

    • publish "PUBLIC/location/port/all/push"

ArduinoのあたりのTopicの扱いが変だけど、最後取ってつけた関係上...

まとめ

ここに出てくる技術はひと通り経験したことがあるので、アイデアが出れば実装はさほど難しくありません。 だいたい1日の作業でこのくらいまでプロトタイピング実装できるんだなーと、あらためて今の技術の恩恵を感じました。逆に言えば、技術よりもアイデアの方が重要なのかも(こっちのが難しい)

さて、実装してみると色々展開できることが見えてきます。

MQTTなので上手くTopicのPublish/Subscribeのルールを決めてやることで

他にも

  • ボタンでの通知を時間間隔での通知にして、ジオフェンスを使った遊びや監視?
  • Arduino側をウェアラブルデバイスとしてアイデアを膨らますこともできそうです
  • Arduino側を様々な家電に置き換えて考えると、コントローラ&通知システム作れますね

ソースコードは公開してもいいのですが、なんせ1日で作ったレベルなのでちょっと...

要望があれば整理して公開できるようにするかもしれません。