ニフクラmBaaSお役立ちブログ

スマホアプリ開発にニフクラmBaaS。アプリ開発に役立つ情報をおとどけ!

IoTトライアルキット用ビューワーを作りました

※ こちらは公式ツールではありませんのでご注意ください。

NCMBはスマートフォンアプリ以外でも利用が広がっています。その一つがIoTです。細かなデータを逐次アップロードする必要があるIoTにおいて、サーバを用意したりバックエンドの開発を行わずにすぐ使えるmBaaSは重宝されています。

そこでNCMBではIoTトライアルキットを提供しているのですが、そこで蓄積されたデータを簡易的に可視化できるツールを作成しました。

画面

まず画面を表示すると上に登録してあるセンサーが一覧表示されます。

そこでセンサーを選択するとグラフが表示されます。

複数のセンサーを選ぶと同じグラフ上に描画されます。ただし日時単位なのでセンサーデータの収集開始日時がずれているとデータが見づらくなってしまいます。

表示できるグラフは温度、湿度、騒音、UV、気圧、熱中症危険度になります。タブを選ぶとグラフが切り替わります。

使い方

NCMBMania/IotViewerをクローンまたはダウンロードして、セットアップします。セットアップには Bower が必要です。

$ bower install

次に index.html を開いて、YOUR_APPLICATION_KEY と YOUR_CLIENT_KEY をそれぞれIoTトライアルキットのものと置き換えてください。

<script>
  var application_key = 'YOUR_APPLICATION_KEY';
  var client_key = 'YOUR_CLIENT_KEY';
</script>

これでセットアップが終わりです。任意のHTTPサーバ上で実行してください(ローカルでも実行可能です)。


このビューワーではmBaaSから取得できるデータを Flotr2 というグラフライブラリで描画しています。今回は簡易的なXY軸の折れ線グラフですが、他にも種類があるので好みのグラフに置き換えても良いでしょう。

IoTツールキットをお使いの方はデータの可視化にご利用ください。

NCMBMania/IotViewer