概要

職場の後輩ちゃんが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で行っていきます！

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

まずはスキルチャネルの作成を行っていきます。
「スキルチャネルを新規作成」してください。

既存のプロバイダを使用しても構いませんし、ない方は新しいプロバイダを作成します。

次にチャネル名を入力します。

確認して完了させます。

確認事項に同意します。

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

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

Extension ID: のちほどアプリでリクエスト認証に使用します。

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

いよいよ対話モデルを作成していきます。
「対話モデルを編集する」を選択すると、別ウィンドウでダッシュボードが現れます。

1-3-1. スロット

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

スロットについて -> Extensionのデザインガイドライン - Clova Developer Center β

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

スロット名は「greeting」とします。

画像のような形で設定してください。

1-3-2. インテント

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

インテントについて -> Extensionのデザインガイドライン - Clova Developer Center β

インテント名は「GreetingIntent」とします。

まずはスロットリストに先ほど作成したスロットを追加します。

続いて発話リストに「Clova、こんにちは」というサンプルを作成し、「こんにちは」の部分をカーソルで選択します。
すると、スロットとして認識できるので、「greeting」というスロットとして認識させます。

以上の設定が終わったら、ビルドを行います。

2. バックエンドアプリの開発

まず、開発用フォルダを作成し、移動します。

terminal

$ mkdir clova-hello
$ cd clova-hello

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

terminal

$ npm init -y

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

terminal

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

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

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にアップロードされません。

.gitignore

node_modules

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

Procfile

web: node index.js

3. Herokuにデプロイする

Herokuにアプリを作っていきます。

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

terminal

$ git init

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

terminal

$ heroku create hello-clova-tky

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

terminal

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

pushします。

terminal

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

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

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

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

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

まずはHerokuにデプロイしたアプリのURLをClova側に設定します。
開発設定->サーバー設定の "ExtensionサーバーのURL"にバックエンドアプリのURLを入力します。
バックエンドアプリのURLはhttps://[アプリ名].herokuapp.com/となります。

Clova Deveroper Centerの「テスト」で「Clova、こんにちは」と入力します。
すると、「こんにちは」と返ってきました！

まとめ

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/