このページでは、カードまたはダイアログ内のウィジェットをフォーマットして構成する方法について説明します。 表示されます。
カードビルダーを使用して、Chat 用アプリ用の JSON カード メッセージを設計し、プレビューします。
カードビルダーを開く前提条件
インタラクティブ機能を有効にする Google Chat アプリ。新しい 次のいずれかのクイックスタートを完了してください。 使用するアプリ アーキテクチャ:
- Google Cloud Functions を使用した HTTP サービス
- Google Apps Script
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
カードとダイアログを列に表示する
「
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 のエラーのトラブルシューティングと修正
関連トピック
columns
horizontalSizeStyle
horizontalAligment
verticalAlignment
divider
grid
gridItemLayout
borderStyle
borderType