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

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

まずは小ネタから。

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

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

www.youtube.com

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

---

スキルの全体図

ざっくりでいうと、

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

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

変数の作成

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

Code Block

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

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で分岐させます。

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

Display Block

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

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

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

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

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

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

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

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

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

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

Speak Block

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

テスト

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

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

www.youtube.com

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

---

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

Voiceflow TIPS #7 Googleスプレッドシート連携で作る豆知識スキル

Voiceflow夏休みAdvent Calendarの7日目です。

今日から何回かに分けて、Googleスプレッドシート連携でできることをご紹介します。初回はよくある「豆知識スキル」を作ってみます。

スキルの実行イメージはこんな感じです。

---

アレクサ、猫の豆知識をひらいて

猫の豆知識です。このスキルでは猫の豆知識を教えるよ。では今回の豆知識。

（♪〜音楽〜）

猫は、1日の約70%を寝て過ごすそうです。

（♪〜音楽〜）

他にも聞きますか？

いいえ

また来てね。ニャーン🐱

---

豆知識の部分をGoogleスプレッドシートに登録しておいて、ランダムで拾う感じですね。では早速やっていきましょう。

Googleスプレッドシートの準備

最初にGoogleスプレッドシートに豆知識用のスプレッドシートを準備しておきましょう。

Googleスプレッドシートにログインして、スプレッドシートを新規作成します。

新規スプレッドシートで以下の通り変更します。

• スプレッドシート名を変更
• シートタブ名を変更（日本語だとVoiceflowでうまく動かない）
• A1がカラム名になるのでこれを変更（日本語でも大丈夫ですが、念のため）

A2以降に豆知識を追加します。

コピペ用のテキストを以下に貼っときますのでよろしければご利用ください。

猫は1日の約70%を寝て過ごすそうです。
日本で一番人気のある猫の種類は、スコティッシュ・フォールドだそうです。
猫が飛べる高さは、自分の脚の長さの6倍だそうです。
猫が汗を掻くのは、肉球だけだそうです。
猫は犬よりも耳が良い
猫を飼うことで、人間が病気にかかるリスクは3分の1になるそうです。
猫の心拍数は、人間の2倍だそうです。
猫の味覚には「甘味」がないそうです。
猫は起きている時間の50%をグルーミングをして過ごすそうです。
猫の利き腕は、メスが右で、オスが左だそうです。
猫の長期記憶は、犬よりも優れているそうです。
フランスのフェリセットという猫が、世界で初めて宇宙に行った猫だそうです。
猫の鼻の模様は猫ごとに違うので、人間の指紋と同じだそうです。
猫の指の数は、前足が５つで、後ろ脚は４つだそうです。
猫が首を傾げるのは、あいさつだそうです。
ネコの語源は、「よく寝る子」というところから来たと言われているそうです。
ネコの舌がザラザラしているのは、骨についた肉を削ぎ落とすためだそうです。
ラングドシャというお菓子の意味は、「猫の舌」だそうです。
猫がゆっくりとまばたきするのは、信頼できる友人だと思われているそうです。
猫がしっぽを左右にパタパタ振るのは、不機嫌な気持ちを表しているそうです。
猫がしっぽをゆっくり振るのは、嬉しいという気持ちを表しているそうです。
猫がしっぽを垂直にピンとしているのは、安心しているという気持ちを表しているそうです。

はい、これでGoogleスプレッドシートの準備はできましたので、次はVoiceflowです。

スキルの全体図

こんな感じです。たったこれだけで出来ちゃいます。

では順番に見ていきましょう。Speakなどのブロックは詳細を省いて、②のInteraction Blockのところを中心に書きます。

① Speak Block

挨拶となるブロックです。音楽つけて楽しい感じにするのが良いですね。SOUNDEVOTEEさんがDOVA-SYNDROME様で公開されている以下のジングル素材を利用させていただきました。

dova-s.jp

なお、こういった素材等を利用してスキルを作成する場合には、素材提供サイトや素材作成者様の利用規約等を必ず確認の上、ご利用ください。

② Integration Blockで、Googleスプレッドシート連携

今日のキモですね。順にやっていきましょう。

