はじめに

logo

Voiceflowを使った、ノンコーディングで始めるAlexaスキル開発のハンズオン資料です。

想定するターゲット

注意

更新履歴

必要なもの

以下を事前に準備しておいてください。

Amazon.co.jpアカウント

gmailアカウント

以下で使用します。事前に準備しておいてください。

では始めましょう！

Voiceflowアカウントの作成

https://voiceflow.com/にアクセスします。Voiceflowアカウントを持っていない方は、"Sign up free"をクリックしてアカウントを作成しましょう。
※すでにアカウントを持っている方は、これ以降の作業は不要です。"Sign in"をクリックしてログインし、次の章に進みましょう。

c03-000

"Sign up with Google" をクリックします。

c03-001

gmailのログイン画面が出てきたらログインします。

c03-002

登録後にかんたんなアンケートがありますので、順に答えていきましょう。なお、どれを選択したとしてもVoiceflowの利用に影響はありませんので安心してください。"Continue"をクリックして進めます。

c03-003

Voceflowを使う目的（個人利用か、仕事か）を聞いてくるので、適当に選んでください。選んだら、"Continue"をクリックします。

c03-004

Voiceflowをどういうふうに使うのか（デザインやプロトタイピング、開発やリリース）を聞いてくるので、適当に選んでください。選んだら、"Continue"をクリックします。

c03-005

プログラミング経験があるか？を聞いてくるので、適当に選んでください。（経験なし、少しだけ経験あり、経験豊富）。選んだら、"Complete"をクリックします。

c03-006

以下の画面が出てきたらログイン完了です！ちなみに動画の方はVoiceflowのCEOであるBradenさんです。"Get started"をクリックします。

c03-007

"My First Project" という最初のプロジェクトが開いた状態になっていますが、これは使いません。左上の"＜"をクリックします。

c03-008

プロジェクトの一覧画面が表示されます。Voiceflowでは、AlexaスキルやGoogle Homeアクションを「プロジェクト」という単位で管理します。右の列にあるのがさっき開いていた、アカウント作成と同時に最初に自動作成される「My First Project」ですね。左の列にはサンプルのプロジェクトが並んでいます。

このハンズオンでは、この一覧画面でプロジェクトの新規作成から行いますので、これらのプロジェクトはすべて使用しません。プロジェクトを作成するとこの画面に一覧表示される、と思ってもらえればよいです。

c03-009

これで準備が整いました。いよいよ次の章からAlexaスキルを作っていきます！

今回作成するスキルについて

このハンズオンでは以下のようなスキルを作成します。

ユーザ　：アレクサ、我が家の食卓を開いて

アレクサ：我が家の食卓へようこそ！このスキルでは我が家のおすすめのレシピをご紹介しますよ。

        なんのレシピを聞きますか？

ユーザ　：肉じゃがのレシピを教えて

アレクサ：わかりました。では肉じゃがの４人分のレシピです。

        じゃがいも、５００グラム、玉ねぎ、１個、牛肉細切れ、２００グラム、糸こんにゃく、１００グラム、
        サラダ油、小さじ１、水３００ミリリットル、濃口醤油、大さじ４、みりん、大さじ４、酒、大さじ３、
        砂糖、大さじ３、です。

        他のレシピも聞きますか？

ユーザ　：いいえ

アレクサ：わかりました。今日のご飯が楽しみですね。また利用してくださいね。

スキルの作成（その１）

ではスキルを作成していきましょう！

プロジェクトの一覧画面で、Default Listと書いてあるところの一番下の"Create Project"をクリックします。

s006

スキルの基本情報を入力します。

"Enter your project name" にスキル名を入力します。スキル名がスキルの呼び出し名になります。今回は「我が家の食卓」と入力します。

国・言語は、日本語向けスキルなので、"Japanese（JP）"にチェックを入れて、"English（US）"のチェックを外します。

最後に"Continue"をクリックします。

s007

スキル開発用のキャンバス画面が表示されます。この画面が基本となります。

s009

では早速やってみましょう！左のメニューから、"Speak"と書かれたブロックをドラッグアンドドロップして、Homeブロックの右側に置きます。

s010

右側にSpeakブロックのメニューが出てきました。"Tell Alexa what to say..."と書かれたところに以下の文章を入力します。

我が家の食卓へようこそ！このスキルでは我が家のレシピをご紹介しますよ。

s011

StartブロックとSpeakブロックを線でつなげます。Startブロックの右端の四角の部分からSpeakブロックの左端の四角の部分までドラッグしてつなげてください。

s012

さらに、もう一つSpeakブロックを追加しましょう。場所は先ほど作成したSpeakブロックの右でよいです。中の文章は以下を入力します。

何のレシピを聞きたいですか？

そしてSpeakブロック同士をつなげます。こんな感じになります。

s023

ではここで一旦保存しましょう。Voiceflowでは、保存は定期的に自動で行われますが、右上にフロッピーのアイコンが表示されている場合はまだ保存されていない状態なのでクリックして保存します。最新の状態で保存済みの場合は緑のチェックマークが表示されます。

s012-02

ではテストしてみましょう。

Voiceflowは、標準でテスト機能を持っています（右上の矢印のアイコンがそれです）。ただし、以下のような問題があります。

ということで、テストはAlexa開発者コンソール側で行うこととします。

スキルのアップロード

Alexa開発者コンソールへのアップロードは右上の"Upload To Alexa"をクリックします。

s013

はじめてアップロードする場合は、Alexa開発者コンソールとの連携ができていませんので、連携設定を行う必要があります。"Login with Amazon"をクリックします。

s014

Amazonへのログイン画面が表示されますので、Amazon.co.jpのアカウントでログインします。

s015

開発者コンソールへのアクセス権の確認が行われますので「許可」をクリックします。

s016

この画面が表示されれば連携は完了です。"Continue"をクリックして、スキルをアップロードします。

s017

アップロードの進捗が表示されます。

s018

"Upload Successful"と表示されれば、アップロードは完了し、Alexa開発者コンソールでのテストが可能になります。"Test on Alexa Simulator"をクリックします。

s019

Alexa開発者コンソールのテストシミュレータ表示されます。

s020

スキルのテスト

ではテストしてみましょう。左の「日本語」と書かれた横の入力欄に「我が家の食卓をひらいて」と入力しENTERキーを押してください。

s021

Voiceflowで設定した通りの文章が表示（発話）されましたでしょうか？

s022

まだ、少ししか喋らせていないのでテストというほどのものでもないですが、Voiceflowでのスキル開発は、

という一連の流れの繰り返し、ということを理解してください。

では、引き続きスキルの作成を進めましょう。

先程の会話の最後では「なんのレシピを聞きたいですか？」ということで、ユーザに対して質問をしています。すなわちユーザからの発話を元に以後の会話が分岐していくことになります。いよいよプログラムらしい感じになってきましたね！

Voiceflowで、ユーザの発話を元に分岐を作るにはChoiceブロックを使うのが一番簡単なのですが、現状少し問題があり、

これらはそのうち治るかもしれませんが、現状、こういった「ユーザの発話」と「それに応じた分岐」を行うには、Interactionブロックを使う必要があります。Interactionブロックを使うには、Alexaの「VUIの仕組み」を少し知る必要があります。

VUIの仕組み

では、VUIの仕組みについて学んでいきましょう。VUIに必要な要素は以下の３つとなります。

それぞれ順に説明していきます。

インテント

最初に説明したスキルの応答例の中に、ユーザが「やりたいこと、してほしいこと」が書いてあります。それはなんでしょうか？

ユーザ　：肉じゃがのレシピを教えて

要は、特定の料理の「レシピの内容を教えてほしい」ということですよね。

