Pro Yearly is on sale from $80 to $50! »

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

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

4778efaf773e22787dee8ca84f44ed37?s=128

金谷拓哉 / Takuya Kanatani

November 20, 2020
Tweet

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にデプロイ
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  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の機能2選

  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!