mcpField
G
google-chat-api

google-chat-api

github.com/jezweb生産性1.1k314 回インストール3 週間前に更新
リポジトリ

google-chat-api について

google-chat-apiは、Google Chat連携を構築する開発者向けのスキルで、通知用Webhookとインタラクティブなボットを扱います。カード、フォーム、ダイアログのほか、スペース、メンバー、リアクションのAPI操作も紹介します。

主な機能

  1. 01Webhookによる通知送信
  2. 02インタラクティブなボットとカードの作成
  3. 03メッセージ、ボタン、フォームイベントの処理
  4. 04スペース、メンバー、リアクションの管理

活用シーン

  1. 01ChatスペースへのCI/CDや監視アラート送信
  2. 02Chatでのフォーム情報や承認の収集
  3. 03スペース作成とメンバー権限の管理

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/jezweb/claude-skills --skill google-chat-api

インストール後、Claude Code で/google-chat-apiを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

README.md
.claude-plugin/
plugin.json
references/
cards-v2-schema.md
common-errors.md
google-chat-docs.md
templates/
bearer-token-verify.ts
card-builder-examples.ts
form-validation.ts
interactive-bot.ts
webhook-handler.ts

詳細

Google Chat API

ステータス:本番環境で利用可能 最終更新日:2026-01-09(Spaces API、Members API、Reactions API、レート制限を追加) 依存関係:Cloudflare Workers(推奨)、トークン検証用の Web Crypto API 最新バージョン:Google Chat API v1(安定版)、Cards v2(Cards v1 は非推奨)、[email protected]


クイックスタート(5 分)

1. Webhook を作成する(最も簡単な方法)
# No code needed - just configure in Google Chat
# 1. Go to Google Cloud Console
# 2. Create new project or select existing
# 3. Enable Google Chat API
# 4. Configure Chat app with webhook URL

Webhook URL:https://your-worker.workers.dev/webhook

重要な理由:

  • Chat にメッセージを送信する最も簡単な方法です
  • 受信 Webhook には認証が不要です
  • 外部システムからの通知に最適です
  • メッセージの送信のみ可能です(対話型の応答はできません)
2. 対話型ボットを作成する(Cloudflare Worker)
export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const event = await request.json()

    // Respond with a card
    return Response.json({
      text: "Hello from bot!",
      cardsV2: [{
        cardId: "unique-card-1",
        card: {
          header: { title: "Welcome" },
          sections: [{
            widgets: [{
              textParagraph: { text: "Click the button below" }
            }, {
              buttonList: {
                buttons: [{
                  text: "Click me",
                  onClick: {
                    action: {
                      function: "handleClick",
                      parameters: [{ key: "data", value: "test" }]
                    }
                  }
                }]
              }
            }]
          }]
        }
      }]
    })
  }
}

重要:

  • タイムアウトまでに応答する必要があります(通常は 30 秒)
  • cardsV2 配列を含む有効な JSON を必ず返してください
  • カードのスキーマは正確でなければなりません。フィールドが 1 つでも間違っていると、カード全体が機能しなくなります
3. Bearer トークンを検証する(本番環境のセキュリティ)
async function verifyToken(token: string): Promise<boolean> {
  // Verify token is signed by [email protected]
  // See templates/bearer-token-verify.ts for full implementation
  return true
}

重要な理由:

  • ボットへの不正アクセスを防止します
  • HTTP エンドポイントでは必須です(Webhook では不要です)
  • Web Crypto API を使用します(Cloudflare Workers に対応)

3 ステップのセットアップ手順

ステップ 1:統合の種類を選択する

オプション A:受信 Webhook(通知のみ)

次の用途に最適です:

  • CI/CD 通知
  • アラートシステム
  • 一方向の通信
  • 外部サービス → Chat

セットアップ:

  1. Chat スペースを作成する
  2. スペースの設定で受信 Webhook を構成する
  3. Webhook URL に JSON を POST する

