↩ テクノロジーネットワーキング非公開: Facebook メッセンジャーボットの開発方法 (ガイド)

Facebook メッセンジャーボットの開発方法 (ガイド)

Facebook の「メッセンジャーボット」機能は新しいものではなく、多くの素晴らしいボットがすでに存在しています。ただし、独自のボットを正確に構築する方法に関するリソースは不足しており、Facebook Graph API を初めて使用する人に対する説明が不足しています。メッセンジャーボットでは、SSL で保護された Webhook コールバック URL を使用する必要もあります (詳細は後ほど)。SSL の設定は誰にでもできるわけではなく、費用もかかります。

Facebook 自体のドキュメントの説明が不十分であるため、この記事では、単純な Facebook メッセンジャーボットを作成するプロセス全体を説明します。 https プロトコルを使用するクラウドアプリをセットアップし、Node.js (JavaScript、サーバー側言語) でボットをコーディングし、git を使用してコードをクラウドアプリケーションにプッシュし、Facebook Messenger でテストします。

コンテンツ 表示

ボットのセットアップ

ラップトップに Node がインストールされている必要があります。そうでない場合は、 Node Web サイトにアクセスしてダウンロードしてインストールします。

完了したら、ボットのセットアップを続行できます。以下の手順に従います。

1. ターミナルを起動します。

2. コードを保持するための別のディレクトリが必要です。

新しいディレクトリを作成する
mkdir testbot

作業ディレクトリを作成したばかりのディレクトリに変更します
cd testbot

facebook messenger bot create_and_cd_testbot_directory

3. 次に、Node アプリケーションを初期化します。
npm init

アプリケーションに関する情報の入力を求められますが、すべて Enter キーを押してデフォルトを使用します。

4. パッケージをインストールする
npm install express body-parser request --save

コマンドが実行され、いくつかの警告が表示されます。それらを無視してください。

facebook messenger bot npm_install_packages

5. Finder で、作成したディレクトリ「 testbot 」を開き、「 package.json 」という名前のファイルを見つけます。これをSublime Textなどのエディタで開きます。

6. このファイルに行を追加する必要があります
"start": "node index.js"

前の行の最後に「,」を追加することを忘れないでください。