こういった 「ユーザがやりたいこと」「ユーザが言いそうなこと」 をスマートスピーカー開発の世界では 「インテント（意図）」 といいます。簡単に行ってしまうと、これらのインテントの内容に応じて、適切な応答を返すように機能を作る、のがスマートスピーカースキルの開発ということになります。

今回の応答例では書いてませんが、例えば「レシピを教えて」と言う前に、そもそもレシピの種類は何があるんだろう？という疑問があってもおかしくありません。その場合には多分ユーザはこう言うでしょう。

ユーザ　：レシピの種類を教えて

両方ともレシピに関するインテントであるということは共通ですよね？でもユーザが言ってることは微妙に違いませんか？そして、それぞれに対して返ってくる答えも違いますよね？

インテント①

ユーザ　：肉じゃがのレシピを教えて

具体的な料理に対するレシピの内容が知りたい、これに対する答えは、

カレーライスのレシピは、じゃがいも、５００グラム、玉ねぎ、１個、・・・

インテント②

ユーザ　：レシピの種類を教えて

どういうレシピの種類があるか知りたい、これに対する答えは、

肉じゃが、カレーライス、カルボナーラがあります

このように、ユーザが聞きたい意図が違う、すなわち、返ってくる答えも違うということは、複数のインテントが存在するということを表しています。したがって、これらはそれぞれ別のインテントとして設計する必要があるということになります。Alexaに限らず、他のスマートスピーカー等でもこの考え方は共通なので、まずはこういうものだという風にご理解ください。

さらに、どんなスキルを開発するかに関係なく、共通のインテントというものも存在します。

アレクサ、終了して

アレクサ、スキルの使い方を教えて

レシピを教えてくれるスキルであっても、天気を教えてくれるスキルであっても、スマートスピーカーを操作する場合にはこういうことってありますよね？こういったスマートスピーカーそのものの機能に関するインテントを「標準インテント」といいます。これらはスキルの種類や内容に関係なく、スマートスピーカーを操作する上で必要な共通機能なので予め用意されており、応答内容だけは開発者が設定することになりますが、機能としての振る舞いは決められた形になります。

それに対して、最初に例としてあげた「レシピの種類をおしえて」や「〇〇〇のレシピを教えて」は、そのスキル固有の機能、すなわち、スキル固有のインテントになりますので 「カスタムインテント」といいます。これは開発者が自由に作成することができます。

まとめると、カスタムインテントは開発者がそのスキルの一機能としての振る舞い、応答内容も含めてイチから実装するもの、標準インテントは予め用意されたルールに従って応答だけ設定するもの、と覚えてください。

サンプル発話

再度、先程のカスタムインテントの例を見てみましょう

ユーザ　：肉じゃがのレシピを教えて

肉じゃがの部分は置いといて、このインテント、この通りにいいますか？あなたならどう言いますか？

「肉じゃがのレシピ、教えて」（微妙に違う）
「肉じゃがのレシピ！」（動詞がない）
「今夜は、肉じゃがにしよーかー」（独り言っぽい）
「肉じゃが！」（めんどくさい）

意図としてはすべて同じですが、言い方は様々ですよね？これらのユーザの発話の「パターン」を 「サンプル発話」といいます。音声認識の技術は格段に進歩しましたが、文脈の解析はまだまだ完璧ではありません。そこで、こういったユーザの言いそうなパターンを可能な限り網羅することで、より高い精度で多くのユーザの要求に答えることが可能となります。

また、これはカスタムインテントだけではなく、標準インテントでも同じです。標準インテントの場合には予めユーザのサンプル発話が内部的に用意されていますが、それでもすべてのユーザの発話パターンに対応できるわけではないため、より精度を高めたい場合にはサンプル発話を追加することも可能です。

スロット

もう一度、カスタムインテントを見てください。

ユーザ　：肉じゃがのレシピを教えて

