会話型アクションのサポートは 2023 年 6 月 13 日に終了しました。詳細については、会話型アクションの廃止をご覧ください。

このページは Cloud Translation API によって翻訳されました。

クライアントまたはサーバーサイドのフルフィルメントを使用してビルドを継続する

基本を学んだので、次はアクションを拡張してカスタマイズします。 Canvas 固有のメソッドを使用できますアクションは、Terraform で記述したコードを使用してクライアントフルフィルメントモデルまたはサーバーサイドフルフィルメントモデルを選択します。対象これらのオプションの詳細については、 Interactive Canvas を有効にします。

クライアントフルフィルメントモデルオプションを選択した場合は、以下を使用できます。アクション:

クライアントサイドフルフィルメントでビルドするに記載されているすべての API
サーバーサイドフルフィルメントでビルドするに記載されているすべての API

注: クライアントサイドのフルフィルメントでは、Webhook の呼び出しを Canvas 以外の機能で必要な機能（アカウントのリンクなど）
onTtsMark() コールバック

サーバーフルフィルメントモデルオプションを選択した場合は、以下を使用できます。アクション:

サーバーサイドフルフィルメントでビルドするに記載されているすべての API
Callbacks

一部の Interactive Canvas API は、フルフィルメントモデルを選択します。次の表に、選択した API に対して有効にされる API を示します。クライアントのフルフィルメントオプション、それらの API が推奨 / 推奨か推奨されません。

API 名	サーバーフルフィルメントモデルでのサポートの有無	クライアントのフルフィルメントモデルでのサポートの有無
`sendTextQuery()`	○	サポート対象ですが推奨されません（sendtextQuery() をご覧ください）を参照）
`outputTts()`	○	○
`triggerScene()`	×	○
`createIntentHandler(), expect(), clearExpectations(), prompt()`	×	○
`createNumberSlot(),createTextSlot, createConfirmationSlot, createOptionsSlot()`	×	○
`setHomeParam(), getHomeParam(), setUserParam(), getUserParam()`	×	○

以降のセクションでは、クライアント向けの API を実装する方法と、サーバーサイドフルフィルメントモデルを作成します。

クライアントサイドフルフィルメントでビルドする

ウェブアプリのロジックに実装できる Interactive Canvas API は以下のとおりです。

`outputTts()`

この API を使用すると、音声メッセージではなく、テキスト読み上げ（TTS）をデバイスから出力できます。静的プロンプト、Webhook の呼び出しなど、サーバーサイドに使用する場合は、outputTts() を使用します。サーバーへの移動をスキップして、説明します。

クライアントサイドの outputTts() は、サーバーサイドの TTS を中断またはキャンセルできます。回避サーバーサイド TTS を中断するには、次の予防措置を講じてください。

セッションの開始時に outputTts() を呼び出さないようにします。代わりに、アクションの最初の会話ターンでサーバーサイド TTS を使用してください。
ユーザーの操作なしで連続して outputTts() を呼び出さないようにします。

次のスニペットは、outputTts() を使用して、クライアントサイド:

interactiveCanvas.outputTts(
      '<speak>This is an example response.</speak>', true);

outputTts() は onTtsMark() でも使用できます。 SSML マーカーをテキストシーケンスに配置できます。onTtsMark() を使用するとウェブが同期されます次に示すように、SSML TTS 文字列の特定の時点におけるアプリのアニメーションやゲームの状態を表示するこれを次のスニペットのようになります。

interactiveCanvas.outputTts(
      '<speak>Speak as <mark name="number" /> number <break time="700ms"/>' +
      '<say-as interpret-as="cardinal">12345</say-as> <break time="300ms"/> ' +
      'Speak as <mark name="digits" /> digits <break time="700ms"/>' +
      '<say-as interpret-as="characters">12345</say-as></speak>', true);

上の例では、2 つのマークがレスポンスのカスタマイズ後、レスポンスが TTS とともにウェブアプリに送信されます。

クライアントでインテントフルフィルメントを処理する

