Interactive Canvasと音声レスポンスにラグがある

[成谷允]

こんにちは以下のような形でWebページと音声を一緒に返しているのですが、画面が表示された後、3、４秒後に音声が流れ始めます。（結構ラグがあります）

以前はラグを感じなかったのですが、気づいたらラグが生じるようになっていました。

無料版でやっているのですが、クオーター等には該当するような箇所はありませんでした。

https://cloud.google.com/dialogflow/quotas

どのようなことが問題として考えられますでしょうか？

return conv.ask('hello')

.ask(new ImmersiveResponse({
  url: `https://hoge.com`,
  suppress: false

[Yoichiro Tanaka]

こんにちは。洋一郎です。

以下のような形でWebページと音声を一緒に返しているのですが、画面が表示された後、3、４秒後に音声が流れ始めます。

その現象を確認しているのがどのデバイスかにもよりますが、何もしなくても完璧に画面表示と音声がぴったり同時に再生される、という感じではなく、確かに少々のズレは常に発生している体感はありますね。3, 4 秒ほどのズレは今まで感じたことはないですが、起き得ないことではないかもしれません。

「音声再生 -> (3, 4 sec) -> 画面表示」だと対応は厳しいと思うのですが、今回のケースは「画面表示 -> (3, 4 sec) -> 音声再生」なので、対応できる（ズレを発生させない）可能性はあるかと思います。その方法は、onTtsMark() コールバック関数をうまく使う方法です。

以下のコードで onTtsMark() コールバック関数を登録しておくと、

assistantCanvas.ready({
  onTtsMark(name) {
    if (name === 'START' && <something>) {
      document.querySelector('<something>').style.display = 'block';
    }
  }
});

Googleアシスタントが発話したタイミングで onTtsMark() コールバック関数が呼び出されます。その際に、name 引数には "START" が渡されます（発話終了時には "END" が来る）。この "START"が渡されたタイミングで画面表示を動的に行う（例: CSSの操作で div 要素の display を none -> block にする）ことで、音声の発話開始タイミングと画面の表示タイミングを合わせることが可能かと思います。

どうしてもズレが気になる場合は、上記のようにコールバック関数をうまく使って、画面の操作を発話タイミングに合わせて明示的に行ってあげればよいかと思います。試してみてください。

ご参考になれば幸いです。ではでは。

-Yoichiro

2019年7月4日木曜日 21時58分42秒 UTC+9 成谷允:

[成谷允]

こんにちは。いつもありあがとうございます。

同期をとる方法、参考になりました。ありがとうございます。

しかしながら今回一番気にしていることは、 `発話してくれるのが遅すぎる` という点にあります。

NestHubの実機３台で試しても、wifi環境を変えても発話が遅いので、実装の仕方が悪いのでしょうか...。

2019年7月5日金曜日 10時37分53秒 UTC+9 Yoichiro Tanaka:

[Yoichiro Tanaka]

こんにちは。洋一郎です。

しかしながら今回一番気にしていることは、 `発話してくれるのが遅すぎる` という点にあります。

発話が遅い理由は、例えばCloud Functionsで実装しているのであれば、初回のリクエストはどうしてもプロセスが起動する時間がかかるために数秒かかる、とかサーバ側の遅延が影響することがほとんどかと思います。

ただ、最初のお問い合わせで「画面の表示は早い、しかし発話が遅い」となると、Google Nest Hub や Google アシスタント側の処理の都合の話となるかと思いますので、原因の特定をしたければ Google にお問い合わせされたほうが良いかと思います。

-Yoichiro

2019年7月5日金曜日 11時32分32秒 UTC+9 成谷允:

[成谷允]

こちらですが、毎回ImmersiveResponseにurlを含めて返しているのが原因な気がしてきました。

サイトはSPAで構築しており、URLでのルーティングを行っているのですが、どうやら毎回ブラウザが破棄されて再読み込みされているような挙動がします。

（AndroidのGoogleアシスタントでその挙動を確認）

NestHubやシミュレーターではそのような動きがなかったので、同じサイトであればてっきり PCのブラウザ上で直接URLだけ書き換えるような動作 をしてくれるのかと勘違いしていました。

結論としては、Dialogflow側からstateでルーティングに使っていたパスを与え、onUpdateで受け取った中でURLでのルーティングをすることでサクサク動きそうでした。

2019年7月4日木曜日 21時58分42秒 UTC+9 成谷允: