Looker Extension Framework -Dashboard Summarization-のデプロイ方法～ユースケースを一挙公開！

1．はじめに

こんにちは、杉山です。
10月になっても暑さが衰えないように、Looker×生成AIにまつわる発表も日々更新されている今日この頃…！
今回はそんな生成AI関連で、以前デモにも利用した『Looker Extension Framework -Dashboard Summarization-』をピックアップしてご紹介したいと思います。（デモを紹介しているブログはこちらをご覧ください）

2．Looker Extension Framework（Looker拡張フレームワーク）とは

そもそもLooker Extensionとは、Looker上で動作するカスタムアプリケーションを意味します。Lookerマーケットプレイスに公開されている公式ExtensionやOSSとしてGithub等に公開されているExtensionをLookerインスタンスにインストールすることで利用可能です。そんなLooker Extensionを開発するためのフレームワークがLooker Extension Frameworkと呼ばれ、一般的に複雑と考えられているデータアプリケーションを構築する際に必要となる労力を大幅に軽減可能にします。Looker Extension Frameworkについてご興味をお持ちいただいた方は、公式のドキュメントでも詳しく説明がございますのでこちらをご参照ください。

3．Dashboard Summarizationで出来ること

1. ダッシュボード上の各タイルの概要の表記
2. ダッシュボード上の各タイルの分析結果の要約
3. ダッシュボード上の各タイルの内容に基づいたネクストアクションの提示

業務に慣れていないユーザーや、可視化された結果を次のアクションに上手く繋げられていないといった課題をお持ちの方々にとても便利な機能です♪

4．構築してみる

使用するサービス・構成

• VScode（その他Cloud Shellなど任意の開発環境でOK）
• Looker
• Cloud Run
• Vertex AI

事前準備

構築を行う環境に以下アプリケーションがインストールされていない場合はインストールが必要です。

• Git
• Node.js（npm）
• Google cloud SDK
• yarn
  • インストールコマンド：https://chore-update–yarnpkg.netlify.app/ja/docs/install

また、Lookerサービスアカウントでの認証を行います。（Google Cloud コンソール＞IAMと管理＞サービスアカウント＞対象サービスアカウントのキーをダウンロード後、Cドライブの任意の場所へ移動）

手順

基本的にはGitHubに記載されている手順に沿って開発を行うのですが、今回使用する環境がWindowsであったこともあり一筋縄にはいかなかったので気を付けるべきポイントをシェアしたいと思います！

まずnpm installでエラーが発生する場合はnpm install --legacy-peer-depsを実行します。

looker-example.iniのファイルを編集し、編集完了後はファイル名をlooker.iniに変更して保存します。
Looker環境変数の設定が初めての方は以下の例を参考にいただけると良いかと思います！

• [nic]
  • base_url='https://nic.jp.looker.com:443'（443でSDKErrorが発生する場合は19999に変更）
  • client_id=LookerのAPIキーから取得
  • client_secret=LookerのAPIキーから取得
  • verify_ssl=true

手順にはありませんが、index.jsファイルのPROJECTとREGIONをVertexAIを使用するGoogle Cloudのプロジェクト名、プロジェクトのリージョン名に変更します。例）{project:'#PJ名',location:'#PJのリージョン名'}
※別途環境変数を別のファイルで設定している場合は不要

以下のようにnpm run start実行後、Listening on: 5000と表示されていればローカルホストが正常に起動しているのでOKです！
※後続の作業のため、次のコードからはローカル環境のターミナルを切り替えて実行します。

ローカル環境においてsrcフォルダ配下にcloudbuild.yamlファイルがない場合、以下を例に手動で作成します。

steps:
# Docker Build
-name: 'gcr.io/cloud-builders/docker'
args: ['build', '-t',
'us-central1-docker.pkg.dev/#PJ名/dashboard-summarization-repo(#Artifact Registryのリポジトリ名）/websocketserviceimage',
'.']

#Docker Push
-name: 'gcr.io/cloud-builders/docker'
args: ['push',
'us-central1-docker.pkg.dev/#PJ名/dashboard-summarization-repo(#Artifact Registryのリポジトリ名）/websocketserviceimage']

cloud builds submit後、作成したリポジトリの中にcloudbuild.yamlで指定したイメージが作成されていれば実行成功です！コマンドからも実行結果は確認可能です。

variables.tfの変数を変更する際、Dockerのタグは指定していないのでデフォルトの”latest”をイメージ名の最後に追加します。（:latest以前のイメージ名は前述のcloudbuild.yamlファイルに記載のイメージ名を使用します。）Cloud Runの名前は任意で作成可能です。

variable "project_id" {
type = string
default = "#PJ名"
}
variable "deployment_region" {
type = string
default = "us-central1"
}
variable "docker_image" {
type = string
default = "us-central1-docker.pkg.dev/#PJ名/#Artifact Registryのリポジトリ名/#Dockerのイメージ名:latest"
}
variable "cloud_run_service_name" {
type = string
default = "dashboard-summarization-api#任意"
}

※手動で作成した場合は4の手順は飛ばして問題ないです。

&&が認識されない場合は”gcloud auth login”、”gcloud auth application-default login”と全てコマンド分けてを実行します。（REGIONには以下cloudbuild.yamlファイルで定義しているus-central1を設定）

下記のコードも同時に実行してエラーが発生する場合はコードを一行ずつ実行します。
すべてのTerraformの実行によりCloud Runがデプロイされます。デプロイが成功しているか確認するにはターミナル上に表示されるCloud RunのURLが起動していることをご確認ください。

サマリを日本語で表示させるには？
dashboard-summarization>websocket-service>src>index.jsのqueryPrompt（111行目あたり）に”You always answer in Japanese”をといった文言を追加すると日本語で表示してくれます◎

下記までの手順に沿ってLookMLを定義し、https://localhost:8080/bundle.jsをクリックしてアプリケーションが起動していることを確認します。

npm run buildを実行しようとした際、実行環境がLinux以外の場合は認識されないコマンドがあるためpackage.jsonのscriptを一部変更します。（今回はwindowsの書き方に変更）

書き方を変更してnpm run buildを実行すると、dist配下に3つのファイルが作成されるのでbundle.jsのみLookML IDEにアップロードします。ファイルをアップロードした場合、本番環境にデプロイしないと読み込まれないので注意です！

手順完了後は、ダッシュボードの拡張機能として既存ダッシュボードに本アプリケーションを追加することで利用可能です。もしアプリケーション実行ボタンの[Generate]がグレーアウトしていて使えない場合は、F12キーからエラーを確認します。私の場合、当初WebSocketのエラーが多発しておりCloud Runの設定を見直すことで解消、アプリケーションも実行可能となりました！

5．さいごに

今回はLooker Extension Framework -Dashboard Summarization-についてデプロイ方法～ユースケースまでをご紹介しましたがいかがでしたでしょうか？私自身普段からLookerがメインの作業を行っているため実装までに中々苦労しました。。。そんなLookerしか触ったことない！といった方でも今回のブログでは細かく解説しておりますので、ご参考になれば幸いです。1回実装するとその後は色々なダッシュボードに適応可能ですし、各々ユースケースに合わせてプロンプトのチューニングなども可能となっております。弊社では構築～プロンプトのチューニングまでご支援させて頂くこと可能ですのでご興味ある方はぜひお問い合わせください。

Looker Extension Frameworkのデモを紹介しているブログはこちら↓
・【Google Cloud Next Tokyo ’24 振り返り】Looker Extension Frameworkを使用した案件管理　デモ動画