KASUGAI Canvas v6.17.0

ハッカソン概要

第5回 Agentic AI Hackathon with Google Cloud は、Zenn（クラスメソッド）主催、Google Cloud 協賛のハッカソンです。テーマは 「作れる」から「使える」。エージェントの、新しいステージへ。 単なる自動化ではなく、可観測性・セキュリティ・ガバナンスを意識した「使えるエージェント」を募集します。

スケジュール

プロジェクト概要

KASUGAI Canvas は、CesiumJS のブラウザ GIS と Gemini を連携するアプリです。Cloud Run で静的配信・認証・Gemini API プロキシを提供し、Cloud Storage にプロジェクトとデータを保存します。Gemini が function calling で GIS ツールを選び、ブラウザ内蔵エージェントが実行します。ツールは Canvas の GIS API を通じてレイヤーや地図を操作します。自然言語の依頼を GIS 操作につなぐ構成で、審査用環境を公開しています。

課題と解決

渋谷ミニハッカソンで、GIS が地図を描く道具にとどまり、場所と情報を一緒に見て理解や合意形成を支える活用が十分でない課題を確認しました。

取り組んだ課題

• GIS で何が分かるか伝わりにくく、PDF の地図だけでは操作や詳細を共有しにくい。
• 地図・属性・説明資料が分断され、情報の背景や根拠を確かめにくい。
• 場所に不慣れな会議参加者が位置関係を理解できず、議論から取り残される。

説明用データや資料の準備には手間がかかり、GIS 導入前に活用イメージを共有しにくい状況です。対象は、GIS 導入を検討する現場担当者、GIS 専門家ではない会議参加者、位置情報で合意形成したいチームです。

解決アプローチ

Gemini が function calling でツールを選び、ブラウザ内蔵エージェントが Canvas の GIS API を操作します。

1. 自然言語の依頼から地域や目的を読み取り、公開情報の検索やレイヤー追加を行う。
2. 本番データがない場合は、架空サンプルであることを明示して地図に表示し、レイヤーや属性を見比べられるようにする。
3. 確認できた状況と検討案を資料にまとめ、地図の視点を再現するパーマリンクで詳細情報につなぐ。根拠や限界も示す。

GIS の価値を導入前に体験し、必要なデータ・機能・運用を考えることで、適切な導入判断と課題解決を支援します。

システムアーキテクチャ

利用者の依頼をブラウザ内の AI が GIS 操作に変換し、Cloud Run が認証・AI 中継・保存を支えます。地図とデータはブラウザと Cloud Storage が連携して扱います。

• AI と GIS 操作：利用者の依頼を受けたブラウザ内蔵 AI が Gemini の function calling でツールを選択。executeChatTool 経由で Canvas の GIS API を呼び、レイヤー・地図・資料を操作します。推論と GIS 操作はブラウザ内で行います。
• Gemini 接続：BYO キーがあればブラウザから Gemini API を直接呼び出します。未設定なら Cloud Run の /api/gemini が Secret Manager の GEMINI_API_KEY を注入して中継します。モデル許可リスト、1 MB 上限、レート制限、認証モードで保護し、キーはブラウザへ返しません。
• 認証・保存：Cloud Run の FastAPI が静的配信、ID/PASS 認証、HMAC トークン発行、.kasc・データの保存 API を提供します。データ本体は Cloud Storage に置き、ブラウザが V4 署名付き URL で直接転送します。キーや認証情報は Secret Manager で管理します。
• 地図表示：Maps キーはブラウザへ渡し、GCP 側の HTTP リファラと利用 API 制限で保護します。

flowchart TB
  User[利用者] --> Agent

  subgraph Browser[ブラウザ]
    Agent[内蔵 AI エージェント]
    Tool[executeChatTool]
    Canvas[Canvas GIS API]
    Agent -->|function calling| Tool -->|GIS 操作| Canvas
  end

  Agent <-->|BYO key| Gemini[Gemini API]
  Agent <-->|キーなし：AI プロキシ| CloudRun[Cloud Run / FastAPI]
  CloudRun <-->|サーバーキー| Gemini
  Secrets[Secret Manager] -->|API キー・認証情報| CloudRun

  Canvas <-->|認証・保存 API| CloudRun
  CloudRun -->|署名 URL 発行| Canvas
  Canvas <-->|署名 URL で直接転送| Storage[Cloud Storage]
  CloudRun -->|Maps キー| Canvas

      

参加条件・提出物

必須：Google Cloud アプリケーション実行プロダクト

• Cloud Run に KASUGAI Canvas をデプロイ

必須：Google Cloud AI 技術

• Gemini API の function calling でブラウザ内蔵エージェントから GIS 操作ツールを実行

提出物

• GitHub リポジトリ：github.com/yamamoto-ryuzo/kasugai_canvas
• デプロイ URL：kasugai-canvas-nqh4tuar6a-an.a.run.app（認証モード5。共有 ID/PASS でログイン。資格情報は提出フォームに記載）
• プロジェクト概要：本ページのプロジェクト概要
• システムアーキテクチャ：本ページの Mermaid 図
• デモ動画：YouTube で動画を見る（ログイン、GIS 画面、内蔵 AI の動作、今後の開発予定を紹介）

