LINE BOOT AWARDS公式夏期講習ハンズオン資料

LINE BOOT AWARDS公式夏期講習～CEK編～ 2018.9.4 2018.9.20 1

1.作るも動物鳴き声を当てるクイズスキルを作りましょう。全部で５問出題し、回答後に1問ずつ正解動物写真と詳細情報を BOTからメッセージを送ります。最後に何問正解できたか結果がでます。
2

1.作るも 3 ぇ、Clova 鳴き声クイズを開いていいえこんにち！鳴き声クイズへようこそ。クイズ説明を聞きますか？

1.作るも 4 にわとり１問目です。ジャジャン！（効果音）こ鳴き声、なん動物でしょう？ ♪コケコッコー♪ ピンポーン（効果音）正解です。
鳴き声クイズボットから、にわとり詳細情報を送信します。

2.環境 • Clova 端末 • Node.js v8.10 • clova-cek-sdk-nodejs v1.1.0
(つい先日、最新版v1.1.0がリリース） • Mac／Linux／AWS Cloud9 5

3.Clova Developer Centerにアクセス https://clova-developers.line.me/ にアクセス。「スキルを開発する」リンクから進んでいきましょう。 6

3.Clova Developer Centerにアクセス LINE ログインを求められるでログインしてください。 7

3.Clova Developer Centerにアクセス「LINE Developersでスキルチャネルを新規作成」を押して進みます。 8

4.プロバイダー選択また新規作成既にプロバイダーを作っている場合 → 利用するプロバイダーを選択しましょう。 9

4.プロバイダー選択また新規作成初めて → 新規プロバイダー作成から進んでプロバイダー名を入力しましょう。 10

5.Clovaスキルチャネル登録チャネル名を入力して、「入力内容を確認する」を選択しましょう。 11

5.Clovaスキルチャネル登録「作成してClova Developer Centerに移動」を選択しましょう。 12

6.チャネル基本設定 • タイプ設定：「カスタム」を選択しましょう。 13

6.チャネル基本設定 • Extension ID：Extension ID 、リバースドメイン表記で入力してください。また、Extension ID
、他 Extensionと重複しない、　　　　　　一意値である必要があります。　　　　　　＜入力例：com.あなたフルネーム.skill.first＞ 14 com.hoge.skill.first

6.チャネル基本設定 • スキル名：スキル名審査通過後にスキルストアに表示されます。　Extension 内容と無関係な名称や、ユーザーを混乱させる可能性　あるも、ポリシーによって審査時にリジェクトされることが　あります。
15

6.チャネル基本設定 • 呼び出し名：ユーザーがExtensionを利用するために呼び出す名称を入力してください。（サブ）方に表現揺らぎを記述しておくと呼び出す際精度が増します。 16

6.チャネル基本設定 • AudioPlayer 使用：MP3など音源を配信するかどうかチェックです。 17

6.チャネル基本設定 • 提供者について：提供者情報です。個人か法人かで入力項目が分かれます。「Extensionと連携するLINE アカウント」申請際、忘れず選択しましょう。
18

6.チャネル基本設定入力が完了したら、規約と個人情報取り扱い同意にチェックをし、「作成」で進みましょう。 19

6.チャネル基本設定基本情報を入力したら確認画面が出るで一番下にある次へで進みます。 20

Clovaスキルチャネルが作成できました。次対話モデルを作成していきましょう。 21

7.対話モデル作成個人情報保護および規約同意タブにある「対話モデル」を選択します。 22

7.対話モデル作成対話モデル編集画面が別ウィンドウで開きます。 23

7.対話モデル作成スロットとインテントアップロードファイルを用意しました。 githubからファイルを落としましょう。 24 $ mkdir ~/workspace &&
cd ~/workspace $ git clone https://github.com/mochan-tk/clova-handson-20180904.git $ cd clova-handson-20180904 $ ls ./models intent_QuizIntent.tsv slottype_animal.tsv

7.対話モデル作成「models」フォルダにある「intent_QuizIntent.tsv」と「slottype_animal.tsv」ファイルを使用します。 25

7.対話モデル作成 • スロットメニュー左下にあるカスタムスロットタイプ「+」ボタンを押し、タイトルに「animal」を入力し、作成ボタンを押しましょう。 26

7.対話モデル作成 • スロット先ほどダウンロードした「slottype_animal.tsv」ファイルをアップロードしましょう。 27

7.対話モデル作成 • スロットアップロードを押しましょう。次に「×」を押しましょう。 28

7.対話モデル作成 • スロットアップロードされました。保存しておきましょう。 29

7.対話モデル作成 • インテントメニュー左カスタムインテント「+」ボタンを選択し、インテント名「QuizIntent」を入力して作成を押しましょう。 30

7.対話モデル作成 • インテント先ほどダウンロードした「intent_QuizIntent.tsv」ファイルをアップロードしましょう。 31

7.対話モデル作成 • インテントアップロードを押しましょう。次に「×」を押しましょう。 32

7.対話モデル作成 • インテントサンプル発話とスロットリストがアップロードされました。保存しましょう。 33

8.対話モデルビルドここまで来たら左上ビルドボタンを押してひとまず完了です。ここ、けっこう時間かかります。次準備にかかりましょう。(休憩してもOK) 34

9.開発環境準備 • 準備ターミナルを開いてください。まずNodejs バージョンを確認しましょう。 v8.11以上なら大丈夫だと思います。 $ node -v
v8.11.4 35

9.開発環境準備 • 準備以下コマンドで進めていきます。フォルダ作成と準備です。これから使うファイル「index.js」と「.env」ファイルです。 $ cd
~/workspace/clova-handson-20180904 $ npm i $ npm i --save @line/clova-cek-sdk-nodejs express body-parser dotenv $ touch .env 36

• Extension IDを設定する .envファイル「EXTENSION_ID」にチャネル基本設定「Extension ID」で入力した値を入力して保存しましょう。　　　　　　　　＜Extension ID例：com.あなた
フルネーム .skill.first＞　　　　　　　　　　　　　　　　　　　　　　　例）.env ファイル編集仕方 EXTENSION_ID="com.hoge.skill.first" 9.開発環境準備 37 $ cd ~/workspace/clova-handson-20180904 $ vi .env $ cat .env EXTENSION_ID="com.hoge.skill.first"

9.開発環境準備 • 起動下記ようにコマンドを打ち、起動です。エラーがなけれ OKです。 $ node index.js
38

10.ngrokでホスティングせずに疎通確認 ngrokというトンネリングツールを使ってローカル環境だけで動作確認が出来るようにしましょう。参考: https://ngrok.com/ 39

インストールしましょう。 ngrokがターミナル占有してしまうで、Node.jsを起動するターミナルと別ターミナルを起動してそこで実行しましょう。 10.ngrokでホスティングせずに疎通確認 $ npm i -g
ngrok $ ngrok http 3000 40

10.ngrokでホスティングせずに疎通確認 Forwarding https://xxxxxxx.ngrok.io -> localhost:3000 といった項目が表示されます。こ https://xxxxxxx.ngrok.ioをコピーして、スキル設定画面にあるサーバ設定「Extensionサーバー URL」に記載しましょう。
41

11.サーバー設定スキル設定画面に戻り、サーバー設定タブを押して、Extensionサーバ URLに「https://xxxxxxx.ngrok.io/clova」を入力して保存しましょう。 xxxxxx 箇所 ngrokを再起動すると変わってしまうでそ際再度サーバー設定を更
新してください。 42

12.動作確認対話モデルダッシュボードに戻ります。 node.jsを起動させて、テストを選択し、ユーザーサンプル発話をテスト箇所に「らいおん」と入力しテストボタン押しましょう。 43

テスト結果に作成したインテント名（QuizIntent）と、スロット名（animal）が表示されれ OK です。　　　　　　　　　　　　　　　　　　　　また、Node.jsを起動させているターミナル側でも　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　と表示されていれ OKです。 12.動作確認 44

発話履歴から「ON」にすると、Clovaデバイスに対して話しかけた、最大１０件まで発話履歴を見ることができます。 12.動作確認 45

• sdkモジュールを読み込むとき、を使います。 const clova = require('@line/clova-cek-sdk-nodejs'); 13.コード解説
46

const slots = responseHelper.getSlots(); console.log(slots); // 正解か不正解 if (jsonData[currentQuestion]["answer"] ===
slots.animal) { } • スロットから値を取得して、答えが合っているか確認するとき、を使います。 13.コード解説 47

