このページは Cloud Translation API によって翻訳されました。

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 のエラーのトラブルシューティングと修正