UUUMエンジニアブログ

UUUMのエンジニアによる技術ブログです

BIツール (AWS QuickSight)の活用紹介

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ライブラリで実装することを検討しており、以下3つが候補に上がっておりましたが、単純なグラフ描画をサンプル実装して、事業部側の反応を見るということだったので、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...のデータから作成することが可能になっております。

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

データは、「直接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
    },
  },

Amazon QuickSightでの悩みポイント

閲覧している人によって、閲覧可能なデータを分けたかったが簡単に保守コスト低く実装ができなかった。 理由としては以下2点です。

  1. 任意のパラメータを渡すことができない

AWS SDK for Ruby V3

システム側にある制御リストを活用できない。

2 行レベルのセキュリティでのアクセス制限

1ができないので、Amazon QuickSightの機能である、行レベルのセキュリティー(RLS)を使用することで

アクセス制限の実現可能ではありました。

docs.aws.amazon.com

f:id:always_protein:20220401144308p:plain
Amazon QuickSight で実現するセキュアなBI環境 資料より抜粋

実際に実装してみると、制限するためのデータの持ち方に少しクセがありました。

f:id:always_protein:20220401143745p:plain
データセット設定画面

また、行レベルのセキュリティー(RLS)を使用するうえで、以下2点が難点でした。

Ⅰ. フィールドの文字数制限 各フィールドには、最大 2,047 文字の Unicode 文字しか含めることができない。 docs.aws.amazon.com

Ⅱ. Amazon QuickSightユーザー作成が必要 自己プロビジョンまたは事前のユーザー招待により Amazon QuickSight にサインインを行うAmazon QuickSight ユーザー(or IAM)を登録する必要がある。 ユーザー登録はこちらの記事が参考になります。

その他、IdP フェデレーションを利用した認証など検討しましたが、ユーザー作成は必須とのことでした。

Amazon QuickSightの活用

以下、元々の実装とAmazon QuickSightでの描画比較になります。(同一データではないのでざっくりでの比較になります)

使用しない(うまく活用できなかった)描画で実装を削除したものもあります。

  • chart.jsでの描画 (テストデータ)

    f:id:always_protein:20220325124822p:plain
    chart.js実装時

  • Amazon QuickSightでの描画 (テストデータ)

    f:id:always_protein:20220325132253p:plain
    quicksight実装時

  • Vue-good-tableでの描画 (テストデータ)

    f:id:always_protein:20220401120304p:plain
    vue-table実装時

  • Amazon QuickSightでの描画 (テストデータ)

    f:id:always_protein:20220401120034p:plain
    quicksight実装時 (table)

終わりに

今回はAmazon QuickSightの活用を紹介させていただきました。 BIツールに限らず業務効率化が図れるよう事業部とコミュニケーションをとりながら実装しております。

最後にUUUMでは、好奇心旺盛なエンジニアを募集しております。 https://www.wantedly.com/projects/861137