このページでは、カードのコンポーネントと構造を作成する方法について説明します。カードは、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 つの列を表示できます。各列にウィジェットを追加できます。ウィジェットは、指定された順序で表示されます。2 つを超える列を含める場合や行を使用する場合は、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 つ目の画像には境界が定義されていません。
永続的なフッターを追加する
CardFixedFooter ウィジェットは、Chat アプリから送信されたダイアログ メッセージのフッターを表します。フッターには、プライマリ ボタンとセカンダリ ボタンを含めることができます。
CardFixedFooter ウィジェットはダイアログでのみ使用できます。
2 つのボタンを含む CardFixedFooter ウィジェットの例を次に示します。
トラブルシューティング
Google Chat アプリまたはカードからエラーが返されると、Chat インターフェースに「エラーが発生しました」というメッセージが表示されます。または「リクエストを処理できません」というメッセージが表示されます。Chat UI にエラー メッセージが表示されない場合でも、Chat アプリまたはカードで予期しない結果が生成されることがあります（カード メッセージが表示されないなど）。
チャット UI にエラー メッセージが表示されない場合でも、チャットアプリのエラー ロギングがオンになっている場合は、エラーの修正に役立つ説明的なエラー メッセージとログデータが利用できます。エラーの表示、デバッグ、修正については、Google Chat エラーのトラブルシューティングと修正をご覧ください。