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

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

Voiceflowログイン＆使い方

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

LINK

• Voiceflow(getVoiceflow.com)

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

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

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

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

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

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

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

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

次はSpeakブロックを押して、Alexaの発話を入力します。「That’s great! OK, I will ask you a question.」（いいですね！では、問題を出します。）を入力。その下のSpeak: tigerブロックにも同じく「That’s great! OK, I will ask you a question.」を入力。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「Start From Beginning」（最初から）をクリック。

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

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

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

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

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

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

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

「Login with Amazon」をクリック。

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

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

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

最後にAmazon Developerアカウントへログインし、スキルのアップロードを確認します。はい、ちゃんと「Animal Game」が表示されていますね！お疲れ様でした！

VoiceflowとStorylineの比較

今回は新しいサービスのVoiceflowを使ってAlexaスキルを作ってみました。普段はStorylineを使っていますが、ノンプログラミングでAlexaスキルを作れるという点では同じようなサービスです。

両方を使ってみた上で、両サービスを比較してみました。

• 現在両サービスとも無料
• Storylineで１ブロック内に変数、オーディオ、Elseなどを複数入力するが、Voiceflowでは機能ごとにブロックが細かく分かれている
• Storylineより、Voiceflow画面やシステムの方が安定していると感じる
• 両方ともAPI機能があり、外部サービスとの連携が可能
• Voiceflowの方が、スキルをAmazon Developerアカウントへアップロード（Publish）する時の手順がスムーズかつ短い
• 現時点でStorylineのFacebookコミュニティは約3,200人で、Voiceflowは300人くらい
• UI的には、Voiceflowの方が「かっこいい」かも！？
• Voiceflowの「If」機能が気になる。条件を設定し分岐させるようなロジックが作成できるみたいので、より面白いゲームやよりスマートなスキルの開発が可能かも！期待してる！！

• Voiceflowでは、Debug（デバッグ）モードがあり、エラーの原因や現在のパスなどの情報を教えてくれる。便利だね！！