Google Cloud JapanPublicationへの投稿
📊

【Looker】非エンジニアでもOK！Geminiで自由なオリジナルのグラフ（カスタムビジュアライゼーション）をカンタン爆速作成

Kentaro Tanaka
に公開
Google Cloud
Looker
データ可視化
Gemini
idea

はじめに

Lookerにはデフォルトで標準的なグラフやグラフごとの編集項目が用意されていて、ほとんどの場合においては利用者のニーズを満たせるのですが、稀に痒いところに手が届かない場面が出てくることがありますよね。


▲標準のビジュアライゼーション

そういった時に非常に強力な選択肢となるのが、自分でグラフを開発する「カスタムビジュアライゼーション(以下カスタムviz)」です。
https://cloud.google.com/looker/docs/admin-panel-platform-visualizations?hl=ja#adding_a_new_custom_visualization

このカスタムvizを作るためには HTML・CSS・JavaScriptの知識が必要となってくるのですが、
本記事では知識がなくても 生成AIのGeminiの力を借りて作成する方法をお伝えします。

例えば以下のようなオリジナルのグラフが、ものによっては1時間もかからずGeminiで作成できてしまうのです。

カスタムvizの例

  1. 標準のvizにはない5段階の星型グラフ　★★★★☆

  2. 日付のセル内の数値や棒グラフやカラースケール設定可なカレンダー型グラフ🗓️

  3. X軸の補助線を任意の月(9月)に指定するなどの細かい調整ができる棒グラフ📊

⚠️カスタムvizの利用時の前提条件と注意点

まず、カスタムvizを利用する上で大事な前提や注意点をお伝えしますが、実際のやり方だけ見たい方はスキップしてください。

  • Looker Studio(Pro)ではなくLookerを対象としています
  • Lookerの開発者権限以上をもっている必要があります
  • 最初に空のプロジェクトを管理者に作成してもらう必要があります
  • 以下の理由により、まずは標準ビジュアライゼーションの編集やグラフ構成エディタで対応することを検討しましょう
    • カスタムビジュアライゼーションはGoogleの公式サポートの対象外となります
      https://cloud.google.com/looker/docs/admin-panel-platform-visualizations?hl=ja#troubleshooting
    • せっかく作ったはいいけど活用されないグラフ・ダッシュボードにならないように、見る人・活用する人のニーズをしっかりと考えた上で開発に取り組む必要があります
    • 視認性や認知の観点で特殊・色んな体裁・派手なグラフがたくさんあることは、あまり望ましくなく、正しいデータの解釈が困難になる可能性があります
  • 知識が浅い状態での開発となる場合は、基本は社内利用に留めてしっかり正しい数値が表れているか後述するテストをした上での運用を推奨します

実際につくってみよう

この記事では例として棒グラフにメモを入力できる機能をもたせたカスタムvizを作成していきますが、
どのようなカスタムvizを作ったとしても、大まかな流れは同じです。

▼こんなイメージでつくりたい

Geminiへの依頼までの流れ

  1. 管理者権限を持ってる人に[空のプロジェクトを作成する]を対応してもらいます。
    プロジェクト名はcustom_vizなどカスタムvizであることを示したものがわかりやすいです。
  2. Geminiを開きます。
  3. 左上のモデル選択でproとついているものを選択します。
  4. 以下のコードブロック部分をコピーして(右上のコピーアイコンで全てコピーできる)Geminiの入力欄にペーストします。
あなたはLookerのカスタムビジュアライゼーション開発のエキスパートです。
次の要件に従って、LookerのカスタムビジュアライゼーションのJavaScriptコードと、その設定手順を生成してください。

---

### 【1. 作成したいビジュアライゼーションの概要】
* **グラフの種類:** （例：目標達成率を示すドーナツチャート、条件によって色が変わるテーブルなど、具体的に記述）
* **使用するデータ:** （例：ディメンション1つ、メジャー2つを使用）
* **デザインや動作:** （例：マウスホバーで詳細なツールチップを表示する。基準値を超えたらバーの色を赤にする、など）

### 【2. ユーザーが編集画面で設定したい項目】
Lookerのビジュアライゼーション編集画面（「編集」タブ）で、ユーザーが動的に変更できるようにしたい項目を記述します。
* （例1：目標値の色をカラーピッカーで自由に変更できるようにする）
* （例2：グラフのラベルの表示／非表示をON/OFFスイッチで切り替えられるようにする）
* （例3：基準値となる数値を自由に入力できるようにする）

