Cards v2

カード

Google Chat メッセージまたは Google Workspace アドオンに表示されるカード インターフェース。

カードは、定義済みのレイアウト、ボタンなどのインタラクティブな UI 要素、画像などのリッチメディアをサポートしています。カードを使用して、詳細情報を表示したり、ユーザーから情報を収集したり、次のステップに進むようユーザーを案内したりできます。

カードビルダーでカードをデザインしてプレビューします。

カードビルダーを開く

カードを作成する方法については、次のドキュメントをご覧ください。

注: カードごとに追加できるウィジェットは最大 100 個です。この上限を超えるウィジェットは無視されます。この上限は、Google Chat アプリのカード メッセージとダイアログの両方、および Google Workspace アドオンのカードに適用されます。

例: Google Chat アプリのカード メッセージ

連絡先カードの例

Google Chat でサンプル カード メッセージを作成するには、次の JSON を使用します。

{
  "cardsV2": [
    {
      "cardId": "unique-card-id",
      "card": {
        "header": {
           "title": "Sasha",
           "subtitle": "Software Engineer",
           "imageUrl":
           "https://developers.google.com/workspace/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"
                             }
                           ]
                         }
                       }
                     }
                   ]
                 }
               }
             ]
           }
         ]
       }
    }
  ]
}
JSON 表現
{
  "header": {
    object (CardHeader)
  },
  "sections": [
    {
      object (Section)
    }
  ],
  "sectionDividerStyle": enum (DividerStyle),
  "cardActions": [
    {
      object (CardAction)
    }
  ],
  "name": string,
  "fixedFooter": {
    object (CardFixedFooter)
  },
  "displayStyle": enum (DisplayStyle),
  "peekCardHeader": {
    object (CardHeader)
  }
}
フィールド
header

object (CardHeader)

カードのヘッダー。ヘッダーには通常、先頭の画像とタイトルが含まれます。ヘッダーは常にカードの上部に表示されます。

sections[]

object (Section)

ウィジェットのコレクションが含まれています。各セクションには、オプションでヘッダーを設定できます。セクションは線で区切られており、Google Chat アプリの例については、カードのセクションを定義するをご覧ください。

sectionDividerStyle

enum (DividerStyle)

ヘッダー、セクション、フッター間の区切りスタイル。

cardActions[]

object (CardAction)

カードのアクション。アクションはカードのツールバー メニューに追加されます。

Google Workspace アドオンで利用可能で、Google Chat アプリでは利用できません。

たとえば、次の JSON は、Settings オプションと Send Feedback オプションを使用してカード アクション メニューを作成します。

"cardActions": [
  {
    "actionLabel": "Settings",
    "onClick": {
      "action": {
        "functionName": "goToView",
        "parameters": [
          {
            "key": "viewType",
            "value": "SETTING"
         }
        ],
        "loadIndicator": "LoadIndicator.SPINNER"
      }
    }
  },
  {
    "actionLabel": "Send Feedback",
    "onClick": {
      "openLink": {
        "url": "https://example.com/feedback"
      }
    }
  }
]
name

string

カードの名前。カード ナビゲーションのカード識別子として使用されます。

Google Workspace アドオンで利用可能で、Google Chat アプリでは利用できません。

displayStyle

enum (DisplayStyle)

Google Workspace アドオンで、peekCardHeader の表示プロパティを設定します。

Google Workspace アドオンで利用可能で、Google Chat アプリでは利用できません。

peekCardHeader

object (CardHeader)

コンテキスト コンテンツを表示する場合、ピークカードのヘッダーはプレースホルダとして機能し、ユーザーがホームページ カードとコンテキスト カードを前後に移動できるようにします。

Google Workspace アドオンで利用可能で、Google Chat アプリでは利用できません。

CardHeader

カードのヘッダーを表します。Google Chat アプリの例については、ヘッダーを追加するをご覧ください。

Google Chat アプリと Google Workspace アドオンで利用できます。

JSON 表現
{
  "title": string,
  "subtitle": string,
  "imageType": enum (ImageType),
  "imageUrl": string,
  "imageAltText": string
}
フィールド
title

string

必須。カード ヘッダーのタイトル。ヘッダーの高さは固定です。タイトルとサブタイトルの両方を指定した場合、それぞれ 1 行を占有します。タイトルのみを指定した場合、タイトルは両方の行に表示されます。

subtitle

string

カード ヘッダーのサブタイトル。指定すると、title の下に独自の行に表示されます。

imageType

enum (ImageType)

画像の切り抜きに使用するシェイプ。

Google Chat アプリと Google Workspace アドオンで利用できます。

imageUrl

string

カード ヘッダーの画像の HTTPS URL。

imageAltText

string

ユーザー補助機能で使用されるこの画像の代替テキスト。

ImageType

画像の切り抜きに使用するシェイプ。

Google Chat アプリと Google Workspace アドオンで利用できます。

列挙型
SQUARE デフォルト値。画像に正方形のマスクを適用します。たとえば、4x3 の画像は 3x3 になります。
CIRCLE 画像に円形のマスクを適用します。たとえば、4x3 の画像は直径 3 の円になります。

セクション

セクションには、指定された順序で垂直方向にレンダリングされるウィジェットのコレクションが含まれています。

Google Chat アプリと Google Workspace アドオンで利用できます。

JSON 表現
{
  "header": string,
  "widgets": [
    {
      object (Widget)
    }
  ],
  "collapsible": boolean,
  "uncollapsibleWidgetsCount": integer,
  "collapseControl": {
    object (CollapseControl)
  }
}
フィールド
header

string

セクションの上部に表示されるテキスト。シンプルな HTML 形式のテキストをサポートします。テキストの書式設定の詳細については、Google Chat アプリでのテキストの書式設定Google Workspace アドオンでのテキストの書式設定をご覧ください。

widgets[]

object (Widget)

セクション内のすべてのウィジェット。少なくとも 1 つのウィジェットを含める必要があります。

collapsible

boolean

このセクションを折りたたみ可能かどうかを示します。

折りたたみ可能なセクションでは、一部またはすべてのウィジェットが非表示になりますが、[もっと見る] をクリックすると、セクションを展開して非表示のウィジェットを表示できます。[表示を減らす] をクリックすると、ウィジェットを再度非表示にできます。

非表示にするウィジェットを指定するには、uncollapsibleWidgetsCount を指定します。

uncollapsibleWidgetsCount

integer

セクションを閉じても表示されたままになる、閉じられないウィジェットの数。

たとえば、セクションに 5 つのウィジェットが含まれ、uncollapsibleWidgetsCount2 に設定されている場合、最初の 2 つのウィジェットは常に表示され、最後の 3 つはデフォルトで閉じられます。uncollapsibleWidgetsCount は、collapsibletrue の場合にのみ考慮されます。

collapseControl

object (CollapseControl)

省略可。セクションの展開ボタンと折りたたみボタンを定義します。このボタンは、セクションを閉じることができる場合にのみ表示されます。このフィールドが設定されていない場合、デフォルトのボタンが使用されます。

ウィジェット

各カードはウィジェットで構成されています。

ウィジェットは、テキスト、画像、ボタンなどのオブジェクト タイプを 1 つ表すことができる複合オブジェクトです。

JSON 表現
{
  "horizontalAlignment": enum (HorizontalAlignment),

  // Union field data can be only one of the following:
  "textParagraph": {
    object (TextParagraph)
  },
  "image": {
    object (Image)
  },
  "decoratedText": {
    object (DecoratedText)
  },
  "buttonList": {
    object (ButtonList)
  },
  "textInput": {
    object (TextInput)
  },
  "selectionInput": {
    object (SelectionInput)
  },
  "dateTimePicker": {
    object (DateTimePicker)
  },
  "divider": {
    object (Divider)
  },
  "grid": {
    object (Grid)
  },
  "columns": {
    object (Columns)
  },
  "carousel": {
    object (Carousel)
  },
  "chipList": {
    object (ChipList)
  }
  // End of list of possible types for union field data.
}
フィールド
horizontalAlignment

enum (HorizontalAlignment)

ウィジェットを列の左、右、中央のいずれに配置するかを指定します。

共用体フィールド data。ウィジェットに設定できるアイテムは、次のいずれか 1 つだけです。複数のウィジェット フィールドを使用して、より多くのアイテムを表示できます。 data は次のいずれかになります。
textParagraph

object (TextParagraph)

テキスト パラグラフを表示します。シンプルな HTML 形式のテキストをサポートします。テキストの書式設定の詳細については、Google Chat アプリでのテキストの書式設定Google Workspace アドオンでのテキストの書式設定をご覧ください。

たとえば、次の JSON では太字のテキストが作成されます。

"textParagraph": {
  "text": "  <b>bold text</b>"
}
image

object (Image)

画像を表示します。

たとえば、次の JSON は代替テキストを含む画像を作成します。

"image": {
  "imageUrl":
  "https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png",
  "altText": "Chat app avatar"
}
decoratedText

object (DecoratedText)

装飾されたテキスト アイテムを表示します。

たとえば、次の JSON は、メールアドレスを表示する装飾付きテキスト ウィジェットを作成します。

"decoratedText": {
  "icon": {
    "knownIcon": "EMAIL"
  },
  "topLabel": "Email Address",
  "text": "sasha@example.com",
  "bottomLabel": "This is a new Email address!",
  "switchControl": {
    "name": "has_send_welcome_email_to_sasha",
    "selected": false,
    "controlType": "CHECKBOX"
  }
}
buttonList

object (ButtonList)

ボタンのリスト。

たとえば、次の JSON は 2 つのボタンを作成します。1 つ目は青いテキスト ボタンで、2 つ目はリンクを開く画像ボタンです。

"buttonList": {
  "buttons": [
    {
      "text": "Edit",
      "color": {
        "red": 0,
        "green": 0,
        "blue": 1,
      },
      "disabled": true,
    },
    {
      "icon": {
        "knownIcon": "INVITE",
        "altText": "check calendar"
      },
      "onClick": {
        "openLink": {
          "url": "https://example.com/calendar"
        }
      }
    }
  ]
}
textInput

object (TextInput)

ユーザーが入力できるテキスト ボックスを表示します。

たとえば、次の JSON はメールアドレスのテキスト入力を作成します。

"textInput": {
  "name": "mailing_address",
  "label": "Mailing Address"
}

別の例として、次の JSON は、静的な候補を含むプログラミング言語のテキスト入力を作成します。

