エンジニア

2017.12.18

【Alexa】非エンジニアにもできる!Alexaスキル開発 〜「StoryLine」編〜

【Alexa】非エンジニアにもできる!Alexaスキル開発 〜「StoryLine」編〜
追記(2018/4/11)
Storylineが大幅にリニューアルし、日本語にも対応するようになっていました!すごい!
コーディングなしでサクッとAlexaスキルを作成できるサービス「Storyline」を試してみた
下記の当時投稿した情報は古くなってしまっていますのでご注意ください。

2017/12/17時点の情報

こんにちは、9月に入社したAWSチームの松本です。
AmazonEchoが発売して1ヶ月が経ちましたね。
招待メール、届いた方どのくらいいらっしゃいますでしょうか?
Echoに搭載されているAlexaの強みは、なんといってもスキルの数の多さ!
現在登録されているスキルの数は2万を超えており、
その数は今後もどんどん増えていくと思われます。
ハンズラボでもAlexaスキルを開発しました。 → 東急ハンズスキル
・・・
さて、Alexaスキルを開発する際、
そのユーザー体験を向上させるのに重要なポイント、それは…
「会話フロー」 です。
音声による情報のやりとりは、ちょっとした言い回しを変えるだけで
会話としてのスムーズさが劇的に向上することがあります。
そしてそういった言い回しの細やかな設計を行うには、繰り返しの微調整や
エンジニア以外の方の意見をいただくことが重要になるのではないでしょうか。
そんなとき、誰でも簡単に文言の修正ができるツールがあったら素敵!
ということで、先日 ハンズラボ Advent Calendar 2017 の12日目の記事で、
プログラム言語を用いずにAlexaスキルが開発できるツール
「StoryLine」をご紹介させていただきました。(※ただし英語・ドイツ語スキルの開発のみ)
紹介といってもスキル作成までの流れを淡々と書いた形になったのですが、
せっかく非エンジニアの方にも気軽にお使いいただける、直感的に操作ができるツールなので
もう少しマインドマップ部分の操作方法にも触れて、改めてご紹介したいと思います。

Storyline

https://thestoryline.io/
会話のスタート地点からマインドマップ形式で会話フローを作成していくと
Alexaスキルが出来上がります!
こちら、残念ながら今のところ対応言語が英語とドイツ語しかないですが、
英語は苦手…という方も安心!スマホの読み上げ機能を使って動かしてみることが可能でした!

事前準備

  1. Googleアカウントの用意
  2. Amazonアカウントの用意
  3. AWS開発者アカウントの用意(ASKを始めるところまで設定しておく

手順

Storylineの使い方について公式動画もあります(英語)
「+Create new」から新しい会話フローを作成します。
2.png
「Connect Coggle Mindmap」をクリック。
これで別サービスのCoggleというマインドマップ作成ツールと連携させます。
画面上はStorylineだけで完結しているのでCoggleとStoryLineを行き来する必要はありません。
3.png
「YES, ALLOW ACCESS」をクリック。
4.png
「Fact App」「Quiz Game App」・・・簡単なテンプレートが自動生成されます
「Create from Scratch」・・・自分で一から会話フローを作成します
今回は「Create from Scratch」を選択します。
5.png
AppName(会話フロー名)を決めます。後でApp一覧から名前を変更することも可能です。
7.png
この会話フローの言語を選択します。「英語(US)」「英語(UK)」「英語(インド)」「ドイツ語」から選択可能です。
8.png
そうすると自由に会話フローを生成できる画面になります。
グレーの部分にカーソルを合わせるとプラスボタンが表示されるのでクリックします。
9.png
そうするとブランチが出てきます。
英語スキルなので、適当に英語のセリフを入れてみます。
このとき、記号、図、フォントの太字斜体指定などができますが、Alexaの読み上げに効果をつけられるわけではないのでここでは使用しません。
10.png
入力規則などはこの「Cheatsheet」を見るとだいたいわかります。
例えば行頭を「//」で始めるとユーザーの発話の指定になります。
行頭が「==」で始めるセリフを複数行入力しておくと、Alexaがその中からランダムに1行選択し、セリフを話します。
11.png
ブランチをクリックするとクリックするとブランチのスタイルを選択できます。
ただし、無料プランでできるのは内側の円の中から色を選択するのみで、
外側の円からの色選択、ブランチの太さの指定などは有料プランになります。
ブランチの色を変更するとそのブランチより先の枝の方の色が一斉に変更されます。

ブランチを右クリックするとブランチの追加・削除・コピー・移動、コメント追加ができます。

ここからブラウザテストもできます。
12.png
「Start playing」で会話フローの「Start」の位置から自動再生、
プルダウンから会話フローの開始地点を指定することもできます。
ユーザーの音声入力シーンになるとマイク許可を求められるので承認します。
13.png
会話フローが完成したらAlexaスキルとして展開してみましょう。
「Deproy」をクリックするとAmazonアカウントとAWS開発者アカウントの登録画面になります。このとき、ASKを始めるところまで進めていないとデプロイが実行されないようなので注意してください。
14.png
「Deploy」ボタンの横に緑のチェックマークが表示されたらAlexaスキル作成完了です。
アマゾンアプリ開発者ポータルにスキルが作成されていると思います。
「テスト」を有効にするように促されるので、その他にも一通りスキルの設定をしましょう。
設定のポイントは呼び出し名を下記のように単語で区切った状態で指定することです。
造語だとなかなかうまく反応しません。
複数の言葉を組み合わせたものがいいと思います。

ここでの設定内容は「Deploy」ボタンを押すたびに元に戻るのでどう設定したかメモした方がいいかもしれません。
呼び出し名の調整以外は、設定しなくても実機テストは可能です。
英語版のスキルなので、実機でテストするには「alexa.amazon.com」に登録されているAlexa対応端末が必要です。
この一覧に先ほど作成されたスキルが表示されると思うので有効にします。
※同じ端末を英語スキルを扱う「alexa.amazon.com」と日本語スキルを扱う「alexa.amazon.co.jp」の両方に登録することはできないようです。
登録先を切り替えるとWifi設定からスタートすることにになりますが、有効にしたスキル情報などは切り替え後も保持されます。
StoryLineは、画面右下の「Conversations」から気軽に問い合わせできる点もよかったです。
アカウントを自分で削除することができないため、ここから依頼したのですが、
対応してくれたスタッフは非常に気さくで対応も結構スムーズでした。

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

参考

音声アプリ戦国時代の救世主?プログラミング無しでAlexa Skillが作れる「Storyline」
【祝Alexa日本上陸】とりあえず日本語でスキルを作ってみる
開発中のAlexaスキルを実機テストする方法

一覧に戻る