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