ユーザーローカル 人工知能ボット管理画面 初期設...

20
ユーザーローカル 人工知能ボット管理画面 初期設定マニュアル

Upload: others

Post on 19-Jul-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: ユーザーローカル 人工知能ボット管理画面 初期設 …ai.userlocal.jp/pdf/chatbot_install_manual.pdf人工知能ボット管理画面 ・このサービスは、LINE、Facebook、Twitter向け

ユーザーローカル 人工知能ボット管理画面 初期設定マニュアル

Page 2: ユーザーローカル 人工知能ボット管理画面 初期設 …ai.userlocal.jp/pdf/chatbot_install_manual.pdf人工知能ボット管理画面 ・このサービスは、LINE、Facebook、Twitter向け

人工知能ボット管理画面

・このサービスは、LINE、Facebook、Twitter向けのチャットボット作成ツールです。

・各プラットフォームと連携するには、まず初期設定が必要です。管理画面にログイン後、このマニュアルにしたがってプラットフォームとの連携の設定を実施してください。

Page 3: ユーザーローカル 人工知能ボット管理画面 初期設 …ai.userlocal.jp/pdf/chatbot_install_manual.pdf人工知能ボット管理画面 ・このサービスは、LINE、Facebook、Twitter向け

管理画面にログインする

まず、このURLにアクセスし、メールアドレスと付与されたパスワードを入力してください。

https://chatbot-admin.userlocal.jp/account/login

Page 4: ユーザーローカル 人工知能ボット管理画面 初期設 …ai.userlocal.jp/pdf/chatbot_install_manual.pdf人工知能ボット管理画面 ・このサービスは、LINE、Facebook、Twitter向け

  LINEと連携するためのフロー

①事前にLINEビジネスアカウントを取得

②LINE BOT API Trial Accountを作成

③BOT APIアカウントのID情報などを 管理画面上に登録する

Page 5: ユーザーローカル 人工知能ボット管理画面 初期設 …ai.userlocal.jp/pdf/chatbot_install_manual.pdf人工知能ボット管理画面 ・このサービスは、LINE、Facebook、Twitter向け

①LINEビジネスアカウントを作成する

1. LINEアカウントを取得しておく 2. 自分のLINEアカウントでLINE Business Centerにログイン

https://business.line.me/ 3. 初めてログインした場合、会社/事業者情報を登録 4. 「ビジネスアカウントを作成する」をクリック

5. アカウント名や画像を入力して「完了する」をクリック

Page 6: ユーザーローカル 人工知能ボット管理画面 初期設 …ai.userlocal.jp/pdf/chatbot_install_manual.pdf人工知能ボット管理画面 ・このサービスは、LINE、Facebook、Twitter向け

②LINE BOT API Trial Accountを作成

1. BOT API Trial Accountの「始める」をクリック 2. 画面最下部の「利用開始」をクリック 3. BOT API Trial Accountの作成確認画面が表示されるので、

右下の “Create” をクリック

Page 7: ユーザーローカル 人工知能ボット管理画面 初期設 …ai.userlocal.jp/pdf/chatbot_install_manual.pdf人工知能ボット管理画面 ・このサービスは、LINE、Facebook、Twitter向け

③人工知能ボット管理画面でLINE BOT API Trial Accountの情報を登録する作成したLINE BOT API Trial Account名、Channel ID、Channel Secret、MIDを、チャットボットAPI管理画面に登録

※Channel Secretは、右側の「SHOW」ボタンを押すと表示されます

https://chatbot-admin.userlocal.jp/settings/line_keys

Page 8: ユーザーローカル 人工知能ボット管理画面 初期設 …ai.userlocal.jp/pdf/chatbot_install_manual.pdf人工知能ボット管理画面 ・このサービスは、LINE、Facebook、Twitter向け

③人工知能ボット管理画面でLINE BOT API Trial Accountの情報を登録する

登録完了後、以下のような画面に遷移するので、Callback URLと ホワイトリストIPをLINE BOT Trial Account 画面で登録してください。

Page 9: ユーザーローカル 人工知能ボット管理画面 初期設 …ai.userlocal.jp/pdf/chatbot_install_manual.pdf人工知能ボット管理画面 ・このサービスは、LINE、Facebook、Twitter向け

③人工知能ボット管理画面でLINE BOT API Trial Accountの情報を登録する

ホワイトリストIPの登録

Callback URLの登録

Page 10: ユーザーローカル 人工知能ボット管理画面 初期設 …ai.userlocal.jp/pdf/chatbot_install_manual.pdf人工知能ボット管理画面 ・このサービスは、LINE、Facebook、Twitter向け

LINE BOT API Trial Account 動作確認方法

全ての登録が完了したら、LINEの友達追加から、QRコードを読み込み話しかけると返事が返ってきます。

