Milkcocoa のチュートリアルを試す

Milkcocoa のチュートリアルをやってみました。

Milkcocoa とは？
チュートリアル
まとめ

Milkcocoa とは？

公式サイトでは以下のように説明されています。

説明文その１

Milkcocoaは、IoTデバイス・スマートフォン・PC間で簡単にリアルタイムなデータのやり取りが出来るようになるクラウドプラットフォームです。

説明文その２

Milkcocoaを利用すると、自前でサーバを準備せずに弊社が提供するクライアントSDKを介してデータの保存、更新、取得またPub/Sub通信を行うことが出来ます。通信はTLS暗号化され、保存されたデータは自動的にレプリケーションされます。クライアントからの通信はErlangサーバにて処理され、多くのトランザクションに対応することが出来ます。

つまり、Milkcocoa のサーバに何かしらのデータを置けるようになります。複数デバイスから利用することで、お互いを直接指定しなくても、データをやり取りして連携することが可能となります。

このようなサービスのことを「BaaS (Backend as a service)」と呼びます。

チュートリアル

以下のチュートリアルをやってみます。

Tutorial | Milkcocoa

このチュートリアルでやる内容はおおまかに以下となります。

スマートフォン用のWebページ(A)と、PC用のWebページ(B)をそれぞれ作成します。(B)ではスマートフォンの画像が表示されます。
スマートフォンで(A)にアクセスし、スマートフォンの向きを変えると、その情報が Milkcocoa側に送信されます。
(B)にアクセスしたPCは、ほぼリアルタイムで 2で送信された情報を Milkcocoa側から受け取り、スマートフォン画像も向きが変更されます。（リアルのスマートフォンと、画像のスマートフォンの向きが連動します）

1. アカウント登録する

メールアドレスとパスワード(2箇所)を入力して、「アカウント作成」ボタンをクリックします。

すると、メールが届きますので、本文にあるリンクを開いて登録を完了させます。

2. ログインする

Milkcocoaサイト右上にある「ログイン」ボタンをクリックするとログインフォームが表示されるので、メールアドレスとパスワードを入力してログインします。

ログインすると dashboard の画面が開きます。

3. アプリを作成する

「新しいアプリを作る」ボタンをクリックすると、以下のフォームが表示されるので「App Name」欄に任意の名前を入力して「新しいアプリを作る」ボタンをクリックします。

今回は、「test001」という名前にしました。

作成したアプリが表示されます。ここに表示された app_id は後で使うことになります。

アプリをクリックすると以下のような画面が表示されます。

チュートリアルでは、『デフォルトで「認証済みクライアント以外を接続不可にする」がONになっています。今回は認証を行わないので、OFFにしましょう。』と書いてありましたが、最初から OFFになっていました（「認証」ページ）。

4. スマートフォン側のWebページを用意する

今回は、私の管理している Webサーバーを利用して、スマートフォンから以下のURLにアクセスさせることにしました。

https://misc.laboradian.com/milkcocoa/sp/index.html

このページ内から利用する JavaScriptファイルも以下のURLとして用意します。

https://misc.laboradian.com/milkcocoa/sp/main-sp.js

それぞれのソースコードは以下となります。

index.html

<body>
  <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');

  // Milkcocoa側のデータにアクセスするためのオブジェクトを生成します
  // app_idは自分のものに書き換えてください
  var milkcocoa = new MilkCocoa("app_id.mlkcca.com");
  // 今回、データストアの名前を 'gravity' としています
  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';
      // Milkcocoa側にデータを送ります
      ds.send({mode: currentMode});
    }

    // landscape -> portrait
    if(currentMode === 'landscape' && x < 1.5 && y > 8.5){
      currentMode = 'portrait';
      // Milkcocoa側にデータを送ります
      ds.send({mode: currentMode});
    }
  }
};

5. PC側のWebページを用意する

PCから以下のURLにアクセスさせることにしました。

https://misc.laboradian.com/milkcocoa/pc/index.html

このページ内から利用する JavaScriptファイルも以下のURLとして用意します。

https://misc.laboradian.com/milkcocoa/pc/main-pc.js

それぞれのソースコードは以下となります。

index.html

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
  <title>PC側</title>
  <style>
  #image{
    -webkit-transition: all .25s ease-out;
      transition: all .25s ease-out;
    -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  /* 画像を横向きにするためのCSSクラス */
  #image.is-landscape{
    -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
  }
  </style>
</head>
<body>
  <img id="image" src="https://s3-ap-northeast-1.amazonaws.com/new-tutorial/smartphone.min.svg" alt="スマートフォン">
  <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');

  // Milkcocoa側のデータにアクセスするためのオブジェクトを生成します
  // app_idは自分のものに書き換えてください
  var milkcocoa = new MilkCocoa("app_id.mlkcca.com");
  // スマートフォン側で指定したデータストア名をセットします
  var ds = milkcocoa.dataStore('gravity');

  // Milkcocoa側にデータが送信された時に、第二引数の関数が呼び出されるようにします
  ds.on('send', changeViewFromSentMode);

  function changeViewFromSentMode(sent){
    console.log(sent.value.mode);
    // Milkcocoa側に 'portrait' が送信された時
    if(sent.value.mode === 'portrait'){
      // image要素のクラスに空を指定すると、スマートフォン画像は縦に表示されます
      image.className = '';
    }
    // Milkcocoa側に 'landscape' が送信された時
    if(sent.value.mode === 'landscape'){
      // image要素のクラスに 'is-landscape' を指定すると、スマートフォン画像は横向きに表示されます
      image.className = 'is-landscape';
    }
  }
};

6. スマートフォンで Webページにアクセスする

スマートフォンで、以下の Webページにアクセスします。

https://misc.laboradian.com/milkcocoa/sp/index.html

スマートフォンの向きをいろいろな方向に動かします。

7. PCで Webページにアクセスする

PCで、以下の Webページにアクセスします。

https://misc.laboradian.com/milkcocoa/pc/index.html

最初は以下のように表示されます。

スマートフォンを横向きにすると、以下のように画像が変化します。

上記では、Chromeを使っており、開発者ツールのコンソールを開いています。その中で、”landscape” や “portrait” といった文字列が表示されていることが分かります。

8. Milkcocoaの管理サイトで、送信されたデータを監視する

Milkcocoaの管理サイトで、「データストア」–>「データ可視化(β版): FreeBoard(Chromeでご利用下さい)」とクリックしていくと、リアルタイムで送信されてきたデータを表示することができます。

「DATASOURCES」の「ADD」ボタンをクリックします。（注意：以下の画像内では既にデータソースを作成済です）

以下のように値を入力して「SAVE」します。

すると、以下のようにパネルが追加され、Milkcocoaに送信された文字列がリアルタイムで表示されます。

まとめ

同じようなBaaSのサービスとして、Firebase や PubNub などがありますが、Milkcocoaは日本のサービスであり、また機能が少ないといったこともあり、圧倒的に分かりやすいです。今回やったのは Webサイトのチュートリアルでしたが、Node.js, Arduino/ESP8266, Android/Java からも使えます。お手軽に BaaSを使いたいなら Milkcocoa がオススメです。