Interactive Canvas のサーバーフルフィルメントモデルでは、すべてのインテントが Webhook で処理する必要があり、アクションのレイテンシが増加します。代わりにウェブアプリケーション内でインテントのフルフィルメントを処理できます。

インテントをクライアントサイドで処理するには、以下の API を使用します。

createIntentHandler(): インスタンスでインテントハンドラを定義できるメソッド Actions Builder で定義されたカスタムインテントのウェブアプリコード。
expect(): インテントハンドラを有効化/登録して、渡します。
clearExpectations(): すべての参加者の期待に応えるメソッドアクティブなインテントがあっても、インテントがユーザーがインテントに一致する発話を言ったとき。
deleteHandler(): 個々のインテントハンドラを無効にするメソッド。一致することはできません。

これらの API を使用すると、さまざまなタイプのインテントのインテントを選択的に有効または無効にできます。状態を記録します。インテントでは expect() を使用する必要がありますそれらのインテントを有効化します

インテントハンドラを有効にする

インテントハンドラの有効化は、2 段階のプロセスで行われます。まず、定義した Pod の使用します。次に、インテントをマッチング可能にするために、インテントハンドラで expect() を呼び出す。

クライアントサイドでインテントハンドラを構成して有効にするには、次の手順を行います。手順は次のとおりです。

Actions Console でプロジェクトを開き、カスタムインテントを追加します。
[Is this a global intent?] で [Yes] を選択します。

注: Actions Builder で作成したインテントは、クライアントサイドはグローバルインテントとして構成する必要があります。
インテントを構成し、[Save] をクリックします。

ウェブアプリロジックでインテントのハンドラを定義します。以下のスニペットをご覧ください。

/**
* Define handler for intent.
*/
const bookTableIntent = interactiveCanvas.createIntentHandler('reserveTable',
  matchedIntent => {
    console.log("Intent match handler to reserve a table was triggered!");
  });

/**
* Define handler for intent with an argument.
*/
const bookTableIntent = interactiveCanvas.createIntentHandler('reserveTable',
  matchedIntent => {
    const numberOfPeople = matchedIntent.getIntentArg('numberOfPeople');
    console.log(`Intent match handler to reserve a table for ${number of people} was triggered!`);
  });

以下に示すように、expect() メソッドを呼び出してインテントハンドラを登録します。次のスニペット:

/**
* Define handler for intent and expect() it.
*/
const bookTableIntent = interactiveCanvas.createIntentHandler('reserveTable',
  matchedIntent => {
    console.log("Intent match handler to reserve a table was triggered!");
  });
var handler = interactiveCanvas.expect(bookTableIntent);

インテントハンドラを無効にする

インテントハンドラを定義したら、アクティビティに基づいて必要に応じてそのインテントを確認できますexpect() を呼び出して deleteHandler() メソッドを含むオブジェクトを返します。このメソッドを使用して、新しく作成されたハンドラを無効にします。インテントハンドラの定義は、そのインテントが現在アクティブではない場合、そのインテントに応じて必要ありません。

インテントハンドラを無効にするには、インテントハンドラで deleteHandler() を呼び出します。次のスニペットのようになります。

    /**
    * Define handler for intent and expect() it.
    */
    const bookTableIntent = interactiveCanvas.createIntentHandler('reserveTable',
      matchedIntent => {
        console.log("Intent match handler to reserve a table was triggered!");
      });
    var handler = interactiveCanvas.expect(bookTableIntent);
    
    // Delete the handler for `bookTableIntent`.
    handler.deleteHandler();

以下に示すように、expect() を呼び出して、無効化されたインテントハンドラを再度追加できます。次のスニペット:

    // Re-add the `bookTableIntent` handler.
    handler = interactiveCanvas.expect(bookTableIntent);

インテントを一括で無効にするには、clearExpectations() メソッドを使用します。現在有効になっているすべてのインテントを無効にします。次のスニペットは、すべてのインテントハンドラの要件を明確にします。

interactiveCanvas.clearExpectations();

クライアントでスロット充填を処理する

Actions Builder 内でシーンにスロット充填を追加する代わりに、ウェブアプリでのスロット充填を直接処理します

