Dashboard Summarization は、Looker の生成 AI 拡張機能です。ダッシュボードに表示されているデータを分析し、要約を生成します。これにより、ダッシュボードの全体像を素早く把握したり、トレンドや異常値などを効率的に見つけたりすることができます。
 

 

[関連記事] Looker の 生成 AI 拡張機能

Looker では、様々な生成 AI 拡張機能が提供されています。以下の記事もぜひご覧ください。

• 自然言語でデータを可視化できるLookerのExplore Assistantを試してみた
• Looker の生成 AI 拡張機能 Query Insights を試す

本記事では、GitHub リポジトリの Looker Dashboard Summarization を参照しながら、以下の手順で Dashboard Summarization の構築を行い、機能を試してみます。

1. バックエンドを構築する
2. フロントエンドを構築する
3. ダッシュボードに組み込む

 
さらに、日本語環境で Looker を利用するユーザーのために、Dashboard Summarization を日本語に対応させる方法もご紹介します。
 

構築前の準備

構築を始める前に以下の準備をしておきましょう。ここでは、公開データセットの theLook eCommerce を使用した Looker ダッシュボードを利用します。

• Google Cloud プロジェクト: バックエンドを構築するために使用します。
• Looker 空のプロジェクト: Dashboard Summarization を設定するために使用します。
• Looker ダッシュボード: Dashboard Summarization を組み込むために使用します。

はじめに、バックエンドを構築します。Setup の Application Layer に該当する部分です。リポジトリからクローンしたバックエンドのソースコードをビルドして Artifact Registry に格納後、Terraform でリソースをデプロイします。特に記載がない限り、リージョンは asia-northeast1 を使用します。
 

Artifact Registry にバックエンドのソースコードを格納する

1. GitHub リポジトリからソースコードを任意の場所にクローンします。

git clone https://github.com/looker-open-source/dashboard-summarization.git

2. restful-service/src ディレクトリに移動し、依存関係をインストールします。

cd dashboard-summarization/restful-service/src

npm install

3. 次のコマンドを実行し、Artifact Registry に Docker イメージを格納する dashboard-summarization-docker-repo というリポジトリを作成します。

gcloud artifacts repositories create dashboard-summarization-docker-repo  --repository-format=docker  --location=asia-northeast1

4. ソースコードのディレクトリに戻り、cloudbuild.yaml ファイル内のプレースホルダを実際の値に置き換えます。

5. 次のコマンドを実行し、Docker イメージをビルドして Artifact Registry に送信します。Google Cloud SDK や Google Auth Library の認証を求められた場合は、許可してください。

gcloud auth login && gcloud auth application-default login && gcloud builds submit --region=asia-northeast1 --config cloudbuild.yaml

ビルド完了後に表示されるログから、Docker イメージの URI asia-northeast1-docker.pkg.dev/project-id/dashboard-summarization-docker-repo/websocketserviceimage を控えておきます。URI はログに出力されています。

Step #1: The push refers to repository [asia-northeast1-docker.pkg.dev/project-id/dashboard-summarization-docker-repo/websocketserviceimage]

Terraform でリソースをデプロイする

1. terraform ディレクトリに移動します。

cd .. && cd terraform

2. variables.tf ファイル内のプレースホルダを実際の値に置き換えます。YOUR_VALUE は、この後の作業で使用するため、控えておいてください。

[補足] YOUR_VALUE について

YOUR_VALUE に設定する任意の文字列は、次の openssl コマンドを実行して生成できます。

openssl rand -base64 32

3. 次のコマンドを実行し、デプロイされるリソースを確認します。

terraform init

terraform plan

4. 問題なければ、次のコマンドを実行してリソースをデプロイします。デプロイ実行の確認を求められたら、yes と入力してください。

terraform apply

5. これでリソースのデプロイが完了しました。ログに表示される Cloud Run のエンドポイントを控えておきます。エンドポイントはログに出力されます。

url = "https://dashboard-summary-service-xxxxxxxxxxxx.x.run.app"

