Package google.apps.card.v1

索引

操作

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

フィールド
function

string

含まれている要素がクリックされるか、またはそれが有効になったときに呼び出すカスタム関数。

使用例については、インタラクティブ カードを作成するをご覧ください。
parameters[]

ActionParameter

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

LoadIndicator

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

bool

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

true の場合、アクションがトリガーされた後もフォームの値を保持します。操作の処理中にユーザーが変更を加える場合は、LoadIndicator を NONE に設定します。Chat アプリのカード メッセージの場合は、アクションの ResponseType を UPDATE_MESSAGE に設定し、アクションを含むカードと同じ card_id を使用する必要があります。

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

Interaction

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

カード メッセージのボタンのクリックなど、ユーザーとのやり取りに応答する方法。

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

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

指定すると、読み込みインジケーターは表示されません。

Chat アプリではサポートされていますが、Google Workspace アドオンではサポートされていません。アドオンに指定すると、カード全体が削除され、クライアントには何も表示されません。

アクション パラメータ

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

詳細については、CommonEventObject をご覧ください。

フィールド
key

string

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

string

パラメータの値。

操作

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

カード メッセージのボタンのクリックなど、ユーザーとのやり取りに応答する方法。

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

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

指定すると、読み込みインジケーターは表示されません。

Chat アプリではサポートされていますが、Google Workspace アドオンではサポートされていません。アドオンに指定すると、カード全体が削除され、クライアントには何も表示されません。

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

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

カード メッセージのボタンクリックに応答するチャットアプリのみサポートされています。

Google Workspace アドオンではサポートされていません。アドオンに指定すると、カード全体が削除され、クライアントには何も表示されません。

LoadIndicator

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

列挙型
SPINNER コンテンツが読み込み中であることを示すスピナーが表示されます。
NONE 何も表示されません。

枠線のスタイル

カードやウィジェットの枠線のスタイル（枠線の種類や色など）を設定します。

フィールド
type

BorderType

枠線の種類。
strokeColor

Color

型が BORDER_TYPE_STROKE の場合に使用する色。
cornerRadius

int32

枠線の角の半径。

枠線の種類

ウィジェットに適用される枠線の種類を表します。

列挙型
BORDER_TYPE_UNSPECIFIED 値が指定されていません。
NO_BORDER デフォルト値。枠線なし。
STROKE 概要。

ボタン

ユーザーがクリックできるテキスト、アイコン、またはテキスト + アイコンボタン。

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

フィールド
text

string

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

Icon

アイコンの画像。icon と text を両方とも設定した場合は、テキストの前にアイコンが表示されます。
color

Color

設定すると、ボタンは無地の背景色で塗りつぶされ、フォントの色は背景色とのコントラストが維持されます。たとえば、背景を青色に設定すると、テキストが白になります。

未設定の場合、画像の背景は白で、フォントの色は青色になります。

赤、緑、青の場合、各フィールドの値は 0 から 255 を 255 で割った数値（153/255）と 0 から 1 の間の値（0.6）で表現できる float 数値です。0 は色がないことを表し、1 または 255/255 は RGB スケールでその色が完全に存在することを表します。

必要に応じて、アルファを設定し、次の式を使用して透明度レベルを設定します。

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

アルファの場合、値 1 は単色に対応し、値 0 は完全に透明な色に対応します。

たとえば、次の色は半透明の赤を表します。

"color": {
   "red": 1,
   "green": 0,
   "blue": 0,
   "alpha": 0.5
}
onClick

OnClick

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

bool

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

string

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

ボタンが機能するためのわかりやすいテキストを設定します。たとえば、ボタンをクリックしてハイパーリンクを開くと、「新しいブラウザタブを開き、Google Chat のデベロッパー向けドキュメント（https://developers.google.com/chat）」に移動します。

ボタンリスト

水平方向に配置されたボタンのリスト。

フィールド
buttons[]

Button

ボタンの配列。

カード

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

