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

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

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

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

カードビルダーを開きます

カードとダイアログは通常、次のコンポーネントで構成されます。

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

前提条件

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

    • ヘッダーを追加

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