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パターン
紐付けパターン
紐付けパターンの場合、「計算フィールドを追加」ボタンから新しいフィールドを作成することができます。 さまざまな演算子が用意されているので、こちらから欲しいデータ(描画したい項目)を作成することができますが、個人的には直接SQLを書いてしまった方が早いかなと思います。
データセットが作成できたら、分析タブから描画したいグラフパターンを選択していきます。
作成できたらダッシュボードへの公開をして設定は終了です。
アプリケーションから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点です。
- 任意のパラメータを渡すことができない
システム側にある制御リストを活用できない。
2 行レベルのセキュリティでのアクセス制限
1ができないので、Amazon QuickSightの機能である、行レベルのセキュリティー(RLS)を使用することで
アクセス制限の実現可能ではありました。
実際に実装してみると、制限するためのデータの持ち方に少しクセがありました。
また、行レベルのセキュリティー(RLS)を使用するうえで、以下2点が難点でした。
Ⅰ. フィールドの文字数制限 各フィールドには、最大 2,047 文字の Unicode 文字しか含めることができない。 docs.aws.amazon.com
Ⅱ. Amazon QuickSightユーザー作成が必要 自己プロビジョンまたは事前のユーザー招待により Amazon QuickSight にサインインを行うAmazon QuickSight ユーザー(or IAM)を登録する必要がある。 ユーザー登録はこちらの記事が参考になります。
その他、IdP フェデレーションを利用した認証など検討しましたが、ユーザー作成は必須とのことでした。
Amazon QuickSightの活用
以下、元々の実装とAmazon QuickSightでの描画比較になります。(同一データではないのでざっくりでの比較になります)
使用しない(うまく活用できなかった)描画で実装を削除したものもあります。
chart.jsでの描画 (テストデータ)
chart.js実装時 Amazon QuickSightでの描画 (テストデータ)
quicksight実装時 Vue-good-tableでの描画 (テストデータ)
vue-table実装時 Amazon QuickSightでの描画 (テストデータ)
quicksight実装時 (table)
終わりに
今回はAmazon QuickSightの活用を紹介させていただきました。 BIツールに限らず業務効率化が図れるよう事業部とコミュニケーションをとりながら実装しております。
最後にUUUMでは、好奇心旺盛なエンジニアを募集しております。 https://www.wantedly.com/projects/861137