リアルタイムフィードバックシステムの作り方 with Grafana

先日、社内で開催したテクニカル・カンファレンスのライトニングトークにて使用した、Grafanaを使ったリアルタイムフィードバックシステム「bravo!」の作り方についてご紹介します。

テクニカル・カンファレンスについては、下記、過去記事をご参照ください。

https://www.tdi.co.jp/miso/technical-conference

先日、「他部署の取り組みやメンバーのスキル・経験を知ることによって、"ITエンジニアの価値向上"や"今後のビジネスの活性化"をするための土台を形成する」ことを目的とした社内テクニカル・カンファレンスを開催しました。このカンファレンスは各部署の成果報告会や部署メンバーによるライトニングトークなどのコンテンツで構成され、50名近くの社員が参加しました。この記事では、社内テクニカル・カンファレンスを開催するに当たってどんな準備が必要なのか、運営チームがどんな動きをしていたのかを、企画と...

MISO｜未来を創造するITのミソ

リアルタイムフィードバックシステム構成の概要
Grafanaとは
ElasticSearchと連携する
グラフを描画する
終わりに

リアルタイムフィードバックシステム構成の概要

「bravo!」は以下のような構成になっています。

構成はフロントエンドにLINE Botを使用し、処理をAWS(Amazon Web Services：Amazon.comにより提供されているクラウドコンピューティングサービス)で行っています。
LINE Botの画面上に「bravo!」ボタンが用意されており、ボタンが押されるとAPI GatewayやLambdaファンクション、DynamoDBを通り、最終的にAmazon ElasticSearchにデータが連携されます。グラフの描画にはGrafanaを使用しました。

Grafanaとは

Grafanaはオープンソースのダッシュボードツールです。コマンドのみで簡単にインストールすることができ、すぐに使い始めることができます。様々なデータソースを選べ、直感的な操作と自由度の高いグラフで比較的簡単にスタイリッシュなダッシュボードを作ることが出来ます。

他製品と比較検討をしましたが、Grafanaは操作性と見た目の良さが抜きんでていたのが導入の決め手になりました。世界中で広く使われており、参考にできるナレッジの数が多かったのも理由の一つです。

Grafana公式サイト

ElasticSearchと連携する

GrafanaのデータソースにはElasticSearchを使います。ElasticSearchはクラウドに最適化されたサーチエンジンサーバです。AWSでフルマネージドサービスとして提供されているため、サーバレスで構築工数とコストを削減できるという点を評価して選びました。

Grafanaにログインして、「Data Sources」を選びます。「bravo!」で使用したデータソースは以下のような設定になっています。

「Type」で「ElasticSearch」を選ぶと、その下の「HTTP Settings」と「ElasticSearch details」が表示されます。「URL」や「Index name」「Version」はAWSで作成したElasticSearchのドメインのものを指定します。

「Time field name」にはdate型になっている要素の名前を入力します。「Min interval」には最小の更新単位を入力します。今回は1秒ごとに更新する想定なので「1s」を入力しています。

グラフを描画する

グラフは直感的に読めるシンプルさを大事にしました。ダッシュボード(表の集合)の画面上半分の①のグラフは時系列でその瞬間に押された「bravo!」の数を、左下の②のグラフは各オーディエンス（聴衆者）がどれくらい「bravo!」を押したのかを、相対的なグラフで表示しています。

①時系列グラフ

①のグラフでは、その瞬間に押された「bravo!」の数を棒グラフで1秒ごとに表示し、ライトニングトークの盛り上がりがいつであったのかをリアルタイムに表示しています。グラフは1秒毎に自動的に更新され、直近1分間のグラフが常に表示されています。

設定は以下のようになっています。

タイトルをつける

Generalタブでは、「Title」に、表の上部に表示するタイトルを入力しています。「$Speaker」は③で後述するテンプレートで選んだ名前を表示する設定です。

表示するデータを選択する

Metricsタブでは「Data Sourse」と「Query」を指定しています。「Data Sourse」には予め接続情報を設定したDB等を指定します。ここで指定した「Data Source」は以下のようなテーブル構成になっています。

項目	内容
TIMESTAMP	「bravo!」された時間
SPEAKER_ID	スピーカーのID
SPEAKER_NAME	スピーカーの名前
TOTAL_COUNT	単位時間あたりの「bravo!」数

「Query」にはこの表で表示したい項目をクエリ形式で指定します。例えば、①のグラフでは「TOTAL_COUNT」というカラムの総計をスピーカー（発表者）毎かつ時間毎に表示するため、

Metrics:「Sum」「TOTAL_COUNT」
Group by:「Terms」「SPEAKER_NAME.keyword(名)」「Top 1(一人分)」
Then by:「Date Histogram」「TIMESTAMP(Bravo!した日時)」

をそれぞれ指定します。

軸を表示する

Axesタブではx軸とy軸に値を表示するかを指定します。この表の場合、「Left Y(Y軸の左)」を「short」型で「Show(表示)」しています。また、「X-Axis(x軸)」を「Time」型で「Show(表示)」しています。

グラフの見た目を選択する

Displayタブでは表の見せ方を設定します。この表では棒グラフを表示するため「Draw Models」に「Bars」を選んでいます。

表示する期間を指定する

「Time range」タブでは表示する時間間隔を固定したり任意の長さでずらしたりすることが出来ます。この表では、「Override relative time」に「5m」を指定することで、ダッシュボード全体のTime Rangeを変えてもこの表は直近5分を表示し続けるようにしています。

②オーディエンス別グラフ

②のグラフは、各オーディエンスが現在のスピーカに対してどれくらい「bravo!」を押したのかの相対的なグラフになっています。「bravo!」したオーディションが増えれば、自動的に棒グラフも増えていきます。

①のグラフと大きく違う部分のみ紹介します。

表示するデータを選択する

Metricsタブでは①のグラフと同じように「Data Sourse」と「Query」を指定しています。ここで指定した「Data Source」は以下のようなテーブル構成になっています。

項目	内容
AUDIENCE_ID	オーディエンスのID
SPEAKER_ID	スピーカーのID
AUDIENCE_NAME	オーディエンスの名前
SPEAKER_NAME	スピーカーの名前
TOTAL_COUNT	オーディエンスのスピーカーに対する「Bravo!」の総計

「Query」にはこの表で表示したい項目をクエリ形式で指定します。②のグラフでは「TOTAL_COUNT」というカラムの総計をオーディエンス毎に表示するため、

Metrics:「Sum」「TOTAL_COUNT」
Group by:「Terms」「AUDIENCE_NAME.keyword(名)」「Top 10(10人分)」

をそれぞれ指定します。

時間以外のデータでグループ化する

②のグラフは①のグラフと同様に棒グラフですが、こちらは時系列でなくオーディエンス別に「bravo!」数を集計しています。時系列ではないグラフを表示するときには「Axes」タブの「X-Axis」で「Mode：Series」を選択します。

③テンプレート(フィルター)

「bravo!」では発表者が変わるごとに、プルダウンリストからその発表者を選んで表示を切り替えていました。それを実現していたのがこのテンプレートです。

発表者の一覧を取得する

テンプレートは画面上部の設定アイコン(歯車)からTemplatingを選ぶことで設定できます。「Query」にて取得したいフィールド名を指定することで、そのフィールドに入っている値をリストとして取得することが出来ます。また、「Refresh」で「On Dashboard Load」を指定しているため、ダッシュボードが更新されるごと(＝毎秒)リストの中身は最新化されます。