Google Chat アプリのカードを作成する

このページでは、Terraform のコンポーネントと構造を構築する方法について説明します。 カード。カードはユーザーです Google Chat アプリがプレゼンテーションや情報の収集に使用できるインターフェース 表示することもできます。チャットアプリは 次のインターフェースのディスプレイ カード:

  • メッセージ 1 枚以上のカードを含む画像が表示されます
  • ホームページ これは、[ホーム] タブから直接表示されるカードで、 やり取りできます。
  • ダイアログ: 開くカードです。 新しいウィンドウで メッセージとホームページを表示します

このページでは、カードの次のコンポーネントについて説明します。

  • ヘッダー: 通常はカードやカードのタイトルが含まれます 。
  • セクション: 本体を形成します。 ウィジェットなどのインタラクティブな要素ですカード ] セクションで、列やグリッドなど、カードをカードに追加できます。
  • 固定されたフッター(下部に表示される) ボタンなどの永続的な UI 要素を表示するダイアログ。

前提条件

インタラクティブ機能を有効にする Google Chat アプリ。新しい 次のいずれかのクイックスタートを完了してください。 使用するアプリ アーキテクチャ:


カードビルダーを使用して、Chat 用アプリのメッセージとユーザー インターフェースを設計し、プレビューします。

カードビルダーを開く

ヘッダーを追加

CardHeader ウィジェット カードのヘッダーを表します。ヘッダーには カードのタイトル、サブタイトル、アバター画像が作成されます。

CardHeader の例を次に示します。

カード セクションを 1 つ以上追加する

CardSection ウィジェット カード内の上位レベルのコンテナです。カードを使用 カード内のウィジェットをグループ化しますカードセクションには 1 つまたは複数のウィジェットを指定できます

2 つの textParagraph を含む CardSection の例を次に示します。 ウィジェット:

ウィジェット間に水平方向の分割線を追加する

divider ウィジェット カードの幅にまたがる水平線を表示 ウィジェットの中間状態を維持しますこの線は視覚的な分割線で ユーザーがウィジェットを区別できるようにして、カードをスキャンしやすくする 理解することが重要です。

以下は、他のタイプの divider ウィジェットで構成されるカードです。 ウィジェット:

列を追加する

columns ウィジェット カードに最大 2 列が表示されます。追加できるアセットは、 各列に追加することができます。ウィジェットは画面に表示されているあります。 3 つ以上の列を含める、または行を使用する場合は、grid ウィジェットを使用します。

各列の高さは列の高さによって決まります。たとえば 最初の列が 2 番目の列よりも高い場合、どちらの列にも 最初の列の高さを指定します。列ごとに異なる数値を格納できるため 行を定義したり、列間でウィジェットを並べたりすることはできません。

次の例は、columns ウィジェットを含むカードを示しています。 2 列のテキスト。列のレイアウトのみを表示し、コードを折りたたむには サンプルの場合は、 [閉じる] をクリックします。 次の例のように、スペースに制約がある場合は、 2 番目の列が最初の列の下にラップされます。

列の幅を定義する

列は並べて表示されます。各列の幅はカスタマイズ可能 使用 horizontalSizeStyle フィールド。 ユーザーの画面幅が狭すぎる場合、2 列目は 1 回目:

  • ウェブでは、画面幅が次の値以下の場合は 2 番目の列が折り返される 480 ピクセル。
  • iOS デバイスでは、画面幅が次の値より小さいか、2 番目の列が折り返します。 300 ポイントに設定します。
  • Android デバイスでは、画面幅が 320 dp です

次の例は、columns ウィジェットを含むカードを示しています。 2 列のテキスト(4 列)。列の各項目は テキストのスペースを操作するために horizontalSizeStyle を適用しました 各列に入力します。

  • 第 1 段落のテキストで FILL_MINIMUM_SPACE を使用して、塗りつぶしが 30% を超えないようにする 決めます。
  • 第 2 段落のテキストでは、FILL_AVAILABLE_SPACE を使用して使用可能なセルを塗りつぶします。 スペースを追加します。この例では、カードの支払い金額の 70% が あります。
  • 3 番目のテキスト段落では horizontalSizeStyle を定義していないため、デフォルトになります。 カードの空きスペースを埋めることもできます
  • 第 4 段落のテキストで FILL_MINIMUM_SPACE を使用して、塗りつぶしが 30% を超えないようにする 決めます。

