enebular を完全に理解する

#enebular って?
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90361/690e7e84-357c-f509-f8ef-662efc5b4112.png" alt="enebular" width="20%">

誤解を恐れずに言うならば、

1. Node-RED の編集環境<br>
  \# とデバッグ用の実行環境
1. データ可視化（グラフ化）環境 

と理解です。

# 本題。可視化にチャレンジ。
Node-RED は完全に理解 [^完全に理解] しているので、データの可視化にチャレンジしてみた。

雑な理解としては、

1. データの保存先を作って、
2. 保存先に接続する設定を作って、
3. グラフの見栄えを作って、
4. 接続設定と見栄えを紐付けしてグラフを描画

という感じ。

雑すぎるので、チョットデキル[^完全に理解]人から怒られるかも。

## 1. Firebase の設定
データの保存先です。
データは Firebase に保存する (のが王道) ので、まずは Firebase に保存先を作ります。

### プロジェクトの作成
トップページからプロジェクトを作ります。
プロジェクト名を入れて、細かいチェックは無視してポチポチすると、、、
<img src="https://qiita-image-store.s3.amazonaws.com/0/90361/a0e21a14-6232-348e-dcb8-16cddad84ad9.png" width="20%"> -> <img src="https://qiita-image-store.s3.amazonaws.com/0/90361/2e1f1f2a-0a82-e62e-80e8-957fed3dee91.png" width="20%"> -> <img src="https://qiita-image-store.s3.amazonaws.com/0/90361/7750f41f-be49-642d-f748-068272c1a5bb.png" width="20%"> -> <img src="https://qiita-image-store.s3.amazonaws.com/0/90361/3f9a8553-31ac-26a1-f749-0d7bb44cd0e5.png" width="30%">

プロジェクトができます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/90361/319ff865-07fe-be12-2ab2-5c387a6d739c.png" width="50%">

### Realtime Database の作成
プロジェクトができたら、データベースを作ります。

<img src="https://qiita-image-store.s3.amazonaws.com/0/90361/680c3f74-ac11-1eb6-3b80-e7c3e0f9efc9.png" width="80%">

とりあえず、テストモードで。
<img src="https://qiita-image-store.s3.amazonaws.com/0/90361/a3e0b5e4-9c9c-160b-3b30-e42717f74ed3.png" width="80%">

#### 保存テスト
ちゃんと保存できるか、curl で POST してみます。

```sh
$ time=$(date +%s%3N); curl -X POST https://hello-enebular-XXXXX.firebaseio.com/foo/bar/data.json -d "{\"timestamp\":${time},\"value\":{\"created\":${time},\"label\":\"Foo\",\"data\":100}}"
{"name":"-LP2hYHm7DkbEtF4fXcq"}
```

保存されました！成功:tada:
<img src="https://qiita-image-store.s3.amazonaws.com/0/90361/a3cf06d4-9941-3b44-cbee-8a3cec5dadea.png" width="80%">


### パラメータの確認
Firebase に enebular から接続するためのパラメータを確認しておきます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/90361/9a0154d0-ce42-a3ea-9e15-11ee5ca61d7b.png" width="80%">

これは後で使うので、丸暗記しておきましょう。
<img src="https://qiita-image-store.s3.amazonaws.com/0/90361/1ef9219f-da98-4000-55ea-368abf0ea6d7.png" width="80%">

```html
<script src="https://www.gstatic.com/firebasejs/5.5.4/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "hello-enebular-XXXXX.firebaseapp.com",
    databaseURL: "https://hello-enebular-XXXXX.firebaseio.com",
    projectId: "hello-enebular-XXXXX",
    storageBucket: "hello-enebular-XXXXX.appspot.com",
    messagingSenderId: "YYYYYYYYYYYY"
  };
  firebase.initializeApp(config);
</script>
```

----
以上で、Firebase の設定はおしまいです。

保存する JSON データは、仮でこういう構造にしています。
`label` と `data` は変更できるが、`InfoMotion` の設定で使うのでどういう構造にしたかは覚えておいたほうがいいです。

```json
{
  "timestamp": xxxxxxxxxxxxx,
  "value": {
    "created": xxxxxxxxxxxxx,
    "label": "Foo",
    "data": yyy
  }
}
```

## 2. Data Source の設定
「保存先に接続する設定」を作ります。
やっと enebular です。

enebular が Firebase からデータをとれるよう設定します。
この接続設定が `Data Source` というものなので、これを作ります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/90361/88701824-418b-d208-8e76-9daf8e2a0c06.png)

Data Source の Type は、もちろん Firebase。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/90361/49395ffd-961c-8c7c-67d3-d1aa19bac805.png)