バックエンドの構築が完了したら、次は Looker フロントエンドを構築します。Setup の Looker Frontend に該当する部分です。リポジトリからクローンしたフロントエンドのソースコードをビルドし、Looker にアップロードした後、Looker Extension を設定します。
 

フロントエンドのソースコードをビルドする

1. dashboard-summarization ディレクトリに移動します。

cd ../..

2. .env.example ファイルをコピーし、同じディレクトリに .env ファイルとして保存します。保存後、以下のように編集してください。記載されていない項目はオプションです。

3. 依存関係をインストールします。

npm install --legacy-peer-deps

4. フロントエンドのソースコードをビルドします。今回は Windows を使用するため、package.json ファイルの build コマンドのスクリプトを次のように修正します。

"build": "set BABEL_ENV=build && webpack --config webpack.prod.js"

ビルドを実行します。ビルドが完了すると、dist ディレクトリに dashboard_summarization.js という名前のビルド済みファイルが作成されます。

npm run build

Looker Extension を設定する

1. Looker にログインし、左側のナビゲーションメニューにある「開発」を選択します。準備済みの Looker の空プロジェクトを選択します。

2.「フロントエンドのソースコードをビルドする」で生成した dashboard_summarization.js ファイルを、Looker プロジェクトのファイルブラウザにドラッグ＆ドロップしてアップロードします。

3. ソースコードのディレクトリに戻り、dashboard-summarization ディレクトリにある manifest.lkml ファイルを次のように編集します。ポイントは url: ではなく file: を使用することです。これにより、アップロードした Looker プロジェクト上の dashboard_summarization.js ファイルを参照するようになります。
YOUR CLOUD RUN URL は「Terraform でリソースをデプロイする」で控えておいた Cloud Run のエンドポイントに置き換えてください。

ファイルの編集が完了したら、Looker プロジェクトのファイルブラウザにドラッグ＆ドロップしてアップロードします。

application: dashboard-summarization {

  label: "Dashboard Insights Powered by Vertex AI"

  file: "dashboard_summarization.js"

  # url: "https://localhost:3000/dashboard_summarization.js"

  mount_points: {

    dashboard_vis: yes

    dashboard_tile: yes

    standalone: yes

  }

  entitlements: {

    local_storage: yes

    use_form_submit: yes

    core_api_methods: ["run_inline_query","run_query","all_lookml_models","dashboard","dashboard_dashboard_elements"]

    external_api_urls: [

      "YOUR_CLOUD_RUN_URL","http://localhost:5000","http://localhost:3000","https://*.googleapis.com","https://slack.com/api/*","https://slack.com/*"

    ]

    oauth2_urls: [

      "https://accounts.google.com/o/oauth2/v2/auth",

      "https://www.googleapis.com/auth/chat.spaces",

      "https://www.googleapis.com/auth/drive.metadata.readonly",

      "https://www.googleapis.com/auth/spreadsheets.readonly",

      "https://www.googleapis.com/auth/userinfo.profile",

      "https://www.googleapis.com/auth/chat.spaces.readonly",

      "https://www.googleapis.com/auth/chat.bot",

      "https://www.googleapis.com/auth/chat.messages",

      "https://www.googleapis.com/auth/chat.messages.create",

      "https://slack.com/oauth/v2/authorize"

    ]

    scoped_user_attributes:["genai_client_secret"]

  }

}

4. Looker プロジェクトでモデルを作成し、何らかの接続にアクセスできるよう接続を追加します。YOUR_CONNECTION は実際の値に置き換えてください。モデルは使用されないため、任意の接続を追加していただいて構いません。また、警告が表示される include はコメントアウトしておきます。

connection: "YOUR_CONNECTION"



# include: "/views/*.view.lkml"                # include all views in the views/ folder in this project

# include: "/**/*.view.lkml"                 # include all views in this project

# include: "my_dashboard.dashboard.lookml"   # include a LookML dashboard called my_dashboard



# # Select the views that should be a part of this model,

# # and define the joins that connect them together.

#

# explore: order_items {

#   join: orders {

#     relationship: many_to_one

#     sql_on: ${orders.id} = ${order_items.order_id} ;;

#   }

#

#   join: users {