Google Chat のカードは、次の場所に表示されます。

  • スタンドアロンのメッセージ。
  • テキスト メッセージのすぐ下にあるテキスト メッセージ。
  • ダイアログとして。

次の 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",
                            }
                          ],
                        }
                      }
                    },
                  ],
                }
              },
            ],
          },
        ],
      },
    }
  ],
}
フィールド
header

CardHeader

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

Section

ウィジェットのコレクションが含まれます。各セクションには、オプションのヘッダーがあります。各セクションは、分割線で視覚的に分離されています。
cardActions[]

CardAction

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

Chat アプリのカードにはツールバーがないため、cardActions[] はチャットアプリではサポートされていません。

次の 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

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

チャットアプリはカード ナビゲーションをサポートしていないため、このフィールドは無視されます。
fixedFooter

CardFixedFooter

カードの下部に表示される固定フッター。

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

Google Workspace アドオンとチャットアプリでサポートされています。Chat アプリでは、ダイアログで固定フッターを使用できますが、カード メッセージは使用できません。
displayStyle

DisplayStyle

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

Chat アプリはサポート対象外です。
peekCardHeader

CardHeader

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

Chat アプリはサポート対象外です。

カード操作

カード アクションとは、カードに関連付けられているアクションです。たとえば、請求書カードに請求書の削除、メールの請求書の発行、ブラウザでの請求書のオープンといった操作が含まれることがあります。

Chat アプリはサポート対象外です。

フィールド
actionLabel

string

操作メニュー項目として表示されるラベル。
onClick

OnClick

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

CardFixedFooter

カードの下部に表示される永続的な（固定）フッター。

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

Google Workspace アドオンとチャットアプリでサポートされています。Chat アプリでは、ダイアログで固定フッターを使用できますが、カード メッセージは使用できません。

フィールド
primaryButton

Button

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

Button

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

CardHeader

カードヘッダーを表します。

フィールド
title

string

必須。カードヘッダーのタイトル。ヘッダーの高さは固定されています。タイトルとサブタイトルの両方が指定されている場合、それぞれが 1 行になります。タイトルのみが指定されている場合は、両方の行を取得します。
subtitle

string

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

ImageType

画像の切り抜きに使用する形状。
imageUrl

string

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

string

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

表示スタイル

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

Chat アプリはサポート対象外です。

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

セクション

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

フィールド
header

string

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

Widget

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

bool

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

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

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

int32

セクションが折りたたまれても引き続き表示される折りたたみできないウィジェットの数。

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

表示項目

Columns ウィジェットには、カード メッセージまたはダイアログに最大 2 つの列が表示されます。各列にウィジェットを追加できます。ウィジェットは指定した順序で表示されます。

各列の高さは縦長の列によって決まります。たとえば、1 列目が 2 列目よりも高い場合、2 列目の高さは 1 列目と同じになります。各列に含めることができるウィジェットの数は異なるため、行を定義したり、列間でウィジェットを調整したりすることはできません。

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

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

3 つ以上の列を追加する、または行を使用するには、Grid ウィジェットを使用します。

Chat アプリではサポートされていますが、Google Workspace アドオンではサポートされていません。

フィールド
columnItems[]

Column

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

列

列。

フィールド
horizontalSizeStyle

HorizontalSizeStyle

列がカードの幅いっぱいになる方法を指定します。
horizontalAlignment

HorizontalAlignment

ウィジェットを列の左、右、中央に揃えるかどうかを指定します。
verticalAlignment

VerticalAlignment

ウィジェットを列の上、下、または中央に揃えるかどうかを指定します。
widgets[]

Widgets

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

横サイズ

列がカードの幅いっぱいになる方法を指定します。各列の幅は、HorizontalSizeStyle と列内のウィジェットの幅の両方によって決まります。

