会話型アクション（Dialogflow）を構築する

フルフィルメントを使用してアクションの会話を定義します。これは Webhook としてデプロイされるコードで、Dialogflow エージェントの構築できます。フルフィルメントは、ユーザーがアクションを実行したときにできます。

Interactive Canvas の場合、フルフィルメントはウェブアプリをアシスタントに移行させますHtmlResponse を使用してアシスタントに以下の操作を指示できます。ウェブアプリをレンダリングしますHtmlResponse は、data のアップデートも提供できます。ウェブアプリの変更に必要なウェブアプリのカスタムロジックが使用します

このページでは、フルフィルメントで HtmlResponse を使用する方法と、使用上のガイドラインを参照してください。

HTML レスポンス

ウェブアプリに関する情報をアシスタントに伝達するには、 HtmlResponse 挿入できます。HtmlResponse には URL を含めることができます。更新するデータを指定します。送信時 HtmlResponse の場合、次のステップが発生します。

一致したインテントのフルフィルメントによって、デバイスに HtmlResponse が送信されます。
デバイスは HtmlResponse 内の URL を使用してウェブアプリを読み込みます。
data JSON ペイロードは、コールバックでウェブアプリに渡されます。
会話アクションが新しい HtmlResponse を送信して、最新情報や新しい状態を読み込むことができます。

注: 後続のフルフィルメントで url フィールドの値が変更された場合ウェブアプリが再読み込みされます。url に同じ値を指定した場合、または url が後続のレスポンスから除外されている場合、既存のウェブアプリはデバイスに保存されます。

フルフィルメントの例

以下は、サンプルからの抜粋です。フルフィルメントコードは、HtmlResponse の実装方法を示しています。

const functions = require('firebase-functions');
const {dialogflow, HtmlResponse} = require('actions-on-google');

const app = dialogflow({debug: true});
app.intent('welcome', (conv) => {
  conv.ask('Welcome! Do you want me to change color or pause spinning?');
  conv.ask(new HtmlResponse({
    url: 'https://your-web-app.com',
  }));
});

// map of human speakable colors to color values
const tints = {
  red: 0xFF0000,
  green: 0x00FF00,
  blue: 0x0000FF,
};
app.intent('color', (conv, {color}) => {
  if (color in tints) {
    conv.ask(`Ok, I changed my color to ${color}. What else?`);
    conv.ask(new HtmlResponse({
      data: {
        tint: tints[color],
      },
    }));
    return;
  }
  conv.ask(`Sorry, I don't know that color. What else?`);
  conv.ask(new HtmlResponse({
    data: {
      query: conv.query,
    },
  }));
});
app.intent('start', (conv) => {
  conv.ask(`Ok, I'm spinning. What else?`);
  conv.ask(new HtmlResponse({
    data: {
      spin: true,
    },
  }));
});

app.intent('pause', (conv) => {
  conv.ask(`Ok, I paused spinning. What else?`);
  conv.ask(new HtmlResponse({
    data: {
      spin: false,
    },
  }));
});

app.intent('restart game', (conv) => {
  conv.ask(new HtmlResponse({
    data: {
      command: 'RESTART_GAME',
    },
  }));
});

exports.conversation = functions.https.onRequest(app);

`welcome` インテント

上記のスニペットでは、welcome インテントのフルフィルメントが、 HtmlResponse は、ウェブアプリの URL に置き換えます。アシスタントがこれを受信しますそのアドレスの HTML と JavaScript を読み込みます。

...
app.intent('welcome', (conv) => {
  conv.ask('Welcome! Do you want me to change color or pause spinning?');
  conv.ask(new HtmlResponse({
    url: 'https://your-web-app.com',
  }));
});
...

その他のインテント

他のインテントのフルフィルメントの HtmlResponse が変数値を渡す（サンプルでは tint または spin）をウェブアプリに追加します。ウェブ用のカスタムロジックアプリはこれらの値を使用して、要素（アニメーション、色など）を更新します。

...
app.intent('start', (conv) => {
  conv.ask(`Ok, I'm spinning. What else?`);
  conv.ask(new HtmlResponse({
    data: {
      spin: true,
    },
  }));
});
...

ガイドラインと制限事項

HtmlResponse に関する以下のガイドラインと制限事項に留意してください以下の点に注意してください。

フルフィルメントの各インテントには HtmlResponse を含める必要があります。インテントが HtmlResponse が含まれていない場合、ウェブアプリは終了します。
最初に送信するインテントに含める必要があるのは、ウェブアプリの URL だけです。（通常は Welcome インテントです）。
HtmlResponse のサイズは 50 KB 以下にする必要があります。