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