カードまたはダイアログの構造をフォーマットする

このページでは、カードまたはダイアログ内のウィジェットをフォーマットして構成する方法について説明します。 表示されます。

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

カードビルダーを開く

前提条件

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

カードとダイアログを列に表示する

「 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 フィールドが定義されていない場合、列内のウィジェットは配置されます。 上にあります。

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

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

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

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

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

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

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

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

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

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

グリッド内の画像とともにテキストを表示する場所を定義する

「 gridItemLayout フィールド 各 gridItem 内で、テキストが上または下のいずれに表示されるかを定義できます。 グリッド内のアイテムを移動しますgridItemLayout が定義されていない場合、テキストはデフォルトで グリッド内のアイテムの下に表示されます

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

UI 要素に枠線を追加する

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

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

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

トラブルシューティング

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

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