MilkcocoaでBaaSを体験!~バックエンドの仕組みと使い方~

第4回圧倒的にリアルタイム通信が楽しくなる! Milkcocoaをサーバーサイドで使ってみよう! ~Milkcocoa Node.js SDKの紹介~

前回まででMilkcocoaの概要から簡単な使い方、発展的な使い方を紹介しました。前回まではフロントエンド開発としてのJavaScriptを使ってブラウザで動作するWebアプリケーションを実装してきました。

今回はMilkcocoaのNode.js向けSDKを用いて、サーバサイドでMilkcocoaを使っていきたいと思います。

図1 MilkcocoaとNode.ja
図1 MilkcocoaとNode.ja

Milkcocoa Node.js SDK

まだ開発版ですが、MilkcocoaはNode.jsのSDKも公開されています。Milkcocoa Node.js SDKは通常のJavaScript SDKと同様の使い方をすることができ、直感的に記述することが可能なので、初心者でも迷わずに使うことが出来ます。

APIリファレンスは通常のSDKのものと同じです。

Milkcocoaをあえてバックエンドで利用する

前回までの内容からわかるとおり、Milkcocoaを使うことでバックエンド構築をすることなく、フロントエンド開発だけでアプリケーションが作れるようになります。Milkcocoaをあえてバックエンドで利用するメリットを紹介したいと思います。

データベースとWebSocketライブラリの代替

Node.jsを使ったリアルタイム通信を行いデータを保存していく仕組みを作る場合はNode.jsmongoDBsocket.ioを使ったアーキテクチャがデファクトスタンダードになりつつあります。このアーキテクチャを用いることで、サーバプログラムで処理を行った内容をリアルタイムにユーザに通知することが可能になります。

図2 Node.jsを使ったリアルタイム通信のアーキテクチャ
図2 Node.jsを使ったリアルタイム通信のアーキテクチャ

ただ、この構成をするためにはNode.js、mongoDB、socket.ioをそれぞれ用意する必要があり、ある程度の作業コストが発生します。

図3 MilkcocoaがmongoDBとsocket.ioを肩代わりしてくれる
図3 MilkcocoaがmongoDBとsocket.ioを肩代わりしてくれる

MilkcocoaはmongoDBとsocket.ioを一挙に肩代わりしてくれるサービスとも言えます。Node.jsの準備だけしておけば、すぐにでもチャットのようにリアルタイム通信を行いデータを保存する仕組みを作ることができます。また、自前で用意するアーキテクチャが減ることで、作業スピードを上げることが可能になります。

負荷分散にMilkcocoaを利用

Milkcocoaを使いサーバへのアクセス数を制御するという利用方法もあります。通常のWebサービスでリアルタイム通信を行う場合、Webサイトに訪れるユーザ数がそのままWebSocketのコネクション数になります。

図4 サーバの負荷が高い
図4 サーバの負荷が高い

サーバへの同時接続数が多くなればなるほど、サーバ負荷が大きくなり、コストやサーバダウンのリスクが高くなります。

図5 サーバの負荷を軽減できる
図5 サーバの負荷を軽減できる

静的サイトホスティングのフロントサーバと実際の処理をするバックエンドサーバーの間にMilkcocoaを仲介することで、バックエンドサーバに対するコネクションを一本化出来るので、負荷を軽減し、コストやリスクを下げることも出来ます。

サーバサイドでの処理をイベントとしてフロントサーバに反映させるときに有効です。

IoT領域でデバイスとWebを繋げるMilkcocoa

IoT(Internet of Things)という単語をご存知でしょうか? 直訳すると⁠モノのインターネット⁠です。色々なモノがインターネットと接続して新たなコミュニケーションや表現が可能となるという領域です。

ArduinoRaspberry Piなどのマイコンボードを経由してモノに接続する表現が流行ってきています。

