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

はじめに

enebular developer Meetuup Vol.1 へ参加して、次回 LT することになったので、enebular の機能を使って IoTLT Vol.42 と SIerIoTLT vol.11 のツィート状況を可視化してみた。

• Twitter 投稿元のプラットフォーム数グラフを表示する。 (参考)

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

• 発表スライド上に Twitter 投稿内容を流す。 (参考)

事前準備

• enebular 新規登録
  "enebular へのサインアップ" 〜 "Project の作成" を実施。

• Firebase のセットアップ

• Firebase DataSource の作成
  "Firebase DataSource の作成" 〜 "DataBase のセットアップ" を実施。

• Milkcocoa-v2 DataSource の作成
  "milkcocoa アカウントの登録" を実施。

構成

手順

Flow 作成

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

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

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

• [social] - [twitter in] ノード
  Twitter から ハッシュタグでキーワードを指定して結果を取得する。
  for にハッシュタグキーワードを指定する。(今回は #iotlt を指定。)
  

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

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 を指定する。
  

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

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

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

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

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

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

InfoType 作成

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

InfoMotion 作成

InfoType と DataSource を指定して InfoMotion ダッシュボードを作成する。(参考)

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

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

• ダッシュボード
  Twitter 投稿元のプラットフォーム数グラフとTwitter 投稿者の投稿数グラフを上下に並べてみた。

結果

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

• IoTLT Vol.42

  • Twitter 投稿元のプラットフォーム数グラフ
    iPhone からの投稿数が一番多く、続けて Android → ウェブブラウザ → Tweet Deck の順に多いことが分かる。
  • Twitter 投稿者の投稿数グラフ
    最初に投稿数が多い投稿者がいるが、時間経過と共に順調に投稿数を伸ばし、後半に追い抜く投稿者がいることが分かる。

• SIerIoTLT vol.11

  • Twitter 投稿元のプラットフォーム数グラフ
    ウェブブラウザと iPhone からの投稿数が圧倒的に多いことが分かる。
  • Twitter 投稿者の投稿数グラフ
    平均的に投稿していることが分かる。

• Twitter 投稿内容が流れる様子