Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@tsumasakky(m tsumasakky)

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

Last updated at Posted at 2019-01-23

概要

職場の後輩ちゃんが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. スキルチャネルの作成

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

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

次にチャネル名を入力します。
03_create_channel.png

確認して完了させます。
04_comfirm_channel.png

確認事項に同意します。
05_starting_devskills.png

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

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

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

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

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

1-3-1. スロット

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

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

08_dashboard_top.png

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

スロット名は「greeting」とします。
09_create_slots.png

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

1-3-2. インテント

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

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

インテント名は「GreetingIntent」とします。
11_create_intent.png

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

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

以上の設定が終わったら、ビルドを行います。
13-2_build_clova.png

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"

14_heroku_config.png

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

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

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

Clova Deveroper Centerの「テスト」で「Clova、こんにちは」と入力します。
すると、「こんにちは」と返ってきました！
16_test.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/

1
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?