このページでは、カードのコンポーネントと構造を構築する方法について説明します。カードは、Google Chat アプリが Chat ユーザーに情報を提示したり、Chat ユーザーから情報を収集したりするために使用できるユーザー インターフェースです。Chat 用アプリは、次のインターフェースでカードを作成して表示できます。
- 1 つ以上のカードを含むメッセージ。
- ホームページ。Chat アプリとのダイレクト メッセージの [ホーム] タブに表示されるカードです。
- ダイアログ。メッセージやホームページから新しいウィンドウで開くカードです。
このページでは、カードの次のコンポーネントについて説明します。
- ヘッダー。通常、カードまたはカード セクションのタイトルが含まれます。
- セクション。ウィジェットやその他のインタラクティブ要素を含むカードのメイン部分を形成します。カード セクションでは、列やグリッドなど、カードに構造を追加できます。
- 固定フッター。ダイアログの下部に表示され、ボタンなどの永続的な UI 要素を表示します。
前提条件
ユーザー インタラクションを受信して応答するように構成された Google Chat アプリ。インタラクティブな Chat アプリを作成するには、使用するアプリ アーキテクチャに基づいて、次のいずれかのクイックスタートを完了します。
- Google Cloud Functions を使用した HTTP サービス
- Google Apps Script
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
カードビルダーを使用して、Chat アプリのメッセージとユーザー インターフェースを設計してプレビューします。
カードビルダーを開くヘッダーを追加
CardHeader ウィジェットは、カードのヘッダーを表します。ヘッダーには、カードのタイトル、サブタイトル、アバター画像を含めることができます。
CardHeader の例を次に示します。
1 つ以上のカード セクションを追加する
CardSection ウィジェットは、カード内の高レベルのコンテナです。カード セクションを使用して、カード内のウィジェットをグループ化します。各カード セクションには、ヘッダーと 1 つ以上のウィジェットを含めることができます。
2 つの textParagraph ウィジェットを含む CardSection の例を次に示します。
ウィジェット間に水平方向の区切り線を追加する
divider ウィジェットは、垂直方向に積み重ねられたウィジェット間に、カードの幅にわたる水平線を表示します。この線は、ユーザーがウィジェットを区別するのに役立つ視覚的な区切り線であり、カードをスキャンして理解しやすくします。
次のカードは、他のタイプのウィジェットの間に divider ウィジェットを配置したものです。
列を追加する
columns ウィジェットでは、カードに最大 2 列が表示されます。各列にウィジェットを追加できます。ウィジェットは指定された順序で表示されます。3 つ以上の列を含める場合や、行を使用する場合は、grid ウィジェットを使用します。
各列の高さは、高い方の列によって決まります。たとえば、最初の列が 2 番目の列よりも高い場合、両方の列の高さは最初の列の高さになります。各列に異なる数のウィジェットを含めることができるため、行を定義したり、列間でウィジェットを整列したりすることはできません。
次の例では、2 列のテキストを含む columns ウィジェットを含むカードを表示しています。列レイアウトのみを表示し、コードサンプルを折りたたむには、 [折りたたむ] をクリックします。次の例のようにスペースが限られている場合、2 番目の列は 1 番目の列の下に折り返されます。
列幅を定義する
列は並べて表示されます。各列の幅は、horizontalSizeStyle フィールドを使用してカスタマイズできます。ユーザーの画面幅が狭すぎる場合、2 番目の列は 1 番目の列の下に折り返されます。
- ウェブでは、画面幅が 480 ピクセル以下の場合、2 番目の列が折り返されます。
- iOS デバイスでは、画面幅が 300 pt 以下の場合は 2 列目が折り返されます。
- Android デバイスでは、画面幅が 320 dp 以下の場合は 2 列目が折り返されます。
次の例では、columns ウィジェットを含むカードが表示されています。このウィジェットには、2 列のテキストと 4 つの項目が含まれています。列内の各アイテムには、テキストが各列を埋めるスペースを操作するために horizontalSizeStyle が適用されています。
- 最初のテキスト段落では、
FILL_MINIMUM_SPACEを使用して、カードの幅の 30% 以下を埋めています。 - 2 番目のテキスト段落では、
FILL_AVAILABLE_SPACEを使用して、カードの幅の使用可能なスペースを埋めています。この例では、カードの幅の 70% を占めています。 - 3 番目のテキスト段落では
horizontalSizeStyleが定義されていないため、デフォルトでカードの利用可能なスペースを埋めます。 - 4 番目のテキスト段落では、
FILL_MINIMUM_SPACEを使用して、カードの幅の 30% 以下を埋めています。
列の水平方向の配置を定義する
horizontalAlignment フィールドを定義することで、ウィジェットを列の左、右、中央に水平方向に配置できます。horizontalAlignment フィールドが未定義の場合、ウィジェットは列の左側に配置されます。
次の例では、列内のテキストを左揃えにしています。
次の例では、列内のテキストを中央に水平方向に揃えます。
次の例では、列内のテキストを右揃えにしています。
列の垂直方向の配置を定義する
verticalAlignment フィールドを定義することで、ウィジェットを列の上、下、中央に垂直方向に配置できます。verticalAlignment フィールドが未定義の場合、列内のウィジェットは上部に配置されます。
次の例では、列内のテキストを上揃えにしています。
次の例では、列内のテキストを中央に垂直方向に配置しています。
次の例では、列内のテキストを下揃えにしています。
アイテムのコレクションを表示するグリッドを追加する
grid ウィジェットは、アイテムのコレクションを含むグリッドを表示します。グリッドは、任意の数の列とアイテムをサポートします。行数は、アイテム数を列数で割った値になります。10 個のアイテムと 2 つの列があるグリッドには、5 つの行があります。11 個のアイテムと 2 つの列があるグリッドには、6 つの行があります。
このウィジェットは、ユーザーが統一されたデータを入力するのに役立つ候補と、ユーザーがテキストを追加または削除するなど、テキスト入力フィールドで変更が発生したときに実行される Actions である変更時アクションをサポートしています。
次の例は、1 つのアイテムを含む 2 列のグリッドです。
グリッド内の画像とともにテキストが表示される場所を定義するには、gridItemLayout フィールドを指定します。このフィールドでは、テキストをグリッド内のアイテムの上または下に表示するかどうかを定義できます。gridItemLayout が未定義の場合、テキストはデフォルトでグリッド内のアイテムの下に表示されます。
次の例は、各グリッドにテキストと画像を含む 3 列のグリッドです。1 つ目のグリッドは画像の上に表示されるテキストを定義し、2 つ目のグリッドは画像の下に表示されるテキストを定義します。3 つ目のグリッドはテキストの位置を定義しません。
グリッドまたは列に枠線を追加する
column ウィジェットまたは grid ウィジェットに表示されるアイテムの場合、borderType フィールドと borderStyle フィールドを定義することで、これらの UI 要素に枠線を追加できます。borderStyle フィールドが定義されていない場合、デフォルトでは枠線は表示されません。borderType を定義してウィジェット内のすべてのアイテムに適用することも、ウィジェット内の個々のアイテムにスタイルを適用することもできます。
次の例は、各グリッドに画像を含む 2 列のグリッドです。グリッド内のすべてのアイテムに適用されるように、枠線の種類、スタイル、色が定義されています。
次の例は、3 列のグリッドで、各グリッドに画像があり、枠線のスタイルとタイプが個別に定義されています。最初の画像には、STROKE として定義された枠線があります。2 番目の画像には、NO_BORDER として定義された枠線があります。3 つ目の画像には枠線が定義されていません。
カルーセルを追加する
Carousel ウィジェットは、画面の内外にスクロールできる CarouselCard オブジェクトのコレクションを表示します。各 CarouselCard に複数のウィジェットを追加できます。
永続的なフッターを追加する
CardFixedFooter ウィジェットは、Chat 用アプリから送信されるダイアログ メッセージのフッターを表します。フッターには、プライマリ ボタンとセカンダリ ボタンを含めることができます。
CardFixedFooter ウィジェットはダイアログでのみ使用できます。
2 つのボタンを含む CardFixedFooter ウィジェットの例を次に示します。
トラブルシューティング
Google Chat アプリまたはカードからエラーが返されると、Chat インターフェースに「エラーが発生しました」というメッセージが表示されます。または「リクエストを処理できません。」Chat UI にエラー メッセージが表示されない場合でも、Chat アプリやカードで予期しない結果が生じることがあります。たとえば、カード メッセージが表示されないことがあります。
Chat UI にエラー メッセージが表示されない場合でも、Chat 用アプリのエラー ロギングが有効になっていると、エラーの修正に役立つ詳細なエラー メッセージとログデータを利用できます。エラーの表示、デバッグ、修正については、Google Chat のエラーのトラブルシューティングと修正をご覧ください。