WebからIoTまで！Milkcocoaを使って超簡単にリアルタイム通信を実装してみよう

2016/02/26

こんにちは。Webエンジニアの田島です。

みなさんは今までサービスやコンテンツを作っていて、以下の様なことを思ったことはないでしょうか。

Web上でユーザ同士がチャットできる機能を実装したい
Google Driveのように、複数人で同時にファイルを編集できる機能を提供したい
パソコンとスマートフォンを連動させて、スマートフォンからパソコンを操作できるようにしたい
Raspberry Piで取得した値を即時にWeb上で見られるようにしたい

これらを実現するために共通する必要な要素が「リアルタイム通信」です。

今までリアルタイム通信を実装するには、サーバーを用意し、Node.jsやWebSocketといった技術を使ってリアルタイム通信特有のプログラムを記述する必要があったのですが、今回紹介するMilkcocoaというサービスを使えば、それらがなんとサーバーを用意することなく、フロントエンド側でJavaScriptを1行書くだけで実現することができます。

それでは、具体的にどういうステップで実装すれば良いのか、実際にMilkcocoaの使い方を、製作した事例などを含めて紹介していきたいと思います。

Milkcocoaについて

Milkcocoaは、福岡発のベンチャー企業、株式会社Technical Rockstarsが2014年に提供を開始したサービスです。

Node.jsやWebSocketといったサーバーサイドのプログラムを記述することなく、JavaScript1行書くだけでリアルタイム通信を実装できることが特徴です。

また、データベースも同時に提供されるため、取得したデータを保存していくことも可能です。
利用料金は、同時接続数20 および保存データ数100,000件までは無料、それ以上の利用は必要量に応じた従量課金制となっています。かんたんなサービスや作品用であれば、無料プランでまかなうことができますね！

株式会社LIGさんでは、実務にてMilkcocoaの導入事例もあり、その実績と信頼性も高いと言えるでしょう。

Milkcocoaの使い方 (JavaScriptでの実装方法)

さて、それではJavaScriptを使ってスマートフォンの加速度センサの値をリアルタイムにPCサイトに通信するという例を見ながら、Milkcocoaの実装例を紹介していこうと思います。

1.Milkcocoa IDを取得する

まず、Milkcocoaのサイトにアクセスし無料アカウント登録をしてIDを取得しましょう。

2.app_idを確認する

Milkcocoaアカウントを取得できたら、Milkcocoaサイトにログインし、アプリを作成しましょう。

すると、下記画像の赤色部分にてapp_idを確認することができます。

このapp_idは実装の際に必要となりますので、保存しておいてください。

3.スマートフォン側のコードを書く

コードはPCサイト側、スマートフォン側にそれぞれ書く必要があります。
まずは、スマートフォン側のコードから見ていきましょう。

<!– (1) milkcocoa.jsの読み込み –>
<script src=”http://cdn.mlkcca.com/v2.0.0/m
ilkcocoa.js”></script>

<!– milkcocoaのセットアップ –>
<script>
　　var milkcocoa = new MilkCocoa(“{app_id}.mlkcca.com”); // (2) セットアップはこれだけ！(1行)
　　var datastore = milkcocoa.dataStore(“{データストア名(任意)}”); // (3) データストアへの接続

　　// (4) 加速度センサの値をPCサイト側に送信
　　window.addEventListener(“devicemot
ion”, function(e) {
　　　　datastore.send({
　　　　　　x: e.accelerationIncludingGravity.x,
　　　　　　y: e.accelerationIncludingGravity.y,
　　　　　　z: e.accelerationIncludingGravity.z
　　　　});
　　});
</script>

まず、(1) MilkcocoaのJavaScriptファイルを読み込みます。上記コードのコピペで問題ありません。

次に、(2) Milkcocoaのセットアップを行いましょう。このようにたった1行書くだけでセットアップは完了です！簡単ですね。

ここに記述すべき {app_id}の値は、先ほどのアプリ取得で得られたものを使ってください。
そして、(3) 使用するデータストアへの接続を行います。 {データストア(任意)}と書かれた箇所は任意の名前を記述するだけで問題ありません。

例:

$ var dataStore = milkcocoa.dataStore(“store”);

(4) は実際にスマートフォンの加速度をPCサイト側に送信しているコードです。Milkcocoaを使って値を送信するには、データストアのsendメソッドを使います。

引数にオブジェクトを渡すと、それがそのまま同じデータストアに接続している端末で受け取れる仕組みとなっています。

また、スマートフォンの加速度センサは、上記のように

window.addEventListener(“devicemot
ion”, function(e) {
　　/*
　　　加速度x: e.accelerationIncludingGravity.x
　　　加速度y: e.accelerationIncludingGravity.y
　　　加速度z: e.accelerationIncludingGravity.z
　　*/
});

と記述することでx, y, zそれぞれを取得できます。