クライアントサイドでスロット充填を処理するには、まず次のいずれかの API を使用します。

createNumberSlot(callback, hints): カスタムマシンタイプを定義することができるメソッド番号スロットを追加します。ユーザーに番号の入力を求めるために使用されます。
createTextSlot(callback, hints): テキストを定義できるメソッド挿入できます。ユーザーに単語の入力を求めるために使用されます。
createConfirmationSlot(callback, hints): 以下を可能にするメソッド確認スロットを定義します。ユーザーにメッセージを表示するために使用確認します（はい/いいえ）。
createOptionsSlot(options, callback, hints): 以下を可能にするメソッドオプションスロットを定義します。ユーザーに次の操作を行うよう促すために使用します。事前定義されたオプションのリストから選択し

スロットを作成するときに、必要に応じて triggerHints を定義できます。自然言語理解（NLU）システムを改善するキーワードアクション。これらのキーワードは、ユーザーが発話する可能性のある短い単語にする必要がありますスロットを埋めるプロセスですたとえば、ナンバー枠の triggerHints キーワードは次のようになります。 years にします。会話で年齢に関する質問にユーザーが返信したときレスポンスが「I am 30 years age」の場合、アクションはユーザーがスロットに適切に入力していることを認識します。

時間枠を作成したら、prompt API を使用して、時間枠をユーザーに案内できます。

prompt(tts, slot): ユーザーに TTS を出力して、想定されるスロットが埋まるように促すメソッド。

prompt() を呼び出すと、スロットが埋まった状態になっています。

番号スロットを作成

番号スロットを使用すると、会議中にユーザーに番号の入力を求めることができます。あります。スロット充填について詳しくは、このモジュールのスロット充填セクションアクションビルダーのドキュメントをご覧ください

クライアントサイドでナンバースロットへの入力をユーザーに求める手順は次のとおりです。

createNumberSlot() メソッドを呼び出して、ウェブに番号枠を作成するアプリロジック:

/**
 * Create number slot.
 */
const triggerHints = { associatedWords: ['guess number', 'number'] };
const slot = interactiveCanvas.createNumberSlot(
  number => {
    console.log(`Number guessed: ${number}.`);
  }, triggerHints);

prompt() メソッドを呼び出して、ユーザーに時間枠の入力を促し、次のスニペットに示すように、返された Promise のスロット値を取得します。

const promptPromise = interactiveCanvas.prompt(
  { text: 'What number am I thinking of between 1 and 10?' }, slot);

promptPromise.then(
  answer => {
    if (answer.status == interactiveCanvas.AnswerStatus.ANSWERED) {
      // answer === {value: 5, status: ANSWERED}
      // Do something with answer.value
    } else {
      console.error('Promise returned unsuccessful status ' + answer.status);
    }
  });

テキストスロットを作成

テキストスロットを使用すると、チャット中にユーザーに単語の入力を促すことができるあります。スロット充填について詳しくは、このモジュールのスロット充填セクションアクションビルダーのドキュメントをご覧ください

クライアントサイドでテキストスロットの入力をユーザーに求める手順は次のとおりです。

createTextSlot() メソッドを呼び出して、ウェブアプリロジック内にテキストスロットを作成します。

/**
 * Create text slot.
 */
const triggerHints = { associatedWords: ['favorite color', 'color'] };
const slot = interactiveCanvas.createTextSlot(
  text => {
    console.log(`Favorite color: ${text}.`);
  }, triggerHints);

prompt() メソッドを呼び出して、ユーザーに時間枠の入力を促し、次のスニペットに示すように、返された Promise のスロット値を取得します。

const promptPromise = interactiveCanvas.prompt(
  { text: 'What is your favorite color?' }, slot);

promptPromise.then(
  answer => {
    if (answer.status == interactiveCanvas.AnswerStatus.ANSWERED) {
      // answer === {value: "red", status: ANSWERED}
      // Do something with answer.value
    } else {
      console.error('Promise returned unsuccessful status ' + answer.status);
    }
  });

確認スロットを作成

