Bot Framework Composer 入門 ～GUIでカッコいいLINE Botを作る～ /azuretechlove#8

Azure Tech Lab #8 - Re:Born 2020.11.20 での登壇スライドです。
https://azure-tech-love.connpass.com/event/193791/

#azuretechlove

Transcript

1. Takuya Kanatani torisankanasan Azure Tech Lab #8 Bot Framework Composer ⼊⾨ GUIでカッコいいLINE Botを作る ×
2. 本セッションについて 対象者 • ノーコード/ローコードでのチャットボット開発に興味のある⼈ • LINE BotやLINE APIは聞いたことあるけど、まだ触ったことがない⼈ 質問受付 https://lin.ee/5Rg6Gb2
3. Takuya Kanatani 株式会社神⼾デジタル・ラボ デジタルビジネス本部 主にLINEを使ったアプリの企画/開発 Honde Next 地元企業のデジタル活⽤⽀援 LINE API Expert (ʻ19~) Azure Tech Lab. サポートメンバー
4. 年末年始LINEボットを作りたくなったときに オススメのサービスをご紹介します。
5. Bot Framework Composer
6. Bot Framework Composer でできること ❷ LUIS（⾃然⾔語処理サービス）との連携が簡単 ❶ ノーコード/ローコードでチャットボットが作れる ❹ コードが⽣成されるのでバージョン管理やCI/CD可能 ❸ QnA Maker（⾃然⾔語処理サービス）との連携が簡単 ❺ Azure Bot Service がサポートする複数チャネルとの連携
7. Bot Framework Composer利⽤の流れ ❶ 開発環境の構築 Azure サブスクリプション Bot Framework Composer： インストーラー or GitHub よりソースをダウンロードしてビルド Git, Node.js, Bot Framework Emulator, .NET Core SDK 3.1 ❷ Bot Framework Composer でBot アプリケーションの作成 ❸ Bot Framework Emulatorで動作確認 ❹ Bot アプリケーションをAzureにデプロイ
21. ボットサーバー LINE Messaging API JSON形式のデータを HTTPSで送受信できればOK
22. QnA Maker LUIS デプロイ Azure Bot Service （ボットチャンネルの登録） App Service Cosmos DB Application Insights Storage Account
23. つくりました！ LINE公式アカウント Azure Kobe Base https://lin.ee/iWi1ZfK
24. 出典：https://cloud.watch.impress.co.jp/img/clw/docs/1282/972/html/microsoft-31.png.html
25. 機能⼀覧 イベント情報を配信 よくある質問に回答
26. 出典： https://ascii.jp/elem/000/004/032/4032354/3/
27. 機能⼀覧 @Futo_Horio とのオンライン相談予約機能
28. これだけでLINE Botがカッコよくなる Messaging APIの機能２選
29. 1. Flex Message
30. Flex Message
31. Flex Message
32. Flex Messageの記述形式
33. Flex Message Simulator 出典：https://developers.line.biz/flex-simulator/
34. Flex Message Simulator 出典：https://developers.line.biz/flex-simulator/
35. 2. Messaging APIによるRichMenu設定
36. Rich menu
37. Rich Menuの設定⽅法 LINE Official Account Managerから登録 APIで登録 ❷ LINE Official Account Manager ❷ Messaging API ❶ 画像を準備
38. Messaging APIによるRichMenu設定 設定⼿順 ❶ リッチメニューの画像を準備する ❷ タップ領域を指定してリッチメニューを作成する curl -v -X POST https://api.line.me/v2/bot/richmenu -H ʻAuthorization: Bearer {channel access token}ʼ -H ʻContent-Type: application/jsonʼ -d …右図…
39. Messaging APIによるRichMenu設定 設定⼿順 ❶ リッチメニューの画像を準備する ❷ タップ領域を指定してリッチメニューを作成する ❸ リッチメニューに画像をアップロードして添付する curl -v -X POST https://api-data.line.me/v2/bot/richmenu//{richMenuId}/content -H “Authorization: Bearer {channel access token}” -H “Content-Type: image/jpeg” -T image.jpg
40. Messaging APIによるRichMenu設定 設定⼿順 ❶ リッチメニューの画像を準備する ❷ タップ領域を指定してリッチメニューを作成する ❸ リッチメニューに画像をアップロードして添付する ❹ リッチメニューとユーザーをリンクする curl -v -X POST https://api.line.me/v2/bot/user/{userId}/richmenu/{richMenuId} -H "Authorization: Bearer {channel access token}"
41. Rich menuをユーザー毎に付け替え！
42. Rich menuでタブが作れる！
43. l 前半 GUIでLINE Botが作れるBot Framework Composer l 後半 これだけでLINE BotがカッコよくなるMessaging APIの2機能 ◀ 本⽇の質問受付⽤LINE公式アカウントはコチラ ▶ https://lin.ee/5Rg6Gb2 本⽇お話ししたこと
44. Thank you!