### 【3. アウトプットの形式と手順】
* **手順の提示:** Lookerでの設定手順を、番号付きリストで分かりやすく提示してください。
* **コードの提示:** `manifest.lkml`とJavaScriptファイルのコードは、すぐにコピー＆ペーストして使える完全な形で提示してください。
* **初心者への配慮:** 専門用語には簡単な注釈を加え、プログラミング初心者でも理解できるように説明してください。
* **言語:** グラフのデフォルト名（ラベル）は日本語にしてください。

### 【4. 技術的な要件】
* **対象者:** Lookerの開発権限を持つユーザーを対象とします。（管理画面でのプロジェクト作成手順などは不要です）
* **ファイル作成手順:**
    * `manifest.lkml`: Looker IDEの「+」ボタンから作成する手順としてください。
    * JavaScriptファイル: ローカルPCでファイルを作成し、Looker IDEにドラッグ＆ドロップで追加する手順としてください。
* **`manifest.lkml`の記述:**
    * `project_name`パラメータは含めないでください。
    * `visualization`パラメータの`id`は、他と重複しないユニークなものにしてください。
    * 外部ライブラリを使用しない場合、`url`と`dependencies`は省略可能です。
    * （参考例）
        ```lkml
        visualization: {
          id: "unique-id"
          label: "日本語のグラフ名"
          file: "visualization.js"
          dependencies: ["[https://d3js.org/d3.v7.min.js](https://d3js.org/d3.v7.min.js)"]
        }
        ```
* **JavaScriptの記述:**
    * Lookerの新しいVisualization API (`looker.plugins.visualizations.add`) を使用してください。
    * 単体で安定して動作するコードを生成してください。
    * D3.jsなどの外部ライブラリが必要な場合は、`dependencies`パラメータでCDNから読み込むようにし、`sri_hash`が不要な、信頼できるCDNを使用してください。
  1. 【1. 作成したいビジュアライゼーションの概要】の例として書かれてる部分を削除して、自分で作りたいグラフの内容に書き換えてみましょう。
### 【1. 作成したいビジュアライゼーションの概要】
* **グラフの種類:** （例：目標達成率を示すドーナツチャート、条件によって色が変わるテーブルなど、具体的に記述）
* **使用するデータ:** （例：ディメンション1つ、メジャー2つを使用）
* **デザインや動作:** （例：マウスホバーで詳細なツールチップを表示する。基準値を超えたらバーの色を赤にする、など）

↓書き換え後の例：この記事では棒グラフにメモを記載できるカスタムvizをつくってみます↓

### 【1. 作成したいビジュアライゼーションの概要】
* **グラフの種類:** 棒グラフで、各棒の上部にメモを挿入できるグラフ。
* **使用するデータ:** メジャー１つ、ディメンション１つを使用
* **デザインや動作:**
・メモは吹き出しの中に入れてください。
・吹き出しのしっぽの先で対象の棒グラフがどれか示してください。
  1. 同じく【2. ユーザーが編集画面で設定したい項目】の例と書かれてる部分を削除して書き換えます。こちらは以下画像のExploreの編集ボタンから変更できる内容の作成を依頼していきます。
### 【2. ユーザーが編集画面で設定したい項目】
Lookerのビジュアライゼーション編集画面（「編集」タブ）で、ユーザーが動的に変更できるようにしたい項目を記述します。
* （例1：目標値の色をカラーピッカーで自由に変更できるようにする）
* （例2：グラフのラベルの表示／非表示をON/OFFスイッチで切り替えられるようにする）
* （例3：基準値となる数値を自由に入力できるようにする）

↓書き換え後の例↓

```
     ### 【2. ユーザーが編集画面で設定したい項目】
    ・5個の吹き出しを設定できるようにしてください。
    5個の吹き出しそれぞれに以下を設定できるようにしてください。
    ・ メモの内容を入力できるようにしてください。
    ・ どの横軸のディメンションに対してメモを挿入するかを指定する入力欄を設けてください。
    ・ 各吹き出しでフォントサイズ、太字、フォントカラーの設定ができるようにしてください。
    ・ メモのx方向、y方向の位置調整をできるようにしてください。
```
  1. 送信してみましょう。

    　　　　　　　　　　　　　　　　　　↓


手順書が出力されました。

✍️🤖Geminiが作成した手順書の実施

