リッチ レスポンス

リッチ レスポンスによって視覚的要素が追加され、アクションでのユーザー インタラクションが強化されます。プロンプトの一部として、次のリッチ レスポンス タイプを使用できます。

  • ベーシック カード
  • 画像カード
  • テーブルカード

リッチ レスポンスを定義する場合は、RICH_RESPONSE サーフェス機能を備えた候補を使用して、Google アシスタントがサポートされているデバイスでのみリッチ レスポンスを返すようにします。プロンプト内の content オブジェクトごとに、リッチ レスポンスは 1 つだけ使用できます。

ベーシック カード

ベーシック カードは簡潔で、重要な情報(または概要)をユーザーに提示し、(ウェブリンクを使用して)ユーザーが詳細を確認できるようにすることを目的としています。

ボタンがない操作機能がないため、ベーシック カードは主に表示目的に使用します。ボタンをウェブにリンクするには、サーフェスに WEB_LINK ケーパビリティも必要です。

スマートディスプレイに表示されるベーシック カードの例

プロパティ

基本的なカード レスポンス タイプには次のプロパティがあります。

プロパティ 種類 必須 / 任意 説明
title string 任意 書式なしテキストのタイトル。タイトルのフォントとサイズは固定され、先頭行以降の文字は切り捨てられます。タイトルが指定されていない場合、カードの高さは折りたたまれます。
subtitle string 任意 カードの書式なしテキストのサブタイトル。タイトルのフォントとサイズは固定され、先頭行以降の文字は切り捨てられます。サブタイトルが指定されていない場合、カードの高さは折りたたまれます。
text string 条件

カードの書式なしテキスト コンテンツ。長すぎるテキストは、最後の単語の区切りで省略記号を使って切り捨てられます。image が存在しない限り、このプロパティは必須です。

このプロパティには次の制限があります。

  • 画像がない場合は最大 15 行、image がある場合は最大 10 行です。これは、約 750 文字(画像なし)または 500 文字(画像あり)です。モバイル デバイスでは、大画面のサーフェスよりも先にテキストが切り捨てられることに注意してください。
  • テキストにリンクを含めることはできません。

Markdown の一部のみがサポートされています。

  • 改行 2 行スペースの後に \n が続く
  • **bold**
  • *italics*
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 行が表示されることが保証されますが、それ以外の行はサーフェスによっては表示されないことがあります。シミュレータを使用してテストすると、特定のサーフェスでどの行が表示されるかを確認できます。

TableRow オブジェクトは、同じテーブル内の異なる行のセルを表します。

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 プロジェクトのカスタムテーマを作成すると、リッチ レスポンスの外観を変更できます。このカスタマイズは、ユーザーが画面付きのサーフェスでアクションを呼び出したときの会話に独自のデザインを定義するのに役立ちます。

カスタムのレスポンス テーマを設定する手順は次のとおりです。

  1. Actions Console で、[開発] > [テーマのカスタマイズ] に移動します。
  2. 次のいずれかまたはすべてを設定します。
    • 背景色: カードの背景として使用されます。一般に、背景には明るい色を使用して、カードのコンテンツを読みやすくします。
    • メインカラー: カードのヘッダー テキストとインターフェース要素に使用するメインの色。通常は、背景色とのコントラストをはっきりさせるために、暗めのプライマリ カラーを使用します。
    • フォント ファミリー: タイトルなどの視認性の高いテキスト要素に使用されるフォントのタイプを示します。
    • 画像の角のスタイル: カードの角の外観を変更します。
    • 背景画像: 背景色の代わりに使用するカスタム画像。サーフェス デバイスが横向きモードまたは縦向きモードの場合に、2 つの異なる画像を指定します。背景画像を使用する場合、プライマリ カラーは白に設定されます。
  3. [保存] をクリックします。
Actions Console でのテーマのカスタマイズ