コードは不要です。HTTP POST を実行するだけです:

curl -X POST 'https://chat.googleapis.com/v1/spaces/.../messages?key=...' \
  -H 'Content-Type: application/json' \
  -d '{"text": "Hello from webhook!"}'

オプション B:HTTP エンドポイントボット(対話型)

次の用途に最適です:

  • 対話型フォーム
  • ボタンベースのワークフロー
  • ユーザー入力の収集
  • Chat → 自社サービス → Chat

セットアップ:

  1. Google Cloud プロジェクトを作成する
  2. Chat API を有効にする
  3. HTTP エンドポイントを使って Chat アプリを構成する
  4. Cloudflare Worker をデプロイする
  5. イベントを処理し、カードで応答する

コードが必要です。templates/interactive-bot.ts を参照してください。

ステップ 2:カードを設計する(対話型ボットを使用する場合)

重要:Cards v2 のみを使用してください。Cards v1 は 2025 年に非推奨となりました。Cards v2 はウェブ上の Material Design に準拠しています(レンダリングが高速で、見た目も優れています)。

Cards v2 の構造:

{
  "cardsV2": [{
    "cardId": "unique-id",
    "card": {
      "header": {
        "title": "Card Title",
        "subtitle": "Optional subtitle",
        "imageUrl": "https://..."
      },
      "sections": [{
        "header": "Section 1",
        "widgets": [
          { "textParagraph": { "text": "Some text" } },
          { "buttonList": { "buttons": [...] } }
        ]
      }]
    }
  }]
}

ウィジェットの種類:

  • textParagraph - テキストコンテンツ
  • buttonList - ボタン(テキストまたはアイコン)
  • textInput - テキスト入力フィールド
  • selectionInput - ドロップダウン、チェックボックス、スイッチ
  • dateTimePicker - 日時の選択
  • divider - 水平線
  • image - 画像
  • decoratedText - アイコンまたはボタン付きテキスト

テキストの書式設定(新機能:2025 年 9 月に GA):

Cards v2 は HTML と Markdown の両方の書式設定に対応しています:

// HTML formatting (traditional)
{
  textParagraph: {
    text: "This is <b>bold</b> and <i>italic</i> text with <font color='#ea9999'>color</font>"
  }
}

// Markdown formatting (NEW - better for AI agents)
{
  textParagraph: {
    text: "This is **bold** and *italic* text\n\n- Bullet list\n- Second item\n\n```\ncode block\n```"
  }
}

対応する Markdown(テキストメッセージとカード):

  • **太字** または *斜体*
  • `コード`(インラインコード)
  • - リスト項目 または 1. 番号付き(リスト)
  • ```コードブロック```(複数行のコード)
  • ~取り消し線~

対応する HTML(カードのみ):

  • <b>太字</b>、<i>斜体</i>、<u>下線</u>
  • <font color="#FF0000">色付き</font>
  • <a href="url">リンク</a>

Markdown が重要な理由:LLM は自然に Markdown を出力します。2025 年 9 月より前は、Markdown を HTML に変換する必要がありました。現在は Markdown をそのまま Chat に渡せます。

重要:

  • カードあたりのウィジェット数は最大 100 個です。超過すると警告なく切り詰められます
  • ウィジェットの順序は重要です。上から下に表示されます
  • cardId は一意でなければなりません。タイムスタンプまたは UUID を使用してください
ステップ 3:ユーザー操作を処理する

ユーザーがボタンをクリックするか、フォームを送信した場合:

export default {
  async fetch(request: Request): Promise<Response> {
    const event = await request.json()

    // Check event type
    if (event.type === 'MESSAGE') {
      // User sent message
      return handleMessage(event)
    }

    if (event.type === 'CARD_CLICKED') {
      // User clicked button
      const action = event.action.actionMethodName
      const params = event.action.parameters

      if (action === 'submitForm') {
        return handleFormSubmission(event)
      }
    }

    return Response.json({ text: "Unknown event" })
  }
}

