API Meetup Tokyo #24 〜スマートスピーカーとAPI連携〜 「駅すぱあとWebサービスを使ってアレクサに駅しりとりスキルをローンチするまで」の資料です。 https://api-meetup.doorkeeper.jp/events/70577

1. 駅すぱあとWebサービスを使って
Alexaに駅しりとりスキルを
ローンチするまで
竹田龍介
＜株式会社ヴァル研究所＞
API Meetup Tokyo #24 〜スマートスピーカーとAPI連携〜

2. 自己紹介

3. 名前
竹田 龍介 (@t_ryusuke)
勤務先
株式会社ヴァル研究所
仕事内容
現在、RODEM(ロデム)というサービスを作っています。
また、駅しりとりやEkisbeeeat(エキスビート)など、研究的
なこともやっています。

4. エキスビート?

6. はい、ヴァル研究所の受付にあるゲームです！

7. Unite 2016 Tokyoにも出展しました

8. このゲーム、Unityで作っているんですよ！

9. エキスビートを開発するきっかけ
❏ 2016年、ヴァル研究所が40周年となったきっかけに
開発合宿でなにか新しいものを作りたかった
❏ ダイヤを使ったリズムゲームがヴァルっぽい
❏ せっかくなので、ゲーセンに置けるくらいのゲームに
する
❏ Unityだったらできると思った

10. って、スマートスピーカー関係ないじゃん・・・
ｺﾗｰ! ( ｀Д´)ﾉ

11. すみません・・・

12. では、気を取り直して・・・

13. 本日、お話する内容
Alexaに駅しりとりスキルをローンチする際に苦労したこ
と、工夫したこと、「Amazon Alexa スキル」 2017年12月
&2018年1月の人気ランキングで5位になったことを中心
に、駅すぱあとのAPI「駅すぱあとWebサービス」の紹介
なんかをしていきます。

14. アジェンダ
❏ 駅しりとりスキルって何？
❏ 駅すぱあとWebサービスって何？
❏ 駅しりとりをAlexaのローンチスキルとしてリリースする
きっかけ
❏ スキル開発で困ったこと
❏ スキルが認証されるためのコツ
❏ まとめ

15. 駅しりとりスキルって何？

16. 駅しりとりスキルとは
Alexaと交互に駅名をつなげていくゲームです
うえの
とうきょう
のぎざか
かんだ

17. 駅すぱあとWebサービスって何？

18. 駅すぱあとWebサービスとは
❏ 乗り換え案内サービス「駅すぱあと」のAPI
❏ 経路検索エンジンだけでなく、「駅情報」「路線情報」
など、各種データ取得にも使える
❏ REST APIなので、簡単に使える

19. 駅すぱあとWebサービスの活用
❏ 交通機関情報を活用したアプリケーションやゲームが誰でも
簡単に作ることが出来るを目指しています
❏ 駅すぱあとWebサービスを利用することでサーバーを用意せ
ずに開発が出来ます
❏ 常に最新情報を提供しているため、メンテナンス不要
❏ 本日はそういった駅すぱあとWebサービスを利用した駅しりと
りスキルの開発を紹介します

20. できることの一例
東から始まる駅ってなに？
東京がありますよ

21. 実際のイメージ
GETパラメータ
JSON/XML

22. ちなみに・・・
駅すぱあとWebサービスはスタンダードプ
ラン(有償)とフリープラン(無償)がありま
す。
駅しりとりではフリープランで提供中の機
能だけで実装しています。

23. ぜひぜひ、
使ってみて
フリー版 あります

24. 駅しりとりをAlexaのローンチスキルとして
リリースするきっかけ

25. 駅しりとりの始まり
駅すぱあとを使ったゲームは何ができるか？ということ
で駅名を使ったしりとりゲームを考えました。実は、ずい
ぶん昔にFlashゲームとしてリリースしたことがあり、提案
資料でもこのゲームを見せています。

26. 最近のブラウザじゃ、動かないけど・・・
気になった方はこちらにアクセス → https://ekiworld.net/service/sier/webservice/free_provision.html

27. でも、やっぱりコレ！
後から同じ内容のスキルって
他社は出せないので、
やるならすぐにという感じです。

28. おかげさまで2017年12月と2018年1月の連続で5位

29. スキル開発で困ったこと

30. 1.日本語ドキュメントが少ない
これはローンチとして仕方ないです。
ただ、アメリカから輸入して使っていた方のレビューや
GitHubのサンプルなどもあり、完全手探りではなかった
です。

31. 毛嫌いせずにやっておくんだ
しかも、Node.jsは仕事でも
使っていて慣れていたので、
サンプルも読みやすかったです。

32. そういえば、いろいろやったなぁ・・・
C++、C#、Java、
JavaScript、Ruby、
PHP、Perl、ActionScript
※一部です

