はじめに
本資料は、「Voiceflowハンズオン＆ワークショップ：インタラクティブな物語スキルを作ろう」のハンズオン用資料になります。
アカウントのセットアップなど事前準備は以下をご覧ください。
- Voiceflowハンズオン: アカウントのセットアップ手順
https://vf-handson-setup.netlify.com/#0
注意
更新履歴
- 2019/12/11 公開
ではNextをクリックしてください
本日皆さんに作っていただくスキルは「シンデレラ」のお話です。
皆さんもよくご存知のこのストーリーを以下のような工夫をすることで、楽しくインタラクティブなAlexaスキルにします。
- サウンドや効果音をたくさん使ってにぎやかな感じにします。
- 登場人物のキャラクターごとに声を使い分けます。
- 単にお話を聞くだけではなくて、ユーザの発話を元にストーリーが進んだり分岐したりします。
- プログラミング的な要素は今回は殆ど含めていません。
スキルの全体はこういう感じになっています。
- 物語部分は全4シーンで構成されています。時間の関係上、本来の「シンデレラ」よりも短くしています。
- 可能な限り、スムーズに進むようにコピペ用テキストを用意してます。
- ポイントとなるところは詳しく説明します。
- ご自宅に帰ってから実際に動かしてみたり、中身を確認できるように完成したものをダウンロードできるようにしておきます。
注意
では、がんばっていきましょう！
Nextをクリックしてください。
プロジェクトの作成
最初にプロジェクトを作成して、かんたんにVoiceflowの画面の説明を行います。
以下のURLにアクセスしてください。
https://voiceflow.com/
右上の"Log in"をクリック。
アカウント作成した際のメールアドレスとパスワードを入力して"Sign in"をクリックします。
プロジェクトの一覧画面が表示されます。Default Listと書いてあるところの一番下の"Create Project"をクリックします。
プロジェクト作成画面が開きますので、以下の通り設定して、最後に"Create Project"をクリックします。
- プロジェクト名
- 今回は「世界のおとえほん」と入力してください。
- スキルを呼び出すときのデフォルトの名前になります。（例：「アレクサ、◯◯◯を開いて」）
- 後でプロジェクト名と呼び出し名のそれぞれを変更することも可能です。
- 言語: "English(US)"のチェックを外して、"Japanese(JP)"にチェック
プロジェクトが作成されると"Canvas"画面が表示されます。"Canvas"画面がVoiceflowでスキルを作成する基本画面になります。
- 最初から用意してあるHome Blockの中にあるStartがスタート地点になります。
- 左のBlocksメニューにいろんな機能のBlockが用意されています。ここからBlockを選択してCANVAS上に配置します。
- CANVASに配置したBlockの設定を行い、アレクサに発話させたり、ユーザの発話を受け取ったりします。
- Block同士を線でつなげることで、会話の流れがつながっていきます。
- アップロードボタンをクリックすると、作成したプロジェクトがAlexa開発者コンソールにアップロードされ、Amazon Echoなどで呼び出せるようになります。
- Blocksメニュー以外にもいくつか別のメニューがありますが、後で説明します。
では早速やってみましょう。
CANVASとBlock
Voiceflowでは、いろんな機能を持ったBlockをCanvasに配置して線をつなぐことで、会話の流れを作ることになります。試しに少しやってみましょう。
左のBlocksメニューの一番上にある"Speak"というブロックを、最初から配置してあるHome Blockの右側あたりにドラッグ＆ドロップで配置してください。すると、画面の右側に別の設定画面が出てくると思います。
この設定画面の右上の入力欄に以下と入力してみてください。
世界のおとえほんにようこそ。このスキルでは、世界の有名な童話を楽しくおはなしします。
そして、Home BlockのStartの右端からSpeak Blockの左端までドラッグしながら線でつなげます。
はい、これが基本的な操作になります。かんたんですよね？おさらいでもう一つSpeak Blockをつなげてみましょう。
- 最初に配置したSpeak Blockの右側にもう一つSpeak Blockを配置します。
- Speak Blockの設定画面の入力欄に以下を入力します
では今日のお話は、シンデレラ。 - Speak Block同士を線でつなげます。
２回目なのでもう大丈夫ですよね。ちなみに、線を引き直したい場合は、線の始点側のブロックの四角をクリックするか、線の真ん中にカーソルを合わせると表示されるバケツアイコンをクリックすると消せます。
では作ったスキルを実際に動かしてみたいと思います。
スキルのアップロードとテスト
作成したスキルを動かすにはAlexa開発者コンソールへのアップロードが必要です。右上の"Upload to Alexa"というボタンをクリックしてください。
初回に限り、VoiceflowアカウントとAlexa開発者アカウントの紐付けが必要になります。"Connect Amazon"ボタンをクリックしてください。
Amazonアカウントのログイン画面が出てきますので、お持ちのAmazonアカウントでログインします。
VoiceflowからAmazonアカウント経由でAlexaスキル作成等の許可を求める画面が出てきますので、「許可」をクリックします。これでアカウントの紐付けは完了です。
アップロードが行われます。100%になるまで待ちます。
100％になって"Upload Successful"と表示されればアップロード完了です。ではAlexa開発者コンソールでテストしましょう。"Test on Alexa Simulator"をクリックしてください。
Alexa開発者コンソールのログイン画面が表示されたら、Amazonアカウントでログインしてください。
Alexa開発者コンソールのテストシミュレータ画面が表示されます。作成したスキルはここでほぼ実機と同じようにテストができます。
なお、この時、左上のところで「非公開」が選択されていた場合は「開発中」に変更します。
テストは文字だけでなく音声でも行なえます。まず最初にマイクを有効にしておきましょう。「許可」をクリックします。
ではいよいよテストです。「日本語」が選択されていることを確認して、マイクアイコンをクリックしたままマイクに「音絵本を開いて」と話しかけて、話し終わったら話してみてください。パソコンにマイクがない場合は、キーボードから入力してENTERキーを押してください。
あなたの発話に対して、Voiceflowで設定した内容をAlexaが返してくれればテストは成功です！これでスキル開発の第一歩を踏み出したことになります！おめでとうございます！
このように、Voiceflowでスキルを作成 → Alexa開発者コンソールにアップロード → Alexa開発者コンソールでテスト、というのがVoiceflowでのスキル開発の流れになります。
効果音やサウンドを使う（その１）
物語に大事なのは臨場感ですよね！サウンドを効果的に使うことでスキルを楽しいものにすることができます。そしてAlexaやVoiceflowでもサウンドを使ったスキルを作ることができます!ここではサウンドの使い方にトライしてみましょう！
サウンドの使い方は以下の３通りがあります。
- 「Alexa Skills Kitサウンドライブラリ」を使う
- mp3ファイルをVoiceflowにアップロードする
- mp3ファイルのURLを指定する
ここでは、２番めのmp3ファイルアップロードやってみましょう。
mp3ファイルをVoiceflowにアップロードする
自分で作成した効果音や、フリーで配布されているmp3ファイルなどをアップロードして、スキル内で再生することができます。今回はサンプルとして多数の効果音素材を公開されている「効果音ラボ」様のものを使用させてもらいましょう。
- 以下のURLをクリックしてみてください。
https://soundeffect-lab.info/sound/anime/ - 上記ページにある「きらきら輝く５」をダウンロードしてください。
ではアップロードしましょう。２番めのSpeak Blockの設定を開いて、先程入力した発話の下にある"Audio"をクリックしてください。
オーディオの設定が表示されますので、先ほどダウンロードしてきたmp3ファイルを、図の四角の中にドラッグ＆ドロップします。
以下のように表示されれば正しくアップロードされています。再生ボタンを押すとその場で聞けます。
はい、ではアップロードして確認してみてください。Alexaが話したあとに効果音が聞こえてくればオッケーです！かんたんですね！
これでシーン０は終了です。次のシーンに行きましょう！
"Next"をクリックしてください
さぁ、ここからはいよいよ、物語を作っていきましょう。シーン１のイメージはこんな感じです。
むかしむかし、あるところにシンデレラというとても美しくて優しい娘がいました。シンデレラの両親は早くに亡くなってしまったので、今は継母と二人のお姉さんと暮らしていました。ところが、この人たちは大変な意地悪で、
お姉さん１
「シンデレラ、さっさと掃除を終わらせなさいよ。」
お姉さん２
「シンデレラ、掃除が終わったら次は洗濯よ、怠けないでやるのよ。」
シンデレラに家事を全部押しつけた上、
ママ母
「ふん、あんたにはこのボロがお似合いだわ。」
と、粗末な服しか与えてもらえず、シンデレラは毎日つらい日々を送っていました。
そんなある日の事、お城の王子様がお妃選びの舞踏会を開く事になり、シンデレラのお姉さんたちにも招待状が届きました。お姉さんたちは大はしゃぎできれいなドレスに着替えて準備をしています。
ママ母
「そうそう、シンデレラ、あんたも仕事が終われば、舞踏会に来てもいいわ、ただそのボロボロの服でも来れるなら、だけどね。あっはっは。」
そう言い残して、お母さんとお姉さんたちはでかけていきました。
シンデレラ
「ああ、わたしも舞踏会に行きたいわ。でもこんなボロボロの服じゃとても王子さまにお会いできないわ、しくしく」
声を変える
ではやっていきましょう。
Speak Blockをおいて以下のように入力します。以下のテキストをコピペしてもらってもよいですよ。
むかしむかし、あるところにシンデレラというとても美しくて優しい娘がいました。シンデレラの両親は早くに亡くなってしまったので、今は継母と二人のお姉さんと暮らしていました。ところが、この人たちは大変な意地悪で、
次はセリフです。Alexaスキルでは、何も設定しなければ"Alexa"という名前の女性の声で喋りますが、この声を変えることができます。早速やってみましょう！
"Speech" をクリックします。
すると新しい入力欄が下に出てきますので、以下のように入力してください
シンデレラ、さっさと掃除を終わらせなさいよ。
そして、"Speaking as" の右側のリストから "Mizuki" というのを選択してください。
これでアップロードして試してみてください。声が変わっているのがわかりますか？
このように、声を使い分けることでキャラクターごとにセリフを分けることができます。ちなみに、日本語の場合は、
- Alexa（標準・女性の声）
- Mizuki（女性の声）
- Takumi（男性の声）
から選択することができます。
声の音程とスピードを変える
でもちょっとまってください。シンデレラに出てくる登場人物を考えてみましょう。
- シンデレラ
- ママ母
- お姉さんその１
- お姉さんその２
- 魔法使いのおばあさん
- お城の王子様
- ナレーター
合計７人もいます。音声の切り替えで対応できるのは３人です。あと４人足りませんね・・・・
そんな場合は、声の音程やスピードを変えることで分けてみましょう。「SSML」という、HTMLに似た言語を使うことで「喋り方」を調節することができます。早速やってみましょう。
先程のセリフ部分を以下に置き換えてください。
<prosody pitch="x-high" rate="fast">シンデレラ、さっさと掃除を終わらせなさいよ。</prosody>
発話部分を<prosody>と</prosody>で囲むと、囲んだ部分の発話内容が調節されます。調節する内容は最初の<prosody>内に指定します。pitchで声の高さ、rateで声のスピードを調整できます。
これと最初の音声切り替えを組み合わせることで、複数のキャラクターのセリフを使い分けることができます！今回はこんな感じで各登場人物の声を設定することにします。
登場人物 | 音声 | 音程 | スピード | SSMLタグ |
ナレーター | Alexa | デフォルト | デフォルト | - |
シンデレラ | Alexa | 高い | デフォルト |
|
ママ母 | Mizuki | デフォルト | デフォルト | - |
お姉さん1 | Mizuki | 高い | やや速い |
|
お姉さん2 | Mizuki | 低い | ややゆっくり |
|
魔法使い | Alexa | 低い | ややゆっくり |
|
王子様 | Takumi | デフォルト | デフォルト | - |
ではセリフをも含めてこのシーンの設定をしていきましょう。
"Speech"をクリックして新しい入力欄を追加、お姉さん２のセリフなので、音声は"Mizuki"を選択、発話は以下を入力します。
<prosody pitch="x-low" rate="slow">シンデレラ、掃除が終わったら次は洗濯よ、怠けないでやるのよ。</prosody>
さらに"Speech"をクリックして、ナレーターなので特に設定せずに、以下を入力。
シンデレラに家事を全部押しつけた上、
次はママ母のセリフです。"Speech"を追加して、"Mizuki"を選択して以下を入力します。
ふん、あんたにはこのボロがお似合いだわ。
最後もナレーターなので、"Speech"を追加して、ナレーターなので特に設定せずに、以下を入力。
と、粗末な服しか与えてもらえず、シンデレラは毎日つらい日々を送っていました。<break time="1s"/>。
最後に見慣れないSSMLタグが出てきましたが、これもSSMLタグの一つで、発話の中に何も言わない時間を含めるのに使います。このあと少し話が変わるので、場面の切り替わり的に1秒の空白を入れています。
では続きです。ここで話が少し変わるので、もう一つSpeakブロックを追加して、そちらに設定していきましょう。
そんなある日の事、お城の王子様がお妃選びの舞踏会を開く事になり、シンデレラのお姉さんたちにも招待状が届きました。お姉さんたちは大はしゃぎできれいなドレスに着替えて準備をしています。
"Speech"で、ママ母のセリフを追加します。
そうそう、シンデレラ、あんたも仕事が終われば、舞踏会に来てもいいわ、ただそのボロボロの服でも来れるなら、だけどね。あっはっは。</say-as>
もう一つ"Speech"で、以下を入力します。
そう言い残して、お母さんとお姉さんたちはでかけていきました。
最後にシンデレラのセリフです。シンデレラの声はAlexaのままですが、声を高くします。あと、このあと別のシーンに切り替わるので、<break time="1s"/> も追加しておきましょう。
<prosody pitch="x-high">ああ、わたしも舞踏会に行きたいわ。でもこんなボロボロの服じゃとても王子さまに、お会いできないわ、しくしく</prosody><break time="1s"/>
アップロードしてテストしたいところですが、次のステップをやったあとでテストしましょう。
効果音やサウンドを使う（その２）
効果音やサウンドについては、mp3ファイルをアップする方法を説明しましたが、SSMLでも効果音やサウンドを指定することができます。
そこで活用したいのは「Alexa Skills Kitサウンドライブラリ」です！ Alexaでのスキル開発に活用しやすいように、予めサウンドや効果音が多数公開されています。
以下のURLをクリックしてみてください。
https://developer.amazon.com/ja/docs/custom-skills/ask-soundlibrary.html
少し下に、検索できるような場所があるのがわかるでしょうか？
ここに「ドア」と入力してENTERキーを押すと検索結果が表示されます。ドアだけでたくさんありますね！どれでもいいのですが、今回は「木（２）」というのを使いますので、これをクリックしてみてください。
再生ボタンを押すとサウンドを聞くことができますので、このようにしてお好みのサウンドを探していきます。で、実際にスキルで使うには、この中に表示されているSSMLタグを発話煮含める必要があります。ここの横にある"Copy to clipboard"をクリックして、コピーします。
Voiceflowに戻って、Speak Blockの以下の設定の最後にペースト(WindowsはCtrl+v, Macはcommand+v)してください。これで発話のあとにサウンドが再生されるようになります。
はい、ではいよいよアップロードボタンをクリックしてテストです。キャラクターごとに声やしゃべり方が違って、ドアを閉める音が聞こえれば、シーン1は完成です！
Nextをクリックして次のシーンに行きましょう！
おまけ： 発話の中に空白を入れる
何回か出てきた、<break time="1s"/>、発話の中に何も言わない時間を含めるのに使います。
というのも、Alexaは句読点（、とか。）があれば、その部分をきちんと意識して読み上げてくれますが、発話中に長めの空白を入れたい場合に「・・・」と入力しても理解してくれません。そこで意図的に空白を入れたい場合は、SSMLのbreakタグを使用します。例えば、
「マヤ・・・なんて恐ろしい子」
と言わせたい場合は以下のようにします。
マヤ<break time="0.5s"/>なんて恐ろしい子
どれぐらい空白時間を入れるかは time="" に秒で設定します。例えば、1秒の場合は "1s" となります。また、prosodyタグと違って、breakタグは閉じるタグが必要がないこと、最後に/がつくのを忘れないように、注意してください。
また、Voiceflowで、Speak Blockをいくつか並べた場合、Blockとしては複数に分かれていたとしても、Alexaが発話するときは一気に話されますので、シーンが変わるような場合にはどこかにbreakタグを入れておくと良いと思います。
では次のシーンです。シーン２のイメージはこんな感じです。
シンデレラを舞踏会に連れて行ってあげたいですか？連れて行ってあげたい場合は、シンデレラになりきって、舞踏会に行きたいわ、と言ってください。
ユーザ
「舞踏会に行きたいわ」
（効果音: 魔法の音）
シンデレラが強く願うと、その瞬間、突然、魔法使いのおばあさんが目の前に現れ、こういいました。
魔法使いのおばあさん
「泣くのはおよし、シンデレラ。お前はいつも仕事をがんばるとても良い子じゃ、ごほうびにわたしが魔法で舞踏会へ行かせてあげるとしよう。」
シンデレラ
「本当に？」
魔法使いのおばあさん
「本当じゃよ。見ててご覧。」
魔法を使ってシンデレラを変身させるには、ちちんぷいぷい、か、アブラカダブラ、といってください。
（ユーザの発話内容で分岐）
→ユーザ「ちちんぷいぷい」と言った場合、
魔法使いのおばあさん
「ちちんぷいぷい、えいっ。」
→ユーザ「アブラカダブラ」と言った場合、
魔法使いのおばあさん
「アブラカダブラ、えいっ。」
そういって、魔法使いのおばあさんは魔法の杖を一振りしました。
（効果音：シャラリーン）
すると、畑のかぼちゃが豪華な馬車に、屋根裏のネズミが立派な白馬に、庭のトカゲがパリッとした御者になりました。シンデレラの着ていたみすぼらしい服も、たちまち輝く様な純白の美しいドレスに変わり、そして足元は素敵なガラスのクツになりました。
シンデレラ
「まあ、なんてすてきなの。」
魔法使いのおばあさん
「さあ、楽しんでおいでシンデレラ。でも、わたしの魔法は十二時までしか続かないから、それまでに帰ってくるんじゃよ。」
シンデレラ
「わかったわ、おばあさん、ありがとう、行ってきます。」
（効果音：馬車の音）
ちょっとボリュームがありますが、がんばっていきましょう！
ユーザの発話を受け取る
このシーンでは、ユーザの発話を受け取って、ストーリーが分岐して進む、というのをやってみましょう！
まず、最初にSpeak Blockで、これからユーザに発話させるのを促す内容を話させます。シーンが変わるので少し離した場所に配置しておくのをおすすめします。
シンデレラを舞踏会に連れて行ってあげたいですか？連れて行ってあげたい場合は、シンデレラになりきって、舞踏会に行きたいわ、と言ってください。
次はいよいよユーザの発話の受け取りです。ユーザの発話を受け取るブロックは複数ありますが、もっとも活用の幅が広いInteraction Blockを使いましょう。
Blocksメニューの下の方にAdvancedというサブメニューの中ににある Interaction Block を、2つ目のSpeak Blockの右側にドラッグアンドドロップして、線でつなげてください。
Interaction Blockの設定は３つあり、タブで切り替えて設定します。それぞれのタブで設定する内容は以下となります。
- Choices
- Intentsで設定したインテントに基づいて、会話の流れを分岐させます。
- Intents
- ユーザのしゃべりそうな内容のパターン（「サンプル発話」と言います）をグループ（「インテント」と言います）にまとめることで、分岐の元となるルールを作ります。
- Slots
- ユーザのしゃべる内容の中に含まれるキーワード（「スロット」と言います）を変数として、スキルからプログラム的に利用する場合に使用します。（今日は使用しません。）
といっても、ピンとこないと思うので、実際にやってみましょう。まず最初に"Intents"タブをクリックして、"+ Add slots"
次にIntentsタブをクリックして、"+Add Intent"をクリックします。
下に"intent_one"という設定が追加されたと思います。"intent_one"の部分がインテント名になります。
ちょっとわかりにくいので、まずここで、"intent_one"というのをわかりやすく"butoukai_intent"に変えてください。
そして、入力欄に「舞踏会に行きたいわ」と入力してENTERキーを押します。入力欄の下に表示されればOKです！
同様にして、以下をすべて入力します。
舞踏会に行きたい
舞踏会行きたい
舞踏会行きたいわ
舞踏会に行きたいな
舞踏会行きたいな
全部入力し終わってこんな感じになっていればOKです！
では、次にこのインテントを使って分岐をしてみましょう。Choicesタブをクリックして、"Add Choice"をクリックしてください。
すると下に設定項目のようなものが追加されるとともに、Interaction Blockにも線をつなぐための四角が追加されて、同じ番号になっているのがわかるでしょうか？
では設定項目の"Select Intent"をクリックしてください。先程作成した"butoukai_intent"が並んでいるのが見えると思うので、これを選択します。
次にSpeak Blockを２つ、以下のように配置してください。
そして、以下のように線を引きます。1と書かれたところからは右のSpeak Blockへ、elseと書かれたところは上のSpeak Blockにつなげて、そこからさらにInteraction Blockに戻します。
それぞれのSpeak Blockは、以下のように設定します。まず、elseにつながった上のSpeak Block。
ごめんなさい。うまく聞き取れませんでした。シンデレラを舞踏会に連れていってあげるには、舞踏会に行きたい、と言ってください。
次に、1につながった右のSpeak Block。最初にSSMLでサウンドを流していますね。
<audio src="soundbank://soundlibrary/magic/amzn_sfx_fairy_melodic_chimes_01"/>シンデレラが強く願うと、その瞬間、突然、魔法使いのおばあさんが目の前に現れ、こういいました。
2つとも設定ができたら、ここで一度アップロードしてテストしてみましょう。スキルを起動したあと、舞踏会に行きたい、と言うように言われるので、最初に「舞踏会に行きたい」以外のセリフを言って、その後で「舞踏会に行きたい」と言ってください。きちんとそれぞれ分岐していることが確認できるでしょうか？
もうおわかりになられたかと思いますが、Interaction Blockでユーザの発話をインテントに紐付けて、インテントごとに分岐を分けることで、会話のフローが分岐するという仕組みになっているのです。今回はインテントが一つしかないので、そのインテントか、それ以外かで分かれるようにしています。
このようにして、物語のところどころでユーザの発話に応じて話が展開するインタラクティブなストーリーが作れるというわけですね！是非積極的に使ってなれていきましょう！
続き
では続きです。正しく「舞踏会に行きたい」といった場合のSpeak Blockに追加していきます。ここからはこれまでやったことを続けるだけなので、ペースアップします！
"Speech"を追加して、魔法使いのおばあさんのセリフです。
<prosody pitch="x-low" rate="slow">泣くのはおよし、シンデレラ。お前はいつも仕事をがんばるとても良い子じゃ、ごほうびにわたしが魔法で舞踏会へ行かせてあげるとしよう。</prosody>
次はシンデレラのセリフ
<prosody pitch="x-high">本当に？</prosody>
最後にもう一度、魔法使いのおばあさんのセリフです。
<prosody pitch="x-low" rate="slow">本当じゃよ。見ててご覧。</prosody><break time="1s"/>
ここでもう一つSpeak Blockを追加して、ユーザに発話を促す説明をします。
魔法を使ってシンデレラを変身させるには、ちちんぷいぷい、か、アブラカダブラ、といってください。
はい、ここでもユーザの発話を受け取って処理をするので、Interaction Blockを置いて、まずIntentタブをクリックしてインテントを設定しましょう。さっき設定した"butokai_intent"が見えていますが、"+ Add Intent"を２回クリックします。
新しくインテントが２つ追加されるので、以下のように"chichinpuipui_intent"と"aburakadabura_intent"を作ります。サンプル発話は以下をコピペしてください。
ちちんぷいぷい
ちちんぷいぷいのぷい
アブラカダブラ
あぶらかだぶら
アブラカタブラ
あぶらかたぶら
インテントができたら、Choicesタブをクリックして、同じように"+ Add choice"を２回クリック、先程作成した２つのインテントをそれぞれ設定します。
それぞれのフローの先に以下のようにSpeak Blockを配置して線でつなげてください。
それぞれのSpeak Blockの設定内容は以下の通り設定してください。まず、1につながっているSpeak Block。魔法の呪文で「ちちんぷいぷい」といった場合ですね。
<prosody pitch="x-low" rate="slow">ちちんぷいぷい、えいっ。</prosody>
次に、２につながっているSpeak Block。こちらは「アブラカダブラ」と言った場合です。
<prosody pitch="x-low" rate="slow">アブラカダブラ、えいっ。</prosody>
最後に、elseにつながっているSpeak Block。「ちちんぷいぷい」「アブラカダブラ」どちらでもない場合は再度発話をユーザに促します。
魔法の呪文が間違っていますよ。シンデレラを変身させるには、ちちんぷいぷい、か、アブラカダブラ、と言ってください。
最後に新しいSpeak Blockを配置して、「ちちんぷいぷい」「アブラカダブラ」で分岐していたフローを一つに戻します。このようにフローを分岐させることも合流させることもできます！
最後のSpeak Blockの設定内容は以下となります。2つ目以降は、"Speech"を追加して順に設定していってください。
そういって、魔法使いのおばあさんは魔法の杖を一振りしました。<audio src="soundbank://soundlibrary/magic_spells/magic_spells_07"/>すると、畑のかぼちゃが豪華な馬車に、屋根裏のネズミが立派な白馬に、庭のトカゲがパリッとした御者になりました。シンデレラの着ていたみすぼらしい服も、たちまち輝く様な純白の美しいドレスに変わり、そして足元は素敵なガラスのクツになりました。
<prosody pitch="x-high">まあ、なんてすてきなの。</prosody>
<prosody pitch="x-low" rate="slow">さあ、楽しんでおいでシンデレラ。でも、わたしの魔法は十二時までしか続かないから、それまでに帰ってくるんじゃよ。</prosody>
<prosody pitch="x-high">わかったわ、おばあさん、ありがとう、行ってきます。</prosody>
シンデレラは舞踏会に向かいました。<audio src="soundbank://soundlibrary/human/amzn_sfx_people_walking_01"/><break time="1s"/>
はい、これでシーン２は完成です！テストして試してみてください。
では、シーン３にいきましょう！Nextをクリックしてください。
では次のシーンです。シーン3のイメージはこんな感じです。
（効果音：人がしゃべる音）
お城についたシンデレラが、大広間に現れると、そのあまりの美しさに気づいた王子様がシンデレラの前に進み出ました。
王子さま
「美しいお嬢さん、ぼくと、踊っていただけませんか？」
王子様と踊りますか？はい、か、いいえ、で答えてください。
ユーザ
「はい」
シンデレラ
「ええ、よろこんで」
（効果音：ワルツ）
シンデレラと王子様は時間を忘れてダンスを楽しみました。シンデレラはとても幸せでした。
（効果音：鐘の音）
シンデレラ
「あっ、いけない。もうすぐ12時だわ。すぐに帰らないと魔法が溶けちゃう。どうしよう？」
今までやってきたことでほぼ実現できますね！では順にやっていきましょう。
Speak Blockをおいて、どんどん設定してきます。
<audio src="soundbank://soundlibrary/voices/crowds/crowds_04"/>お城についたシンデレラが、大広間に現れると、そのあまりの美しさに気づいた王子様がシンデレラの前に進み出ました。
王子さま、初登場のセリフです。
美しいお嬢さん、ぼくと、踊っていただけませんか？<break time="1s"/>
Speak Blockをもう一つつなげます。
王子様と踊りますか？はい、か、いいえ、で答えてください。
特別なインテント Yes/No
ここで、ユーザに踊りますか？と聞いて、発話を受け取るので、ここまでで何度か出てきたInteraction Blockを使います。で、ここまで学んだことを踏まえると、こうなると思いますよね？
はい、と、いいえ、のインテントを作って・・・
それぞれのインテントをフローで分ける。
ところが、これ不要なんです！
Alexaにおいて「はい」と「いいえ」は特別な意味を持っていて、予めインテントが用意されています。このように最初から用意されているインテントを「ビルトインインテント」と言い、十分なサンプル発話も登録されているので、スキル開発する側からすると、単にそれを使うだけで良しなにやってくれるという、とても便利で楽ちんなものなんです。
では早速やってみましょう。
Interaction BlockをSpeak Blockにつなげます。で、Choicesタブが選択されているので、そのまま"+ Add Choice"します。
リストの中に"NoIntent"があるのが見えますか？これを選択します。
同様にして"YesIntent"も追加します。
これだけです。かんたんでしょ？はい、いいえ、を使う場合には、YesIntent/NoIntentを使う、それ以外の複雑な発話の受け取りは自分で作る、と覚えてもらえればよいかと思います。
では、はい、いいえ、の分岐を作っていきます。Speak Blockを2つおいて、以下のように線を引いてください。YesIntentが右に、Noとelseが上に繋がって、再度Interactionに戻る感じです。
上のSpeak Blockには以下のように設定します。はい、と言わない限り進めない感じ、王室の圧力を感じますねｗ
そんなことを言わないでください。僕はひと目見てあなたの美しさの虜になってしまったのです。
王子様と踊りますか？はい、か、いいえ、で答えてください。
はい、と答えた場合の右のSpeak Blockはこんな感じです。
<prosody pitch="x-high">ええ、よろこんで。</prosody>
ということで、ここからダンスが始まります。ダンスにふさわしいmp3ファイルをアップロードしましょう。
今回は、フリーBGM素材サイト「DOVA−SYNDROME」様にアップされている、shimtone様の「ぽかぽかワルツ」を使用させていただきます。
https://dova-s.jp/bgm/play10492.html
"Audio"をクリックして、mp3ファイルをアップロードします。
はい、続きを設定して行きます。鐘の音が聞こえてきましたね・・・
シンデレラと王子様は時間を忘れてダンスを楽しみました。シンデレラはとても幸せでした。<break time="0.7s"/><audio src="soundbank://soundlibrary/bell/church/church_bells_02"/>
<prosody pitch="x-high">あっ、いけない。もうすぐ12時だわ。すぐに帰らないと魔法が解けちゃう。どうしよう？</prosody>
はい、これで、シーン３は完成です。いよいよ運命の決断、って感じですね！次はいよいよ最後のシーンです！
その前に、大事なことを一つだけお話しておきます。
サウンド・効果音を使う場合の制約
これまでなんの気なしにサウンドや効果音を使っていますが、とても大事なお約束があります。サウンドや効果音を使う場合、
- Alexaからの１回の発話で使用できるサウンドや効果音は５回まで。
- Alexaからの１回の発話で使用できるサウンドや効果音の合計再生時間は240秒まで。
これ、どういうことか見てみましょう。シーン２とシーン３のところを見てください。
Alexaの１回の発話というのは、ユーザの発話に囲まれた間のことを指しています。以前に、Speak Blockを分けて並べても、全て一気に話されるというお話をしましたよね？つまり、ユーザの発話と発話の間に入れれるサウンドや効果音の利用回数や合計再生時間には上限があるので、これを超えてたくさんのサウンド・効果音を使いたい場合は、必ずユーザの発話を定期的に入れる必要があるということなんですね。これはSSMLで入れる場合もmp3ファイルでアップロードする場合も変わりません。
先程のシーンの中で音楽ファイルが使われている箇所を見てみましょう。
音楽ファイルが使われている箇所は２回で、どちらも短いものなので、問題ありません。ただ、物語スキルを作ろうとすると、どうしても効果音をたくさん入れたくなると思うので、この点には注意してください。逆にこの制約を逆手にとって、ユーザがただ聞くだけのスキルではなく、インタラクティブに飽きさせないようにするのが重要なポイントだと思います。
ではいよいよ、最後のシーンにいきましょう！
Nextをクリックしてください。
ではいよいよ最後のシーンです。最後のシーンは、ワークショップ的に、途中まではこの資料の中で説明しますので、ここまでに説明してきた内容を参考に、皆さんでストーリーを組み立てていただきたいと思います。あと、いきなりは厳しい、という方もいらっしゃるかと思うので、次の章でサンプルをご紹介します。それに沿ってやっていただいても結構です。
ではやっていきましょう。
Speak Blockを置いて設定していきます。シーンが変わるのでちょっと離れたところに置くと良いと思います。
ここで運命の選択です。
効果音を入れましょう。「効果音ラボ」様の以下のURLから「ショック1」というのをダウンロードしてきてアップロードしてください。
https://soundeffect-lab.info/sound/search.php?searchtext=%E3%82%B7%E3%83%A7%E3%83%83%E3%82%AF&x=0&y=0
"Speech"で追加します。
魔法が解ける十二時まで時間はあまりありません。魔法使いのおばあさんとの約束を守るには今すぐ帰る必要があります。<break time="0.5s"/>でも幸せな舞踏会はまだまだ続きます。もしかすると魔法が解けても王子さまはシンデレラのことを信じてくれるかもしれません。<break time="0.5s"/>シンデレラは家に帰りますか？はい、か、いいえで答えてください。
はい、ここでユーザ発話ですね、先程と同じく、Yes/Noの発話なのでInteraction Blockをおいて、Yes/No Intentでフローを作ってください。
そして、分岐後のSpeak Blockを以下のように並べて線でつなげます。elseのときはもう一度聞くようにぐるっと回すのも見慣れてきたのではないかなと思います。
elseにつながっているSpeak Blockだけ設定を入れておきます。
ごめんなさい。うまく聞き取れませんでした。シンデレラは家に帰りますか？はい、か、いいえで答えてください。
はい、ではここからは皆様におまかせします。はい、いいえ、それぞれのフローの先にストーリーを作ってみてください！
ワークショップ部分の一つのサンプル例をご紹介します。
ストーリーはこんな感じで考えてみました。
- 「はい」、つまり、家に帰る方を選択すると、魔法使いが現れて、きちんと約束を守ったシンデレラに永遠に解けない魔法をかけてくれて、ハッピーエンド。
- 「いいえ」、つまり、家に帰らない方を選択すると、魔法が解けてしまいますが、魔法の呪文を唱えることで、魔法使いが現れて、約束は守らなかったものの、今まで苦労してきたシンデレラのために永遠に解けない魔法をかけてくれて、こちらもハッピーエンド。
「はい」の場合
では、「はい」の方から。
<prosody pitch="x-high">おばあさんとの約束は守らないとだめよね。ごめんなさい、王子さま、私はもう帰らないと行けないの、さようなら。</prosody>
あぁ、待って。シンデレラ。
後ろの方に「カランコロン」みたいな音が入ってます。
シンデレラは急いで大広間を出て行きましたが、あわてたひょうしに階段にひっかかって、ガラスのクツがぬげてしまいました。<audio src="soundbank://soundlibrary/metal/metal_12"/>
<prosody pitch="x-high">あぁ、靴が！</prosody>
魔法使いのおばあさんが現れるときの音です。
<audio src="soundbank://soundlibrary/magic/amzn_sfx_fairy_melodic_chimes_01"/>
<prosody pitch="x-low" rate="slow">ちゃんと私との約束を守ろうとしたんだね。えらいね、シンデレラ。これは私からのご褒美だよ。ちちんぷいぷい、えいっ。</prosody>
魔法の音が最初に入ってます。
<audio src="soundbank://soundlibrary/magic_spells/magic_spells_07"/><prosody pitch="x-low" rate="slow">これであんたの魔法はもう解けることはないよ。王子様と一緒に幸せに暮らしな。</prosody>
<prosody pitch="x-high">ありがとう、おばあさん、本当にありがとう。</prosody>
その後、お城に迎えられたシンデレラは、王子さまと結婚して、いつまでも幸せに暮らしました。<break time="0.5s"/>おしまい。
ということで、ハッピーエンドのテーマです。「DOVA−SYNDROME」様にアップされている、カワサキヤスヒロ様の「piece」を使用させていただきます。以下よりダウンロード後、アップロードしてください。
https://dova-s.jp/bgm/play11109.html
はい、これで「はい」の方は終了です。サウンド・効果音も5つ以内に収まりました！
「いいえ」の場合
では、次に「いいえ」の方です。「はい」と同じような感じで、ストーリーを終わらせてもいいんですが、こちらはちょっとハンズオンではやらなかったことも入れて、少しひねってみたいと思います。Speak Blockを設定していきましょう。
<prosody pitch="x-high">おばあさんとの約束は守りたいけど、もう二度と王子様と会えないかもしれないわ。私はどうすればいいの？</prosody>
鐘の音です。
<audio src="soundbank://soundlibrary/bell/church/church_bells_02"/>12時の鐘が鳴り響きました。すると、
魔法が解けてしまう音を入れます。「効果音ラボ」様の「煙モクモク」を使用させていただきます。以下よりダウンロード後、アップロードしてください。
https://soundeffect-lab.info/sound/search.php?searchtext=%E7%85%99&x=0&y=0
シンデレラの美しいドレスやガラスの靴は消えてしまい、いつものボロボロの服に戻ってしまいました。
あれ、君はいったい誰だい？
<prosody pitch="x-high">あぁ、こんな姿じゃ、やっぱり王子様にわかってもらえないのね、約束を破ってしまってごめんなさい、おばあさん。</prosody><break time="1s"/>
Speak Blockを一つ追加して以下のように設定します。
魔法が解けてしまったシンデレラ。どうすればシンデレラを助けることができるでしょうか？ここまでのお話を思い出して、お答えください！
はい、ここでユーザの発話を受け取ります。先に答えを言ってしまうと、「ちちんぷいぷい」か「アブラカダブラ」と言えば正解になります。ちょっと伏線っぽい感じがしますね！
Interaction Blockをおいて設定していきます。が、「ちちんぷいぷい」と「アブラカダブラ」はすでにインテントが登録されているので、再利用ができるんですね！よってChoicesに"+ Add choice" で "chichinpuipui_intent" と "aburakadabura_intent" を設定するだけでオッケーです！
先に間違いの方を設定しますが、ここを少しひねります。1回で正解しない場合はヒントを出すようにしてみましょう。Speak Blockを以下のようにおいてください。
上の方はこんな感じ。
<audio src="soundbank://soundlibrary/ui/gameshow/amzn_ui_sfx_gameshow_negative_response_01"/>間違いです。もう一度考えてください。どうすればシンデレラを助けることができるでしょうか？
下の方はヒントを入れます。
<audio src="soundbank://soundlibrary/ui/gameshow/amzn_ui_sfx_gameshow_negative_response_01"/>間違いです。ヒントです。シンデレラを変身させる魔法の言葉があったのを覚えていますか？さぁ、どうすればシンデレラを助けることができるでしょうか？
で、これを実現するには、間違えたときに1回目と2回目以降という「回数」を記録しておいて、この回数に応じて分岐をすればいいということになりますね。Voiceflowでは、変数（Variable）、Set Block、If Blockを使うとこれが実現できます！では早速やってみましょう。
まず、変数を作成します。変数の作成は"Variable"メニューから行います。左上の小さなアイコンの一番下をクリックします。
すると"Variables"というメニューが出てくると思いますので、上の"Create Variable"の下の入力欄に、"count"と入力してENTERキーを押してください。
下の方にある"Variables"の一番最後に"count"が追加されれば成功です！これで間違いの回数を保存しておくための「」ができました。
変数は作った直後はただの「箱」ができた状態です。この中に「回数」（「値」といいます）を入れてあげる必要があります。（変数に値を入れることを「代入」と言います。）まず、最初に間違いの回数を一旦ゼロにしましょう（「初期化」と言います。）変数に値を入れる場合はSet Blockを使います。
再度、Blocksメニューを開きます。
間違いの回数なので、ユーザに聞く前にゼロにする必要があります。以下のようにSet Blockを配置して、線をつなぎ直してください。
Set Blockの設定です。変数countを0に初期化します。"Select Variable"をクリックして、"count"を選択します。
そして、Valueと書かれた入力欄に"0"を入力します。
さらに、もう一つ、Set Blockを以下のように配置して、Interaction Blockのelseから線でつないでください。今度は間違えた「後」になります。
ここで、間違えた回数を増やします。Set Blockの設定をやりましょう。先ほどと同じように"Select Variable"のところは、"count"を選択します。そして、入力欄のところは、一番右の"</>"をクリックして "Variable"を選択します。
すると、"Select Variable"と表示が変わり、変数を選択することができます。"count"を選んでください。
"count"を選んだら、もう一度一番右の"</>"をクリックして今度は"+"を選択します。
また表示が変わりましたね！そして最後に"value"のところに"1"を入力してください。
これで、変数countに、変数countをプラス1した値を入れるってことになります。つまり、この時点では、変数countは0なので、0+1=1となって、1が変数countに入ります。そして、もう一度間違った場合にはさらに+1されて変数countが2になるというわけです。ちょっと直感的ではないかもしれませんが、プログラミングの考え方では、変数に値を追加するにはこういう考え方になるということを覚えてください。
では次に、この変数の値を元に分岐するようにしましょう。一番最初にSpeak Blockを2つ作って、1回目の間違いと2回目以降の間違いを用意しました。なので、この手前で変数countの値をチェックして１よりも大きければ（1は含まない、2以上）、2回目以降の間違いに流れて、それ以外は1回目の間違いに流すようにすればOKです。
こういうのを「条件分岐」といいます。Voiceflowで条件分岐を行うには、If Blockを使います。If Blockを以下のように配置してSet Block、2つのSpeak Blockとつなげてください。
If Blockの設定です。「変数countが1より大きい」場合は1のフローへ、それ以外はelseに流れるようにします。まず"Select Variable"をクリックして、"count"を選択してください。
次に、"="をクリックすると、以下のようにメニューが表示されますので">"を選択します。
最後に"value"に1を入力します。上の表示が"({count} > 1)"になっていればOKです！
はい、これで、間違った回数によってヒントが出るか出ないかの分岐ができました。で、間違いなので、もう一度ユーザの発話を受け取る必要があります。2つのSpeak BlockからInteraction Blockまで戻してあげましょう。ちょっと見にくくなりましたけど、以下のように線でつなげてください。
最後に、正解した場合の発話を設定すれば終わりです。Speak Blockをおいて「ちちんぷいぷい」の方を設定していきましょう。
<audio src="soundbank://soundlibrary/magic/amzn_sfx_fairy_melodic_chimes_01"/>
<prosody pitch="x-low" rate="slow">私との約束を破るなんて、よっぽど舞踏会が楽しかったんだろう。しょうがないこだね。でも、今まで十分苦労してきたようだから、助けてあげるとするよ。ちちんぷいぷい、えいっ。</prosody>
<audio src="soundbank://soundlibrary/magic_spells/magic_spells_07"/>
同じようにして、「アブラカダブラ」の方も設定していきますが、ここはすこし楽をしましょう。「ちちんぷいぷい」のSpeak Blockを選択して、Windows なら Ctrl+C、MacならCommand+Cでコピーしてみてください。上に「ブロックが一つコピーされました」というような表示が見えればオッケーです。
ではペーストしてみてください。WindowsならCtrl+V，MacならCommand+Vです。ちょっと離れたところにSpeak Blockが配置されました。実はこんなかんじで、ブロックのコピペができます！
で、もちろん中身もコピーされてますので、「ちちんぷいぷい」のところを「アブラカダブラ」に変えればオッケーです。
はい、ではいよいよ最後のSpeak Blockです。以下のように設定してください。
なんと魔法つかいのおばあさんが現れて杖を一振りすると、みすぼらしいシンデレラはまたキレイなドレスとガラスの靴に包まれた美しい娘に戻ったのでした。
<audio src="soundbank://soundlibrary/magic_spells/magic_spells_07"/><prosody pitch="x-low" rate="slow">これであんたの魔法はもう解けることはないよ。王子様と一緒に幸せに暮らしな。</prosody>
<prosody pitch="x-high">ありがとう、おばあさん、本当にありがとう。</prosody>
その後、お城に迎えられたシンデレラは、王子さまと結婚して、いつまでも幸せに暮らしました。<break time="0.5s"/>おしまい。
ということで、ハッピーエンドのテーマです。「DOVA−SYNDROME」様にアップされている、カワサキヤスヒロ様の「piece」を使用させていただきます。以下よりダウンロード後、アップロードしてください。
https://dova-s.jp/bgm/play11109.html
はい、これですべて完了です。アップロードしてテストして、正しく動くか確認してみてください。
これからもVoiceflowでたくさんの楽しいスキルが生まれますように。お疲れさまでした！
スキルの完成サンプルについて
３つのサンプルをご紹介します。以下のダウンロードリンクをクリックすると、Voiceflow内にコピーされますので、参考にしてみてください。
サンプルのダウンロード方法の詳細は、手前味噌ですいませんが、以下の記事内の「スキルを受け取る側」のところをご覧ください。
Voiceflow TIPS #21 スキルの受け渡し - kun432's blog
https://kun432.hatenablog.com/entry/voiceflow_tips_21_shareing_skills