Clovaのチュートリアルをローカルサーバーで動かしてみた。そして色々詰みかけたのでメモ

生きようよとClovaのExtensionを作ろうと、チュートリアルをやった所、いろいろ詰んでしまったので、他の人がそうならないようにメモしておきます。

チュートリアルのリンクは[こちら](https://clova-developers.line.me/guide/#/CEK/Tutorials/Build_Simple_Extension.md#Step1)

# 環境
- MacOS ver 10.13.6
- git ver 2.14.3
- Node.js ver 8.11.3
- npm ver 5.6.0

# ローカルでExtensionサーバーの用意

https://github.com/line/clova-extension-sample-dice

チュートリアル通りこちらのリポジトリをcloneして、tutorial1のブランチに変更して関連ライブラリをインストールします


```bash
git clone https://github.com/line/clova-extension-sample-dice.git
cd clova-extension-sample-dice
git checkout tutorial1
npm install
```

`npm install`をして以下のようなWARNが出てもスルーで大丈夫です。


```
npm WARN clova-ext-sound@1.0.0 No repository field.
```

## ngrokを使ってHTTPSのURLを取得
次に、ExtensionサーバーはHTTPSで外部からアクセスできるURLが必要になります。
手軽にチュートリアルを動かすためにわざわざHTTPSを使用できるサーバーを用意するのは面倒なので、ローカルサーバーにHTTPSのURLを与えることができる[ngrok](https://ngrok.com/)という神アプリケーションを使います。

ngrokのインストールなどは[こちら](https://ngrok.com/download)

```
brew cask install ngrok
```
brewでも入れられるはず


ngrokをインストールしたら

```
node app.js
Server is running on 3000 port
```

でアプリケーションが3000番ポートで起動します。
nodeを動かしつつ、ターミナルを別のタブをもう１つ開いてngrokを起動します。

```
ngrok http 3000
```
そうすると、下記のようにhttps://~.ngrok.ioというURLが出てきますので、コピペしてください。（~の部分は個人で違う乱数が入ります。ちなみに、ngrokを停止させるたびに変わるのでnodeのアプリは停止させてもngrokは停止させないように気をつけてください）

<img width="532" alt="1__ngrok.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/150295/66fd4c84-4a49-e43f-e5eb-214d855892a7.jpeg">

# Extensionの基本情報を登録する

チュートリアル通り[Clova Developer Center](https://clova-developers.line.me/)でExtensionの基本情報を登録します。
基本的にチュートリアル通りでいいのですが、書いてある通りにExtension IDに「my.clova.extension.sampledice」を入れても弾かれます。
「my.clova.extension.sampledice.hoge」みたいな形で適当な文字を追加してください。

## サーバー設定

そして、サーバー設定では、先ほどngrokで取得した`https://~.ngrok.io/clova`と入力してください。
`/clova`がないと後のテストで永遠に`応答がありません`が返ってきて、僕みたいに1日詰むことになります(泣

配布情報と個人情報の保護および規約同意はスルーしても大丈夫です。

サーバー設定から[次へ]で配布情報の所に行って、何も入力せずにバーガーメニューからスキル設定のタブを選択して
対話モデルの[修正]からチュートリアルのSTEP３の対話モデルの登録へ行くことができます。（ここに行くのも少し詰んだ）
![Clova_Developer_Center_β.jpg](https://qiita-image-store.s3.amazonaws.com/0/150295/49cf899a-4bcc-3ff0-90d6-68d41172cdbc.jpeg)

# 対話モデルを登録する
対話モデルのページまで飛べたら、チュートリアルのページ通りにカスタムインテントを登録すれば大丈夫です。

ビルドは３〜5分と書いてますが、かかる時は5分以上かかります。気長に待ちましょう。

## 対話モデルのテストの前に

ローカルで動かしているExtension　IDを変更しないといけません。
`clova-extension-sample-dice/config.js`を開きExtension　IDを書き換えます。

```javascript

module.exports = {
  SERVER_PORT: process.env.SERVER_PORT || 3000,
  DOMAIN: 'https://clova-common.line-scdn.net/dice',
  ExtensionId: 'my.clova.extension.sampledice.hoge' //自分の設定したExtension　IDに変更
}
```

コードを書き換えたので、`node app.js`で動かしていた場合はリスタートさせてください。

このExtension　IDの書き換えはチュートリアルには載っていないですが、GitHubのREADMEには載っています。
ここを書き換えていないと、テストで`応答がありません`と返ってきます。

## テスト
チュートリアル通り、「サイコロを振って」でサービス応答に下記のようにメッセージが入っていたら成功です。

![Clova_Extensions_Kit_-_Interaction_Model_Builder.jpg](https://qiita-image-store.s3.amazonaws.com/0/150295/72dfde65-73b3-ba30-d902-9ae0d6ab3e45.jpeg)

# 実機で動かす

ClovaをLINE DEVELOPERで使っているアカウントと同じアカウントで使用している場合、Clovaのアプリでアプリストアを開いたら、テスト中のスキルで出て来てすぐに試してみることができます。

![IMG_6780.jpg](https://qiita-image-store.s3.amazonaws.com/0/150295/01d5f88b-70e6-8d65-cd0d-c4173da11f65.jpeg)

違うアカウントで使用している場合は[こちら](https://clova-developers.line.me/guide/#/CEK/Guides/Register_Collaborator.md#RegisterTester)を参照してください。

# 最後に

とりあえず、チュートリアルが動いた時は嬉しかったです。
いろいろスキルも作って行こうと思うので、また知見が貯まれば記事にしようと思います。