Clovaスキルストアに「駅すぱあとの山手線ゲーム」スキルをリリースするまで

1. Clovaスキルストアに
「駅すぱあとの山手線ゲーム」
スキルをリリースするまで
竹田龍介
＜株式会社ヴァル研究所＞
『はじめての駅すぱあとWebサービス』書籍出版記念イベント

2. 自己紹介

3. 名前
竹田 龍介 (@t_ryusuke)
勤務先
株式会社ヴァル研究所
仕事内容
現在、駅すぱあとWebサービスを使った自社サー
ビスや受託案件のほか、Alexaの駅しりとりや
Ekisbeeeat(エキスビート)なども開発しています。

4. エキスビート?

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

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

8. そう、Unityならね

9. そして、Unite 2016 Tokyoにも出展しました

10. そして、今・・・

12. iOSとAndroid向共にリリース中です。
(120円です)

13. 買ってね！

14. というわけで

15. 当社と
ユニティ・テクノロジーズ・ジャパン
について

16. それについては、まず、
ここから話さなくてはなりません

18. RODEM(ロデム)ってなに？
GoogleカレンダーやOffice365の
予定表にスケジュールを
入れるだけでカレンダーに
経路が登録されるサービスです。

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

20. 移動予定が自動で入る

21. 予定を入れるだけの簡単操作でスケジュール管理

22. 経費精算もそのまま出来てチョー便利！

23. そのRODEMですが・・・

24. ユニティさんの導入事例がここにあります

25. こういうことです
ゲームエンジン使う
RODEM使う

26. 詳しくはこちらにアクセス！
https://rodem.valwebservices.com/
（無料トライアルもこちらからできます）

27. って、Clova関係ないじゃん・・・
ｺﾗｰ! ( ｀Д´)ﾉ

28. すみません・・・

29. 本日、お話する内容
Clovaに駅すぱあとの山手線ゲームをリリースする際
に苦労したこと、工夫したこと、Alexaと比較した際
にどこが違うのかを中心に、駅すぱあとのAPI「駅す
ぱあとWebサービス」の紹介をしていきます。

30. アジェンダ
❏ 山手線ゲームをClovaのスキルとしてリリースす
るきっかけ
❏ 駅すぱあとの山手線ゲームって何？
❏ 駅すぱあとWebサービスで何やってるの？
❏ LINE Clova スキルの概要
❏ スキル開発で困ったこと（Alexaとの違いなど）
❏ まとめ

31. 駅すぱあとの山手線ゲームをClovaの
スキルとしてリリースするきっかけ

32. 駅すぱあとの山手線ゲーム
Alexa向けのスキル駅しりとりが好評で「駅しりとり
を作った開発者がLINE Clovaのスキルも開発させよ
う」と社内調整があったため、釣られました。

33. 実績って大切だね
たぶん、駅しりとりをリリース
してなかったら声がかかることは
なかったと思う・・・

34. 駅すぱあとの山手線ゲームって何？

35. 駅すぱあとの山手線ゲームとは
山手線ゲームが手軽に遊べるゲームです
東京
山手線にある駅名を言ってね
正解
秋葉原

36. ゲーム内容
1. Clovaがお題となる路線を言う
2. ユーザーが駅名を言う
3. Clovaが判定を行う
a. 正解 or 間違い or 既出の駅 など
4. ユーザーがClovaからヒントをもらう
a. かから始まる3文字の駅→「かんだ」

37. 駅すぱあとWebサービスで何やってるの？

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

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

40. 駅すぱあとWebサービスできることの一例
山手線の駅ってなに？
東京のほか、渋谷や秋葉原
なんかがありますよ

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

42. スキルでは、この路線名から対象となる駅の
一覧を取得する機能を利用してます

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

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

45. LINE Clova スキルの概要

46. LINE Clovaでやっていること#1
音声データ Clova Extensions Kit
♪トウキョウ

47. LINE Clovaでやっていること#2
音声データ
テキスト
Clova Extensions Kit
東京

48. LINE Clovaでやっていること#3
音声データ
テキスト
テキスト
Clova Extensions Kit
正解

49. LINE Clovaでやっていること#4
音声データ
合成音
テキスト
テキスト
Clova Extensions Kit
♪セイカイ

50. こういった音声⇔テキスト変換が行われます
※ただ、ここには罠があります・・・(後ほど紹介)

51. スキル開発で困ったこと
（Alexaとの違いもあるよ）

52. 1.ゲーム内容を考えるだけで一苦労
Alexaで駅しりとりをリリースしていたのですが、
「そのままベタ移植して大丈夫なのか？」と思い、
駅しりとりとは違うゲームを考えました。

53. 理由はズバリ、AlexaとClovaの
メインターゲットが違うからです
(個人的な見解)

54. 想定されるターゲット(個人的な見解)
● Alexa
ガジェットオタク、アマゾン(ECサイト)を使う人
VUIを積極的に使ってみたい人
● Clova
女性（特に主婦）、LINEを日頃利用している人
LINEのキャラクターがかわいいと思う人

55. なんか、最初はすげー難しいゲームだった
まず、Clovaがお題を出して
対戦するゲームにしました。
しかし、相手がプログラムです。
Clovaが100%正解してユーザーが
勝つことはまずありません。

56. しかも、鬼畜ゲーでした・・・
山手線内回りの
駅を順番に
言ってください

57. 一部の方には好評だったらしのですが・・・

58. かと言って、ランダムで負けるゲームの
どこが面白んだか・・・

