このページでは、カード メッセージまたはダイアログ メッセージのウィジェットの形式と構造について説明します。
カードビルダーでカードをデザインしてプレビューする。
カードビルダーを開く前提条件
カードとダイアログを列に表示する
columns ウィジェットは、カードまたはダイアログに最大 2 列を表示します。各列にウィジェットを追加できます。ウィジェットは指定された順序で表示されます。3 つ以上の列を含める、または行を使用する場合は、grid ウィジェットを使用します。
各列の高さは、背の高い列によって決まります。たとえば、最初の列が 2 番目の列よりも高い場合、両方の列の高さは最初の列になります。各列には異なる数のウィジェットを含めることができるため、行を定義したり、列間でウィジェットを配置したりすることはできません。
次の例は、2 列のテキストを含む columns ウィジェットを含むカードを示しています。列のレイアウトのみを表示し、コードサンプルを折りたたむには、 [折りたたむ] をクリックします。次の例のようにスペースに制約がある場合は、2 番目の列が最初の列の下に折り返されます。
列の幅を定義する
列は並べて表示されます。各列の幅は、horizontalSizeStyle フィールドを使用してカスタマイズできます。ユーザーの画面幅が小さすぎる場合、2 番目の列は 1 番目の列より下に折り返されます。
- ウェブでは、画面幅が 480 ピクセル以下の場合、2 列目が折り返されます。
- iOS デバイスでは、画面幅が 300 pt 以下の場合、2 列目が折り返されます。
- Android デバイスでは、画面幅が 320 dp 以下の場合、2 列目が折り返されます。
次の例は、2 列のテキストがあり、列に 4 つのアイテムがある columns ウィジェットを含むカードを示しています。各列にテキストが占めるスペースの大きさを操作するために、列の各項目に horizontalSizeStyle が適用されます。
- 最初のテキスト段落は
FILL_MINIMUM_SPACEを使用して、カードの幅の 30% を超えないようにします。 - 第 2 段落のテキストでは
FILL_AVAILABLE_SPACEを使用して、カードの幅の空いているスペースを埋めます。この例では、カードの幅の 70% を占めています。 - 第 3 段落では
horizontalSizeStyleが定義されていないため、デフォルトでカードのスペースの利用可能なスペースを埋めます。 - 第 4 段落では、
FILL_MINIMUM_SPACEを使用してカードの幅の 30% を超えないようにしています。
列の水平方向の配置を定義する
horizontalAligment フィールドを定義すると、ウィジェットを列の左、右、中央に水平方向に配置できます。horizontalAlignment フィールドが定義されていない場合、ウィジェットは列の左に揃えられます。
次の例では、列内のテキストを左右に揃えます。
次の例では、テキストを中央の列内に水平方向に揃えます。
次の例では、列内のテキストを水平方向に右揃えに揃えます。
列の垂直方向の配置を定義する
verticalAlignment フィールドを定義すると、ウィジェットを列の上部、下部、または中央に垂直方向に配置できます。verticalAlignment フィールドが未定義の場合、列内のウィジェットは上部に揃えられます。
次の例では、列内のテキストを上下に揃えます。
次の例では、テキストを中央の列内で垂直方向に揃えます。
次の例では、テキストを下部の列内で縦方向に揃えます。
ウィジェット間に横方向の分割線を追加する
divider ウィジェットは、縦に積み重ねられたウィジェット間にカードの幅にわたる水平線を表示します。この線はウィジェットとウィジェットを区別するための視覚的な分割線で、カードを簡単に確認して理解できます。
他のタイプのウィジェット間の divider ウィジェットで構成されるカードは次のとおりです。
アイテムのコレクションをグリッドに表示する
grid ウィジェットには、アイテムのコレクションがグリッドで表示されます。グリッドは任意の数の列と項目をサポートします。行数は、項目を列数で割った値です。2 つの列に 10 個の項目があるグリッドには 5 行あります。11 項目と 2 列からなるグリッドには 6 行あります。
このウィジェットは、ユーザーが均一なデータを入力するのに役立つ提案と、変更時のアクション（ユーザーによるテキストの追加や削除など、テキスト入力フィールドで変更が発生したときに実行される Actions）をサポートしています。
次の例は、1 つのアイテムを含む 2 列のグリッドです。
グリッド内の画像でテキストが表示される場所を定義する
gridItemLayout フィールドを使用すると、テキストがグリッド内の項目の上または下に表示されるかどうかを各 gridItem 内で定義できます。gridItemLayout が定義されていない場合、テキストはデフォルトでグリッドのアイテムの下に表示されます。
次の例は、3 列のグリッドで、各グリッドにテキストと画像が含まれています。1 つ目のグリッドは画像の上に表示するテキストを定義し、2 つ目のグリッドは画像の下に表示するテキストを定義します。3 つ目のグリッドはテキストの位置を定義しません。
UI 要素に枠線を追加する
column ウィジェットや grid ウィジェットに表示されるアイテムの場合、borderType フィールドと borderStyle フィールドを定義することで、これらの UI 要素に枠線を追加できます。borderStyle フィールドが定義されていない場合は、デフォルトで枠線は表示されません。borderType を定義して、ウィジェット内のすべてのアイテムに適用するか、ウィジェット内の個々のアイテムにスタイル設定を適用できます。
次の例は、2 列のグリッドで、各グリッドに画像があり、グリッド内のすべてのアイテムに適用されるように枠線の種類、スタイル、色を定義しています。
次の例は、3 列のグリッドで、各グリッドに画像があり、枠線のスタイルと種類が個別に定義されています。最初の画像には STROKE として定義された枠線があります。2 つ目の画像には、NO_BORDER として定義された枠線があります。3 つ目の画像には枠線が定義されていません。
トラブルシューティング
Google Chat アプリまたはカードからエラーが返されると、Chat インターフェースに「エラーが発生しました」または「リクエストを処理できません」というメッセージが表示されます。Chat UI にエラー メッセージが表示されないにもかかわらず、Chat アプリまたはカードから予期しない結果（カード メッセージが表示されないなど）が発生することがあります。
Chat の UI にエラー メッセージが表示されない場合もありますが、Chat アプリのエラーロギングがオンになっている場合は、エラー メッセージとログデータを使用してエラーを修正できます。エラーの表示、デバッグ、修正については、Google Chat のエラーのトラブルシューティングと修正をご覧ください。
関連トピック
columnshorizontalSizeStylehorizontalAligmentverticalAlignmentdividergridgridItemLayoutborderStyleborderType