何度も繰り返すようですが、肉じゃがのレシピを知りたいというインテントですね。じゃあこれが例えばカレーライスだったらどうでしょうか？カルボナーラだったらどうでしょうか？こういうのを一つ一つインテントとして用意していたらキリがないですよね？このようにインテントの目的は同じだけれども、その中に一部異なる部分が含まれる場合、すなわち 「可変」となる部分を 「スロット」といいます。スロットを使うことで、

ができるようになり、より柔軟なスキル開発ができるようになります。

VUIのまとめ

インテント、サンプル発話、スロットの関係を図にまとめるとこんな感じになります。

vui

なんとなく雰囲気がわかったでしょうか？現時点では、まだよくわからない部分もあるかもしれませんが、それは実際のスキル開発の中で学んでいきましょう！

スキルの作成（STEP2）続き

ではインテントを作っていきましょう。左のメニューの"Advanced"をクリックすると、Interactionブロックというのが出てくるので、これを二つ目のSpeakブロックの右に配置して、線でつなぎます。

s024

次に、Interactionブロックの中の設定を行います。

まず、スロットの設定です。Interactionブロックの中のSlotsタブをクリックして、Add Slotsをクリックし、以下を設定していきます。

こういう感じになります。

s025

次に、インテントの設定です。Interactionブロックの中のIntentsタブをクリックして、Add Intentsをクリックし、以下を設定していきます。

例として「肉じゃがのレシピを教えて」のサンプル発話を入力してみましょう。「肉じゃが」の部分がスロットになりますので、入力する内容は「[recipe_name]のレシピを教えて」になりますね？スロットを入力する場合は"["を入力すると自動的に候補が出てきます。

s026

そのままENTERキーを押すとそれが入力され、スロットの場合はブルーで強調表示されます。

s027

続けて「のレシピを教えて」を入力しますが、スロットの前後には必ず半角スペースが含まれる必要があるので注意してください。

s028

入力し終わったら必ずENTERキーで確定させてください。

s029

同様にして、以下を入力して下さい。

こんな感じになります。

s030

最後に、インテントごとの分岐の設定です。今回はインテントが一つだけですが、複数のインテントの場合はもちろん、スロットを使う場合には必ず設定が必要になります。Interactionブロックの中のChoicesタブをクリックして、Add Choiceをクリックします。

s031

Interactionブロックに分岐が増えたのがわかるでしょうか？ここで Select Intent から先ほど作成した"recipe_intent" を選択することで、「xxxxxのレシピを教えて」と言われた場合はこの分岐に入るという紐付けができたことになります。

s032

もう一つ、先程インテントの中で設定したスロット、これは後で分岐の条件として使います。Voiceflowでは、If変数による分岐ができるIfブロックというのがあります。スロット値を変数にしたい場合は、スロットと変数のマッピングが必要になります。

まず変数を作成しましょう。画面一番左の"</>"のアイコンをクリックします。

s033

変数（Variable）の画面が表示されます。真ん中の入力欄に"recipe_name"を入力します。これが変数名になります。最後にENTERキーを忘れずに。

s034

一番下に先程の変数が表示されればOKです。

s035

では再度Interactionブロックに戻って、スロットと変数のマッピングを行います。Choicesタブの、先程作成したrecipe_intentの中にある"Add Variable Map"をクリックします。

s036

スロットと変数をそれぞれ選択する項目が出てきます。

s037

Slotに"recipe_name"、Variableに"recipe_name"をそれぞれ設定します。こんな感じになります。

s038

これでInteractionブロックの設定は終わりです。たかだか分岐処理にこれだけの設定が必要なのか、と感じたかもしれませんが、慣れればそれほど時間もかからないようになりますので、ぜひ覚えてください。

これで、ユーザが発話したレシピ名を変数で処理できるようになりましたので、いよいよ、本当の分岐処理になります。

では、ここから分岐処理を行います。前の章でもお話したとおり、変数による分岐はIfブロックを使います。

