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

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

まずは小ネタから。

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

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

www.youtube.com

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

スキルの全体図

f:id:kun432:20190809014609p:plain

ざっくりでいうと、

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

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

変数の作成

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を書いて登録することになるのですが、アレを１から書くのは正気の沙汰ではないのでツールの力を借りましょう、"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