LINE Clovaのスキル開発〜Node.jsでHelloWorld的な編〜

# 概要
職場の後輩ちゃんがLINE Clovaを手に入れたので、それを使ってなにか面白いスキル開発をやろうということに！
手始めに、挨拶をしてくれるスキルを作ろうと思いました！

バックエンドのアプリの開発言語にはNode.jsを採用しています！

# 環境
Windows 8.1
Node.js 8.12.0
npm 6.4.1

# Clova Developer Centerのセットアップ

こちらのサイトを参考にさせて頂きました！
https://dotstud.io/blog/line-clova-skill-tutorial/

# 1. スキルの作成

[Clova Developer Center](https://clova-developers.line.biz/cek/#/list)で行っていきます！

## 1-1. スキルチャネルの作成

まずはスキルチャネルの作成を行っていきます。
「スキルチャネルを新規作成」してください。
![01_skill_list.png](https://qiita-image-store.s3.amazonaws.com/0/147118/a81fb726-6dae-54b3-ad35-90617831f4c6.png)

既存のプロバイダを使用しても構いませんし、ない方は新しいプロバイダを作成します。
![02_create_provider.png](https://qiita-image-store.s3.amazonaws.com/0/147118/55f1ccc6-e288-135b-087e-3873ff43916b.png)

次にチャネル名を入力します。
![03_create_channel.png](https://qiita-image-store.s3.amazonaws.com/0/147118/b37d4946-5470-e920-e882-7315c7284da6.png)

確認して完了させます。
![04_comfirm_channel.png](https://qiita-image-store.s3.amazonaws.com/0/147118/570cc087-8b0b-6a1c-e416-73480ea3a31e.png)

確認事項に同意します。
![05_starting_devskills.png](https://qiita-image-store.s3.amazonaws.com/0/147118/897cc691-05e3-74b0-6e6c-7bf934489db1.png)

## 1-2. チャネル基本設定

続いて基本情報を設定していきます。

Extension ID: のちほどアプリでリクエスト認証に使用します。
![06_setting_basic.png](https://qiita-image-store.s3.amazonaws.com/0/147118/1ffca9fa-0048-f691-b947-ef2d76a5bbaf.png)

## 1-3. 対話モデルの作成

いよいよ対話モデルを作成していきます。
「対話モデルを編集する」を選択すると、別ウィンドウでダッシュボードが現れます。
![07_interaction_top.png](https://qiita-image-store.s3.amazonaws.com/0/147118/eb6bfc4f-f4b6-6706-0898-93ea765a9318.png)

### 1-3-1. スロット

まずは「カスタムスロットタイプ」を追加していきます。
カスタムスロットタイプの「＋」ボタンをクリックして下さい。

スロットについて -> [Extensionのデザインガイドライン - Clova Developer Center β](https://clova-developers.line.biz/guide/Design/Design_Guideline_For_Extension.md#Slot)

![08_dashboard_top.png](https://qiita-image-store.s3.amazonaws.com/0/147118/3fa07b88-7867-6ea1-93d8-540b666f017c.png)

「おはよう」「こんにちは」「こんばんは」の3種類に応じて返事ができるように作っていきます。（将来的には）
※今回は「こんにちは」としか返ってきません。

スロット名は「greeting」とします。
![09_create_slots.png](https://qiita-image-store.s3.amazonaws.com/0/147118/c3d69ef2-8eb7-0c20-518a-fcadf50cbf9c.png)

画像のような形で設定してください。
![10_slots.png](https://qiita-image-store.s3.amazonaws.com/0/147118/6476ddae-1740-1c85-3d6b-58e8726ec13b.png)

### 1-3-2. インテント

続いてインテントを作成していきます。
カスタムインテントの「＋」ボタンをクリックして下さい。

インテントについて -> [Extensionのデザインガイドライン - Clova Developer Center β](https://clova-developers.line.biz/guide/Design/Design_Guideline_For_Extension.md#Intent)

インテント名は「GreetingIntent」とします。
![11_create_intent.png](https://qiita-image-store.s3.amazonaws.com/0/147118/b0f08735-71e6-8ae6-cd8c-2354db0d16d3.png)

まずはスロットリストに先ほど作成したスロットを追加します。
![12_slot_list.png](https://qiita-image-store.s3.amazonaws.com/0/147118/fa400103-2994-7154-9245-6c1f328f64a9.png)

続いて発話リストに「Clova、こんにちは」というサンプルを作成し、「こんにちは」の部分をカーソルで選択します。
すると、スロットとして認識できるので、「greeting」というスロットとして認識させます。
![13_talk_list.png](https://qiita-image-store.s3.amazonaws.com/0/147118/fd67749c-5cba-2599-5e1f-c9442a147803.png)

以上の設定が終わったら、ビルドを行います。
![13-2_build_clova.png](https://qiita-image-store.s3.amazonaws.com/0/147118/5aed352b-725a-b60c-4d00-ec106f9fbfa8.png)


# 2. バックエンドアプリの開発
まず、開発用フォルダを作成し、移動します。

```terminal:terminal
$ mkdir clova-hello
$ cd clova-hello
```

Node.jsアプリの準備をします。

```terminal:terminal
$ npm init -y
```

必要なnpmパッケージを用意します。

```terminal:terminal
$ npm i @line/clova-cek-sdk-nodejs express body-parser
```

同フォルダに`index.js`というファイルをを作成し、にコードを書いていきます。
`process.env.EXTENSIONID`は、Herokuの環境変数に設定します。

```js:index.js
const clova = require('@line/clova-cek-sdk-nodejs');
const express = require('express');

// アプリのID
const EXTENSIONID = process.env.EXTENSIONID;

// 発話設定
const clovaSkillHandler = clova.Client
    .configureSkill()

    // 起動時に喋る
    .onLaunchRequest(responseHelper => {
        responseHelper.setSimpleSpeech({
            lang: 'ja',
            type: 'PlainText',
            value: '起動しました。',
        });
    })

    // ユーザーからの発話イベントが来たら反応
    .onIntentRequest(async responseHelper => {
        const intent = responseHelper.getIntentName();
        const sessionId = responseHelper.getSessionId();

        console.log('Intent : ' + intent);
        const slots = responseHelper.getSlots();

        console.log(slots);
        // デフォルトのスピーチ内容
        let speech = {
            lang: 'ja',
            type: 'PlainText',
            value: 'こんにちは'
        }

        responseHelper.setSimpleSpeech(speech);
        responseHelper.setSimpleSpeech(speech, true);
    })

    //終了時
    .onSessionEndedRequest(responseHelper => {
        const sessionId = responseHelper.getSessionId();
    })
    .handle();

const app = new express();
const port = process.env.PORT || 3000;

// Clova Developer Centerで設定したExtension IDを使ってリクエストの検証を行うことができる
const clovaMiddleware = clova.Middleware({ applicationId: EXTENSIONID });
app.post('/', clovaMiddleware, clovaSkillHandler);

app.listen(port, () => console.log(`Server running on ${port}`));
```

`index.js`と同じ階層に`.gitignore`というファイルを作成します。
このファイルに明記したフォルダやファイルはgitにアップロードされません。

```text:.gitignore
node_modules
```

また、`index.js`と同じ階層に`Procfile`というファイルも作成します。
これはHerokuでのアプリ起動設定となります。

```text:Procfile
web: node index.js
```

# 3. Herokuにデプロイする

[Heroku](https://jp.heroku.com/)にアプリを作っていきます。

まず現在のフォルダをgitローカルリポジトリとして設定します。

```terminal:terminal
$ git init
```
Herokuのアプリを作成します。
`heroku create`の後ろには好きな名前をつけて下さい。
僕は今回、`hello-clova-tky`という名前を付けます。

```terminal:terminal
$ heroku create hello-clova-tky
```

そして、gitリモート先を設定します。

```terminal:terminal
$ heroku git:remote --app hello-clova-tky
```

pushします。

```terminal:terminal
$ git add .
$ git commit -m "first commit"
$ git push heroku master
```

また、今回は環境変数も使用しますので、ブラウザのダッシュボードから設定してみたいと思います。
Herokuのダッシュボードでアプリを選択し、
Settings -> Config Varsに追加してください。

KEY:"EXTENSIONID"
VALUE:"Clova Developer Centerで設定したExtension ID"

![14_heroku_config.png](https://qiita-image-store.s3.amazonaws.com/0/147118/b01132fb-a056-17ab-c587-bf26fae3e6b9.png)

# 4. Clova Developer Centerからテストする

実機がなくてもブラウザ上でテストできるようです。

まずはHerokuにデプロイしたアプリのURLをClova側に設定します。
開発設定->サーバー設定 の "ExtensionサーバーのURL"にバックエンドアプリのURLを入力します。
バックエンドアプリのURLは`https://[アプリ名].herokuapp.com/`となります。
![15_clova_setting_server.png](https://qiita-image-store.s3.amazonaws.com/0/147118/74f8d05c-e665-d368-d7ce-cfe62a60de47.png)

Clova Deveroper Centerの「テスト」で「Clova、こんにちは」と入力します。
すると、「こんにちは」と返ってきました！
![16_test.png](https://qiita-image-store.s3.amazonaws.com/0/147118/1816c033-5b64-a94b-3172-e64913e2b4bf.png)

# まとめ
* Clova Developer Centerでスキルを作成
* バックエンドアプリをNode.jsでコーディング
* バックエンドアプリをHerokuにデプロイ
* Clova Developer Centerから対話テスト

# 感想
Google Homeも少しだけいじったことがありますが、Clova Deveroper Centerの操作は非常に簡単でした！
バックエンドからmp3ファイル等を返したりもできるようで、可能性が広がっています！

引き続き取り組んでいきたいと思います！

# 参考
https://dotstud.io/blog/line-clova-skill-tutorial/
https://dotstud.io/blog/clova-cek-nodejs-tutorial/
https://clova-developers.line.biz/guide/