左のメニューの"Logic"をクリックすると、Ifブロックが出てくるので、これをInteractionブロックの右において、1と書いてある四角とつなげます。

s039

Ifブロックの中に条件を設定していきます。設定する条件は以下となります。

では、「肉じゃが」から設定していきます。Ifブロックを作ると最初から1のルートができていますので、ここに「肉じゃが」の設定を入れます。Ifブロックの設定は少しわかりにくいので順を追って設定してきます。

valueと書いてある横の青いアイコンをクリックします。

s040

ドロップダウンリストが表示されるので、"Variable" を選択します。

s041

これで変数名を選択することができるようになりますのでクリックします。

s042

recipe_nameを選択します。

s043

recipe_nameがIf文の条件になりました。横の青いアイコンをクリックします。

s044

ドロップダウンリストが表示されるので、"=" を選択します。

s045

value のところに「肉じゃが」と入力します。

s046

これで一つの条件が完成です。続けて "Add If Statement" をクリックして、「カレーライス」「カルボナーラ」の条件を設定します。最終的にはこんな感じになります。

s047

Ifブロックの右端の四角が増えているのがわかるでしょうか？これがそれぞれの条件の番号と対応していて、それぞれの条件に合致したら処理が別れていくということになります。どれにも合致しない場合は"Else"という流れになります。

さあ、これであとはAlexaにそれぞれのレシピの内容を喋らせるだけです。

ここまで来るともうおわかりですよね？Speakブロックをそれぞれに用意して、レシピの内容を喋らせるだけです。レシピの文章は以下に用意しましたのでコピペしてお使いください。

肉じゃが

肉じゃがのレシピです。じゃがいも、５００グラム、玉ねぎ、１個、牛肉細切れ、２００グラム、糸こんにゃく、１００グラム、サラダ油、小さじ１、水３００ミリリットル、濃口醤油、大さじ４、みりん、大さじ４、酒、大さじ３、砂糖、大さじ３、です

カレーライス

カレーライスのレシピです。玉ネギ、１個、ニンニク、１かけら、生姜、15グラム、ローリエ、１枚、カレールー、220グラム、ブイヨン、１２００CC、です

カルボナーラ

カルボナーラのレシピです。パスタ、１００グラム、ベーコン、４０グラム、卵、１個、パルメザンチーズ、大さじ３、ブラックペッパー、適量、オリーブオイル、適量、水、１リットル、塩、大さじ１、です

どれにも該当しない場合

すいません、そのレシピはまだありません。現在ご紹介できるレシピは、肉じゃが、カレーライス、カルボナーラです。

こういう感じになります。

s048

elseのところについて説明しておきます。

elseは、Ifブロックで設定した条件にどれも合致しなかった場合のフローになります。単に「そのレシピはないよ」と言って、終わってしまっても良いんですが、できればもう一回ユーザに言い直してもらうほうが親切ですよね？（じゃないと、ユーザに最初からやり直してもらわないといけなくなります。）

ということで、こんな感じで線を引いてみましょう。

s049

ちょっと線がかぶって見にくいですよね。こういう場合は、「すいません、そのレシピは・・・」のSpeakブロックをドラッグします。

s050

線が自動で引きなおされて見やすくなりましたよね。このように一旦線を引いたブロックを動かすと自動で線が引き直されます。ブロックをたくさん作っていくと見にくくなって処理がわからなくなるので、こんな感じで見やすくしておくのがおすすめです。

これで、説明にないレシピをユーザが発話した場合、以下のような感じで、会話フローが元に戻ることになります。

アレクサ：すいません、そのレシピはありません。現在ご紹介できるレシピは、肉じゃが、カレーライス、カルボナーラです。

        どのレシピを聞きたいですか？

（・・・以後、繰り返し・・・）

では、各レシピのSpeakブロックの続きも作成していきましょう。レシピを説明したあとの流れは以下のような感じでした。

