JavaScriptもろくに書けない元アプリケーションエンジニアが、IoTをやりたくて、まずはMilkcocoaのお勉強から始めてみました。

きっかけ

そもそも、画像関連のエンジニアをしていたのですが、最近になってDeep Learningが流行りだしたので、それに伴いデータ送信側のIoTにも興味を持ち始めました。
そこでIoTLTを知り、参加（見るだけ ^^;）していたところ、「なんかみんな『Milkcocoa』ってのを使っているぞ？」てことで、試してみることにしました。

Milkcocoaって何よ？

しかし肝心の「Milkcocoa」が何者かよくわかりません。
そこで、本陣に切り込むことにしました。

．．．よくわからん。

チュートリアルを見ました。
ようやく理解できました。
タダで使えるキュー（非同期通信）ですね。

タグつけて、データを送る
タグで監視して、データを受け取る

で、送り側がIoT端末で、受け側がPCだと。（チュートリアルの例）

とりあえず仕組みはわかりましたので、実際に何かサンプルを作ってみることにします。
なお、ホスティングは「BitBalloon」がいいよと書いてあったので、それを使ってみます。
※「BitBalloon」に関してはこちらを参考にさせていただきました。
※実は「Heroku」も気になっている

サンプル：画像送信

★★★　まだ動いていません！　★★★

目指しているもの

スマホを傾けると、傾きによって2種類の異なる画像が送られる
送られた画像をPC側で取得し、表示する

画像の送り方

Milkcocoa経由でバイナリデータを送る方法がわからなかったため、ここを参考にして、base64にエンコード／デコードしてみる。

送り側（スマホ）

最初に2種類の画像を読み込み、base64にエンコードしておく
スマホを傾けたら、それぞれの画像をMilkcocoaに送る
下記ソース以外に「landscape.png」「portrait.png」のファイルを置いておく

index.html

<body>
<img crossOrigin="Anonymous" id="img_landscape" src="./landscape.png" /><br/>
<img crossOrigin="Anonymous" id="img_portrait" src="./portrait.png" /><br/>
<textarea id="log" rows="10" cols="40"></textarea>
<div id="output"></div>
<script src="https://cdn.mlkcca.com/v0.6.0/milkcocoa.js"></script>
<script src="main-sp.js"></script>
</body>

main-sp.js

window.onload = function(){

  var currentMode = 'portrait';
  var output = document.getElementById('output');

  var img_landscape   = document.getElementById('img_landscape');
  var img_portrait    = document.getElementById('img_portrait');
  var image_landscape = ImageToBase64(img_landscape, "image/png");
  var image_portrait  = ImageToBase64(img_portrait,  "image/png");
  document.getElementById('log').value = image_portrait;

  // app_idは自分のものに書き換えてください
  var milkcocoa = new MilkCocoa('app_id.mlkcca.com');
  var ds = milkcocoa.dataStore('gravity');

  window.addEventListener('devicemotion', function(e){
    gravity = e.accelerationIncludingGravity;

    output.innerHTML
    = 'x方向: '+gravity.x
    + '<br>y方向: '+gravity.y;

    sendModeFromGravityValue(gravity);

  },true);


  function sendModeFromGravityValue(g){

    // 絶対値を取得
    var x = Math.sqrt(g.x * g.x);
    var y = Math.sqrt(g.y * g.y);

    // portrait -> landscape
    if(currentMode === 'portrait' && x > 8.5 && y < 1.5){
      currentMode = 'landscape';
      ds.send({mode: image_landscape});
      document.getElementById('log').value = image_landscape;
    }

    // landscape -> portrait
    if(currentMode === 'landscape' && x < 1.5 && y > 8.5){
      currentMode = 'portrait';
      ds.send({mode: image_portrait});
      document.getElementById('log').value = image_portrait;
    }
  }

  function ImageToBase64(image_src, mime_type) {
    // New Canvas
    var canvas = document.createElement('canvas');
    canvas.width  = image_src.width;
    canvas.height = image_src.height;
    // Draw
    var ctx = canvas.getContext('2d');
    ctx.drawImage(image_src, 0, 0);
    // Image Base64
    return canvas.toDataURL(mime_type);
  }
};

受け側（PC）

送られてくるのを監視し、来たらコールバック関数に飛ばす
コルバック関数内で「image.src」に直接base64のデータを代入する
下記ソース以外に「dummy.png」のファイルを置いておく

index.html

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>PC側</title>
</head>
<body>
<img crossOrigin="Anonymous" id="image" src="./dummy.png" />
<textarea id="log" rows="10" cols="40"></textarea>
<script src='https://cdn.mlkcca.com/v0.6.0/milkcocoa.js'></script>
<script src="main-pc.js"></script>
</body>

main-pc.js

window.onload = function(){

  var image = document.getElementById('image');

  // app_idは自分のものに書き換えてください
  var milkcocoa = new MilkCocoa('app_id.mlkcca.com');
  var ds = milkcocoa.dataStore('gravity');

  ds.on('send', changeViewFromSentMode);

  function changeViewFromSentMode(sent){
    image.src = sent.value.mode;
    document.getElementById('log').value = sent.value.mode;
  }
};

しかし動かない．．．＿|￣|○

「Milkcocoaへの送信」～「Milkcocoaからの受信」のどこかで失敗している模様。
（受信イベントが発火しない）
もしかしたら、送信できるデータのサイズの制限があるのだろうか．．．
（文字数が少ないと、ちゃんと送れることは確認済み）

後日談

見つけました。

※4KBより大きいメッセージの送信はできません。

とのこと。