ジャスト30分！FBメッセンジャーbotをとりあえず作ってみる手順まとめ

先日の記事でLINE bot 作ってみたばかりですが、今度はFacebookからもbotのAPIが提供されました。

ワタクシの予測では追いつかないくらいのスピードで世の中はbot戦国時代に突入している様子。時代に遅れてなるものかということで早速Facebookのbotも検証してみます！

1.Facebook開発者登録

Facebookのアプリを作るためにはまず、開発者登録する必要があります。

とりあえずFacebook開発者ページから開発者登録を行いましょう。

＞＞Facebook開発者ページ

2.Facebookページ、アプリの作成

Messanger botを利用するには実際に会話をするための顔となる『Facebookページ』、それから会話エンジンと通信する為の『Facebookアプリ』が必要になります。

なんだか面倒くさそうですが、正味10分もあれば終わるのでサクッといきましょう。

2-1.Facebookページの作成

Facebookページの作成はアカウントのメニューかサイドナビにも「Facebookページを作成する」リンクがあるのでそちから。

ジャンルを選んで必要事項を入力していきます。

メッセンジャーに名前として出てくるページ名と顔写真はしっかり入れておきましょう。

2-2.Facebookアプリの作成

Facebookアプリの作成は開発者ページから行っていきます。

上部のアカウントメニューに「新しいアプリを追加する」リンクがあるのでここをクリック ⇒ 最初にプラットフォームを選ぶ画面がありますがここは「basic setup」のリンクをクリックしてスキップしましょう。

アプリの名前や連絡先を入れてアプリを作成します。

2-3.Messengerの有効化とアクセストークンの取得

アプリの設定画面ではMessengerの項目を選んでMessengerプラットフォームを有効化します。

サイドメニューの下のほうにあるやつをクリック。

すると、以下のようなプラットフォーム作成ウィザードに入ります。

Messengerプラットフォームを有効化したら、トークン生成の箇所で紐づけるFacebookページを指定してページアクセストークンをメモしておきましょう。

3.適当なサーバーを用意する

さて、そして今回もおなじみ、無料でサッとサーバー環境を利用できる、我らがherokuを使わせていただきましょう。

https://www.heroku.com/

フォームにしたがって必要情報を入力。アカウントを作成したらいよいよセットアップです。

4.サーバーアプリをセットアップする

今回は（LINEの時も利用させていただいたので今回“も”ですが）tmtyskさんが公開されているスターターキットを利用させてもらいます。

以下のリンクをクリックしページ中の「Deploy to Heroku」を押すとセットアップされます。

＞＞これからPHPでFacebook Messenger Botづくりを始める人向けの簡易スターターキット

セットアップ時に手順2-3でメモしたトークンを「FACEBOOK_PAGE_ACCESS_TOKEN」に入れます。

※「FACEBOOK_PAGE_VERIFY_TOKEN」は適当な文字列を入れてください。

また、herokuに登録した「App Name」「FACEBOOK_PAGE_VERIFY_TOKEN」をメモしておいてください。

5.Facebookアプリにサーバーの設定を入れる

FacebookアプリのMessengerページに戻り「Webhooks」の設定を入れます。

• コールバックURLに「https://［4でメモしたApp Name］.herokuapp.com/callbac」
• トークンを確認の箇所に「4でメモしたFACEBOOK_PAGE_VERIFY_TOKEN」を入れる。
• フォロー入力欄は「Messages」にチェックを入れる

6.FACEBOOK APIからアプリを登録にする

ターミナルからPOSTすることでアプリが登録されます。

curl -ik -X POST "https://graph.facebook.com/v2.6/me/subscribed_apps?access_token=［ページアクセストークン］"


Windowsはcurlが入っていませんのでダウンロードページからWindows版のcurlをダウンロードし、PowerShellなどから.exeをつけて実行しましょう。

curl.exe -ik -X POST "https://graph.facebook.com/v2.6/me/subscribed_apps?access_token=［ページアクセストークン］"


＞＞cURLのダウンロードページ

7.完成です

反映が完了したら実際にFacebookページのメッセージから話かけてみましょう。

入れた単語にたいして ~じゃないと返ってくれば成功です！

今回利用させてもらったサーバーアプリはソースコードが公開されていますので、時間があれば web/index.php を自分の好みの内容に修正してみましょう。

＞＞fbmessengerbot-test

やってみたまとめ

今回もLINEのbotと同様にサクッと実装してみました。

手順自体に大差はないので、LINEでもFacebookでも実際に自サイトを利用しているユーザーを想像しながら最適なコミュニケーションを考えたいですね。