59. そもそも、山手線ゲームってゆるいゲームなんじゃ
とりあえず、繋げなくてもいいから
Clovaが優しくヒントなども出しつつ、
一人でやるゲームでも良いかなと
思い始めた・・・

60. もちろん、みんなでワイワイ楽しんでも良し

61. というわけで、リリース直前、
大幅に作り直すことが決定しました・・・

62. 2.処理するサーバーが用意されていない
● Alexa
Alexa Skills Kit上でLambdaを設定するだけでOK
● Clova
Clova Extensions Kitではインテントやスロットの設
定をするだけで、処理するサーバーが用意されて
いない

63. そう、別途、処理するサーバーが必要になります

64. サーバーのイメージ
Alexa Skills Kit
JSON
JSON
話しかける
応答
話しかける
応答
POST
レスポンス
Clova Extensions Kit
自前

65. その他の成約
● HTTPSである必要がある
必ず暗号化しなければならない。HTTP不可
● インテントやスロットなどはPOSTで送られる
BODYにJSONが入っているので、解析が必要
● 送信元の検証が必要
外部公開になるので、送信元をチェックする

66. まあ、LambdaをAPI Gatewayで公開する
イメージなので、Alexa開発者なら
わかりやすいと思う

67. 3.開発用の端末というものがない
これは、Clova使っている人だったらすぐわかると思
いますが、スマホアプリのClovaで市販されているス
ピーカーを登録する必要があります。

68. 使うかどうかわからないけど、半額だからという理
由だけで購入したClova Firendsが役に立った

69. ただ、そのClovaと開発者のアカウントを連携させて
動かす必要があるため、いつも使っているLINEアカ
ウントから切り離す必要があります。

70. さよなら、Clova Friends・・・
＝＝＝
＝＝
＝

71. 友達がいない山手線ゲームちゃんに贈呈

72. なんて言いましたが、これは
（つい最近？）改善されてた・・・
開発アカウントじゃなくてもOK

73. いろいろ仕様が変わるので、
開発者は要注意ですね

74. おかえり、Clova Friends・・・
＝＝＝
＝＝
＝

75. というわけで、Clova持っている人は
すぐ開発を始められますよ

76. 4.レスポンスはどうなってるの？
● インテント
基本的に同じです
● スロット
これもずらずらっと並べます
● レスポンス
outputSpeech や sessionAttributes などはあります
shouldEndSession の使い方も同じです

77. ただ、これだけは注意が必要
● outputSpeech
○ Alexa
SSMLで書きます
“<speak>こんにちは</speak>”とかね
○ Clova
SimpleSpeech or SpeechList で書きます

78. outputSpeechの例
● SimpleSpeech
“こんにちは”だけです
タグは使えません
● SpeechList
SimpleSpeechを配列にします
この場合音声も渡せますが、“type=URL”でURLを
一つだけ渡します

79. Alexaのベタ移植は出来ないので、変換は必要です

80. 5.Clovaがちゃんと変換してくれない
まず、てんまはどういう漢字を書くと思いますか？

81. ほとんどの人は天馬だと思います。
※天魔って思っちゃった方、おそらく
東方が好きなんだな・・・

82. なので、割り切りが大切
本当は天満と認識してほしいの
ですが、そういうレアなケースは
少ないので、天馬もOKと
登録しています。

83. ところが、実装コストが・・・
対応している路線すべての
認識の差を実機で確認し、
誤認している駅を追加で
登録しました。

84. うまくいかない変換の例
天満(てんま)→天馬
東京(とうきょう)→tokyo
大正(たいしょう)→対象
市場前(しじょうまえ)→試乗前

85. ニホンゴムズカシイ

86. 5路線しか無い理由はこれだったんです・・・

87. 6.Clovaが変換した駅名と駅すぱあとの駅名が違う
おおくぼ
大久保 大久保(東京都)

88. 駅名が違う理由
● 駅すぱあとWebサービス
全国で同一の駅名が合った場合、その中から1つ
の駅を特定する必要がある
大久保の場合は京都、兵庫、秋田にもある
● Clova
同じ駅名でも地域を特定する必要がない

89. その他の理由
● 同音異義語
たばた→（田端/田畑）
● 連体助詞
霞ケ関と霞が関（両方共「かすみがせき」）
● 表記ゆれ
Osaka Metro/大阪メトロ

90. どのように処理するかはプログラマーの腕の見せ所

91. 結局、同名駅除去プログラムとか作った
getResponse(url).then(function (resultSet) {
let max = parseInt(resultSet.ResultSet.max, 10);
for (var i = 0; i < resultSet.ResultSet.Point.length; i++) {
let shortName = getShotName(resultSet.ResultSet.Point[i].Station.Name);
if (stationIndexOf(shortName, resultSet.ResultSet.Point[i].Station.Yomi, result) == -1) {
result.stations.push(resultSet.ResultSet.Point[i].Station.Name);
}
}
if (offset + 100 > max) {
console.log(result);
} else {
getStationList(offset + 100);
}
});

92. まとめ

93. スマートスピーカーで大切なこと
❏ やはり、開発実績は大切
❏ 未知の領域に踏み入れるのは苦労する
（ドキュメントはしっかり読もう）
❏ Alexaで開発の経験があれば、比較的簡単かも
❏ 実機での確認ちゃんと行う
❏ 駅すぱあとWebサービスの特性を知ろう

94. LINE BOOT AWARDS 2018の
協賛パートナーにもなっていますので、
これから共に盛り上げていきましょう

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