【enebular 2020】 #enebular の InfoMotion によるグラフ表示を試してみた！（PubNub との組み合わせ） #enebular

この記事は、enebular Advent Calendar 2020 の 20日目の記事です。　
この記事では、enebular の公式ブログの記事の中で取り上げられていて気になった「InfoMotion」を試した話です。

最初に、公式ブログを見ていて気になった記事をリストで紹介した後、本題へと入っていきます。

公式ブログで個人的に気になった記事をピックアップ

今回の記事で扱う「InfoMotion」の話を見つける前に公式ブログをいろいろ見ていて、そこで気になる記事が複数あったので、ここで紹介しておこうと思います。

以下は、2020/1/10〜2020/12/14 までに公式ブログにアップされた記事の中で、自分が気になった内容を並べたものです。上にあるほど投稿日が新しい記事になります。

気になるものがたくさんあるので、機会があったら試したり記事にしたりしてみたいところです。

それではここから、この記事の本題である「Infomotion」について書いていきます。

enebular の InfoMotion

可視化ツールである InfoMotion について、公式ドキュメントの関連ページは以下などがあります。

●Introduction · enebular
　https://docs.enebular.com/ja/infomotion/Introduction.html

詳細説明について、気になる方はこの公式ドキュメントをご覧ください。
ここからは、自分で用意したデータを InfoMotion でグラフ表示させるための手順を進めていきます。

InfoMotion を追加する

enebular にサインインして新規のプロジェクトを作成し、そのメニュー内の InfoMotion を選んでみます。

右下のボタンから、InfoMotion を新規追加してみます。

名前等を適当に決めて追加してみました。
その後に出てくる画面では「Manage Graphs」というボタンが表示されるものの、操作することはできません。まだ、設定をする必要がある項目が残っているためです。

InfoType のサンプルをダウンロードする

次へ進む前に、次の手順で使うデータをダウンロードしておきます。
以下の Sample InfoTypes のページにいくつかあるサンプルのうち、今回は「Line Chart」を試してみます。

●Sample InfoTypes · enebular
　https://docs.enebular.com/ja/infomotion/sampleinfotypes

以下で示した「Sample Line Chart Download (zip)」を押して、ZIPファイルをダウンロードして解凍してください。

少し補足すると、これは InfoMotion でデータの可視化を行う際の見た目・設定を決めるためのファイルのようです。
上記以外にもサンプルがあったり、また自分で独自に作成することも可能なようです（自作については、以下などをご参照ください）。

●Creating an InfoType · enebular
　https://docs.enebular.com/ja/infomotion/InfoTypeIntroduction.html

InfoType の設定

それでは enebular の画面のほうは、1階層上のプロジェクトの画面に戻り、戻った先の画面左のメニューの中の「InfoTypes」を選びます。

画面右下のボタンから、新規に InfoType を追加していきます。

ボタンを押した後、以下のような画面が出ると思います。
以下で赤枠で囲んだ部分に、先ほどの ZIPファイルを解凍して出てきた 3つのファイルをドラッグアンドドロップをしてアップロードします。

アップロードができたら、その下の Category で Line Chart などを選んでから、右下にある Uploadボタンを押します。その後、以下のような画面が出てきますので、1つ上の階層のプロジェクトのメニューに戻ってください。

Infomotion の設定の続き

戻って来た画面を見てみると、以下のように InfoType と InfoMotion が Assets の中に並んだ状態になっています。

InfoMotion　のほうを選ぶと、先ほどは押すことができない状態になっていた「Manage Graphs」ボタンが有効になっているので、これを押してみます。

画面の右に出てきた「Create Graph」ボタンを押します。

とりあえず、今の時点ではデフォルト設定のままでメニューの下のほうへ移動し、下にある「Save」ボタンを押します。

さらに、以下の画像で示した「Add」ボタンを押しましょう。

ひとまず、以下の画像のように折れ線グラフが出てくれば、ここまでの手順は OK です。

PubNub のキーを取得する

これまでの手順では、グラフは表示できているものの、表示する元のデータがサービス側で用意されたものでした。ここから、グラフ表示の元になるデータを自分で作成するための準備をしていきます。

具体的には、以下の Data Source に書かれている 4つのサービス「Pubnub・Firebase・API Gateway・NEC BaaS」のうち、どれか 1つを設定していきます。今回は、PubNub を利用することにします。

●Data Source · enebular
　https://docs.enebular.com/ja/infomotion/CreateDataSource.html

enebular の InfoMotion で設定する内容としてキーの情報が必要になります。
以下の記事などを参照いただき、「Publish key」と「Subscribe key」の2つを取得してください。

●PubNubで5分でリアルタイムWebこと初め + MQTTでデバイス連携も #protoout #iotlt #ヒーローズリーグ - Qiita
　https://qiita.com/n0bisuke/items/36e4b334d17174446df7

グラフ表示させるデータを PubNub で準備する

それでは、この後にグラフ表示をさせる元データを準備します。
入力として用いるデータについて、以下のページのサンプルを見つつ、折れ線グラフ用に必要そうなデータを準備してみます。

●How to use Random Data Source · enebular
　https://docs.enebular.com/ja/infomotion/datasource/random/setup

とりあえず折れ線グラフを表示させるのに、必要になるのはグラフの縦軸・横軸の2種類のデータかと思います。そして、さらに情報を探していたらサンプルをダウンロードしたページに以下の内容が書かれてました。

