非エンジニアでもできるカスタムビジュアライゼーション

要約

前提

Lookerの標準ビジュアライゼーションだけでは対応しきれないケースの最終手段として、自分でjavascriptを使ってグラフを作る方法がある

但し以下の理由により、まずは標準ビジュアライゼーションで対応出来ないか検討するのがベター。

UXの観点でも特殊・色んな体裁のグラフがありすぎたり、派手なグラフがあることで正しいデータの解釈が困難になる可能性がある。

基本は社内利用でかつ、しっかり正しい数値が表れているかテストをした上での運用が望ましいと思われる

オレオレダッシュボード・グラフ(作ったはいいけど活用されない)にならないように、見る人のニーズを把握する

データガバナンス的な意味で問題ないかを管理者に確認する（管理者による作業も少し発生）

サンプル集

▼星型のレーティング

https://scrapbox.io/files/68e3c70d388b0d4bad38b656.png

▼カレンダー上で祝日やイベントと合わせた売上、コスト、利益の表示

https://scrapbox.io/files/68e3c6e848b2eac14765475c.png

▼棒グラフのx軸、y軸の補助線などの特殊な設定

https://scrapbox.io/files/68e3e7cfde3716765223a3da.png

やり方

以下のセクションに自分の作りたいビジュアライゼーションの内容を記載する。

例

【作りたいビジュアライゼーション】

レビューサイトのような星型の５段階評価のグラフをつくりたい

ディメンションが複数あるときは、横並びでディメンションを表示して

メジャーが複数あるときは、横並びでメジャーを表示して

【ビジュアライゼーションの編集ボタンで操作できる内容】

星の色を変更できるようにする

フォントサイズを変更できるようにする

出力された手順に従って LookML を更新していく

大まかな流れ（この手順は出力されてるはずなので、上手くいかなかったときの確認用）

ローカルのメモ帳などを開き、Gemini で生成された JavaScriptファイルをコピペで保存し、名前を「〇〇.js」として保存。〇〇は生成された結果の名前を使うのが良い。

上記で作成してもらった空のプロジェクトの開発画面を開発モードで開き、画面左側のファイルブラウザに、先ほど作成した 〇〇.js ファイルをフォルダなどからドラッグ＆ドロップする。

ファイルブラウザの＋マークからプロジェクトマニフェストファイルを作成し、Gemini で「manifest.lkml」の内容を貼り付ける。ただしproject_name: は予め入力済みなので、上書きはしない。

あとは本番環境にデプロイをして、任意のExploreを開き、中段のビジュアライゼーションの３点リーダーからmanifestファイルのvisualizationのlabelの名前のグラフを選択する。

上手くいかないときのトラブルシューティング

上手くいくまで何度か同じプロンプトで回し直してみてリセマラしてみる

エラーの内容を Gemini に共有してみる。コツとしては、エラーの文章をコピペするだけではなくて、エラーが発生した段階のLooker IDEの画面全体をスクショして、他のファイル名がおかしいなど指摘してくれる場合がある。

複雑すぎると動かないことがあるので、まずはシンプルなものから作成してみて、成功したコードに対して機能追加を依頼してあげると上手くいくことがある。

プロンプトエンジニアリングの観点で見直してみる

ロールを明確にする

順序立てた依頼

否定形（Do not）ではなく肯定形（Do）での指示

など

モデルを Flash ではなくて Pro や更には有料プランを使ってみる

本番活用に向けたテスト(テストする内容もGeminiに出力してもらっても良いかもしれない)

類似の標準ビジュアライゼーションとの比較や、テーブル形式で見たときと矛盾や差異がないかをしっかりと確認する

メジャーを想定より多く入れた場合などイレギュラーな動作をしたときに誤作動を起こさないか確認する

条件分岐の境界値、最大値、最小値を入れたときに正しく動作するか

動作が遅くならないかパフォーマンステスト　

など