アレクサ：わかりました。では肉じゃがの４人分のレシピです。

        じゃがいも、５００グラム、玉ねぎ、１個、牛肉細切れ、２００グラム、糸こんにゃく、１００グラム、
        サラダ油、小さじ１、水３００ミリリットル、濃口醤油、大さじ４、みりん、大さじ４、酒、大さじ３、
        砂糖、大さじ３、です。

        他のレシピも聞きますか？

ユーザ　：いいえ

アレクサ：わかりました。今日のご飯が楽しみですね。また利用してくださいね

まず、「他のレシピも聞きますか？」というのをSpeakブロックで追加します。ここはどのレシピの説明をしたとしても共通なので、以下のように線を引くことができます。

s051

次は、ここで「はい」「いいえ」の分岐になります。

Interactionブロックのところで説明しましたが、ユーザの発話内容で分岐させたい場合、現状はInteractionブロックとIfブロックを組み合わせて使うしかないということでしたが、Alexa開発において、「はい」「いいえ」は少し特殊な位置づけとなっており、この場合はInteractionブロックだけで実現できます。

まず、Interactionブロックを置いて、先程のSpeakブロックから線を引きます。Interactionブロックの中のChoicesタブを開いて"Add Choices"をクリックします。

s052

"Select Intent"から"YesIntent"を選択します。これが「はい」になります。

s053

同様にして"Add Choices"をクリックして、今度は「いいえ」になる"NoIntent"を選択します。２つとも設定するとこんな感じになります。Interactionブロックに分岐ができているのがわかりますでしょうか。

s054

あとは線を引くだけですね。まず、「はい」の場合、「他のレシピを聞きますか？」に対して「はい」と答えているので、レシピの選択まで戻せばいいだけですね。

s055

次は「いいえ」です。Voiceflowではブロックの後ろに何も線を引かなければそこで処理が終了します。ただ、できれば最後に挨拶させたいですよね。ということでシナリオどおり「今日のご飯が楽しみですね。また利用してください」と喋らせることにします。もうわかりますよね？

最後にここまでの全体像を載せておきます。

s056

できたらアップロードしてテストしてみてください。想定どおりに動きましたか？

いかがでしたか？通常のAlexaスキル開発では、VUIの知識に加えて、プログラミングの知識、クラウド（Amazon Web Service）の知識も必要になりますが、Voiceflowでは、VUIの知識は必要ですが、プログラミングやクラウドの仕組みを知らなくてもGUIだけでスキル開発を行うことができます。プログラミングの初心者や苦手な方でもアイデア次第でスキルを作成することができますので、ぜひトライしてみてください！

宿題

これで一通りスキルが動作するようになりましたが、ブラッシュアップする余地は残されています。興味のある方は、以下のようなことを実現するにはどうすればよいか、試してみてください。

参考

以下に参考となる情報をまとめておきます。英語が多いですが、一度見てみてください。

Voiceflow University

https://university.getvoiceflow.com/

link01

Voiceflowのドキュメントや説明ビデオ、チュートリアルなどが豊富に揃っています。

Youtube: Voiceflowチャンネル

https://www.youtube.com/channel/UCbqUIYQ7J2rS6C_nk4cNTxQ/featured

link02

Voiceflowのチュートリアルビデオが揃っています。

Facebookグループ

https://www.facebook.com/groups/voiceflowgroup/

link03

Facebookのグループです。各国のユーザから活発な意見や質問が飛び交ってますが、Voiceflowの中の人がマメに答えてくれます。参加申請が必要ですが、すぐに許可してくれます。

Voiceflow Forum

https://forum.getvoiceflow.com/

link04

会員制のフォーラムです（要登録）。不具合、機能リクエスト、などいろいろあります。

チャットサポート

Voiceflowの画面の右下にあるこのアイコンをクリックするとチャットサポートが利用できます。時間帯があえば結構迅速にレスしてくれます。

link05-01

link05-02

国内の紹介記事

順不同です。