確認スロットを使用すると、ユーザーに確認を求めることができます（ユーザーは「はい」と返信または「いいえ」など）。スロット充填について詳しくは、このモジュールのスロット充填セクションアクションビルダーのドキュメントをご覧ください

クライアントサイドで確認スロットに入力するようユーザーに促す手順は次のとおりです。手順は次のとおりです。

createConfirmationSlot() メソッドを呼び出して、確認スロットを作成するウェブアプリロジックを拡張できます

/**
 * Create confirmation slot (boolean).
 */
const triggerHints = { associatedWords: ['user confirmation', 'confirmation'] };
const slot = interactiveCanvas.createConfirmationSlot(
  yesOrNo => {
    console.log(`Confirmation: ${yesOrNo}`);
  }, triggerHints);

prompt() メソッドを呼び出して、ユーザーに時間枠の入力を促し、次のスニペットに示すように、返された Promise のスロット値を取得します。

const promptPromise = interactiveCanvas.prompt(
  { text: 'Do you agree to the Terms of Service?' }, slot);

promptPromise.then(
  answer => {
    if (answer.status == interactiveCanvas.AnswerStatus.ANSWERED) {
      // answer === {value: true, status: ANSWERED}
      // Do something with answer.value
    } else {
      console.error('Promise returned unsuccessful status ' + answer.status);
    }
  });

オプションスロットを作成

オプションスロットを使用すると、リソースのリストから選択するようユーザーに促すことができます。オプションが用意されています。スロット充填について詳しくは、このモジュールのスロット充填セクションアクションビルダーのドキュメントをご覧ください

クライアントサイドでオプションスロットの入力をユーザーに求める手順は次のとおりです。

createOptionsSlot() メソッドを呼び出して、オプションスロットをウェブアプリロジック:

/**
 * Create options slot (list selection).
 */
const triggerHints = { associatedWords: ['select fruit', 'choose fruit'] };
// Define selectable options
const options = [{
  key: 'apple',
  synonyms: ['apple', 'large apple', 'gala apple'],
}, {
  key: 'banana',
  synonyms: ['banana', 'green banana', 'plantain'],
}];
const slot = interactiveCanvas.createOptionsSlot(
  options,
  selectedOption => {
    console.log(`You have selected ${selectedOption} as your fruit.`);
  }, triggerHints);

prompt() メソッドを呼び出して、ユーザーに時間枠の入力を促し、次のスニペットに示すように、返された Promise のスロット値を取得します。

const promptPromise = interactiveCanvas.prompt(
  { text: 'Would you like a banana or an apple?' }, slot);

promptPromise.then(
  answer => {
    if (answer.status == interactiveCanvas.AnswerStatus.ANSWERED) {
      // answer === {value: 'apple', status: ANSWERED}
      // Do something with answer.value
    } else {
      console.error('Promise returned unsuccessful status ' + answer.status);
    }
  });

`triggerScene()`

triggerScene() API を使用すると、クライアントサイドフルフィルメントからの Interactive Canvas アクション。あり triggerScene()。クライアントサイドのフルフィルメントからサーバーサイドに切り替えることができます。ユーザーがアクセスする必要がある場合に、 Actions Builder のシステムシーン Webhook が必要ですたとえば、ユーザーがアクションを実行したときに triggerScene() を呼び出すことができます。アカウントをリンクする、または通知を受け取る必要がある。その後 Canvas プロンプトを使って、そのシーンをクライアントサイドフルフィルメントに送信します。

次のスニペットは、アクションに triggerScene() を実装する方法を示しています。

interactiveCanvas.triggerScene('SceneName').then((status) => {
  console.log("sent the request to trigger scene.");
}).catch(e => {
  console.log("Failed to trigger a scene.");
})

クライアントのホームストレージとユーザーストレージ

Webhook を使用してホームストレージとユーザーストレージの値を取得して設定する代わりに、クライアントサイドの API を呼び出して、ウェブアプリでホームストレージとユーザーストレージを処理します。自分のウェブアプリは複数のセッション（特定の世帯または条件の値にアクセスできます。できます。これらの API を使用すると、Interactive Canvas のレイテンシを短縮できます。アクション: 取得と設定のために Webhook を呼び出す必要がないため使用できます。

