歩くミニ四駆をWebからコントロール

Webブラウザからインターネット経由で歩くミニ四駆をコントロールできるようにしてみました。
Web系・クラウド系はまったくの未経験なので、お手軽に使えるともっぱらの噂のMilkcocoaを使うことにしました。GPduinoにはBLEしか通信機能がないので、Android端末を介してネットワークに接続しています。

先日の大阪版IoT縛りの勉強会！IoTLT大阪 Vol.2で発表してきました。

送信側 (Webブラウザアプリ/JavaScript)

HTMLでUIを記述し、milkcocoa.js とアプリのスクリプト(ここではcontroller.js)を読み込みます。

<script src='https://cdn.mlkcca.com/v2.0.0/milkcocoa.js'></script>
<script src="controller.js"></script>

スクリプトはいたって簡単です。

MilkCocoaのオブジェクトを生成する
データストアのオブジェクトを生成する
ボタンが押されたらデータをsendする

これだけです。

window.onload = function(){
  var buttonUp    = document.getElementById('up');
  (中略)
  var milkcocoa = new MilkCocoa("アプリのID.mlkcca.com");
  var ds = milkcocoa.dataStore('gpduino');
  (中略)
  buttonUp.onclick = function() {
    (中略)
    ds.send({direction: 'up'});
    (後略)

つまらないものですが、ソースを置いておきます。使うときはアプリのIDを書き換えてください。
ソース

受信側 (Androidアプリ/Java)

KonashiのSDKを使う都合上、WebアプリではなくJavaのネイティブアプリで実装しました。
JavaでMilkcocoaにアクセスするためにMilkcocoa SDK for Androidを利用します。こちらからダウンロードします。

GitHubにもあがっていますが、2016年4月日現在、メンテが滞っており最新版ではないようです。こちらを使うとsendのイベントリスナーでヌルポインタ例外が発生します。かならず、上記のページからダウンロードしてください。

とりあえず、使うクラスは４つだけ。

import com.mlkcca.client.DataElement;
import com.mlkcca.client.DataStore;
import com.mlkcca.client.MilkCocoa;
import com.mlkcca.client.DataStoreEventListener;

public class MilkKoshianUI extends ActionBarActivity implements View.OnClickListener, DataStoreEventListener {
  private MilkCocoa m_milkcocoa;
  private DataStore m_dataStore;

はじめに以下の処理をします。

MilkCocoaのオブジェクトを生成する
データストアのオブジェクトを生成する
イベントリスナーを登録する
sendを監視する

  (中略)
  public void onCreate(Bundle savedInstanceState) {
       (中略)
    m_milkcocoa = new MilkCocoa("アプリのID.mlkcca.com");
    m_dataStore = m_milkcocoa.dataStore("gpduino");
    m_dataStore.addDataStoreEventListener(this);
    m_dataStore.on("send");
  }

そして、sendがあったらデータを取り出します。あとはBLEでミニ四駆に送信するだけです。

  public void onSended(DataElement dataElement) {
        
    String direction =
      dataElement.getValue("direction");
    (後略)
  }

こちらもソースを置いておきます。使うときはアプリのIDを書き換えてください。
ソース