概要（Dialogflow）

Interactive Canvas は Google アシスタント上に構築されたフレームワークであり、会話型アクションに視覚的な臨場感あふれるエクスペリエンスを追加できます。この視覚的なエクスペリエンスは、アシスタントが会話でユーザーにレスポンスとして送信するインタラクティブなウェブアプリです。アシスタントの会話内にインラインで表示される従来のリッチ レスポンスとは異なり、Interactive Canvas ウェブアプリは全画面ウェブビューとしてレンダリングされます。

アクションで次の処理を行う場合は、Interactive Canvas を使用する必要があります。

  • フルスクリーンの映像を作成する
  • カスタムのアニメーションや画面遷移を作成する
  • データの可視化を行う
  • カスタムのレイアウトや GUI を作成する
図 1.Interactive Canvas を使用して作成されたインタラクティブ ゲーム。

サポートされているデバイス

Interactive Canvas は、現在、次のデバイスで利用できます。

  • スマートディスプレイ
  • Google Nest Hubs

  • Android モバイル デバイス

仕組み

Interactive Canvas を使用するアクションは、通常の会話アクションと同様に機能します。ユーザーは、目的を果たすためにアシスタントと会話を続けるのは変わりませんが、インタラクティブ キャンバスのアクションは、インラインでレスポンスを返すのではなく、全画面のウェブアプリを開くユーザーにレスポンスを送信します。ユーザーは、会話が終了するまでウェブアプリや音声操作でウェブアプリを操作し続けます。

Interactive Canvas を使用するアクションには、いくつかのコンポーネントがあります。

  • 会話型アクション: 会話型インターフェースを使用してユーザーのリクエストを処理するアクション。Interactive Canvas アクションでは、リッチカードや単純なテキストや音声でのレスポンスではなく、ウェブビューを使用してレスポンスをレンダリングします。会話型アクションは次のコンポーネントを使用します。
    • Dialogflow エージェント: アクションのユーザーと会話するためにカスタマイズする Dialogflow のプロジェクト。
    • フルフィルメント: Dialogflow エージェント向けの会話ロジックを実装し、ウェブアプリと通信する Webhook としてデプロイされるコード。
  • ウェブアプリ: 会話中にアクションからユーザーにレスポンスとして送られる、カスタマイズされたビジュアルを表示するフロントエンド ウェブアプリ。ウェブアプリは、HTML、JavaScript、CSS などのウェブ標準を使用して作成します。

会話型アクションとウェブアプリは、以下を使用して相互に通信します。

  • Interactive Canvas API: ウェブアプリと JavaScript アクション間の通信を可能にするために、ウェブアプリに含める JavaScript API。
  • HtmlResponse: ウェブアプリの URL とそれを渡すデータを含むレスポンス。Node.js または Java クライアント ライブラリを使用して、HtmlResponse を返すことができます。

Interactive Canvas の仕組みを説明するために、デバイスの画面の色をユーザーが指定した色に変更する、Cool Colors という架空のアクションがあるとします。この場合、ユーザーがアクションを起動した後のフローは次のようになります。

  1. ユーザーがアシスタント デバイスに「Turn the screen blue」と話しかけます。
  2. Actions on Google プラットフォームが、ユーザーのリクエストを Dialogflow に転送し、そこでインテントとのマッチングが行われます。
  3. 一致したインテントのフルフィルメントが実行され、HtmlResponse がデバイスに送信されます。ウェブアプリがまだ読み込まれていない場合は、デバイスが URL を使用してウェブアプリを読み込みます。
  4. ウェブアプリが読み込まれると、interactiveCanvas API にコールバックが登録されます。次に、data オブジェクトの値がウェブアプリの登録済みの onUpdate コールバックに渡されます。この例では、値が blue の変数を含む data が、フルフィルメントから HtmlResponse に送信されます。
  5. ウェブアプリのカスタム ロジックが HtmlResponse の data 値を読み取り、定義された変更を行います。この例では、これによって画面が青色に変わります。
  6. interactiveCanvas は、コールバックの更新をデバイスに送信します。

次のステップ

Interactive Canvas アクションの作成方法については、ビルドの概要ページをご覧ください。

完全な Interactive Canvas アクションのコードについては、サンプルをご覧ください。