もふもふ技術部

IT技術系mofmofメディア

最終更新日

Ruby,SinatraでFacebook Botを作ってみる

Facebook Bot Ruby chat bot Sinatra

今mofmof inc.でチャットbotサービスのMy-opeというものを開発をしていまして、Facebook Botとしても使えるようにしたいなーと思って試してみました。パッとみたところグループチャットには対応していないのかな。グループで使いたかったんだけどなー。

このあたりを参考にさせていただきました。

手順

Facebookアプリのクイックスタートを開きます。Botを作るにはWEBサイトという形で良いみたい。

https://developers.facebook.com/quickstarts/?platform=web9

新しくアプリを作るので、「Create a New App ID」を選択して適当な名前をつける。「Site URL」にはとりあえず適当に自社のURLでも入れておいた。「Next」を押すと色々出てくるが、Next StrepsのShareとかLoginとかSocial Plugins Adsとかは無視して「Skip to Developer Dashboard」を選択してdeveloper dashboardへひとっ飛びする。

nextsteps

ダッシュボード画面はこちら

dashboard

「製品を追加」から、「Messenger」を選択し、次にメッセージを受けた時に処理するURLを指定するために「Setup Webhooks」を選択。新しくサーバサイドの環境立てるの面倒だったので、以前LINE botを試した時のHerokuアプリをそのまま使っちゃいます。

コールバックURLはhttps必須。URL登録時に実際にリクエストしてレスポンスの内容で検証しているため、サーバ側に下記のコードを実装(Ruby x Sinatra)し、HerokuアプリのHostと/facebook/callbackを入力。は画面で入力したvalidation tokenです。

main.rb

get '/facebook/callback' do
  if params["hub.verify_token"] != "<VALIDATION TOKEN>"
     return "Error, wrong validation token"
   end
   params["hub.challenge"]
end

Setup Webhooksが正しく登録出来ればOK。

返事の実装

次にユーザー側からメッセージが来た際に返事をする部分を実装します。サーバ側のコードに下記を実装。この例では常に「hoge」という返事をします。

Gemfile

gem 'rest-client'

main.rb

require 'rest-client'

post '/facebook/callback' do
  request_endpoint = "https://graph.facebook.com/v2.6/me/messages?access_token=#{ENV["FACEBOOK_ACCESS_TOKEN"]}"

  request_body = JSON.parse(request.body.read)
  events = request_body["entry"][0]["messaging"]
  events.each do |event|
    sender = event["sender"]["id"]
    body = { recipient: { id: sender }, message: { text: 'hoge' } }
    RestClient.post request_endpoint, body.to_json, content_type: :json, accept: :json
  end
  'OK'
end

チャットbotの起動と確認

どうやらbotはFacebookページに紐付いているようなので、どのページに紐付けるかを決定してアクセストークンを取得します。

facebook page

Facebook APIを通してPOSTしてチャットbotを起動します。<ACCESS_TOKENにさっき取得したアクセストークンを入れる。

curl -ik -X POST "https://graph.facebook.com/v2.6/me/subscribed_apps?access_token=<ACCESS_TOKEN>"

これで一通り出来たはずなので、あとはスマホのメッセンジャーアプリでbot名を検索して、話しかけてみれば出来あがり！

できたー！！

phone