まず最初に変数を作っておきます。Googleスプレッドシートからランダムに取得した１行の豆知識を保存しておいてSpeakブロックで使うための変数です。今回はフロー変数で"factVar"という変数を作りました。この程度だとプロジェクト変数でも全然問題ないと思います。

では、Integration Blockをドラッグアンドドロップします。右のメニューから、"Google Sheets" を選択します。

今回はGoogleスプレッドシートのデータを読み込むだけなので、"Retrieve Data"を選択します。

次にGoogleスプレッドシートのアカウントと連携させます。"Add User"をクリックします。

Googleログインのボタンが表示されますので、クリックします。

ログインしてなければ、メールアドレスとパスワードを入力する画面が出るかと思います。ログインしている場合はメールアドレスの選択画面が表示されるので、先程のスプレッドシートを作成したアカウントを選択します。

VoiceflowからGoogleスプレッドシートへのアクセスを許可するかどうかを聞かれますので、「許可」をクリックします。

アカウント連携が完了すると以下の画面が表示されますので「Confirm」をクリックします。

アカウントがリンクされていることがわかりますね。ここで自分のアカウントをクリックします。

スプレッドシートのドロップダウンを選択すると、Googleスプレッドシートに保存してあるスプレッドシートが全部表示されるので、該当のスプレッドシート、ここでは「猫の豆知識」を選択します。

次にシートタブのドロップダウンを選択します。「猫の豆知識」のスプレッドシートには"Sheet1"しかないので、これを選択します。

ここで取得するデータの条件を指定することができます。Row Numberを指定すると何行目のデータ、という感じですね。ただ、今回のスキルでは、条件を指定せずにランダムに引っ張ってきたいだけなので、特に条件指定は不要です。左の方はどちらでもよい（今回はRow Numberを選択）ので選択して、右は空のままでOKです。右を空にすることでランダムに一つだけ取得するという動きになります。

終わったらNextをクリックします。

次に取得したデータと変数のマッピングを行います。左は取得するデータのカラム名を指定します。スプレッドシートのA1に指定していた”Mamechishiki”を選択します。

取得したデータを入れておく変数を指定します。最初に作成したフロー変数"factVar"を選択します。

マッピング完了するとこんな感じになります。Nextをクリックします。

これですべての項目にチェックが入りました。Integration Blockではここで接続テストができます。"Test Integration"をクリックします。

はい、こんな感じで結果が返ってきます。何度繰り返すと値がランダムに取得できているのがわかると思います。

Integration Blockはこれで完了です。ここで取得したデータをAlexaに喋らせます。

③ 取得したデータをSpeak Blockで喋らせる

スプレッドシートから取得した豆知識は"factVar"に入っているので、Speak Blockのテキストに入れて、これをAlexaに喋らせます。

以降の処理

これ以降は説明を割愛して画面キャプチャ貼っておきますのでそれを参考にしてください。流れでいうと、

• 豆知識を１回言ったあと、もう一度聞くか？を「はい」「いいえ」で確認する。
• 「はい」なら、「次の豆知識です・・・」みたいなSpeak Blockを挟んで再度Integration Blockに戻してループさせる。
• 「いいえ」なら終了させる。

って感じですので、難しくないと思います。

④ Interaction Block

⑤ Speak Block

⑥ Speak Block

⑦ Speak Block

---

Alexaスキル開発の最初のお題でよくある豆知識スキル、Voiceflowでもかんたんですね。実はGoogleスプレッドシートと連携させることなく、Voiceflow単体でもランダム出力を使えばできます。ただ、Googleスプレッドシートと連携することで、

• ロジックとデータを分けることができる、つまり、スキル公開後でも再審査に提出することなくデータの更新だけが可能。
• 誰でも使えるExcelライクなGoogleスプレッドシートなので、スキル開発開発を知らない方にデータのメンテナンスをお願いすることができる。開発と運用を分けれる。
• Integration Blockをもっと使いこなせば、データベースのような使い方も可能。

というメリットがありますので、積極的に活用していきたいですね。

そのあたりの使い方の一例を以下で紹介してますので、よろしければ御覧ください。

Voiceflow TIPS #6 ワンショット発話

