Tweet
Tweet

Slide 1

Slide 1 text

リデザインから始めるチャットボット開発 Hiroyuki Hiki, LINE Azure Bot Service 接続編

Slide 2

Slide 2 text

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周りを注視しています！

Slide 3

Slide 3 text

リデザイン？ • アカウントの種類の統一 • 0円スタート・従量課金の料金プラン • レポート機能の強化 • 最適なメッセージ配信のための追加機能 • プロダクトを横断したデータ活用

Slide 4

Slide 4 text

アカウントの種類の統一 LINEアカウントの種類には、 従来「LINE公式アカウント」「API型公式アカウン ト」「LINE ビジネスコネクトアカウント」「LINE カス タマーコネクトアカウント」「LINE＠」の5種類あり、 それぞれ料金体系や使える機能が異なったが、今 回のリデザインにより、アカウント間の機能の差はな くなる。

Slide 5

Slide 5 text

0円スタート・従量課金の料金プラン これまで、LINE公式アカウントを開設・維持するた めには月額250万円の固定費が必要でしたが、新 しい料金プランは、一律0円からスタートが可能な 従量課金制となりました。 固定費を廃止したことでアカウントの維持コストも小 さくなるため、複数アカウントの開設と併用が容易に なります。

Slide 6

Slide 6 text

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版)

Slide 7

Slide 7 text

