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

Transcript

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

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

   2

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

4. 1.作るも 4 にわとり １問目です。ジャジャン！（効果音） こ 鳴き声 、なん 動物でしょう？ ♪コケコッコー♪ ピンポーン（効果音）正解です。

   鳴き声クイズボットから、にわとり 詳細情報を送信します。

5. 2.環境 • Clova 端末 • Node.js v8.10 • clova-cek-sdk-nodejs v1.1.0

   (つい先日、最新版v1.1.0がリリース） • Mac／Linux／AWS Cloud9 5

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

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

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

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

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

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

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

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

14. 6.チャネル 基本設定 • Extension ID：Extension ID 、リバースドメイン 表記で入力してください。 また、Extension ID

    、他 Extensionと重複しない、 　　　　　　 一意 値である必要があります。 　　　　　　 ＜入力例：com.あなた フルネーム.skill.first＞ 14 com.hoge.skill.first

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

    15

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

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

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

    18

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

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

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

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

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

24. 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

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

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

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

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

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

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

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

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

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

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

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

    v8.11.4 35

36. 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

37. • 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"

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

    38

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

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

    ngrok $ ngrok http 3000 40

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

    41

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

    新してください。 42

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

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

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

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

    46

47. const slots = responseHelper.getSlots(); console.log(slots); // 正解か不正解 if (jsonData[currentQuestion]["answer"] ===

    slots.animal) { } • スロットから値を取得して、答えが合っているか確認するとき 、 を使います。 13.コード 解説 47

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

    、 　　を使います。 13.コード 解説 responseHelper.setSpeechList(配列 speechInfo); 48 responseHelper.setReprompt(speechInfo);

49. • セッションに値保持をさせるとき 、 を使います。 • セッションに保持した値を取得するとき 、 　　　　　　　　　　　　　　　　　　 を使います。 13.コード

    解説 49 responseHelper.setSessionAttributes({ "キー": "値" }); responseHelper.getSessionAttributes();

50. • ユーザID 取得 、 　　　　　　　　　　　　　　　　　　　　　　　 を使います。 • セッションを終了する時(スキルを終了する時) 、 　　　　　　　　　　　　　　　　　　

    を使います。 13.コード 解説 const { userId } = responseHelper.getUser(); responseHelper.endSession(); 50

51. 起動する際 、{ウェイクワード} -> {スキル名}　となります。 ウェイクワード: Clova 呼び名 スキル名: 基本情報に登録したスキル名 そ

    後、設定したインテントを発話しましょう。 14.実機テスト 51 ぇ、Clova 鳴き声クイズを開いて

52. 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    @line/bot-sdk 19

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

    準備完了です。 20

74. 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

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

    https://developers.line.me/console/fx/ 22

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

77. 起動する際 、{ウェイクワード} -> {スキル名}　となります。 ウェイクワード: Clova 呼び名 スキル名: 基本情報に登録したスキル名 そ

    後、設定したインテントを発話しましょう。 8.実機テスト 24 ぇ、Clova 鳴き声クイズを開いて

78. 9.注意！ 本日 ClovaとLINE Botが連携して動く最低限 作業を行ったという状態です。 下記 公式ページを参考に適宜必要な作業を追加で実施していただけれ と思いま す。 (公式)Custom

    ExtensionとLINEを連携する https://clova-developers.line.me/guide/#/CEK/Guides/Link_Messaging_API.md 25

79. 10.参考情報 LINE BOOT AWARDS 公式夏期講習 ～2018 年 7 月時点で LINE

    Bot 機能を振 り返る～ https://qiita.com/kenakamu/items/b2580f2546b925832045 LINE Payを使ってみよう https://qiita.com/4geru/items/42f1bf2666bdbad9fbe7 26

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