Google Chat メッセージの概要

このページでは、テキスト メッセージとカード メッセージの違いについて説明します。

Chat アプリが基本的な情報を伝えるためにテキスト メッセージを送信する場合、メッセージは Google Chat でユーザーがメッセージを作成するのと同じようにインラインで表示されます。テキスト以外のコンテンツを含むメッセージや、ユーザーが操作できる メッセージを作成する場合、Chat アプリは カードを使用できます。 Chat アプリは、テキスト メッセージにカードを追加することもできます。フォームの入力など、複数ステップのプロセスを完了するようにユーザーに促すために、 Chat アプリはダイアログとして新しいウィンドウで開くカードを作成することもできます。 ダイアログ

テキスト メッセージの構造

Google Chat API では、メッセージは JSON オブジェクトとして表されます。メッセージ内で、 テキスト メッセージは text オブジェクトとして表されます。

次の例では、Chat アプリが、コードフリーズが近づいているソフトウェア デベロッパーのチームのスペースにテキスト メッセージを作成します。

{
  "text": "Attention <users/all>: Code freeze starts at `11:59 am` Pacific Standard Time! If you need a little more time, type `/moreTime` and I'll push the code freeze back one hour."
}

JSON は次のメッセージを返します。

コードフリーズを通知する Google Chat のテキスト メッセージの例。

カード メッセージの構造

Google Chat API では、メッセージは JSON オブジェクトとして表されます。メッセージ内で カードは cardsV2 配列として表され、次の要素で構成されます。

  • 1 つ以上の CardWithId オブジェクト.
  • cardId。カードの識別に使用され、特定のメッセージ内でスコープ設定されます。（異なるメッセージのカードに同じ ID を設定できます）。

  • card オブジェクト。次の要素で構成されます。

    • タイトル、サブタイトル、アバター スタイルの画像などを指定する header オブジェクト 。
    • それぞれに 1 つ以上のウィジェットが含まれる 1 つ以上の section オブジェクト 。
    • 1 つ以上の widget オブジェクト。 各ウィジェットは、テキスト、画像、ボタン、その他のオブジェクト タイプを表すことができる複合オブジェクトです。

たとえば、次のカード メッセージには header、 section、および widget オブジェクトが含まれています。

カード メッセージを使用して Chat スペースで投票を実行する Chat 用アプリ

次のコードは、カード メッセージの JSON を表しています。

JSON

{
  "cardsV2": [
    {
      "cardId": "unique-card-id",
      "card": {
        "header": {
          "title": "Sasha",
          "subtitle": "Software Engineer",
          "imageUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png",
          "imageType": "CIRCLE",
          "imageAltText": "Avatar for Sasha"
        },
        "sections": [
          {
            "header": "Contact Info",
            "collapsible": true,
            "uncollapsibleWidgetsCount": 1,
            "widgets": [
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "EMAIL"
                  },
                  "text": "sasha@example.com"
                }
              },
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "PERSON"
                  },
                  "text": "<font color=\"#80e27e\">Online</font>"
                }
              },
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "PHONE"
                  },
                  "text": "+1 (555) 555-1234"
                }
              },
              {
                "buttonList": {
                  "buttons": [
                    {
                      "text": "Share",
                      "onClick": {
                        "openLink": {
                          "url": "https://example.com/share"
                        }
                      }
                    },
                    {
                      "text": "Edit",
                      "onClick": {
                        "action": {
                          "function": "goToView",
                          "parameters": [
                            {
                              "key": "viewType",
                              "value": "EDIT"
                            }
                          ]
                        }
                      }
                    }
                  ]
                }
              }
            ]
          }
        ]
      }
    }
  ]
}

カード作成ツールを使用して、Chat アプリのメッセージングとユーザー インターフェースを設計してプレビューします。

カード作成ツールを開く