列挙型
HORIZONTAL_SIZE_STYLE_UNSPECIFIED 指定なし。使用しないでください。
FILL_AVAILABLE_SPACE デフォルト値。列が、カードの幅（カードの幅の 70%）まで表示されます。両方の列が FILL_AVAILABLE_SPACE に設定されている場合、各列がスペースの 50% を埋めています。
FILL_MINIMUM_SPACE 列は可能な限り少ないスペースを埋め、カードの幅の 30% を超えないようにします。

垂直方向の配置

ウィジェットを列の上、下、または中央に揃えるかどうかを指定します。

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

ウィジェット

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

フィールド

共用体フィールド data。

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

TextParagraph

TextParagraphウィジェットです。
image

Image

Imageウィジェットです。
decoratedText

DecoratedText

DecoratedTextウィジェットです。
buttonList

ButtonList

ButtonListウィジェットです。
textInput

TextInput

TextInputウィジェットです。
selectionInput

SelectionInput

SelectionInputウィジェットです。
dateTimePicker

DateTimePicker

DateTimePickerウィジェットです。

DateTimePicker

ユーザーが日付、時刻、またはその両方を入力できるようにします。

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

フィールド
name

string

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

フォーム入力の操作について詳しくは、フォームデータを受信するをご覧ください。
label

string

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

DateTimePickerType

ウィジェットが日付、時刻、日付と時刻の入力をサポートしているかどうか。
valueMsEpoch

int64

ウィジェットに表示されるデフォルト値（Unix エポック時刻からのミリ秒数）。

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

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

int32

UTC のタイムゾーン オフセットを表す数値（分単位）。設定した場合、value_ms_epoch は指定されたタイムゾーンで表示されます。未設定のままにした場合、この値はユーザーのタイムゾーン設定になります。
onChangeAction

Action

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

DateTimePickerType

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

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

装飾テキスト

テキストの上または下のラベル、テキストの前のアイコン、選択ウィジェット、テキストの後ろのボタンなど、オプション装飾を表示するテキストのウィジェット。

フィールド
icon
(deprecated)

Icon

startIcon を優先して非推奨になりました。
startIcon

Icon

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

string

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

string

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

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

bool

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

text にのみ適用されます。topLabel と bottomLabel には適用されません。
bottomLabel

string

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

OnClick

ユーザーが topLabel または bottomLabel をクリックすると、このアクションがトリガーされます。
共用体フィールド control。decoratedText ウィジェットでテキストの右側に表示されるボタン、スイッチ、チェックボックス、画像。control は次のいずれかになります。
button

Button

アクションをトリガーするためにクリックできるボタン。
switchControl

SwitchControl

スイッチ ウィジェットをクリックすると、状態が変更されて操作がトリガーされます。
endIcon

Icon

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

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

SwitchControl

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

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

フィールド
name

string

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

フォーム入力の操作について詳しくは、フォームデータを受信するをご覧ください。
value

string

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

フォーム入力の操作について詳しくは、フォームデータを受信するをご覧ください。
selected

bool

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

Action

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

ControlType

スイッチがユーザー インターフェースに表示される方法。

コントロール タイプ

スイッチがユーザー インターフェースに表示される方法。

列挙型
SWITCH 切り替えスイッチ。
CHECKBOX CHECK_BOX を優先して非推奨になりました。
CHECK_BOX チェックボックス。

分割線

ウィジェットを分割するための水平線を表示します。

次の JSON は、分割線を作成します。

"divider": {}

GetAutocompletionResponse

オートコンプリート コンテナの取得に対するレスポンス。テキスト フィールドのオートコンプリート アイテムを表示するために必要な要素が含まれます。例:

{
  "autoComplete": {
    "items": [
      {
        "text": "C++"
      },
      {
        "text": "Java"
      },
      {
        "text": "JavaScript"
      },
      {
        "text": "Python"
      }
    ]
  }
}
フィールド
autoComplete

Suggestions
schema

string

これは、構文チェックのマークアップに含まれる NoOps スキーマ フィールドです。

グリッド

アイテムのコレクションを含むグリッドを表示します。アイテムにはテキストまたは画像のみを含めることができます。

