Facebook Messenger BotのMessage-Received Callbackで受け取るデータまとめ（公式リファレンス不足情報を補足）


Facebook Messengerには、テキストや画像の送信以外にもいろいろなものを投稿できる機能がありますが、Messenger Platformの公式リファレンスの[Message-Received Callback](https://developers.facebook.com/docs/messenger-platform/webhook-reference#received_message)の項目では全てが説明されていないようなので、まとめてみました。

テキスト
============================

<img width="150" alt="18B3156C-357D-4AA8-B6F1-AB3D6EA27CA9.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/51569/83b797aa-7e4c-3802-9cbf-1c19a0014da7.png">

```
{
	mid: 'mid.1462160673187:97319ef1f3dfb56909',
	seq: 3729,
	text: 'Test'
}
```


絵文字
============================

<img width="150" alt="475C4721-91DF-4727-BA45-CFE1D2C38F4D.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/51569/bb931d57-ecbf-27af-359c-71199313f989.png">


```
{
	mid: 'mid.1462161694171:e32b926675695c4751',
	seq: 3740,
	text: '😁'
}
```

**ポイント**

* 通常テキストメッセージは吹き出しのような囲まれているUIであるのに対し、絵文字は絵文字がスタンプのように生でポストされるので、送信形式が違うのかと思い調べたが、普通にテキストとしておくられる。

画像
============================

<img width="150" alt="936B4232-7E14-47F9-81E3-B5BE97B01D69.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/51569/549f25e2-e7f3-acef-b9f9-ccc51b10b31b.png">

```
{
	mid: 'mid.1462161747393:767d8682762e9c6c91',
	seq: 3743,
	attachments: [{
		type: 'image',
		payload: {
			url: 'https://scontent.xx.fbcdn.net/v/t34.0-12/13149973_1057584607649689_146740965_n.jpg?oh=17c1586156fa070c33d156673283e4ac&oe=5729B28A'
		}
	}]
}
```

複数画像
============================

<img width="150" alt="DFB8A9A0-FA86-4F28-A892-8AFB741BB972.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/51569/e865097d-cbfa-37ed-dc9f-bc4205cb4d9e.png">

```
{
	mid: 'mid.1462161747393:767d8682762e9c6c91',
	seq: 3743,
	attachments: [{
		type: 'image',
		payload: {
			url: 'https://scontent.xx.fbcdn.net/v/t34.0-12/13149973_1057584607649689_146740965_n.jpg?oh=17c1586156fa070c33d156673283e4ac&oe=5729B28A'
		}
	},
	{
		type: 'image',
		payload: {
			url: 'https://scontent.xx.fbcdn.net/v/t34.0-12/13149973_1057584607649689_146740965_n.jpg?oh=17c1586156fa070c33d156673283e4ac&oe=5729B28A'
		}
	}]
}
```

**ポイント**

* attachementsの中に配列として画像が並ぶ
* Messengerでは画像と動画を混ぜて複数選択したり、動画を複数選択したりすることはできないようなので（しようとするとアラートがポップアップする）現状ここに並ぶのはtype: imageのオブジェクトのみとなる

GIF（Giphyなどで投稿されるもの）
============================

<img width="150" alt="D35ACE07-FD46-4075-B4DD-8D303361D61E.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/51569/e3808301-66ac-1d70-a698-9ab5c611c80e.png">

```
{
	mid: 'mid.1462160694749:437851987c8eb7ca22',
	seq: 3732,
	attachments: [{
  		type: 'image',
  		payload: {
  			url: 'https://cdn.fbsbx.com/v/t59.2708-21/13068706_10156937759280249_1358572811_n.gif?oh=044addf0a2be092cb04b8edb26d806ab&oe=5728C3B4'
  		}
  	}]
}
```

**ポイント**

* 現状Giphyなどで投稿されるGifアニメーションと通常投稿画像の判別はつかないように見える。無理矢理判定するなら、通常、スマホから投稿される画像はjpgであると割り切って、payload.urlの中に".gif"という文字列がみつかったらgifアニメーションであると判定するぐらいしかない。

いいね！
============================

<img width="150" alt="7E8A15EB-A456-4AB1-9B0E-DC78DAD64AB5.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/51569/55e70cb3-5914-f36f-9799-f1257e2d1f47.png">

```
{
	mid: 'mid.1462160938191:cd6db17b8501ac0183',
	seq: 3735,
	sticker_id: 369239263222822,
	attachments: [{
  		type: 'image',
  		payload: {
  			url: 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xfa1/t39.1997-6/851557_369239266556155_759568595_n.png' 
  		}
  	}]
}
```

**ポイント**

* ただのPNG画像として送られてきてしまう。
* 「sticker_id」という公式リファレンスには掲載されていないキーが存在する。

音声
============================

<img width="150" alt="4BFF436B-058A-4137-B0D3-9177199757FD.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/51569/aaaf9d39-4a10-daa7-6ac6-a687d2647c88.png">

```
{
	mid: 'mid.1462161083654:7c93acc62bf7181519',
	seq: 3736,
	attachments: [
		{
			type: 'audio',
			payload: {
				url: 'https://cdn.fbsbx.com/hphotos-xpf1/v/t59.3654-21/13105144_1057581247650025_4287058_n.mp4/audioclip-1462161083000-1976.mp4?oh=b31fa25a63180d29b485b64c28d64806&oe=5729C200'
			}
		}
	]
}
```

**ポイント**

* payload.urlがmp4形式のファイルのURLとなっている

動画
============================

<img width="150" alt="DC76995F-B082-431C-9683-99FE482822E5.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/51569/04c6d3fc-d49c-8b94-ea7a-7ed5702670f0.png">

```
{
	mid: 'mid.1462161181116:c889db218be9fd8455',
	seq: 3737,
	attachments: [{
		type: 'video',
		payload: {
			url: 'https://video.xx.fbcdn.net/v/t42.3356-2/13154860_1057581767649973_2034607946_n.mp4/video-1462161180.mp4?vabr=519222&oh=fb87bce87fa6631fceeea730d4c34626&oe=5728BE67'
		}
	}]
}
```

**ポイント**

* payload.urlがmp4形式のファイルのURLとなっている

スタンプ
============================

<img width="150" alt="85F96BCC-A27F-4929-9B99-82105456A019.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/51569/eeced182-1707-e882-4169-04c67eeb0b19.png">

```
{
	mid: 'mid.1462161319358:719bd120a075db0f48',
  	seq: 3738,
  	sticker_id: 126362100881920,
	attachments: [{
  		type: 'image',
  		payload: {
  			url: 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xfa1/t39.1997-6/p100x100/851586_126362104215253_1651254063_n.png'
  		}
  	}]
}
```

**ポイント**

* ただのPNG画像として送られてきてしまう。
* 「sticker_id」という公式リファレンスには掲載されていないキーが存在する。

位置情報
============================

<img width="150" alt="22D57B02-5A4B-4CBA-B0FD-77CFEDB9E37B.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/51569/387eb625-8ae8-8df2-2ad7-6dc3ecdc4106.png">

```
{
	mid: 'mid.1462161425797:0cb4853c813f67f157',
	seq: 3739,
	attachments:[{
		title: 'Kensuke\'s Location',
   		url: 'https://www.facebook.com/l.php?u=https%3A%2F%2Fwww.bing.com%2Fmaps%2Fdefault.aspx%3Fv%3D2%26pc%3DFACEBK%26mid%3D8100%26where1%3D37.853892152233%252C%2B-122.27284387697%26FORM%3DFBKPL1%26mkt%3Den-US&h=GAQFDbq0p&s=1&enc=AZMFD3TrKmomukiQ-yZcDpHMLCU2VgfmlSQFV_K8nywElxrUh4_igid2GmshbuHV3ASvVLI1ewNONlYl8LNfzGBsVFQ6p6xGFqx_qHMmfKgqGw',
		type: 'location',
		payload: {
			coordinates: {
				lat: 37.853892152233,
				long: -122.27284387697
			}
		}
	}]
}
```

**ポイント**

* 公式リファレンスにはまだ掲載されていないtype: locationという形式となっている
* attachments[].urlはBing MapsへのリダイレクトURLとなっている
* payload.coordinatesから緯度経度を取得することができる

ちなみにtype: locationに関しては各ボットですでに活用されていて、例えばお天気ボットHi Ponchoでは、位置情報をポストするとその場所の天気を即座に教えてくれる。


面白かったポイント
==========================

* attachments[].typeにはimage, video, audio以外に「location」という要素が存在する。
* スタンプ、GIF（Giphyなど）、いいね！、はtype: imageで送信され画像のURLが送られてくるだけなので、判別が難しい 
* スタンプ、いいね！にはsticker_idという公式リファレンスでは言及されていないキーが存在する
* 現状attachmentsの配列に複数の要素が入るのは、type: imageのものが並ぶケースしか存在しない（調査不足であればもうしわけないですが）