このページでは、カードの主要な UI コンポーネントを設計および作成する方法について説明します。 管理できます。
カード: 定義済みのレイアウト、 インタラクティブな UI 要素（ボタン、 画像などのリッチメディアですカードを使って情報を提示したり、意見を収集したり、 ユーザーに次のステップを カード メッセージ ダイアログで表示できます。
カードビルダーを使用して、Chat 用アプリ用の JSON カード メッセージを設計し、プレビューします。
カードビルダーを開くカードとダイアログには通常、次のコンポーネントがあります。
- カードのタイトルを含む
CardHeader。 - カードのメイン本体を構成する 1 つ以上の
CardSectionウィジェット。 - ダイアログ専用の
CardFixedFooterウィジェット。
前提条件
インタラクティブ機能を有効にする Google Chat アプリ。新しい 次のいずれかのクイックスタートを完了してください。 使用するアプリ アーキテクチャ:
- Google Cloud Functions を使用した HTTP サービス
- Google Apps Script
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
ヘッダーを追加
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 のエラーのトラブルシューティングと修正