Milkcocoa のチュートリアルをやってみました。
目次
Milkcocoa とは?
公式サイトでは以下のように説明されています。
説明文その1
Milkcocoaは、IoTデバイス・スマートフォン・PC間で簡単にリアルタイムなデータのやり取りが出来るようになるクラウドプラットフォームです。
説明文その2
Milkcocoaを利用すると、自前でサーバを準備せずに弊社が提供するクライアントSDKを介してデータの保存、更新、取得またPub/Sub通信を行うことが出来ます。通信はTLS暗号化され、保存されたデータは自動的にレプリケーションされます。クライアントからの通信はErlangサーバにて処理され、多くのトランザクションに対応することが出来ます。
つまり、Milkcocoa のサーバに何かしらのデータを置けるようになります。 複数デバイスから利用することで、お互いを直接指定しなくても、データをやり取りして連携することが可能となります。
このようなサービスのことを「BaaS (Backend as a service)」と呼びます。
チュートリアル
以下のチュートリアルをやってみます。
このチュートリアルでやる内容はおおまかに以下となります。
- スマートフォン用の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にアクセスさせることにしました。
このページ内から利用する JavaScriptファイルも以下のURLとして用意します。
それぞれのソースコードは以下となります。
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にアクセスさせることにしました。
このページ内から利用する JavaScriptファイルも以下のURLとして用意します。
それぞれのソースコードは以下となります。
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ページにアクセスします。
スマートフォンの向きをいろいろな方向に動かします。
7. PCで Webページにアクセスする
PCで、以下の Webページにアクセスします。
最初は以下のように表示されます。
スマートフォンを横向きにすると、以下のように画像が変化します。
上記では、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 がオススメです。