グリッドは、任意の数の列とアイテムをサポートしています。行数は、アイテムを列で割って算出されます。アイテムが 10 個で列が 2 個のグリッドには 5 行あります。11 項目と 2 列のグリッドは 6 行です。

レスポンシブ列を使用する場合、またはテキストや画像以外の列を含める場合は、Columns を使用します。

次の JSON は、単一のアイテムを含む 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"
    }
  }
}
フィールド
title

string

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

GridItem

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

BorderStyle

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

int32

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

OnClick

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

グリッド アイテム

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

フィールド
id

string

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

ImageComponent

グリッド アイテムに表示される画像。
title

string

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

string

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

GridItemLayout

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

グリッド アイテムのレイアウト

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

列挙型
GRID_ITEM_LAYOUT_UNSPECIFIED レイアウトが指定されていません。
TEXT_BELOW タイトルとサブタイトルはグリッド アイテムの画像の下に表示されます。
TEXT_ABOVE タイトルとサブタイトルは、グリッド アイテムの画像の上に表示されます。

アイコン

カードのウィジェットに表示されるアイコン。

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

フィールド
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/chat などです。

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

ImageType

画像に適用された切り抜きスタイル。場合によっては、CIRCLE 切り抜きを適用すると、画像が組み込みのアイコンよりも大きくなることがあります。
共用体フィールド icons。カードのウィジェットに表示されるアイコン。icons は次のいずれかになります。
knownIcon

string

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

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

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

string

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

例:

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

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

画像

URL で指定され、onClick アクションを伴うことができる画像。

フィールド
imageUrl

string

画像をホストする https URL。

例:

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

OnClick

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

string

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

ImageComponent

画像を表します。

フィールド
imageUri

string

画像の URL。
altText

string

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

ImageCropStyle

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

BorderStyle

画像に適用する枠線のスタイル。

画像切り抜きスタイル

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

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

cropStyle {
 "type": "RECTANGLE_CUSTOM",
 "aspectRatio": 16/9
}
フィールド
type

ImageCropType

切り抜きタイプ。
aspectRatio

double

切り抜きタイプが RECTANGLE_CUSTOM の場合に使用するアスペクト比。

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

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

ImageCropType

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

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

リンク プレビュー

ホストアプリにリンク プレビュー カードとスマートチップを表示するカード アクション。

フィールド
previewCard

Card

サードパーティまたは Google 以外のサービスからのリンクに関する情報を表示するカード。
title

string

リンクのプレビューでスマートチップに表示されるタイトル。未設定の場合、スマートチップは preview_card のヘッダーを表示します。

カードスタックを操作するカード アクション。例:

1）スタックに新しいカードを追加します（先に進みます）。

 navigations : {
    pushCard : CARD
  }

2）スタックの上のカードを更新します（インプレース更新）。

  navigations : {
    popCard : true,
  }, {
    pushCard : CARD
  }

3）更新せずに 1 ステップ戻ります。

  navigations : {
    popCard : true,
  }

4）複数のステップに戻り、そのカードを更新します。

  navigations : {
    popCard : true,
  }, ... {
    pushCard : CARD
  }

5）定義した CARD_NAME に対する複数のステップに戻ります。

  navigations : {
    popToCardName : CARD_NAME,
  }, {
    pushCard : CARD
  }

6）ルートに戻ってカードを更新します。

  navigations : {
    popToRoot : true
  }, {
    pushCard : CARD
  }

7）指定したカードにポップし、そのカードもポップします。

navigations : { popToCardName : CARD_NAME }, { popCard : true, }

8）一番上のカードを新しいカードに交換します。

  navigations : {
    updateCard : CARD
  }
フィールド

共用体フィールド navigate_action。

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

bool

ルートカード以外のすべてのカードがポップアウトされる。
pop

bool

カードスタックから 1 枚のカードがポップアウトされる。
popToCard

string

