手作り温度計で得た気温データをMilkcocoaとFreeboardで簡単にグラフ化してみた

どうもこんにちは、ちゃちゃまる（@chachmaru）です。

これまで数回にわたり、Intel Edisonという小さなコンピューターを使って開発をおこなってきました。LEDのライトの色で天気がわかるツールを作り、玄関から外の様子がわかるようにしたり、Intel Edisonとセンサーを組み合わせて温度計を作成したりしました。

今回の記事では、その温度計で計測された温度のデータを、10分ごとにMilkcocoaというサーバーを経由して、Freeboardというグラフ作成サービスでグラフ化してみたいと思います。これなら、家からでもその温度を測っている場所の温度を確認できるようになります。

	Intel Edisonとは Intelが開発しているマイコンボード。Wi-FiモジュールやBluetoothモジュールを最初から搭載している。Intel Edisonの公式サイトはこちら

使うサービス

センサーから得た情報を視覚化するにあたっていくつかのサービスを使用します。

センサーから取得したデータを管理する「Milkcocoa」

https://mlkcca.com/

MilkcocoaというのはIoTデバイスとPCの間で簡単にリアルタイム通信ができるプラットフォームです。自分でサーバーを立てる必要がなく、バックエンドの知識がない方でも気軽に利用できます。無料の会員登録をするだけで利用できるという手軽さも魅力のひとつです。

今回Milkcocoaでは、温度計から取得した温度データを管理します。

Milkcocoaのデータを変移グラフに変換する「Freeboard」

http://freeboard.io/

アメリカ発、「IoT（モノとインターネットを繋ぐこと）を視覚化する」というのを目標にしているサービスです。シンプルなUIなので初心者でも分かりやすく、「とりあえず視覚化したい」というときに手軽に利用できます。こちらも無料の会員登録をするだけで使えますので、MilkcocoaもFreeboardも事前に会員登録を済ませておくのがベストです。

Freeboardでは、Milkcocoaのデータを変移グラフに変換します。それでは実践していきましょう！

1. センサーからMilkcocoaへデータを送る

それではさっそくはじめていきましょう。まずは、センサーが取得した部屋の温度の数値をMilkcocoaへ送ります。

アプリの登録

Milkcocoaへログインしたら、まず「新しいアプリを作る」を選択します。アプリの名前（App Name）には16文字を超えない任意の名前を入力してください。セットアップが終わると、自動的にこのようなページに飛びます。

ここで注目すべきは、app_idです。後ほど、この英数字の文字列を使い「どこにデータを送るのか」を設定します。

コードを書く

Milkcocoaでアプリの作成が終わったらソースコードを作りましょう。Node.jsを使うので、ターミナルから

npm install milkcocoa
を実行します。次に、前回書いたJavaScriptファイルを以下のように編集して、Milkcocoaへデータを送るようにします。
var cylon = require('cylon');

var MilkCocoa = require('milkcocoa');
var mc = new Milkcocoa('maxilklj0p3.mlkcca.com');
var ds = mc.dataStore('temp');

cylon.robot({
    connections: {edison:{adaptor:'intel-iot'}},
    devices: {bmp180:{driver:'bmp180'}},
    work: function(my){
        every((10).minute(), function(){
            my.bmp180.getTemperature(function(err, val){
                if(err) {
                    console.log(err);
                    return;
                }
                console.log('Temp ' + val.temp);
                ds.push({"title":"temp","value":val.temp});
            })
        });
    }
}).start();
前回書いたコードに付け足した箇所は2つあります。まず、下記の部分はMilkcocoaとのコネクションを確立させています。
var MilkCocoa = require('milkcocoa');
var mc = new Milkcocoa('app_id.mlkcca.com');
var ds = mc.dataStore('temp');
このapp_idの部分に、先ほどMilkcocoaの管理画面に記されていた英数字の文字列を入れます。
また、MilkcocoaにはData Storeと呼ばれる、データのやり取りや保存をおこなう場所があります。今回は "temp"（温度）という名前のデータストアに温度情報を格納します。ちなみに、この "temp" という名前が後々必要になってきます。
 

もうひとつは以下の部分です。
ds.push({"title":"temp","value":val.temp});
ここでは、val.tempに入っている値をMilkcocoaの指定したデータストアへ送っています。
ここまでできたら、Intel EdisonでこのJavaScriptファイルを実行してみてください。Milkcocoaの管理画面の「データストア」タブのデータストア名に「temp（先ほど決めたもの）」と入力して「リスト表示（更新）」を押すと、データが送られてきていたら成功です。
2. MilkcocoaからFreeboardへデータを送る
ということでMilkcocoaの準備はこれで完了です。それでは、データをFreeboardを使ってグラフ化してみます。

先ほどのデータストアタブから、「データ可視化（β版）」をクリックします。すると、こちらのようなウィンドウが新しく開きます。これがFreeboardの管理画面です。（2016年3月現在では、Google Chromeのみの対応となっています）
DATA SOURCE
DATA SOURCEという、Freeboardが参照すべきデータのソースが何も追加されていない状態なので、「ADD」で追加します。

このような画面が表示されるので、下記のように登録します。

「TYPE」を「Milkcocoa」
「NAME」を任意の名前
「DATASTORE」をデータを送っているデータストアの名前
「API」を「push」（sendは送るのみ、pushは送って保存する）

最後に「SAVE」を押して完了です。
PANE

Freeboardは1つの管理画面にいろいろなDATA SOURCEからの情報を表示することができ、それらをパネル（PANE）で管理しています。「ADD PANE」を選択すると、このように空のパネルが出てきます。
センサーから取得してMilkcocoaに送った気温データを表示するには、プラスアイコンをクリックして以下の操作をします。

「TYPE」を「Sparkline（折れ線グラフ）」
「TITLE」を任意の名前
「VALUE」では「＋DATASOURCE」を選択→「temp」→「value」→「value」

「SAVE」を押してから10秒ほど待つと折れ線グラフが表示されます。こちらは部屋の温度です。

……あまり変化していませんね（笑）これだと折れ線グラフっぽくないので、自宅の玄関の一日の温度も測ってみました！　これは2時間に1度Milkcocoaにデータを送るようにしています。

ちゃんと折れ線っぽくなりました！　これを応用すれば、「家の中でどこが寒いのか」「気温の上下が激しいのか」といった場所を探し出せそうですね。家だけでなく、倉庫だったり、病院だったりといろんな場所に使ってデータを得れば何かの役に立ちそうです。
おわりに
ということで、自作の温度計で取得した温度のデータを、MilkcocoaとFreeboardを使い、グラフを作ってみました。
Freeboardは1つの管理画面にたくさんのテキストやグラフなどのパネルを追加できるので、例えば温度や天気、人感センサー、監視カメラなどのデータをまとめて管理することもできますよね。それぞれIntel Edisonを使い、Milkcocoaにデータを送って、Freeboardで可視化するだけという手軽な設定で、生活がかなり便利になるかもしれません。
さらに、Edisonにディスプレイを繋げて、玄関や机の上などに置きFreeboardの管理画面を常に表示させておけば、簡単に外の情報を知れちゃいますね。IoTなものを使ったことがない人でも簡単に始められるのでとてもおすすめです。
それではまた！