イベントの種類:

  • ADDED_TO_SPACE - ボットがスペースに追加された
  • REMOVED_FROM_SPACE - ボットが削除された
  • MESSAGE - ユーザーがメッセージを送信した
  • CARD_CLICKED - ユーザーがボタンをクリックした、またはフォームを送信した

重要なルール

必ず実施すること

✅ cardsV2 配列構造を含む有効な JSON を返す ✅ カードごとに一意の cardId を設定する ✅ HTTP エンドポイントでは Bearer トークンを検証する(本番環境) ✅ すべてのイベントタイプ(MESSAGE、CARD_CLICKED など)を処理する ✅ カードあたりのウィジェット数を 100 個未満にする ✅ サーバー側でフォーム入力を検証する

禁止事項

❌ コードにシークレットを保存しないでください(Cloudflare Workers のシークレットを使用してください) ❌ 1 つのカードにつき 100 個を超えるウィジェットを配置しないでください(エラーなしで失敗します) ❌ 不正な JSON を返さないでください(メッセージ全体が破損します) ❌ ベアラートークンの検証を省略しないでください(セキュリティリスクがあります) ❌ クライアント側の検証だけを信頼しないでください(サーバー側でも検証してください) ❌ 同期的なブロッキング処理を使用しないでください(タイムアウトのリスクがあります)


既知の問題の防止

このスキルは、ドキュメント化された6 件の問題を防止します。

問題 #1:ベアラートークンの検証失敗(401)

エラー:「Unauthorized」または「Invalid credentials」 出典:Google Chat API ドキュメント 発生する理由:トークンが検証されていないか、検証方法が間違っています 防止策:テンプレートには Web Crypto API による検証が含まれています(Cloudflare Workers に対応)

問題 #2:無効なカードの JSON スキーマ(400)

エラー:「Invalid JSON payload」または「Unknown field」 出典:Cards v2 API リファレンス 発生する理由:フィールド名の誤記、ネストの誤り、または余分なフィールドがあります 防止策:google-chat-cards ライブラリ、または正確なスキーマを使用したテンプレートを利用してください

問題 #3:ウィジェット数の上限超過(エラーなしで失敗)

エラー:エラーは発生せず、100 個を超えるウィジェットは表示されません 出典:Google Chat API の制限 発生する理由:1 つのカードにウィジェットを追加しすぎています 防止策:このスキルでは、ウィジェット数の上限が 100 個であることと、ページネーションのパターンを説明しています

問題 #4:フォームの検証エラー形式が間違っている

エラー:フォームに検証エラーが表示されません 出典:インタラクティブカードのドキュメント 発生する理由:エラーレスポンスの形式が間違っています 防止策:テンプレートには正しいエラー形式が含まれています:

{
  "actionResponse": {
    "type": "DIALOG",
    "dialogAction": {
      "actionStatus": {
        "statusCode": "INVALID_ARGUMENT",
        "userFacingMessage": "Email is required"
      }
    }
  }
}
問題 #5:Webhook の「接続できません」エラー

エラー:Chat に「Unable to connect to bot」と表示されます 出典:Webhook セットアップガイド 発生する理由:URL がパブリックにアクセスできない、タイムアウト、またはレスポンス形式が間違っています 防止策:このスキルには、タイムアウト処理とレスポンス形式の検証が含まれています

問題 #6:レート制限超過(429)

エラー:「RESOURCE_EXHAUSTED」またはステータスコード 429 出典:Google Chat API の割り当て 発生する理由:プロジェクト、スペース、またはユーザーごとのリクエスト制限を超過しています 防止策:このスキルでは、レート制限と指数バックオフのパターンを説明しています


設定ファイルのリファレンス

