Amazon Alexaのスキルをノンコーディング(Voiceflow)

「ノンコーディングで簡単にAlexaスキル」を作ろうハンズオン(Voiceflow)」に参加してきました。
[Voiceflow](https://www.voiceflow.com)とは、ノンコーディングでAlexaスキルを作ることができるサービスです。
こちら「[[Alexa]ノンコーディングでAlexaスキルを作れるサービスVoiceflowが今後にすごく期待できる内容だった](https://dev.classmethod.jp/etc/mrmo-voiceflow-20190212/)」に丁寧にまとめられていますので、詳細はこちらを参照してください。

ここでは、Voiceflowを使ったスキル作成からテストまでの一連流れを書いておきます。
記事を書きながらで１時間くらいだったので、慣れてしまえば５分でできてしまう内容です。

# スキル作成からテストまで
## 準備
1. Alexa開発者アカウントを持っていること。持っていない方は、テキトーに作らないで「[失敗しないAlexa開発者アカウントの作り方](https://dev.classmethod.jp/voice-assistant/how-to-safety-create-alexa-developers-account/)」を見て作ってください。ハマります。

## ログイン
1. 右上の「Sign up Free」を押下します。
<img width="1188" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393858/0a14f536-9d34-f260-2f6d-dadb68c8441e.png">
2. googleやfacebookのアカウントでサインアップできます。
<img width="1188" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393858/3cdc3b77-6043-6c24-9276-2670e112076b.png">

## スキル作成①テンプレートを選択
1.「Create Project」を押下します。
<img width="1188" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393858/3e1abf04-175c-4dfe-28db-7a0334cb225e.png">
2. 次を行います。①スキルの名前をつけます。②「Select Regions」で、日本にチェックを入れた後に、③他の国を外します。
<img width="1188" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393858/302d5f8f-addb-9851-1b82-62a2766613c5.png">
3.テンプレートの選択で右上の「Blank」を選択します。
<img width="1188" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393858/3fc9444e-6b34-58a1-364f-4cdb785d240b.png">
4.しばらく待つとコンソール画面が表示されます。
<img width="1188" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393858/cb9d6881-0d38-50eb-254c-9b1814e8c79e.png">

## スキル作成②Alexaと会話を作る
右のパーツをドラッグ＆ドロップして、必要な部分を入力して作っていきます。
1. スキル呼び出し時にAlexaが最初に話す内容を入力します。
<img width="1188" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393858/0e753388-b4d4-c602-4e5a-3b39c9e45f8d.png">
2. 期待する発話を入力します。ユーザーが発話した内容とここで入力した内容が同じだと、Alexaに反応させる事ができます。
※訂正があります。末尾の”？”は入力しないで下さい。デプロイ時にエラーになってしまいます。
<img width="1188" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393858/17d57374-c475-01db-728d-51c67ed03617.png">
4. 期待した発話の場合にAlexaが話す内容を入力します。
<img width="1188" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393858/5f58b7f3-47af-3c11-5034-2ae1f1d415d6.png">
5.各Blockを矢印で繋げばスキルが完成します。
<img width="1188" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393858/7f5996fa-bdac-0fa7-8835-27f99eca936e.png">

## デプロイ
1. 右上の「Upload to Alexa」を押下します。
<img width="1188" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393858/1a576fdc-78b8-2ef1-ca3f-700366737675.png">
2. アップロードが始まります。「Alexa developer console」にログインを求められたらログインしてください。
<img width="1188" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393858/f126dc66-deb7-b44a-e639-c02bfe2cc98d.png">
3. 「Upload Successful」が出たら終了です。
<img width="1188" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393858/47a4cafe-07eb-b3cb-93c5-2ca5ad6b13fd.png">

## テスト
「Alexa developer console」のテストタブにて、音声またはキーボードにてスキルを呼び出してください。現時点でのスキルの呼び出し方は「『スキル名』を開いて」が無難です。
Voiceflowで作った通りの会話が成立したら成功です。
<img width="1281" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393858/217f447c-bfbc-9dc7-be6c-a0ecef24b2dd.png">

# おわりに
正直Voiceflowすごいな！という感想です。Node.jsなどで自力で同じものを作ろうとすると、AlexaSkillの事を理解しておかないと作れないんじゃないかと思います。
近い将来、VUIのアプリ作成には、プログラマーはいらない時代が来るのかもしれません。