facebook messenger bot package_json_edits

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’, function (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 で Webhook を作成するときに使用されるため、覚えておいてください。

Gitリポジトリの作成

ボットのコールバック処理を設定したので、コードを Heroku にプッシュする必要があります。そのためには、ディレクトリに git リポジトリを作成する必要があります。

注: 「git」は、ファイルとソフトウェアコードのバージョン管理システムです。詳細については、Wikipediaをご覧ください。

git リポジトリの作成は簡単で、ターミナルコマンドをいくつか実行するだけです。

注:ターミナルの「 testbot 」ディレクトリ内にいることを確認してください。これを行うには、ターミナルにコマンドpwdを入力します。

git リポジトリを作成するには、次の手順に従います。

1.git 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 (私の場合は Mac) 用のHeroku ツールベルトをインストールし、インストールします。これにより、ターミナル (Windows の場合はコマンドプロンプト) で Heroku にアクセスできるようになります。

次に、ボットのコード全体を保持するアプリを Heroku 上に作成します。以下の手順に従います。

1. ターミナルを起動します

2. heroku loginと入力します。

メールアドレスとパスワードの入力を求められます。

メールアドレスを入力して Enter キーを押します。次に、パスワードを入力して Enter キーを押します。

Heroku にログインします

3. heroku createと入力します。

これにより、Heraku 上にアプリが作成され、ハイパーリンクが提供されます。リンクは https プロトコルを使用していることに注意してください。簡単ですよね？

4. これで、アプリのコードを Heroku にプッシュできるようになりました
git push heroku master

5. これが完了すると、アプリは基本的に稼働し、ブラウザーでリンクにアクセスして、すべてが正常に動作していることを確認できます。「 This is TestBot Server 」という Web ページが開きます。

Facebookのセットアップ

ボットを Facebook に接続しましょう。新しい Facebook ページを作成するか、所有している既存の Facebook ページを使用する必要があります。 Facebookページを新規作成する手順を紹介します。

1. Facebook に移動し、新しいページを作成します。

必要なカテゴリのページを作成できます。特に理由はありませんが、会社/組織を選択しています。

2. Facebook が表示する次のステップはオプションであり、スキップできます。

3. 次に、 Facebook 開発者の Web サイトに移動します。

右上の「マイアプリ」の上にマウスを置き、ドロップダウンメニューから「新しいアプリの追加」をクリックします。

facebook messenger bot facebook developers new app

Facebook でプラットフォームの選択を求められたら、「基本セットアップ」をクリックします。

4. アプリ名と連絡先メールアドレスの詳細を入力します。

カテゴリから「 Apps for Pages 」を選択します。

「アプリIDの作成」をクリックします。

5. アプリのダッシュボードが表示されます。サイドバーで「 +製品の追加」に移動し、「開始する」ボタンをクリックして「メッセンジャー」を選択します。

6. 「 Webhook のセットアップ」を選択します。

7. 必須フィールドに入力し、「コールバック URL」を Heroku アプリの URL に置き換え、トークンの検証をindex.js ファイルで使用されているトークンに置き換え、次のサブスクリプションフィールドを選択します。

message_deliveries

メッセージ

メッセージオプトイン

メッセージング_ポストバック

注: Facebook が URL に ping を試みたときに、index.js が必要な関数を実行して「トークンの検証」を検証できるように、コールバック URL に必ず「 /webhook 」を追加してください。

8. 「確認して保存」をクリックします。

9. 「トークン生成」セクションで「ページの選択」をクリックし、前に作成したページを選択します。

これにより「ページアクセストークン」が生成され、どこかに保存されます。後で必要になります。

10. 次に、最後のステップで生成されたページアクセストークンを使用して、アプリへの POST クエリを作成する必要があります。これはターミナルで簡単に実行できます。次のコマンドを実行して、 PAGE_ACCESS_TOKEN を生成したページアクセストークンに置き換えます。

カール -X POST “https://graph.facebook.com/v2.6/me/subscribed_apps?access_token=PAGE_ACCESS_TOKEN”

ターミナルで「 success 」応答が返されるはずです。

Heroku のセットアップの詳細

はい、まだ終わっていません。ほとんどありません。

1. Heroku Web サイトにアクセスし、電子メール ID を使用してログインします。

2. 「ダッシュボード」でアプリを見つけてクリックします。

3. [設定] タブに移動します。

facebook messenger bot heroku app settings_

4. 「構成変数を表示」をクリックします。

5. PAGE_ACCESS_TOKEN を「 config var 」として追加し、「 Add 」をクリックします。

実際のボットのコーディング

単調な作業は終わったので、本当に重要なこと、つまりボットをメッセージに応答させることに集中できます。まず、受信したメッセージを単純にエコーするボットを設計します。結局のところ、この単純なタスクが機能するにはかなりの量のコードが必要です。

1.メッセージリスナーのコーディング

ボットがメッセージをエコーバックできるようにするには、事前にメッセージをリッスンできる必要があります。まずはそれをやってみましょう。

Index.js ファイルに次のコードを追加します。

[js]

app.post(‘/webhook’, function (req, res) {
var events = req.body.entry[0].messaging;
for (i = 0; i < events.length; i++) {
var イベント = イベント[i];
if (イベント.メッセージ && イベント.メッセージ.テキスト) {
sendMessage(event.sender.id, {text: “Echo: ” +event.message.text});
}
}
res.sendStatus(200);
});

[/js]

この関数は何を行うかというと、受信したメッセージをチェックし、メッセージにテキストが含まれているかどうかをチェックします。受信したメッセージ内にテキストが見つかった場合は、sendMessage (後述) 関数を呼び出し、送信者の ID と送り返すテキストを渡します。次の値とその意味を理解することが重要です。

event.message.text は、メッセージで受信したテキストです。たとえば、誰かがボットにメッセージ「Hello」を送信した場合、event.message.text の値は「Hello」になります。

event.sender.id は、ボットにメッセージを送信した人の ID です。これは、応答の宛先をボットが誰に宛てるべきかを認識するために必要です。

2. sendMessage 関数のコーディング

それでは、「sendMessage」関数をコーディングしてみましょう。

[js]

関数 sendMessage(recipientId, message) {
リクエスト（{
URL: ‘https://graph.facebook.com/v2.6/me/messages’,
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},
メソッド: ‘POST’、
json: {
受信者: {id: 受信者Id}、
メッセージ: メッセージ、
}
}, 関数(エラー、応答、本文) {
if (エラー) {
console.log(‘メッセージ送信エラー: ‘, error);
else if (response.body.error) {
console.log(‘エラー: ‘、response.body.error);
}
});
};

[/js]

「sendMessage」関数は 2 つのパラメータを取ります。

受信者ID

メッセージ

メッセージを正しいユーザーにアドレス指定できるようにするには、recipientId が必要です。

メッセージは、応答で送信される実際のテキストです。

3.変更を Heroku にプッシュする

上記の手順を完了すると、ボットは受信したテキストをエコーバックできるようになります。ただし、最初に、変更を Heroku でホストされているアプリケーションにプッシュする必要があります。これを行うには、以下の手順に従います。

1. ターミナルを起動します。

2. ディレクトリを testbot ディレクトリに変更します。
CD テストボット

3. 次の手順を実行します。

git add 。

注：「。」があります。「git add」の最後に

git commit -m “最初のコミット”

git Push Heroku マスター

4. ここでメッセージをページに送信すると、ボットがメッセージをエコーして返します。

条件付き応答、別名ボットをよりスマートにする

テキストマッチングを使用すると、Facebook メッセンジャーボットが特定の特別なキーワードに従って応答できるようになります。

これを実現するには、別の関数を追加する必要があります。ここでは「conditionalResponses」という名前を付けていますが、好きな名前を選択できます。

1.conditionalResponses 関数のコーディング

[js]