"textInput": {
  "name": "preferred_programing_language",
  "label": "Preferred Language",
  "initialSuggestions": {
    "items": [
      {
        "text": "C++"
      },
      {
        "text": "Java"
      },
      {
        "text": "JavaScript"
      },
      {
        "text": "Python"
      }
    ]
  }
}
selectionInput

object (SelectionInput)

ユーザーがアイテムを選択できる選択コントロールを表示します。選択コントロールには、チェックボックス、ラジオボタン、スイッチ、プルダウン メニューがあります。

たとえば、次の JSON は、ユーザーがサイズを選択できるプルダウン メニューを作成します。

"selectionInput": {
  "name": "size",
  "label": "Size"
  "type": "DROPDOWN",
  "items": [
    {
      "text": "S",
      "value": "small",
      "selected": false
    },
    {
      "text": "M",
      "value": "medium",
      "selected": true
    },
    {
      "text": "L",
      "value": "large",
      "selected": false
    },
    {
      "text": "XL",
      "value": "extra_large",
      "selected": false
    }
  ]
}
dateTimePicker

object (DateTimePicker)

ユーザーが日付、時刻、または日時を入力できるウィジェットを表示します。

たとえば、次の JSON は、予約のスケジュールを設定する日時選択ツールを作成します。

"dateTimePicker": {
  "name": "appointment_time",
  "label": "Book your appointment at:",
  "type": "DATE_AND_TIME",
  "valueMsEpoch": "796435200000"
}
divider

object (Divider)

ウィジェット間に水平線の分割線を表示します。

たとえば、次の JSON は分割線を作成します。

"divider": {
}
grid

object (Grid)

アイテムのコレクションを含むグリッドを表示します。

グリッドは、任意の数の列とアイテムをサポートします。行数は、アイテム数の上限を列数で割った値によって決まります。アイテムが 10 個で列が 2 つのグリッドには、5 行あります。11 個のアイテムと 2 つの列を持つグリッドには 6 行があります。

Google Chat アプリと Google Workspace アドオンで利用できます。

たとえば、次の JSON は、1 つのアイテムを含む 2 列のグリッドを作成します。

"grid": {
  "title": "A fine collection of items",
  "columnCount": 2,
  "borderStyle": {
    "type": "STROKE",
    "cornerRadius": 4
  },
  "items": [
    {
      "image": {
        "imageUri": "https://www.example.com/image.png",
        "cropStyle": {
          "type": "SQUARE"
        },
        "borderStyle": {
          "type": "STROKE"
        }
      },
      "title": "An item",
      "textAlignment": "CENTER"
    }
  ],
  "onClick": {
    "openLink": {
      "url": "https://www.example.com"
    }
  }
}
columns

object (Columns)

最大 2 列を表示します。

2 つを超える列を含める場合や行を使用する場合は、Grid ウィジェットを使用します。

たとえば、次の JSON では、それぞれにテキスト パラグラフを含む 2 つの列が作成されます。

"columns": {
  "columnItems": [
    {
      "horizontalSizeStyle": "FILL_AVAILABLE_SPACE",
      "horizontalAlignment": "CENTER",
      "verticalAlignment": "CENTER",
      "widgets": [
        {
          "textParagraph": {
            "text": "First column text paragraph"
          }
        }
      ]
    },
    {
      "horizontalSizeStyle": "FILL_AVAILABLE_SPACE",
      "horizontalAlignment": "CENTER",
      "verticalAlignment": "CENTER",
      "widgets": [
        {
          "textParagraph": {
            "text": "Second column text paragraph"
          }
        }
      ]
    }
  ]
}
carousel

object (Carousel)

カルーセルには、ネストされたウィジェットのコレクションが含まれています。たとえば、次の JSON は、2 つのテキスト パラグラフを含むカルーセルの表現です。

{
  "widgets": [
    {
      "textParagraph": {
        "text": "First text paragraph in the carousel."
      }
    },
    {
      "textParagraph": {
        "text": "Second text paragraph in the carousel."
      }
    }
  ]
}
chipList

object (ChipList)

チップのリスト。

たとえば、次の JSON では 2 つのチップが作成されます。1 つ目はテキスト チップで、2 つ目はリンクを開くアイコン チップです。

"chipList": {
  "chips": [
    {
      "text": "Edit",
      "disabled": true,
    },
    {
      "icon": {
        "knownIcon": "INVITE",
        "altText": "check calendar"
      },
      "onClick": {
        "openLink": {
          "url": "https://example.com/calendar"
        }
      }
    }
  ]
}

TextParagraph

書式設定をサポートする 1 つの段落のテキスト。Google Chat アプリの例については、書式設定されたテキストの段落を追加するをご覧ください。テキストの書式設定の詳細については、Google Chat アプリでのテキストの書式設定Google Workspace アドオンでのテキストの書式設定をご覧ください。

Google Chat アプリと Google Workspace アドオンで利用できます。

JSON 表現
{
  "text": string,
  "maxLines": integer
}
フィールド
text

string

ウィジェットに表示されるテキスト。

maxLines

integer

ウィジェットに表示されるテキストの最大行数。テキストが指定された最大行数を超えると、超過分のコンテンツは [もっと見る] ボタンの背後に隠されます。テキストが指定された最大行数以下の場合、[もっと見る] ボタンは表示されません。

デフォルト値は 0 です。この場合、すべてのコンテキストが表示されます。負の値は無視されます。

画像

URL で指定され、onClick アクションを設定できる画像。例については、画像を追加するをご覧ください。

Google Chat アプリと Google Workspace アドオンで利用できます。

JSON 表現
{
  "imageUrl": string,
  "onClick": {
    object (OnClick)
  },
  "altText": string
}
フィールド
imageUrl

string

画像をホストする HTTPS URL。

次に例を示します。

https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png
onClick

object (OnClick)

ユーザーが画像をクリックすると、このアクションがトリガーされます。

altText

string

ユーザー補助機能で使用されるこの画像の代替テキスト。

OnClick

カード上のインタラクティブな要素(ボタンなど)がクリックされたときの応答方法を表します。

Google Chat アプリと Google Workspace アドオンで利用できます。

JSON 表現
{

  // Union field data can be only one of the following:
  "action": {
    object (Action)
  },
  "openLink": {
    object (OpenLink)
  },
  "openDynamicLinkAction": {
    object (Action)
  },
  "card": {
    object (Card)
  },
  "overflowMenu": {
    object (OverflowMenu)
  }
  // End of list of possible types for union field data.
}
フィールド

共用体フィールド data

data は次のいずれかになります。

action

object (Action)

指定すると、この onClick によってアクションがトリガーされます。

card

object (Card)

指定されている場合は、クリック後に新しいカードがカードスタックにプッシュされます。

Google Workspace アドオンで利用可能で、Google Chat アプリでは利用できません。

overflowMenu

object (OverflowMenu)

指定すると、この onClick でオーバーフロー メニューが開きます。

対応

フォームの送信時の動作を記述するアクション。たとえば、Apps Script スクリプトを呼び出してフォームを処理できます。アクションがトリガーされると、フォームの値がサーバーに送信されます。

Google Chat アプリと Google Workspace アドオンで利用できます。

JSON 表現
{
  "function": string,
  "parameters": [
    {
      object (ActionParameter)
    }
  ],
  "loadIndicator": enum (LoadIndicator),
  "persistValues": boolean,
  "interaction": enum (Interaction),
  "requiredWidgets": [
    string
  ],
  "allWidgetsAreRequired": boolean
}
フィールド
function

string

コンテナ要素がクリックされたときやアクティブになったときに呼び出されるカスタム関数。

使用例については、フォームデータを読み取るをご覧ください。

parameters[]

object (ActionParameter)

アクション パラメータのリスト。

loadIndicator

enum (LoadIndicator)

アクションの呼び出し中にアクションに表示される読み込みインジケーターを指定します。

persistValues

boolean

アクション後にフォームの値を保持するかどうかを示します。デフォルト値は false です。

true の場合、アクションがトリガーされた後もフォームの値は保持されます。アクションの処理中にユーザーが変更できるようにするには、LoadIndicatorNONE に設定します。Chat アプリのカード メッセージの場合は、アクションの ResponseTypeUPDATE_MESSAGE に設定し、アクションを含むカードと同じ cardId を使用する必要があります。

false の場合、アクションがトリガーされるとフォームの値が消去されます。アクションの処理中にユーザーが変更できないようにするには、LoadIndicatorSPINNER に設定します。

interaction

enum (Interaction)

省略可。ダイアログを開く場合に必須です。

ユーザーの操作(カード メッセージ内のボタンのクリックなど)に応じて行うアクション。

指定しない場合、アプリは通常どおり action(リンクを開く、関数を実行するなど)を実行して応答します。

interaction を指定すると、アプリは特別なインタラクティブな方法で応答できます。たとえば、interactionOPEN_DIALOG に設定すると、アプリはダイアログを開くことができます。指定すると、読み込みインジケーターは表示されません。アドオンに指定した場合、カード全体が削除され、クライアントには何も表示されません。

Google Chat アプリで利用可能で、Google Workspace アドオンでは利用できません。

requiredWidgets[]

string

省略可。このリストに、このアクションが有効な送信に必要とするウィジェットの名前を入力します。

このアクションが呼び出されたときに、ここにリストされているウィジェットに値がない場合、フォームの送信は中止されます。

Google Chat アプリと Google Workspace アドオンで利用できます。

allWidgetsAreRequired

boolean

省略可。true の場合、すべてのウィジェットがこのアクションで必須と見なされます。

Google Chat アプリと Google Workspace アドオンで利用できます。

ActionParameter

アクション メソッドが呼び出されるときに指定する文字列パラメータのリスト。たとえば、3 つのスヌーズ ボタン(今すぐスヌーズ、1 日スヌーズ、来週スヌーズ)があるとします。action method = snooze() を使用して、スヌーズ タイプとスヌーズ時間を文字列パラメータのリストで渡すことができます。

詳しくは、CommonEventObject をご覧ください。

Google Chat アプリと Google Workspace アドオンで利用できます。

JSON 表現
{
  "key": string,
  "value": string
}
フィールド
key

string

アクション スクリプトのパラメータの名前。

value

string

パラメータの値。

LoadIndicator

アクションを呼び出すときにアクションに表示される読み込みインジケーターを指定します。

Google Chat アプリと Google Workspace アドオンで利用できます。

列挙型
SPINNER コンテンツの読み込みを示すスピナーを表示します。
NONE 何も表示されません。