Page 11: ユーザーローカル 人工知能ボット管理画面 初期設 …ai.userlocal.jp/pdf/chatbot_install_manual.pdf人工知能ボット管理画面 ・このサービスは、LINE、Facebook、Twitter向け

    Facebook Messenger Platform用設定

①Facebookアプリとページを事前に作成

②ページアクセストークンを取得する

③Webhookを設定する

Page 12: ユーザーローカル 人工知能ボット管理画面 初期設 …ai.userlocal.jp/pdf/chatbot_install_manual.pdf人工知能ボット管理画面 ・このサービスは、LINE、Facebook、Twitter向け

Facebookアプリとページを作成する

1. https://developers.facebook.com/quickstarts/?platform=web にアクセス

2. 右上の “Skip and Create App ID” をクリック

Page 13: ユーザーローカル 人工知能ボット管理画面 初期設 …ai.userlocal.jp/pdf/chatbot_install_manual.pdf人工知能ボット管理画面 ・このサービスは、LINE、Facebook、Twitter向け

Facebookアプリとページを作成する

3. アプリ名とメールアドレスを入力、カテゴリを選択して「アプリIDを作成」をクリック

Page 14: ユーザーローカル 人工知能ボット管理画面 初期設 …ai.userlocal.jp/pdf/chatbot_install_manual.pdf人工知能ボット管理画面 ・このサービスは、LINE、Facebook、Twitter向け

Facebookアプリとページを作成する

4. App ID が発行され、アプリのダッシュボード画面に遷移する 5. サイドメニューの「製品を追加」から、Messengerの「ス

タート」をクリック

Page 15: ユーザーローカル 人工知能ボット管理画面 初期設 …ai.userlocal.jp/pdf/chatbot_install_manual.pdf人工知能ボット管理画面 ・このサービスは、LINE、Facebook、Twitter向け

Facebookアプリとページを作成する

6. 2つ目のブロックの「トークン生成」からFacebookページを作成する。

Page 16: ユーザーローカル 人工知能ボット管理画面 初期設 …ai.userlocal.jp/pdf/chatbot_install_manual.pdf人工知能ボット管理画面 ・このサービスは、LINE、Facebook、Twitter向け

ページアクセストークンを発行する

1. Facebookアプリのダッシュボード画面で、トークン生成ができるようになる。「トークン生成」でFacebookページを選択するとページアクセストークンが発行される

2. 1. で表示したページアクセストークンを、ユーザーローカルのチャットボットAPI管理画面に貼り付けて登録する

https://chatbot-admin.userlocal.jp/settings/facebook_pages

Page 17: ユーザーローカル 人工知能ボット管理画面 初期設 …ai.userlocal.jp/pdf/chatbot_install_manual.pdf人工知能ボット管理画面 ・このサービスは、LINE、Facebook、Twitter向け

Webhookを設定する1. “Webhooks” の “Setup Webhooks” をクリック

2. コールバックURLの欄に、ユーザーローカルのチャットボットAPI管理画面に表示されている「あなたのコールバックURL」を、verify tokenには適当な文字列を入力し、フォロー入力欄の項目に全てチェックを入れ「確認して保存」をクリック

Page 18: ユーザーローカル 人工知能ボット管理画面 初期設 …ai.userlocal.jp/pdf/chatbot_install_manual.pdf人工知能ボット管理画面 ・このサービスは、LINE、Facebook、Twitter向け

FB用ボットの確認方法

・Facebookページの「メッセージ」から、メッセージを送ると、 返事が返ってきます。

※デフォルトでは、ボット登録者以外の人がメッセージを送っても、ボットは動作しない仕様になっており、ボットを一般リリースするには、Facebookの審査に通る必要があります。https://developers.facebook.com/docs/messenger-platform/app-review

Page 19: ユーザーローカル 人工知能ボット管理画面 初期設 …ai.userlocal.jp/pdf/chatbot_install_manual.pdf人工知能ボット管理画面 ・このサービスは、LINE、Facebook、Twitter向け

  Twitter用ボット作成フロー

①チャットボット用Twitterアカウントを作成

②作成したTwitterアカウントにログインした状態で、

https://chatbot-admin.userlocal.jp/settings/

tw_accounts にアクセスし「ログイン中のアカウント

を認証する」をクリック

③Twitterの認証ページに遷移するので、連携アプリを

認証してください

Page 20: ユーザーローカル 人工知能ボット管理画面 初期設 …ai.userlocal.jp/pdf/chatbot_install_manual.pdf人工知能ボット管理画面 ・このサービスは、LINE、Facebook、Twitter向け

Twitter用ボットの動作確認方法

・作成したアカウントに対して、ほかのTwitterアカウントから @付きで話しかけてください。

・5分から10分程度すると、あなたのアカウントに対して@付きで返信が返ってきます