PR

作ったChatbotを公開してみよう

2017年11月8日(水)
樋口 勝一
前回まで作成したChatbotを、ブラウザ経由でどこからでも利用できるように公開してみる。

チャンネルへ接続

Bot Frameworkは、様々なメッセージングアプリケーションAPIと接続するためのチャンネルを提供しています。前述のように、Bot登録時にはすでにSkypeとWeb Chatのチャンネルに接続されています。

Web ChatからChatbotを利用する

一番簡単な「Web Chat」でChatbotを利用してみましょう。すでに接続が完了しているので、「Web Chat」の「Edit」を選択して詳細を表示します。

Web Chatの詳細

Web Chatの詳細

Web ChatはEmbed codeとしてiframeタグで提供されており、これをWebページ埋め込むことですぐに利用できるようになっています。まずは簡単なHTMLページを作成して試してみましょう。

Visual Studioのソリューションエクスプローラーから、プロジェクト名「ChatBot201707」を右クリックして「追加」-「HTMLページ」を選択して「WebChat」という名前でHTMLファイルを追加します。

HTMLページを追加

HTMLページを追加

リスト2:Web Chatテスト用のHTMLページ

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Chatbot201707</title>
</head>
<body>
    <div align="center" valign="center">
        <iframe src='https://webchat.botframework.com/embed/Chatbot201707?s=YOUR_SECRET_HERE' style="height: 500px; width: 500px" ></iframe>
    </div>
</body>
</html>

Embed codeのiframeタグをコピーして、このようhtmlを記述します。「YOUR_SECRET_HERE」の部分には、Web Chatの詳細ページに2つあるSecret keysのいずれかの「Show」を選択して、表示されたものをコピーして貼り付けます。

シークレットキーを表示して貼り付け

シークレットキーを表示して貼り付け

WebChat.htmlを保存して、Azureにデプロイして再更新を行います。ブラウザで、http://chatbot201707.azurewebsites.net/WebChat.htmlを開いて表示してみましょう。

Web Cahtの表示

Web Cahtの表示

問題なくChatbotと会話できていれば成功です!

SkypeからChatbotを利用する

Skypeは、Microsoftが提供する代表的なメッセージングアプリケーションです。専用アプリケーションでPCやスマートフォンから、さらにWebアプリケーションとしてブラウザからでも利用することができます。SkypeでChatbotと会話ができるように設定を行ってみましょう。

Skypeを編集する

Skypeを編集する

Skypeの詳細ページで「Web control」-「Get embed code」をクリックします。

Get embed codeをクリック

Get embed codeをクリック

Webアプリケーションとして利用するSkypeのレイアウト設定項目と、会話の相手を選択できるようになっています。Chatbotと会話するために「Set receiver」では「Bot」を選択して「Microsoft App ID」にBotの登録時に取得し、Web.configにも記述した「アプリID」を入力します。各選択内容によって「Code」の部分が書き換わるので、入力が完了したらコードをコピーします。

Botを選択したアプリIDを入力

Botを選択したアプリIDを入力

先ほど作成したWebChat.htmlを、再度修正します。

リスト3:WebChat.htmlを再修正

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Chatbot201707</title>
</head>
<body>
    <!--<div align="center" valign="center">
        <iframe src='https://webchat.botframework.com/embed/Chatbot201707?s=HsIqSCVuQzM.cwA.1Ag.4x1tkUsMiAjYWKQunvCWjodM-qjUk27OOut9ckZ5Bdg' style="height: 500px; width: 500px"></iframe>
    </div>-->

    <span class="skype-button bubble " data-bot-id="2595fdc3-27b1-4810-a040-efc3da267409"></span>
    <script src="https://swc.cdn.skype.com/sdk/v1/sdk.min.js"></script>
</body>
</html>

コピーしたコードを貼り付けたら保存します。その後Azureへデプロイして、再発行しておきます。

ブラウザで、http://chatbot201707.azurewebsites.net/WebChat.htmlを開いて表示してみましょう。右下にSkypeのマークがあるのでクリックしてみると、ブラウザ内にSkypeのチャットインターフェースが表示されます。ここから、登録したChatbotと会話できるようになっています。

ブラウザのSkypeでChatbotと会話してみる

ブラウザのSkypeでChatbotと会話してみる

さらにUWPアプリやデスクトップアプリケーション版のSkypeがインストールされている環境で、「https://join.skype.com/bot/」に「アプリID」を追加したURL(https://join.skype.com/bot/2595fdc3-27b1-4810-a040-efc3da267409?add)を開いてみると、Skypeのアプリケーションが自動的に起動してChatbotと会話できるようになっています。

UWPアプリで表示

UWPアプリで表示

デスクトップアプリで表示

デスクトップアプリで表示

さらに、スマートフォンのSkypeアプリでも同様に会話が可能です。

スマートフォンアプリで表示

スマートフォンアプリで表示

以上、作成したChatbotを公開するまでの手順を紹介しました。ウェブブラウザや各種アプリケーションとプラットフォームが異なっていても、ほぼ同じレイアウトとインターフェースでChatbotと会話できるのが、マルチプラットフォームに対応したBot Frameworkの優れた機能の一つとなっています。

今回紹介したWeb ChatやSkype以外のメッセージングアプリケーションAPIと接続するためのチャンネル設定方法についても、今後紹介する予定です。

GMOインターネット株式会社 Windowsソリューション チーフエグゼクティブ

GMOインターネットでWindowsのサービス開発運用に関わって16年、数年単位で進化し続けるMicrosoftのWindowsは新しもの好きにはたまらない製品です。自動販売機に見たことのないジュースがあれば、迷わすボタンを押します。そんなチャレンジが僕の人生を明るく、楽しくしてくれています。

お名前.com デスクトップクラウド
http://www.onamae-desktop.com/

お名前.com VPS Hyper-V
http://www.onamae-server.com/vps/hyperv/

連載バックナンバー

Web開発技術解説
第10回

Chatbotから話しかける(プロアクティブメッセージの送信)

2018/5/18
連載10回目となる今回は、Chatbotから先に話しかけるための手順を紹介します。
Web開発技術解説
第9回

Chatbotで画像コミュニケーションを実現する

2018/5/14
連載9回目となる今回は、Chatbotとの文字でのやり取りに画像を追加する方法を解説します。
Web開発技術解説
第8回

FacebookでChatbotを公開する

2018/4/17
連載8回目となる今回は、FacebookのMessengerを介してChatbotとやり取りする方法を解説します。

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています