はじめよう、enebular (4)

5回連載でenebularのはじめ方や活用方法などを動画でご紹介しています。「enebularってはじめるのが簡単って聞いたけどどんな感じ？」とか「遠隔地のデバイスにフローをデプロイするって、どういう風にやるの？」とか……などの疑問にお答えします。

第4回：データを可視化する

前回はフローエディタで利用するNode-REDよりもenebularが便利である機能を試してみました。今回は、enebular標準のデータ可視化機能、InfoMotionを試してみましょう。

Data Sourceの設定

センサー等から取得したデータをFirebaseやPubNub等のデータの保管先（Data Source）に入れ、InfoTypeというテンプレートを使ってInfoMotionという機能で可視化します。まずは、Data Souceの設定についてです。

内容：

DataSourcesとInfoMotion、InfoTypeの関係について
DataSourcesの機能からFirebaseに接続するための設定方法
接続する上での注意点

ドキュメント

Data Sourceの作成

グラフの使い方

次は、データを可視化する上でのグラフの使い方についてです。テンプレートであるInfoTypeをいくつか紹介し、Discoverからインポートして使ってみます。

内容：

Discoverに公開されているInfoTypeを解説
公開されているInfoTypeをインポートする方法

ドキュメント

InfoMotionを動かす

接続したData SourceのFirebaseにデータを渡し、InfoMotionを使ってデータを折れ線グラフとして表現する方法を説明します。Firebaseの設定で注意する点、そして実際にenebularでフローを作成する方法も説明します。

注意：

ここで利用する、FirebaseのRealtime Databaseの接続に利用したnode-red-contrib-firebaseというノードが現在のFirebaseに対応しなくなってしまいました。そのため、この動画のフローやドキュメントで公開しているチュートリアルが正しく動作しません。ここでは概要を把握するために動画をご覧いただき、実際にフローを作成する際には下記の本ブログ別記事を参照してください。

「Firebaseにデータ連携できるノード」

内容：

Firebase上のデータベースを作る時の注意点
Firebaseにデータ送るためのフローの作り方
InfoMotionを使いFirebaseに入れた値をグラフ化する方法

サンプルコード：

functionノードに記載するコードはこちらからコピーしてお使いください。

var data ={
  timestamp: Date.now(),
 value: {
  category: ['A','B','C','D'][Math.floor(Math.random()*10)],
  value: Math.floor(Math.random()*10),
  ts: Date.now(),
 }
 }

ドキュメント：

- Firebaseアカウントの登録

次回の動画

次回は、★印の項目を解説します。

今後の更新をお楽しみに。

第4回：データを可視化する

Data Sourceの設定

内容：

ドキュメント

グラフの使い方

内容：

ドキュメント

InfoMotionを動かす

注意：

内容：

サンプル コード：

ドキュメント：

次回の動画

関連リンク

サンプルコード：