Cloudflare Worker(wrangler.jsonc)
{
  "name": "google-chat-bot",
  "main": "src/index.ts",
  "compatibility_date": "2026-01-03",
  "compatibility_flags": ["nodejs_compat"],

  // Secrets (set with: wrangler secret put CHAT_BOT_TOKEN)
  "vars": {
    "ALLOWED_SPACES": "spaces/SPACE_ID_1,spaces/SPACE_ID_2"
  }
}

これらの設定が必要な理由:

  • nodejs_compat - Web Crypto API(トークン検証)に必要です
  • シークレットは安全に保存されます(コードには保存されません)
  • 設定には環境変数を使用します

よく使われるパターン

パターン 1:通知ボット(Webhook)
// External service sends notification to Chat
async function sendNotification(webhookUrl: string, message: string) {
  await fetch(webhookUrl, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      text: message,
      cardsV2: [{
        cardId: `notif-${Date.now()}`,
        card: {
          header: { title: "Alert" },
          sections: [{
            widgets: [{
              textParagraph: { text: message }
            }]
          }]
        }
      }]
    })
  })
}

使用する場面:CI/CD アラート、監視通知、イベントトリガー

パターン 2:インタラクティブフォーム
// Show form to collect data
function showForm() {
  return {
    cardsV2: [{
      cardId: "form-card",
      card: {
        header: { title: "Enter Details" },
        sections: [{
          widgets: [
            {
              textInput: {
                name: "email",
                label: "Email",
                type: "SINGLE_LINE",
                hintText: "[email protected]"
              }
            },
            {
              selectionInput: {
                name: "priority",
                label: "Priority",
                type: "DROPDOWN",
                items: [
                  { text: "Low", value: "low" },
                  { text: "High", value: "high" }
                ]
              }
            },
            {
              buttonList: {
                buttons: [{
                  text: "Submit",
                  onClick: {
                    action: {
                      function: "submitForm",
                      parameters: [{
                        key: "formId",
                        value: "contact-form"
                      }]
                    }
                  }
                }]
              }
            }
          ]
        }]
      }
    }]
  }
}

使用する場面:データ収集、承認ワークフロー、チケット作成

パターン 3:ダイアログ(モーダル)
// Open modal dialog
function openDialog() {
  return {
    actionResponse: {
      type: "DIALOG",
      dialogAction: {
        dialog: {
          body: {
            sections: [{
              header: "Confirm Action",
              widgets: [{
                textParagraph: { text: "Are you sure?" }
              }, {
                buttonList: {
                  buttons: [
                    {
                      text: "Confirm",
                      onClick: {
                        action: { function: "confirm" }
                      }
                    },
                    {
                      text: "Cancel",
                      onClick: {
                        action: { function: "cancel" }
                      }
                    }
                  ]
                }
              }]
            }]
          }
        }
      }
    }
  }
}

使用する場面:確認、複数ステップのワークフロー、集中して行うデータ入力


同梱リソースの使用

スクリプト(scripts/)

このスキルには実行可能なスクリプトはありません。

テンプレート(templates/)

すべてのプロジェクトで必要:

  • templates/webhook-handler.ts - 基本的な Webhook レシーバー
  • templates/wrangler.jsonc - Cloudflare Workers の設定

必要に応じて使用:

  • templates/interactive-bot.ts - イベント処理機能を備えた HTTP エンドポイント
  • templates/card-builder-examples.ts - よく使われるカードのパターン
  • templates/form-validation.ts - エラーレスポンスを含む入力検証
  • templates/bearer-token-verify.ts - トークン検証ユーティリティ

読み込むタイミング:ユーザーから次の依頼があった場合、Claude はテンプレートを参照してください。

  • Google Chat ボットのセットアップ
  • インタラクティブカードの作成
  • フォーム検証の追加
  • ベアラートークンの検証
  • ボタンのクリック処理