この形のデータを生成して、PubNub に Publish します。
PubNub の利用について、前に以下の記事を書いた時には Node.js＋MQTT.js を使ってみていました。

●【JavaScript 2020】PubNub を使ったリアルタイム通信を試してみる（JavaScript を利用） - Qiita
　https://qiita.com/youtoy/items/f3ada57fccbf57cfff60

今回は、以下に書かれた Node.js の SDK を使ってデータを送ってみようと思います。

●Node.js V4 SDK for Realtime Apps | PubNub
　https://www.pubnub.com/docs/nodejs-javascript/pubnub-javascript-sdk

上記の公式のサンプル「Putting it all together」のコードは Pub/Suｂを両方含むものが書かれてますが、今回は Publish のみ使えれば良いので、ソースコードを以下のようにしました。
変更した部分についてですが、Subscribe用の処理を除いたところ以外では、サンプルで送信用に書かれていた JSON を今回用のものに書きかえたりました。

SDK を利用するために、ローカルかグローバルでパッケージをインストールしてください（自分は今回はローカルで ⇒ npm i pubnub でインストール）。

const PubNub = require("pubnub");

const myPublishKey = "【自分で取得したPublish Key】";
const mySubscribeKey = "【自分で取得したSubscribe Key】";
const myUniqueUUID = "【任意のIDを設定】";
const myChannel = "【enebular側と合わせた任意の文字列】";

const pubnub = new PubNub({
  publishKey: myPublishKey,
  subscribeKey: mySubscribeKey,
  uuid: myUniqueUUID,
});

let message = {
  id: undefined,
  value: undefined,
  ts: undefined,
};

async function publishSampleMessage() {
  console.log(
    "Publish"
  );

  message.id = "【任意のIDを設定】";

  for (let i = 0; i < 10; i++) {
    message.value = Math.random()*100; // とりあえずのテスト用に乱数で生成
    message.ts = 1608426000 + i*60; // 2020-12-20 10:00:00 の UNIX時間（1608426000）を基準に

    const result = await pubnub.publish({
      channel: myChannel,
      message: message,
    });
    console.log(result);
  }
}

publishSampleMessage();

あとは、上記のプログラムを実行して PubNub でデータを送り、そのデータを表示させるだけです。

Data Source を設定する

それでは、グラフ表示に自分が用意したデータを用いるための手順を進めていきます。
現状はグラフの元データがランダムなデータになっているのですが、それを PubNub のデータを用いる形にします。

先ほどの手順でグラフが表示された画面になっていた enebular のほうで、1階層上のプロジェクトの画面に戻り、戻った先の画面で画面左のメニューの下の方を見ていきます。そうすると Data Source という項目があるため、これを選択します。

その後の画面で、右下のボタンを押して Data Source を追加していきます。

その後、以下のようにタイトルを設定し（今回は pubnub という内容を設定）、Data Source Type の部分で PubNub を選択します。

そうすると、以下のように表示される設定項目が増えます。

上記の項目の「Publish Key」と「Subscribe Key」は、ここまで進めてきた手順の中の「PubNub のキーを取得する」の部分で取得した 2つのキーを設定します。
また、「Channel」の部分は、ここまで進めてきた手順の中の「グラフ表示させるデータを PubNub で準備する」の部分で、プログラム中に書いたものと同じものを入力します。

そして、右下にある Saveボタンを押して、以下のような状態になることを確認してください。

あとはグラフ表示関連の設定を、以下に書いた手順で変えれば OK です。

PubNub のデータをグラフ表示させる

それでは、プロジェクトのメニューの「InfoMotions」を選びます。

上に書いていた手順で作っていたものが表示されていると思いますので、それを選択してください。

そして、グラフが表示された画面が出たら、以下の画像で示した「Manage Graphs」を選びます。

画面右のほうにメニューが出てきますので、以下の画像で示した部分を選んでください。

その後に表示された項目の中で、「Select Data Source」という部分が「random」になっていると思います。この部分を押すとドロップダウンメニューで選択肢が表示されるので、「PubNub」と表示された項目を選んでください。
その後、このメニューの下の方へスクロールしていき、メニューの下にある「Save」ボタンを押します。

上記の手順で、グラフの元になるデータが PubNub になりました。
現状でグラフが表示されていない状態になっていますが、これは PubNub に準備したデータの時刻の部分が、グラフの表示対象の期間外になっていることが原因のようです。

サンプルプログラムで Unix時刻で指定していたのは「2020/12/20 の 10:00 から 1分ごと（データは10個分）」となっており、以下の画像で示した部分の指定は「2020/12/16 から 2020/12/19」までとなっているようなので、この赤枠で囲んだ部分を押して期間を変更します。

カレンダー上で選択するような UI が表示されるので、今回の場合はは「2020/12/20 の 10:00 から 10:10 を含む範囲」となるよう設定をします。

そうすると、以下のように PubNub で準備したデータを元にしたグラフが表示されました（ランダムなデータを元にしていた時と、見た目的な差が分かりにくいですが・・・）。

まとめ

今回 enebular の InfoMotion を初めて使ってみて、とりあえず「PubNub をデータソースにしたものを表示させる」という流れを試しました。

最初は「InfoMotion・InfoType・Data Source」といった 3つを組み合わせて設定するというのが少しややこしく感じたものの、1度一通りの流れを試してみれば全体の構成などが理解できたように思います。
今回、ランダムに生成したデータを PubNub に送るような内容だったため、センサーのデータなど何らか実際の計測データにしてみたり、データの内容を変えたものも試してみたいと思います。