リッチ レスポンスによって視覚的要素が追加され、アクションでのユーザー インタラクションが強化されます。プロンプトの一部として、次のリッチ レスポンス タイプを使用できます。
- ベーシック カード
- 画像カード
- テーブルカード
リッチ レスポンスを定義する場合は、RICH_RESPONSE
サーフェス機能を備えた候補を使用して、Google アシスタントがサポートされているデバイスでのみリッチ レスポンスを返すようにします。プロンプト内の content
オブジェクトごとに、リッチ レスポンスは 1 つだけ使用できます。
ベーシック カード
ベーシック カードは簡潔で、重要な情報(または概要)をユーザーに提示し、(ウェブリンクを使用して)ユーザーが詳細を確認できるようにすることを目的としています。
ボタンがない操作機能がないため、ベーシック カードは主に表示目的に使用します。ボタンをウェブにリンクするには、サーフェスに WEB_LINK
ケーパビリティも必要です。
プロパティ
基本的なカード レスポンス タイプには次のプロパティがあります。
プロパティ | 種類 | 必須 / 任意 | 説明 |
---|---|---|---|
title |
string | 任意 | 書式なしテキストのタイトル。タイトルのフォントとサイズは固定され、先頭行以降の文字は切り捨てられます。タイトルが指定されていない場合、カードの高さは折りたたまれます。 |
subtitle |
string | 任意 | カードの書式なしテキストのサブタイトル。タイトルのフォントとサイズは固定され、先頭行以降の文字は切り捨てられます。サブタイトルが指定されていない場合、カードの高さは折りたたまれます。 |
text |
string | 条件 |
カードの書式なしテキスト コンテンツ。長すぎるテキストは、最後の単語の区切りで省略記号を使って切り捨てられます。 このプロパティには次の制限があります。
Markdown の一部のみがサポートされています。
|
image |
Image |
任意 | カードに表示される画像。画像には、JPG、PNG、GIF(アニメーションあり、アニメーションなし)を使用できます。 |
image_fill |
ImageFill |
任意 | 画像のアスペクト比が画像コンテナのアスペクト比と一致しない場合に使用される、カードと画像コンテナの間の枠線。 |
button |
Link |
任意 | タップされたときにユーザーを URL にリンクするボタン。ボタンには、ボタンテキストを含む name プロパティと、リンク URL を含む url プロパティが必要です。ボタンテキストに誤解を招くような表現は使わないこと。また、ボタンテキストは審査プロセスでチェックされます。 |
サンプルコード
YAML
candidates: - first_simple: variants: - speech: This is a card. text: This is a card. content: card: title: Card Title subtitle: Card Subtitle text: Card Content image: url: 'https://developers.google.com/assistant/assistant_96.png' alt: Google Assistant logo
JSON
{ "candidates": [ { "first_simple": { "variants": [ { "speech": "This is a card.", "text": "This is a card." } ] }, "content": { "card": { "title": "Card Title", "subtitle": "Card Subtitle", "text": "Card Content", "image": { "url": "https://developers.google.com/assistant/assistant_96.png", "alt": "Google Assistant logo" } } } } ] }
Node.js
app.handle('Card', conv => { conv.add('This is a card.'); conv.add(new Card({ "title": "Card Title", "subtitle": "Card Subtitle", "text": "Card Content", "image": new Image({ url: 'https://developers.google.com/assistant/assistant_96.png', alt: 'Google Assistant logo' }) })); });
JSON
{ "responseJson": { "session": { "id": "session_id", "params": {} }, "prompt": { "override": false, "content": { "card": { "title": "Card Title", "subtitle": "Card Subtitle", "text": "Card Content", "image": { "alt": "Google Assistant logo", "height": 0, "url": "https://developers.google.com/assistant/assistant_96.png", "width": 0 } } }, "firstSimple": { "speech": "This is a card.", "text": "This is a card." } } } }
画像カード
画像カードは、画像を含むベーシック カードに代わるシンプルな設計です。画像を表示するときに、テキストやインタラクティブなコンポーネントをサポートする必要がない場合は、画像カードを使用します。
プロパティ
画像カード レスポンス タイプには次のプロパティがあります。
プロパティ | 種類 | 必須 / 任意 | 説明 |
---|---|---|---|
url |
string | 必須 | 画像のソース URL。画像は、JPG、PNG、GIF(アニメーション付き、アニメーションなし)を使用できます。 |
alt |
string | 必須 | ユーザー補助機能で使用する画像の説明(テキスト)。 |
height |
int32 | 任意 | ピクセル単位の画像の高さです。 |
width |
int32 | 任意 | ピクセル単位の画像の幅です。 |
サンプルコード
YAML
candidates: - first_simple: variants: - speech: This is an image prompt. text: This is an image prompt. content: image: alt: Google Assistant logo url: 'https://developers.google.com/assistant/assistant_96.png'
JSON
{ "candidates": [ { "first_simple": { "variants": [ { "speech": "This is an image prompt.", "text": "This is an image prompt." } ] }, "content": { "image": { "alt": "Google Assistant logo", "url": "https://developers.google.com/assistant/assistant_96.png" } } } ] }
Node.js
app.handle('Image', conv => { conv.add("This is an image prompt!"); conv.add(new Image({ url: 'https://developers.google.com/assistant/assistant_96.png', alt: 'Google Assistant logo' })); });
JSON
{ "responseJson": { "session": { "id": "session_id", "params": {} }, "prompt": { "override": false, "content": { "image": { "alt": "Google Assistant logo", "height": 0, "url": "https://developers.google.com/assistant/assistant_96.png", "width": 0 } }, "firstSimple": { "speech": "This is an image prompt.", "text": "This is an image prompt." } } } }
テーブルカード
テーブルカードを使用すると、レスポンスに表形式のデータ(スポーツの順位表、選挙結果、フライト情報など)を表示できます。アシスタントがテーブルカードに表示する列と行(それぞれ 3 つまで)を定義できます。追加の列と行、およびその優先順位を定義することもできます。
テーブルには静的データが表示され、操作はできません。インタラクティブな選択レスポンスの場合は、代わりにビジュアル選択レスポンスを使用します。
プロパティ
テーブルカードのレスポンス タイプには次のプロパティがあります。
プロパティ | 種類 | 必須 / 任意 | 説明 |
---|---|---|---|
title |
string | 条件 | 書式なしテキストのタイトル。subtitle が設定されている場合、このプロパティは必須です。 |
subtitle |
string | 任意 | 表の書式なしテキストのサブタイトル。表カードの字幕は、テーマのカスタマイズの影響を受けません。 |
columns |
TableColumn の配列 |
必須 | ヘッダーと列の配置。各 TableColumn オブジェクトは、同じテーブル内の異なる列のヘッダーと配置を記述します。 |
rows |
TableRow の配列 |
必須 |
テーブルの行データ。最初の 3 行が表示されることが保証されますが、それ以外の行はサーフェスによっては表示されないことがあります。シミュレータを使用してテストすると、特定のサーフェスでどの行が表示されるかを確認できます。 各 |
image |
Image |
任意 | テーブルに関連付けられている画像。 |
button |
Link |
任意 | タップされたときにユーザーを URL にリンクするボタン。ボタンには、ボタンテキストを含む name プロパティと、リンク URL を含む url プロパティが必要です。ボタンテキストに誤解を与えないようにし、審査プロセスでチェックされます。 |
サンプルコード
次のスニペットは、テーブルカードの実装方法を示しています。
YAML
candidates: - first_simple: variants: - speech: This is a table. text: This is a table. content: table: title: Table Title subtitle: Table Subtitle columns: - header: Column A - header: Column B - header: Column C rows: - cells: - text: A1 - text: B1 - text: C1 - cells: - text: A2 - text: B2 - text: C2 - cells: - text: A3 - text: B3 - text: C3 image: alt: Google Assistant logo url: 'https://developers.google.com/assistant/assistant_96.png'
JSON
{ "candidates": [ { "first_simple": { "variants": [ { "speech": "This is a table.", "text": "This is a table." } ] }, "content": { "table": { "title": "Table Title", "subtitle": "Table Subtitle", "columns": [ { "header": "Column A" }, { "header": "Column B" }, { "header": "Column C" } ], "rows": [ { "cells": [ { "text": "A1" }, { "text": "B1" }, { "text": "C1" } ] }, { "cells": [ { "text": "A2" }, { "text": "B2" }, { "text": "C2" } ] }, { "cells": [ { "text": "A3" }, { "text": "B3" }, { "text": "C3" } ] } ], "image": { "alt": "Google Assistant logo", "url": "https://developers.google.com/assistant/assistant_96.png" } } } } ] }
Node.js
app.handle('Table', conv => { conv.add('This is a table.'); conv.add(new Table({ "title": "Table Title", "subtitle": "Table Subtitle", "image": new Image({ url: 'https://developers.google.com/assistant/assistant_96.png', alt: 'Google Assistant logo' }), "columns": [{ "header": "Column A" }, { "header": "Column B" }, { "header": "Column C" }], "rows": [{ "cells": [{ "text": "A1" }, { "text": "B1" }, { "text": "C1" }] }, { "cells": [{ "text": "A2" }, { "text": "B2" }, { "text": "C2" }] }, { "cells": [{ "text": "A3" }, { "text": "B3" }, { "text": "C3" }] }] })); });
JSON
{ "responseJson": { "session": { "id": "session_id", "params": {} }, "prompt": { "override": false, "content": { "table": { "button": {}, "columns": [ { "header": "Column A" }, { "header": "Column B" }, { "header": "Column C" } ], "image": { "alt": "Google Assistant logo", "height": 0, "url": "https://developers.google.com/assistant/assistant_96.png", "width": 0 }, "rows": [ { "cells": [ { "text": "A1" }, { "text": "B1" }, { "text": "C1" } ] }, { "cells": [ { "text": "A2" }, { "text": "B2" }, { "text": "C2" } ] }, { "cells": [ { "text": "A3" }, { "text": "B3" }, { "text": "C3" } ] } ], "subtitle": "Table Subtitle", "title": "Table Title" } }, "firstSimple": { "speech": "This is a table.", "text": "This is a table." } } } }
レスポンスのカスタマイズ
Actions プロジェクトのカスタムテーマを作成すると、リッチ レスポンスの外観を変更できます。このカスタマイズは、ユーザーが画面付きのサーフェスでアクションを呼び出したときの会話に独自のデザインを定義するのに役立ちます。
カスタムのレスポンス テーマを設定する手順は次のとおりです。
- Actions Console で、[開発] > [テーマのカスタマイズ] に移動します。
- 次のいずれかまたはすべてを設定します。
- 背景色: カードの背景として使用されます。一般に、背景には明るい色を使用して、カードのコンテンツを読みやすくします。
- メインカラー: カードのヘッダー テキストとインターフェース要素に使用するメインの色。通常は、背景色とのコントラストをはっきりさせるために、暗めのプライマリ カラーを使用します。
- フォント ファミリー: タイトルなどの視認性の高いテキスト要素に使用されるフォントのタイプを示します。
- 画像の角のスタイル: カードの角の外観を変更します。
- 背景画像: 背景色の代わりに使用するカスタム画像。サーフェス デバイスが横向きモードまたは縦向きモードの場合に、2 つの異なる画像を指定します。背景画像を使用する場合、プライマリ カラーは白に設定されます。
- [保存] をクリックします。