カードスタックは、指定されたカード名が指定されたカードより上にあるすべてのカードを表示します。
pushCard

Card

カードスタックは、カードをカードスタックにプッシュします。
updateCard

Card

カードスタックは、一番上のカードを新しいカードで更新し、入力済みのフォームのフィールドの値を保持します。非等価のフィールドの場合、値は破棄されます。

通知

ホストアプリに通知を表示するカード アクション。

フィールド
text

string

通知に表示する書式なしテキスト。HTML タグは使用しません。

オンクリック

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

フィールド

共用体フィールド data。

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

Action

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

Action

アクションでリンクを開く必要がある場合は、アドオンによってこのアクションがトリガーされます。これは、リンクを取得するためにサーバーと通信する必要があるという点で、上記の open_link とは異なります。そのため、オープンリンクのアクションの応答が返される前に、ウェブ クライアントが行う準備作業が必要になります。
card

Card

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

Google Workspace アドオンでサポートされていますが、Chat アプリではサポートされていません。

閉じる

OnClick アクションによって開かれたリンクを閉じたときにクライアントが行う操作。

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

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

Google Workspace アドオンでサポートされていますが、Chat アプリではサポートされていません。

列挙型
NOTHING デフォルト値。カードが再読み込みされることはありません。
RELOAD

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

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

OpenAs

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

Google Workspace アドオンでサポートされていますが、Chat アプリではサポートされていません。

列挙型
FULL_SIZE リンクはフルサイズ ウィンドウとして表示されます（フレームがクライアントによって使用されている場合）。
OVERLAY このリンクは、ポップアップなどのオーバーレイとして開きます。

レンダリング アクション

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

フィールド
action

Action
hostAppAction

HostAppActionMarkup

個々のホストアプリによって処理されるアクション。
schema

string

これは、構文チェックのマークアップに含まれる NoOps スキーマ フィールドです。

操作

フィールド
navigations[]

Navigation

表示されたカードのプッシュ、ポップ、更新
notification

Notification

エンドユーザーに通知を表示する
linkPreview

LinkPreview

エンドユーザーにリンク プレビューを表示します。

SelectionInput

ユーザーが選択できる UI アイテムを 1 つ以上作成するウィジェット。（プルダウン メニュー、チェックボックスなど）。このウィジェットを使用して、予測または列挙できるデータを収集できます。

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

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

フィールド
name

string

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

フォーム入力の操作について詳しくは、フォームデータを受信するをご覧ください。
label

string

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

アプリに必要な情報を入力するためのテキストを指定します。たとえば、ユーザーがプルダウン メニューから仕事用チケットの緊急度を選択した場合、[緊急度] や [緊急度を選択] ラベルが表示されます。
type

SelectionType

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

SelectionItem

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

Action

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

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

SelectionItem（選択アイテム）

チェックボックスやスイッチなど、ユーザーが選択入力で選択できる項目。

フィールド
text

string

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

string

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

フォーム入力の操作について詳しくは、フォームデータを受信するをご覧ください。
selected

bool

true の場合、複数のアイテムが選択されています。ラジオボタンとプルダウン メニューに複数のアイテムが選択されている場合は、最初に選択したアイテムが取得され、それ以降のアイテムは無視されます。

SelectionType（選択タイプ）

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

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

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

フォームの送信

フォーム実行に対するレスポンス。回答には、カードが実行すべきアクションやアドオン ホストアプリで実行する必要があるアクション、およびカードの状態が変更されているオートコンプリート コンテナが含まれます。例:

{
  "renderActions": {
    "action": {
      "notification": {
        "text": "Email address is added: salam.heba@example.com"
      }
    },
    "hostAppAction": {
      "gmailAction": {
        "openCreatedDraftAction": {
          "draftId": "msg-a:r-79766936926021702",
          "threadServerPermId": "thread-f:15700999851086004"
        }
      }
    }
  }
}
フィールド
renderActions

RenderActions

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

bool

カードの状態が変更され、既存のカードのデータが古くなっているかどうか。
schema

