Storylineを使ってAlexaスキルを作ってみた

# ※お知らせ
Storylineが大幅にリニューアルし、日本語にも対応するようになっていました！すごい！
[コーディングなしでサクッとAlexaスキルを作成できるサービス「Storyline」を試してみた](https://dev.classmethod.jp/voice-assistant/create-alexa-custom-skill-with-storyline/)

下記の当時投稿した情報は古くなってしまっていますのでご注意ください。

#:pig:
この記事は [ハンズラボ Advent Calendar 2017](https://qiita.com/advent-calendar/2017/handslab)  12日目の記事です。

[6日目](https://qiita.com/sr-mtmt/items/1a7e83234fc8d55a0f6d)に引き続き、@sr-mtmtです。

先日Alexaがついに日本でも発売されましたね。
ハンズラボでもAlexaスキル開発を行っており、開発方法についても現在試行錯誤中です。

Alexaのスキルのクオリティを左右するシナリオ部分ですが、
これはユーザーによって細かな要望があることが予想されます。
ちょっとした修正であればノンプログラマでも修正できるようなツール・サービスがあれば素敵！
ということでStorylineというサービスを試してみました。

#[Storyline](https://thestoryline.io/)
https://thestoryline.io/
<img width="500" alt="1.png" src="https://qiita-image-store.s3.amazonaws.com/0/210788/b93cf2e2-bb75-83ac-5a7d-d1fd5bba3f32.png">

Coggleのマインドマップと連携させることで簡単にシナリオが作成できるツールです。

こちら、今のところスキルの言語が英語とドイツ語しかないので、その点だけ要注意ですが、
デプロイまでの流れは非常に簡単なのでおすすめです。
有料プランもありますが、お試しであれば無料プランで十分使えると思います。

# 事前準備
:one:Googleアカウントの用意
:two:Amazonアカウントの用意
:three:AWS開発者アカウントの用意（[ASKを始めるところまで設定しておく](https://dev.classmethod.jp/etc/first-step-of-making-alexa-custom-skills/)）

# 手順
[Storylineの使い方について公式動画](https://youtu.be/2nXO-lj72Gc)もあります（英語）

「+Create new」から新しいシナリオを作成します。
<img width="500" alt="2.png" src="https://qiita-image-store.s3.amazonaws.com/0/210788/652a043e-3292-7613-0393-371629a3b7ae.png">

「Connect Coggle Mindmap」をクリック。
Coggleのマインドマップを利用しますが、画面上はStorylineだけで完結しているので見やすいですね
<img width="500" alt="3.png" src="https://qiita-image-store.s3.amazonaws.com/0/210788/931a3943-a636-ac6e-6260-508739267427.png">

「YES, ALLOW ACCESS」をクリック。
<img width="500" alt="4.png" src="https://qiita-image-store.s3.amazonaws.com/0/210788/0e4ebd74-4551-4466-e3db-abcab21cfbf5.png">

ここで「FactApp」などを選択すると簡単なテンプレートが自動生成されますが、
今回は「Create from Scratch」から自分でシナリオを作成します。
<img width="500" alt="5.png" src="https://qiita-image-store.s3.amazonaws.com/0/210788/a8a22b85-2134-7676-1297-6acdfa6bea12.png">

AppName（シナリオ名）を決めます。後でApp一覧から名前を変更することも可能です。
<img width="500" alt="7.png" src="https://qiita-image-store.s3.amazonaws.com/0/210788/d24a0eaf-b465-01ae-8861-fb56c991f5eb.png">

このシナリオの言語を選択します。「英語（US）」「英語（UK）」「英語（インド）」「ドイツ語」から選択可能。日本語くれ。
<img width="500" alt="8.png" src="https://qiita-image-store.s3.amazonaws.com/0/210788/94ba633b-ed2a-e05b-8492-103ad89c4143.png">

そうすると自由にシナリオを生成できる画面になります。
グレーの部分にカーソルを合わせるとプラスボタンが表示されるのでクリックします。
<img width="500" alt="9.png" src="https://qiita-image-store.s3.amazonaws.com/0/210788/5069f439-368c-b7a2-7ff6-c1491c133112.png">

そうするとブランチが出てきます。
この時の色などは有料プランだと変更できるようです。
英語スキルなので、適当に英語のセリフを入れてみます。
<img width="500" alt="10.png" src="https://qiita-image-store.s3.amazonaws.com/0/210788/a99f07ad-7ec8-dcf5-81bd-6423767b72e1.png">

入力規則などはこの「Cheatsheet」を見るとだいたいわかります。
例えば行頭が「==」で始める行を複数入力しておくと、ランダムにどちらかのセリフを話します。
<img width="500" alt="11.png" src="https://qiita-image-store.s3.amazonaws.com/0/210788/f815fb98-c5a5-f571-3b2b-d27e374884b5.png">

ここからブラウザテストもできます。
<img width="500" alt="12.png" src="https://qiita-image-store.s3.amazonaws.com/0/210788/d48b9bcc-42c5-e4e4-6c35-b69be31b5bac.png">

「Start plaing」でシナリオのスタートから自動再生、
プルダウンからシナリオのスタート位置を指定することもできます。
ユーザーの音声入力シーンになるとマイク許可を求められるので承認します。
<img width="500" alt="13.png" src="https://qiita-image-store.s3.amazonaws.com/0/210788/099a00d0-77f1-4742-eaaa-a3c1583a3ba9.png">

シナリオが完成したらデプロイしましょう。
「Deproy」をクリックするとAmazonアカウントとAWS開発者アカウントの登録画面になります。
このとき、ASKを始めるところまで進めていないとデプロイが実行されないようなので注意してください。
<img width="500" alt="14.png" src="https://qiita-image-store.s3.amazonaws.com/0/210788/9c8c809f-a7cd-9449-401c-52db6b654d39.png">

「Deploy」ボタンの横に緑のチェックマークが表示されたらデプロイ完了です。
[アマゾンアプリ開発者ポータル](https://developer.amazon.com/edw/home.html#/)にスキルが作成されていると思います。
「テスト」を有効にするように促されるのでスキルの設定をしましょう。

英語版のスキルなので「alexa.amazon.com」に登録されているAlexa対応端末が必要です。
[この一覧](https://alexa.amazon.com/spa/index.html#skills/your-skills/?ref-suffix=ysa_gw)に先ほど作成されたスキルが表示されると思うので有効にします。

※同じ端末を英語スキルを扱う「alexa.amazon.com」と日本語スキルを扱う「alexa.amazon.co.jp」の両方に設定することはできないようです。
切り替えるとWifi設定からスタートになりますが、有効にしたスキル情報などは切り替え後も保持されます。

以上です。
今回は英語版スキルの開発ですが、日本語対応のスキル作成ツールも使ってみたいですね！

[ハンズラボ Advent Calendar 2017](https://qiita.com/advent-calendar/2017/handslab)  13日目の明日は、@mozukuKitchenさんです！


# 参考
・[音声アプリ戦国時代の救世主？プログラミング無しでAlexa Skillが作れる「Storyline」](https://ledge.ai/alexa_storyline/)
・[【祝Alexa日本上陸】とりあえず日本語でスキルを作ってみる](https://dev.classmethod.jp/etc/first-step-of-making-alexa-custom-skills/)
・[開発中のAlexaスキルを実機テストする方法](https://qiita.com/hayao_k/items/a13b0c9327c49934eda3)