リファレンス(references/)
  • references/google-chat-docs.md - 主要なドキュメントへのリンク
  • references/cards-v2-schema.md - カード構造の完全なリファレンス
  • references/common-errors.md - エラーのトラブルシューティングガイド

Claude が読み込むタイミング:エラーのトラブルシューティング、カードの設計、API の理解


高度なトピック

スラッシュコマンド

素早い操作のためにスラッシュコマンドを登録します。

// User types: /create-ticket Bug in login
if (event.message?.slashCommand?.commandName === 'create-ticket') {
  const text = event.message.argumentText

  return Response.json({
    text: `Creating ticket: ${text}`,
    cardsV2: [/* ticket confirmation card */]
  })
}

使用例:素早い操作、ショートカット、パワーユーザー向け機能

スレッドへの返信

既存のスレッドに返信します。

return Response.json({
  text: "Reply in thread",
  thread: {
    name: event.message.thread.name  // Use existing thread
  }
})

使用例:会話、フォローアップ、グループ化されたディスカッション


Spaces API

Google Chat のスペース(ルーム)をプログラムで管理します。Chat Admin または App の権限が必要です。

利用可能なメソッド
メソッド説明必要なスコープ
spaces.create新しいスペースを作成するchat.spaces.create
spaces.deleteスペースを削除するchat.delete
spaces.getスペースの詳細を取得するchat.spaces.readonly
spaces.listボットが参加しているスペースを一覧表示するchat.spaces.readonly
spaces.patchスペースの設定を更新するchat.spaces
spaces.search条件でスペースを検索するchat.spaces.readonly
spaces.setupスペースを作成してメンバーを追加するchat.spaces.create
spaces.findDirectMessage特定のユーザーとの DM を検索するchat.spaces.readonly
スペースを作成する
async function createSpace(accessToken: string) {
  const response = await fetch('https://chat.googleapis.com/v1/spaces', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${accessToken}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      spaceType: 'SPACE',          // or 'GROUP_CHAT', 'DIRECT_MESSAGE'
      displayName: 'Project Team',
      singleUserBotDm: false,
      spaceDetails: {
        description: 'Team collaboration space',
        guidelines: 'Be respectful and on-topic'
      }
    })
  })
  return response.json()
}
スペースを一覧表示する(ボットがアクセスできるスペース)
async function listSpaces(accessToken: string) {
  const response = await fetch(
    'https://chat.googleapis.com/v1/spaces?pageSize=100',
    {
      headers: { 'Authorization': `Bearer ${accessToken}` }
    }
  )
  const data = await response.json()
  // Returns: { spaces: [...], nextPageToken: '...' }
  return data.spaces
}
スペースを検索する
async function searchSpaces(accessToken: string, query: string) {
  const params = new URLSearchParams({
    query: query,  // e.g., 'displayName:Project'
    pageSize: '50'
  })
  const response = await fetch(
    `https://chat.googleapis.com/v1/spaces:search?${params}`,
    {
      headers: { 'Authorization': `Bearer ${accessToken}` }
    }
  )
  return response.json()
}

検索クエリの構文:

  • displayName:Project - 名前に「Project」が含まれる
  • spaceType:SPACE - スペースのみ(DM を除く)
  • createTime>2025-01-01 - 指定日より後に作成されたもの
  • AND/OR 演算子で組み合わせる

Members API

スペースのメンバーシップをプログラムで管理します。ユーザーまたはアプリの認証が必要です。