ウェブアプリのホームとユーザーのストレージについては、 Webhook に保存しますホームストレージとユーザーのストレージについて詳しくは、ホームストレージのドキュメントをご覧ください。およびユーザーのストレージ。

クライアントサイドのホームストレージ

ホームストレージでは、家族のメンバーがホームグラフで、共有します。たとえば、ユーザーが Interactive Canvas を再生するとゲームの場合、ゲームのスコアを家のストレージに保存できます。他の家族は、保存されたスコアでゲームのプレイを続けることができます。

アクションでホームストレージをサポートできるようにする手順は次のとおりです。

Actions Console で、[Deploy] >ディレクトリ情報 > その他の情報。
[Do your Actions use home storage?] の [Yes] チェックボックスをオンにします。

ウェブアプリでホームストレージに値を書き込むには、setHomeParam() を呼び出します。メソッドを呼び出します。次のスニペットをご覧ください。

interactiveCanvas.setHomeParam('familySize',  10).then(
      result => {
        console.log('Set home param success');
      },
      fail => {
        console.error(err);
      });

ウェブアプリでホームストレージから値を読み取るには、getHomeParam() を呼び出します。メソッドを呼び出します。次のスニペットをご覧ください。

interactiveCanvas.getHomeParam('familySize').then(
      value => {
        console.log(JSON.stringify(result));
      },
      err => {
        console.error(err);
      }
  );

既存のホームストレージをすべて削除するには、次に示すように resetHomeParam() メソッドを呼び出します。これを次のスニペットのようになります。

interactiveCanvas.resetHomeParam();

クライアントサイドのユーザーストレージ

ユーザーストレージを使用すると、特定の確認済みユーザーのパラメータ値を保存できます複数のセッションにわたって確認できますたとえば、ユーザーがゲームをプレイしている場合、ユーザーのためにゲームを保存できます。次のゲームプレイセッションで、ユーザーが同じスコアでゲームのプレイを継続できます。

ウェブアプリでユーザーストレージに値を書き込むには、setUserParam() を呼び出します。メソッドを呼び出します。次のスニペットをご覧ください。

interactiveCanvas.setUserParam('color',  'blue').then(
      result => {
        console.log('Set user param success');
      },
      err => {
        console.error(err);
      });

ウェブアプリでユーザーストレージから値を読み取るには、getUserParam() を呼び出します。メソッドを呼び出します。次のスニペットをご覧ください。

interactiveCanvas.getUserParam('color').then(
      value => {
        console.log(JSON.stringify(result));
      },
      err => {
        console.error(err);
      }
  );

既存のユーザーストレージをすべて削除するには、次に示すように resetUserParam() メソッドを呼び出します。これを次のスニペットのようになります。

interactiveCanvas.resetUserParam();

`setCanvasState()`

setCanvasState() メソッドを使用すると、インタラクティブアプリから状態データを送信できます。 Canvas ウェブアプリがフルフィルメントに対応し、ウェブアプリが以下の状態であることをアシスタントに通知します。状態を更新しました。ウェブアプリは、更新後の状態を JSON オブジェクトとして送信します。

setCanvasState() を呼び出しても、インテントは呼び出されません。変更後 setCanvasState() の呼び出し（sendTextQuery() が呼び出された場合、またはユーザークエリの場合）会話のインテント（setCanvasState() で設定されたデータ）に一致します。の後続のターンで使用できるようになります。あります。

次のスニペットでは、ウェブアプリが setCanvasState() を使用して Canvas の状態を設定します。 data:

JavaScript

this.action.canvas.setCanvasState({ score: 150 })

Webhook からの参照キャンバスの状態

保存されている Canvas の状態の値をフルフィルメントコード内で参照できます。参照 conv.context.canvas.state.KEY 構文を使用します。 KEY は、Canvas の状態の値が設定されたときに指定されたキーです。

