QuickSightを利用してカスタマイズしたダッシュボードを埋め込む

はじめに

こんにちは、スタメンのチームねぎまの近藤、滿本です。

以前、「名前空間を用いたQuickSight上でのマルチテナントの実現」というブログでご紹介した技術を用い、カスタムダッシュボード機能を開発・リリースしました 🎉（TUNAG「カスタムダッシュボード」の提供を開始！！利用データを最大限活用し、エンゲージメント経営の実践を支援！）

今回はその概要とアーキテクチャをお伝えさせていただきます。

カスタムダッシュボードの概要

カスタムダッシュボードの背景

弊社ではTUNAGという組織向けのSNSを提供しており、投稿やコメントなどの利用データを扱っています。導入企業様の利用年数が長くなるに連れて利用データは蓄積され、利用状況として可視化することでその価値はより一層高まります。

TUNAGでは管理者様向けにそれらの利用状況をグラフ化したダッシュボード機能を提供していますが、全ての企業で同じ指標となっており、各社で異なる「○○の指標を△△の対象者で絞り込んでグラフ化したい」というニーズに応えられていない状況でした。

そのような背景から、企業ごとに分析したい指標・対象者をカスタマイズできるカスタムダッシュボード機能の開発に着手しました。

カスタムダッシュボードで出来ること

前述のとおり、カスタムダッシュボードでは会社ごとに異なる指標を特定の対象者に絞り込んでグラフにできます。また、QuickSightはグラフの種類が豊富でフィルタリングもできるため、利用状況を最適な形で表現できます。

カスタムダッシュボードのアーキテクチャ

カスタムダッシュボードをどう実現するか議論する中で、出来る限り早く機能提供したいという思いからBIツールを利用することにしました。いくつかのツールを比較検討する中で、コスト面に加えて、TUNAGが既にAthenaやAuroraを利用しており親和性が高かったため QuickSight を採用することに決めました。

構成は以下のとおりです。

Athena、Auroraから各データ（投稿、コメントなど）のデータセットを作成
グラフ用にデータセットを結合（部署 ✕ 投稿 👉 部署別の投稿数）
それらのデータセットを元に分析、ダッシュボードを作成
TUNAGの管理画面に、QuickSightのコンソールを権限別で埋め込み
データセットを最新にするため、更新をEventBridgeにより日次で定期実行 or 手動で実行（Lambdaにリクエスト）
Lambdaによりデータセットを更新

この構成は、カスタムダッシュボード機能を数社で検証する中で見えてきた以下のニーズを基に、徐々に固めていきました。

出来る限り柔軟に指標と対象者を組み合わせたい
- 👉 データセットの結合機能を利用
TUNAG上でグラフを編集したい
- 👉 アプリケーションへの埋め込み
対象者を細かく絞って分析したい
- 👉 セグメント機能（後述します）の開発

順番に説明します。

データセットの結合

検証では、「ユーザー別の投稿数」といった指標を1データセットとして用意していました。しかし、カスタムダッシュボードを運用する中で、新しい指標の要望が常に挙がってきます。それらの要望に答えるために、QuickSightのデータセットの結合機能を用いることにしました。これにより自由にデータセットを組み合わせて、グラフの基になるデータセットを作成できるようになりました。データセットは2つに分類して運用しています。

マスターデータ
トランザクションデータ

マスターデータ

一般的に、マスターデータとは基礎情報となるデータを指します。ユーザー、部署、役職といったデータが該当します。データソースはAuroraを使用し、SPICEにデータを保存しています。

トランザクションデータ

発生した出来事の詳細を記録したデータは、トランザクションデータと呼ばれます。トランザクションデータの例は、「投稿数」や「投稿の既読数」などです。トランザクションデータは、データベースの負荷を考慮し、AuroraではなくAthenaをデータソースとして使用しています。

マスタデータとトランザクションデータをQuickSight上で結合させることで、より多くの指標の組み合わせを表現できるようになりました。

アプリケーションへの埋め込み

TUNAGアプリケーションへのQuickSightの埋め込みは AWS SDK for Ruby、Amazon QuickSight Embedding SDK を利用しました。

埋め込み用のURLを取得

埋め込み用のURLは、generate_embed_url_for_registered_userを用いて取得します。

def generate_embed_url_for_registered_user()

  resp = @client.generate_embed_url_for_registered_user({ aws_account_id: AWS_ACCOUNT_ID,
                                                          user_arn: user_arn,
                                                          session_lifetime_in_minutes: 600 })
  resp[:embed_url]
end

取得したURLをAmazon QuickSight Embedding SDKを用いて埋め込む

取得したURLは、Amazon QuickSight Embedding SDKを用いて埋め込みます。

export const QuickSightEmbed = () => {
  
  useEffect(() => {
    const containerDiv = document.getElementById('embeddedCustomDashBoardContainer')
    
    QuickSightEmbedding.embedDashboard({
        url: "取得したURL",
        container: containerDiv,
        scrolling: "yes",
        height: "700px",
        width: "1000px",
        locale: "ja-JP",
    })
  }, [])

  return (
      <EmbedContainer id="embeddedCustomDashBoardContainer" />
  )
})

カスタムダッシュボードでは、2種類のアカウントを提供しています。

READER：ダッシュボードの閲覧が可能
AUTHOR：ダッシュボードの閲覧及び新規グラフの作成・編集が可能

ユーザーは権限に応じて、TUNAGアプリケーションに埋め込まれたQuickSightを利用できます。

セグメント機能

セグメント機能とは、データを特定の対象者に絞り込んで分析できる機能です。例えば「投稿数」というトランザクションデータを「新卒者」というセグメントと掛け合わせると、「新卒者の投稿数」がグラフとして表現できます。

アプリケーションで任意のセグメントをマスターデータとして作成
セグメントのマスターデータを基にQuickSight上でデータセットを作成
投稿数などのトランザクションデータと結合して利用

TUNAGでは各社ごとに利用状況から課題を抽出し、新たなTUNAGの利活用の方針を立てるため、こうした任意のセグメントによる利用状況の分析が重要になります。

まとめ

以上が、カスタムダッシュボード機能の概要とアーキテクチャになります。最後までご覧いただきありがとうございました。この記事がQuickSightとアプリケーションの連携を検討されている方にとって、少しでも参考になれば幸いです。

弊社ではエンジニアを募集しています。やりがいのある仕事がしたい！わくわくする仕事をしたい！という方がいらっしゃいましたらぜひ、採用窓口までご連絡ください。

開発体制や事業内容をまとめた Engineering Handbook も併せてご覧ください。

stmn tech blog