IoT領域ではデバイスとデバイスをつなげたり、デバイスとWebをつなげる場合のコネクション手法をどうするかが課題になります。その手法としてMilkcocoaを利用することができます。Milkcocoaの開発元である⁠株⁠Technical Rockstarsの部谷氏の発表資料ではRaspberry Pi上でNode.jsを使いMilkcocoa Node.js SDKを経由してWebゲーム上でエフェクトを掛ける仕組みを紹介していました。

図6 Raspberry PiからMilkcocoaを経由してWebゲーム上でエフェクトを掛ける
図6 Raspberry PiからMilkcocoaを経由してWebゲーム上でエフェクトを掛ける

このような連携時にもMilkocoa Node.js SDKは活用できますし、既に構築済みのWebサービスにこう言ったデバイス連携を後から追加しようとしたときにも、Milkcocoaを使うことで簡単に連携ができます。

今回の記事の対象者

ここからの内容は実際にコードを書いて一緒に試して頂きたいです。今回の記事では、以下の方が主な対象になると思います。

  • Node.jsを使ったことがあるエンジニア
  • Node.jsは触ったことが無いけれど、前回までのサンプルを動かしたことがあるフロントエンジニア・デザイナー・コーダー・ディレクターなど
  • IoTという言葉に興味があるエンジニア

これに当てはまらない方でも興味を持たれた方は是非チャレンジしてみてください。わからないところがあれば@n0bisukeまで気軽にご連絡ください。

Milkcocoa Node.js SDKを試してみよう

それでは実際にMilkcocoa Node.js SDKを使った開発を進めて行きましょう。

開発環境の説明

実際に開発に入る前に筆者の環境を参考までに紹介します。思わぬエラーやバグが出たときに参考にしてください。

  • Mac OS X 10.10 Yosemite
  • Node.js 0.12
  • Milkcocoa Node.js SDK
  • Socket.io-client 1.6.0

環境準備

Node.jsのインストール

すでにNode.jsが利用できる環境の方は、読み飛ばしてください。

Node.jsのインストールはこちらの記事を参考にしてnvm(Node Version Manager)を利用できるようにしましょう。

nvmはNode.jsのバージョンを指定してインストールしたり、簡単にバージョンを切り替えることが出来るツールです。

nvmのインストールが完了したら、nvmを使ってNode.jsをインストールしてみます。

$ nvm install 0.12

特にエラーなどが発生しなければこれでNode.jsのインストールが完了です。-vオプションでバージョンが確認できるので確かめてみましょう。

$ node -v
v0.12.0

Milkcocoa SDK の準備

MilkcocoaはNode.jsのSDKも公開されています。このSDKはまだ開発版のため、今後は仕様が変わる可能性があるので注意してください。

MilkcocoaのCDNからzipファイルをダウンロードしてきましょう。npm経由ではないので注意して下さい。

図7 ダウンロードしたzipファイルを展開したところ
図7 ダウンロードしたzipファイルを展開したところ

展開したフォルダ内のindex.jsがSDKの本体になります。

サンプルを動かしてみよう

準備が整ったところでサンプルを動かして雰囲気を掴んでみましょう。先ほどのmilkcocoaフォルダ内でモジュールのインストールをします。

$ npm i

これで必要なモジュールがインストールされます。node_modulesというフォルダとフォルダ内にsocket.io-clientフォルダが出来ているのがわかると思います。

図8 socket.io-clientフォルダが出来る
図8 socket.io-clientフォルダが出来る

同梱されているpackage.jsonを確認してみます。

package.json
{
  "name": "milkcocoa-node",
  "version": "0.0.1",
  "description": "milkcocoa client for Node.js.",
  "main": "index.js",
  "scripts": {
    "test": "npm test"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/milk-cocoa/milkcocoa.git"
  },
  "dependencies": {
    "socket.io-client" : "1.0.*"
  },
  "keywords": [
    "milkcocoa",
    "realtime"
  ],
  "author": "Technicak Rockstars",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/milk-cocoa/milkcocoa/issues"
  }
}

