Voiceflow夏休みAdvent Calendarの27日目です。1日遅れてしまい申し訳ありません。ちょっと疲れが出てきましたがなんとかキャッチアップしていきたい・・・
今日は、APLでの画面遷移についてご紹介します。APLについては、TIPS #9で、ことはじめ、的にご紹介しましたが、単に表示できるよ、というだけで、やっぱりシーンに合わせて画面を変更したりとかしたいですよねー。Voiceflowならブロック並べるだけだしかんたんじゃん、と思われる方もおられるかと思いますが、だいたいハマります。ということで、ハマるところも含めて一度やってみましょう。
まず、スキルのイメージはこんなかんじにしましょう。画像が画面に出るような感じだと思ってください。
アレクサ、「今日の晩ごはん」をひらいて
今日の晩御飯です。晩御飯におすすめのメニューを提案するよ。今日のおすすめは・・・
カレーライス、
お寿司、
ハンバーグ、
です。どれか気に入ったものはありますか？
たしかにこうなるといいですよねー。さてできるでしょうか？
画面の設計
まず最初に今回必要な画面は以下の４つです。
- 起動直後に表示される挨拶の画面（コックさんの画像を表示します）
- カレーが表示される画面
- お寿司が表示される画面
- ハンバーグが表示される画面
それぞれのページ向けに別々にテンプレート作ってもいいんですが、同じような設定があるのも無駄ですよね。なので、一つのテンプレートの中で画像名だけを変数に入れて、画面遷移ごとに切り替えるようにします。ここは後で説明します。
画像の準備
APLで使う画像を予め用意しましょう。今回は皆さんご存知「いらすとや」さんの画像を利用させていただきました。画面表示を踏まえて少しサイズ等は調整してあります。（今回のスキルをご自身で試される場合にはダウンロードしてお使いいただけますが、著作権および利用については「いらすとや」さんの利用規約をご確認ください。）
また、APLで画像を使う場合、Voiceflowにアップロードして使うことができませんので、どこかで別の場所において公開する必要があります。私の場合はAmazon S3に置きました。Dropbox等で公開用リンクを作るのもよいかもしれません。以下、参考までに。
APLテンプレートの作成
APLのオーサリングツールでテンプレートを作っていきしょう。基本的に前回と同じです。Display Blockをおいて、メニューから「Add Displays」をクリックします。
最初なので「New Display」をクリックします。
テンプレート作成画面で、「AuthoringTool」をクリックします。
テンプレートは画像表示サンプルにします。今回の場合だとメニュー的なやつのほうが合うと思うんですが、画面遷移を試したいわけなので。
テンプレートが表示されたら、「コードの書き出し」でテンプレートファイル（apl_template.json）をダウンロードしてください。
Voiceflowに戻りましょう。先程のテンプレートをアップロードします。
アップロードされたら、とりあえず名前をつけましょう。"Base"にしました。で、今回は「Save」する前に少しAPLの中身をいじります。
下に黒枠が２つ表示されていると思うんですが、右側の「Default Datasource（Optional）」の下の方を、
以下のような記載があると思います。
・・・
"image": {
"contentDescription": null,
"smallSourceUrl": null,
"largeSourceUrl": null,
"sources": [
{
"url": "https://d2o906d8ln7ui1.cloudfront.net/images/MollyforBT7.png",
"size": "small",
"widthPixels": 0,
"heightPixels": 0
},
{
"url": "https://d2o906d8ln7ui1.cloudfront.net/images/MollyforBT7.png",
"size": "large",
"widthPixels": 0,
"heightPixels": 0
}
]
},
"logoUrl": "https://d2o906d8ln7ui1.cloudfront.net/images/cheeseskillicon.png",
"hintText": "Try, \"Alexa, search for blue cheese\""
}
}
上記に２箇所同じURLがあると思います。
"url": "https://d2o906d8ln7ui1.cloudfront.net/images/MollyforBT7.png",
これ表示するとわかるんですが、
ですね。APLのテンプレートの中心に表示されている画像のURLになってます。ここを変数に置き換えて動的に画面変更したいと思います。
上記の記載を以下のように変えてから、「Save」をクリックします。
"url": "{gazo}",
ここだけはいつもの"{"を入力してから変数を選択する感じじゃなくて、そのまま入力してOKです。
保存したら、キャンバスに戻ります
フロー
ではフローを作っていきましょう。
まず、最初に、APLのテンプレートの中に記載した、画像のURLを入れておくための変数、"{gazo}"を作成します。
で、とりあえず最初の挨拶のところまでのフローを作ります。
Set Block、Display Block、Speak Blockの３つだけですね。順番に見ましょう。
Set Blockでは画像のURLを変数"{gazo}"にセットします。最初 はコックさんの画像のURLにします。
Display Blockは一旦飛ばして、Speakブロックには最初の挨拶をセットします。
で、Display Blockです。前回と同じようにドロップダウンリストから作成したテンプレートを選択すると、下にテンプレートの内容が表示されます。
で、もう一つ、「Update Variable Changes」というチェックボックスがあるのがわかるでしょうか？
ここにチェックを入れると、「変数の内容が変わった場合、APLテンプレート内の変数もそれに応じて変化し、画面が更新される」のです。これすごいですね！これにチェックを入れておけば、Set Blockで変数の内容＝画像のURLを変えるたびに画面が動的に変わりそうです！
まずはここまでで一旦テストしてみましょう。
はい、ここまでは前回とほとんど同じですね、ただきちんとSetで設定した変数がAPLで読み込まれているのがわかりますね。
ではいよいよ画面遷移させてみましょう。さっきのブロックをまるっとコピーして、以下のようにします。
で、少し修正します。Set Blockで指定している画像のパスを、カレーライスの画像のURLに変えてください。
Speak Blockのメッセージも変えます。
Display Blockは動的に書き換わるはず！さぁ、テストしてみましょう！
いきなりカレーの画像になりますね、最初に出てきていたはずのコックさんの画像が出てきません・・・
とりあえず、一旦、お寿司とハンバーグのところも続けて作ってみましょう。で、テスト・・・
やっぱりだめですね・・・一番最後のものしか表示されません。発話はちゃんとされているのに・・・動的に変わると書いてあったのは嘘なんでしょうか・・・・？
原因
ということで、原因を探るために、こうしてみましょう。
画像を表示したあとの発話のあとに、Interaction Blockをおいて「YesIntent」を設定、「はい」といった場合に進むようにしてみました。さあ今度はどうでしょうか？
あれ、今回はうまくいきました、なぜでしょう・・・・？
実はこれ、一度過去にも説明しています。
この「1回の応答」というのはどういうことでしょうか？猫の豆知識スキルのサンプルで説明します。
Alexaからの発話（音声や音楽含めて）が「1回の応答」になるということですね。これをVoiceflowに置き換えてみます。
Speak Blockの中で音声ファイルを使っていて、その後、Interaction Blockでユーザ発話を受け取る感じですね。Speak Blockが3つに別れていますが、Interaction Blockでユーザ側の発話になるまでは、Speak Blockを何個並べても、Alexaの発話としては1回の応答になるという点に注意してください。
なので、これもブロックの数は違うけど、中身的には同じになります。
Speak Blockの数がアレクサからの応答の数、ではないということ、・・・
つまり、APLも同じことで、１回のアレクサからの発話の中に、APL＝Display Blockは１回だけ指定できるということですね。一番最初のテストで、最後にDisplay Blockで指定した画像だけが表示されていたのは、Speakはたくさん並べるとまとめて一つになりますが、APLの場合は性質上一つにまとめることができないので、最後のものだけが表示されていたという理由なんですね。あと、これ、カードにも同じことが言えます。
要は、アレクサからの１回の発話の中には、
- Speak Blockで話すこと
- Display Blockで表示する内容
- Card Blockで表示する内容
などがまとめて返されてくるということです。このあたり、ブロックを並べて実行させる感覚だと、なかなか理解しにくいところだと思いますが、非常に重要な概念なのできちんと理解してください。
余談
実は、ユーザの発話を挟まなくても動的に画面を書き換える方法があります。それが「APL Pager」です。
これを使うと、1つのAPLテンプレートの中で画像の切り替えを行ってくれます。少し難易度が高いのですが、興味があればぜひチャレンジしてみてください！
ということで、APLの話、２回目でした。VUIを始めたばかりだと、少し考え方が難しいかもしれませんが、実はこれ、プログラム書いてると普通に理解できたりするんです。なのでVoiceflowでスキル開発に慣れてきたら、すこしづつでもいいので是非プログラム書いてスキル作ることにも挑戦してみてほしいです。Voiceflowのようなノンコーディングでのスキル開発と、ask-sdkを使ったプログラムでのスキル開発、それぞれの理解を深めていくと、お互いに相乗効果でさらに効率がよいスキル開発ができると思っています。