たとえば、以前 Canvas にゲームのハイスコア値を保存したことがある場合です。 score パラメータとして渡すことにより、その値を参照します。フルフィルメントでその値にアクセスするには、conv.context.canvas.state.score を使用します。

Node.js

app.handle('webhook-name', conv => {
    console.log(conv.context.canvas.state.score);
})

プロンプト内でキャンバスの状態を参照する

保存された Canvas の状態値をプロンプトで参照できます。参照 $canvas.state.KEY 構文を使用します。 KEY は、Canvas の状態の値が設定されたときに指定されたキーです。

たとえば、以前 Canvas にゲームのハイスコア値を保存したことがある場合です。 score パラメータとして渡す場合は、$canvas.state.score を使用してその値を参照します。プロンプトでその値にアクセスできます。

JSON

{
  "candidates": [{
    "first_simple": {
      "variants": [{
        "speech": "Your high score is $canvas.state.score."
      }]
    }
  }]
}

条件内でのキャンバスの状態を参照する

保存された Canvas の状態値を条件で参照することもできます。宛先値を参照するには、canvas.state.KEY を使用します。 KEY はキャンバスの実行時に指定されたキーで、設定されます。

たとえば、以前 Canvas にゲームのハイスコア値を保存したことがある場合です。 score として指定し、999 のを使用して条件の格納された値を参照できます。 canvas.state.score。条件式は次のようになります。

条件の構文

canvas.state.score >= 999

`sendTextQuery()`

sendTextQuery() メソッドは、テキストクエリを会話型アクションに送信して一致させることもできます。このサンプルでは sendTextQuery() を使用して再起動します。ユーザーがボタンをクリックすると、三角形が回転するゲームが表示されます。ユーザーが「再起動」アイコンsendTextQuery() は、次の単語を含むテキストクエリを送信します。 Restart game インテントに一致し、Promise を返します。この Promise の結果により、インテントがトリガーされた場合は SUCCESS、トリガーされていない場合は BLOCKED です。次のインテントに一致し、呼び出しの成功と失敗のケースを処理します。 Promise:

JavaScript

…
/**
* Handle game restarts
*/
async handleRestartGame() {
    console.log(`Request in flight`);
    this.button.texture = this.button.textureButtonDisabled;
    this.sprite.spin = false;
    const res = await this.action.canvas.sendTextQuery('Restart game');
    if (res.toUpperCase() !== 'SUCCESS') {
        console.log(`Request in flight: ${res}`);
        return;
    }
    console.log(`Request in flight: ${res}`);
    this.button.texture = this.button.textureButtonDisabled;
    this.sprite.spin = false;
}
…

Promise の結果が SUCCESS の場合、Restart game Webhook ハンドラはウェブアプリへの Canvas レスポンス:

JavaScript

…
app.handle('restart', conv => {
  conv.add(new Canvas({
    data: {
      command: 'RESTART_GAME'
    }
  }));
});
…

この Canvas レスポンスは、onUpdate() コールバックをトリガーし、次の RESTART_GAME コードスニペットに置き換えます。

JavaScript

…
RESTART_GAME: (data) => {
    this.scene.button.texture = this.scene.button.textureButton;
    this.scene.sprite.spin = true;
    this.scene.sprite.tint = 0x00FF00; // green
    this.scene.sprite.rotation = 0;
},
…

サーバーサイドフルフィルメントでビルドする

Webhook には、次の Interactive Canvas API を実装できます。

全画面モードを有効にする

Interactive Canvas ウェブアプリにはデフォルトでヘッダー画面上部にアクションの名前が表示されますenableFullScreen を使用できます。ヘッダーを削除して、ヘッダー部分を読み込み画面: ユーザーがアプリを全画面表示にできます。アクションとやり取りできます。トーストメッセージにアクションの名前、デベロッパーの名前、アクションの終了手順、トーストが表示されます。ユーザーがデバイスでテーマとして選択した内容に応じて、色が変化します。

で確認できます。

ユーザーが頻繁にアクションを操作する場合は、トーストメッセージが一時的に読み込み画面に表示されなくなります。ユーザーがニュースメディアとのしばらくすると、アクションを起動するとトーストメッセージが再表示されます。