技術構成とデモ

参加条件との対応

本ハッカソンの参加条件（必須プロダクト・必須 AI 技術・提出物）に対し、KASUGAI Canvas は以下のように対応します。

今回実装した基盤

• ブラウザ内蔵 AI エージェント：Gemini の function calling から GIS 操作ツールを選び、executeChatTool 経由で Canvas の GIS API を実行する基盤。レイヤー操作・FlyTo・資料出力などの個別ツールを備え、回遊シナリオ全体への拡張を目指しています。
• AI プロキシ（キー隠蔽）：POST /api/gemini がサーバーの GEMINI_API_KEY を注入して転送（モデル許可リスト・1MB 上限・レート制限・認証モードで保護）。BYO キー登録済みのブラウザは Gemini を直接呼び、未登録でも /api/capabilities の aiProxy 通知で自動的にサーバーキー経由になるため審査員はキー不要
• 保存・認証：ID/PASS ログイン（/api/auth）で HMAC トークンを発行し、.kasc と gs:// データを Cloud Storage に保存（/api/kasc・/api/data/<key>、GET は V4 署名付き URL でブラウザ⇄GCS 直接転送）。起動時に同梱 .kasc を冪等シード。審査用 URL は認証モード5で運用中
• キー・秘匿管理：Gemini・Maps キーと認証情報は Secret Manager 経由で環境変数に注入。Maps キーはブラウザ直接通信に必要なため capabilities で配布し、GCP 側の HTTP リファラ＋API 制限で保護
• 拡張窓口：外部エージェントプロトコル（{message,project,camera,layers,history,apiKey?} → {reply,actions,report}）により、別実装のエージェントをエンドポイント URL 指定で差し込める

内蔵 AI エージェントの指示文

内蔵 AI エージェントには、モデルに依存しない次の指示を設定します。

あなたは KASUGAI Canvas の GIS 案内エージェントです。
利用者が地図や GIS に詳しくなくても、場所とデータを一緒に見ながら状況を理解し、次の判断につなげられるよう支援してください。

## 目標
利用者の依頼に応じて、Canvas の地図・レイヤー・属性・資料を整え、
「GIS で何が分かり、どんな課題解決に役立つか」を体験できる状態にします。

## 進め方
1. 依頼から対象地域、目的、必要な情報を読み取ります。不明点が結果を大きく左右するときだけ質問します。
2. 実在施設や公開情報が必要なら、検索・既存データを使います。架空サンプルでよい依頼なら、現実の情報と誤認されないサンプルを生成します。
3. 関連するデータを意味の分かる名前のレイヤーに分けて追加し、地図を対象地域へ移動します。
4. 属性や分布から読み取れることを整理します。データだけでは裏付けられないことは事実のように断定しません。
5. 必要なら資料を作成し、地図の状態を再現できるパーマリンクを付けます。
6. 完了時に、追加したレイヤー、分かったこと、サンプルデータか実データか、資料へのリンクを簡潔に説明します。

## サンプルデータの扱い
- 架空データは、名前・説明・資料内に「AI 生成の架空サンプル」と明記します。
- 架空の地点や属性を、実在施設の情報として紹介しません。
- サンプルから導けるのは操作や分析の例までです。現実の意思決定に使える結論として扱いません。
- サンプルを作るときは、依頼された地域・目的に沿った、地図上で比較できるデータにします。

## ツールの使い方
- 依頼を達成するために必要なツールを選び、実行結果を確認してから次へ進みます。
- レイヤー生成は、出力が大きくなりすぎないよう原則1レイヤーずつ行います。
- 同じレイヤーや資料を重複して作らないよう、現在の地図状態を確認します。
- 必要のない設定変更やデータ削除は行いません。
- ツールが失敗した場合は、成功したように装わず、失敗した操作と代替案を説明します。

## 資料の作成
資料には、次の内容を含めます。
- 対象地域と目的
- 地図上で確認できる状況
- データや属性から読み取れる内容
- 課題に対する検討案
- データの出典、または「AI 生成の架空サンプル」である旨
- 地図を開くパーマリンク

検討案は、確認できたデータに基づく案として書き、根拠の限界や追加で必要なデータも必要に応じて示します。

目標デモシナリオ：渋谷区の回遊プランと公園周遊

想定するデモでは、渋谷区の公園・文化／観光スポット・飲食店の架空サンプルを地図で見比べ、見どころの資料を作成し、公園を順番に巡ります。公園ルートはカメラのピッチを真下（-90°）にして FLY します。サンプルデータであることを明記する想定です。

依頼：「渋谷区内の公園、文化・観光スポット、飲食店を、それぞれ約5か所ずつ架空のサンプルデータとして作成し、別々の点レイヤーに追加してください。サンプルデータであることを明記したうえで、各スポットの見どころを紹介する資料と、公園を順番に巡ってください。公園を巡る際は、カメラのピッチを真下（-90°）にして順番に FLY してください。」

技術スタック（提出構成）