【2016/04/25解決】 Heroku + FacebookのMessenger Platformで遊んでみようと思ったらScreencast必須で中断している件

この記事で話題にしている問題は、下記記事で既に解決しています。
本投稿のapp.jsを下記記事のものに変えると正常に動作します。

www.ie-kau.net

前回の記事からお察しがつく通り、FacebookのMessenger PlatformにBotを組み込んで色々試してみようと思ったのですが、最終的にレビューが必要でそのレビューでScreencast(動画での説明)が必要とのことだったので一旦断念している状況です。
せっかくなので途中までやったことをまとめてみました。

※前回の記事
Facebook の Bot Api で出来ること, ポリシーまとめ

やったこと

1. Getting Startを読んでFacebook Appの設定を行う
2. HerokuでBotアプリの設定をする
3. Botを起動させるためにFacebookチームに申請する

1. Getting Startを読んでHerokuにBot用のアプリを作る

まずは、下記ページを読んでBotアプリの作成を進めていきます。
developers.facebook.com

Facebook側で必要なもの

• Facebook App
• Facebook Page

Dashboardでの設定

基本は、Getting Start通りですが僕の場合はこんな感じです。
Bot自体はHerokuでお試しに作ってみる予定です。

※httpsしか利用できないので要注意

Botを動作させるFacebookページを決める

今回はテスト用に作ってみた「おれいえのテスト」というページでBotを動作させることにします。

対象のページを選択すると同画面のセレクトボックスの右にPage Access Tokenが表示されるので控えておく。ここから先はHeroku側との認証が必要なので2へ。

2. HerokuでBotアプリの設定をする

Getting StartのサンプルがNodeで書かれているので、それに合わせるためにNode + Expressでサーバーを立てます。

※こちら参考
Getting Started on Heroku with Node.js | Heroku Dev Center

Getting Startのコピペだけどサンプル

package.json

{                                                                                                                                                                                           
  "name": "ie-kau-bot",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "author": "hazumu",
  "dependencies": {
    "ejs": "^2.4.1",
    "express": "^4.13.4"
  },
  "scripts": {
    "start": "node ./app.js"
  }
}

app.js

var express = require('express');                                                                                                                                                           
var app = express();

app.set('port', (process.env.PORT || 5000));

app
  .get('/webhook/', function (req, res) {
    if (req.query['hub.verify_token'] === '[1.で決めたverify_token]') {
      res.send(req.query['hub.challenge']);
    }
    res.send('Error, wrong validation token');
  })
  .post('/webhook/', function (req, res) {
    messaging_events = req.body.entry[0].messaging;
    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,  'オラァ！');
      }
    }
    res.sendStatus(200);
  });

var token = '[1.で取得したPage Access Token]';

function sendTextMessage(sender, text) {
  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);
    }
  });
};

app.listen(app.get('port'), function() {
  console.log('Node app is running on port', app.get('port'));
});

確認用のURLを作成

該当のFacebook PageがこのBotを利用し始める前に、下記URLを叩いて確認を挟むので1で作成したverify tokenとともにurlを準備しておきます。

app
  .get('/webhook/', function (req, res) {
    // 略
  })

Facebook Pageからの購読開始

ここまで準備出来たらFacebook PageからBotの購読を開始する。やり方は、curlコマンドで下記APIを叩くだけ。
※手順

curl -ik -X POST "https://graph.facebook.com/v2.6/me/subscribed_apps?access_token=[1.で取得したPage Access Token]"

trueが返ってきたらOK!

{"success":true}

これで、Botが利用できると思っていたが....

  app.post('/webhook/', function (req, res) {
    // reqにmessegeの内容が入っていると思っていた
  });

どうしても、req.bodyが空っぽで、なんでだろうと悩んでいたのですが、どうやらここでFacebook側のレビューが必要なことに気づきました。

3. Botを起動させるためにFacebookチームに申請する

Facebook Appの設定画面、PRODUCT SETTINGSからMessengerを選んでRequest Permissionsボタンを押し、アイテムを追加します。

そして、左ナビからApp Reviewを辿って、その画面から申請すればよいです。
また、スクリーンキャプチャなのでEdit Notesで各アイテムの必須事項を埋めることができます。

そして埋めていくと、、、 なんと、Screencast（利用イメージの動画）が必要でした＼(^o^)／。これは重い。。

で、何をメッセンジャーで送っても「オラァ！」って返すBotを作ろうと思ってたのですが、そんなもののためScreencastを作る気にもなれれず断念している状況です。なんかお試しで使える、いい方法ないんですかね〜

(´；ω；｀)ｵﾗｯｵﾗｯ↓