Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
LINE BOOT AWARDS公式夏期講習 ハンズオン資料
mochan-tk
December 11, 2018
Programming
1
130
LINE BOOT AWARDS公式夏期講習 ハンズオン資料
mochan-tk
December 11, 2018
Tweet
Share
More Decks by mochan-tk
See All by mochan-tk
Azure AI によって広がる開発者の可能性と最新動向/MSBuild AzureAI for Everyone
mochan_tk
0
14
IT活用・自動化にも繋がるLINEの開発者向け テクノロジー紹介 / LINE Technology for External Developer at RPACommunity Event
mochan_tk
0
1.9k
あなたのアプリをもっとスマートに!Azure AIできり拓く新しいアプリ開発の可能性あなたのアプリをもっとスマートに!Azure AIできり拓く新しいアプリ開発の可能性 / talking about Azure AI for LINE API Expert x Microsoft MVP Community Day
mochan_tk
0
24
機械学習の民主化が加速する! 新サービス SageMaker Canvas について /new service sagemaker canvas for reinvent 2021
mochan_tk
0
670
[GitHub Copilot]あなたもコードの自動生成を体験できる! with VSCode/vscodemeetup #17 GitHub Copilot with VS Code
mochan_tk
0
280
Azure OpenAI Service関連について! / cogbot #34 Ignite 2021 Nov Recap about Azure OpenAI Service
mochan_tk
0
150
Azure OpenAI Service関連について! / Microsoft Ignite autumn 2021 about Azure OpenAI Service
mochan_tk
0
1.2k
Getting Started with LINE Notify / SORACOM IoT Meetup #4
mochan_tk
0
1.3k
様々なオンラインイベントを開催して見えたリアルな情報の共有 / comucal#4
mochan_tk
0
1.4k
Other Decks in Programming
See All in Programming
Client-Side Field-Level Encryption for Apache Kafka Connect @ VoxxedDays Luxembourg 2022
hpgrahsl
0
120
How we run a Realtime Puzzle Fighting Game on AWS Serverless
falken
0
250
[DevTrends - Jun/2022] Arquitetura baseada em eventos
camilacampos
0
160
設計ナイト2022 トランザクションスクリプト
shinpeim
11
2.1k
Imperative is dead, long live Declarative! | Appdevcon
prof18
0
110
BASE BANKチームの技術選定と歴史 / how to decide technology selection for startup
budougumi0617
0
1.4k
Baseline Profilesでアプリのパフォーマンスを向上させる / Improve app performance with Baseline Profiles
numeroanddev
0
260
VisualProgramming_GoogleHome_LINE
nearmugi
1
240
オブジェクト指向で挫折する初学者へ
deepoil
0
200
【Scrum Fest Osaka 2022】スクラムチームに放り込まれた若手エンジニアの皆さん、どのように技術のキャッチアップをしていくかイメージはついていますか?
miiiki
0
120
チームでカレーを作ろう!アジャイルカレークッキング
akitotsukahara
0
890
マルチプロダクト×非構造化データ×機械学習を支えるデータ信頼性
akino
0
160
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
10
3.5k
Faster Mobile Websites
deanohume
294
28k
Design by the Numbers
sachag
271
17k
Making Projects Easy
brettharned
98
4.3k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
How to Ace a Technical Interview
jacobian
265
21k
The Invisible Side of Design
smashingmag
290
48k
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
Scaling GitHub
holman
451
140k
Thoughts on Productivity
jonyablonski
43
2.3k
Transcript
LINE BOOT AWARDS公式夏期講習 ~CEK編~ 2018.9.4 2018.9.20 1
1.作るも 動物 鳴き声を当てるクイズ スキルを作りましょう。 全部で5問出題し、回答 後に1問ずつ正解 動物 写真と詳細情報を BOTからメッセージを送ります。 最後に何問正解できたか結果がでます。
2
1.作るも 3 ぇ、Clova 鳴き声クイズを開いて いいえ こんにち !鳴き声クイズへようこそ。クイズ 説明を聞きますか?
1.作るも 4 にわとり 1問目です。ジャジャン!(効果音) こ 鳴き声 、なん 動物でしょう? ♪コケコッコー♪ ピンポーン(効果音)正解です。
鳴き声クイズボットから、にわとり 詳細情報を送信します。
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デバイスに対して話しかけた、 最大10件まで 発話履歴を見ることができます。 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 チャネル登録 下記2点 利用規約にチェックをして、、「作成」を押しましょう。 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