勝手にVoiceflow 夏休みAdvent Calendarをはじめました。

ということで、この記事は6日目の記事です。（1日と2日どうしよ。。。）

今日のテーマは「ワンショット発話」。なんのことやら？と思う方もいらっしゃるかと思いますが、例を出すと、あー、ってなると思います。

---

普通のスキルの利用ってこんな感じですよね。

アレクサ、レシピスキルをひらいて

レシピスキルです。なんのレシピを知りたいですか？

カレーライスのレシピを教えて

カレーライスのレシピをご紹介します。・・・・

---

ワンショット発話の場合はこういう感じです。

アレクサ、レシピスキルで、カレーライスのレシピを教えて

カレーライスのレシピをご紹介します。・・・・

---

慣れてくるとワンショット発話のほうが便利ですよね！通常のAlexaスキル開発だと、インテント作れば勝手にこれを実現してくれるんですが、Voiceflowの場合は意図的に作ってあげる必要があります。以前ご紹介したハンズオンのサンプルスキル「我が家の食卓」をベースにやってみます。

vf-handson-01.netlify.com

サンプルスキル

スキルの全体像はこんな感じです。

詳細はハンズオン資料を見ていただきたいのですが、キモとなるのは中央のInteraction Blockです。

[recipe_name]スロットがレシピ名になり、以下のようなサンプル発話を受け付けるインテントになります。

カレーライスのレシピを教えて

肉じゃがのレシピを教えて

カルボナーラ

これでも十分動きそうなものなのですが、Voiceflowの場合は会話フローに沿って処理が行われるため、フロー「外」のインテントを受け付けてくれません。

そこでIntent Blockを使います。Intent Blockは基本的にInteraction Blockと中身は同じものです。ただし、通常のブロック、例えばInteraction Blockの場合、

入り口と出口があるのに対して、Intent Blockは、

入り口がなく、出口のみになっています。つまり、会話フローの途中で使うのではなく、会話フローがここからはじまり、かつ、それがインテントで始まるというわけです。

百聞は一見に如かず、やってみましょう。

Advancedの中にあるIntentを、Canvasのどこでもよいのでドラッグ＆ドロップします。

配置したIntent Blockをクリックするとメニューが出てきます。ここで一度、Intentsタブをクリックしてみましょう。

はい、見たことありますよね？Interaction Blockで設定したインテントです。

ちなみに、スロットもInteraction Blockのものと同じですね。

このように、Intent Blockでは、Interaction Blockで作成したインテントが共有されています。なので、会話フロー中で使っているインテントをフロー外でも共有することができるというわけですね。

ただし、Interaction Blockで設定していたIntentsのところだけは設定されませんので、ここだけ設定する必要があります。

"Select Intent"のドロップダウンをクリックして、インテントを選択します。ここではInteraction Blockと同じ「recipe」を選択します。

recipeを選択するとスロットと変数のマッピングが選択できるようになるので、ここもInteraction Blockと同じように設定します。ちなみにこの下にある"Can Fullfill Intent"は日本では非対応ですので無視してください。（Voiceflowが、というよりも、Alexa自体がまだ日本では非対応ですね）

Interaction Blockと同じように、サンプル発話で拾ったスロット値をIF Blockに渡して以降の処理を行うので、If Blockに線をつなげます。

はい、これで終了です。ではアップロードしてテストしてみます。普通に起動してインテントを実行する場合と、ワンショット発話の場合を試してみます。

呼び出し方が違うだけで、同じ動きになっています。あと、こんなふうに会話フローの途中で突然呼び出されても実行されます。

とてもかんたんですねー。

---

最近のVUIのベストプラクティス的に、フローチャート的な会話フローは行き詰まりやすい、様々なインテントを用意して多面的に多くのハッピーパスを作ることが重要、と言われています。

Voiceflowのような会話フローを作るツールにとっては非常に難しいことを言われているわけですが、だからといって会話のフローがゼロになるわけではありません。Voiceflowだと会話フローを効率的に作ることができる上、Intent Blockを使うことで、ワンショット発話や突然呼び出される場合などにも対応ができます。多くの会話の可能性に対応できるようにして使いやすいVUIスキルを作りたいものです。

ぜひご活用ください。