114
108

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-04-13

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"
  }
}
114
108
8

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
114
108

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?