Geminiから回答された手順を進めていくとカスタムvizを作成できるはずです。
手順書の内容と殆ど同じ内容ですが、本記事でも参考までに一連の流れをご紹介します。
一見コードがたくさん出てきますが、ほぼコピペで済むので慣れれば５分もかからずにできます。

  1. 管理者に作成してもらった空のプロジェクトを開きます。
  2. Gitを構成していなければ構成しましょう。
  3. この状態になっていればOKです。
  4. +マークから「プロジェクト マニフェストを作成」をクリックします。
  5. 作成したプロジェクトマニフェストファイルを開き、Geminiの手順書に出力されたmanifest.lkmlをペーストします。project_nameは4.で作成した段階で自動的に入力されているので、Geminiの方でproject_nameが出力されてしまった場合は削除して、visualizationのブロックのみ貼り付けます。内容に問題なければ"Save Changes"で保存します。
  6. 自分のPCのテキストエディタ(Windowsであればメモ帳など)を開きます。
  7. テキストエディタにGeminiの手順書に出力されたJavaScriptの内容を全てコピーして貼り付けます。
  8. 保存をして、更に名前をGeminiの手順書に出力された名称に書き換えます。今回私の例ではmemo_bar_chart.jsという名称で出力されたので、この名称で保存をします。
  9. 保存したJavaScriptファイルをLookerIDEのファイルブラウザ部分にドラッグ＆ドロップします。
  10. 保存されていなければ保存をして右上のValidate LookMLをクリックします。エディタ上にエラーがあってもValidateできれば問題ありません。
  11. 問題なければ"Commit Changes & Push"をして"Deploy to Production"をしましょう。

Exploreで確認してみよう

  1. 以上でカスタムvizが開発されました。何でも良いのでテストするのに相応しいExploreを開きましょう。
  2. ビジュアリゼーション部分の「⋯」に上記でつくったグラフが入っているはずなので選択してみましょう。名称はGeminiが出力したmanifest.lkmlのlabelに書いてある名前です。

3.実際のグラフや編集欄を見てみるとGeminiに依頼された要件で表示されているはずです🎉🎉
　今回の例ではExplore画面で直接棒グラフにメモを残せるような仕組みをつくってみましたが、見事に反映されています。

😭 エラーが発生したとき・動かないとき

  • どの画面・タイミングでエラーが発生したり動かなくなったのか、エラーがあればエラー文をGeminiに送信してみましょう。
    • Geminiに今利用してるJavascriptファイルとmanifestファイルを送信してみましょう。
      正しくコピーペースト出来てない、誤入力していた場合原因を検知できます。
  • エラーが発生した場合は、画面全体のスクリーンショットを送信することでトラブルシューティングが進むこともあります。
  • 新たにGeminiのチャットを立ち上げて、リセットすることで解決するケースもあります🎲
  • プロンプト(Geminiに依頼した文章)を見直してみましょう。
    • 詳細は割愛しますが、どう見直すべきかGeminiに聞いてみましょう。
    • 例えば、本記事の雛形はわかりやすさ重視のため日本語で記載してますが英語の方が精度があがります。

運用に向けて

📝 追加で修正をしたいとき

  • もし部分的に想定した挙動や見た目にならない場合は、Geminiに追加の依頼で修正したい内容を伝えてみましょう。
  • Geminiは画像でやりとりすることが可能です。
    • 言葉での指示が難しい場合は画像と言葉を合わせて依頼してみましょう。
  • 追加修正が上手くいかない場合は、新たにGeminiのチャットを立ち上げて修正内容を【1. 作成したいビジュアライゼーションの概要】や【2. ユーザーが編集画面で設定したい項目】に事前に入れて再生成して見ましょう。

ちゃんと正しく動く？テストの実施

ここではテスト方法の詳細は割愛しますが、100％正しく動くことを証明するのは不可能なので、利用者目線になったときに、しっかりと動くレベルを目指しましょう。もし不具合があるようであれば１つ前の手順に戻りGeminiに不具合の修正依頼をしましょう。

基本的には上記で利用したGeminiのチャット欄に追加で、テストの方法を教えてもらうのが良いと思います。


- 境界値や最大値、最小値を編集部分に入れてみる
- イレギュラーな操作をしてみる
- 一般的なシナリオに沿った動作
などの観点でテストケースを教えてくれるはずです。

現時点のAIで生成されづらいLooker特有のテスト方法・観点としては、
- 類似の標準のビジュアライゼーションがあれば、それと数値などを比較してみる
- カスタムvizの各項目の値が、元のデータの数字と一致しているか
- たくさんデータを読み込ませたときに動作が重くなりすぎないか、実際に使うダッシュボード上でパフォーマンスを確認する
等が考えられますので、一度は確認してみましょう。

Google Cloud Japan
Google Cloud JapanPublication

Google Cloud Japan のエンジニアを中心に情報発信をしている Publication です。Google Cloud サービスの技術情報を中心に公開しています。各記事の内容は個人の意見であり、企業を代表するものではございません。

Discussion