• スピーチ内容にテキストと音声ファイルを複数設定するとき、　　　　を使います。 • reprompt 設定(ユーザが一定時間無反応時聞き返し)
、　　を使います。 13.コード解説 responseHelper.setSpeechList(配列 speechInfo); 48 responseHelper.setReprompt(speechInfo);

• セッションに値保持をさせるとき、を使います。 • セッションに保持した値を取得するとき、　　　　　　　　　　　　　　　　　　を使います。 13.コード
解説 49 responseHelper.setSessionAttributes({ "キー": "値" }); responseHelper.getSessionAttributes();

• ユーザID 取得、　　　　　　　　　　　　　　　　　　　　　　　を使います。 • セッションを終了する時(スキルを終了する時) 、　　　　　　　　　　　　　　　　　　
を使います。 13.コード解説 const { userId } = responseHelper.getUser(); responseHelper.endSession(); 50

起動する際、{ウェイクワード} -> {スキル名}　となります。ウェイクワード: Clova 呼び名スキル名: 基本情報に登録したスキル名そ
後、設定したインテントを発話しましょう。 14.実機テスト 51 ぇ、Clova 鳴き声クイズを開いて

15.参考情報立花さん：CEKハンズオン https://www.dropbox.com/s/547siacriaudy4f/CEK_Handson%1D_0729.pdf?dl=0 n0bisukeさん：Clova CEKでスキル開発始め方〜Node.jsで開発スタート編〜 https://dotstud.io/blog/clova-cek-nodejs-tutorial/ CEKシュミレーター https://qiita.com/kenakamu/items/cdc9eacaec8f4400019f
52

