カードを使用して、動的でインタラクティブで一貫した UI をデザインする

このページでは、カードベースのインターフェースの機能とコンポーネントについて説明します。また、Google Chat アプリが Google Chat ユーザーへのメッセージでカードを使用する方法について説明します。

Google Chat でユーザーにメッセージを送るために、Chat アプリではカードを作成できます。カードには次の機能があります。

  • インタラクティブ: カードは、Google Chat アプリでユーザーから情報を収集したり、次のステップに進めるように誘導したりするのに役立ちます。操作をサポートするために、カードにはボタン、テキスト入力フィールド、日時選択ツールなど、さまざまな種類のウィジェットを含めることができます。
  • 一貫性がある: カードとウィジェットにより、ウェブやモバイル デバイスなど、さまざまなプラットフォームでチャットアプリのデザインと操作性が統一されます。カードとウィジェットは、Google Chat で適切に機能するように自動的にスタイルが設定されます。
  • 動的: Google Chat アプリでカードを使用して、外部データソースからの最新情報を動的に表示できます。たとえば、カードを使用してお客様のケースに最新のステータスを提示できます。

カードの種類

チャットアプリでは、さまざまな種類のカードを設計でき、次の方法でカードを使用できます。

  • スタンドアロンのカード メッセージ
  • Chat アプリがユーザーとのやり取り、データの収集、認証やアプリの設定の構成などの複数ステップのプロセスを完了するために使用するダイアログ
  • テキスト メッセージに添付する(リンク プレビューなど)。詳細情報を提供し、ユーザーが Google Chat から直接操作できるようにします。

たとえば、Chat アプリは、カード メッセージを使用して Chat スペースでアンケートを実行します。

カード メッセージを使用して Chat スペースでアンケートを実行する Chat アプリ

また、チャットアプリでダイアログを開いて、アドレス帳用の新しい連絡先を作成することもできます。

さまざまなウィジェットが表示されたダイアログ。

カード コンポーネント

カードは次のコンポーネントで構成されています。

  • ヘッダー: 概要情報(アプリのロゴやカードタイトルなど)を含むカードの上部に表示される部分。
  • カード セクション: コンテンツのウィジェットを含めることができるカードの 1 つ以上のセクション。
  • フッター: ダイアログ用。情報の送信や複数のステップからなるプロセスの完了に役立つ、ボタン付きの永続的なフッター。

ウィジェット

カード セクションにウィジェットを 1 つ以上追加できます。ウィジェットを使用すると、次のことができます。

  • テキストや画像などの情報をユーザーに表示する。
  • テキスト入力フィールド、選択可能なメニュー、日時設定を使用してユーザーから情報を収集します。
  • ボタンなどの操作コントロールを提供する。

現在サポートされているウィジェットは次のとおりです。

  • ButtonList: 一連のボタンを表示します。
  • DateTimePicker: ユーザーが日付と時刻のいずれかまたは両方を指定できます。
  • DecoratedText: アイコンやボタンなど、オプションのレイアウトや機能とともにテキストを表示します。
  • Columns: カードに 2 列を表示します。
  • Divider: 積み重ねられたウィジェット間にカードの幅にわたる水平線を表示し、視覚的な分割線として機能します。
  • Grid: 一連のアイテムをシンプルなグリッドに配置します。
  • Icon: 組み込みアイコンまたはカスタム アイコンを表示します。
  • Image: HTTPS URL でホストされているクリック可能または静的な .png または .jpg 画像を表示します。
  • SelectionInput: チェックボックス、ラジオボタン、スイッチ、プルダウン メニューなど、選択可能なアイテムのセットを提供します。
  • TextInput: ユーザーがテキストを入力できるフィールド。
  • TextParagraph: 必要に応じて HTML 書式を使用してテキストの段落を表示します。

Chat アプリのカードを作成するには、次のガイドをご覧ください。