海の日なのでClovaでどうぶつスキルを作ってみた #LINE

はじめに

CEK(Clova Extensions Kit)がリリースされて何か作らないと...作らないと...って思っていました。
ちょうど海の日ということもあって、サイコロアプリを参考にして、ランダムでうみのどうぶつの名前を教えてくれるアプリを作ってみました。

海の日だから水族館にいるどうぶつを教えてくれるアプリを作ってみた。(小並感。 pic.twitter.com/bC5DiIOoRV
— しげる(とみん) (@a4geru) 2018年7月16日

作り方

サーバーサイドはrubyのsinatraを使います。
開発環境はmacのローカル環境を使いngrokを使って行います。

今回の記事では3つの手順で行います。
1. 受け口(ngrok)の設定
2. Clovaの設定
3. サーバー(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行のみです。

app.rb

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スキルを呼び出すことができました。

海の日なのでClovaでどうぶつスキルを作ってみた