![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow-cover.png)
Alexaスキルをノンプログラミングで開発できるツールはいくつかあり、Smartioでも使っているStorylineはその代表格です。今回はカナダ・トロントのスタートアップが提供するサービスである「Voiceflow」を使ってみます!ツールの機能や開発、申請方法まで流れを詳しく紹介するので気になる方はぜひ使ってみてください。
事前に必要な準備
- メールアドレス
- Facebookアカウント
- Amazon Developerアカウント
※備考 - Voiceflowでのスキル開発は現在英語のみですが、今後日本語に対応したときも開発の流れはほぼ一緒になると思われます。
さて、Voiceflowはいかがなものでしょうか。ここからはログインからスキル制作、テスト、申請まで行っていく長旅になりますのでゆっくり見ていってください。
Voiceflowログイン&使い方
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow1.png)
まずはVoiceflowのホームページへアクセスし、右上の「Get Started」ボタンをクリック。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow2.png)
アカウント登録ページになります。名前、メールアドレス、パスワード、及びInvite Code(招待コード)を入力。
※2018年11月7日の時点で、Voiceflowアカウントを登録する方法は以下の通りです。
1.VoiceflowのFacebookページへ連絡し、Invite Codeをリクエスト(コードは2営業日以内にもらえます)
2.Codeをコピーして、Voiceflowサイトのアカウント登録ページに入力。
※今後はInvite Codeが必要なくなる可能性があるので、コードなしで簡単に登録できるようになった場合はこの手順を飛ばしてください。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow3.png)
アカウント作成は完了したので、ここからはスキルを作成していきましょう。ログイン画面からメールアドレスとパスを入力し「Submit」をクリック。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow4.png)
アカウントのダッシュボードに入るので、「Create Skill」をクリック。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow5.png)
ポップアップがでてきます。今回は、“この動物の色は何でしょう?”とユーザーに聞き答えてもらうだけの、あまり意味のないスキルを作ってみることにしましょう!(笑)
ここでは「Animal Game」のようにスキルの名前を入力し、Create Skillをクリックします。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow6.png)
Animal Gameの開発画面に移動しました。スキル内の会話は、Storylineと同じようにブロックで表現するようです。ここでは開発画面でのそれぞれの機能について、役割を説明します。
①機能パネル
②スキル申請時に必要なブロック
③編集・変更できる部分
④保存ボタン
⑤公開ボタン
⑥ブラウザでテストボタン
では、Speak: Welcomeというブロックを選択し、編集していきましょう。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow7.png)
ユーザーがスキルを開いた時に、“○○スキルへようこそ!Aをしたいですか、Bをしたいですか?”のようなメッセージを入力します。英語で、「Welcome to Animal Game! Do you like lions, or tigers?」(アニマルゲームへようこそ!ライオンが好きですか?トラが好きですか?)と入力。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow8.png)
次は、Choice: Ask the userブロックをクリックし、既存のユーザー発話を以下のように編集します。
Choices 1のところでは、
lion
lions
i like lions
などライオンを意味する発話を複数入力しましょう。Choices 2のエリアも上記と同様、トラを意味するtigerなどの発話を入力します。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow9.png)
次はSpeakブロックを押して、Alexaの発話を入力します。「That’s great! OK, I will ask you a question.」(いいですね!では、問題を出します。)を入力。その下のSpeak: tigerブロックにも同じく「That’s great! OK, I will ask you a question.」を入力。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow10.png)
今回作ってみたいスキルの流れは既存テンプレートの流れと違うので、Speakブロック2つとVariableブロックの連携を外します。ブロック同士をつなげる線をクリックすれば連携を外すことが可能です。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow11.png)
間に他の機能ブロックを追加したいので、Variable、Capture、と最後のSpeakブロックを1個ずつ右の方に移します。そして左側の機能パネルからRandomを選択し、先ほど作ったスペースに配置します。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow12.png)
Randomブロックをクリックし、ランダムで出題する問題を増やすために「Add Path」をクリックします。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow13.png)
現在Randomブロックに選択肢2つができたので、これから先2つのSpeakブロックを追加しましょう。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow14.png)
lionパスの最初のSpeakブロックに質問内容として「What color is the lion?」(ライオンは何色ですか?)を入力します。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow15.png)
もう1つのSpeakブロックを追加して、「What is the lion’s color」(ライオンの色は何ですか?)を入力します。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow16.png)
今まで作ったlionの方の流れのブロックを紐づけて連携します。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow17.png)
次は、tigerの方も同様にSpeakブロックを追加し内容も入れます。例えば、
Random質問1:「What color is the tiger?」(トラは何色ですか?)
Random質問2:「What is the tiger’s color?」(トラの色は何ですか?)
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow18.png)
上記の通りにAlexaから問題が出された後、次はユーザーが回答する番です。機能パネルからChoiceブロックを選択します。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow19.png)
Choiceブロックを追加した後、「Add Choice」をクリックします。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow20.png)
そして、ライオンの色の正解である「yellow」を入力します。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow21.png)
同じくtigerの方の流れにもChoiceブロックを追加し、トラの色である「orange」を入力します。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow22.png)
次にユーザーから回答を受けた後、これから先のAlexa発話をSpeakブロックで追加します。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow23.png)
「Yes, correct! What is your name?」(はい、正解です!あなたの名前は何ですか?)のような文言でも構いません。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow24.png)
そしてtigerパスの方のSpeakブロックも作成し、上記画像のようにブロックを紐づけていきます。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow25.png)
Variable(変数)ブロックをクリックし、中身がちゃんと「{user_name}」になっているかどうかを確認します。値は「0」のままで大丈夫です。※Variableブロックは、変数を設定するブロックです。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow25.5.png)
Captureブロックをクリックし、user_name変数が表示されることを確認します。user_name変数にユーザーが回答した名前が自動的に代入されます。※Captureブロックは、ユーザーの発話をキャプチャーするとのことです。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow26.png)
最後のSpeak: Welcome User Nameブロックをクリックして、中身とuser_name変数の部分を見ましょう。Captureブロックで代入された名前をAlexaが読み上げてくれるようになります。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow27.png)
user_name変数も含めて、
「OK, user_name! Thank you for playing the Animal Game! See you soon!」
(user_name さん、了解です!アニマルゲームのご利用ありがとうございます!またね!)
のような文章を入力します。
作成したスキルのテスト~申請まで
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow28.png)
ここまでのブロックや内容入力ができた場合の完成図です。スキルをアップロードする前に、軽くブラウザでスキルと遊んで試してみましょう。「Test」ボタンをクリック。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow29.png)
「Start From Beginning」(最初から)をクリック。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow30.png)
ウェルカムメッセージがでてきます。「lion」や「tiger」を入力可能。ここでは、ひとまずlionsでテストしてみましょう。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow31.png)
また聞かれてます!では、質問に答えましょう!「yellow」で入力。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow32.png)
そして名前を聞かれています!何でもいいので、「John」を入れます。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow33.png)
最後に設定したメッセージとユーザー名が表示されました!成功です!
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow34.png)
では、Amazon Developerアカウントに連携します。「Publish」をクリック。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow35.png)
スキルに関する情報を入力するところになります。
Display Name(スキル名) → 「Animal Game」
Invocation Name(呼び出し名) → 小文字で「animal game」
Small Icon → 108×108のスキルアイコンをアップロード
Large Icon → 512×512のスキルアイコンをアップロード
Summary(スキルの紹介文章(短)) → 英字で入力
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow36.png)
Description(スキルの紹介文章(長)) → 英字で入力
Category(スキルカテゴリー) → 自由に選択OK
Invocations(呼び出し方法) → open Animal Game、start Animal Game、launch Animal Gameで入力
Keyword(キーワード) → 任意
そして、画面の上の「Publish Skill」をクリック。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow37.png)
「Login with Amazon」をクリック。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow38.png)
「Allow」で、VoiceflowがAmazon Developerアカウントへ連携することを許可します。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow39.png)
全て「no」を選択し、「I certify」をクリック、スキルのテスト方法について英字で入力してから「Submit to Alexa」をクリックします。
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow40.png)
「Your skill has been uploaded to Alexa Development!」のようなメッセージがでてくると連携成功です!
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow41.png)
最後にAmazon Developerアカウントへログインし、スキルのアップロードを確認します。はい、ちゃんと「Animal Game」が表示されていますね!お疲れ様でした!
今回やってみて分かったこと、今後やってみたいこと
・Voiceflowのアカウント登録、ブロックの使い方、スキル内容の入力方法、スキル申請の流れに触れてみた
・スキルを開いた時点で既存のテンプレートがあり、開発に便利なガイドの役割を果たしていた
・スムーズな会話を作るため、ブロックとブロックの連携をしてみた
・Alexaが発話するSpeakブロックを作ってみた
・ユーザーからの応答を受け取るChoiceブロックを作ってみた
・より動的なスキルを作るため、Randomにてランダムで質問を出した
・Variable(変数)ブロックにてユーザーの発話を受け取って保存し再利用した
・エンタメ性を高めるため、次回はAudioブロックを使ってみたい
・ユーザーから受け取った応答を他の箇所で使用するため、Captureブロックをもっと使ってみたい
VoiceflowとStorylineの比較
今回は新しいサービスのVoiceflowを使ってAlexaスキルを作ってみました。普段はStorylineを使っていますが、ノンプログラミングでAlexaスキルを作れるという点では同じようなサービスです。
両方を使ってみた上で、両サービスを比較してみました。
- 現在両サービスとも無料
- Storylineで1ブロック内に変数、オーディオ、Elseなどを複数入力するが、Voiceflowでは機能ごとにブロックが細かく分かれている
- Storylineより、Voiceflow画面やシステムの方が安定していると感じる
- 両方ともAPI機能があり、外部サービスとの連携が可能
- Voiceflowの方が、スキルをAmazon Developerアカウントへアップロード(Publish)する時の手順がスムーズかつ短い
- 現時点でStorylineのFacebookコミュニティは約3,200人で、Voiceflowは300人くらい
- UI的には、Voiceflowの方が「かっこいい」かも!?
- Voiceflowの「If」機能が気になる。条件を設定し分岐させるようなロジックが作成できるみたいので、より面白いゲームやよりスマートなスキルの開発が可能かも!期待してる!!
- Voiceflowでは、Debug(デバッグ)モードがあり、エラーの原因や現在のパスなどの情報を教えてくれる。便利だね!!
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow42.png)
![voiceflowでalexaスキルを作る](https://smartio.life/wp-content/uploads/2018/11/voiceflow43.png)