操作

省略可。ダイアログを開く場合に必須です。

ユーザーの操作(カード メッセージ内のボタンのクリックなど)に応じて行うアクション。

指定しない場合、アプリは通常どおり action(リンクを開く、関数を実行するなど)を実行して応答します。

interaction を指定すると、アプリは特別なインタラクティブな方法で応答できます。たとえば、interactionOPEN_DIALOG に設定すると、アプリはダイアログを開くことができます。

指定すると、読み込みインジケーターは表示されません。アドオンに指定した場合、カード全体が削除され、クライアントには何も表示されません。

Google Chat アプリで利用可能で、Google Workspace アドオンでは利用できません。

列挙型
INTERACTION_UNSPECIFIED デフォルト値。action は通常どおり実行されます。
OPEN_DIALOG

ダイアログを開きます。これは、Chat アプリがユーザーとのやり取りに使用する、カードベースのウィンドウ インターフェースです。

カード メッセージのボタンクリックに対するレスポンスで、Chat アプリでのみサポートされます。アドオンに指定した場合、カード全体が削除され、クライアントには何も表示されません。

Google Chat アプリで利用可能で、Google Workspace アドオンでは利用できません。

OpenAs

OnClick アクションでリンクが開かれると、クライアントはリンクをフルサイズのウィンドウ(クライアントが使用するフレームの場合)またはオーバーレイ(ポップアップなど)として開くことができます。実装はクライアント プラットフォームの機能に依存し、クライアントがサポートしていない場合、選択した値は無視されることがあります。FULL_SIZE はすべてのクライアントでサポートされています。

Google Workspace アドオンで利用可能で、Google Chat アプリでは利用できません。

列挙型
FULL_SIZE リンクがフルサイズのウィンドウとして開きます(クライアントが使用するフレームがフルサイズの場合)。
OVERLAY リンクがポップアップなどのオーバーレイとして開きます。

OnClose

OnClick アクションによって開かれたリンクが閉じられたときに、クライアントが行う処理。

実装はクライアント プラットフォームの機能によって異なります。たとえば、ウェブブラウザが OnClose ハンドラを使用してポップアップ ウィンドウでリンクを開く場合があります。

OnOpen ハンドラと OnClose ハンドラの両方が設定されていて、クライアント プラットフォームが両方の値をサポートできない場合、OnClose が優先されます。

Google Workspace アドオンで利用可能で、Google Chat アプリでは利用できません。

列挙型
NOTHING デフォルト値。カードは再読み込みされず、何も起こりません。
RELOAD

子ウィンドウが閉じた後にカードを再読み込みします。

OpenAs.OVERLAY と組み合わせて使用すると、子ウィンドウはモーダル ダイアログとして機能し、子ウィンドウが閉じられるまで親カードはブロックされます。

OverflowMenu

ユーザーが呼び出せる 1 つ以上のアクションを含むポップアップ メニューを表示するウィジェット。たとえば、カードにメイン以外のアクションを表示するなどです。このウィジェットは、アクションが使用可能なスペースに収まらない場合に使用できます。使用するには、これをサポートするウィジェットの OnClick アクションでこのウィジェットを指定します。たとえば、Button に以下の行を挿入します。

Google Chat アプリと Google Workspace アドオンで利用できます。

JSON 表現
{
  "items": [
    {
      object (OverflowMenuItem)
    }
  ]
}
フィールド
items[]

object (OverflowMenuItem)

必須。メニュー オプションのリスト。

OverflowMenuItem

ユーザーがオーバーフロー メニューで呼び出せるオプション。

Google Chat アプリと Google Workspace アドオンで利用できます。

JSON 表現
{
  "startIcon": {
    object (Icon)
  },
  "text": string,
  "onClick": {
    object (OnClick)
  },
  "disabled": boolean
}
フィールド
startIcon

object (Icon)

テキストの前に表示されるアイコン。

text

string

必須。アイテムを識別または説明するテキスト。

onClick

object (OnClick)

必須。メニュー オプションが選択されたときに呼び出されるアクション。この OnClick には OverflowMenu を含めることはできません。指定された OverflowMenu はすべて破棄され、メニュー項目が無効になります。

disabled

boolean

メニュー オプションが無効かどうか。デフォルトは false です。

アイコン

カードのウィジェットに表示されるアイコン。Google Chat アプリの例については、アイコンを追加するをご覧ください。

組み込みアイコンとカスタムアイコンをサポートします。

Google Chat アプリと Google Workspace アドオンで利用できます。

JSON 表現
{
  "altText": string,
  "imageType": enum (ImageType),

  // Union field icons can be only one of the following:
  "knownIcon": string,
  "iconUrl": string,
  "materialIcon": {
    object (MaterialIcon)
  }
  // End of list of possible types for union field icons.
}
フィールド
altText

string

省略可。ユーザー補助機能に使用されるアイコンの説明。指定しない場合、デフォルト値 Button が使用されます。ベスト プラクティスとして、アイコンに表示される内容と、該当する場合は機能について、わかりやすい説明を設定してください。たとえば、A user's account portrait や、Opens a new browser tab and navigates to the Google Chat developer documentation at https://developers.google.com/workspace/chat です。

アイコンが Button に設定されている場合、ユーザーがボタンにカーソルを合わせると、altText がヘルパー テキストとして表示されます。ただし、ボタンで text も設定されている場合、アイコンの altText は無視されます。

imageType

enum (ImageType)

画像に適用された切り抜きスタイル。CIRCLE の切り抜きを適用すると、画像が組み込みアイコンよりも大きく描画されることがあります。

共用体フィールド icons。カードのウィジェットに表示されるアイコン。 icons は次のいずれかになります。
knownIcon

string

Google Workspace が提供する組み込みアイコンのいずれかを表示します。

たとえば、飛行機のアイコンを表示するには、AIRPLANE を指定します。バスの場合は、BUS を指定します。

サポートされているアイコンの一覧については、組み込みアイコンをご覧ください。

iconUrl

string

HTTPS URL でホストされているカスタム アイコンを表示します。

次に例を示します。

"iconUrl":
"https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png"

サポートされているファイル形式は、.png.jpg です。

materialIcon

object (MaterialIcon)

Google マテリアル アイコンのいずれかを表示します。

たとえば、チェックボックス アイコンを表示するには、

"materialIcon": {
  "name": "check_box"
}

Google Chat アプリで利用可能で、Google Workspace アドオンでは利用できません。

MaterialIcon

Google マテリアル アイコン(2, 500 以上のオプションがあります)。

たとえば、重みとグレードをカスタマイズしたチェックボックス アイコンを表示するには、次のように記述します。

{
  "name": "check_box",
  "fill": true,
  "weight": 300,
  "grade": -25
}

Google Chat アプリで利用可能で、Google Workspace アドオンでは利用できません。

JSON 表現
{
  "name": string,
  "fill": boolean,
  "weight": integer,
  "grade": integer
}
フィールド
name

string

Google マテリアル アイコンで定義されたアイコン名(check_box など)。無効な名前は破棄され、空の文字列に置き換えられるため、アイコンがレンダリングされません。

fill

boolean

アイコンを塗りつぶしてレンダリングするかどうか。デフォルト値は false です。

さまざまなアイコン設定をプレビューするには、Google フォント アイコンに移動し、[カスタマイズ] で設定を調整します。

weight

integer

アイコンのストロークの太さ。{100, 200, 300, 400, 500, 600, 700} から選択します。指定しない場合、デフォルト値は 400 です。他の値を指定した場合は、デフォルト値が使用されます。

さまざまなアイコン設定をプレビューするには、Google フォント アイコンに移動し、[カスタマイズ] で設定を調整します。

grade

integer

ウェイトとグレードは記号の太さに影響します。グレードの調整はウェイトの調整よりもきめ細かく、記号のサイズへの影響は小さくなります。{-25、0、200} から選択します。指定しない場合、デフォルト値は 0 です。他の値を指定した場合は、デフォルト値が使用されます。

さまざまなアイコン設定をプレビューするには、Google フォント アイコンに移動し、[カスタマイズ] で設定を調整します。

DecoratedText

テキストの上にラベルを表示したり、テキストの前にアイコンを表示したり、テキストの後に選択ウィジェットを表示したり、ボタンを表示したりするなど、テキストを装飾して表示するウィジェット。Google Chat アプリの例については、装飾テキスト付きのテキストを表示するをご覧ください。

Google Chat アプリと Google Workspace アドオンで利用できます。

JSON 表現
{
  "icon": {
    object (Icon)
  },
  "startIcon": {
    object (Icon)
  },
  "topLabel": string,
  "text": string,
  "wrapText": boolean,
  "bottomLabel": string,
  "onClick": {
    object (OnClick)
  },

  // Union field control can be only one of the following:
  "button": {
    object (Button)
  },
  "switchControl": {
    object (SwitchControl)
  },
  "endIcon": {
    object (Icon)
  }
  // End of list of possible types for union field control.
}
フィールド
icon
(deprecated)

object (Icon)

startIcon に置き換えられました。

startIcon

object (Icon)

テキストの前に表示されるアイコン。

topLabel

string

text の上に表示されるテキスト。常に切り捨てられます。

text

string

必須。メインのテキスト。

シンプルな書式設定をサポートしています。テキストの書式設定の詳細については、Google Chat アプリでのテキストの書式設定Google Workspace アドオンでのテキストの書式設定をご覧ください。

wrapText

boolean

テキストの折り返し設定。true の場合、テキストは折り返されて複数行に表示されます。それ以外の場合、テキストは切り捨てられます。

text にのみ適用されます。topLabelbottomLabel には適用されません。

bottomLabel

string

text の下に表示されるテキスト。常に折り返されます。

onClick

object (OnClick)

このアクションは、ユーザーが topLabel または bottomLabel をクリックしたときにトリガーされます。

共用体フィールド controldecoratedText ウィジェットのテキストの右側に表示されるボタン、スイッチ、チェックボックス、画像。control は次のいずれかになります。
button

object (Button)

ユーザーがクリックしてアクションをトリガーできるボタン。

switchControl

object (SwitchControl)

ユーザーがクリックして状態を変更し、アクションをトリガーできるスイッチ ウィジェット。

endIcon

object (Icon)

テキストの後に表示されるアイコン。

組み込みカスタムのアイコンをサポートします。

ボタン

ユーザーがクリックできるテキスト、アイコン、またはテキストとアイコンのボタン。Google Chat アプリの例については、ボタンを追加するをご覧ください。

