自然言語でLooker上にカスタムアプリを構築できる「Looker Data Apps」をClaude Codeから試してみた
さがらです。
Lookerの新機能として、Looker Data Appsがプレビューでリリースされています。自然言語で作りたいアプリを伝えると、AIエージェントがLookerのセマンティックレイヤー（LookML）に基づいたReactアプリを生成し、Looker上にホストしてくれる機能です。
これまでLookerで標準のダッシュボードを超えるUIを作りたい場合は、Extension Frameworkなどで自前のアプリを開発する必要がありました。本機能を使うと、Claude Codeなどのローカルのコーディングエージェントにプロンプトで依頼するだけで、ガバナンスの効いたデータアプリをLookerに公開できます。実際にClaude Codeから試してみたので、APIキーの取得などの準備から、手順と確認結果をまとめます。
機能概要
Looker Data Appsは、AIエージェントが生成したインタラクティブなWebアプリケーションを、Looker上にネイティブにホストできる機能です。生成されるアプリはReactアプリケーションで、すべてのメジャーはLookMLのセマンティックレイヤーを経由して取得されるため、既存のセマンティックモデル・行レベルセキュリティ・アクセス制御がそのまま引き継がれます。
公式ブログでは、ダッシュボードとの違いが以下のように整理されています。
| 観点 | ダッシュボード | Data Apps |
|---|---|---|
| 用途 | 集計結果の可視化・受動的なレポーティング | パラメータ変更やタスク実行などの能動的な操作 |
| 見た目 | 標準のチャートライブラリ・グリッドタイル | 柔軟なレイアウト・カスタムWebコンポーネント |
| ガバナンス | LookMLで定義された指標 | 同じくLookMLのセマンティックレイヤー経由 |
開発の流れは、ローカルにインストールした開発ツール（Skillなど一式）のディレクトリでコーディングエージェントを起動し、プロンプトでアプリを依頼→ローカルでプレビュー→「Publish this app to Looker.」と依頼して公開、となります。公式Docでは、対応するエージェントとしてGemini CLI、Claude Code、Cursorが挙げられています。
公開されたアプリは、Looker Extension Framework上に構築された「1要素のみのユーザー定義ダッシュボード」としてLookerに保存されます。
制限事項
- 2026年10月17日時点ではプレビュー機能です。Pre-GA Offerings Termsの対象で、GAまでに仕様が変わる可能性があります
- Looker-hostedのインスタンスで、Looker 26.18以降が必要です
- ローカルの開発環境はmacOSまたはLinuxのみ対応です（本記事ではWSL2のUbuntuで試しています）
- Data Appをコピーすると、コピー元とコピー先で同じアプリケーションを共有するため、変更がすべてのコピーに反映されてしまいます。コピーは避けるようにご注意ください
- Data Appsはサンドボックス内で動作し、外部へのネットワーク接続はブロックされます。通信先は自身のLookerインスタンスのみです
- 閲覧するユーザーのブラウザから
www.gstatic.comにアクセスできる必要があります
事前準備
1. Data Appsのプレビューを有効化する
Looker管理者の操作が必要です。AdminパネルのGeneralセクションにあるPreviewsページを開き、Data Appsのトグルを有効にします。
トグルが有効（ON）になっていればOKです。
2. APIキー（Client ID / Client Secret）を作成する
右上のユーザーの画像からAccountを開き、AuthenticationセクションのAPI KeysにあるManageを押します。
API KeysページでCreate New API Keyを押すと、新しい行としてAPIキーが追加されます。Client SecretはShow secretアイコンを押すと表示されるので、Client IDとあわせて控えておきます。Purpose欄に用途（例：Data Apps検証）を入れておくと、後から管理しやすくなります。
Client IDとClient Secretが表示されていればOKです。
3. 公開先フォルダのIDを確認する
アプリの公開先にするフォルダを作成します。
続いて作成したフォルダを開き、URL末尾の数字を控えます。
4. 開発ツールをインストールする
ターミナルで以下のコマンドを実行します。
bash <(curl -fsSL https://dl.google.com/looker-data-apps/install.sh)
実行すると、以下の項目を順に聞かれるので入力していきます。
- インストール先：
Enterでデフォルトの~/looker-data-apps - LookerインスタンスのURL：例
https://myinstance.looker.com - Looker API client_id：手順2で控えたClient ID
- Looker API client_secret：手順2で控えたClient Secret
- Looker folder ID：手順3で控えたフォルダID（
Enterでデフォルトの1）
入力した内容はdata-apps-config.jsonに保存されます。Client Secretを含むため、ファイルの権限は所有者のみ読み書きできる設定になります。
以下は実際のターミナルの画像です。
試してみた
1. Claude Codeで利用できるデータを確認する
インストール先のディレクトリでClaude Codeを起動します。（モデルはOpus 5.5を使用しています。）
cd ~/looker-data-apps
claude
アプリはLookerに既にあるExploreとViewを元に作る必要があるので、まずClaude Codeに、Looker APIでアプリに使えるデータを確認してもらいます。
事前に設定しておいた、ECサイトデータに関するExploreにどういったものがあるかを聞いてみます。
ECサイトデータに関するExploreはどんな物がありますか
下図のように、利用できるExploreの一覧が返ってきました。
2. プロンプトでアプリを生成する
確認したデータを元に、以下のプロンプトでアプリの生成を依頼します。
ECサイトを利用している顧客ごとの詳細な分析が行える360ダッシュボードをアプリで作りたいです。
以下は作成中のログの一部です。Claude CodeがLookMLを確認したうえでアプリを生成し、ローカルのプレビューサーバーを起動してくれます。
3. ローカルでプレビューする
実際にローカルで立ち上がったアプリのURLを開くと、下図のように顧客360ダッシュボードのアプリケーションを見ることができました！Desktop・Tablet・Mobileで画面が切り替わる仕様となっているのも素晴らしいですね。
また、顧客一覧から特定の顧客をクリックすると、その顧客のみに絞り込んだ情報を表示することも可能です。
4. 対話でアプリを修正する
レイアウトや見た目の修正も、Claude Codeとの対話で依頼できます。
より凝ったデザインにする想定で、以下のプロンプトで修正を依頼しました。
以下の内容に沿って、より洗練されていて見やすいモダンなデザインにリニューアルしてください。
1. 全体デザイン・カラー
世界観: 洗練されたミニマリズム。余白を十分に取り、枠線は極力薄くして、ごく軽い影（シャドウ）や背景の微細なコントラストで各要素を区切る。
カラーパレット: 事務的な青を廃止し、ニュアンスカラー（温かみのあるオフホワイトの背景、チャコール、アースカラー、くすみ系のベージュやテラコッタ、セージなど）を使用。
タイポグラフィ: 細めでスタイリッシュなゴシック体をベースに、数字や英字には強弱をつけてメリハリを出す。
2. 上部（フィルター・サマリー）
ヘッダー＆フィルター: 「顧客360ダッシュボード / Customer 360 Dashboard」と英語を併記。フィルターの角は丸く（ピル型）、アイコンを添えてすっきりと。
重要指標（KPI）: 数字（売上や注文数など）を大きく、美しいフォントで強調。前月比（％表示など）は目立ちすぎない丸角の小さなバッジ形式にする。売上推移のミニグラフ（スパークライン）は、滑らかなグラデーション曲線に。
3. グラフ（中段）
月次購買推移: 棒グラフをくすみ系の色合いにし、角をわずかに丸くする。グリッド線や軸の文字は極めて薄くし、ごくシンプルに。
カテゴリ構成: ドーナツグラフの配色をアースカラーやダスティパステルなど、落ち着いたグラデーションに変更。中心の文字配置をすっきりと整理。
ブランドTop10: 横棒グラフを細くスタイリッシュにし、1色または同系色のグラデーションで統一。
4. 表・テーブル（左上・下段）
行間にゆとりを持たせ、1行おきに極めて薄い背景色（ゼブラ）を敷いて可読性を高める。
「ステータス（プロセス中など）」や「返品（Yes/No）」は、淡い色の「丸角バッジ」にして視覚的に一目で判別できるようにする。
以下は修正中のログの一部です。
修正後のアプリケーションが下図となります。Lookerネイティブのダッシュボードでは作成が難しい、モダンなデザインになりました。（総売上などのタイルの大きさに課題はありますが、一旦これで完成という体で進めます。）
5. Lookerに公開して動作を確認する
アプリが完成したら、Claude Codeに以下のように依頼します。
Lookerにアプリをパブリッシュして
Claude Codeが公開用のスクリプトを実行し、指定したフォルダにダッシュボードを作成（または更新）してくれます。完了するとLookerのURLが返ってきます。
返ってきたURLを開くと、Looker上でアプリが表示されます。プロンプトを数回打つだけで、簡単に開発・公開ができました！
最後に
Looker Data AppsをClaude Codeから試してみました。
ダッシュボードの表現力では足りないけれど、Extensionを一から開発するのは重い…という場面で、選択肢の一つになる機能だと感じました。
2026年10月17日時点ではプレビューではありますが、Lookerネイティブなダッシュボードでは表現できないデザインや機能を持たせる際にはかなり役立つ機能だと思います！ぜひご活用ください。
