カードまたはダイアログのコンポーネントを設計する

このページでは、カードの主要な UI コンポーネントを設計および作成する方法について説明します。 管理できます。

カード: 定義済みのレイアウト、 インタラクティブな UI 要素(ボタン、 画像などのリッチメディアですカードを使って情報を提示したり、意見を収集したり、 ユーザーに次のステップを カード メッセージ ダイアログで表示できます。


カードビルダーを使用して、Chat 用アプリ用の JSON カード メッセージを設計し、プレビューします。

カードビルダーを開く

カードとダイアログには通常、次のコンポーネントがあります。

  • カードのタイトルを含む CardHeader
  • カードのメイン本体を構成する 1 つ以上の CardSection ウィジェット。
  • ダイアログ専用の CardFixedFooter ウィジェット。

前提条件

  • Google Workspace アカウント 権限がある Google Chat
  • 公開されている Chat アプリ。独自の Chat アプリについては、 クイックスタート
  • ヘッダーを追加

    CardHeader ウィジェット カードのヘッダーを表します。ヘッダーには カードのタイトル、サブタイトル、アバター画像が作成されます。

    次の要素には CardHeader を含めることができます。 カード メッセージダイアログ

    CardHeader の例を次に示します。

    カードのセクションを定義する

    CardSection ウィジェットは カード内の上位レベルのコンテナです。カードを使用 カード内のウィジェットをグループ化しますカードセクションには 1 つまたは複数のウィジェットを指定できます

    次の要素には CardSection を含めることができます。 カード メッセージダイアログ

    2 つの textParagraph を含む CardSection の例を次に示します。 ウィジェット:

    CardFixedFooter ウィジェットは、サービスによって送信されるダイアログ メッセージのフッターを表します。 作成することもできます。 フッターにはプライマリ ボタンとセカンダリ ボタンを含めることができます。

    CardFixedFooter ウィジェットを使用できるのは ダイアログ

    2 つのボタンがある CardFixedFooter ウィジェットの例を次に示します。

    トラブルシューティング

    Google Chat アプリまたは card がエラーを返した場合、 Chat のインターフェースに「エラーが発生しました」というメッセージが表示されている。 または「リクエストを処理できません」が表示されます。場合によっては、Chat の UI が エラー メッセージは表示されませんが、Chat 用アプリまたは 予期しない結果が生じた場合たとえば、カード メッセージに 表示されます。

    Chat UI にエラー メッセージが表示されない場合がありますが、 エラーの修正に役立つ、わかりやすいエラー メッセージとログデータ Chat 用アプリのエラーロギングが有効になっている場合。表示のヘルプについては、 エラーの修正について詳しくは、このモジュールの Google Chat のエラーのトラブルシューティングと修正