利用可能なメソッド
メソッド説明必要なスコープ
spaces.members.createスペースにメンバーを追加するchat.memberships
spaces.members.deleteメンバーを削除するchat.memberships
spaces.members.getメンバーの詳細を取得するchat.memberships.readonly
spaces.members.listすべてのメンバーを一覧表示するchat.memberships.readonly
spaces.members.patchメンバーのロールを更新するchat.memberships
スペースにメンバーを追加する
async function addMember(accessToken: string, spaceName: string, userEmail: string) {
  const response = await fetch(
    `https://chat.googleapis.com/v1/${spaceName}/members`,
    {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${accessToken}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        member: {
          name: `users/${userEmail}`,
          type: 'HUMAN'  // or 'BOT'
        },
        role: 'ROLE_MEMBER'  // or 'ROLE_MANAGER'
      })
    }
  )
  return response.json()
}
スペースのメンバーを一覧表示する
async function listMembers(accessToken: string, spaceName: string) {
  const response = await fetch(
    `https://chat.googleapis.com/v1/${spaceName}/members?pageSize=100`,
    {
      headers: { 'Authorization': `Bearer ${accessToken}` }
    }
  )
  return response.json()
  // Returns: { memberships: [...], nextPageToken: '...' }
}
メンバーのロールを更新する
async function updateMemberRole(
  accessToken: string,
  memberName: string,  // e.g., 'spaces/ABC/members/DEF'
  newRole: 'ROLE_MEMBER' | 'ROLE_MANAGER'
) {
  const response = await fetch(
    `https://chat.googleapis.com/v1/${memberName}?updateMask=role`,
    {
      method: 'PATCH',
      headers: {
        'Authorization': `Bearer ${accessToken}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ role: newRole })
    }
  )
  return response.json()
}

メンバーのロール:

  • ROLE_MEMBER - 標準メンバー(メッセージの読み書きが可能)
  • ROLE_MANAGER - スペースの設定とメンバーを管理できます

Reactions API

メッセージに絵文字のリアクションを追加します。2025 年に追加され、カスタムのワークスペース絵文字に対応しています。

利用可能なメソッド
メソッド説明
spaces.messages.reactions.createメッセージにリアクションを追加する
spaces.messages.reactions.deleteリアクションを削除する
spaces.messages.reactions.listメッセージのリアクションを一覧表示する
リアクションを追加する
async function addReaction(
  accessToken: string,
  messageName: string,  // e.g., 'spaces/ABC/messages/XYZ'
  emoji: string
) {
  const response = await fetch(
    `https://chat.googleapis.com/v1/${messageName}/reactions`,
    {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${accessToken}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        emoji: {
          unicode: emoji  // e.g., '👍' or custom emoji code
        }
      })
    }
  )
  return response.json()
}
リアクションを一覧表示する
async function listReactions(accessToken: string, messageName: string) {
  const response = await fetch(
    `https://chat.googleapis.com/v1/${messageName}/reactions?pageSize=100`,
    {
      headers: { 'Authorization': `Bearer ${accessToken}` }
    }
  )
  return response.json()
  // Returns: { reactions: [...], nextPageToken: '...' }
}

カスタム絵文字:ワークスペースの管理者はカスタム絵文字をアップロードできます。unicode の代わりに、絵文字の customEmoji.uid を使用してください。


レート制限

Google Chat API は、不正利用を防ぐために厳格なクォータを適用しています。本番アプリでは、これらの制限を把握することが重要です。

プロジェクトごとのクォータ(分単位)
操作上限備考
読み取り操作3,000/分spaces.get、members.list、messages.list
メンバーシップの書き込み300/分members.create、members.delete
スペースの書き込み60/分spaces.create、spaces.patch
メッセージ操作600/分messages.create、reactions.create
リアクション600/分メッセージ操作と共有
スペースごとのクォータ(秒単位)
操作上限
読み取り操作15/秒
書き込み操作1/秒
ユーザーごとのクォータ

ユーザー認証済みのリクエストには、ユーザーごとのスロットリングも適用されます:

  • ほとんどの操作で、ユーザーあたり 60 リクエスト/分
  • スペースの作成では、ユーザーあたり 10 リクエスト/分
