【Looker】Custom Visualization をデプロイしてみた

はじめに

Looker の Custom Visualization 開発案件で JavaScript のコーディング以外のすべてを担当しました。Looker や LookML の概要については知っているけど、Custom Visualization の具体的な組み込み方については知らない方も多いのではなかろうかと思いましたので、このプロジェクトで得た知見を残しておきたいと思います。誰かのお悩み解決の糸口になることを期待します。
また、こちで紹介する内容はあくまで僕の個人的な解釈なので、その点はご注意ください。

環境

Looker 7.20

その他のプロダクト

役割	プロダクト	備考
データベース	Google BigQuery
ストレージ	Google Cloud Storage	JavaScript を格納
リポジトリ	GitHub	JavaScript, LookML の管理

Custom Visualization

Custom Visualization とは、要は自作の Visualization です。
Looker には JavaScript で自作した Visualization を組み込み、データ分析に使用できます。Looker 標準の Visualization で実現できない表現をしたい場合には検討してみてください。組み込んでしまえば使い方はこんな感じ。Visualization 選択の際、3点リーダーの中に Custom Visualization が追加されています。

Custom Visualization の書き方

私は実装を担当したわけではないので詳細はわかっていないのですが、Looker 用のお作法に従って JavaScript を書くイメージです。スタートガイドとか D3.js が参考になるようです。

組み込み方

今回 Custom Visualization を Looker に組み込む方法として試したのは、「 GCS にデプロイする方法」と「 Looker IDE にデプロイする方法」の 2 つです。

GCS にデプロイ

GCS に js ファイルを格納し、Looker でそちらを参照するように設定する方法です。図にしてみるとこんなイメージになります。

設定手順

1. GCS に js ファイルを格納する
   ※ このとき、このファイルを使用（するダッシュボードを参照）するであろう Google アカウントに対してアクセス権を付与する必要があります。必要な権限は「Storage オブジェクト閲覧者」です。

2. Looker 管理画面で GCS の URL を登録する
   [Admin]-[Visualization]を開き、[Add Visualization]ボタンをクリックして Visualization の情報を登録します。登録するのは、Visualization の ID、表示名、GCS の URL です。
   

ハマりどころ

設定手順 1 でも触れましたが、GCS はユーザーの Google アカウントで認証します。
この認証は、Looker にログインする際のメールアドレスや、Looker が BigQuery にアクセスする際の Google アカウントやサービスアカウントとは別に行われます。
なので、Custom Visualization を使用する際には、事前に Google Chrome にログインしておく必要があります。

...そうです。Google Chrome にログインです。Google アカウントにログインではだめなのです。（なぜなのかはよくわかっていませんのでもしご存じの方は教えて下さい...）
そのため、Google Chrome のシークレットモードでは Custom Visualization を表示することはできません。また逆に、Google Chrome にログインさえすれば、認証に関してはブラウザは問わなさそうです。（ Edge だけ確認しました）

Looker にデプロイ

Looker IDE ( LookML を開発する WebUI の IDE ) の File Browser 内に js ファイルを格納し、LookML でそちらを参照するように設定する方法です。図にしてみるとこんなイメージになります。ずいぶんシンプルですよね。

設定手順

1. Looker IDE の File Browser に js ファイルを格納する
   ドラッグ&ドロップで格納できます。
   

2. プロジェクトの manifest.lkml ファイルに visualization を定義する。
   定義するのは、Visualization の ID、表示名、File Browser 上のパス です。
   

3. デプロイ
   画面右上のボタンをクリックすると [Validate LookML] -> [Commit Changes & Push] -> [Merge & Deploy Prod] と変化していきます。[Merge & Deploy Prod] をクリックするとデプロイ完了です。
   

ハマりどころ

js ファイル更新の際、設定手順の 3 を忘れてしまいそうなので注意してください。
「Looker にデプロイ」の場合は、「GCS にデプロイ」と異なり、参照先の（ File Browser 上の) js ファイルの内容を更新しただけでは Looker には反映されないのです。ちゃんと手順 3 を実行しないといけません。
今回私がハマったケースはこうでした。

1. js 担当者がローカル環境で js ファイルを更新して GitHub に push。
2. Looker IDE で git pull したら File Browser の js も最新になった。

なのに Visualization の動きは前のままなのなんで！？と混乱しました。manifest.lkml が参照しているファイルは更新されているし、Looker IDE 右上のボタンも [Up to Date] のままだし、デプロイできた感覚になりますよね。しかし追加で以下が必要だったのです。

3. [Validate LookML]ボタンを表示するために Looker IDE で適当な lkml ファイルを適当に更新する。
4. 設定手順の 3。

ご注意ください。

おわりに

「ハマりどころ」で解説したように手順に多少の不自然さはありますが、デプロイ先は Looker 一択に思えます。GCSにデプロイするメリットがわからないのでわかる方いたら教えて欲しいです…

参考

公式ドキュメント
　Admin Settings - Visualizations
　Example: Adding a custom visualization URL to your LookML project