このページでは、カードのコンポーネントと構造を構築する方法について説明します。カードは、Google 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 列目が折り返されます。
次の例は、2 列のテキストと列に 4 つのアイテムを含む columns ウィジェットを含むカードを表示します。列の各項目には horizontalSizeStyle が適用され、テキストが各列を埋めるスペースの量を操作します。
- 最初のテキスト段落では、
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 列のグリッドです。最初のグリッドは画像の上に表示するテキストを定義し、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 のエラーのトラブルシューティングと修正をご覧ください。