Facebookの「メッセンジャーボット」機能は目新しいものではなく、すでにたくさんの素晴らしいボットが存在しています。 しかし、あなた自身のボットを構築するための正確な方法に関するリソースは乏しく、Facebook Graph APIに不慣れな人々のための説明が不足しています。 メッセンジャーボットは現在、SSLで保護されたWebhookコールバックURLを使用する必要があります（詳細は後ほど）、そしてSSLを設定することは皆のためではなく、またお金がかかります。
この記事では、簡単なFacebookメッセンジャーボットを作成するプロセス全体を説明します。Facebook自体のドキュメントの説明が不十分だからです。 httpsプロトコルを使用するクラウドアプリケーションをセットアップし、Node.js（JavaScript、サーバーサイド言語）でボットをコーディングし、gitを使用してコードをクラウドアプリケーションにプッシュし、Facebook Messengerでテストします。
セットアップボット
ノートパソコンにNodeがインストールされている必要があります。 そうでない場合は、Node Webサイトにアクセスしてダウンロードしてインストールします。
完了したら、ボットのセットアップを続けることができます。 以下の手順に従ってください。
1.ターミナルを起動します。
あなたのコードを保持するための別のディレクトリが必要です。
- 新しいディレクトリを作る
mkdir testbot
- 作業ディレクトリを作成したばかりのディレクトリに変更します。
cd testbot
3.次に、Nodeアプリケーションを初期化します。 npm init
- あなたはあなたのアプリケーションについての情報を入力するように頼まれるでしょう、すべてのためにEnterを押すことによってただデフォルトを使いなさい。
4.パッケージをインストールする npm install express body-parser request --save
- コマンドが実行され、いくつかの警告が表示されます。 無視してください。
5. Finderで、作成した「 testbot 」ディレクトリを開き、「 package.json 」という名前のファイルを見つけます。 Sublime Textのようなエディタでこれを開いてください。
6.このファイルに、行を追加する必要があります。 "start": "node index.js"
- 前の行の最後に「、」を追加するのを忘れないでください。
7.次に、Sublime Textで新しいファイルを作成し、その中に次のコードを入力します。
[js]
var express = require（ 'express'）;
var bodyParser = require（ 'body-parser'）;
var request = require（ 'request'）;
var app = express（）;
app.use（bodyParser.urlencoded（{extended：false}））;
app.use（bodyParser.json（））;
app.listen（（process.env.PORT || 3000））;
app.get（ '/'、function（req、res）{
res.send（ 'これはTestBotサーバーです'）;
;））;
app.get（ '/ webhook'、関数（req、res）{
if（req.query ['hub.verify_token'] === 'testbot_verify_token'）{
res.send（req.query ['hub.challenge']）;
その他{
res.send（ '無効な検証トークン'）;
}
;））;
[/ js]
このファイルをindex.jsとして保存します
注： 13行目の 'hub.verify_token'の値は 'testbot_verify_token'に設定されています。FacebookでWebフックを作成するときに使用されるので、この値を覚えておいてください。
Gitリポジトリを作成する
ボットのコールバック処理を設定したので、コードをHerokuにプッシュする必要があります。 そのためには、ディレクトリにgitリポジトリを作成する必要があります。
注： “ git”はファイルとソフトウェアコードのバージョン管理システムです。 あなたはウィキペディアでそれについてもっと読むことができます。
gitリポジトリを作成するのは簡単で、2、3のターミナルコマンドだけを取ります。
注意：ターミナルの“ testbot ”ディレクトリの中にいることを確認してください。 これを行うには、端末にコマンドpwdを入力します。
gitリポジトリを作成するには、以下の手順に従ってください。
1. git init
2. git add .
3. git commit -m "Register Facebook Webhook"
セットアップHeroku
Facebookの開発者ページに入る前に、Facebookが話すことができるコールバックURLが必要です。 このURLはhttpsプロトコルを使用する必要があります 。つまり、WebサイトにSSL証明書をインストールする必要があります。 しかし、これはFacebookメッセンジャーボットの初心者向けガイドなので、物事を複雑にしないようにしましょう。 Herokuを使ってコードをデプロイします。 HerokuはあなたのアプリケーションのためにあなたにhttpsのURLを与え、私達の（非常に基本的な）要求を満たす無料プランを持っています。
HerokuのWebサイトにアクセスして、登録してください。
注： 「主な開発言語を選択してください」というフィールドに、「私は別の言語を使用します」と入力します。
それが終わったら、あなたのOS用のHerokuツールベルト（私にとってはMac）をインストールし、そしてそれをインストールしてください。 これであなたはあなたのターミナル（またはWindowsではコマンドプロンプト）からHerokuにアクセスすることができます。
次に、Herokuにアプリを作成します。このアプリには、ボットのコード全体が含まれます。 以下の手順に従ってください。
1.ターミナルを起動します
2. heroku login入力しheroku login
- メールアドレスとパスワードを入力するように求められます。
- あなたのメールアドレスを入力し、Enterキーを押してください。 次に、パスワードを入力してEnterキーを押します。
- あなたはherokuにログインするでしょう
3. heroku create入力しheroku create
- これにより、Herokuにアプリが作成され、ハイパーリンクが表示されます。 リンクがhttpsプロトコルを使用していることに注意してください。 簡単でしょ？
4.これで、アプリコードをHerokuにプッシュできます git push heroku master
5.これが完了したら、あなたのアプリは基本的にライブであり、あなたはすべてがうまくいっていることを確認するためにあなたのブラウザのリンクを訪れることができます。 「 これはTestBotサーバーです 」というWebページを開くはずです。
Facebookの設定
ボットをFacebookに接続する時が来ました。 新しいFacebookページを作成するか、自分が所有する既存のFacebookページを使用する必要があります。 新しいFacebookページを作成して処理を進める方法を紹介します。
1. Facebookにアクセスして新しいページを作成します。
- あなたが望むどのカテゴリでもページを作成することができます。 特に理由はありませんが、会社/組織を選択しています。
2. Facebookが示す次のステップはオプションであり、スキップすることができます。
3.次に、Facebook Developers 'Websiteに行きます。
- 右上の[ マイアプリ ]にマウスを移動して、ドロップダウンメニューから[ 新しいアプリの追加 ]をクリックします。
- Facebookがプラットフォームの選択を促してきたら、「 基本設定 」をクリックします。
4.アプリ名と連絡先メールアドレスの詳細を入力します。
- カテゴリーで「 Apps for Pages 」を選択します。
- 「 アプリIDの作成 」をクリックしてください。
5.アプリのダッシュボードに移動します。 サイドバーで、[ +製品の追加 ]に移動し、[ はじめに ]ボタンをクリックして[ メッセンジャー ]を選択します。
6. [ Webフックの設定]を選択します 。
7.「コールバックURL」をHerokuアプリケーションのURL、「検証トークン」をindex.jsファイルで使用されているトークンに置き換えて、必要なフィールドに入力し、次の「サブスクリプションフィールド」を選択します。
- message_deliveries
- メッセージ
- message_optins
- messaging_postbacks
注： FacebookがURLをpingしようとしたときにindex.jsが必要な関数を実行するように、コールバックURLに必ず「 / webhook 」を追加してください。「トークンの検証」を検証できます。
8. [ 確認して保存]をクリックします 。
9. [ トークン生成 ]セクションの[ ページの選択 ]をクリックして、先ほど作成したページを選択します。
これは「 Page Access Token 」を生成し、それをどこかに保存します。 後で必要になります。
10.次に、最後の手順で生成したページアクセストークンを使用して、アプリに対してPOSTクエリを実行する必要があります。 これはターミナルで簡単にできます。 次のコマンドを実行して、 PAGE_ACCESS_TOKENを生成したページアクセストークンに置き換えます 。
curl -X POST“ //graph.facebook.com/v2.6/me/subscribed_apps?access_token=PAGE_ACCESS_TOKEN”
ターミナルに「 成功 」の応答があります。
Herokuのその他の設定
ええ、まだ完了していません。 ほとんどありません。
1. HerokuのWebサイトにアクセスして、自分のEメールIDでログインします。
2.「ダッシュボード」でアプリを見つけてクリックします。
3.設定タブに移動します。
4. [ Reveal Config Vars]をクリックします。
5. PAGE_ACCESS_TOKENを「 config var 」として追加し、「 Add 」をクリックします。
実際のボットのコーディング
うんざりする作業を終えたので、本当に重要なこと、つまりボットをメッセージに応答させることに集中することができます。 はじめに、受信したメッセージを単純にエコーするボットを設計します。 結局のところ、この単純なタスクは機能するためにかなりの量のコードを必要とします。
1.メッセージリスナのコーディング
ボットがメッセージをエコーバックする前に、メッセージをリッスンできる必要があります。 それを最初にしましょう。
index.jsファイルに、次のコードを追加します。
[js]
app.post（ '/ webhook'、関数（req、res）{
var events = req.body.entry [0] .messaging;
for（i = 0; i <events.length; i ++）{
var event = events [i];
if（event.message && event.message.text）{
sendMessage（event.sender.id、{text： "Echo：" + event.message.text}）;
}
}
res.sendStatus（200）;
;））;
[/ js]
この機能は、受信したメッセージをチェックしてから、メッセージにテキストがあるかどうかをチェックします。 受信したメッセージ内にテキストが見つかった場合は、sendMessage（後述）関数を呼び出し、送信者のIDと返信するテキストを渡します。 次の値とその意味を理解することが重要です。
- event.message.textはメッセージで受信したテキストです。 たとえば、誰かが私たちのボットにメッセージ「こんにちは」を送信すると、event.message.textの値は「こんにちは」になります。
- event.sender.idは、ボットにメッセージを送信した人のIDです。 これは、ボットが誰に対応するかを知るために必要です。
2. sendMessage関数をコーディングする
これで“ sendMessage”関数をコーディングできます。
[js]
関数sendMessage（recipientId、メッセージ）{
要求（{
url： '//graph.facebook.com/v2.6/me/messages'、
qs：{access_token：process.env.PAGE_ACCESS_TOKEN}、
メソッド： 'POST'、
json：{
受信者：{id：recipientId}、
メッセージ：メッセージ、
}
関数（エラー、レスポンス、ボディ）{
if（エラー）{
console.log（ 'メッセージ送信エラー：'、エラー）;
そうでなければ（response.body.error）{
console.log（ 'エラー：'、response.body.error）;
}
;））;
;
[/ js]
“ sendMessage”関数は2つのパラメータを取ります。
- recipientId
- メッセージ
受信者IDは、メッセージを正しいユーザーに送信するために必要です。
メッセージは、レスポンスで送信される実際のテキストです。
3. Herokuへの変更を推進する
上記のステップを完了したら、あなたのボットは受け取ったテキストをエコーバックできるはずです。 しかし、最初に、Herokuでホストされているアプリケーションに変更をプッシュする必要があります。 これを行うには、以下の手順に従います。
1.ターミナルを起動します。
2.ディレクトリをtestbotディレクトリに変更します。
cdテストボット
3.以下の手順を実行します。
- git add。
- 注： 「git add」の最後に「。」があります。
- git commit -m“最初のコミット”
- git pushヒーロークマスター
4.今すぐあなたのページにメッセージを送ると、ボットはあなたにメッセージをエコーバックします。
ボットをよりスマートにするという条件付きの応答
テキストマッチングを使用して、Facebookのメッセンジャーボットが特定の特別なキーワードに従って応答できるようにすることができます。
これを達成するためには、我々は別の機能を追加する必要があります。 私はそれを「条件付き応答」と命名しています、しかしあなたはあなたが好むどんな名前でも選ぶことができます。
1.条件付き応答関数のコーディング
[js]
関数conditionalResponses（recipientId、text）{
text = text || "";
var what = text.match（/ what / gi）; //テキスト文字列に "what"という単語が含まれているかどうかを確認します。 大文字と小文字を区別しない
varGadget-Info.com = text.match（/ beebom / gi）; //テキスト文字列に単語「beebom」が含まれているかどうかを確認します。 大文字と小文字を区別しない
var who = text.match（/ who / gi）; //テキスト文字列に単語「who」が含まれているかどうかを確認します。 大文字と小文字を区別しない
var you = text.match（/ you / gi）; //テキスト文字列に "you"という単語が含まれているかどうかを確認します。 大文字と小文字を区別しない
//テキストに "what"と "beebom"の両方が含まれる場合は、次のようにします。
if（what！= null &&; Gadget-Info.com！= null）{
メッセージ= {
text： "Beebomはハイテクリソースを提供するウェブサイトです。ようこそ。"
}
sendMessage（recipientId、message）;
trueを返します。
}
//テキストに "who"と "you"の両方が含まれる場合は、次のようにします。
if（who！= null && you！= null）{
メッセージ= {
text： "私は自分の身元についてオンラインで議論しないように頼まれました。"
}
sendMessage（recipientId、message）;
trueを返します。
}
//何も一致しない場合は、falseを返して内部関数の実行を続行します。
falseを返します。
;
[/ js]
4行目から7行目で、受け取った文字列を特定の単語と照合することによって変数を定義しました。 “ text.match（）”を使用することについての最もよい部分はそれが正規表現（通常regexと呼ばれる、ここでもっと読む）を使うことです。 受信したテキスト内の単語の一部でさえtext.match（）で説明した単語のいずれかと一致する限り、変数はnullにならないことを意味するので、これは私たちにとって良いことです。 つまり、受信したメッセージが「What's Beebom？」の場合、「var what」および「var beebom」はnullにはなりません。これは、「What's」という語に「what」という語が含まれているためです。 ですから、誰かが「What」と言っている可能性があるすべてのバリエーションに対して、余分なステートメントを作成しなくて済みます。
2.メッセージリスナの編集
また、コーディングしたMessage Listenerを編集して、受信したテキストが「conditionalResponses」関数と一致するようにする必要があります。
[js]
app.post（ '/ webhook'、関数（req、res）{
var events = req.body.entry [0] .messaging;
for（i = 0; i <events.length; i ++）{
var event = events [i];
if（event.message && event.message.text）{
//最初に、受信したメッセージが条件付き応答に適しているかどうかを確認します。
if（！conditionalResponses（event.sender.id、event.message.text））{
//そうでない場合は、受信したメッセージを送信者にエコーバックします。
sendMessage（event.sender.id、{text： "Echo：" + event.message.text}）;
}
}
}
res.sendStatus（200）;
;））;
[/ js]
リスナーの変化はそれほど劇的には見えないかもしれませんが、その効果は確かです。 リスナーは最初に条件付き応答で応答しようとしますが、受信したメッセージに有効な条件がない場合は、単純にメッセージをユーザーにエコーバックします。
3. Herokuへの変更を推進する
新機能を試す前に、更新されたコードをHerokuでホストされているアプリにプッシュする必要があります。 これを行うには、以下の手順に従ってください。
1.ターミナルを起動します。
2.ディレクトリをtestbotディレクトリに変更します。
cdテストボット
3.以下の手順を実行します。
- git add。
- 注： 「git add」の最後に「。」があります。
- git commit -m“条件付き機能の追加”
- git pushヒーロークマスター
4.今すぐあなたのページにメッセージを送ると、ボットはあなたにメッセージをエコーバックします。
さらに機能性
私たちのボットは、うまく構成された素晴らしい応答で、少数のコマンドに応答します。 しかし、それはまだあまり役に立ちません。 ボットをより「 機能的 」なソフトウェアにするために、コードをさらに変更しましょう。 私たちは多くの機能を刷新し、さらに2、3個を追加しますので、興奮してください。
1.メッセージリスナの編集
この段階では、私たちのメッセージリスナーは問題なく動作します。 しかし、あまり整形式ではなく、ネストしたifステートメントを増やして「 条件チェック 」を追加すると、すぐに見にくくなり、理解が難しくなり、実行が遅くなります。 私たちはそれを望んでいません、今、私たちは？ いくつか変更を加えましょう。
注：メッセージリスナーには「res.sendStatus（200）」というコード行があります。この行は、ステータス200のコードをFacebookに送信し、機能が正常に実行されたことを伝えます。 Facebookの文書によると、Facebookは、メッセージが通過しなかったと判断してコードの実行を停止する前に、最大20秒間待って200のステータスを受け取ります。
私たちの新しいメッセージリスナーはこんな感じです。 条件が一致し実行されるとすぐに関数の実行を停止するために“ res.sendStatus（200） ”コマンドを使用します。
[js]
app.post（ '/ webhook'、関数（req、res）{
var events = req.body.entry [0] .messaging;
for（i = 0; i <events.length; i ++）{
var event = events [i];
if（event.message && event.message.text）{
//最初にメッセージテキストをintroResponse条件と照合します
if（introResponse（event.sender.id、event.message.text））{
res.sendStatus（200）;
}
//より良い名前がないため、このnewResponseを呼び出しました。 次にチェックする
そうでなければ（newResponse（event.sender.id、event.message.text））{
res.sendStatus（200）;
}
//それ以外の場合は、元のメッセージをエコーバックする
その他{
// echoを有効なコマンドリストに置き換えます
sendMessage（event.sender.id、{text： "Echo：" + event.message.text}）;
}
}
}
res.sendStatus（200）;
;））;
[/ js]
2. newResponse関数をコーディングする
私たちのメッセージリスナーは、 「newResponse」の一連の条件に対してもメッセージテキストをチェックしますが、最初にnewResponse関数をコーディングする必要があります。 この機能を使用して、ユーザーがtheGadget-Info.com Webサイトから記事の提案を求めているかどうかを確認し、Webサイトでクエリ用語を検索して、ユーザーへのリンクを提示します。 ここでも、テキストと特定のキーワードを照合するために正規表現を使用します。
[js]
関数newResponse（recipientId、text）{
text = text || "";
var recommend = text.match（/ recommend / gi）;
var random = text.match（/ random / gi）;
var article = text.match（/ article / gi）;
var iphone = text.match（/ iphone / gi）;
var android = text.match（/ android / gi）;
var mac = text.match（/ mac / gi）;
var browser = text.match（/ browser / gi）;
var vpn = text.match（/ vpn / gi）;
//ユーザーが記事の提案を求めているかどうかを確認します
if（提案！= null && article！= null）{
var query = "";
//記事の候補が照会された場合は、ユーザーが探しているトピックを確認してください
if（android！= null）{
query = "Android";
そうでなければ（mac！= null）{
query = "Mac";
そうでなければ（iphone！= null）{
query = "iPhone";
そうでなければ（browser！= null）{
query = "ブラウザ";
そうでなければ（vpn！= null）{
query = "VPN";
}
sendButtonMessage（recipientId、query）;
真を返す
}
falseを返します。
;
[/ js]
ユーザーが記事の提案を求めている場合に備えて、メッセージを送信するために"sendButtonMessage"という別のカスタム関数を使用しています。 次に作成します。
3. sendButtonMessage関数のコーディング
sendButtonMessage関数は、 受信者IDとクエリの 2つのパラメータを取ります。 受信者IDはメッセージの送信先となるユーザーを識別するために使用され、クエリはユーザーが記事の提案を希望するトピックを識別するために使用されます。
[js]
関数sendButtonMessage（recipientId、query）{
var messageData = {
受信者：{
id：recipientId
、
メッセージ：{
添付ファイル：{
タイプ： "テンプレート"、
ペイロード：{
template_type： "ボタン"、
text： "これは私が見つけたものです" + query、
ボタン：[{
タイプ： "web_url"、
url： "//www.beebom.com/?s="+query、
title： "Beebom：" +クエリ
]]
}
}
}
;
callSendAPI（messageData）;
}
[/ js]
繰り返しになりますが、カスタム関数を使用しています。 今回は、記事リンクを含む最終メッセージをユーザーに送信します。 この関数は、多くの点で、先ほどコーディングした「sendMessage」関数に似ていますが、メッセージデータを受け取る方法がより一般的です。これは、ユーザーが行うクエリによってメッセージデータが変わるためです。
4. callSendAPI関数のコーディング
“ callSendAPI”関数は単一のパラメータ、 “ messageData”を取ります。 このパラメータは、メッセンジャーがそれをユーザーに適切に表示できるように、Facebookの規則に従って適切にフォーマットされたメッセージデータ全体を含みます。
[js]
関数callSendAPI（messageData）{
要求（{
uri： '//graph.facebook.com/v2.6/me/messages'、
qs：{access_token：process.env.PAGE_ACCESS_TOKEN}、
メソッド： 'POST'、
json：messageData
関数（エラー、レスポンス、ボディ）{
if（！error && response.statusCode == 200）{
var recipientId = body.recipient_id;
var messageId = body.message_id;
console.log（ "id％sの一般的なメッセージを受信者％sに送信しました"、、
messageId、recipientId）;
その他{
console.error（ "メッセージを送信できません。"）;
console.error（response）;
console.error（エラー）;
}
;））;
}
[/ js]
5. Herokuへの変更を推進する
アップグレードされたボットをライブにするための最後のステップです。 すべてのコード変更をHerokuにプッシュするだけです。 プロセスは以前と同じで、以下に概説されています。
1.ターミナルを起動します。
2.ディレクトリをtestbotディレクトリに変更します。
cdテストボット
3.以下を行います。
- git add。
- 注：そのコマンドの最後には「。」があります。
- git commit -m“条件チェックとフォーマットの改善”
- git pushヒーロークマスター
4.「Androidの記事を提案する」や「Beebom、Androidのトピックに関する記事を提案する」などのメッセージを送信します。 そしてボットはあなたがあなたの質問に関連した記事を開くためにあなたがタップすることができるリンクでうまくフォーマットされたメッセージを送るでしょう。
深く掘り下げる
Facebookメッセンジャーボットの開発を始める方法がわかったので、Facebookメッセンジャーボットの開発方法に関するFacebookのドキュメントを調べます。 ドキュメンテーションは初心者には向いていませんが、あなたはもう初心者ではありません。 あなたは公式文書をチェックして、あなたのボットをさらに賢くする方法を見つけ出すように試みるべきです。 ティーザー：画像とボタンでメッセージを送ることもできます！ Wit.aiやApi.aiなどのサービスを使用してボットをコード化してからFacebookに統合することもできますが、これらのサービスを使用しようとすると、Wit.aiはあまりうまく機能しません。Api.ai初心者のための鋭い学習曲線を持っています。
Facebookメッセンジャーボットを開発したことがありますか。 あなたが持っているなら、どのようにしてそれを開発しましたか、そしてそれは何ができますか？ ボットの作成にWit.aiやApi.aiなどのサービスを使用しましたか？ ボットのコーディングを試したことがない場合は、自分のFacebookメッセンジャーボットを開発し、よりスマートで優れたものにし、以下のコメントであなたの経験についてお知らせください。
