PR

FacebookでChatbotを公開する

2018年4月17日(火)
樋口 勝一
連載8回目となる今回は、FacebookのMessengerを介してChatbotとやり取りする方法を解説します。

新しいAzureのBotサービスへ移行

本題に入る前に。これまでBot Frameworkのポータルサイト(https://dev.botframework.com/)でChatbotの管理を行っていましたが、この度Microsoft Azureに統合されることとなり、現在ポータルサイトに登録してあるChatbotはAzureの新しいBotサービスに移行することになりました(https://docs.microsoft.com/en-us/Bot-Framework/bot-service-migrate-bot)。2018年3月31日(記事の公開時には過ぎています)までにポータルサイトにログインし、登録してあるChatbotを「My bots」で確認すると「Migration Status」という項目が追加されており、「Migrate」ボタンが表示されています。このボタンをクリックすれば後は自動的に新しいAzureのBotサービスに移行され、引き続き利用できるようになっています。

Migrateボタンをクリック

Migrateボタンをクリック

新しいAzureのBotサービス

新しいAzureのBotサービス

ChatbotをFacebookチャンネルに接続する

以前、連載の4回目で、ChatbotをAzureに公開して、Web ChatとSkypeで利用する方法を紹介しました。Bot FrameworkベースのChatbotは、この他にも様々なメッセージングアプリケーションや、SNSと連携できる「チャンネル」という機能があります。今回は、ChatbotをSNSのFacebookにチャンネル接続をして、FacebookのメッセンジャーからChatbotと会話できるようにする方法を紹介します。

すでにAzureのBotサービスにChatbotが登録もしくは、移行されていて、Azure App Serviceにデプロイされていることが前提となります。ここまでの設定方法は、以前の記事(https://thinkit.co.jp/article/12883)を参考にしていただければと思います。

設定を行うには、AzureとFacebookのページを何度か行き来する必要があるので、間違わないようにしましょう。=== Facebook ページの作成

まずはFacebookでChatbotと会話するためのページを作成します。Facebookのページ右上のプルダウンメニューから「ページを作成」を選択します。

ページを作成

ページを作成

作成するページにはいくつかテンプレートが用意されています。今回は「慈善活動またはコミュニティー」を選択します。

ページのテンプレートから「慈善活動またはコミュニティ」を選択

ページのテンプレートから「慈善活動またはコミュニティ」を選択

ページの名前を設定して、「スタート」ボタンをクリックして作成します。

ページの名前(Chatbot201707)を設定し、「スタート」をクリック

ページの名前(Chatbot201707)を設定し、「スタート」をクリック

Facebook ページIDの取得

ページが作成されたら、左メニューの「ページ情報」を選択して、一番下の「ページID」を取得しておきます。

ページIDを取得

ページIDを取得

Facebook アプリの作成

Facebookのアプリ作成ページ(https://developers.facebook.com/quickstarts/)からアプリを作成します。右上の「アプリを作成」ボタンをクリックします。

アプリの作成はこのページから

アプリの作成はこのページから

表示名(ここでは「MyChatbotApp」とします)とメールアドレスを入力して、作成ボタンをクリックします。

アプリの作成

アプリの作成

Facebook アプリIDとシークレットキーの取得

アプリが作成されると、管理ページが表示されるので、「ダッシュボード」を選択します。まずは「アプリID」とシークレットキー「app secret」を取得します。シークレットキーは「表示」ボタンをクリックすると参照できます。

アプリIDとシークレットキーの取得

アプリIDとシークレットキーの取得

Facebook ページアクセストークンの取得

次に、左メニューから「製品を追加」を選択します。Facebook上でChatbotを利用するために「Messenger」を選択して「設定」ボタンをクリックします。

製品の追加

製品の追加

「トークン生成」の項目で、「Facebookページ」として先ほど作成した「ChatBot201707」を選択します。いくつかアクセス許可を確認するメッセージが表示され、「ページアクセストークン」が表示されますので、こちらを取得しておきましょう。

ページアクセストークンの取得

ページアクセストークンの取得

ここまでで、Facebookからは「ページID」「アプリID」「シークレットキー」「ページアクセストークン」の4つを取得しています。

Azure チャンネルの構成

次に、AzureのBotサービスページで、チャンネルを選択します。接続するチャンネルとして「Facebook Messenger」を選択します。

Facebook Messengerに接続

Facebook Messengerに接続

「Facebook Messenger の資格情報を入力」項目で、Facebookから取得した4つの項目をそれぞれ入力していきます。

資格情報の入力

資格情報の入力

Azure コールバックURLと確認トークンの取得

さらに、ページ下部には、「Facebook 用のコールバックURLと確認トークン」の項目があるので、「コールバックURL」と「確認トークン」をそれぞれ取得しておきます。

コールバック URL と確認トークンの取得

コールバック URL と確認トークンの取得

最後に「保存」ボタンをクリックして、チャンネル接続設定を保存します。

Azureからは「コールバックURL」と「確認トークン」の2つを取得しています。

Facebook Webhooksの設定

再びFacebookのアプリ管理ページに戻り、左メニューから「プロダクト」-「Messenger」-「設定」を選択します。「Webhooks」の項目で「Webhooksの設定」ボタンをクリックします。

Webhooksの設定

Webhooksの設定

「新しいページサブスクリプション」ダイアログが表示されるので、先ほどAzure側で取得した「コールバックURL」と「確認トークン」を入力します。「サブスクリプションフィールド」として「messages」「messaging_postbacks」「messaging_optins」「message_deliveries」の4つを選択しておきます。「確認して保存」ボタンをクリックします。

新しいページサブスクリプション

新しいページサブスクリプション

Facebook アプリを許可する

最後に左メニューから「設定」-「詳細設定」を選択します。「セキュリティ」項目の「アプリ設定へのAPIアクセスを許可」を「はい」に設定します。これでAzure上のChatbotアプリケーションがFacebookのAPIを利用して、会話を行えるようになりました。

これで設定完了だ

これで設定完了だ

FacebookのMessengerでChatbotと会話する

ここまで設定が完了したら、ようやくChatbotとFacebook上で会話できるようになります。Facebookの自分のページから「Messenger」でFacebookページの「ChatBot201707」に話しかけてみましょう。作成した通りChatbotと会話ができれば成功です!

Facebook Messengerでの会話

Facebook Messengerでの会話

もちろんスマートフォンのMessengerからも、同じように会話ができます。

スマートフォンのMessengerでも会話できる

スマートフォンのMessengerでも会話できる

以上が、ChatbotとFacebook Messengerのチャンネル接続方法となります。

Azure側とFacebook側の双方でトークンの設定があるため多少手間はかかりますが、安全にChatbotアプリケーションをFacebookで利用できるようになりました。Facebook上で、これまで開発してきたChatbotが利用できるということがポイントで、企業のページに接続したり、コミュニティーページに接続したりと、様々な利用シーンが想定されます。AIを搭載したChatbotが、企業ページでユーザーのサポートまでしてくれるといった夢のような使い方が現実になりそうです。

また少しChatbotが成長しましたね。

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会員サービスの概要とメリットをチェック

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