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

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設定

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


<img width="533" alt="スクリーンショット 2016-04-13 7.11.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/30181/8b2829ec-b081-33d7-f7d4-536c6cf1fcdd.png">


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

<img width="1004" alt="スクリーンショット 2016-04-13 7.14.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/30181/cbf5bf5f-f2b9-fe59-3fe7-4889c2b9d5e5.png">

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

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

<img width="1005" alt="スクリーンショット 2016-04-13 7.15.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/30181/e5f7090f-c6cf-6e59-3915-40fc39df0688.png">

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

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

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

```bash
$ 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にチェック。
保存、、、できない！！

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

```bash
$ vi routes/index.js
```

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

```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. アクセストークン発行

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

<img width="1006" alt="スクリーンショット 2016-04-13 8.12.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/30181/b6158214-b8e0-4779-6cd4-edb502c2637a.png">


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

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

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

```js: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;
```

```js: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"
  }
}
```