Messengerで簡単なBotつくる(Facebook Messenger Platform from F8)

  • 109
    いいね
  • 8
    コメント
この記事は最終更新日から1年以上が経過しています。

f8で発表のあったFacebook Messenger PlatformでBotを作るエントリ。

0. これは何?なぜ今Botなのか?

Microsoft、lineに続き、1ヶ月で3社目のBot参入祭り。
なぜこんなにBotが多いのか?
それは、Botがアプリのように3rd Partyとして群雄割拠するプラットフォームになると各社が予見しているからでしょう。
Botはユーザーと直に会話し定性的な評価・リアクションを引き出せるし、それをデータとして貯められる。
アプリが増えすぎて下火な中、Botがアツい。
今年はBotの年、近い将来、アプリエンジニアの代わりにBotエンジニアが、最強のフロントエンドとして存在していることでしょう。

1. まず、Facebookにてページを作る

webサイトかFacebookページをつくる必要ありと。
ここではサイトを作成→https://developers.facebook.com/quickstarts/?platform=web

2. Webhook設定

とりあえずサイトつくると、以下の様なページが出る。

スクリーンショット 2016-04-13 7.11.39.png

左タブにある、Messengerをクリック。→Getting Start!

スクリーンショット 2016-04-13 7.14.51.png

このページになるので、Setup Webhooks

すると、以下画面に。ここでは、urlとトークンを自由に設定できます。

スクリーンショット 2016-04-13 7.15.03.png

ですが、アプリケーションができてないので、一旦アプリ作成へ。

3. とりあえずアプリ作成

node.js × expressでさくっと作ったので、その流れ。
expressコマンドが無い人は、
npm install express-generator -g
npmやnodeがない人はまずそっちを入れよう。
また、僕はherokuでさくっと動かしました。事前にherokuでapp作っときます

$ cd /your/current/path
$ express yourappname
$ cd yourappname
$ git init
$ heroku git:remote -a yourappname
$ git add .
$ git commit -am "make it better"
$ git push heroku master

4. webhook設定(2度目)

先程のページに戻って、herokuのドメインと、任意にトークン入れて、フォロー入力欄でmessagesにチェック。
保存、、、できない!!

クエリで送っている内容返せ!って言われる。ので、編集する。

$ vi routes/index.js

/?hub.mode=subscribe&hub.challenge=<value>&hub.verify_token=<validation-token>
に対してGETリクエストが来る。
以下のようにindex.jsを修正。

routes/index.js
var express = require('express'),
    router = express.Router();

router.get('/', function(req, res, next) {
  if (req.query['hub.verify_token'] === '<validation_token>') {
    res.send(req.query['hub.challenge']);
  }
  res.send('Error, wrong validation token');
});

module.exports = router;

コミットしてもう一度プッシュ!
ページに戻って登録すると、今度は登録完了。

5. アクセストークン発行

登録した後のページから、ページを設定ボタンをクリック。
すると、以下のようにアクセストークンが発行される。

スクリーンショット 2016-04-13 8.12.09.png

6. 最後に恒例のオウム返しbot作成

routesにベタベタ書いてるけど。
そして、docsを参考に以下のように書いた、、、けど、POSTできない事件。前に作ったfbアプリだからAPIバージョン2.5時代だったからの説はアリ。
ここから先はまた後で追記しようと思います。

→requestモジュールの入れ忘れてるというしょぼミスでした。。

routes/index.js
var express = require('express'),
    request = require('request'),
    router = express.Router(),
    token = "<your-access-token>";

function sendTextMessage(sender, text) {
  var messageData = {
    text:text
  }
  request({
    url: 'https://graph.facebook.com/v2.6/me/messages',
    qs: {access_token:token},
    method: 'POST',
    json: {
      recipient: {id:sender},
      message: messageData,
    }
  }, function(error, response, body) {
    if (error) {
      console.log('Error sending message: ', error);
    } else if (response.body.error) {
      console.log('Error: ', response.body.error);
    }
  });
}

router.get('/', function(req, res, next) {
  if (req.query['hub.verify_token'] === '<validation_token>') {
    res.send(req.query['hub.challenge']);
  }
  res.send('Error, wrong validation token');
});

router.post('/', function(req, res, next) {
  var messaging_events = req.body.entry[0].messaging,
      replayMessages = [];
  for (i = 0; i < messaging_events.length; i++) {
    event = req.body.entry[0].messaging[i];
    sender = event.sender.id;
    if (event.message && event.message.text) {
      text = event.message.text;

      // アレコレしたいことをどうぞ
      sendTextMessage(sender, text.substring(0, 200));
    }
  }
  res.sendStatus(200);
});

module.exports = router;
package.json
{
  "name": "<your-app-name>",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.13.2",
    "cookie-parser": "~1.3.5",
    "debug": "~2.2.0",
    "express": "~4.13.1",
    "jade": "~1.11.0",
    "morgan": "~1.6.1",
    "request": "2.71.0", //←ココ
    "serve-favicon": "~2.3.0"
  }
}