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

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

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">海の日だから水族館にいるどうぶつを教えてくれるアプリを作ってみた。(小並感。 <a href="https://t.co/bC5DiIOoRV">pic.twitter.com/bC5DiIOoRV</a></p>&mdash; しげる(とみん) (@a4geru) <a href="https://twitter.com/a4geru/status/1018709076056784901?ref_src=twsrc%5Etfw">2018年7月16日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## 作り方
サーバーサイドは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を使うのでコピーしておいてください。

```shell
# 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](https://clova-developers.line.me/cek/#/list)に入り`LINE Developersでスキルチャネルを新規作成`を選択肢新しいbotを作成します。
`プロバイダの作成`, `チャンネル名` は適当に設定をします。(※チャンネル名は[LINE Developers](https://developers.line.me/console/)の画面から編集可能です。
### 基本設定
Clovaのアプリは **`呼び出し名` + に繋いで** と呟くとつなぐことができる`呼び出し名`です。呼びやすい名前にしましょう。また、呼び出し名をサブで指定することもでき、自然言語の曖昧な表現に対応することができます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/64677/284b6528-27e3-aee2-b0e0-f788a044ae80.png)
### サーバー設定
サーバー設定では、先ほど設定したngrokのURLを貼り付けると完了です！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/64677/56c2aaec-c638-54e8-82a1-3a207bf7f3eb.png)
### 配信情報
配信情報は開発中では必要がないために、適当に埋めます。

## サーバー(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行のみです。

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

## 参考文献
- [3分でClovaスキル「サイコロトーク」を作ってみた](https://qiita.com/h-takauma/items/9162aebe42e358538442)
- [ngrokを使用してローカル環境を外部に公開する](https://qiita.com/kitaro729/items/44214f9f81d3ebda58bd)