WVDのディープな技術情報を解説 | WVDでGPUを使い、ゲームやCADを利用詳しくはこちら
mochan_tk@mochan_tk
Improve article
Send edit request
Improve article
RevisionsEdit RequestsShow all likersShow article in Markdown
Report article
Help us understand the problem. What is going on with this article?

Cloud9とGAEでClovaの公式チュートリアルを一瞬で突破してみた

GAEcloud9ClovaCEKCLOVA_CEK
More than 1 year has passed since last update.

2018年7月12日にClova Extensions Kit（CEK）がリリースされました。
（３連休前に公開していただいたことにありがたみを感じています！）

用意していただいているチュートリアルは短時間で試せる内容ですが、
個人的にさらに素早く楽に試せるような各種ツールを使いましたので
軽い気持ちで記録を残しておこうと思います。( ..)φメモメモ

ちなみに、既に最速組の方々がCEK関連の記事を投稿なさっているようですのでそちらもすごく参考になると思います。

楽するために使うサービスたち

CEK以外のツールとしては下記を使いました。

  • AWS Cloud9
  • GoogleAppEngine

さっそくチュートリアル

チュートリアルは下記にあります。さっそく実施していきましょう！

ステップ1 Extensionサーバーを用意する

今回はまずAWS Cloud9を使います。
こんな感じのWebブラウザ上で使えるIDEみたいなものです。
ある程度各種ランタイムの環境も整っているので、環境構築で挫折する確率が圧倒的に減るのではないかと思います。
image.png

Cloud9はTerminalが用意されていてコマンドが打てるようになっています。
このTerminal上でおもむろにチュートリアルのコマンドを叩いていきます。
image.png

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

