ノンプログラマーでもAlexaスキルが作れるサービス「Voiceflow」でスキルを作ってみた

voiceflowでalexaスキルを作る

Alexaスキルをノンプログラミングで開発できるツールはいくつかあり、Smartioでも使っているStorylineはその代表格です。今回はカナダ・トロントのスタートアップが提供するサービスである「Voiceflow」を使ってみます!ツールの機能や開発、申請方法まで流れを詳しく紹介するので気になる方はぜひ使ってみてください。

事前に必要な準備

  • メールアドレス
  • Facebookアカウント
  • Amazon Developerアカウント

※備考 - Voiceflowでのスキル開発は現在英語のみですが、今後日本語に対応したときも開発の流れはほぼ一緒になると思われます。

さて、Voiceflowはいかがなものでしょうか。ここからはログインからスキル制作、テスト、申請まで行っていく長旅になりますのでゆっくり見ていってください。

Voiceflowログイン&使い方

voiceflowでalexaスキルを作る

まずはVoiceflowのホームページへアクセスし、右上の「Get Started」ボタンをクリック。

voiceflowでalexaスキルを作る

アカウント登録ページになります。名前、メールアドレス、パスワード、及びInvite Code(招待コード)を入力。

※2018年11月7日の時点で、Voiceflowアカウントを登録する方法は以下の通りです。
1.VoiceflowのFacebookページへ連絡し、Invite Codeをリクエスト(コードは2営業日以内にもらえます)
2.Codeをコピーして、Voiceflowサイトのアカウント登録ページに入力。
※今後はInvite Codeが必要なくなる可能性があるので、コードなしで簡単に登録できるようになった場合はこの手順を飛ばしてください。

voiceflowでalexaスキルを作る

アカウント作成は完了したので、ここからはスキルを作成していきましょう。ログイン画面からメールアドレスとパスを入力し「Submit」をクリック。

voiceflowでalexaスキルを作る

アカウントのダッシュボードに入るので、「Create Skill」をクリック。

voiceflowでalexaスキルを作る

ポップアップがでてきます。今回は、“この動物の色は何でしょう?”とユーザーに聞き答えてもらうだけの、あまり意味のないスキルを作ってみることにしましょう!(笑)
ここでは「Animal Game」のようにスキルの名前を入力し、Create Skillをクリックします。

voiceflowでalexaスキルを作る

Animal Gameの開発画面に移動しました。スキル内の会話は、Storylineと同じようにブロックで表現するようです。ここでは開発画面でのそれぞれの機能について、役割を説明します。
①機能パネル
②スキル申請時に必要なブロック
③編集・変更できる部分
④保存ボタン
⑤公開ボタン
⑥ブラウザでテストボタン
では、Speak: Welcomeというブロックを選択し、編集していきましょう。

voiceflowでalexaスキルを作る

ユーザーがスキルを開いた時に、“○○スキルへようこそ!Aをしたいですか、Bをしたいですか?”のようなメッセージを入力します。英語で、「Welcome to Animal Game! Do you like lions, or tigers?」(アニマルゲームへようこそ!ライオンが好きですか?トラが好きですか?)と入力。

voiceflowでalexaスキルを作る

次は、Choice: Ask the userブロックをクリックし、既存のユーザー発話を以下のように編集します。
Choices 1のところでは、
lion
lions
i like lions
などライオンを意味する発話を複数入力しましょう。Choices 2のエリアも上記と同様、トラを意味するtigerなどの発話を入力します。

voiceflowでalexaスキルを作る

次は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スキルを作る

今回作ってみたいスキルの流れは既存テンプレートの流れと違うので、Speakブロック2つとVariableブロックの連携を外します。ブロック同士をつなげる線をクリックすれば連携を外すことが可能です。

voiceflowでalexaスキルを作る

間に他の機能ブロックを追加したいので、Variable、Capture、と最後のSpeakブロックを1個ずつ右の方に移します。そして左側の機能パネルからRandomを選択し、先ほど作ったスペースに配置します。

voiceflowでalexaスキルを作る

Randomブロックをクリックし、ランダムで出題する問題を増やすために「Add Path」をクリックします。

voiceflowでalexaスキルを作る

現在Randomブロックに選択肢2つができたので、これから先2つのSpeakブロックを追加しましょう。

voiceflowでalexaスキルを作る

lionパスの最初のSpeakブロックに質問内容として「What color is the lion?」(ライオンは何色ですか?)を入力します。

voiceflowでalexaスキルを作る

もう1つのSpeakブロックを追加して、「What is the lion’s color」(ライオンの色は何ですか?)を入力します。

voiceflowでalexaスキルを作る

今まで作ったlionの方の流れのブロックを紐づけて連携します。

voiceflowでalexaスキルを作る

次は、tigerの方も同様にSpeakブロックを追加し内容も入れます。例えば、
Random質問1:「What color is the tiger?」(トラは何色ですか?)
Random質問2:「What is the tiger’s color?」(トラの色は何ですか?)

