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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

● 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"

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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