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


## 環境構築

### 動かす環境を構築
基本的なところはこちらを参照ください **[(Facebook Messenger Bot を Hubot で構築して Heroku で動かす)](http://qiita.com/okakam/items/882e76d863743105ee0e)**
ただし、前記事の Adapter では、リッチメッセージに対応していないので、今回は **[hubot-fb](https://github.com/chen-ye/hubot-fb)**を使います

### Adpter を Install

```bash
$ npm install hubot-fb --save
```

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

```text:Procfile
web: bin/hubot -a fb
```

### 必要な環境変数を追加

以下の環境変数を設定します (他にも有りますが最低限以下を設定します その他は**[こちら](https://github.com/chen-ye/hubot-fb#configuration)**参照)

| 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](https://developers.facebook.com/docs/messenger-platform/implementation#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' を指定する |

```bash
$ 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 を書く

### 文字列を表示する

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

![TextMesage.jpg](https://qiita-image-store.s3.amazonaws.com/0/9906/792e4aa7-3816-c65a-b6a4-b3c6f02b63ca.jpeg)


### Button 形式で表示する (Postback)
attachment 以下のデータ構造は Messenger Platform Document の**[Button Template](https://developers.facebook.com/docs/messenger-platform/send-api-reference/button-template)**を参照ください

```coffeescript
  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()
```

![ButtonTemplate.jpg](https://qiita-image-store.s3.amazonaws.com/0/9906/f93d4c99-ec4a-9646-a356-1493b95cf0a2.jpeg)

### Button 形式で表示する (URL Link)
attachment 以下のデータ構造は Messenger Platform Document の**[Button Template](https://developers.facebook.com/docs/messenger-platform/send-api-reference/button-template)**を参照ください

```coffeescript
  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()
```

![ButtonLink.jpg](https://qiita-image-store.s3.amazonaws.com/0/9906/cfbebda8-336a-36bf-a88e-ad208daf02aa.jpeg)


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

attachment 以下のデータ構造は Messenger Platform Document の**[Image Attachment](https://developers.facebook.com/docs/messenger-platform/send-api-reference/image-attachment)**を参照ください

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

```
![ImageAttachment.jpg](https://qiita-image-store.s3.amazonaws.com/0/9906/683d5eaa-f691-e5a5-032a-72a8bc9ca4f6.jpeg)

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

- [Audio Attachment](https://developers.facebook.com/docs/messenger-platform/send-api-reference/audio-attachment) (音声を再生させたい時)
- [Video Attachment](https://developers.facebook.com/docs/messenger-platform/send-api-reference/video-attachment) (映像を再生させたい時)
- [Generic Template](https://developers.facebook.com/docs/messenger-platform/send-api-reference/generic-template) (画像やボタンを混在させたメッセージを表示したい時)
- [Airline Itinerary Template](https://developers.facebook.com/docs/messenger-platform/send-api-reference/airline-itinerary-template) (フライトプランを表示する的なテンプレート）
- などなど