BIツール (AWS QuickSight)の活用紹介 - UUUMエンジニアブログ

UUUMシステムユニットエンジニアの5n4wasa6です。

先日、実家に帰った際、ふきのとうやタケノコが生えており、春を感じる今日この頃です。大きなイノシシにも遭遇して戦々恐々としております。

はじめに

UUUMでは現在、中期IT計画というプロジェクトが進行しており、社内の各種サービスの連携や点在しているデータ(Excelやスプレットシートでの管理)を集約しマスタ化して、社員の業務効率化を図ろうとしております。

私が携わっているHerokura（ヘロクラ）というサービスでは、主に、Ruby (Ruby on Rails), JavaScript (Vue.js)を使用しております。

インフラ周りはAWSで構築しており、CI/CDはCircleCI (一部 Github Actions)を活用してます。

Terraform (IaC化)やサーバレスでの実装 (Lamdba)も行っております。

Herokura（ヘロクラ）の一部で、BIツールを活用して会社のKPIを全社員が認識できるような実装があるので、今回そちらをご紹介します。

弊社で活用しているBIツール

弊社では、BIツールとしてTableauやAmazon QuickSightを活用しております。

Tableauは、Youtubeの再生数やトレンドなどさまざまな分析に活用しております。

Amazon QuickSightは、前述の通り、社内のKPIを全社員が認識できるよう、実装/活用しております。

Amazon QuickSight選定の経緯

当初グラフ描画は、JSライブラリで実装することを検討しており、以下３つが候補に上がっておりましたが、単純なグラフ描画をサンプル実装して、事業部側の反応を見るということだったので、chart.jsを採用することになりました（一部Vue-good-table利用）。

chart.js
Google Charts
Highcharts

chart.jsでも描画そのものには大きな問題はなかったのですが、データが増えるにつれストレスなく描画することが辛くなっていきました。また、今後運用するに当たって簡単に手間なく事業部からの要望や開発側から提案ができる必要があるため、BIツールの検討が始まりました。

弊社内で利用していたTableauと、Amazon QuickSightの比較になりましたが、価格優位であるAmazon QuickSightで検証することに決まりました。

Amazon QuickSightの設定

QucikSightの各種設定は公式ドキュメントを見るのがベストです。

こちらの動画もわかりやすかったです。

データセットを作成することからスタートするのですが、RDSやS3、Salesforce、ファイルアップロード（csv, tsv, json)、etc...のデータから作成することが可能になっております。

自動更新の頻度は、最短で１時間毎なので準リアルタイムで描画が可能と言ったところでしょうか。

データは、「直接SQLを記述するパターン」と「テーブルを紐づけていくパターン」があるので簡単に作成することが可能です。

直接SQLパターン

f:id:always_protein:20220401113613p:plain — SQL

紐付けパターン

f:id:always_protein:20220401134518p:plain — 結合設定

f:id:always_protein:20220401113040p:plain — 全体

紐付けパターンの場合、「計算フィールドを追加」ボタンから新しいフィールドを作成することができます。さまざまな演算子が用意されているので、こちらから欲しいデータ（描画したい項目）を作成することができますが、個人的には直接SQLを書いてしまった方が早いかなと思います。

f:id:always_protein:20220401114021p:plain — 計算フィールド

データセットが作成できたら、分析タブから描画したいグラフパターンを選択していきます。

f:id:always_protein:20220401135221p:plain — グラフ描画 (分析)

作成できたらダッシュボードへの公開をして設定は終了です。

アプリケーションからAmazon QuickSightの呼び出し

AWS SDK for Ruby V3を使用して、Amazon QuickSightのダッシュボードを呼び出しています。

RoRの実装

各Controllerからget_dashboard_embed_urlを呼び出す

require "aws-sdk-quicksight"

class Provider::Quicksight
  def initialize
    @client = Aws::QuickSight::Client.new(
      region: Settings.aws[:region],
      access_key_id: Settings.aws[:access_key_id],
      secret_access_key: Settings.aws[:secret_access_key]
    )
  end

  def get_dashboard_embed_url(dashboard_id, user_arn, identity_type = "QUICKSIGHT", namespace = "default", additional_dashboard_ids = nil)
    @client.get_dashboard_embed_url(
      {
        aws_account_id: Settings.aws[:account_id].to_s,
        dashboard_id: dashboard_id,
        identity_type: identity_type, # IAM or QUICKSIGHT or ANONYMOUS
        session_lifetime_in_minutes: 60,
        undo_redo_disabled: false,
        reset_disabled: false,
        state_persistence_enabled: false,
        user_arn: user_arn,
        namespace: namespace,
        additional_dashboard_ids: additional_dashboard_ids
      }
    )
  rescue StandardError => e
    logger.error(e)
  end
end

Vueの実装 (Vue2)

クリックするボタン部

<template #graph>
  <div ref="embeddingContainer" />
  <v-button v-if="isDisplayGragh" class="btn btn-success" text="グラフ表示" @action="getQuicksightUrl" />
</template>

クリックアクションからの非同期処理

methods: {
    getQuicksightUrl() {
      handleHttp
        .get(this.$appRoute.quicksight_api_v1_report_sales_costs_path())
        .then((ret) => {
          this.embedDashboard(ret.data.url)
        })
        .catch((err) => {
          this.$toasted.error(err)
        })
    },

    embedDashboard(url) {
      const containerDiv = this.$refs.embeddingContainer
      const options = {
        url: url,
        container: containerDiv,
        scrolling: "no",
        height: "800px",
        width: "1000px",
        footerPaddingEnabled: true,
      }
      QuickSightEmbedding.embedDashboard(options)
      this.isDisplayGragh = false
    },
  },