"socket.io-client" : "1.0.*"という記述があります。Milkcocoa Node.js SDKを利用するうえで必要となるのは、socket.io-clientというモジュールなので、自身で利用する際にもこのように記述しておくと良いでしょう。

先ほどのmilkcocoaフォルダ内にあるsample.jsが実行サンプルになります。

それでは実行してみましょう。以下のような感じで出力されればサンプルの動作は成功です。

$ node sample.js
connected
{ path: 'nodejs',
  id: 'i7b9zy790001egf',
  value: { text: 'あああいうえお', id: 'i7b9zy790001egf' },
  error: null,
  sys: { path: 'nodejs' } }

サンプルの解説

sample.jsの中身を読んでいきましょう。

sample.js
var MilkCocoa = require("./index.js");

var milkcocoa = new MilkCocoa("https://io-ti2dak0ql.mlkcca.com");
var ds = milkcocoa.dataStore("nodejs");
ds.on("push", function(r) {
    console.log(r);
});
ds.push({ text : "あああいうえお"});
  • 1行目:SDK(index.js)の読み込みをしています。
  • 3行目:milkcocoaとのコネクションを確立します(通常はapp IDを作成して使います⁠⁠。
  • 4行目:nodejsという名前のデータストアにアクセスします。dsという変数でデータストアオブジェクトを作成し、データを読み書きする準備をします。
  • 5~7行目:on関数で、イベントの監視をします。この場合dsに対してpushイベントを受け取った場合に受け取ったデータをconsole.log()で表示します。
  • 8行目:dsに対してpushメソッドを実行します。

8行目のpushメソッドを実行した時点でpushイベントが発生するので、5~7行目のon関数pushイベントを監視している部分が発火してコンソールに表示されます。

プログラムの流れがわかったところで、リアルタイム通信をしている様子を確認しましょう。これを確認しないとMilkcocoaを使う意味合いが半減しますね(笑⁠⁠。

リアルタイム通信が出来ている様子を見るために、別タブなどでもう1つNode.jsプロセスを立ち上げてみましょう。

仮に、画面下がAプロセス、画面上がBプロセスとします。

図9 リアルタイム通信の様子(サムネイルでは表示が崩れます。ご了承ください。)
図9 リアルタイム通信の様子

Aプロセスを立ち上げた状態でBプロセスを立ち上げると、Aプロセス側のon(push)も発火してAとBのコンソールに同時に表示されるのがわかると思います。

これで別々の環境でもリアルタイムに通信が行われているのが体験出来ると思います。

socket.io-clientについての補足

socket.io-clientは本稿執筆現在(2015年3月16日時点)はv1.3.5が最新となってますが、1.1系以上だと日本語文字列が文字化けしてしまう現象が確認されていますので注意してください。1.0系の最新の1.0.6を使うことをお勧めします。

以下のキャプチャ画面を見るとわかるようにあああいうえおという文字列がBBBDFHJとなっています。

図10 通常時(1.0系利用時)
図10 通常時(1.0系利用時)
図11 文字化け時(1.1系以上を利用時)
図11 文字化け時(1.1系以上を利用時)

まとめ

いかがでしたでしょうか? 今回はMilkcocoa Node.js SDKの紹介と、サーバサイドでのMilkcocoaの利用シーンの紹介、実際にMilkcocoa Node.js SDKの基本的な使い方を紹介しました。Milkcocoa Node.js SDKがとても簡単に利用できて、様々な場面で利用出来るという可能性を感じて頂けたのではないでしょうか?

次回はMilkcocoa Node.js SDKを使って実際に簡単なアプリケーションを作成し、作成方法を紹介してみようと思います。

興味を持たれた方はぜひSDKを使って何かモノを作ってみてください。それでは。

おすすめ記事

記事・ニュース一覧