はじめに
CEK(Clova Extensions Kit)がリリースされて何か作らないと...作らないと...って思っていました。
ちょうど海の日ということもあって、サイコロアプリを参考にして、ランダムでうみのどうぶつの名前を教えてくれるアプリを作ってみました。
海の日だから水族館にいるどうぶつを教えてくれるアプリを作ってみた。(小並感。 pic.twitter.com/bC5DiIOoRV
— しげる(とみん) (@a4geru) 2018年7月16日
作り方
サーバーサイドはrubyのsinatraを使います。
開発環境はmacのローカル環境を使いngrokを使って行います。
今回の記事では3つの手順で行います。
- 受け口(ngrok)の設定
- Clovaの設定
- サーバー(sintra)の設定
受け口(ngrok)の設定
ngrokがまだインストールされていない場合はbrewを使ってインストールをしてください。
ngrokを起動すると外部からhttps://XXXXXXXX.ngrok.ioのリクエストを受け付けることができます。起動するたびにURLが変わるのでngrokは落とさず、残しておいてください。
次のClovaの設定で、**https://XXX...**のurlを使うのでコピーしておいてください。
# macにまだngrokがインストールされていない場合
$ brew install ngrok
# ngrokの起動
$ ngrok http 3000
Session Status online
Session Expires 7 hours, 59 minutes
Version 2.2.8
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://XXXXXXXX.ngrok.io -> localhost:3000
Forwarding https://XXXXXXXX.ngrok.io -> localhost:3000
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00
Clovaの設定
Clova Developer Centerに入りLINE Developersでスキルチャネルを新規作成を選択肢新しいbotを作成します。
プロバイダの作成, チャンネル名 は適当に設定をします。(※チャンネル名はLINE Developersの画面から編集可能です。
基本設定
Clovaのアプリは 呼び出し名 + に繋いで と呟くとつなぐことができる呼び出し名です。呼びやすい名前にしましょう。また、呼び出し名をサブで指定することもでき、自然言語の曖昧な表現に対応することができます。
サーバー設定
サーバー設定では、先ほど設定したngrokのURLを貼り付けると完了です！
配信情報
配信情報は開発中では必要がないために、適当に埋めます。
サーバー(sintra)の設定
サーバーサイドはsinatraを用います。
serverを立てる際は-pオプションでportをngrokで設定した3000番ポートを指定します。
これにより、外部からの3000番portとローカル内のポートをつなぐことができます。
bundle init
echo "gem 'sinatra'" >> Gemfile
touch app.rb
bundle exec ruby app.rb -p 3000
Clovaからのリクエストがpostで来るため、postで受け取ります。
今回のrubyのコードで実際に書いた部分はどうぶつをランダムで選ぶ2行のみです。
require 'sinatra'
require 'json'
post '/' do
animals = ['ペンギン', 'クジラ', 'イルカ', 'シャチ', 'アザラシ']
animal = animals[rand(animals.length-1)]
return {
"version": "1.0",
"response": {
"outputSpeech": {
"type": "SpeechList",
"values": [
{
"type":"PlainText",
"lang":"ja",
"value": animal
}
]
},
"card": {},
"directives": [],
"shouldEndSession": true
}
}.to_json
end
結果
Clovaの待機状態で、どうぶつ + に繋いで とClovaに呟くとランダムでうみのどうぶつを教えてくれるbotができました。
まとめ
ローカル環境でも、rubyをつかって簡単にClovaスキルを呼び出すことができました。