#     relationship: many_to_one

#     sql_on: ${users.id} = ${orders.user_id} ;;

#   }

# }

5. Git を構成します。今回は Bare リポジトリを使用します。

6. 変更をコミットし、本番環境にデプロイします。デプロイ後、拡張機能が Looker メニューの「アプリケーション」に表示されます。
 

ユーザー属性を作成する

1. 左側のナビゲーションメニューにある「管理者」を選択します。

2.「ユーザー」 セクションにある 「ユーザー属性」を選択します。

3. ユーザー属性作成画面で「Create User Attribute」ボタンをクリックします。

4. ユーザー属性の追加画面で「Name」に <LOOKER_PROJECT_NAME>_dashboard_summarization_genai_client_secret を入力後「Save」ボタンをクリックし、内容を保存します。注意点として、Looker のプロジェクト名にハイフン (-) またはコロン (::) が含まれている場合は、これらをすべてアンダースコア (_) に置き換えてください。(参照: ユーザー属性) 例えば、プロジェクト名が「sample-project」の場合、sample_project_dashboard_summarization_genai_client_secret になります。

5.「Group Values」をクリックし、さらに「Add Group」ボタンをクリックします。ポップアップが表示されるので、次のように入力後「Save」ボタンをクリックし、内容を保存します。

最後に、Dashboard Summarization をダッシュボードに組み込んで動作を確認します。拡張機能のタイルは、通常のタイルと同様に移動やサイズ変更が可能です。
 

1. 準備済みの Dashboard Summarization を組み込むダッシュボードを開き、「編集」ボタンをクリックして編集モードに切り替えます。

2. 画面左上にある「追加」ボタンをクリックし、表示されるメニューから「拡張機能」をクリックします。

3. 画面右部に表示された拡張機能の一覧にある「Dashboard Insights Powered by Vertex AI」の「タイルに追加」ボタンをクリックします。

4. 画面右上にある「保存」ボタンをクリックし、内容を保存します。
 

ダッシュボードへの組み込みが完了したら、タイルに表示されているテキストに従って「Analyst Style」ボタンをクリックします。テキストボックスにプロンプトが自動で入力されるので、何も変更せずに「Generate」ボタンをクリックしましょう。
数秒後、回答が表示されます。各ビジュアライゼーションの概要と次のステップが記載されています。

Dashboard Summarization は、デフォルトでは英語でのインタフェース表示および回答になるため、日本語環境で Looker を利用するユーザーにとっては十分に活用できない場合があります。そこで、Dashboard Summarization を日本語に対応させる方法をご紹介します。
 

回答の日本語化

Dashboard Summarization の回答を日本語に対応させるには、dashboard-summarization/restful-service/src/index.js ファイル内の関数 generateQuerySummary で定義されているプロンプトに、日本語で回答するよう指示を追加します。
指示を追加してもうまくいかない場合は、使用する Gemini のモデルを変更したり、プロンプトを変更したりしてみてください。

const queryPrompt = `

    You are a specialized answering assistant that can summarize a Looker dashboard and the underlying data and propose operational next steps drawing conclusions from the Query Details listed above.

    

    You must answer in Japanese. // この行を追加します。

    You always answer with markdown formatting. You will be penalized if you do not answer with markdown when it would be possible.

    // その他処理

インタフェースの日本語対応

Dashboard Summarization のインタフェースを日本語に対応させるには、dashboard-summarization/src/components/DashboardSummarization.tsx ファイルを編集します。
次の英語で表記されている箇所を日本語に変更すると画像のように表示されます。

• 47~72 行目 : const PRESET_PROMPTS ...
• 369~372 行目 : <h3>Next Steps Instructions:</h3> ...
• 396 行目 : {loading ? "Generating..." : "Generate"}

本記事では、Google Cloud の Looker の生成 AI 拡張機能 Dashboard Summarization を構築し、機能を試してみました。この拡張機能を使用することで、複雑なダッシュボードを簡潔に要約したり、インサイトを抽出したりすることができます。データ分析の効率を上げたい方は、ぜひ Dashboard Summarization を活用してみてください！