enebular を使って IoTLT の ツィート状況を可視化してみた。

## はじめに
<A HREF="https://enebular.connpass.com/event/92935/">enebular developer Meetuup Vol.1</A> へ参加して、<A HREF="https://enebular.connpass.com/event/97263/">次回</A> LT することになったので、enebular の機能を使って <A HREF="https://iotlt.connpass.com/event/96592/">IoTLT Vol.42</A> と <A HREF="https://iotlt.connpass.com/event/95190/">SIerIoTLT vol.11</A> のツィート状況を可視化してみた。

- Twitter 投稿元のプラットフォーム数グラフを表示する。 (<A HREF="https://qiita.com/syuhei/items/caa964d652b09cddfdb9">参考</A>)

- Twitter 投稿者の投稿数グラフを表示する。

- 発表スライド上に Twitter 投稿内容を流す。 (<A HREF="http://nabettu.github.io/niconicocoa/">参考</A>)

## 事前準備
- <A HREF="https://docs.enebular.com/ja/GetStarted/Introduction.html">enebular 新規登録</A>
"enebular へのサインアップ" 〜 "Project の作成" を実施。

- <A HREF="https://docs.enebular.com/ja/infomotion/datasource/firebase/Setup.html">Firebase のセットアップ</A>

- <A HREF="https://docs.enebular.com/ja/InfoMotion/DataSource/Firebase/CreateDataSource.html">Firebase DataSource の作成</A>
"Firebase DataSource の作成" 〜 "DataBase のセットアップ" を実施。

- <A HREF="https://docs.enebular.com/ja/InfoMotion/DatasourceMilkcocoa-v2.html">Milkcocoa-v2 DataSource の作成</A>
"milkcocoa アカウントの登録" を実施。