voiceflowでalexaスキルを作る

上記の通りにAlexaから問題が出された後、次はユーザーが回答する番です。機能パネルからChoiceブロックを選択します。

voiceflowでalexaスキルを作る

Choiceブロックを追加した後、「Add Choice」をクリックします。

voiceflowでalexaスキルを作る

そして、ライオンの色の正解である「yellow」を入力します。

voiceflowでalexaスキルを作る

同じくtigerの方の流れにもChoiceブロックを追加し、トラの色である「orange」を入力します。

voiceflowでalexaスキルを作る

次にユーザーから回答を受けた後、これから先のAlexa発話をSpeakブロックで追加します。

voiceflowでalexaスキルを作る

「Yes, correct! What is your name?」(はい、正解です!あなたの名前は何ですか?)のような文言でも構いません。

voiceflowでalexaスキルを作る

そしてtigerパスの方のSpeakブロックも作成し、上記画像のようにブロックを紐づけていきます。

voiceflowでalexaスキルを作る

Variable(変数)ブロックをクリックし、中身がちゃんと「{user_name}」になっているかどうかを確認します。値は「0」のままで大丈夫です。※Variableブロックは、変数を設定するブロックです。

voiceflowでalexaスキルを作る

Captureブロックをクリックし、user_name変数が表示されることを確認します。user_name変数にユーザーが回答した名前が自動的に代入されます。※Captureブロックは、ユーザーの発話をキャプチャーするとのことです。

voiceflowでalexaスキルを作る

最後のSpeak: Welcome User Nameブロックをクリックして、中身とuser_name変数の部分を見ましょう。Captureブロックで代入された名前をAlexaが読み上げてくれるようになります。

voiceflowでalexaスキルを作る

user_name変数も含めて、
「OK, user_name! Thank you for playing the Animal Game! See you soon!」
(user_name さん、了解です!アニマルゲームのご利用ありがとうございます!またね!)
のような文章を入力します。

作成したスキルのテスト~申請まで

voiceflowでalexaスキルを作る

ここまでのブロックや内容入力ができた場合の完成図です。スキルをアップロードする前に、軽くブラウザでスキルと遊んで試してみましょう。「Test」ボタンをクリック。

voiceflowでalexaスキルを作る

「Start From Beginning」(最初から)をクリック。

voiceflowでalexaスキルを作る

ウェルカムメッセージがでてきます。「lion」や「tiger」を入力可能。ここでは、ひとまずlionsでテストしてみましょう。

voiceflowでalexaスキルを作る

また聞かれてます!では、質問に答えましょう!「yellow」で入力。

voiceflowでalexaスキルを作る

そして名前を聞かれています!何でもいいので、「John」を入れます。

voiceflowでalexaスキルを作る

最後に設定したメッセージとユーザー名が表示されました!成功です!

voiceflowでalexaスキルを作る

では、Amazon Developerアカウントに連携します。「Publish」をクリック。

voiceflowでalexaスキルを作る

スキルに関する情報を入力するところになります。
Display Name(スキル名) → 「Animal Game」
Invocation Name(呼び出し名) → 小文字で「animal game」
Small Icon → 108×108のスキルアイコンをアップロード
Large Icon → 512×512のスキルアイコンをアップロード
Summary(スキルの紹介文章(短)) → 英字で入力

voiceflowでalexaスキルを作る

Description(スキルの紹介文章(長)) → 英字で入力
Category(スキルカテゴリー) → 自由に選択OK
Invocations(呼び出し方法) → open Animal Game、start Animal Game、launch Animal Gameで入力
Keyword(キーワード) → 任意
そして、画面の上の「Publish Skill」をクリック。

voiceflowでalexaスキルを作る

「Login with Amazon」をクリック。

voiceflowでalexaスキルを作る

「Allow」で、VoiceflowがAmazon Developerアカウントへ連携することを許可します。

voiceflowでalexaスキルを作る

全て「no」を選択し、「I certify」をクリック、スキルのテスト方法について英字で入力してから「Submit to Alexa」をクリックします。

voiceflowでalexaスキルを作る

「Your skill has been uploaded to Alexa Development!」のようなメッセージがでてくると連携成功です!

voiceflowでalexaスキルを作る

最後に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でalexaスキルを作る
  • Voiceflowでは、Debug(デバッグ)モードがあり、エラーの原因や現在のパスなどの情報を教えてくれる。便利だね!!
  • voiceflowでalexaスキルを作る

注目今1番オススメする記事

ランキング一覧

スマートスピーカーを使った1番オススメしたい方法

スマートスピーカー比較

あなたにぴったりのスマートスピーカーが分かる!欲しくなる!

どのスピーカーがいいのか悩んでる方...

Smartio-store

Searchスマートスピーカーで出来ること・設定方法を検索




家電おすすめ記事