関数conditionalResponses(recipientId, text) {
テキスト = テキスト || “”;

var what = text.match(/what/gi); // テキスト文字列に「what」という単語が含まれているかどうかを確認します。大文字と小文字を区別しない
var = text.match(//gi); // テキスト文字列に「」という単語が含まれているかどうかを確認します。大文字と小文字を区別しない
var who = text.match(/who/gi); // テキスト文字列に「who」という単語が含まれているかどうかを確認します。大文字と小文字を区別しない
var you = text.match(/you/gi); // テキスト文字列に「you」という単語が含まれているかどうかを確認します。大文字と小文字を区別しない

//テキストに「what」と「」の両方が含まれている場合は、次のようにします。

if(what != null &&; != null) {
メッセージ = {
テキスト: 「は技術リソースを提供する Web サイトです。ようこそ。」
}
sendMessage(受信者ID, メッセージ);
true を返します。
}

//テキストに「誰」と「あなた」の両方が含まれている場合は、次のようにします。
if(誰 != null && あなた != null) {
メッセージ = {
テキスト: 「オンラインで自分の身元について話さないように頼まれました。」
}
sendMessage(受信者ID, メッセージ);
true を返します。
}

//何も一致しない場合は false を返し、内部関数の実行を続行します。
false を返します。
};

[/js]

4 行目から 7 行目では、受信した文字列と特定の単語の一致に応じて変数を定義しました。「text.match()」の使用の最も良い点は、正規表現 (通常は regex と呼ばれます。詳細はこちらを参照してください) を使用することです。これは、受信したテキスト内の単語の一部でも、text.match() で言及した単語のいずれかと一致する限り、変数は null にならないことを意味するため、これは良いことです。これは、受信したメッセージが「What’s ?」の場合、「What’s」という単語には「what」という単語が含まれるため、「var what」と「var 」は null にならないことを意味します。したがって、誰かが「What」と言う可能性のあるあらゆるバリエーションに対して追加のステートメントを作成する必要がなくなります。

2.メッセージリスナーの編集

また、コーディングしたメッセージリスナーを編集して、受信したテキストと「conditionalResponses」関数も照合するようにする必要があります。

[js]

app.post(‘/webhook’, function (req, res) {
var events = req.body.entry[0].messaging;
for (i = 0; i < events.length; i++) {
var イベント = イベント[i];
if (イベント.メッセージ && イベント.メッセージ.テキスト) {

//まず、受信したメッセージが条件付き応答の対象となるかどうかを確認してみます。
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 Heroku マスター

4. ここでメッセージをページに送信すると、ボットがメッセージをエコーして返します。

facebook messenger bot conditional responses

さらなる機能性

私たちのボットは、小規模なコマンドセットに対して、適切に構造化された応答で応答するようになりました。しかし、まだあまり役に立ちません。ボットをより「機能的な」ソフトウェアにするために、コードにさらに変更を加えてみましょう。私たちは多くの機能を改良し、さらにいくつかの機能を追加する予定ですので、楽しみにしていてください。

1.メッセージリスナーの編集

この段階では、メッセージリスナーは問題なく動作します。ただし、あまり適切にフォーマットされていないため、追加の「条件チェック」を追加するためにネストされた if ステートメントを増やし続けると、すぐに見苦しくなり、理解しにくくなり、実行が遅くなります。今はそんなことは望んでいませんよね？いくつか変更を加えてみましょう。

注:メッセージリスナーには、 「res.sendStatus(200)」というコード行があり、この行はステータス 200 コードを Facebook に送信し、関数が正常に実行されたことを伝えます。 Facebook のドキュメントによると、Facebook は 200 ステータスを受信するまで最大 20 秒待ってから、メッセージが送信されなかったと判断してコードの実行を停止します。

新しいメッセージリスナーは次のようになります。「 res.sendStatus(200) 」コマンドを使用して、条件が一致して実行されるとすぐに関数の実行を停止します。

[js]

app.post(‘/webhook’, function (req, res) {
var events = req.body.entry[0].messaging;
for (i = 0; i < events.length; i++) {
var イベント = イベント[i];
if (イベント.メッセージ && イベント.メッセージ.テキスト) {

//最初にメッセージテキストを introResponse 条件と照合してチェックします
if(introResponse(event.sender.id,event.message.text)) {
res.sendStatus(200);
}

//他に良い名前がなかったので、これを newResponse と呼びました :p;次にこれをチェックしてください
else if(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 関数をコーディングする必要があります。この機能を使用して、ユーザーが Web サイトから記事の提案を求めたかどうかを確認し、Web サイトでクエリ用語を検索し、ユーザーにリンクを提示します。もう一度、正規表現を使用してテキストを特定のキーワードと照合します。

[js]

function newResponse(recipientId, text) {
テキスト = テキスト || “”;
var assign = text.match(/suggest/gi);
var ランダム = text.match(/random/gi);
vararticle = text.match(/article/gi);
var iphone = text.match(/iphone/gi);
var android = text.match(/android/gi);
var mac = text.match(/mac/gi);
var ブラウザ = text.match(/browser/gi);
var vpn = text.match(/vpn/gi);

// ユーザーが記事の提案を求めているかどうかを確認します
if(提案 != null && 記事 != null) {
var クエリ = “”;
// 記事の提案が照会された場合、ユーザーが探しているトピックを確認します
if(アンドロイド != null) {
クエリ = “Android”;
else if (mac != null) {
クエリ = “Mac”;
else if (iphone != null) {
クエリ = “iPhone”;
else if (ブラウザ != null) {
クエリ = “ブラウザ”;
else if (vpn != null) {
クエリ = “VPN”;
}
sendButtonMessage(recipientId, クエリ);
trueを返す
}
false を返します。
};

[/js]

ユーザーが記事の提案を求めている場合に備えて、 「sendButtonMessage」という別のカスタム関数を使用してメッセージを送信します。次にこれを作成していきます。

3. sendButtonMessage 関数のコーディング

sendButtonMessage 関数は、受信者 IDとクエリの 2 つのパラメータを取ります。受信者 ID はメッセージの送信先となるユーザーを識別するために使用され、クエリはユーザーが記事の提案を必要とするトピックを識別するために使用されます。

[js]

関数 sendButtonMessage(recipientId, query) {
var messageData = {
受信者: {
id: 受信者ID
}、
メッセージ： {
添付ファイル: {
タイプ:「テンプレート」、
ペイロード: {
template_type: “ボタン”,
テキスト: 「これが私が見つけたものです」+クエリ、
ボタン:[{
タイプ: 「web_url」、
URL: “https://.com/?s=”+クエリ、
タイトル: “ビーボム: ” + クエリ
}]
}
}
}
};

callSendAPI(メッセージデータ);
}

[/js]

もう一度、カスタム関数を使用します。今回は、記事のリンクを含む最終メッセージをユーザーに送信します。この関数は多くの点で、以前にコーディングした「sendMessage」関数に似ていますが、メッセージデータを取得する方法がより汎用的であり、ユーザーが作成するクエリによってメッセージデータが変化するため、これは私たちに適しています。

4. callSendAPI 関数のコーディング

「callSendAPI」関数は単一パラメータ「messageData」を受け取ります。このパラメータには、Facebook ルールに従って適切にフォーマットされたメッセージデータ全体が含まれているため、メッセンジャーはそれをユーザーに適切に表示できます。

[js]

関数 callSendAPI(messageData) {
リクエスト（{
uri: ‘https://graph.facebook.com/v2.6/me/messages’,
qs: { access_token: process.env.PAGE_ACCESS_TOKEN },
メソッド: ‘POST’、
json: メッセージデータ

}, 関数 (エラー、応答、本文) {
if (!error &&response.statusCode == 200) {
varrecipientId = body.recipient_id;
var messageId = body.message_id;

console.log(“ID %s の汎用メッセージが受信者 %s に正常に送信されました”,
メッセージ ID、受信者 ID);
} それ以外 {
console.error(“メッセージを送信できません。”);
console.error(応答);
コンソール.エラー(エラー);
}
});
}

[/js]

5.変更を Heroku にプッシュする

私たちは、アップグレードされたボットを公開するための最終段階にいます。すべてのコード変更を Heroku にプッシュするだけです。プロセスは以前と同じであり、その概要は次のとおりです。

1. ターミナルを起動します。

2. ディレクトリをtestbotディレクトリに変更します。
CD テストボット

3. 次の手順を実行します。

git add 。

注： 「。」があります。そのコマンドの最後に。

git commit -m 「条件チェックとフォーマットの改善」

git Push Heroku マスター

4. 次に、「Android に関する記事を提案してください」または「、Android に関する記事を提案してください」などのメッセージを送信します。ボットは、タップするとクエリに関連する記事を開くことができるリンクを含む、適切にフォーマットされたメッセージを送信します。

関連記事: Facebook メッセンジャーで知っておくべき 16 のヒントとコツ

より深く掘り下げる

Facebook メッセンジャーボットの開発を開始する方法がわかったので、Facebook メッセンジャーボットの開発方法に関するFacebook のドキュメントを読んでください。このドキュメントは初心者には適していませんが、あなたはもう初心者ではありません。公式ドキュメントをチェックして、ボットをさらに賢くする方法を見つけてください。ティーザー: 画像やボタンを使用してメッセージを送信することもできます。 Wit.aiやApi.aiなどのサービスを使用してボットをコーディングし、Facebook と統合することも可能ですが、これらのサービスを使用しようとした私の弱々しい試みでは、Wit.ai はあまりうまく機能せず、Api.ai はうまく機能しませんでした。初心者にとっては学習曲線が早いです。

Facebook メッセンジャーボットを開発したことがありますか?持っている場合は、どのように開発して、何ができるようになったのでしょうか?ボットの作成に Wit.ai や Api.ai などのサービスを使用しましたか?ボットのコーディングを実際に試したことがない場合は、独自の Facebook メッセンジャーボットを開発し、よりスマートで優れたものにして、以下のコメントであなたの経験を教えてください。

「Facebook メッセンジャーボットの開発方法 (ガイド)」についてわかりやすく解説！絶対に観るべきベスト2動画

Facebookメッセンジャーボット、無料制作ツールの選び方

https://www.youtube-nocookie.com/watch?v=sQfnFDg6B7U&pp=ygVJRmFjZWJvb2sg44Oh44OD44K744Oz44K444Oj44O8IOODnOODg-ODiOOBrumWi-eZuuaWueazlSAo44Ks44Kk44OJKSZobD1KQQ%3D%3D

Facebookメッセンジャーボット、無料制作ツールの選び方 (https://www.youtube-nocookie.com/watch?v=sQfnFDg6B7U&pp=ygVJRmFjZWJvb2sg44Oh44OD44K744Oz44K444Oj44O8IOODnOODg-ODiOOBrumWi-eZuuaWueazlSAo44Ks44Kk44OJKSZobD1KQQ%3D%3D)

Facebookの使い方｜初心者向けフェイスブック入門講座【10分でFacebookをマスター！】

https://www.youtube-nocookie.com/watch?v=qq25qUrINmA&pp=ygVJRmFjZWJvb2sg44Oh44OD44K744Oz44K444Oj44O8IOODnOODg-ODiOOBrumWi-eZuuaWueazlSAo44Ks44Kk44OJKSZobD1KQQ%3D%3D

Facebookの使い方｜初心者向けフェイスブック入門講座【10分でFacebookをマスター！】 (https://www.youtube-nocookie.com/watch?v=qq25qUrINmA&pp=ygVJRmFjZWJvb2sg44Oh44OD44K744Oz44K444Oj44O8IOODnOODg-ODiOOBrumWi-eZuuaWueazlSAo44Ks44Kk44OJKSZobD1KQQ%3D%3D)

ネットワーキング

Facebook の「メッセンジャーボット」機能は新しいものではなく、多くの素晴らしいボットがすでに存在しています。ただし、独自のボットを正確に構築する方法に関するリソースは不足しており、Facebook Graph API を初めて使用する人に対する説明が不足しています。メッセンジャーボットでは、SSL で保護された Webhook コールバック URL を使用する必要もあります (詳細は後ほど)。SSL の設定は誰にでもできるわけではなく、費用もかかります。

Facebook 自体のドキュメントの説明が不十分であるため、この記事では、単純な Facebook メッセンジャーボットを作成するプロセス全体を説明します。 https プロトコルを使用するクラウドアプリをセットアップし、Node.js (JavaScript、サーバー側言語) でボットをコーディングし、git を使用してコードをクラウドアプリケーションにプッシュし、Facebook Messenger でテストします。

コンテンツ 表示

ボットのセットアップ

ラップトップに Node がインストールされている必要があります。そうでない場合は、 Node Web サイトにアクセスしてダウンロードしてインストールします。

完了したら、ボットのセットアップを続行できます。以下の手順に従います。

1. ターミナルを起動します。

2. コードを保持するための別のディレクトリが必要です。

新しいディレクトリを作成する
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’, function (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 で Webhook を作成するときに使用されるため、覚えておいてください。

Gitリポジトリの作成

ボットのコールバック処理を設定したので、コードを Heroku にプッシュする必要があります。そのためには、ディレクトリに git リポジトリを作成する必要があります。

注: 「git」は、ファイルとソフトウェアコードのバージョン管理システムです。詳細については、Wikipediaをご覧ください。

git リポジトリの作成は簡単で、ターミナルコマンドをいくつか実行するだけです。

注:ターミナルの「 testbot 」ディレクトリ内にいることを確認してください。これを行うには、ターミナルにコマンドpwdを入力します。

git リポジトリを作成するには、次の手順に従います。

1.git 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 (私の場合は Mac) 用のHeroku ツールベルトをインストールし、インストールします。これにより、ターミナル (Windows の場合はコマンドプロンプト) で Heroku にアクセスできるようになります。

次に、ボットのコード全体を保持するアプリを Heroku 上に作成します。以下の手順に従います。

1. ターミナルを起動します

2. heroku loginと入力します。

メールアドレスとパスワードの入力を求められます。

メールアドレスを入力して Enter キーを押します。次に、パスワードを入力して Enter キーを押します。

Heroku にログインします

3. heroku createと入力します。

これにより、Heraku 上にアプリが作成され、ハイパーリンクが提供されます。リンクは https プロトコルを使用していることに注意してください。簡単ですよね？

4. これで、アプリのコードを Heroku にプッシュできるようになりました
git push heroku master

5. これが完了すると、アプリは基本的に稼働し、ブラウザーでリンクにアクセスして、すべてが正常に動作していることを確認できます。「 This is TestBot Server 」という Web ページが開きます。

Facebookのセットアップ

ボットを Facebook に接続しましょう。新しい Facebook ページを作成するか、所有している既存の Facebook ページを使用する必要があります。 Facebookページを新規作成する手順を紹介します。

1. Facebook に移動し、新しいページを作成します。

必要なカテゴリのページを作成できます。特に理由はありませんが、会社/組織を選択しています。

2. Facebook が表示する次のステップはオプションであり、スキップできます。

3. 次に、 Facebook 開発者の Web サイトに移動します。

右上の「マイアプリ」の上にマウスを置き、ドロップダウンメニューから「新しいアプリの追加」をクリックします。

Facebook でプラットフォームの選択を求められたら、「基本セットアップ」をクリックします。

4. アプリ名と連絡先メールアドレスの詳細を入力します。

カテゴリから「 Apps for Pages 」を選択します。

「アプリIDの作成」をクリックします。

5. アプリのダッシュボードが表示されます。サイドバーで「 +製品の追加」に移動し、「開始する」ボタンをクリックして「メッセンジャー」を選択します。

6. 「 Webhook のセットアップ」を選択します。

7. 必須フィールドに入力し、「コールバック URL」を Heroku アプリの URL に置き換え、トークンの検証をindex.js ファイルで使用されているトークンに置き換え、次のサブスクリプションフィールドを選択します。

message_deliveries

メッセージ

メッセージオプトイン

メッセージング_ポストバック

注: Facebook が URL に ping を試みたときに、index.js が必要な関数を実行して「トークンの検証」を検証できるように、コールバック URL に必ず「 /webhook 」を追加してください。

8. 「確認して保存」をクリックします。

9. 「トークン生成」セクションで「ページの選択」をクリックし、前に作成したページを選択します。

これにより「ページアクセストークン」が生成され、どこかに保存されます。後で必要になります。

10. 次に、最後のステップで生成されたページアクセストークンを使用して、アプリへの POST クエリを作成する必要があります。これはターミナルで簡単に実行できます。次のコマンドを実行して、 PAGE_ACCESS_TOKEN を生成したページアクセストークンに置き換えます。

カール -X POST “https://graph.facebook.com/v2.6/me/subscribed_apps?access_token=PAGE_ACCESS_TOKEN”

ターミナルで「 success 」応答が返されるはずです。

Heroku のセットアップの詳細

はい、まだ終わっていません。ほとんどありません。

1. Heroku Web サイトにアクセスし、電子メール ID を使用してログインします。

2. 「ダッシュボード」でアプリを見つけてクリックします。

3. [設定] タブに移動します。

4. 「構成変数を表示」をクリックします。

5. PAGE_ACCESS_TOKEN を「 config var 」として追加し、「 Add 」をクリックします。

実際のボットのコーディング

単調な作業は終わったので、本当に重要なこと、つまりボットをメッセージに応答させることに集中できます。まず、受信したメッセージを単純にエコーするボットを設計します。結局のところ、この単純なタスクが機能するにはかなりの量のコードが必要です。

1.メッセージリスナーのコーディング

ボットがメッセージをエコーバックできるようにするには、事前にメッセージをリッスンできる必要があります。まずはそれをやってみましょう。

Index.js ファイルに次のコードを追加します。

[js]

app.post(‘/webhook’, function (req, res) {
var events = req.body.entry[0].messaging;
for (i = 0; i < events.length; i++) {
var イベント = イベント[i];
if (イベント.メッセージ && イベント.メッセージ.テキスト) {
sendMessage(event.sender.id, {text: “Echo: ” +event.message.text});
}
}
res.sendStatus(200);
});

[/js]

この関数は何を行うかというと、受信したメッセージをチェックし、メッセージにテキストが含まれているかどうかをチェックします。受信したメッセージ内にテキストが見つかった場合は、sendMessage (後述) 関数を呼び出し、送信者の ID と送り返すテキストを渡します。次の値とその意味を理解することが重要です。

event.message.text は、メッセージで受信したテキストです。たとえば、誰かがボットにメッセージ「Hello」を送信した場合、event.message.text の値は「Hello」になります。

event.sender.id は、ボットにメッセージを送信した人の ID です。これは、応答の宛先をボットが誰に宛てるべきかを認識するために必要です。

2. sendMessage 関数のコーディング

それでは、「sendMessage」関数をコーディングしてみましょう。

[js]

関数 sendMessage(recipientId, message) {
リクエスト（{
URL: ‘https://graph.facebook.com/v2.6/me/messages’,
qs: {access_token: process.env.PAGE_ACCESS_TOKEN},
メソッド: ‘POST’、
json: {
受信者: {id: 受信者Id}、
メッセージ: メッセージ、
}
}, 関数(エラー、応答、本文) {
if (エラー) {
console.log(‘メッセージ送信エラー: ‘, error);
else if (response.body.error) {
console.log(‘エラー: ‘、response.body.error);
}
});
};

[/js]

「sendMessage」関数は 2 つのパラメータを取ります。

受信者ID

メッセージ

メッセージを正しいユーザーにアドレス指定できるようにするには、recipientId が必要です。

メッセージは、応答で送信される実際のテキストです。

3.変更を Heroku にプッシュする

上記の手順を完了すると、ボットは受信したテキストをエコーバックできるようになります。ただし、最初に、変更を Heroku でホストされているアプリケーションにプッシュする必要があります。これを行うには、以下の手順に従います。

1. ターミナルを起動します。

2. ディレクトリを testbot ディレクトリに変更します。
CD テストボット

3. 次の手順を実行します。

git add 。

注：「。」があります。「git add」の最後に

git commit -m “最初のコミット”

git Push Heroku マスター

4. ここでメッセージをページに送信すると、ボットがメッセージをエコーして返します。

条件付き応答、別名ボットをよりスマートにする

テキストマッチングを使用すると、Facebook メッセンジャーボットが特定の特別なキーワードに従って応答できるようになります。

これを実現するには、別の関数を追加する必要があります。ここでは「conditionalResponses」という名前を付けていますが、好きな名前を選択できます。

1.conditionalResponses 関数のコーディング

[js]

関数conditionalResponses(recipientId, text) {
テキスト = テキスト || “”;

var what = text.match(/what/gi); // テキスト文字列に「what」という単語が含まれているかどうかを確認します。大文字と小文字を区別しない
var = text.match(//gi); // テキスト文字列に「」という単語が含まれているかどうかを確認します。大文字と小文字を区別しない
var who = text.match(/who/gi); // テキスト文字列に「who」という単語が含まれているかどうかを確認します。大文字と小文字を区別しない
var you = text.match(/you/gi); // テキスト文字列に「you」という単語が含まれているかどうかを確認します。大文字と小文字を区別しない

//テキストに「what」と「」の両方が含まれている場合は、次のようにします。

if(what != null &&; != null) {
メッセージ = {
テキスト: 「は技術リソースを提供する Web サイトです。ようこそ。」
}
sendMessage(受信者ID, メッセージ);
true を返します。
}

//テキストに「誰」と「あなた」の両方が含まれている場合は、次のようにします。
if(誰 != null && あなた != null) {
メッセージ = {
テキスト: 「オンラインで自分の身元について話さないように頼まれました。」
}
sendMessage(受信者ID, メッセージ);
true を返します。
}

//何も一致しない場合は false を返し、内部関数の実行を続行します。
false を返します。
};

[/js]

4 行目から 7 行目では、受信した文字列と特定の単語の一致に応じて変数を定義しました。「text.match()」の使用の最も良い点は、正規表現 (通常は regex と呼ばれます。詳細はこちらを参照してください) を使用することです。これは、受信したテキスト内の単語の一部でも、text.match() で言及した単語のいずれかと一致する限り、変数は null にならないことを意味するため、これは良いことです。これは、受信したメッセージが「What’s ?」の場合、「What’s」という単語には「what」という単語が含まれるため、「var what」と「var 」は null にならないことを意味します。したがって、誰かが「What」と言う可能性のあるあらゆるバリエーションに対して追加のステートメントを作成する必要がなくなります。

2.メッセージリスナーの編集

また、コーディングしたメッセージリスナーを編集して、受信したテキストと「conditionalResponses」関数も照合するようにする必要があります。

[js]

app.post(‘/webhook’, function (req, res) {
var events = req.body.entry[0].messaging;
for (i = 0; i < events.length; i++) {
var イベント = イベント[i];
if (イベント.メッセージ && イベント.メッセージ.テキスト) {

//まず、受信したメッセージが条件付き応答の対象となるかどうかを確認してみます。
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 Heroku マスター

4. ここでメッセージをページに送信すると、ボットがメッセージをエコーして返します。

さらなる機能性

私たちのボットは、小規模なコマンドセットに対して、適切に構造化された応答で応答するようになりました。しかし、まだあまり役に立ちません。ボットをより「機能的な」ソフトウェアにするために、コードにさらに変更を加えてみましょう。私たちは多くの機能を改良し、さらにいくつかの機能を追加する予定ですので、楽しみにしていてください。

1.メッセージリスナーの編集

この段階では、メッセージリスナーは問題なく動作します。ただし、あまり適切にフォーマットされていないため、追加の「条件チェック」を追加するためにネストされた if ステートメントを増やし続けると、すぐに見苦しくなり、理解しにくくなり、実行が遅くなります。今はそんなことは望んでいませんよね？いくつか変更を加えてみましょう。

注:メッセージリスナーには、 「res.sendStatus(200)」というコード行があり、この行はステータス 200 コードを Facebook に送信し、関数が正常に実行されたことを伝えます。 Facebook のドキュメントによると、Facebook は 200 ステータスを受信するまで最大 20 秒待ってから、メッセージが送信されなかったと判断してコードの実行を停止します。

新しいメッセージリスナーは次のようになります。「 res.sendStatus(200) 」コマンドを使用して、条件が一致して実行されるとすぐに関数の実行を停止します。

[js]

app.post(‘/webhook’, function (req, res) {
var events = req.body.entry[0].messaging;
for (i = 0; i < events.length; i++) {
var イベント = イベント[i];
if (イベント.メッセージ && イベント.メッセージ.テキスト) {

//最初にメッセージテキストを introResponse 条件と照合してチェックします
if(introResponse(event.sender.id,event.message.text)) {
res.sendStatus(200);
}

//他に良い名前がなかったので、これを newResponse と呼びました :p;次にこれをチェックしてください
else if(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 関数をコーディングする必要があります。この機能を使用して、ユーザーが Web サイトから記事の提案を求めたかどうかを確認し、Web サイトでクエリ用語を検索し、ユーザーにリンクを提示します。もう一度、正規表現を使用してテキストを特定のキーワードと照合します。

[js]

function newResponse(recipientId, text) {
テキスト = テキスト || “”;
var assign = text.match(/suggest/gi);
var ランダム = text.match(/random/gi);
vararticle = text.match(/article/gi);
var iphone = text.match(/iphone/gi);
var android = text.match(/android/gi);
var mac = text.match(/mac/gi);
var ブラウザ = text.match(/browser/gi);
var vpn = text.match(/vpn/gi);

// ユーザーが記事の提案を求めているかどうかを確認します
if(提案 != null && 記事 != null) {
var クエリ = “”;
// 記事の提案が照会された場合、ユーザーが探しているトピックを確認します
if(アンドロイド != null) {
クエリ = “Android”;
else if (mac != null) {
クエリ = “Mac”;
else if (iphone != null) {
クエリ = “iPhone”;
else if (ブラウザ != null) {
クエリ = “ブラウザ”;
else if (vpn != null) {
クエリ = “VPN”;
}
sendButtonMessage(recipientId, クエリ);
trueを返す
}
false を返します。
};

[/js]

ユーザーが記事の提案を求めている場合に備えて、 「sendButtonMessage」という別のカスタム関数を使用してメッセージを送信します。次にこれを作成していきます。

3. sendButtonMessage 関数のコーディング

sendButtonMessage 関数は、受信者 IDとクエリの 2 つのパラメータを取ります。受信者 ID はメッセージの送信先となるユーザーを識別するために使用され、クエリはユーザーが記事の提案を必要とするトピックを識別するために使用されます。

[js]

関数 sendButtonMessage(recipientId, query) {
var messageData = {
受信者: {
id: 受信者ID
}、
メッセージ： {
添付ファイル: {
タイプ:「テンプレート」、
ペイロード: {
template_type: “ボタン”,
テキスト: 「これが私が見つけたものです」+クエリ、
ボタン:[{
タイプ: 「web_url」、
URL: “https://.com/?s=”+クエリ、
タイトル: “ビーボム: ” + クエリ
}]
}
}
}
};

callSendAPI(メッセージデータ);
}

[/js]

もう一度、カスタム関数を使用します。今回は、記事のリンクを含む最終メッセージをユーザーに送信します。この関数は多くの点で、以前にコーディングした「sendMessage」関数に似ていますが、メッセージデータを取得する方法がより汎用的であり、ユーザーが作成するクエリによってメッセージデータが変化するため、これは私たちに適しています。

4. callSendAPI 関数のコーディング

「callSendAPI」関数は単一パラメータ「messageData」を受け取ります。このパラメータには、Facebook ルールに従って適切にフォーマットされたメッセージデータ全体が含まれているため、メッセンジャーはそれをユーザーに適切に表示できます。

[js]

関数 callSendAPI(messageData) {
リクエスト（{
uri: ‘https://graph.facebook.com/v2.6/me/messages’,
qs: { access_token: process.env.PAGE_ACCESS_TOKEN },
メソッド: ‘POST’、
json: メッセージデータ

}, 関数 (エラー、応答、本文) {
if (!error &&response.statusCode == 200) {
varrecipientId = body.recipient_id;
var messageId = body.message_id;

console.log(“ID %s の汎用メッセージが受信者 %s に正常に送信されました”,
メッセージ ID、受信者 ID);
} それ以外 {
console.error(“メッセージを送信できません。”);
console.error(応答);
コンソール.エラー(エラー);
}
});
}

[/js]

5.変更を Heroku にプッシュする

私たちは、アップグレードされたボットを公開するための最終段階にいます。すべてのコード変更を Heroku にプッシュするだけです。プロセスは以前と同じであり、その概要は次のとおりです。

1. ターミナルを起動します。

2. ディレクトリをtestbotディレクトリに変更します。
CD テストボット

3. 次の手順を実行します。

git add 。

注： 「。」があります。そのコマンドの最後に。

git commit -m 「条件チェックとフォーマットの改善」

git Push Heroku マスター

4. 次に、「Android に関する記事を提案してください」または「、Android に関する記事を提案してください」などのメッセージを送信します。ボットは、タップするとクエリに関連する記事を開くことができるリンクを含む、適切にフォーマットされたメッセージを送信します。

関連記事: Facebook メッセンジャーで知っておくべき 16 のヒントとコツ

より深く掘り下げる

Facebook メッセンジャーボットの開発を開始する方法がわかったので、Facebook メッセンジャーボットの開発方法に関するFacebook のドキュメントを読んでください。このドキュメントは初心者には適していませんが、あなたはもう初心者ではありません。公式ドキュメントをチェックして、ボットをさらに賢くする方法を見つけてください。ティーザー: 画像やボタンを使用してメッセージを送信することもできます。 Wit.aiやApi.aiなどのサービスを使用してボットをコーディングし、Facebook と統合することも可能ですが、これらのサービスを使用しようとした私の弱々しい試みでは、Wit.ai はあまりうまく機能せず、Api.ai はうまく機能しませんでした。初心者にとっては学習曲線が早いです。

Facebook メッセンジャーボットを開発したことがありますか?持っている場合は、どのように開発して、何ができるようになったのでしょうか?ボットの作成に Wit.ai や Api.ai などのサービスを使用しましたか?ボットのコーディングを実際に試したことがない場合は、独自の Facebook メッセンジャーボットを開発し、よりスマートで優れたものにして、以下のコメントであなたの経験を教えてください。

「Facebook メッセンジャーボットの開発方法 (ガイド)」についてわかりやすく解説！絶対に観るべきベスト2動画

Facebookメッセンジャーボット、無料制作ツールの選び方

https://www.youtube-nocookie.com/watch?v=sQfnFDg6B7U&pp=ygVJRmFjZWJvb2sg44Oh44OD44K744Oz44K444Oj44O8IOODnOODg-ODiOOBrumWi-eZuuaWueazlSAo44Ks44Kk44OJKSZobD1KQQ%3D%3D

Facebookメッセンジャーボット、無料制作ツールの選び方 (https://www.youtube-nocookie.com/watch?v=sQfnFDg6B7U&pp=ygVJRmFjZWJvb2sg44Oh44OD44K744Oz44K444Oj44O8IOODnOODg-ODiOOBrumWi-eZuuaWueazlSAo44Ks44Kk44OJKSZobD1KQQ%3D%3D)

Facebookの使い方｜初心者向けフェイスブック入門講座【10分でFacebookをマスター！】

https://www.youtube-nocookie.com/watch?v=qq25qUrINmA&pp=ygVJRmFjZWJvb2sg44Oh44OD44K744Oz44K444Oj44O8IOODnOODg-ODiOOBrumWi-eZuuaWueazlSAo44Ks44Kk44OJKSZobD1KQQ%3D%3D

Facebookの使い方｜初心者向けフェイスブック入門講座【10分でFacebookをマスター！】 (https://www.youtube-nocookie.com/watch?v=qq25qUrINmA&pp=ygVJRmFjZWJvb2sg44Oh44OD44K744Oz44K444Oj44O8IOODnOODg-ODiOOBrumWi-eZuuaWueazlSAo44Ks44Kk44OJKSZobD1KQQ%3D%3D)

ネットワーキング