Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
109
Help us understand the problem. What is going on with this article?
@pochi-sato

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

More than 5 years have passed since last update.

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"
  }
}
109
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
pochi-sato
エンジニアやってます ズボラ旅 by こころから というサービスをやっているHotspringにいます

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
109
Help us understand the problem. What is going on with this article?