Help us understand the problem. What is going on with this article?

Webサイトに自作Botを埋め込む その1 -WebChatを使う-

More than 3 years have passed since last update.

【告知】
「チャットボット Advent Calender 2016」つくりました!
ボットにご興味ある方、年末Qiitaで語ってませんか?!
もちろん私も参加します! ゆる〜くご参加、お待ちしておりまーす♪

:christmas_tree: チャットボット Advent Calender 2016 :christmas_tree:
http://qiita.com/advent-calendar/2016/chatbot

(2016.10.27追記)


:candy:   :candy:   :candy:   :candy:   :candy:   :candy:   :candy:
※このシリーズは、BITAデジマラボ様での連載という形に移行しました。
この記事の続編は、BITAデジマラボ様でお楽しみください!

https://bita.jp/dml/author/okada-takenori
:candy:   :candy:   :candy:   :candy:   :candy:   :candy:   :candy:


WebサイトにBotがあったら素敵ですよね。
最近ですと、こんな記事が話題になったりしました!

LOHACOのAI「マナミさん」すごすぎ。6.5人分の人件費を削減した実例公開 - BITAデジマラボ

じつは「WebChat」で簡単にできる!

じつはMicrosoft Bot Frameworkだと、
マナミさんのように
WebサイトにBotを埋め込む事が、簡単に可能です!

スクリーンショットがこちら!

QavvpyBot_WebChat_と_static_webchat_html__qavppy-bot-test-123__—_Brackets.jpg

Microsoft Bot Frameworkには、
Skype,FacebookMessenger,Slack,kik... など
さまざまなChannelが用意されています。
(2016年5月現在)

そして、そのなかにWebChatという
iframeタグでBotを埋め込める仕組みが用意されてるのです!

準備しよう!

まずBotを作ります。

(HelloWorldやってみた!記事は既にいっぱいあるので、
今回はBotの作り方・登録の仕方は割愛します!)
個人的には、こちらの記事がとてもわかりやすかったのでお薦めです♪
Microsoft Bot Framework BotConnector BotをSlackから利用する | hrendoh's memo

Microsoft Bot Frameworkのサイトへログインし、
「My Bots」をクリック、
サイトに埋め込みたいBotを選択して、Botの管理画面へ。

Add another channelから、「WebChat」を追加します。

qavppy_bot_test_🔊.jpg

secretキーを発行します。

Configure_qavppy_bot_test_on_Web_Chat.jpg

できました!設定を完了します!

Configure_qavppy_bot_test_on_Web_Chat 2.jpg

さぁ、埋め込んでみよう!

埋め込みコードを取得します!

qavppy_bot_test.jpg

ソースとSecretキーが表示されるので、コピペしましょう!

qavppy_bot_test 3.jpg

でたー!(゚д゚)

おめでとうございます!これで完了です!

QavvpyBot_WebChat 2.jpg

あとは話しかけるだけ!

QavvpyBot_WebChat_と_static_webchat_html__qavppy-bot-test-123__—_Brackets.jpg

実際のURL

実際にWebChatを置いてあるURLは下記になります!
あそんであげてね!
http://qavppy-bot-test-123.azurewebsites.net/webchat.html

UIを自分で作りたいんだけど、どうすればいい?

「ちがう、ちがう。そうじゃ、そうじゃなーーーいーーーー♪」
とコレジャナイ感をいだく方は、BotをREST APIとして使える
Direct Line APIを使いましょう!

REST APIとして使えるので、
いろんなプログラムにも組み込む事ができますね。

Direct Line APIのご紹介はまた次回の予定です!
それでは!♪

-追記-
続編はこちらからどうぞ!↓
Microsoft Bot FrameworkのDirect Line API × お馴染みjQueryで、WebブラウザからBotと対話してみる - BITAデジマラボ

okajax
.o○(これ、GANでつくった私の顔なんですけど、もっと可愛いアイコンのほうが良いですよね?)
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした