kun432's blog

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

Voiceflow TIPS #9 ディスプレイ対応デバイスか?をチェックする 〜Voiceflow APLことはじめ〜

Voiceflow夏休みAdvent Calendarの9日目です。すいません、ちょっと遅れましたので、この週末にキャッチアップ予定・・・

まずは小ネタから。

Voiceflowは、APLにも対応していますので、画面付きデバイス向けにビジュアルも付与したスキルを作成することができます。ただし、当然のことながら画面なしデバイスには画面出力ができませんので、スキル側できちんと画面の有無をチェックしてあげる必要があります。

公式からもTIPSが紹介されています。

www.youtube.com

これ、英語で、かつ、ちょっとわかりにくいところもあるので、少しわかりやすく修正して、かつ、画面付きスキルの場合は実際に画面表示を行ってみたいと思います。


スキルの全体図

f:id:kun432:20190809014609p:plain

ざっくりでいうと、

  1. 最初のCode BlockでAPL対応かどうかのチェックを行うコードを書く
  2. If Blockでその結果をもとに分岐
  3. 対応の場合はDisplay Blockで画面出力するとともに、対応していることをしゃべる
  4. 非対応の場合は、画面表示をせずに、非対応であることをしゃべる

って感じです。一つづつ見ていきます。

変数の作成

f:id:kun432:20190809010301p:plain

最初に、Code Blockで取得したAPL対応チェックの結果を入れておくための変数を作成します。ここではフロー変数で"hasDisplay"としました。

Code Block

ここでAPL対応かどうかをチェックします。以下のコードを入力します。

f:id:kun432:20190810030049p:plain

if (voiceflow.capabilities && ('Alexa.Presentation.APL' in voiceflow.capabilities)) {
  hasDisplay = 1;
} else {
  hasDisplay = 0;
}

voiceflow.capabilitiesというのは、Voiceflowが持っているビルトインの変数というかオブジェクトです。この中に、今使っているデバイスがどういう機能をサポートしているかの情報が入ってます。APL対応機種、すなわち、画面付きデバイスの場合は Alexa.Presentation.APL というオブジェクトが入ってくるのでこれがあるかどうかをチェックするというわけですね。API対応していれば 1 、非対応であれば 0がhasDisplayに入ります。

(ここ、少し公式の書き方を変えてます。公式の書き方だと、If Blockの設定でハマるケース多そうなので、シンプルな数値比較でできるようにしました。)

If Block

ここで、先程のhasDisplayで分岐させます。

f:id:kun432:20190810030326p:plain

hasDisplayが1ならば画面付きのフローに進みます。それ以外は画面なしのフローに進みます。

Display Block

APLの画面表示にはDisplay Blockを使います。実際にサンプルを設定してみましょう。Display Blockをクリックして"Add Displays"をクリックします。

f:id:kun432:20190810030646p:plain

"New Display"をクリックします。

f:id:kun432:20190810031019p:plain

APLのテンプレートを登録する画面が表示されます。ここでAPLのJSONを書いて登録することになるのですが、アレを1から書くのは正気の沙汰ではないのでツールの力を借りましょう、"Authoring Tool"をクリックしてください。

f:id:kun432:20190810031316p:plain

はい、スキル開発されたことのある方ならば一度は見たことがある、Alexa開発者コンソールにあるAPLオーサリングツールが表示されます。APLについてはさすがにVoiceflow側でもインタフェースはまだできてないということですね。なので、ここでAPLのテンプレートを作成して、JSONファイルダウンロードして、Voiceflow側でインポートするというのが、VoiceflowでのAPL設定の流れとなります。 今回はテストなので、予め用意してあるサンプルのテンプレートを使ってみましょう。「画面表示サンプル」をクリックします。

f:id:kun432:20190810031655p:plain

サンプルのテンプレートが表示されます。画面下部にあるダウンロードっぽいアイコンをクリックして、コードを書き出します。

f:id:kun432:20190810032036p:plain

するとapl_template_export.json というファイルがダウンロードされます。Voiceflow側に戻って、"Upload JSON File"をクリック、先程のapl_template_export.jsonを選択してアップロードします。

f:id:kun432:20190810032442p:plain

アップロードが完了すると、画面下部にAPLのJSONが表示されます。今回は特に修正しません。Display NameでAPLテンプレートの名前、Display Descriptionでテンプレートの説明メモを設定できます。今回は変更しませんが、適宜設定してください。終わったら右上のSaveで保存して、左上のCanvasをクリックしてフロー画面に戻ります。

f:id:kun432:20190810032802p:plain

フロー画面に戻ったら、Display Blockをクリックします。右側のメニューが最初とは変わっていることに気づくと思います。"Select Multimodal Display" のドロップダウンをひらいてみてください。

f:id:kun432:20190810033057p:plain

すると先程のAPLテンプレートが選べるようになっています。今回は特にテンプレート名を指定しなかったので"New Display"となっています。名前を指定した場合はその名前が表示されるかと思いますので、これを選択します。

f:id:kun432:20190810033157p:plain

こんな感じで、APLのJSONが表示されればOKです。これでDisplay Blockの設定は完了です。

f:id:kun432:20190810033520p:plain

Speak Block

ここは難しくないので割愛します。画面付きと画面なしで喋る内容を変えているだけなので、以下のキャプチャを御覧ください。

f:id:kun432:20190810033915p:plain

f:id:kun432:20190810033929p:plain

テスト

ではテストです。Alexa 開発者コンソールであればAPLのテストもできます。

f:id:kun432:20190810034156p:plain

画面が表示されていますね! APL非対応の場合のテストは実機でやってみました。(っていうか開発者コンソールでそういうのできないのかな・・・)

www.youtube.com

ちゃんとチェック結果で振り分けられていることがわかるかと思います。


ということで、APLことはじめ、な感じもあったので長くなったのですが、チェック自体は簡単にできます。ぜひご活用ください。