画像をクリック可能なボタンにするには、ImageImageComponent ではない)を指定し、onClick アクションを設定します。

Google Chat アプリと Google Workspace アドオンで利用できます。

JSON 表現
{
  "text": string,
  "icon": {
    object (Icon)
  },
  "color": {
    object (Color)
  },
  "onClick": {
    object (OnClick)
  },
  "disabled": boolean,
  "altText": string,
  "type": enum (Type)
}
フィールド
text

string

ボタン内に表示されるテキスト。

icon

object (Icon)

ボタン内に表示されるアイコン。icontext の両方を設定すると、テキストの前にアイコンが表示されます。

color

object (Color)

省略可。ボタンの色。設定されている場合、ボタン typeFILLED に設定され、text フィールドと icon フィールドの色は、読みやすくするためにコントラストの効いた色に設定されます。たとえば、ボタンの色が青に設定されている場合、ボタン内のテキストやアイコンは白に設定されます。

ボタンの色を設定するには、redgreenblue の各フィールドに値を指定します。値は、RGB 色値に基づく 0 ~ 1 の浮動小数点数にする必要があります。0(0/255)は色なしを表し、1(255/255)は色の最大彩度を表します。

たとえば、次のコードは、最大強度の赤色に設定します。

"color": {
   "red": 1,
   "green": 0,
   "blue": 0,
}

ボタンの色には alpha フィールドを使用できません。指定した場合、このフィールドは無視されます。

onClick

object (OnClick)

必須。ユーザーがボタンをクリックしたときに実行するアクション(ハイパーリンクを開く、カスタム関数を実行するなど)。

disabled

boolean

true の場合、ボタンは非アクティブな状態で表示され、ユーザー操作に応答しません。

altText

string

ユーザー補助機能で使用される代替テキスト。