(4)のコード例では、加速度が変化する度に x, y, z それぞれの加速度値をPCサイト側へと送信させています。

4.PCサイト側のコードを書く

次に、データを受け取るPCサイト側のコードについて説明します。

<!– (1) milkcocoa.jsの読み込み –>
<script src=”http://cdn.mlkcca.com/v2.0.0/m
ilkcocoa.js”></script>

<!– milkcocoaのセットアップ –>
<script>
　　var milkcocoa = new MilkCocoa(“{app_id}.mlkcca.com”); // (2) セットアップはこれだけ！(1行)
　　var datastore = milkcocoa.dataStore(“{データストア名(任意)}”); // (3) データストアへの接続

　　// (4) スマートフォンから送信された値を受け取る
　　datastore.on(‘send’, function(sent){
　　　　console.log(sent.value);
　　});
</script>

上記の(1)〜(3)はスマートフォン用に書いたコードと全く同じです。忘れないように記述しましょう。

(4) が、スマートフォンから送られてきた値を受け取るコードになります。
データを受け取るには、datastoreのonというメソッドを使います。

datastore.on(‘{イベント名}’, function(sent){
　　/* コールバック関数 */
});

この記述によって、{イベント名} に書かれたメソッドがスマートフォン上で実行されると、
ただちに /* コールバック関数 */ の中身が実行されるという内容になっています。
先ほどsendというメソッドによってスマートフォンからデータを送ったので、第一引数は sendとしましょう。

ちなみに、データの送信方法はsendの他に、データを保存したい場合用のpush、保存したデータの内容を更新したい場合用のsetがあります。

ただしこれらのメソッドはsendよりも利用上限が小さく設定されているため、特にデータを保存する理由がなければsendを使うのが良いでしょう。コールバック関数に渡される引数 (上記の例ではsent)には、sendメソッドを実行した際に送った値が渡されます。

実際の値は、valueプロパティの中に格納されている点に注意しましょう。
(4)の例では console.log(sent.value); によって受け取った値をconsole.logにて出力する例を示しています。

以上でリアルタイム通信を実現するJavaScriptのコードの完成です！簡単ですね。
また、今回はスマートフォンからPCへデータを送る例を示しましたが、PCサイト側にsendを、スマートフォン側にonのメソッドを記述すれば逆方向にデータを送ることもできるので、双方向通信の仕組みを作ることも可能です。

あとは、スマートフォンをリモコンみたいにするもよし、卓球のラケットに見立ててゲームを作ってみるもよし、加速度だけでなくテキストデータをやりとりしてみるもよしで、面白いものを思いついたらすぐに作ってみてください！

応用してつくってみた！

1. iPhoneの傾きを画面上にミラーリング！

まずはシンプルに、現実世界上のiPhoneの傾きを、PCの画面上に映された3DモデルのiPhoneに反映させたものを作ってみました。

デモムービー

不思議な感覚ですね（笑）

これを見ると、実際のiPhoneの傾きと、画面上のiPhoneの傾きとにほとんど遅延がなく
リアルタイムに連動していることがわかると思います。

DARTS MAP

今度はもうちょっと応用して、iPhoneをリモコンのようにして、ストリートビューの中を探検できるコンテンツを作ってみました。

デモムービー

操作は以下の手順で行うことができます。

(1) サイトにアクセスすると、QRコードが表示されるので、スマートフォンから読み込む。
(2) ダーツを投げるように、スマートフォンを思い切りブンッと振る。(加速度センサの性質上、iPhoneのほうが動作が安定しています)
(3) 矢が当たった国へとストリートビューで飛びます。
(4) スマートフォンを向ける方向を変えるとストリートビューのカメラアングルも連動して変わり、歩くときに手を振るような感覚でスマートフォンを振ると、実際にストリートビュー上で前に進むことができます。

まるで実際にその場にいるような感覚で、ストリートビュー上を歩いてもらえれば嬉しいです！

IoTとの組み合わせがアツい！

さて、この記事では私がWebエンジニアということもあり、Webコンテンツに偏った内容で紹介してきましたが、実はMilkcocoaは、Web以外のもので利用することもでき、特にIoTとしての活用がアツいのです！

例えば、Raspberry Pi、Tessel、Intel Edisonといった定番系デバイスであれば一通り実装事例が紹介されていたり(※)、Milkcocoaサイトのサンプルページにあるドット絵の色を塗ると、スマートハウスショールーム「Connectly Lab.」にある寝室のhue(照明)の色がその色に変わるらしいです！未来的ですね。

※ Raspberry Piの実装事例、Tesselの実装事例、Intel Edisonの実装事例

そしてなんと、Milkcococaは2016年2月にてIoT企業である株式会社ウフルに事業譲渡することが決定しました。

早速、株式会社ウフルのデータ連携プラットフォームenebularとMilkcocoaを組み合わせて使うことができるようになっていたり、シナジーを生み出しています。

今後の動きにも注目です。