Lookerのグラフ埋め込み機能が素敵だったので紹介する

この記事は『Looker Advent Calendar 2020』11本目の記事です。

Looker Advent Calendar 2020 - Qiita

f:id:ma2k8:20201210204758p:plain

今年の5月頃、副業で参画しているALP社で「分析機能を作るぞ」というプロジェクトに技術選定の段階でJOINし、Lookerを利用したところ超絶便利だったので、 今回はその便利機能の中からグラフの埋め込み機能について紹介したいと思います。

ちなみに分析機能は10/5にプレスリリースを出すことができました。🎉🎉

prtimes.jp

実際に埋め込み機能を実装してみると、Lookerとの連携に必要なサーバーサイド&フロントエンドの実装はとてもシンプルに済み、 権限によるデータの出し分け周りなども柔軟かつ表現力高く実現できたので、めちゃくちゃオススメです。

また、SaaSとしてかなりイケている設計をなされている部分が多かったので、とても勉強になりつつ、楽しく実装できました。 イケている部分の一部ですが、連携方法がとてもエレガントである旨の記事を以前書いたので、よければこちらもどうぞ。

SaaSのエレガントな連携とは - まっちゅーのチラ裏

選定理由

ALP社が提供しているScalebase というサブスクリプション管理SaaSの1機能である管理画面に分析機能を追加するという要件で、 グラフの埋め込み機能があるものの中から選定し、以下の点でLookerの採用を決めました。

  • LookMLでプログラマブルにデータを管理できる
  • プロジェクトをGithubで管理でき、GitOpsに載せやすい
  • Lookerがパフォーマンスのボトルネックになりにくく、エンジニア側で自由度高くチューニングができる
  • 埋め込み機能がある(顧客へ提供する自社サービス(Scalebase)の画面に埋め込みたかったので必須)

埋め込み方法

以下3つの方法から選択できます

パブリック共有、インポート、埋め込み

プライベート埋め込み

シングルサインオン(SSO)組み込み

今回の要件では、顧客に画面を提供するので、最も柔軟にハンドリング可能な "シングルサインオン(SSO)組み込み" で実装しました。

シングルサインオン(SSO)組み込みのフロー

基本的には、サーバーサイドからLookerの管理画面で生成したシークレットを含めた埋め込みURL生成リクエストを送り、返ってきたURLを フロントに埋め込むだけというシンプルなフローです。

f:id:ma2k8:20201210214112p:plain
embed_sequence

実装方法

サーバーサイド

公式でJava,C#,Node.js,Python,Ruby,PHPのサンプル実装を用意してくれています。 基本的にはURL生成リクエストをLooker側に投げるだけなのでシンプルに済みます。

github.com

Scalebaseでは、以下の機能も実装したのでそれらに必要なモデルもコード化しました。

  • ユーザー属性によるデータの出し分け
  • Scalebase側の権限に応じたLooker側の権限ハンドリング(viewer or explorer)

埋め込みURLで指定できるパラメータをモデル化したので、Scalaのコードですが貼っておきます。(雑に持ってきたのであくまで参考程度で🙏)

github.com

ユーザー属性によるデータの出し分け

ここがかなり便利だったので紹介します。

まず、LookMLのexploreで以下のようにaccess_filterを設定します。

f:id:ma2k8:20201210222035p:plain

こうしておくと、URL生成リクエストにユーザー属性として provider_id="ID_A" を渡すことで、 exploreの情報にアクセスする際にWHERE fuga.provider_id = "ID_A" が自動で追加されデータの出し分けが可能になります。

とても柔軟かつ表現力が高く、少ない工数で安全なデータの出し分けが可能になるのでとても助かりました。

フロントエンド

表示のみであればiframeに埋め込むだけで済みました。 Scalebaseでは、独自グラフの生成や、Lookerからのeventハンドリングしてフィルタのコンポーネントを iframeの外に出したりといったことも行っています。

画面からシュッと埋め込みURLを生成するツールがあるので、フロントの動作確認は気楽に実施することができます。

SSO Embed Constructor

完成画面

完成した画面はこんな感じ

f:id:ma2k8:20201211002037p:plain
分析画面

ドリルダウンもいい感じにできるので細かい値を見るのも便利です。

f:id:ma2k8:20201211002114p:plain

最後に

BIツールの枠に収まらない、プログラマブルに管理可能な分析基盤としてとても便利なLookerですが、 埋め込み機能も少ない工数で安全かつ表現力高く実装することができました。

backendもfrontendもかなり少ない工数で実装でき、Looker上でのデータの定義や見せ方、GitOpsの構築や開発フローの洗練に注力することができたので、 Lookerを選んで本当に良かったと思っています。

気楽にデータの可視化をしたいだけであれば色々な選択肢があるかもしれませんが、 プログラマブルかつGitOpsを交え、かっちりデータの管理がしたかったり、データ分析機能や埋め込みグラフの実装が必要だったり、 グラフを作る人がエンジニアだったりするのであれば、持続可能な基盤をしっかり作ることができるのでめちゃくちゃオススメです。