Firebase の情報を入れます。
暗記した Realtime Database のパラメータをポチポチと入力する作業。

`Ref` は、お好みの Firebase Realtime Database の保存先のパスを設定する。
上の curl での保存の場合、`/foo/bar/data`。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/90361/1b307f1b-7495-b1d8-66cc-3a26d00e430d.png)

保存すると enebular 上に作成した Data Source が表示されます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/90361/cc8f2a0a-cca8-9eed-c3e2-41bc16716b91.png)

Data Source は出来上がり。

## 3. InfoType の設定
「グラフの見栄え」の部分です。
enebular から InfoType を作ります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/90361/5c402205-7c1d-c05a-6b3f-b87b9efcf1a2.png)

グラフの見栄え (`plugin.js`, `plugin.css`, `plugin.json`) を追加します。

スクラッチから作る知識はまだないので、とりあえず、公式サンプルの [Line Chart](https://docs.enebular.com/ja/InfoMotion/SampleInfoTypes.html#line-chart) を拝借します。

ダウンロードして解凍してドラッグ&ドロップしてアップロード。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/90361/ea0fe607-ccd9-312b-af59-aa38dd4b113e.png)


## 4. InfoMotion の設定
最後に「接続設定と見栄えを紐付け」です。
\#「グラフ描画」は勝手にやってくれます。

データ (Data Source) と見栄え (InfoType) のそれぞれの設定を上で作ったので、二つを紐づけます。
<font color="#777777">\# しばらく Infom</font><b>a</b><font color="#777777">tion と勘違いしてた</font>
![image.png](https://qiita-image-store.s3.amazonaws.com/0/90361/6469368a-d3c5-af95-b92c-bc1a8228d9c4.png)

最初は何もグラフがないので、新規に作ります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/90361/e532ee8f-3b48-cbf4-6e46-fb555c6765e9.png)

グラフに使うデータを設定します。
`Select Type` と `Select Datasource` で、それぞれ上で作った InfoType と Data Source を、
`label` と `value` は、自分で決めた JSON のデータ構造に合わせて指定します。
今回の例だと、それぞれ `label` と `data` です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/90361/7e9ac1f6-0695-70bc-7cae-1f9c03173671.png)

保存したら追加します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/90361/f2d169b8-eaeb-92b8-e661-d2e65b0131a5.png)

追加されますが、当然グラフは空っぽです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/90361/2854d65d-8eeb-3ce7-c91a-705790e12563.png)


## 5. 確認
グラフ下の稲妻アイコンをクリックしておきます。
多分、データの追加をリアルタイムに反映するモードだと思います。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/90361/e2039523-dcfd-98d1-07a6-e7db145b8b69.png)
ちなみに、このボタン、反応がやや渋いです

それはさておき、1 秒おきに 2 系統のデータ (60 から 80 の乱数) を追加し、グラフ化されるか確認してみます。

```sh
while sleep 1; # 1秒おきに実行
do
  time=$(date +%s%3N);
  curl -s -X POST \
    "https://hello-enebular-72d7d.firebaseio.com/foo/bar/data.json" \
    -d "{\"timestamp\":${time},\"value\":{\"created\":${time},\"label\":\"Foo\",\"data\":$(($RANDOM%20+60))}}">/dev/null;
  curl -s -X POST \
    "https://hello-enebular-72d7d.firebaseio.com/foo/bar/data.json" \
    -d "{\"timestamp\":${time},\"value\":{\"created\":${time},\"label\":\"Bar\",\"data\":$(($RANDOM%20+60))}}">/dev/null; \
done
```

その様子。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/enebular?src=hash&amp;ref_src=twsrc%5Etfw">#enebular</a> と <a href="https://twitter.com/hashtag/firebase?src=hash&amp;ref_src=twsrc%5Etfw">#firebase</a> でチャート作成の練習。データの追加は curl で。 <a href="https://t.co/VxiePYDSFI">pic.twitter.com/VxiePYDSFI</a></p>&mdash; ほりひろ😏 (@hori__hiro) <a href="https://twitter.com/hori__hiro/status/1053024861138776064?ref_src=twsrc%5Etfw">2018年10月18日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

できました！:tada::tada::tada:

enebular も「完全に理解」[^完全に理解]ですね。

HTTP でデータを放り込めば、簡単にグラフ化ができそうです！

追記。
InfoMotion/InfoType/DataSource の関係を図示してみました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/90361/f45c387c-be2e-fd8e-22a0-637269751440.png)


[^完全に理解]: https://twitter.com/issei_y/status/1043013628314583040