続いて、Messaging API編資料で Bot 設定をしていきましょう。 53

LINE BOOT AWARDS公式夏期講習～Messaging API編～ 2018.9.4 2018.9.20 1

1.LINE Developersにアクセス https://developers.line.me/ja/services/messaging-api/にアクセス。「今すぐじめよう」ボタンを押して進めていきましょう。 2

1.LINE Developersにアクセス LINE ログインを求められるでログインしてください。 3

2.プロバイダー選択 CEK編で利用したプロバイダーを選択しましょう。 4

3.Messaging API チャネル登録アプリアイコン画像を登録しましょう。（今回必須でありません） 5

3.Messaging API チャネル登録アプリ名、アプリ説明を登録しましょう。 6

3.Messaging API チャネル登録プランを「Developer Trial」を選択しましょう。 7

3.Messaging API チャネル登録大業種と小業種を選択しましょう。 8

3.Messaging API チャネル登録連絡可能なメールアドレスを入力して、「入力内容を確認する」を押しましょう。 9

3.Messaging API チャネル登録情報利用に関する同意について、「同意する」を押しましょう。 10

3.Messaging API チャネル登録下記２点利用規約にチェックをして、、「作成」を押しましょう。 11

4.チャネル基本設定作成した「鳴き声クイズbot」を選択しましょう。 12

4.チャネル基本設定下スクロールすると、登録した内容を確認できます。BOT連携で必要な情報を見ていきましょう。 13

4.チャネル基本設定 Channel Secret チャネル毎にある固有秘密鍵です。あとで使うでメモしておきましょう。( ..)φ 14

4.チャネル基本設定利用可能な機能に、「REPLY_MESSAGE」と「「PUSH_MESSAGE」記載があるか確認しましょう。今回任意タイミングでユーザーにメッセージを送信できる「PUSH_MESSAGE」を使います。 15

4.チャネル基本設定メッセージ送受信設定アクセストークンを再発行しましょう。これも後で使うでメモしておきましょう。( ..)φ 16

4.チャネル基本設定 • QRコードで友だち追加をしましょう。 17

Messaging API チャネル作成・設定ができました。次 CEK編で作ったスキルと連携していきましょう。 18

5.LINE Bot連携ターミナルで「@line/bot-sdk」をインストールしましょう。 $ cd ~/workspace/clova-handson-20180904 $ npm i --save
@line/bot-sdk 19

CHANNEL_ACCESS_TOKEN="YOUR_CHANNEL_ACCESS_TOKEN" CHANNEL_SECRET="YOUR_CHANNEL_SECRET" 5.LINE Bot連携 .envファイル「CHANNEL_ACCESSTOKEN」と「CHANNEL_SECRET」にチャネル基本設定でメモした「アクセストークン」と「Channel Secret」を入力して保存しましょう。これで連携
準備完了です。 20

6.コード解説 LINE BOTから送る「pushMessage」説明をします。 [index.js] 　　　　 Text MessageがBOTから送られてきます。 const
line = require('@line/bot-sdk'); const client = new line.Client({ channelAccessToken: process.env.CHANNEL_ACCESS_TOKEN, channelSecret: process.env.CHANNEL_SECRET }); const { userId } = responseHelper.getUser(); client.pushMessage(userId, [ { "type":"text", "text":"Hello, world" } ]) .then(() => {console.log('LINE Success')}) .catch((err) => {console.log('LINE Error')}); 21

7.Flex Message さらに複数要素を組み合わせてリッチなレイアウトが使える「Flex Message」もあります。（自由にカスタマイズもできます。） Flex Message が実際どように画面に表示されるか確認できるツールもあります。
https://developers.line.me/console/fx/ 22

7.Flex Message 例え、先ほど「pushMessage」中身を「Text Message」から「Flex Message」に書き換えると‥ 23

起動する際、{ウェイクワード} -> {スキル名}　となります。ウェイクワード: Clova 呼び名スキル名: 基本情報に登録したスキル名そ
後、設定したインテントを発話しましょう。 8.実機テスト 24 ぇ、Clova 鳴き声クイズを開いて

9.注意！本日 ClovaとLINE Botが連携して動く最低限作業を行ったという状態です。下記公式ページを参考に適宜必要な作業を追加で実施していただけれと思います。 (公式)Custom
ExtensionとLINEを連携する https://clova-developers.line.me/guide/#/CEK/Guides/Link_Messaging_API.md 25

10.参考情報 LINE BOOT AWARDS 公式夏期講習～2018 年 7 月時点で LINE
Bot 機能を振り返る～ https://qiita.com/kenakamu/items/b2580f2546b925832045 LINE Payを使ってみよう https://qiita.com/4geru/items/42f1bf2666bdbad9fbe7 26

お疲れ様でした。ありがとうございました。 27

LINE BOOT AWARDS公式夏期講習 ハンズオン資料

LINE BOOT AWARDS公式夏期講習 ハンズオン資料

More Decks by mochan-tk

Other Decks in Programming

Featured

Transcript

LINE BOOT AWARDS公式夏期講習ハンズオン資料

LINE BOOT AWARDS公式夏期講習ハンズオン資料