How to develop chatbot on LINE after Re-design.

Hiroyuki Hiki : LINE Developer Relations Solution Architect
Cogbot 勉強会 Special ★ LINE から話せる楽しいチャットボットを作ろう！
https://cogbot.connpass.com/event/124711/

1. リデザインから始めるチャットボット開発 Hiroyuki Hiki, LINE Azure Bot Service 接続編
2. About Me 皆様のLINEの技術を利用したビ ジネスの成功がミッション Background ・AWS Serverless Solution Architect ・モバイル端末開発 Symbian OS Architect Certification ・JAWS-UG MVP 2013 ・AWS SAMURAI 2014 ・LINE API Expert 2018 Hiroyuki Hiki LINE株式会社 Developer Relationsチーム Solution Architect https://twitter.com/UniOce OMO/MaaS周りを注視しています！
3. リデザイン？ • アカウントの種類の統一 • 0円スタート・従量課金の料金プラン • レポート機能の強化 • 最適なメッセージ配信のための追加機能 • プロダクトを横断したデータ活用
4. アカウントの種類の統一 LINEアカウントの種類には、 従来「LINE公式アカウント」「API型公式アカウン ト」「LINE ビジネスコネクトアカウント」「LINE カス タマーコネクトアカウント」「LINE＠」の5種類あり、 それぞれ料金体系や使える機能が異なったが、今 回のリデザインにより、アカウント間の機能の差はな くなる。
5. 0円スタート・従量課金の料金プラン これまで、LINE公式アカウントを開設・維持するた めには月額250万円の固定費が必要でしたが、新 しい料金プランは、一律0円からスタートが可能な 従量課金制となりました。 固定費を廃止したことでアカウントの維持コストも小 さくなるため、複数アカウントの開設と併用が容易に なります。
6. 1. AzureのポータルサイトでWeb App Botの登録を行う。 2. LINEのアカウントの新規登録画面でChatbotに必要な情報の登録を行う 3. LINE Official Account Managerでチャットの項目を修正 4. LINE Developersサイトのチャネル基本設定でChannel Secretをメモし、アクセス トークンを再発行しメモする。 5. AzureのポータルサイトでWeb App Botで4でメモした内容でLINEのチャネルを登録し 登録後にできたweb hookの情報をメモする 6. LINE DevelopersサイトでWebhook送信を利用するにして5でメモしたWebhook URLを設定する 7. LINE official Account Managerで友だち追加を選択し、友だち追加で表示されて いるQRコードをLINEの友だち追加画面でQRコードを選択し読み込んでBotを友だちに する Chatbot 作成の流れ(Web App Bot版)
7. 1.AzureのポータルサイトでWeb App Botの登録 画面を貼り付ける ブラウザーで Azure Portal (https://portal.azure.com) を開き、 Azure サブスクリプションが紐づいている Microsoft アカウントでサインイン。 Azure Portal から左端ナビゲーションバーから [+リソースの作成] をクリック。 クリック
8. 1.AzureのポータルサイトでWeb App Botの登録 新規 ペインの検索欄に Web App Bot" と入力し、表示される **Web App Bot をクリックします。Web App Bot ペインで [作成] をクリックして作成に進む。 クリック
9. 項目 入力内容 ボット名 お好みの名前を入力 サブスクリプショ ン デフォルト リソースグループ お好みのグループを新規作成 or 既存のリソースグルー プを選択 場所 Japan East (東日本) ボットテンプレー ト クリックして、ボットテンプレート ペインを開き、作 る言語とSDK選んでください LUISアプリの場 所 言語解析のコグニティブサービスの場所 国内でサービス提供してないので国内以外を選択 App Service プ ラン そのまま利用する or 新規作成 1.AzureのポータルサイトでWeb App Botの登録 入力
10. • Web アプリボット ペイン の一番下にある [作成] をク リックするとアプリが作成。 • アプリの作成(デプロイ)が成功した旨のメッセージが表 示されたら、[リソースに移動] をクリックして作成した Web アプリボット を表示。 1.AzureのポータルサイトでWeb App Botの登録 項目 入力内容 Azure Storage Bot の状態 (ステート) やログを保存するストレージを 設定。新規作成 or 既存のストレージを選択 Application Insights デフォルトのON Application Insights の場所 Japan East (東日本) Microsoft アプリ ID とパスワード デフォルトのまま アプリIDとパスワードの自動作成 クリック 入力
11. 2.LINEのアカウントの新規登録画面でChatbotに必要な情報の登録を行う https://www.linebiz.com/jp クリック
12. 2.LINEのアカウントの新規登録画面でChatbotに必要な情報の登録を行う クリック
13. 2.LINEのアカウントの新規登録画面でChatbotに必要な情報の登録を行う
14. 2.LINEのアカウントの新規登録画面でChatbotに必要な情報の登録を行う クリック
15. 2.LINEのアカウントの新規登録画面でChatbotに必要な情報の登録を行う 必要項目を入力し「確認する」ボタ ンをクリック 「完了する」をクリック 「LINE Official Account Managerへ」をクリック
16. 2.LINEのアカウントの新規登録画面でChatbotに必要な情報の登録を行う クリック
17. 3.LINE Official Account Managerでチャットの項目を修正 画面右上部の「設定」をクリック クリック
18. 3.LINE Official Account Managerでチャットの項目を修正 画面左部の「応答設定」をクリックし、応答設定画面で応答モードをBotに変更 し応答メッセージをオフ ②BOTに ③オフに ①クリック
19. 3.LINE Official Account Managerでチャットの項目を修正 ①クリック ②クリック
20. 3.LINE Official Account Managerでチャットの項目を修正 ②クリック ①プロバイ ダー名を入力
21. 3.LINE Official Account Managerでチャットの項目を修正 ①クリック
22. 3.LINE Official Account Managerでチャットの項目を修正 ①クリック
23. 3.LINE Official Account Managerでチャットの項目を修正 Messaging API画面下部の「その他の設定はLINE Developerから行えます」の緑で強調されて いる部分をクリック ①クリック
24. LINE Developers画面で右上のログインアイコンをクリックしてログインし設定画面へ ①クリック 4.LINE Developersサイトのチャネル基本設定で Channel Secretをメモし、アクセストークンを再発行しメモする。
25. 4.LINE Developersサイトのチャネル基本設定で Channel Secretをメモし、アクセストークンを再発行しメモする。 ①作成したプロ バイダーをク リック ②作成したアカ ウントをクリッ ク
26. 4.LINE Developersサイトのチャネル基本設定で Channel Secretをメモし、アクセストークンを再発行しメモする。 メモ Channel Secretをメモ
27. 4.LINE Developersサイトのチャネル基本設定で Channel Secretをメモし、アクセストークンを再発行しメモする。 ①クリック アクセストークンを再発行してメモ ②メモ
28. 5.AzureのポータルサイトでWeb App Botで4でメモした内容で LINEのチャネルを登録し、登録後にできたweb hookの情報をメモする リソースグループを選択し、先ほど作成したWeb App Botのグループを選択する クリック クリック
29. 5.AzureのポータルサイトでWeb App Botで4でメモした内容で LINEのチャネルを登録し、登録後にできたweb hookの情報をメモする Web App Botを選択する クリック
30. 5.AzureのポータルサイトでWeb App Botで4でメモした内容で LINEのチャネルを登録し、登録後にできたweb hookの情報をメモする チャンネルを選択し、チャンネルに接続画面でLINEをクリック ①クリック ②クリック
31. 5.AzureのポータルサイトでWeb App Botで4でメモした内容で LINEのチャネルを登録し、登録後にできたweb hookの情報をメモする チャンネル シークレットとチャンネル アクセス トークンを登録し、webhook の URLをメモし保存ボタン を押下する ①入力 ②入力 ③メモ
32. 6. LINE Developersサイトのチャネル基本設定でWebhook送信を利用する にして、5でメモしたWebhook URLを設定する Webhook送信を利用するにセット ５でメモしたwebhook の URLを設定し、接続確認ボタンを押下して疎通確認を行う ④入力 ③クリック ⑤疎通確認 ①クリック ②利用する
33. 7. LINE Official Account Managerで友だち追加を選択し、友だち追加で表示されている QRコードをLINEの友だち追加画面でQRコードを選択し読み込んでBOTを友だちにする LINEの友だち追加画面でQRコードをタップし LINE official Account Managerに表示されているQRコードを読み込むと友だち追加完了 ①QRコード ②タップ
34. bit.ly/linedevslack LINE developers community Q&A https://www.line-community.me/questions LINE Developers FAQ https://developers.line.biz/ja/faq/ Slack