1.AzureのポータルサイトでWeb App Botの登録 画面を貼り付ける ブラウザーで Azure Portal (https://portal.azure.com) を開き、 Azure サブスクリプションが紐づいている Microsoft アカウントでサインイン。 Azure Portal から左端ナビゲーションバーから [+リソースの作成] をクリック。 クリック

Slide 8

Slide 8 text

1.AzureのポータルサイトでWeb App Botの登録 新規 ペインの検索欄に Web App Bot" と入力し、表示される **Web App Bot をクリックします。Web App Bot ペインで [作成] をクリックして作成に進む。 クリック

Slide 9

Slide 9 text

項目 入力内容 ボット名 お好みの名前を入力 サブスクリプショ ン デフォルト リソースグループ お好みのグループを新規作成 or 既存のリソースグルー プを選択 場所 Japan East (東日本) ボットテンプレー ト クリックして、ボットテンプレート ペインを開き、作 る言語とSDK選んでください LUISアプリの場 所 言語解析のコグニティブサービスの場所 国内でサービス提供してないので国内以外を選択 App Service プ ラン そのまま利用する or 新規作成 1.AzureのポータルサイトでWeb App Botの登録 入力

Slide 10

Slide 10 text

• Web アプリボット ペイン の一番下にある [作成] をク リックするとアプリが作成。 • アプリの作成(デプロイ)が成功した旨のメッセージが表 示されたら、[リソースに移動] をクリックして作成した Web アプリボット を表示。 1.AzureのポータルサイトでWeb App Botの登録 項目 入力内容 Azure Storage Bot の状態 (ステート) やログを保存するストレージを 設定。新規作成 or 既存のストレージを選択 Application Insights デフォルトのON Application Insights の場所 Japan East (東日本) Microsoft アプリ ID とパスワード デフォルトのまま アプリIDとパスワードの自動作成 クリック 入力

Slide 11

Slide 11 text

2.LINEのアカウントの新規登録画面でChatbotに必要な情報の登録を行う https://www.linebiz.com/jp クリック

Slide 12

Slide 12 text

2.LINEのアカウントの新規登録画面でChatbotに必要な情報の登録を行う クリック

Slide 13

Slide 13 text

2.LINEのアカウントの新規登録画面でChatbotに必要な情報の登録を行う

Slide 14

Slide 14 text

2.LINEのアカウントの新規登録画面でChatbotに必要な情報の登録を行う クリック

Slide 15

Slide 15 text

2.LINEのアカウントの新規登録画面でChatbotに必要な情報の登録を行う 必要項目を入力し「確認する」ボタ ンをクリック 「完了する」をクリック 「LINE Official Account Managerへ」をクリック

Slide 16

Slide 16 text

2.LINEのアカウントの新規登録画面でChatbotに必要な情報の登録を行う クリック

Slide 17

Slide 17 text

3.LINE Official Account Managerでチャットの項目を修正 画面右上部の「設定」をクリック クリック

Slide 18

Slide 18 text

3.LINE Official Account Managerでチャットの項目を修正 画面左部の「応答設定」をクリックし、応答設定画面で応答モードをBotに変更 し応答メッセージをオフ ②BOTに ③オフに ①クリック

Slide 19

Slide 19 text

3.LINE Official Account Managerでチャットの項目を修正 ①クリック ②クリック

Slide 20

Slide 20 text

3.LINE Official Account Managerでチャットの項目を修正 ②クリック ①プロバイ ダー名を入力

Slide 21

Slide 21 text

3.LINE Official Account Managerでチャットの項目を修正 ①クリック

Slide 22

Slide 22 text

3.LINE Official Account Managerでチャットの項目を修正 ①クリック

Slide 23

Slide 23 text

3.LINE Official Account Managerでチャットの項目を修正 Messaging API画面下部の「その他の設定はLINE Developerから行えます」の緑で強調されて いる部分をクリック ①クリック

Slide 24

Slide 24 text

LINE Developers画面で右上のログインアイコンをクリックしてログインし設定画面へ ①クリック 4.LINE Developersサイトのチャネル基本設定で Channel Secretをメモし、アクセストークンを再発行しメモする。

Slide 25

Slide 25 text

4.LINE Developersサイトのチャネル基本設定で Channel Secretをメモし、アクセストークンを再発行しメモする。 ①作成したプロ バイダーをク リック ②作成したアカ ウントをクリッ ク

Slide 26

Slide 26 text

4.LINE Developersサイトのチャネル基本設定で Channel Secretをメモし、アクセストークンを再発行しメモする。 メモ Channel Secretをメモ

Slide 27

Slide 27 text

4.LINE Developersサイトのチャネル基本設定で Channel Secretをメモし、アクセストークンを再発行しメモする。 ①クリック アクセストークンを再発行してメモ ②メモ

Slide 28

Slide 28 text

5.AzureのポータルサイトでWeb App Botで4でメモした内容で LINEのチャネルを登録し、登録後にできたweb hookの情報をメモする リソースグループを選択し、先ほど作成したWeb App Botのグループを選択する クリック クリック

Slide 29

Slide 29 text

5.AzureのポータルサイトでWeb App Botで4でメモした内容で LINEのチャネルを登録し、登録後にできたweb hookの情報をメモする Web App Botを選択する クリック

Slide 30

Slide 30 text

5.AzureのポータルサイトでWeb App Botで4でメモした内容で LINEのチャネルを登録し、登録後にできたweb hookの情報をメモする チャンネルを選択し、チャンネルに接続画面でLINEをクリック ①クリック ②クリック

Slide 31

Slide 31 text

5.AzureのポータルサイトでWeb App Botで4でメモした内容で LINEのチャネルを登録し、登録後にできたweb hookの情報をメモする チャンネル シークレットとチャンネル アクセス トークンを登録し、webhook の URLをメモし保存ボタン を押下する ①入力 ②入力 ③メモ

Slide 32

Slide 32 text

6. LINE Developersサイトのチャネル基本設定でWebhook送信を利用する にして、5でメモしたWebhook URLを設定する Webhook送信を利用するにセット ５でメモしたwebhook の URLを設定し、接続確認ボタンを押下して疎通確認を行う ④入力 ③クリック ⑤疎通確認 ①クリック ②利用する

Slide 33

Slide 33 text

7. LINE Official Account Managerで友だち追加を選択し、友だち追加で表示されている QRコードをLINEの友だち追加画面でQRコードを選択し読み込んでBOTを友だちにする LINEの友だち追加画面でQRコードをタップし LINE official Account Managerに表示されているQRコードを読み込むと友だち追加完了 ①QRコード ②タップ

Slide 34

Slide 34 text

bit.ly/linedevslack LINE developers community Q&A https://www.line-community.me/questions LINE Developers FAQ https://developers.line.biz/ja/faq/ Slack

Slide 35

Slide 35 text

35