string

これは no-op スキーマ フィールドであり、構文チェックのマークアップに含まれることがあります。

提案

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

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

推奨値は、アプリが理解できる値を入力する際に役立ちます。JavaScript について言及する場合、「JavaScript」と「Java スクリプト」と入力するユーザーがいます。「JavaScript」を提案すると、ユーザーによるアプリの操作が標準化されます。

指定すると、MULTIPLE_LINE に設定されている場合でも、TextInput.type は常に SINGLE_LINE になります。

フィールド
items[]

SuggestionItem

テキスト入力フィールドのオートコンプリートに使用される候補のリストです。

提案項目

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

フィールド

共用体フィールド content。

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

string

テキスト入力フィールドへの推奨入力の値。ユーザーが入力する内容と同じです。

TextInput

ユーザーがテキストを入力できるフィールド。候補と変化時アクションをサポートします。

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

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

フィールド
name

string

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

フォーム入力の操作について詳しくは、フォームデータを受信するをご覧ください。
label

string

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

アプリに必要な情報を入力するためのテキストを指定します。たとえば、誰かの名を尋ねるものの、本人の氏名が特に必要な場合は、「name」ではなく「surname」と記述します。

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

string

テキスト入力フィールドの下に表示されるテキストです。特定の値の入力をユーザーに促すことでユーザーを支援します。このテキストは常に表示されます。

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

string

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

フォーム入力の操作について詳しくは、フォームデータを受信するをご覧ください。
type

Type

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

Action

テキスト入力フィールドが変更された場合の対応。

たとえば、ユーザーに対するフィールドの追加や、テキストの削除などがあります。

たとえば、カスタム関数の実行や Google Chat のダイアログの表示などです。
initialSuggestions

Suggestions

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

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

推奨値は、アプリが理解できる値を入力する際に役立ちます。JavaScript について言及する場合、「JavaScript」と「Java スクリプト」と入力するユーザーがいます。「JavaScript」を提案すると、ユーザーによるアプリの操作が標準化されます。

指定すると、MULTIPLE_LINE に設定されている場合でも、TextInput.type は常に SINGLE_LINE になります。
autoCompleteAction

Action

（省略可）テキスト入力フィールドが対応するユーザーに候補を提示したときに行うアクションを指定します。

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

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

Google Workspace アドオンでサポートされていますが、Chat アプリではサポートされていません。

タイプ

テキスト入力フィールドがユーザー インターフェースに表示される仕組みです。たとえば、1 行の入力フィールドでも、複数行の入力フィールドでも構いません。

initialSuggestions を指定した場合、type は常に MULTIPLE_LINE に設定されていても SINGLE_LINE になります。

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

テキスト 段落

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

フィールド
text

string

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

ウィジェット

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

ウィジェットは、テキスト、画像、ボタン、その他のオブジェクト タイプのいずれかを表すことができる複合オブジェクトです。

フィールド
horizontalAlignment

HorizontalAlignment

ウィジェットを列の左、右、中央に揃えるかどうかを指定します。
共用体フィールド data。ウィジェットに含めることができるアイテムは 1 つだけです。複数のウィジェット フィールドを使用して、より多くのアイテムを表示できます。data は次のいずれかになります。
textParagraph

TextParagraph

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

たとえば、次の JSON は太字のテキストを作成します。

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

Image

画像を表示します。

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

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

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

ButtonList

ボタンのリスト。

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

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

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

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

DateTimePicker

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

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

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

Divider

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

次の JSON は、分割線を作成します。

"divider": {
}
grid

Grid

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

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

次の JSON は、単一のアイテムを含む 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

Columns

列を 2 つまで表示します。

3 つ以上の列を追加する、または行を使用するには、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"
          }
        }
      ]
    }
  ]
}

HorizontalAlignment

ウィジェットを列の左、右、中央に揃えるかどうかを指定します。

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

ImageType

画像の切り抜きに使用する形状。

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