ボタンの動作をユーザーに示す説明的なテキストを設定します。たとえば、ボタンがハイパーリンクを開く場合は、「新しいブラウザタブを開き、Google Chat デベロッパー向けドキュメント(https://developers.google.com/workspace/chat")に移動します」と記述します。

type

enum (Type)

省略可。ボタンのタイプ。設定しない場合、ボタンのタイプはデフォルトで OUTLINED になります。color フィールドが設定されている場合、ボタンのタイプは FILLED に強制され、このフィールドに設定された値は無視されます。

RGBA カラースペースのカラーを表します。この表現は、コンパクトさよりも、さまざまな言語の色表現との間で簡単に変換できるように設計されています。たとえば、この表現のフィールドは、Java の java.awt.Color のコンストラクタに簡単に渡すことができます。また、iOS の UIColor の +colorWithRed:green:blue:alpha メソッドにも簡単に渡すことができます。また、少しの作業で、JavaScript の CSS rgba() 文字列に簡単にフォーマットできます。

このリファレンス ページには、RGB 値の解釈に使用する必要がある絶対色空間(sRGB、Adobe RGB、DCI-P3、BT.2020 など)に関する情報は含まれていません。デフォルトでは、アプリケーションは sRGB 色空間を想定します。

色の等価性を判断する必要がある場合、実装では、特に明記されていない限り、赤、緑、青、アルファの値がそれぞれ最大 1e-5 の差異しかない場合、2 つの色を等価とみなします。

例(Java):

 import com.google.type.Color;

 // ...
 public static java.awt.Color fromProto(Color protocolor) {
   float alpha = protocolor.hasAlpha()
       ? protocolor.getAlpha().getValue()
       : 1.0;

   return new java.awt.Color(
       protocolor.getRed(),
       protocolor.getGreen(),
       protocolor.getBlue(),
       alpha);
 }

 public static Color toProto(java.awt.Color color) {
   float red = (float) color.getRed();
   float green = (float) color.getGreen();
   float blue = (float) color.getBlue();
   float denominator = 255.0;
   Color.Builder resultBuilder =
       Color
           .newBuilder()
           .setRed(red / denominator)
           .setGreen(green / denominator)
           .setBlue(blue / denominator);
   int alpha = color.getAlpha();
   if (alpha != 255) {
     result.setAlpha(
         FloatValue
             .newBuilder()
             .setValue(((float) alpha) / denominator)
             .build());
   }
   return resultBuilder.build();
 }
 // ...

例(iOS / Obj-C):

 // ...
 static UIColor* fromProto(Color* protocolor) {
    float red = [protocolor red];
    float green = [protocolor green];
    float blue = [protocolor blue];
    FloatValue* alpha_wrapper = [protocolor alpha];
    float alpha = 1.0;
    if (alpha_wrapper != nil) {
      alpha = [alpha_wrapper value];
    }
    return [UIColor colorWithRed:red green:green blue:blue alpha:alpha];
 }

 static Color* toProto(UIColor* color) {
     CGFloat red, green, blue, alpha;
     if (![color getRed:&red green:&green blue:&blue alpha:&alpha]) {
       return nil;
     }
     Color* result = [[Color alloc] init];
     [result setRed:red];
     [result setGreen:green];
     [result setBlue:blue];
     if (alpha <= 0.9999) {
       [result setAlpha:floatWrapperWithValue(alpha)];
     }
     [result autorelease];
     return result;
}
// ...

例(JavaScript):

// ...

var protoToCssColor = function(rgb_color) {
   var redFrac = rgb_color.red || 0.0;
   var greenFrac = rgb_color.green || 0.0;
   var blueFrac = rgb_color.blue || 0.0;
   var red = Math.floor(redFrac * 255);
   var green = Math.floor(greenFrac * 255);
   var blue = Math.floor(blueFrac * 255);

   if (!('alpha' in rgb_color)) {
      return rgbToCssColor(red, green, blue);
   }

   var alphaFrac = rgb_color.alpha.value || 0.0;
   var rgbParams = [red, green, blue].join(',');
   return ['rgba(', rgbParams, ',', alphaFrac, ')'].join('');
};

var rgbToCssColor = function(red, green, blue) {
  var rgbNumber = new Number((red << 16) | (green << 8) | blue);
  var hexString = rgbNumber.toString(16);
  var missingZeros = 6 - hexString.length;
  var resultBuilder = ['#'];
  for (var i = 0; i < missingZeros; i++) {
     resultBuilder.push('0');
  }
  resultBuilder.push(hexString);
  return resultBuilder.join('');
};

// ...
JSON 表現
{
  "red": number,
  "green": number,
  "blue": number,
  "alpha": number
}
フィールド
red

number

カラーの赤色の量。[0, 1] の範囲内の値として示されます。

green

number

カラーの緑色の量。[0, 1] の範囲内の値として示されます。

blue

number

カラーの青色の量。[0, 1] の範囲内の値として示されます。

alpha

number

ピクセルに適用する必要があるこのカラーの割合。つまり、最終的なピクセル色は次の式で定義されます。

pixel color = alpha * (this color) + (1.0 - alpha) * (background color)

つまり、値 1.0 はソリッドカラーに相当し、値 0.0 は透明色に相当します。これは、単純な浮動小数点スカラーではなくラッパー メッセージを使用します。これにより、デフォルト値が設定されたのか未設定値だったのかを区別できます。省略された場合、このカラー オブジェクトは(alpha 値として明示的に値 1.0 が指定された場合と同様に)ソリッドカラーとしてレンダリングされます。

タイプ

省略可。ボタンのタイプcolor フィールドが設定されている場合、type は強制的に FILLED になります。

Google Chat アプリで利用可能で、Google Workspace アドオンでは利用できません。

列挙型
TYPE_UNSPECIFIED 使用しないでください。指定なし。
OUTLINED アウトライン ボタンは中強調ボタンです。通常、Chat アプリやアドオンの主なアクションではないが重要なアクションが含まれます。
FILLED 塗りつぶしボタンは、単色のコンテナで構成されます。視覚的なインパクトが最も大きく、Chat アプリやアドオンの重要なメイン アクションにおすすめです。
FILLED_TONAL 塗りつぶしトーンボタンは、塗りつぶしボタンと枠線付きボタンの中間に位置する代替手段です。優先度の低いボタンに、アウトライン ボタンよりも少し強調が必要な場合に便利です。
BORDERLESS ボタンのデフォルト状態には、不可視のコンテナがありません。多くの場合、優先度の最も低いアクションに使用されます(特に複数のオプションを提示する場合)。

SwitchControl

切り替えスタイルのスイッチまたは decoratedText ウィジェット内のチェックボックス。

Google Chat アプリと Google Workspace アドオンで利用できます。

decoratedText ウィジェットでのみサポートされます。

JSON 表現
{
  "name": string,
  "value": string,
  "selected": boolean,
  "onChangeAction": {
    object (Action)
  },
  "controlType": enum (ControlType)
}
フィールド
name

string

フォーム入力イベントでスイッチ ウィジェットを識別する名前。

フォーム入力の操作の詳細については、フォームデータを受け取るをご覧ください。

value

string

ユーザーが入力した値。フォーム入力イベントの一部として返されます。

フォーム入力の操作の詳細については、フォームデータを受け取るをご覧ください。

selected

boolean

true の場合、スイッチが選択されています。

onChangeAction

object (Action)

スイッチの状態が変化したときに実行するアクション(実行する関数など)。

controlType

enum (ControlType)

ユーザー インターフェースにスイッチが表示される仕組み。

Google Chat アプリと Google Workspace アドオンで利用できます。

ControlType

ユーザー インターフェースにスイッチが表示される仕組み。

Google Chat アプリと Google Workspace アドオンで利用できます。

列挙型
SWITCH 切り替え式のスイッチ。
CHECKBOX CHECK_BOX に置き換えられました。
CHECK_BOX チェックボックス。

ButtonList

横方向に配置されたボタンのリスト。Google Chat アプリの例については、ボタンを追加するをご覧ください。

Google Chat アプリと Google Workspace アドオンで利用できます。

JSON 表現
{
  "buttons": [
    {
      object (Button)
    }
  ]
}
フィールド
buttons[]

object (Button)

ボタンの配列。

TextInput

ユーザーがテキストを入力できるフィールド。候補と変更時のアクションをサポートします。フォーム送信の検証をサポートします。Action.all_widgets_are_requiredtrue に設定されている場合、またはこのウィジェットが Action.required_widgets で指定されている場合、値が入力されていない限り、送信アクションはブロックされます。Google Chat アプリの例については、ユーザーがテキストを入力できるフィールドを追加するをご覧ください。

Chat アプリは、フォーム入力イベント中に入力されたテキストの値を受信して処理できます。フォーム入力の操作の詳細については、フォームデータを受け取るをご覧ください。

ユーザーから未定義または抽象的なデータを収集する必要がある場合は、テキスト入力を使用します。定義済みまたは列挙型のデータをユーザーから収集するには、SelectionInput ウィジェットを使用します。

Google Chat アプリと Google Workspace アドオンで利用できます。

JSON 表現
{
  "name": string,
  "label": string,
  "hintText": string,
  "value": string,
  "type": enum (Type),
  "onChangeAction": {
    object (Action)
  },
  "initialSuggestions": {
    object (Suggestions)
  },
  "autoCompleteAction": {
    object (Action)
  },
  "validation": {
    object (Validation)
  },
  "placeholderText": string
}
フィールド
name

string

フォーム入力イベントでテキスト入力を識別する名前。

フォーム入力の操作の詳細については、フォームデータを受け取るをご覧ください。

label

string

ユーザー インターフェースのテキスト入力フィールドの上に表示されるテキスト。

アプリに必要な情報をユーザーが入力できるように、テキストを指定します。たとえば、名前を尋ねる際に姓のみが必要であれば、name ではなく surname と記述します。

hintText が指定されていない場合は必須です。それ以外の場合は、省略可能です。

hintText

string

テキスト入力フィールドの下に表示されるテキスト。特定の値を入力するようユーザーに促す目的で使用されます。このテキストは常に表示されます。

label が指定されていない場合は必須です。それ以外の場合は、省略可能です。

value

string

ユーザーが入力した値。フォーム入力イベントの一部として返されます。

フォーム入力の操作の詳細については、フォームデータを受け取るをご覧ください。

type

enum (Type)

テキスト入力フィールドがユーザー インターフェースにどのように表示されるか。たとえば、フィールドが単一行か複数行かなどです。

onChangeAction

object (Action)

テキスト入力フィールドで変更が発生した場合の対応方法。たとえば、ユーザーがフィールドに追加したり、テキストを削除したりした場合です。

実行するアクションの例としては、カスタム関数の実行や、Google Chat でダイアログを開くなどがあります。

initialSuggestions

object (Suggestions)

ユーザーが入力できる候補値。これらの値は、ユーザーがテキスト入力フィールド内をクリックしたときに表示されます。ユーザーが入力すると、入力内容に合わせて候補値が動的にフィルタされます。

たとえば、プログラミング言語のテキスト入力フィールドでは、Java、JavaScript、Python、C++ が候補として表示されます。ユーザーが Jav と入力し始めると、候補リストがフィルタされ、JavaJavaScript のみが表示されます。

候補値は、アプリが理解できる値をユーザーが入力できるようにするためのものです。JavaScript を参照する場合、javascript と入力するユーザーもいれば、java script と入力するユーザーもいます。JavaScript を提案することで、ユーザーがアプリを操作する方法を標準化できます。

指定した場合、TextInput.typeMULTIPLE_LINE に設定されている場合でも常に SINGLE_LINE になります。

Google Chat アプリと Google Workspace アドオンで利用できます。

autoCompleteAction

object (Action)

省略可。テキスト入力フィールドでユーザーが操作したときに候補が表示された場合に実行するアクションを指定します。

指定しない場合、候補は initialSuggestions によって設定され、クライアントによって処理されます。

指定すると、アプリはここで指定されたアクション(カスタム関数の実行など)を実行します。

Google Workspace アドオンで利用可能で、Google Chat アプリでは利用できません。

validation

object (Validation)

このテキスト フィールドに必要な入力形式の検証を指定します。

Google Chat アプリと Google Workspace アドオンで利用できます。

placeholderText

string

テキスト入力フィールドが空のときに表示されるテキスト。このテキストは、値を入力するようユーザーに求めるメッセージとして使用します。例: Enter a number from 0 to 100

Google Chat アプリで利用可能で、Google Workspace アドオンでは利用できません。

タイプ

テキスト入力フィールドがユーザー インターフェースにどのように表示されるか。たとえば、1 行入力フィールドか複数行入力かなどです。initialSuggestions が指定されている場合、typeMULTIPLE_LINE に設定されている場合でも常に SINGLE_LINE になります。

Google Chat アプリと Google Workspace アドオンで利用できます。

列挙型
SINGLE_LINE テキスト入力フィールドの高さは 1 行に固定されています。
MULTIPLE_LINE テキスト入力フィールドの高さは複数行の固定値です。

RenderActions

カードにアクションを実行するよう指示する、またはアドオン ホストアプリまたは Chat アプリにアプリ固有のアクションを実行するよう指示する一連のレンダリング インストラクション。

Google Chat アプリと Google Workspace アドオンで利用できます。

フィールド
action

Action

アクション

フィールド
navigations[]

Navigation

カードをプッシュ、ポップ、更新します。

デベロッパー プレビュー: Google Chat のアドオン

グルーピングに新しいカードを追加します(前方に移動します)。Chat アプリの場合は、アプリのホームでのみ使用できます。

Google Chat アプリと Google Workspace アドオンで利用できます。

navigations: {
  pushCard: CARD
}

上部のカードを新しいカードに交換します。Chat アプリの場合は、アプリのホームでのみ使用できます。

Google Chat アプリと Google Workspace アドオンで利用できます。

navigations: {
  updateCard: CARD
}

候補

ユーザーが入力できる候補値。これらの値は、ユーザーがテキスト入力フィールド内をクリックしたときに表示されます。ユーザーが入力すると、候補値が動的にフィルタされ、ユーザーが入力した内容に一致する値が表示されます。

たとえば、プログラミング言語のテキスト入力フィールドでは、Java、JavaScript、Python、C++ が候補として表示されます。ユーザーが Jav と入力すると、候補リストがフィルタされ、JavaJavaScript が表示されます。

候補値は、アプリが理解できる値をユーザーが入力できるようにするためのものです。JavaScript を参照する場合、javascript と入力するユーザーもいれば、java script と入力するユーザーもいます。JavaScript を提案することで、ユーザーがアプリを操作する方法を標準化できます。

指定した場合、TextInput.typeMULTIPLE_LINE に設定されている場合でも常に SINGLE_LINE になります。

Google Chat アプリと Google Workspace アドオンで利用できます。

JSON 表現
{
  "items": [
    {
      object (SuggestionItem)
    }
  ]
}
フィールド
items[]

object (SuggestionItem)

テキスト入力フィールドの予測入力候補に使用される候補のリスト。

SuggestionItem

ユーザーがテキスト入力フィールドに入力できる候補値の 1 つ。

Google Chat アプリと Google Workspace アドオンで利用できます。

JSON 表現
{

  // Union field content can be only one of the following:
  "text": string
  // End of list of possible types for union field content.
}
フィールド

共用体フィールド content

content は次のいずれかになります。

text

string

テキスト入力フィールドへの候補入力の値。これは、ユーザーが自分で入力するのと同じです。

検証

アタッチされているウィジェットの検証に必要なデータを表します。

Google Chat アプリと Google Workspace アドオンで利用できます。

JSON 表現
{
  "characterLimit": integer,
  "inputType": enum (InputType)
}
フィールド
characterLimit

integer

テキスト入力ウィジェットの文字数制限を指定します。これはテキスト入力にのみ使用され、他のウィジェットでは無視されます。

Google Chat アプリと Google Workspace アドオンで利用できます。

inputType

enum (InputType)

入力ウィジェットのタイプを指定します。

Google Chat アプリと Google Workspace アドオンで利用できます。

InputType

入力ウィジェットのタイプ。

列挙型
INPUT_TYPE_UNSPECIFIED 未指定のタイプ。使用しないでください。
TEXT すべての文字を使用できる通常のテキスト。
INTEGER 整数値。
FLOAT 浮動小数点値。
EMAIL メールアドレス。
EMOJI_PICKER システム提供の絵文字選択ツールから選択した絵文字。

SelectionInput

ユーザーが選択できる 1 つ以上の UI アイテムを作成するウィジェット。dropdown メニューと multiselect メニューのフォーム送信の検証のみをサポートします。Action.all_widgets_are_requiredtrue に設定されている場合、またはこのウィジェットが Action.required_widgets で指定されている場合、値が選択されていない限り、送信アクションはブロックされます。たとえば、プルダウン メニューやチェックボックスなどです。このウィジェットを使用すると、予測または列挙可能なデータを収集できます。Google Chat アプリの例については、選択可能な UI 要素を追加するをご覧ください。

Chat アプリは、ユーザーが選択または入力したアイテムの値を処理できます。フォーム入力の操作の詳細については、フォームデータを受け取るをご覧ください。

未定義または抽象的なデータをユーザーから収集するには、TextInput ウィジェットを使用します。

Google Chat アプリと Google Workspace アドオンで利用できます。

JSON 表現
{
  "name": string,
  "label": string,
  "type": enum (SelectionType),
  "items": [
    {
      object (SelectionItem)
    }
  ],
  "onChangeAction": {
    object (Action)
  },
  "multiSelectMaxSelectedItems": integer,
  "multiSelectMinQueryLength": integer,

  // Union field multi_select_data_source can be only one of the following:
  "externalDataSource": {
    object (Action)
  },
  "platformDataSource": {
    object (PlatformDataSource)
  }
  // End of list of possible types for union field multi_select_data_source.
}
フィールド
name

string

必須。フォーム入力イベント内の選択入力を識別する名前。

フォーム入力の操作の詳細については、フォームデータを受け取るをご覧ください。

label

string

ユーザー インターフェースの選択入力フィールドの上に表示されるテキスト。

アプリに必要な情報をユーザーが入力できるように、テキストを指定します。たとえば、ユーザーがプルダウン メニューから作業チケットの緊急度を選択する場合、ラベルは「緊急度」または「緊急度を選択」になります。

type

enum (SelectionType)

SelectionInput ウィジェットでユーザーに表示されるアイテムのタイプ。選択タイプは、さまざまなタイプのインタラクションをサポートしています。たとえば、ユーザーはチェックボックスを 1 つ以上選択できますが、プルダウン メニューから選択できるのは 1 つの値のみです。

items[]

object (SelectionItem)

選択可能なアイテムの配列。たとえば、ラジオボタンやチェックボックスの配列などです。最大 100 個のアイテムをサポートします。

onChangeAction

object (Action)

指定すると、選択内容が変更されたときにフォームが送信されます。指定しない場合は、フォームを送信する別のボタンを指定する必要があります。

フォーム入力の操作の詳細については、フォームデータを受け取るをご覧ください。

multiSelectMaxSelectedItems

integer

複数選択メニューの場合、ユーザーが選択できる項目の最大数。最小値は 1 個です。指定しない場合、デフォルトは 3 個になります。

multiSelectMinQueryLength

integer

複数選択メニューの場合、メニューが候補の選択項目を返す前にユーザーが入力するテキスト文字数。

設定されていない場合、マルチ選択メニューでは次のデフォルト値が使用されます。

  • メニューが SelectionInput アイテムの静的配列を使用する場合、デフォルトは 0 文字で、配列からアイテムがすぐに入力されます。
  • メニューが動的データソース(multi_select_data_source)を使用する場合、デフォルトは 3 文字で、データソースにクエリを実行して候補アイテムを返します。

共用体フィールド multi_select_data_source。複数選択メニューの場合は、選択項目を動的に入力するデータソース。

Google Chat アプリで利用可能で、Google Workspace アドオンでは利用できません。 multi_select_data_source は次のいずれかになります。

externalDataSource

object (Action)

リレーショナル データベースなどの外部データソース。

platformDataSource

object (PlatformDataSource)

Google Workspace のデータソース。

SelectionType

ユーザーが選択できる項目の形式。オプションによって、サポートされるインタラクションの種類が異なります。たとえば、ユーザーは複数のチェックボックスを選択できますが、プルダウン メニューから選択できるのは 1 つの項目のみです。

各選択入力は 1 種類の選択をサポートします。たとえば、チェックボックスとスイッチを組み合わせることはできません。

Google Chat アプリと Google Workspace アドオンで利用できます。

列挙型
CHECK_BOX チェックボックスのセット。ユーザーはチェックボックスを 1 つ以上選択できます。
RADIO_BUTTON ラジオボタンのセット。ユーザーはラジオボタンを 1 つ選択できます。
SWITCH スイッチのセット。ユーザーは 1 つ以上のスイッチをオンにできます。
DROPDOWN プルダウン メニュー。ユーザーはメニューから 1 つの項目を選択できます。
MULTI_SELECT

テキスト ボックスを含むメニュー。ユーザーは 1 つ以上のアイテムを入力して選択できます。Google Workspace アドオンの場合は、SelectionItem オブジェクトの静的配列を使用してアイテムに入力する必要があります。

Google Chat アプリの場合は、動的データソースを使用してアイテムを入力し、ユーザーがメニューに入力するときにアイテムを自動的に候補として表示することもできます。たとえば、ユーザーが Google Chat スペースの名前を入力すると、ウィジェットにスペースが自動的に候補として表示されます。複数選択メニューのアイテムを動的に入力するには、次のいずれかのデータソースを使用します。

  • Google Workspace データ: アイテムは、Google Workspace のデータ(Google Workspace ユーザーや Google Chat スペースなど)を使用して入力されます。
  • 外部データ: アイテムは Google Workspace の外部データソースから入力されます。

Chat アプリに複数選択メニューを実装する方法の例については、複数選択メニューを追加するをご覧ください。

Google Chat アプリと Google Workspace アドオンで利用できます。

SelectionItem

チェックボックスやスイッチなど、ユーザーが選択入力で選択できるアイテム。最大 100 個のアイテムをサポートします。

Google Chat アプリと Google Workspace アドオンで利用できます。

JSON 表現
{
  "text": string,
  "value": string,
  "selected": boolean,
  "startIconUri": string,
  "bottomText": string
}
フィールド
text

string

アイテムを識別または説明するテキスト。

value

string

この項目に関連付けられた値。クライアントは、これをフォーム入力値として使用する必要があります。

フォーム入力の操作の詳細については、フォームデータを受け取るをご覧ください。

selected

boolean

アイテムがデフォルトで選択されるかどうか。選択入力で 1 つの値のみが許可される場合(ラジオボタンやプルダウン メニューなど)、このフィールドは 1 つの項目にのみ設定します。

startIconUri

string

複数選択メニューの場合、アイテムの text フィールドの横に表示されるアイコンの URL。PNG ファイルと JPEG ファイルをサポートしています。HTTPS URL にする必要があります。例: https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png

bottomText

string

複数選択メニューの場合、アイテムの text フィールドの下に表示されるテキストの説明またはラベル。

PlatformDataSource

マルチ選択メニューを使用する SelectionInput ウィジェットの場合は、Google Workspace のデータソース。複数選択メニューの項目に入力するために使用します。

Google Chat アプリで利用可能で、Google Workspace アドオンでは利用できません。

JSON 表現
{

  // Union field data_source can be only one of the following:
  "commonDataSource": enum (CommonDataSource),
  "hostAppDataSource": {
    object (HostAppDataSourceMarkup)
  }
  // End of list of possible types for union field data_source.
}
フィールド
共用体フィールド data_source。データソース。data_source は次のいずれかになります。
commonDataSource

enum (CommonDataSource)

Google Workspace 組織内のユーザーなど、すべての Google Workspace アプリケーションで共有されるデータソース。

hostAppDataSource

object (HostAppDataSourceMarkup)

Google Workspace ホスト アプリケーションに固有のデータソース(Google Chat のスペースなど)。

このフィールドは Google API クライアント ライブラリをサポートしていますが、Cloud クライアント ライブラリでは使用できません。詳細については、クライアント ライブラリをインストールするをご覧ください。

CommonDataSource

すべての Google Workspace アプリケーションで共有されるデータソース。

Google Chat アプリで利用可能で、Google Workspace アドオンでは利用できません。

列挙型
UNKNOWN デフォルト値。使用しないでください。
USER Google Workspace ユーザー。ユーザーは、Google Workspace 組織内のユーザーのみを表示および選択できます。

HostAppDataSourceMarkup

マルチ選択メニューを使用する SelectionInput ウィジェットの場合は、Google Workspace アプリケーションのデータソース。データソースに、複数選択メニューの選択項目が入力されます。

Google Chat アプリで利用可能で、Google Workspace アドオンでは利用できません。

JSON 表現
{

  // Union field data_source can be only one of the following:
  "chatDataSource": {
    object (ChatClientDataSourceMarkup)
  }
  // End of list of possible types for union field data_source.
}
フィールド
共用体フィールド data_source。複数選択メニューの項目を入力する Google Workspace アプリケーション。 data_source は次のいずれかになります。
chatDataSource

object (ChatClientDataSourceMarkup)

Google Chat のデータソース。

ChatClientDataSourceMarkup

複数選択メニューを使用する SelectionInput ウィジェットの場合は、Google Chat のデータソース。データソースから、複数選択メニューの選択項目が入力されます。たとえば、ユーザーは自分がメンバーである Google Chat スペースを選択できます。

Google Chat アプリで利用可能で、Google Workspace アドオンでは利用できません。

JSON 表現
{

  // Union field source can be only one of the following:
  "spaceDataSource": {
    object (SpaceDataSource)
  }
  // End of list of possible types for union field source.
}
フィールド
共用体フィールド source。Google Chat データソース。source は次のいずれかになります。
spaceDataSource

object (SpaceDataSource)

ユーザーがメンバーになっている Google Chat スペース。

SpaceDataSource

マルチ選択メニューの選択項目として Google Chat スペースに入力するデータソース。ユーザーがメンバーであるスペースのみが入力されます。

Google Chat アプリで利用可能で、Google Workspace アドオンでは利用できません。

JSON 表現
{
  "defaultToCurrentSpace": boolean
}
フィールド
defaultToCurrentSpace

boolean

true に設定すると、マルチ選択メニューで現在の Google Chat スペースがデフォルトでアイテムとして選択されます。

DateTimePicker

ユーザーが日付、時刻、または日付と時刻の両方を入力できるようにします。フォーム送信の検証をサポートします。Action.all_widgets_are_requiredtrue に設定されている場合、またはこのウィジェットが Action.required_widgets で指定されている場合、値が選択されていない限り、送信アクションはブロックされます。Google Chat アプリの例については、ユーザーに日時を選択させるをご覧ください。

ユーザーはテキストを入力するか、選択ツールを使用して日付と時刻を選択できます。無効な日付または時刻を入力すると、選択ツールにエラーが表示され、情報を正しく入力するよう求められます。

Google Chat アプリと Google Workspace アドオンで利用できます。

JSON 表現
{
  "name": string,
  "label": string,
  "type": enum (DateTimePickerType),
  "valueMsEpoch": string,
  "timezoneOffsetDate": integer,
  "onChangeAction": {
    object (Action)
  }
}
フィールド
name

string

フォーム入力イベントで DateTimePicker を識別する名前。

フォーム入力の操作の詳細については、フォームデータを受け取るをご覧ください。

label

string

日付、時刻、日時を入力するようユーザーに促すテキスト。たとえば、ユーザーが予約をスケジュールする場合は、Appointment dateAppointment date and time などのラベルを使用します。

type

enum (DateTimePickerType)

ウィジェットが日付、時刻、日時を入力できるかどうか。

valueMsEpoch

string (int64 format)

ウィジェットに表示されるデフォルト値(Unix エポック時間からの経過時間(ミリ秒単位))。

選択ツールのタイプ(DateTimePickerType)に基づいて値を指定します。

  • DATE_AND_TIME : カレンダーの日時(UTC)。たとえば、2023 年 1 月 1 日午後 12 時(UTC)を表すには、1672574400000 を使用します。
  • DATE_ONLY : UTC 00:00:00 のカレンダーの日付。たとえば、2023 年 1 月 1 日を表すには、1672531200000 を使用します。
  • TIME_ONLY : UTC の時刻。たとえば、午後 12 時を示すには、43200000(または 12 * 60 * 60 * 1000)を使用します。
timezoneOffsetDate

integer

UTC からのタイムゾーン オフセットを分単位で表す数値。設定されている場合、valueMsEpoch は指定されたタイムゾーンで表示されます。未設定の場合、値はユーザーのタイムゾーン設定にデフォルト設定されます。

onChangeAction

object (Action)

ユーザーが DateTimePicker インターフェースで [保存] または [消去] をクリックするとトリガーされます。

DateTimePickerType

DateTimePicker ウィジェットの日時形式。ユーザーが日付、時刻、または日付と時刻の両方を入力できるかどうかを指定します。

Google Chat アプリと Google Workspace アドオンで利用できます。

列挙型
DATE_AND_TIME ユーザーが日時を入力します。
DATE_ONLY ユーザーが日付を入力します。
TIME_ONLY ユーザーが時刻を入力します。

分割線

この型にはフィールドがありません。

ウィジェット間の区切り線を水平線として表示します。Google Chat アプリの例については、ウィジェット間に水平方向の分割線を追加するをご覧ください。

Google Chat アプリと Google Workspace アドオンで利用できます。

たとえば、次の JSON は分割線を作成します。

"divider": {}

グリッド

アイテムのコレクションを含むグリッドを表示します。アイテムにはテキストまたは画像のみを含めることができます。レスポンシブな列の場合や、テキストや画像以外を含める場合は、Columns を使用します。Google Chat アプリの例については、アイテムのコレクションを含むグリッドを表示するをご覧ください。

グリッドは、任意の数の列とアイテムをサポートします。行数は、アイテム数を列数で割った値で決まります。アイテムが 10 個で列が 2 つのグリッドには、5 行あります。11 個のアイテムと 2 つの列のグリッドには 6 行あります。

Google Chat アプリと Google Workspace アドオンで利用できます。

たとえば、次の JSON は、1 つのアイテムを含む 2 列のグリッドを作成します。

"grid": {
  "title": "A fine collection of items",
  "columnCount": 2,
  "borderStyle": {
    "type": "STROKE",
    "cornerRadius": 4
  },
  "items": [
    {
      "image": {
        "imageUri": "https://www.example.com/image.png",
        "cropStyle": {
          "type": "SQUARE"
        },
        "borderStyle": {
          "type": "STROKE"
        }
      },
      "title": "An item",
      "textAlignment": "CENTER"
    }
  ],
  "onClick": {
    "openLink": {
      "url": "https://www.example.com"
    }
  }
}
JSON 表現
{
  "title": string,
  "items": [
    {
      object (GridItem)
    }
  ],
  "borderStyle": {
    object (BorderStyle)
  },
  "columnCount": integer,
  "onClick": {
    object (OnClick)
  }
}
フィールド
title

string

グリッド ヘッダーに表示されるテキスト。

items[]

object (GridItem)

グリッドに表示するアイテム。

borderStyle

object (BorderStyle)

各グリッドアイテムに適用する枠線スタイル。

columnCount

integer

グリッドに表示する列の数。このフィールドが指定されていない場合はデフォルト値が使用されます。デフォルト値は、グリッドが表示される場所(ダイアログとコンパニオン)によって異なります。

onClick

object (OnClick)

このコールバックは、個々のグリッドアイテムで再利用されますが、アイテムの ID とアイテムリスト内のインデックスがコールバックのパラメータに追加されます。

GridItem

グリッド レイアウト内のアイテムを表します。アイテムには、テキスト、画像、またはテキストと画像の両方を含めることができます。

Google Chat アプリと Google Workspace アドオンで利用できます。

JSON 表現
{
  "id": string,
  "image": {
    object (ImageComponent)
  },
  "title": string,
  "subtitle": string,
  "layout": enum (GridItemLayout)
}
フィールド
id

string

このグリッドアイテムのユーザー指定の識別子。この ID は、親グリッドの onClick コールバック パラメータで返されます。

image

object (ImageComponent)

グリッド項目に表示される画像。

title

string

グリッドアイテムのタイトル。

subtitle

string

グリッド アイテムのサブタイトル。

layout

enum (GridItemLayout)

グリッドアイテムに使用するレイアウト。

ImageComponent

画像を表します。

Google Chat アプリと Google Workspace アドオンで利用できます。

JSON 表現
{
  "imageUri": string,
  "altText": string,
  "cropStyle": {
    object (ImageCropStyle)
  },
  "borderStyle": {
    object (BorderStyle)
  }
}
フィールド
imageUri

string

画像の URL です。

altText

string

画像のユーザー補助ラベル。

cropStyle

object (ImageCropStyle)

画像に適用する切り抜きスタイル。

borderStyle

object (BorderStyle)

画像に適用するボーダー スタイル。

ImageCropStyle

画像に適用される切り抜きスタイルを表します。

Google Chat アプリと Google Workspace アドオンで利用できます。

たとえば、16:9 のアスペクト比を適用する方法は次のとおりです。

cropStyle {
 "type": "RECTANGLE_CUSTOM",
 "aspectRatio": 16/9
}
JSON 表現
{
  "type": enum (ImageCropType),
  "aspectRatio": number
}
フィールド
type

enum (ImageCropType)

切り抜きタイプ。

aspectRatio

number

クロップタイプが RECTANGLE_CUSTOM の場合に使用するアスペクト比。

たとえば、16:9 のアスペクト比を適用する方法は次のとおりです。

cropStyle {
 "type": "RECTANGLE_CUSTOM",
 "aspectRatio": 16/9
}

ImageCropType

画像に適用される切り抜きスタイルを表します。

Google Chat アプリと Google Workspace アドオンで利用できます。

列挙型
IMAGE_CROP_TYPE_UNSPECIFIED 使用しないでください。指定なし。
SQUARE デフォルト値。正方形の切り抜きを適用します。
CIRCLE 円形の切り抜きを適用します。
RECTANGLE_CUSTOM カスタム アスペクト比の長方形の切り抜きを適用します。aspectRatio を使用してカスタム アスペクト比を設定します。
RECTANGLE_4_3 アスペクト比 4:3 の長方形の切り抜きを適用します。

BorderStyle

カードやウィジェットの枠線のスタイル オプション(枠線の種類や色など)。

Google Chat アプリと Google Workspace アドオンで利用できます。

JSON 表現
{
  "type": enum (BorderType),
  "strokeColor": {
    object (Color)
  },
  "cornerRadius": integer
}
フィールド
type

enum (BorderType)

枠線の種類。

strokeColor

object (Color)

タイプが BORDER_TYPE_STROKE の場合に使用する色。

ストロークの色を設定するには、redgreenblue の各フィールドに値を指定します。値は、RGB 色値に基づく 0 ~ 1 の浮動小数点数にする必要があります。0(0/255)は色なしを表し、1(255/255)は色の最大彩度を表します。

たとえば、次のコードは、最大強度の赤色に設定します。

"color": {
   "red": 1,
   "green": 0,
   "blue": 0,
}

ストロークの色には alpha フィールドを使用できません。指定した場合、このフィールドは無視されます。

cornerRadius

integer

境界の角の半径。

BorderType

ウィジェットに適用される境界タイプを表します。

Google Chat アプリと Google Workspace アドオンで利用できます。

列挙型
BORDER_TYPE_UNSPECIFIED 使用しないでください。指定なし。
NO_BORDER デフォルト値。枠線なし。
STROKE 概要。

GridItemLayout

グリッドアイテムに使用できるさまざまなレイアウト オプションを表します。

Google Chat アプリと Google Workspace アドオンで利用できます。

列挙型
GRID_ITEM_LAYOUT_UNSPECIFIED 使用しないでください。指定なし。
TEXT_BELOW タイトルとサブタイトルは、グリッド アイテムの画像の下に表示されます。
TEXT_ABOVE タイトルとサブタイトルは、グリッドアイテムの画像の上に表示されます。

Columns

Columns ウィジェットは、カードまたはダイアログに最大 2 つの列を表示します。各列にウィジェットを追加できます。ウィジェットは指定された順序で表示されます。Google Chat アプリの例については、カードとダイアログを列に表示するをご覧ください。

各列の高さは、高さの大きい列によって決まります。たとえば、最初の列が 2 番目の列よりも高い場合、両方の列のサイズは最初の列のサイズになります。各列に含めるウィジェットの数は異なるため、行を定義したり、列間でウィジェットを配置したりすることはできません。

列は並べて表示されます。各列の幅は HorizontalSizeStyle フィールドを使用してカスタマイズできます。ユーザーの画面幅が狭すぎる場合、2 番目の列は 1 番目の列の下に折り返されます。

  • ウェブでは、画面の幅が 480 ピクセル以下の場合、2 番目の列が折り返されます。
  • iOS デバイスでは、画面幅が 300 pt 未満の場合、2 列目が折り返されます。
  • Android デバイスでは、画面幅が 320 dp 以下の場合、2 列目が折り返されます。

2 つ以上の列を含める場合や行を使用する場合は、Grid ウィジェットを使用します。

Google Chat アプリと Google Workspace アドオンで利用できます。列をサポートするアドオン UI には、次のようなものがあります。

  • メールの下書きからアドオンを開いたときに表示されるダイアログ。
  • Google カレンダーの予定の [添付ファイルを追加] メニューからアドオンを開いたときに表示されるダイアログ。
JSON 表現
{
  "columnItems": [
    {
      object (Column)
    }
  ]
}
フィールド
columnItems[]

object (Column)

列の配列。カードまたはダイアログには最大 2 つの列を含めることができます。

Column

列。

Google Workspace アドオンと Chat アプリ

JSON 表現
{
  "horizontalSizeStyle": enum (HorizontalSizeStyle),
  "horizontalAlignment": enum (HorizontalAlignment),
  "verticalAlignment": enum (VerticalAlignment),
  "widgets": [
    {
      object (Widgets)
    }
  ]
}
フィールド
horizontalSizeStyle

enum (HorizontalSizeStyle)

列がカードの幅をどのように埋めるかを指定します。

horizontalAlignment

enum (HorizontalAlignment)

ウィジェットを列の左、右、中央のいずれに配置するかを指定します。

verticalAlignment

enum (VerticalAlignment)

ウィジェットを列の上部、下部、中央のいずれに配置するかを指定します。

widgets[]

object (Widgets)

列に含まれるウィジェットの配列。ウィジェットは、指定された順序で表示されます。

HorizontalSizeStyle

列がカードの幅をどのように埋めるかを指定します。各列の幅は、HorizontalSizeStyle と列内のウィジェットの幅の両方に依存します。

Google Workspace アドオンと Chat アプリ

列挙型
HORIZONTAL_SIZE_STYLE_UNSPECIFIED 使用しないでください。指定なし。
FILL_AVAILABLE_SPACE デフォルト値。列は、カードの幅の 70% まで、利用可能なスペースを埋めます。両方の列が FILL_AVAILABLE_SPACE に設定されている場合、各列はスペースの 50% を占有します。
FILL_MINIMUM_SPACE 列は、可能な限り最小限のスペースを占有し、カードの幅の 30% 以下に収まるようにします。

HorizontalAlignment

ウィジェットを列の左、右、中央のいずれに配置するかを指定します。

Google Chat アプリで利用可能で、Google Workspace アドオンでは利用できません。

列挙型
HORIZONTAL_ALIGNMENT_UNSPECIFIED 使用しないでください。指定なし。
START デフォルト値。ウィジェットを列の先頭の位置に配置します。左から右のレイアウトの場合は左に揃えます。右から左のレイアウトの場合は、右揃えになります。
CENTER ウィジェットを列の中央に配置します。
END ウィジェットを列の末尾の位置に配置します。左から右のレイアウトでは、ウィジェットを右揃えにします。右から左のレイアウトの場合、ウィジェットを左側に配置します。

VerticalAlignment

ウィジェットを列の上部、下部、中央のいずれに配置するかを指定します。

Google Workspace アドオンと Chat アプリ

列挙型
VERTICAL_ALIGNMENT_UNSPECIFIED 使用しないでください。指定なし。
CENTER デフォルト値。ウィジェットを列の中央に配置します。
TOP ウィジェットを列の上部に配置します。
BOTTOM ウィジェットを列の下部に配置します。

ウィジェット

列に含めることができる、サポートされているウィジェット。

Google Workspace アドオンと Chat アプリ

JSON 表現
{

  // Union field data can be only one of the following:
  "textParagraph": {
    object (TextParagraph)
  },
  "image": {
    object (Image)
  },
  "decoratedText": {
    object (DecoratedText)
  },
  "buttonList": {
    object (ButtonList)
  },
  "textInput": {
    object (TextInput)
  },
  "selectionInput": {
    object (SelectionInput)
  },
  "dateTimePicker": {
    object (DateTimePicker)
  },
  "chipList": {
    object (ChipList)
  }
  // End of list of possible types for union field data.
}
フィールド

共用体フィールド data

data は次のいずれかになります。

textParagraph

object (TextParagraph)

TextParagraph ウィジェットです。

image

object (Image)

Image ウィジェットです。

decoratedText

object (DecoratedText)

DecoratedText ウィジェットです。

buttonList

object (ButtonList)

ButtonList ウィジェットです。

textInput

object (TextInput)

TextInput ウィジェットです。

selectionInput

object (SelectionInput)

SelectionInput ウィジェットです。

dateTimePicker

object (DateTimePicker)

DateTimePicker ウィジェットです。

chipList

object (ChipList)

ChipList ウィジェットです。

ChipList

横方向に配置されたチップのリスト。水平方向にスクロールするか、次の行に折り返すことができます。

Google Chat アプリと Google Workspace アドオンで利用できます。

JSON 表現
{
  "layout": enum (Layout),
  "chips": [
    {
      object (Chip)
    }
  ]
}
フィールド
layout

enum (Layout)

指定されたチップリスト レイアウト。

chips[]

object (Chip)

チップの配列。

レイアウト

チップリストのレイアウト。

列挙型
LAYOUT_UNSPECIFIED 使用しないでください。指定なし。
WRAPPED デフォルト値。水平方向のスペースが十分でない場合、チップリストは次の行に折り返されます。
HORIZONTAL_SCROLLABLE チップが使用可能なスペースに収まらない場合は、水平方向にスクロールします。

チップ

ユーザーがクリックできるテキスト、アイコン、テキストとアイコンのチップ。

Google Chat アプリと Google Workspace アドオンで利用できます。

JSON 表現
{
  "icon": {
    object (Icon)
  },
  "label": string,
  "onClick": {
    object (OnClick)
  },
  "enabled": boolean,
  "disabled": boolean,
  "altText": string
}
フィールド
icon

object (Icon)

アイコン画像。icontext の両方を設定すると、テキストの前にアイコンが表示されます。

label

string

チップ内に表示されるテキスト。

onClick

object (OnClick)

省略可。ユーザーがチップをクリックしたときに実行するアクション(ハイパーリンクを開く、カスタム関数を実行するなど)。

enabled
(deprecated)

boolean

チップがアクティブな状態にあり、ユーザー操作に応答するかどうか。デフォルトは true です。非推奨です。代わりに disabled を使用してください。

disabled

boolean

チップが非アクティブな状態にあり、ユーザーの操作を無視するかどうか。デフォルトは false です。

altText

string

ユーザー補助機能で使用される代替テキスト。

チップの機能についてユーザーに説明する説明テキストを設定します。たとえば、チップがハイパーリンクを開く場合は、「新しいブラウザタブを開き、Google Chat デベロッパー ドキュメント(https://developers.google.com/workspace/chat")に移動します」と記述します。

カルーセル(スライダー)は、ウィジェットのリストをスライドショー形式で回転して表示します。ボタンを使用して、前のウィジェットまたは次のウィジェットに移動できます。

たとえば、次の JSON は、3 つのテキスト パラグラフ ウィジェットを含むカルーセルを表しています。

{
  "carouselCards": [
    {
      "widgets": [
        {
          "textParagraph": {
            "text": "First text paragraph in carousel",
          }
        }
      ]
    },
    {
      "widgets": [
        {
          "textParagraph": {
            "text": "Second text paragraph in carousel",
          }
        }
      ]
    },
    {
      "widgets": [
        {
          "textParagraph": {
            "text": "Third text paragraph in carousel",
          }
        }
      ]
    }
  ]
}

Google Chat アプリで利用可能で、Google Workspace アドオンでは利用できません。

JSON 表現
{
  "carouselCards": [
    {
      object (CarouselCard)
    }
  ]
}
フィールド
carouselCards[]

object (CarouselCard)

カルーセルに含まれるカードのリスト。

CarouselCard

カルーセル アイテムとして表示できるカード。 Google Chat アプリで利用可能で、Google Workspace アドオンでは利用できません。

JSON 表現
{
  "widgets": [
    {
      object (NestedWidget)
    }
  ],
  "footerWidgets": [
    {
      object (NestedWidget)
    }
  ]
}
フィールド
widgets[]

object (NestedWidget)

カルーセル カードに表示されるウィジェットのリスト。ウィジェットは、指定された順序で表示されます。

footerWidgets[]

object (NestedWidget)

カルーセル カードの下部に表示されるウィジェットのリスト。ウィジェットは、指定された順序で表示されます。

NestedWidget

CarouselCard などのコンテナ レイアウトに表示できるウィジェットのリスト。 Google Chat アプリで利用可能で、Google Workspace アドオンでは利用できません。

JSON 表現
{

  // Union field data can be only one of the following:
  "textParagraph": {
    object (TextParagraph)
  },
  "buttonList": {
    object (ButtonList)
  },
  "image": {
    object (Image)
  }
  // End of list of possible types for union field data.
}
フィールド

共用体フィールド data

data は次のいずれかになります。

textParagraph

object (TextParagraph)

テキスト段落ウィジェット。

buttonList

object (ButtonList)

ボタンリスト ウィジェット。

image

object (Image)

画像ウィジェット。

CollapseControl

展開と閉じのコントロールを表します。

Google Chat アプリと Google Workspace アドオンで利用できます。

JSON 表現
{
  "horizontalAlignment": enum (HorizontalAlignment),
  "expandButton": {
    object (Button)
  },
  "collapseButton": {
    object (Button)
  }
}
フィールド
horizontalAlignment

enum (HorizontalAlignment)

展開ボタンと閉じるボタンの水平方向の配置。

expandButton

object (Button)

省略可。セクションを開くカスタマイズ可能なボタンを定義します。expandButton フィールドと collapseButton フィールドの両方を設定する必要があります。フィールドセットが適用されないのは 1 つだけです。このフィールドが設定されていない場合、デフォルトのボタンが使用されます。

collapseButton

object (Button)

省略可。セクションを閉じるカスタマイズ可能なボタンを定義します。expandButton フィールドと collapseButton フィールドの両方を設定する必要があります。フィールドセットが適用されないのは 1 つだけです。このフィールドが設定されていない場合、デフォルトのボタンが使用されます。

DividerStyle

カードの分割線のスタイル。現在は、カード セクション間の区切り線にのみ使用されます。

Google Chat アプリと Google Workspace アドオンで利用できます。

列挙型
DIVIDER_STYLE_UNSPECIFIED 使用しないでください。指定なし。
SOLID_DIVIDER デフォルトのオプション。実線の分割線をレンダリングします。
NO_DIVIDER 設定すると、分割線はレンダリングされません。このスタイルでは、分割線がレイアウトから完全に削除されます。結果は、区切り文字をまったく追加しない場合と同じです。

CardAction

カードアクションは、カードに関連付けられたアクションです。たとえば、請求書カードには、請求書の削除、請求書のメール送信、請求書のブラウザでの開くなどのアクションが含まれます。

Google Workspace アドオンで利用可能で、Google Chat アプリでは利用できません。

JSON 表現
{
  "actionLabel": string,
  "onClick": {
    object (OnClick)
  }
}
フィールド
actionLabel

string

アクション メニュー項目として表示されるラベル。

onClick

object (OnClick)

このアクション アイテムの onClick アクション。

CardFixedFooter

カードの下部に表示される固定(スティッキー)フッター。

primaryButton または secondaryButton を指定せずに fixedFooter を設定すると、エラーが発生します。

Chat アプリでは、ダイアログで固定フッターを使用できますが、カード メッセージでは使用できません。Google Chat アプリの例については、永続的なフッターを追加するをご覧ください。

Google Chat アプリと Google Workspace アドオンで利用できます。

JSON 表現
{
  "primaryButton": {
    object (Button)
  },
  "secondaryButton": {
    object (Button)
  }
}
フィールド
primaryButton

object (Button)

固定フッターのメインボタン。ボタンは、テキストと色が設定されたテキストボタンである必要があります。

secondaryButton

object (Button)

固定フッターのセカンダリ ボタン。ボタンは、テキストと色が設定されたテキストボタンである必要があります。secondaryButton が設定されている場合は、primaryButton も設定する必要があります。

DisplayStyle

Google Workspace アドオンでは、カードの表示方法を決定します。

Google Workspace アドオンで利用可能で、Google Chat アプリでは利用できません。

列挙型
DISPLAY_STYLE_UNSPECIFIED 使用しないでください。指定なし。
PEEK カードのヘッダーはサイドバーの下部に表示され、グルーピングの現在の一番上のカードの一部を覆います。ヘッダーをクリックすると、カードがカード スタックにポップアップ表示されます。カードにヘッダーがない場合は、生成されたヘッダーが代わりに使用されます。
REPLACE デフォルト値。カードは、カード グルーピングの上部にあるカードのビューに置き換えて表示されます。