kun432's blog

Alexaなどスマートスピーカーの話題中心に、Voiceflowの日本語情報を発信してます。たまにAWSやkubernetesなど。

〜スマートスピーカーやVoiceflowの記事は右メニューのカテゴリからどうぞ。〜

Voiceflowの新しいステップ、Directive Stepがリリースされました!

f:id:kun432:20210210123614p:plain

Voiceflowの新機能、「Directive Step」がAlexa・Google両方向けにリリースされましたので、ご紹介します。

これまでVoiceflowは各機能のことを「ブロック」といってきましたが、正式には「ステップ」という言い方に変わっていますので、今後は「ステップ」で統一します。

Directive Stepとは?

Directive Stepについては、以前APL for Audioのβテストでご紹介しています。

kun432.hatenablog.com

AlexaもGoogleも基本的に同じですが、スキルから返す発話させたい内容だけではなく、付加情報(例えば画面付きデバイス向けの画像や、回答のヒントなど)もセットにして返すことができます。これを「ディレクティブ」を言います。(厳密には「ディレクティブ」はAlexaでの言い方で、Googleでは発話させる内容も含めて「プロンプト」といいます。)

早速やってみましょう。

サンプルスキル

例によって、コーヒーショップの注文を受け付けるサンプルをGoogle向けプロジェクトで用意しました。

f:id:kun432:20210210185138p:plain

対話モデルもこんな感じで。

f:id:kun432:20210210185207p:plain

f:id:kun432:20210210185223p:plain

Directive Stepを使ってみる

Directive Stepはメニューの一番下にあります。

f:id:kun432:20210210190324p:plain

これをSpeakとChoiceの間に入れます。発話とセットで返すのが基本になるかと思いますので、Speakと一緒に使うことになると思います。

f:id:kun432:20210210190110p:plain

Directive Stepの設定画面はこんな感じです。マルっと入力欄だけがあって何をしていいのかわからないかもしれません。

f:id:kun432:20210210190429p:plain

ここではVoiceflowの公式ドキュメントの手順に従ってやってみましょう。画像つきのカードを表示してみたいと思います。以下のような内容をDirerctive Stepの設定に記載します。

{
  "content":{
    "card":{
      "title":"カードのタイトル",
      "subtitle":"カードのサブタイトル",
      "text":"カードのコンテンツ",
      "image":{
        "alt":"画像の代替名",
        "height":0,
        "url":"https://developers.google.com/assistant/assistant_96.png",
        "width":0
      }
    }
  }
}

f:id:kun432:20210210213447p:plain

アップロードします。

f:id:kun432:20210210192136p:plain

テストシミュレータを開きます。

f:id:kun432:20210210192147p:plain

テストしてみましょう。発話も同時に、カードが表示されているのがわかりますでしょうか?

f:id:kun432:20210210214250p:plain

拡大するとこんな感じです。ちゃんと画像や説明が表示されていますね。

f:id:kun432:20210210214452p:plain

上記はスマートディスプレイ(Nest Hub等)での表示結果でした。一旦テストをキャンセルしてデバイスを"Phone"に変えてみましょう。

f:id:kun432:20210210214944p:plain

f:id:kun432:20210210214954p:plain

再度テストするとこのようにスマホ上での表示イメージが表示されます。

f:id:kun432:20210210215035p:plain

アクションの内容に合わせて内容や画像を変えるととこういう感じに表示できるということですね。

f:id:kun432:20210210215550p:plain

なお、画像は以下を利用させていただきました。ありがとうございます。

https://pixabay.com/images/id-1031526/

Directiveの設定方法

サンプルではカードを表示させるディレクティブを設定しましたが、いきなりではわからないですよね。ディレクティブの設定方法はGoogleのドキュメントを見るとわかります。

ここにプロンプト、つまり、Googleで返せるレスポンスの一覧が載っています。残念ながら日本語訳はまだないようです・・・

f:id:kun432:20210210220554p:plain

カードの場合はどうなっているかを見てみましょう。左のメニューの"Prompts"の"Rich"をクリックします。

f:id:kun432:20210210220711p:plain

少し下にスクロールすると、"Basic Card"というのがあります。表示例からもわかると思いますが、これが先ほどのサンプルで使った「カード」についての説明です。

f:id:kun432:20210210221024p:plain

さらにスクロールすると、設定できるプロパティの一覧があって・・・

f:id:kun432:20210210221700p:plain

さらに下にスクロールするとありました、サンプルコードです。

f:id:kun432:20210210222013p:plain

コードの種類がいくつかあるのですが、"JSON Builder"を選択します。

f:id:kun432:20210210222325p:plain

はい、これがカードのサンプルのレスポンスです。

f:id:kun432:20210210222551p:plain

ただし、これはレスポンス全体です。つまり、ディレクティブで設定するカード部分だけでなく、発話部分も含んでいます。Voiceflowの場合、発話はSpeak Stepがやってくれるので、こういうことになります。

f:id:kun432:20210210223034p:plain

つまり、発話以外の部分をコピーして、Directive Stepにペーストして修正すればよいということです。1点だけ注意すべきなのは、JSONはカッコにより階層構造が表現されています。Directive Stepに設定する場合は、

"content": {
  "card": {
    "title": "Card Title",
    "subtitle": "Card Subtitle",
    "text": "Card Content",
    "image": {
      "url": "https://developers.google.com/assistant/assistant_96.png",
      "alt": "Google Assistant logo"
    }
  }
}

ではなく、以下のように外側を"{}"で囲んで、1階層下に設定する必要がある点にご注意ください。

{      // ココが必要
  "content": {
    "card": {
      "title": "Card Title",
      "subtitle": "Card Subtitle",
      "text": "Card Content",
      "image": {
        "url": "https://developers.google.com/assistant/assistant_96.png",
        "alt": "Google Assistant logo"
      }
    }
  }
}      // ココが必要

いろいろなディレクティブがあるので、ぜひドキュメントを見て試してみてください!

まとめ

Alexaの場合、VoiceflowがいろいろなAlexa専用機能のステップを予め用意していることもあり、APL for Audioを使わない限り、Directive Stepを利用することは(現時点では)あまりないかもしれません。 Googleの場合は、独自のStepがあまり用意されていないこともあり、Directive Stepを使うと表現の幅が増えますし、特にスマホのGoogleアシスタントでリッチな表現ができるのが大きいです。

JSONのフォーマットを理解する必要があるため、少し技術的な内容になってしまいますが、がんばってぜひトライしてみてください!