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

このページでは、Google Chat のカード メッセージのメイン UI コンポーネントを設計および作成する方法について説明します。

カードは、定義済みのレイアウト、ボタンなどのインタラクティブな UI 要素、画像などのリッチメディアをサポートします。カードを使用すると、カード メッセージとダイアログを通じて、情報の表示、入力の収集、ユーザーに次のステップの提供を行うことができます。

カードビルダーでカードをデザインしてプレビューする。

カードビルダーを開く

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

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

前提条件

  • Google Chat へのアクセス権を持つ Google Workspace アカウント。
  • 公開されている Chat アプリ。Chat アプリを作成するには、このquickstartの手順に沿ってください。

    • ヘッダーを追加

    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 のエラーのトラブルシューティングと修正をご覧ください。