このページでは、Google Chat のカード メッセージのメイン UI コンポーネントを設計および作成する方法について説明します。
カードは、定義済みのレイアウト、ボタンなどのインタラクティブな UI 要素、画像などのリッチメディアをサポートします。カードを使用すると、カード メッセージとダイアログを通じて、情報の表示、入力の収集、ユーザーに次のステップの提供を行うことができます。
カードビルダーを使用して、Chat アプリ用の JSON カード メッセージを設計し、プレビューします。
カードビルダーを開くカードとダイアログには通常、次のコンポーネントがあります。
- カードのタイトルを含む
CardHeader
。 - カードのメイン本体を形成する 1 つ以上の
CardSection
ウィジェット。 - ダイアログ専用の
CardFixedFooter
ウィジェット。
前提条件
ヘッダーを追加
CardHeader
ウィジェットは、カードのヘッダーを表します。ヘッダーには、カードのタイトル、サブタイトル、アバター画像を含めることができます。
カード メッセージとダイアログ用に CardHeader
を含めることができます。
CardHeader
の例を次に示します。
カードのセクションを定義する
CardSection
ウィジェットは、カード内の上位レベルのコンテナです。カード セクションを使用して、カード内のウィジェットをグループ化します。カード セクションごとに、ヘッダーと 1 つ以上のウィジェットを含めることができます。
カード メッセージとダイアログ用に CardSection
を含めることができます。
2 つの textParagraph
ウィジェットを含む CardSection
の例を次に示します。
永続的なフッターを追加する
CardFixedFooter
ウィジェットは、Chat アプリによって送信されるダイアログ メッセージのフッターを表します。フッターにはプライマリ ボタンとセカンダリ ボタンを含めることができます。
CardFixedFooter
ウィジェットはダイアログでのみ使用できます。
2 つのボタンがある CardFixedFooter
ウィジェットの例を次に示します。
トラブルシューティング
Google Chat アプリまたはカードからエラーが返されると、Chat インターフェースに「エラーが発生しました」というメッセージが表示されます。または「リクエストを処理できません」と表示されます。Chat UI にエラー メッセージが表示されていなくても、Chat アプリまたはカードから予期しない結果(カード メッセージが表示されないなど)が生成される場合があります。
エラー メッセージは Chat UI に表示されない場合がありますが、Chat アプリのエラーロギングがオンになっている場合は、エラー メッセージとログデータを使用してエラーを修正できます。エラーの表示、デバッグ、修正については、Google Chat のエラーのトラブルシューティングと修正をご覧ください。