はじめよう、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に接続するための設定方法
  • 接続する上での注意点

ドキュメント

 


グラフの使い方

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

内容:

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

ドキュメント

 


InfoMotionを動かす

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

注意:

ここで利用する、FirebaseのRealtime Databaseの接続に利用したnode-red-contrib-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(),
 }
 }

 

ドキュメント:

 


次回の動画

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

  1. enebularアカウント登録の方法について
  2. プロジェクトを作成する
  3. フローを編集してデプロイをする
  4. 永続的なデプロイの方法について
  5. 公開されているアセットの使用と作成したアセットの公開の方法
  6. プロジェクトを複数人で管理する方法と注意点
  7. データを可視化する① 〜Data Sourcesの設定〜(今回)
  8. データを可視化する② 〜グラフの使い方〜(今回)
  9. データを可視化する③ 〜InfoMotionを動かそう〜(今回)
  10. enebular editorの使い方
  11. Raspberry Piのセットアップ①
  12. Raspberry Piのセットアップ②

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

 


関連リンク

enebularユーザー向け技術ポータル