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

アクションの会話はフルフィルメントを使用して定義します。フルフィルメントは、Dialogflow エージェントの会話ロジックを含む Webhook としてデプロイされるコードです。フルフィルメントは、ユーザーがリクエストを行ったときに行う処理をアクションに指示します。

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 インテントのフルフィルメントが、ウェブアプリの URL を含む HtmlResponse を送信します。アシスタントはこれを受け取り、そのアドレスで 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 以下にする必要があります。