レート制限エラーへの対処
async function withRetry<T>(
  fn: () => Promise<T>,
  maxRetries = 3
): Promise<T> {
  for (let i = 0; i < maxRetries; i++) {
    try {
      return await fn()
    } catch (error: any) {
      if (error.status === 429) {
        // Rate limited - wait with exponential backoff
        const waitMs = Math.pow(2, i) * 1000 + Math.random() * 1000
        await new Promise(r => setTimeout(r, waitMs))
        continue
      }
      throw error
    }
  }
  throw new Error('Max retries exceeded')
}

// Usage
const spaces = await withRetry(() => listSpaces(accessToken))

ベストプラクティス:

  • 可能な場合は読み取り操作をキャッシュします
  • メンバーシップ操作をまとめて実行します
  • ページネーションを効率的に使用します(1 回のリクエストで大きなページを取得し、リクエスト数を減らします)
  • 429 エラーには指数バックオフを実装します
  • Google Cloud Console でクォータの使用状況を監視します

依存関係

必須:

  • Cloudflare Workers アカウント(無料枠で利用できます)
  • Chat API が有効になっている Google Cloud プロジェクト
  • パブリック HTTPS エンドポイント(Workers が提供します)

任意:

  • [email protected] - 型安全なカードビルダー(非公式)
  • Web Crypto API(Cloudflare Workers に組み込まれています)

公式ドキュメント


パッケージのバージョン(2026-01-09 に確認済み)

{
  "dependencies": {
    "google-chat-cards": "^1.0.3"
  },
  "devDependencies": {
    "@cloudflare/workers-types": "^4.20260109.0",
    "wrangler": "^4.58.0"
  }
}

注:Google Chat の公式 npm パッケージはありません。fetch API を直接使用してください。


本番環境での例

このスキルは実際の実装に基づいています:

  • コミュニティの例:translatebot(Worker + Chat + Translate API)
  • 公式サンプル:Google のドキュメントに複数の動作する例があります

トークン削減量:約 65~70%(8k → 2.5k トークン) 防止できるエラー:6 件のうち 6 件(記載済みの問題) 検証項目:✅ ウェブフックハンドラー、✅ カードビルダー、✅ トークン検証、✅ フォーム検証、✅ レート制限への対処


トラブルシューティング

問題:「Unauthorized」(401)エラー

解決策:ベアラートークンの検証を実装します(templates/bearer-token-verify.ts を参照)

問題:カードが表示されない/「Invalid JSON payload」

解決策:カードの JSON を Cards v2 スキーマに照らして検証し、フィールド名が正確であることを確認します

問題:最初の 100 個を超えるウィジェットが表示されない

解決策:複数のカードに分割するか、ページネーションを使用します

問題:フォーム検証エラーがユーザーに表示されない

解決策:actionResponse.dialogAction.actionStatus を含む正しいエラー形式を返します

問題:「Unable to connect to bot」

解決策:URL がパブリックにアクセス可能で、タイムアウト前に応答し、有効な JSON を返すことを確認します


セットアップ完了チェックリスト

このチェックリストを使用して、セットアップを確認してください:

  • Google Cloud プロジェクトを作成済み
  • プロジェクトで Chat API を有効化済み
  • Chat アプリにウェブフック/HTTP エンドポイント URL を設定済み
  • Cloudflare Worker をデプロイし、アクセス可能な状態に設定済み
  • ベアラートークンの検証を実装済み(HTTP エンドポイントを使用する場合)
  • カードの JSON をスキーマに照らして検証済み
  • 1 枚のカードあたりのウィジェット数が 100 未満
  • フォーム検証で正しいエラー形式を返す
  • Chat スペースで正常にテスト済み
  • すべてのイベントタイプに対するエラー処理を実装済み

質問や問題がありますか?

  1. トラブルシューティングについては、references/common-errors.md を確認してください
  2. カードの JSON 構造が Cards v2 スキーマに一致していることを確認してください
  3. 公式ドキュメントを確認してください:https://developers.google.com/workspace/chat
  4. HTTP エンドポイントでベアラートークンの検証が実装されていることを確認してください

コメント