33. 2.ステータス管理する方法がわからない
最初は「DynamoDBで」と安直に考えていましたが、ユー
ザーが多いとキャパシティ消費するし、そもそもそんなに
アクセスは必要か？と思ったので、attributes（セッショ
ン）に入れました。

34. ここは割り切りだと思います
どうせ、しりとりの途中で
「次は明日」ってならないので、
セッション消えたら消えたで
問題なし！

35. 3.セッションの概念がよくわからない
Alexaがユーザーの応答待ち状態が「セッションが開いて
いる」状態です。この場合「アレクサ、～」とウェイクワー
ドなしで会話できます。
また、Amazon Echoだとライトリングが光りますので、見
た目で判断可能です。

36. それで差し戻し食らった
「駅しりとりは駅名を
つなげていくゲームです」
と言ってセッション開いたら
「何言えばいいか指示しろ」
って差し戻されました・・・

37. 3.カードを送る方法がわからない
これはサンプル通りに作ればOKなのですが、「フォント変
えられるのかな？」とか「画像送れるのかな？」などなど
結局は繋がった駅名をズラズラっと送るようにして、実績
の確認に使いました。

38. これはね・・・
もう少し凝ったものを
作ったほうが良かったかな

39. スキルが認証されるためのコツ

40. 1.まずはバグを出さない
Lambdaから正しく応答を返さないとエラーとなって会話
が途切れます。こうなるとユーザーが何して良いかわか
らなくなります。
ちなみに、サンプル発話に登録したフレーズはいつでも
飛んできますので、どのステータスでも受け取れるように
します。

41. ユーザーはいつどのタイミングで言うかわからない
始めて
終わって
ヘルプ
降参
はい
いいえ

42. 2.サンプル発話には多くのパターンを登録する
最初は「ギブアップ」という言葉で駅しりとりを終わるよう
にしてました。
しかし、「降参って言っているのにやめてくれない」という
指摘も多かったため、「降参した」とか「負けた」のほか、
「駅名が思いつかない」などでも終わるようにしました。

43. イメージするとこんな感じ・・・
君がッ
泣くまで
しりとりを
やめないッ!

44. 3.スキルを開始したら、スムーズに移行する
駅しりとりを開いた後、「スタート」と言うことで始まるよう
にしてました。
ただこれだとスタートしてくれないことも多かったため、
「駅しりとりです。早速始めます。東京」みたいにスキル
を開いてすぐにしりとりを始めるようにしました。

45. ユーザーが迷わないようにスムーズに会話を進める
駅しりとりへよ
うこそ
では
早速始めます
東京
やりたいって
言ってないんだ
けど・・・

46. 4.ランキングを作る
やはり何かの目標がないとすぐ飽きてしまうということ
で、急遽ランキング機能を作りました。
この部分はセッションだけではどうにもならないため、
DynamoDBに保存してます。

47. 目標があるだけで頑張れる人はたくさんいる
今日は
143駅
行くぞ！
※1月13日の記録です

48. 5.できる限り会話を続ける
最初はユーザー主体で何をやりたいかを発話してもらっ
ていたのですが、会話が途切れることも多かったため、
ランキングを言った後、「あなたも挑戦しますか？」みた
いに会話が続くようにしました。
これであれば、ウェイクワードなしの「はい」でしりとりが
始められます。

49. かんたんな言葉で動作すれば、間違うことも少ない

50. まとめ

51. スマートスピーカーで大切なこと
❏ ユーザーが何を言ってくるか分からない
❏ より少ない情報で済ませる
❏ 記号での選択ではなく、「はい」「いいえ」など、自然な
会話を前提に
❏ ユーザー主体ではなく、スマートスピーカーが主体で
会話を進める

52. 本日の資料にサンプルコードをつけた
Qiita版もありますので、よろしければ、
こちらもご覧ください。
https://qiita.com/t_ryusuke/items/dae852d552e2389c5ed5

53. おまけ

54. こんなことよく聞かれます
❏ 開発期間はどのくらい？
❏ どうしてローンチすることになったの？
❏ ところで、RODEM(ロデム)ってなに？

55. 1.開発期間はどのくらい？
本来やるべき仕事もありますので、着手できる日数は
1ヶ月の20%までを目標にしました。

56. 2.どうしてローンチすることになったの？
これ、ホントは知りません・・・
ただ、かなり前から駅すぱあとWebサービスでAWSを
使っているので、そのおかげかもしれません。

57. 3.ところで、RODEM(ロデム)ってなに？
※スマートスピーカーに関係ありません。
GoogleカレンダーやOffice365の
予定表にスケジュールを
入れるだけでカレンダーに
経路が登録されるサービスです。

58. カレンダーにスケジュールを入れる

59. 移動の予定が自動で入る

60. 簡単操作で出発予定や移動する経路の確認に役立つ

61. そのRODEMの基盤（みんな大好きネットワーク図）

62. ここでのNode.jsがスキル開発に繋がった

63. 色んな所で繋がっていると感じました

64. ご清聴ありがとうございました