## 構成
![スクリーンショット 2018-08-28 18.26.07.png](https://qiita-image-store.s3.amazonaws.com/0/72479/42d88bf3-720b-b1fe-69fe-c75700ed7412.png)

## 手順
### Flow 作成
enebular の Flow から Node-RED を使用してフローを作成する。

Twitter から ハッシュタグでキーワードを指定して結果を Firebase の Database へ格納する。
![スクリーンショット 2018-08-28 16.35.11.png](https://qiita-image-store.s3.amazonaws.com/0/72479/435953b4-944f-b1e2-9deb-319ae10669f0.png)

使用するノードは以下のとおり。

- [social] - [twitter in] ノード
Twitter から ハッシュタグでキーワードを指定して結果を取得する。
for にハッシュタグキーワードを指定する。(今回は #iotlt を指定。)
![スクリーンショット 2018-08-28 16.50.25.png](https://qiita-image-store.s3.amazonaws.com/0/72479/04391748-48cc-e528-2f71-b400d050f164.png)

- [function] - [function] ノード
Twitter から取得した結果を整形する。
以下の内容を記載する。
![スクリーンショット 2018-08-28 17.01.11.png](https://qiita-image-store.s3.amazonaws.com/0/72479/39841837-90ab-6019-742c-240c6839b058.png)

```javascript
var screennameTag = msg.tweet.user.screen_name;
var sourceTag = msg.tweet.source;
var start = sourceTag.indexOf(">") + 1;
var end = sourceTag.lastIndexOf("<");
var s = sourceTag.substr(start, end - start);
var t = msg.tweet.text;
var data = {
  timestamp:Date.now(),
  value:{"screen_name":screennameTag,"source":s,"content":t,"value":1,"created":Date.now()} }
msg.payload = data;
return msg;
```

- [firebase] - [firebase modify] ノード
整形した結果を Firebase の Database へ格納する。
Child Path にパス名を指定する。(今回は iotlt42 を指定。)
Method は Push を指定する。
![スクリーンショット 2018-08-28 17.20.28.png](https://qiita-image-store.s3.amazonaws.com/0/72479/3091c25a-12bb-ab2f-7b28-ac759a252a9c.png)

- [output] - [debug] ノード
msg.payload の内容を debug タグで確認する際に使用する。(使用しなくとも良い。)

Twitter から ハッシュタグでキーワードを指定して結果を Milkcocoa の Database へ格納する。

![スクリーンショット 2018-08-28 16.38.12.png](https://qiita-image-store.s3.amazonaws.com/0/72479/7e1e2350-8712-34b0-f885-ad9cef0c196f.png)

使用するノードは以下のとおり。

- [function] - [function] ノード <br />
Twitter から取得した結果を整形する。<br />
以下の内容を記載する。

![スクリーンショット 2018-08-28 17.48.30.png](https://qiita-image-store.s3.amazonaws.com/0/72479/09c17c24-b10b-53da-5671-298e69dcc556.png)

```javascript
var content = msg.tweet.text;
var p = {"content":content,"watchword":"spospo"};
msg.payload = p;
return msg;
```

- [output] - [milkcocoa out] ノード<br />
整形した結果を Milkcocoa の Database へ格納する。<br />
Data Store にデータストア名を指定する。(今回は comment を指定。)<br />
Opetation は Push を指定する。

![スクリーンショット 2018-08-28 18.00.37.png](https://qiita-image-store.s3.amazonaws.com/0/72479/b3afccef-a5a0-e6d1-f767-0637fd4f4f81.png)

### InfoType 作成
InfoMotion 作成の前に InfoType 作成を実施する必要があるが、InfoType 作成には InfoMotion Tool を導入する必要があるため、今回はサンプルで用意されている <A HREF="https://docs.enebular.com/ja/_asset/sample/barchart.zip">Bar Chart</A> をダウンロードして使用することにした。
(参考) https://docs.enebular.com/ja/infomotion/infomotiontool
(参考) https://docs.enebular.com/ja/infomotion/SampleInfoTypes.html

### InfoMotion 作成
InfoType と DataSource を指定して InfoMotion ダッシュボードを作成する。(<A HREF="https://docs.enebular.com/ja/infomotion/createinfomotion">参考</A>)

- Twitter 投稿元のプラットフォーム数グラフ<br />
TYPE に barchart を指定する。<br />
DATASOURCE に Firebase DataSource を指定する。<br />
Label に source データキーを指定する。<br />
Value に value データキーを指定する。

![スクリーンショット 2018-08-28 22.05.19.png](https://qiita-image-store.s3.amazonaws.com/0/72479/b49d1999-a1bd-1fe7-2c0f-7991adeb2763.png)

- Twitter 投稿者の投稿数グラフ<br />
TYPE に barchart を指定する。<br />
DATASOURCE に Firebase DataSource を指定する。<br />
Label に screen_name データキーを指定する。<br />
Value に value データキーを指定する。

![スクリーンショット 2018-08-28 22.05.48.png](https://qiita-image-store.s3.amazonaws.com/0/72479/141dac87-815c-caa7-2631-f1f53f576497.png)

- ダッシュボード<br />
Twitter 投稿元のプラットフォーム数グラフとTwitter 投稿者の投稿数グラフを上下に並べてみた。
![Screenshot_2018-08-28 tweet_count enebular.png](https://qiita-image-store.s3.amazonaws.com/0/72479/f99a65a5-1384-f5a1-d498-f36f709f2e11.png)

## 結果
時間経過と共にグラフが変化し、イベントなどの進行に合わせて状況を見るのも面白い。

- <A HREF="https://iotlt.connpass.com/event/96592/">IoTLT Vol.42</A>
 - Twitter 投稿元のプラットフォーム数グラフ<br />
iPhone からの投稿数が一番多く、続けて Android → ウェブブラウザ → Tweet Deck の順に多いことが分かる。
![スクリーンショット 2018-08-28 22.57.43.png](https://qiita-image-store.s3.amazonaws.com/0/72479/093a3f26-d1e6-75db-b7c0-4bd7da768f77.png)
![スクリーンショット 2018-08-28 22.58.23.png](https://qiita-image-store.s3.amazonaws.com/0/72479/ae87d538-aa6f-1c43-9787-dff48f580c11.png)
![スクリーンショット 2018-08-28 22.59.06.png](https://qiita-image-store.s3.amazonaws.com/0/72479/a24f3864-4a9a-43bd-f191-a2e31064a072.png)
![スクリーンショット 2018-08-28 22.59.35.png](https://qiita-image-store.s3.amazonaws.com/0/72479/d733929b-ea9f-2353-017e-2748f66ca900.png)

 - Twitter 投稿者の投稿数グラフ<br />
最初に投稿数が多い投稿者がいるが、時間経過と共に順調に投稿数を伸ばし、後半に追い抜く投稿者がいることが分かる。
![スクリーンショット 2018-08-28 23.07.44.png](https://qiita-image-store.s3.amazonaws.com/0/72479/fc59bc7a-40a5-2806-8c30-09a9fa01298c.png)
![スクリーンショット 2018-08-28 23.08.12.png](https://qiita-image-store.s3.amazonaws.com/0/72479/7b8ac71e-b9be-1d10-b1a0-7939995fce32.png)
![スクリーンショット 2018-08-28 23.08.46.png](https://qiita-image-store.s3.amazonaws.com/0/72479/06f14283-24a0-a9c4-d739-7facbad2c7bb.png)
![スクリーンショット 2018-08-28 23.09.08.png](https://qiita-image-store.s3.amazonaws.com/0/72479/f7123a46-7281-62a9-7536-c02eba635c7f.png)

- <A HREF="https://iotlt.connpass.com/event/95190/">SIerIoTLT vol.11</A>
 - Twitter 投稿元のプラットフォーム数グラフ<br />
ウェブブラウザと iPhone からの投稿数が圧倒的に多いことが分かる。
![スクリーンショット 2018-08-28 23.15.50.png](https://qiita-image-store.s3.amazonaws.com/0/72479/ff49fa61-b408-5b40-9192-b8f444d40dbe.png)
![スクリーンショット 2018-08-28 23.16.38.png](https://qiita-image-store.s3.amazonaws.com/0/72479/c647c144-27a7-8259-de1c-5461565e19e9.png)
![スクリーンショット 2018-08-28 23.17.20.png](https://qiita-image-store.s3.amazonaws.com/0/72479/c70560c6-8d86-357f-7410-ba8adab8d7ca.png)
![スクリーンショット 2018-08-28 23.18.18.png](https://qiita-image-store.s3.amazonaws.com/0/72479/1936c707-5ad8-0583-024c-8a8de587dc63.png)

 - Twitter 投稿者の投稿数グラフ<br />
平均的に投稿していることが分かる。
![スクリーンショット 2018-08-28 23.20.47.png](https://qiita-image-store.s3.amazonaws.com/0/72479/bb2cf586-6ca5-bb51-d908-3e4db0bffd88.png)
![スクリーンショット 2018-08-28 23.21.17.png](https://qiita-image-store.s3.amazonaws.com/0/72479/57153eca-b7f3-6738-9de4-f40d401b610d.png)
![スクリーンショット 2018-08-28 23.21.36.png](https://qiita-image-store.s3.amazonaws.com/0/72479/2d26306c-5563-428d-4906-781f87b15958.png)
![スクリーンショット 2018-08-28 23.21.55.png](https://qiita-image-store.s3.amazonaws.com/0/72479/9da49228-e2d4-795c-2230-3031cdb4b93f.png)

- Twitter 投稿内容が流れる様子
![スクリーンショット 2018-08-28 23.32.28.png](https://qiita-image-store.s3.amazonaws.com/0/72479/55ab605d-908a-2d81-d0a7-f23134e73083.png)

![スクリーンショット 2018-08-28 23.26.30.png](https://qiita-image-store.s3.amazonaws.com/0/72479/b0610b99-42cd-395f-fb79-88ef2bc9e623.png)