全画面モードを有効にするには、Webhook 内で、またはアクションビルダー

Webhook で全画面モードを有効にする手順は次のとおりです。

最初の canvas レスポンスで enableFullScreen フィールドを true に設定します。 Webhook によって返されるメッセージです。次のスニペットは実装する方法を説明します。

 const { conversation, Canvas } = require('@assistant/conversation');
 const functions = require('firebase-functions');

 const app = conversation();

 app.handle('invocation_fullscreen', conv => {
   conv.add(new Canvas(
     {
       url: 'https://example-url.com',
       enableFullScreen: true
     }));
 });

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

Actions Builder の静的プロンプトで全画面モードを有効にする手順は次のとおりです。

Actions Console でプロジェクトを開きます。
ナビゲーションバーで [Develop] をクリックし、最初の canvas レスポンス。

次のスニペットに示すように、enable_full_screen を true に設定します。

 {
  "candidates": [
    {
      "canvas": {
        "url": "https://example-url.com",
        "enable_full_screen": true
      }
    }
  ]
}

`continueTtsDuringTouch`

デフォルトでは、ユーザーが Interactive Canvas の使用中に画面をタップしたとき TTS の再生が停止します。TTS を有効にして再生を継続できますユーザーが continueTtsDuringTouch で画面をタッチしたとき。この動作は実行できません。オンとオフを同じセッションで切り替えられます。

この動作は、Webhook または静的プロンプトで実装できます。追加します。

ユーザーが Webhook で画面をタップした後に TTS を有効にして続行できるようにするには、次の手順を行います。このステップ:

最初の canvas レスポンスで continueTtsDuringTouch フィールドを true に設定します。 Webhook によって返されるメッセージです。次のスニペットは実装する方法を説明します。

const { conversation, Canvas } = require('@assisant/conversation');
const functions = require('firebase-functions');

const app = conversation();

app.handle('intent-name', conv => {
  conv.add(new Canvas(
    {
      url: 'https://example-url.com',
      continueTtsDuringTouch: true
    }));
});

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

ユーザーが静的なプロンプトで画面をタップした後、TTS が続行されるようにするには、次の手順に沿って操作します。

Actions Console でプロジェクトを開きます。
ナビゲーションバーで [Develop] をクリックし、最初の canvas レスポンス。

次のスニペットに示すように、continue_tts_during_touch を true に設定します。

  {
   "candidates": [
     {
       "canvas": {
         "url": "https://example-url.com",
         "continue_tts_during_touch": true
       }
     }
   ]
 }

クライアントまたはサーバーサイドのフルフィルメントを使用してビルドを継続する

クライアントサイド フルフィルメントでビルドする

outputTts()

クライアントでインテント フルフィルメントを処理する

インテント ハンドラを有効にする

インテント ハンドラを無効にする

クライアントでスロット充填を処理する

番号スロットを作成

テキスト スロットを作成

確認スロットを作成

オプション スロットを作成

triggerScene()

クライアントのホーム ストレージとユーザー ストレージ

クライアントサイドのホーム ストレージ

クライアントサイドのユーザー ストレージ

setCanvasState()

JavaScript

Webhook からの参照キャンバスの状態

Node.js

プロンプト内でキャンバスの状態を参照する

JSON

条件内でのキャンバスの状態を参照する

条件の構文

sendTextQuery()

JavaScript

JavaScript

JavaScript

サーバーサイド フルフィルメントでビルドする

全画面モードを有効にする

continueTtsDuringTouch

クライアントサイドフルフィルメントでビルドする

`outputTts()`

クライアントでインテントフルフィルメントを処理する

インテントハンドラを有効にする

インテントハンドラを無効にする

テキストスロットを作成

オプションスロットを作成

`triggerScene()`

クライアントのホームストレージとユーザーストレージ

クライアントサイドのホームストレージ

クライアントサイドのユーザーストレージ

`setCanvasState()`

`sendTextQuery()`

サーバーサイドフルフィルメントでビルドする

`continueTtsDuringTouch`