ﾊﾞﾝﾊﾞﾝﾊﾞﾝﾊﾞﾝﾊﾞﾝﾊﾞﾝﾊﾞﾝ
ﾊﾞﾝ　　　　 ﾊﾞﾝﾊﾞﾝﾊﾞﾝ
ﾊﾞﾝ (∩`･ω･)　ﾊﾞﾝﾊﾞﾝ
　＿/_ﾐつ/￣￣￣/
　　　＼/＿＿＿/￣￣

ついでにgit cloneで落としてきたconfig.jsの「ExtensionId」をClova Developer Centerで設定する値に変更しておきます。

image.png

config.js
module.exports = {
  SERVER_PORT: process.env.SERVER_PORT || 3000,
  DOMAIN: 'https://clova-common.line-scdn.net/dice',
  ExtensionId: '<Your ExtensionId>'
}

「ExtensionId」はClova Developer Center上で設定する、下記赤枠に記載されているような値のことです。
image.png

Extensionサーバー(デプロイ先)の選択肢

自分が試した選択肢は今のところ下記です。順番に見ていきます。

  1. ngrok でやってしまった
  2. now,heroku でお手軽にデプロイ
  3. GoogleAppEngine をやっぱり使いたいですよね！

1. ngrok でやってしまった

これは一番最初に横着してしまっただけです、最近時間に追われているのでorz
cloud9上ですべて完結できますが、動作確認ぐらいの用途になります。
下記のコマンドをcloud9のTerminal上で打ち

cd clova-extension-sample-dice
node app.js

cd clova-extension-sample-dice
npm i -g ngrok
ngrok http 3000

下記画面のようにhttpsのURLが取得できますので、Clova Developer Centerの方で「https://hoge.io/clova」 と設定してやります。以上
image.png

2. now,heroku でお手軽にデプロイ

正直Herokuは今回まだやってないんですが、たぶんnowとだいたい同じ感じでお手軽かなぁと思いますｗ

package.jsonの「scripts」に「"start": "node app.js",」を追加します。

package.json
{
  "name": "clova-ext-sound",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "node app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.18.2",
    "cookie-parser": "^1.4.3",
    "crypto": "^1.0.1",
    "express": "^4.16.2",
    "lodash": "^4.17.10",
    "morgan": "^1.9.0",
    "uuid": "^3.1.0"
  }
}

cd clova-extension-sample-dice
npm i -g now
now

超絶簡単にデプロイされて、URLｹﾞﾄできます。「https://hoge.sh/clova」 のようにClova Developer Centerの方で設定してやります。
image.png

3. GoogleAppEngine をやっぱり使いたいですよね！

やっぱりGAE使いたいと思うんですよ、もちろんstandardの方です！

  • まずCloud9にGoogle Cloud SDK を入れてたり、初期化したりします。公式のドキュメントはコチラ 
curl https://sdk.cloud.google.com | bash
exec -l $SHELL
gcloud init
  • package.json を公式のサンプルを参考にしていじります。ひとまず下記のような感じにしました。
package.json
{
  "name": "clova-ext-sound",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "deploy": "gcloud app deploy",
    "start": "node app.js",
    "lint": "repo-tools lint",
    "pretest": "npm run lint",
    "system-test": "repo-tools test app",
    "test": "npm run system-test",
    "e2e-test": "repo-tools test deploy"
  },
  "author": "",
  "license": "ISC",
  "engines": {
    "node": "8.x.x"
  },
  "dependencies": {
    "body-parser": "^1.18.2",
    "cookie-parser": "^1.4.3",
    "express": "^4.16.2",
    "lodash": "^4.17.10",
    "morgan": "^1.9.0",
    "uuid": "^3.1.0"
  },
  "devDependencies": {
    "@google-cloud/nodejs-repo-tools": "^2.3.0",
    "semistandard": "^12.0.1"
  },
  "cloud-repo-tools": {
    "test": {
      "app": {
        "msg": "Hello, world!"
      }
    },
    "requiresKeyFile": true,
    "requiresProjectId": true
  }
}
  • config.js のポートを8080に変更します。
config.js
module.exports = {
  SERVER_PORT: process.env.SERVER_PORT || 8080,
  DOMAIN: 'https://clova-common.line-scdn.net/dice',
  ExtensionId: 'com.xxx.xxx'
}
  • clova-extension-sample-diceの配下にapp.yaml ファイルを追加します。公式ドキュメントはコチラ
app.yaml
# Copyright 2017, Google, Inc.
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
#    http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.

# [START app_yaml]
runtime: nodejs8
# [END app_yaml]

gcloud app deploy

image.png

下記、Clova Developer Centerの「ExtensionサーバーのURL」を設定！
image.png

ちなみに、サーバーにデプロイする前にpostmanとかで動作を確認しておいた方が良いでしょう。

ステップ2 Extensionの基本情報を登録する(Clova Developer Centerで作業)

下記のClova Developer Centerの画面から各種必要な情報を設定していく必要があります。
image.png

設定の方法は下記の超最速組の方々の良記事が既にありますので、ここでの説明は省略します！

ステップ3 対話モデルを登録する

Clova Developer Centerの「個人情報の保護および規約同意」タブの画面下に「対話モデル」のボタンがあるので押してみます。すると
image.png

IntentとかSlotとか設定できる専用の画面が立ち上がります。
image.png

Intentを追加する

チュートリアルの手順に従い、Intentを追加しましょう。「+」ボタンから
image.png

「ThrowDiceIntent」を作成し
image.png

サンプル発話に「サイコロを振って」と入力し、「＋」ボタンを押します。
image.png

設定は以上です。「保存」と「ビルド」をお忘れなく！
image.png

シュミレーターでテストする

テスト画面で「サイコロを振って」と入力してテストを実施します。動きましたかね？
image.png

ステップ4 Extensionの実際の動作をテストする

ここから先は、下記の公式ドキュメント通りに進めれば問題ありません。
https://clova-developers.line.me/guide/#/CEK/Tutorials/Build_Simple_Extension.md#Step4

まとめ

Cloud9を使えば早く簡単にClovaの開発をすることができそうですね。
（自分のように絶対にローカル環境を汚したくないマンにとってもうってつけです！）
デプロイ先はどこが良いのかという議論もこれからおこってくる気配を感じます^^

また、ClovaはLINE Bot との連携が鍵を握りそうな気がしています。
開発の方は、公式のチュートリアルのソースコードやサンプルコードを元に
自分用にカスタマイズしていくのが楽かなぁと思いますので、そちらの充実も今後期待したいですね。

あとはやはり機能アップを。。とくに下記の機能追加について皆さん是非投票してください！
https://www.line-community.me/question/5b49fc8d851f743c271a1a2e

おまけ（Custom ExtensionとLINEを連携する）※更新中

※更新中
すごく雑に「Custom ExtensionとLINEを連携する」を試しました。
https://clova-developers.line.me/guide/#/CEK/Guides/Link_Messaging_API.md

公式チュートリアルで使われているコチラのソースをベースにして

  • package.json に「@line/bot-sdk」を追加
package.json
{
  "name": "clova-ext-sound",
  "version": "1.0.0",
  "engines": {
    "node": "8.11.3"
  },
  "now": {
    "engines": {
      "node": "8.11.3"
    }
  },
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "node app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.18.2",
    "cookie-parser": "^1.4.3",
    "crypto": "^1.0.1",
    "@line/bot-sdk": "^6.1.0",
    "express": "^4.16.2",
    "lodash": "^4.17.10",
    "morgan": "^1.9.0",
    "uuid": "^3.1.0"
  }
}
  • index.js に下記を追加、pushMessageを使ってみる
index.js
const uuid = require('uuid').v4
const _ = require('lodash')
const { DOMAIN, ExtensionId } = require('../config')
const line = require('@line/bot-sdk'); //追加した行

～省略～

 //追加したブロック
const client = new line.Client({
    channelAccessToken: '<Your accesstoken>',
    channelSecret: '<Your secret>'
});

～省略～

      cekResponse.appendSpeechText(`サイコロを ${diceCount}個 投げるぜ。`)
      //pushMessageを追加
      client.pushMessage(this.session.user.userId, {
            type: 'text',
            text: `サイコロを ${diceCount}個 投げるぜ。`
      }).then(() => {
        console.log('LINE Suucess')
      }).catch((err) => {
        console.log('LINE Error')
      })
      cekResponse.appendSpeechText({
        lang: 'ja',
        type: 'URL',
        value: `${DOMAIN}/rolling_dice_sound.mp3`,
      })

～省略～
Edit request
18
mochan_tk
@mochan_tkiotlt
https://connpass.com/user/takashi_kawamoto_777/
iotlt
IoTLT
IoT縛りの勉強会です。 毎月イベントを実施しているので是非遊びに来てください！ 登壇者を中心にQiitaでも情報発信していきます。 https://iotlt.connpass.com
https://iotlt.connpass.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away