列の水平方向の配置を定義する

ウィジェットは、 定義する horizontalAligment フィールドhorizontalAlignment フィールドが定義されていない場合、ウィジェットは 列内に残されます。

次の例では、列内のテキストを左揃えにしています。

次の例では、列を中央の列内でテキストを水平方向に揃えます。

次の例では、列内のテキストを右に水平方向に揃えます。

列の垂直方向の配置を定義する

ウィジェットを列の上部、下部、中央に垂直方向に配置するには、 定義する verticalAlignment フィールドverticalAlignment フィールドが定義されていない場合、列内のウィジェットは配置されます。 上にあります。

次の例では、列内のテキストを上揃えにしています。

次の例では、中央の列内のテキストを垂直方向に揃えます。

次の例では、下部の列内でテキストを縦方向に揃えます。

アイテムのコレクションを表示するグリッドを追加する

grid ウィジェット アイテムのコレクションを含むグリッドを表示します。グリッドは任意の数の 列とアイテムです行数は、アイテムを列数で割って算出されます。 10 個のアイテムと 2 列のグリッドが 5 行あります。11 のアイテムと 2 のグリッド 6 行あります。

このウィジェットは、ユーザーが均一なデータを入力するのに役立つ候補をサポートしています。 変更時のアクション、 Actions テキスト入力フィールドに変更が発生したときに実行されます。 表示されます。

次の例は、1 つのアイテムを含む 2 列のグリッドです。

グリッド内で画像とともにテキストを表示する場所を定義するには、 gridItemLayout フィールド。 このフィールドでは、テキストを上部または下部に表示するかどうかを指定できます グリッド内のアイテムを移動しますgridItemLayout が定義されていない場合、テキストはデフォルトで アイテムの下に表示されます。

次の例は、テキストと画像を含む 3 列のグリッドです 表示されます。1 つ目のグリッドでは画像の上に表示されるテキストを定義します。2 つ目のグリッドでは grid は画像の下に表示するテキストを定義します。3 つ目のグリッドでは、 決めます。

グリッドや列に枠線を追加する

column ウィジェットまたは grid ウィジェットに表示されるアイテムでは、枠線を カスタム UI 要素を定義することで、 borderType フィールド および borderStyle フィールドborderStyle フィールドが定義されていない場合、デフォルトで枠線は表示されません。Google Chat では ウィジェット内のすべてのアイテムに適用するか、スタイル設定を適用する borderType を定義する ウィジェット内の個々のアイテムに 関連付けることもできます

次の例は 2 列のグリッドで、各グリッドに画像があり、 枠線の種類、スタイル、色が、 表示されます。

次の例は 3 列のグリッドで、各グリッドに画像があり、 枠線のスタイルと種類が個別に定義されています。最初の 画像の枠線が STROKE として定義されています。2 つ目の画像の枠線は、 NO_BORDER。3 つ目の画像には枠線が定義されていません。

CardFixedFooter ウィジェットは、サービスによって送信されるダイアログ メッセージのフッターを表します。 作成することもできます。 フッターにはプライマリ ボタンとセカンダリ ボタンを含めることができます。

CardFixedFooter ウィジェットを使用できるのは ダイアログ

2 つのボタンがある CardFixedFooter ウィジェットの例を次に示します。

トラブルシューティング

Google Chat アプリまたは card がエラーを返した場合、 Chat のインターフェースに「エラーが発生しました」というメッセージが表示されている。 または「リクエストを処理できません」が表示されます。場合によっては、Chat の UI が エラー メッセージは表示されませんが、Chat 用アプリまたは 予期しない結果が生じた場合たとえば、カード メッセージに 表示されます。

Chat UI にエラー メッセージが表示されない場合がありますが、 エラーの修正に役立つ、わかりやすいエラー メッセージとログデータ Chat 用アプリのエラーロギングが有効になっている場合。表示のヘルプについては、 エラーの修正について詳しくは、このモジュールの Google Chat のエラーのトラブルシューティングと修正