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

環境構築

動かす環境を構築

基本的なところはこちらを参照ください (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)

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: "web_url",
                title: "Gmo-research"
                url: "http://gmo-research.jp"
              },
              {
                type: "web_url",
                title: "infoq.jp"
                url: "http://infoq.jp"
              },
            ]
          }
        }
      }
    }

    res.send()

画像を表示する (URL指定)

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

    res.envelope.fb = {
      richMsg: {
        attachment: {
          type: "image",
          payload: {
            url: "(画像へのURL)"
          }
        }
      }
    }

その他

他にも感なものも有ります

• Audio Attachment (音声を再生させたい時)
• Video Attachment (映像を再生させたい時)
• Generic Template (画像やボタンを混在させたメッセージを表示したい時)
• Airline Itinerary Template (フライトプランを表示する的なテンプレート）
• などなど