More than 5 years have passed since last update.

Facebook Messenger Bot でリッチメッセージを表示する

Posted at 2016-08-29

環境構築

動かす環境を構築

基本的なところはこちらを参照ください (Facebook Messenger Bot を Hubot で構築して Heroku で動かす)
ただし、前記事の Adapter では、リッチメッセージに対応していないので、今回は **hubot-fb**を使います

Adpter を Install

$ npm install hubot-fb --save

Procfile 書き換え

Heroku で実行させる際の Adapter の指定を変更するため Procefile を書き換えます

Procfile

web: bin/hubot -a fb

必要な環境変数を追加

以下の環境変数を設定します (他にも有りますが最低限以下を設定しますその他は**こちら**参照)

config variable	type	default	description
`FB_PAGE_ID`	string	-	Facebook Page の ID 右のURLから参照 `https://www.facebook.com/<YOUR PAGE USERNAME>/info?tab=page_info`.
`FB_APP_ID`, `FB_APP_SECRET`	string	-	APP ID と、APP Secret 右のURLから参照 `https://developers.facebook.com/apps/`.
`FB_WEBHOOK_BASE`	string	-	Webhook のベースURL この値と `FB_ROUTE_URL` を接続すると Webhook URL になる, [例] `FB_WEBHOOK_BASE=https://mybot.com` と `FB_ROUTE_URL=/webhook` を接続すると Webhook URL は 'https://mybot.com/webhook' となる
`FB_PAGE_TOKEN`	string	-	Page access token. を右のURLから取得する `https://developers.facebook.com/apps/<YOUR APP ID>/messenger/`.
FB_ROUTE_URL	string	/hubot/fb	Webhook の Root Path 今回は '/webhook' を設定する
FB_VERIFY_TOKEN	string	-	Webhook を設定した際の Veryfy Token を指定する今回は 'botapp' を指定する

$ heroku config:set FB_PAGE_ID=<FB_PAGE_ID を指定する>
$ heroku config:set FB_APP_ID=<FB_APP_IDを指定する>
$ heroku config:set FB_APP_SECRET=<FB_APP_SECRETを指定する>
$ heroku config:set FB_WEBHOOK_BASE=http://mybot.com
$ heroku config:set FB_PAGE_TOKEN=<FB_PAGE_TOKENを指定する>
$ heroku config:set FB_ROUTE_URL=/webhook
$ heroku config:set FB_VERIFY_TOKEN=botapp

Script を書く

文字列を表示する

  robot.hear /こんちは/i, (res) ->
    res.send 'ちはこん'

Button 形式で表示する (Postback)

attachment 以下のデータ構造は Messenger Platform Document の**Button Template**を参照ください

  robot.hear /こんちは/i, (res) ->
    # attatchment の構造を richMsg 以下に定義する
    res.envelope.fb = {
      richMsg: {
      attachment: {
        type: "template",
          payload: {
            template_type: "button",
            text: "おかっちの今の気分を教えてほしいじょんぴー",
            buttons: [
              {
                type: "payload",
                title: "最高"
                payload: "FEELING_SAIKOU"
              },
              {
                type: "payload",
                title: "いい感じ"
                payload: "FEELING_IIKANJI"
              },
              {
                type: "payload",
                title: "いまいち"
                payload: "FEELING_IMAICHI"
              },
            ]
          }
        }
      }
    }

    res.send()

Button 形式で表示する (URL Link)