Facebook Messenger Platform BETAでできる全ての事を試してみた（LINE BOT APIとの比較あり）

4/13 2:00頃にFacebookの「[Messenger Platform ᴮᴱᵀᴬ](https://messengerplatform.fb.com)」が公開されたと聞いてとりあえず勢いでAPIを全て試してみた。


![Messenger.png](https://qiita-image-store.s3.amazonaws.com/0/39177/cef56588-7443-8d4c-bbcb-12c4e15fcebb.png)



ちなみに「No ads or promotions」って事で広告とかプロモーションには使ってはダメよーって感じらしい。

まずは[Messenger Platformのドキュメント](https://developers.facebook.com/docs/messenger-platform)を確認し、LINE BOT APIとできる事を比較してみた。（参考：[LINE BOT API Trialでできる全ての事を試してみた](http://qiita.com/betchi/items/8e5417dbf20a62f2239d) ）



## Facebook Messenger Platformでできる事（LINE BOT APIとの比較）

| できる事 || Facebook Messenger API | LINE BOT API | 備考 |
|:-----------|:------------|:------------:|:------------:|:------------|
|テキスト送信		||![text.jpg](https://qiita-image-store.s3.amazonaws.com/0/39177/cf88dbfa-ea98-2d94-b5bb-a127bb65357a.jpeg)|![text.jpg](https://qiita-image-store.s3.amazonaws.com/0/39177/22e83a76-f5e5-6128-2160-86aee7b71911.jpeg)||
|画像送信		||![image.jpg](https://qiita-image-store.s3.amazonaws.com/0/39177/6d33753c-cb97-1f20-665a-0bbe1fa4bc16.jpeg)	|![image.jpg](https://qiita-image-store.s3.amazonaws.com/0/39177/6c763b2c-9950-dacc-3b03-879d44e34f17.jpeg)	||
|動画送信		||×	|![video.jpg](https://qiita-image-store.s3.amazonaws.com/0/39177/a926f8df-5551-7ed2-68fd-5988c3ce38d6.jpeg)	||
|音声送信		||×	|![audio.jpg](https://qiita-image-store.s3.amazonaws.com/0/39177/7e75650d-0059-8a5c-ee2c-a3ae2c5824d5.jpeg)	||
|場所送信		||×	|![location.jpg](https://qiita-image-store.s3.amazonaws.com/0/39177/64889b12-a490-3b75-9c7e-7bf3c4154052.jpeg)	||
|スタンプ送信	||×	|![sticker.jpg](https://qiita-image-store.s3.amazonaws.com/0/39177/d648cd92-6f5a-6d40-e647-2c3516d93f9b.jpeg)	||
|リッチメッセージ送信	|画像+画像タップ時のURL|	×	|![rich.png](https://qiita-image-store.s3.amazonaws.com/0/39177/c5e730fa-84ae-e37b-7813-02422c65eda3.png)	|画像にリンクが設定できる。	|
|| Button template（テキスト+ボタン）|	![IMG_0074.jpg](https://qiita-image-store.s3.amazonaws.com/0/39177/ddb306e4-401d-0081-086d-88612e5ae164.jpeg)|	×	|ボタンは最大3つ。ボタンアクションは2パターン（webへのリンク、もしくはpostbackといって再度コールバックを呼ばせるもの）||
||General template（画像+テキスト＋ボタン）	|![IMG_0075.jpg](https://qiita-image-store.s3.amazonaws.com/0/39177/51787f48-45ad-2146-7808-97630f4226a2.jpeg)	|×	|ボタンは最大3つ。画像は最大10個（横スクロール表示）。※ボタンの説明は同上||
|| Receipt template（領収書）|	![IMG_0076.jpg](https://qiita-image-store.s3.amazonaws.com/0/39177/6d4a4575-834f-05df-1a1f-53448f5e8618.jpeg)	|×|	||
|ユーザ情報取得	|名前|	○|	○||
||プロフィール画像URL	|○	|○||
||ステータスメッセージ	|○|×	||


Facebookメッセンジャーの方がリッチメッセージ系（Facebookでは構造化テキストと呼ばれている）が充実している。その変わりLINEでは動画、音声、場所、スタンプ、連絡先が送信できる。
ただ個人的には動画、音声、場所はYoutube、SoundCloud、Google Map等の別サービスのURLを送信すれば良いと思っているのであまり利用頻度は少ないかなと思ってる。

ユーザ目線でまず体感したい方は以下のアプリとメッセージングしてみると良いかも。
[Shop Spring](https://www.facebook.com/SpringNYC)
[CNN](https://www.facebook.com/cnn/)

またLINEとの大きな違いとして、LINEのBOTは1アカウントで1つのボット（チャンネル）しか作れないが、Facebookは1アカウントで複数のボット（アプリ）が作成できる。



## APIを実装してみた

### テキスト送信

```php
<?php
$access_token = "[ACCESS TOKEN]";

// メッセージ受信
$json_string = file_get_contents('php://input');
$json_object = json_decode($json_string);
$from_user_id =$json_object->entry{0}->messaging{0}->sender->id;

$post = <<< EOM
{
    "recipient":{
        "id":"{$from_user_id}"
    },
    "message":{
        "text":"hello, world!"
    }
}
EOM;

// メッセージ送信
api_send_request($access_token, $post);

function api_send_request($access_token, $post) {
    error_log("api_get_message_content_request start");
    $url = "https://graph.facebook.com/v2.6/me/messages?access_token={$access_token}";
    $headers = array(
        "Content-Type: application/json"
    );

    $curl = curl_init($url);
    curl_setopt($curl, CURLOPT_POST, true);
    curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($curl, CURLOPT_POSTFIELDS, $post);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
    $output = curl_exec($curl);
}
```

### 画像送信

```php
<?php
$access_token = "[ACCESS TOKEN]";

// メッセージ受信
$json_string = file_get_contents('php://input');
$json_object = json_decode($json_string);
$from_user_id =$json_object->entry{0}->messaging{0}->sender->id;

$post = <<< EOM
{
    "recipient":{
        "id":"{$from_user_id}"
    },
    "message":{
        "attachment":{
            "type":"image",
            "payload":{
                "url":"[画像URL]"
            }
        }
    }
}
EOM;

// メッセージ送信
api_send_request($access_token, $post);

function api_send_request($access_token, $post) {
    error_log("api_get_message_content_request start");
    $url = "https://graph.facebook.com/v2.6/me/messages?access_token={$access_token}";
    $headers = array(
        "Content-Type: application/json"
    );

    $curl = curl_init($url);
    curl_setopt($curl, CURLOPT_POST, true);
    curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($curl, CURLOPT_POSTFIELDS, $post);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
    $output = curl_exec($curl);
}
```

### Button template（テキスト+ボタン）送信

```php
<?php
$access_token = "[ACCESS TOKEN]";

// メッセージ受信
$json_string = file_get_contents('php://input');
error_log($json_string);
$json_object = json_decode($json_string);
$from_user_id =$json_object->entry{0}->messaging{0}->sender->id;

$post = <<< EOM
{
    "recipient":{
        "id":"{$from_user_id}"
    },
    "message":{
        "attachment":{
            "type":"template",
            "payload":{
                "template_type":"button",
                "text":"What do you want to do next?",
                "buttons":[
                    {
                        "type":"web_url",
                        "url":"https://messengerplatform.fb.com",
                        "title":"Show Website"
                    },
                    {
                        "type":"postback",
                        "title":"Start Chatting",
                        "payload":"USER_DEFINED_PAYLOAD"
                    }
                ]
            }
        }
    }
}
EOM;

// メッセージ送信
api_send_request($access_token, $post);

function api_send_request($access_token, $post) {
    $url = "https://graph.facebook.com/v2.6/me/messages?access_token={$access_token}";
    $headers = array(
        "Content-Type: application/json"
    );

    $curl = curl_init($url);
    curl_setopt($curl, CURLOPT_POST, true);
    curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($curl, CURLOPT_POSTFIELDS, $post);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
    $output = curl_exec($curl);
}
```

### General template（画像+テキスト＋ボタン）送信

```php
<?php
error_log('fbdev callback!');

$access_token = "[ACCESS TOKEN]";

// メッセージ受信
$json_string = file_get_contents('php://input');
error_log($json_string);
$json_object = json_decode($json_string);
$from_user_id =$json_object->entry{0}->messaging{0}->sender->id;

$post = <<< EOM
{
    "recipient":{
        "id":"{$from_user_id}"
    },
    "message":{
        "attachment":{
            "type":"template",
            "payload":{
                "template_type":"generic",
                "elements":[
                    {
                        "title":"Classic White T-Shirt",
                        "image_url":"[画像URL]",
                        "subtitle":"Soft white cotton t-shirt is back in style",
                        "buttons":[
                            {
                                "type":"web_url",
                                "url":"https://messengerplatform.fb.com",
                                "title":"View Item"
                            },
                            {
                                "type":"web_url",
                                "url":"https://developers.facebook.com/docs/messenger-platform",
                                "title":"Buy Item"
                            },
                            {
                                "type":"postback",
                                "title":"Bookmark Item",
                                "payload":"USER_DEFINED_PAYLOAD_FOR_ITEM100"
                            }                            
                        ]
                    },
                    {
                        "title":"Classic Grey T-Shirt",
                        "image_url":"[画像URL]",
                        "subtitle":"Soft gray cotton t-shirt is back in style",
                        "buttons":[
                            {
                                "type":"web_url",
                                "url":"https://messengerplatform.fb.com",
                                "title":"View Item"
                            },
                            {
                                "type":"web_url",
                                "url":"https://developers.facebook.com/docs/messenger-platform",
                                "title":"Buy Item"
                            },
                            {
                                "type":"postback",
                                "title":"Bookmark Item",
                                "payload":"USER_DEFINED_PAYLOAD_FOR_ITEM101"
                            }                            
                        ]
                    }
                ]
            }
        }
    }
}
EOM;

// メッセージ送信
api_send_request($access_token, $post);

function api_send_request($access_token, $post) {
    $url = "https://graph.facebook.com/v2.6/me/messages?access_token={$access_token}";
    $headers = array(
        "Content-Type: application/json"
    );

    $curl = curl_init($url);
    curl_setopt($curl, CURLOPT_POST, true);
    curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($curl, CURLOPT_POSTFIELDS, $post);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
    $output = curl_exec($curl);
}
```

### 領収書送信

```php
<?php
$access_token = "[ACCESS TOKEN]";

// メッセージ受信
$json_string = file_get_contents('php://input');
error_log($json_string);
$json_object = json_decode($json_string);
$from_user_id =$json_object->entry{0}->messaging{0}->sender->id;

$post = <<< EOM
{
    "recipient":{
        "id":"{$from_user_id}"
    },
    "message":{
        "attachment":{
            "type":"template",
            "payload":{
                "template_type":"receipt",
                "recipient_name":"Stephane Crozatier",
                "order_number":"12345678902",
                "currency":"USD",
                "payment_method":"Visa 2345",                
                "order_url":"https://messengerplatform.fb.com",
                "timestamp":"1428444852", 
                "elements":[
                    {
                        "title":"Classic White T-Shirt",
                        "subtitle":"100% Soft and Luxurious Cotton",
                        "quantity":2,
                        "price":50,
                        "currency":"USD",
                        "image_url":"[画像URL]"
                    },
                    {
                        "title":"Classic Gray T-Shirt",
                        "subtitle":"100% Soft and Luxurious Cotton",
                        "quantity":1,
                        "price":25,
                        "currency":"USD",
                        "image_url":"[画像URL]"
                    }
                ],
                "address":{
                    "street_1":"1 Hacker Way",
                    "street_2":"",
                    "city":"Menlo Park",
                    "postal_code":"94025",
                    "state":"CA",
                    "country":"US"
                },
                "summary":{
                    "subtotal":75.00,
                    "shipping_cost":4.95,
                    "total_tax":6.19,
                    "total_cost":56.14
                },
                "adjustments":[
                    {
                        "name":"New Customer Discount",
                        "amount":20
                    },
                    {
                        "name":"$10 Off Coupon",
                        "amount":10
                    }
                ]
            }
        }
    }
}
EOM;

// メッセージ送信
api_send_request($access_token, $post);

function api_send_request($access_token, $post) {
    $url = "https://graph.facebook.com/v2.6/me/messages?access_token={$access_token}";
    $headers = array(
        "Content-Type: application/json"
    );

    $curl = curl_init($url);
    curl_setopt($curl, CURLOPT_POST, true);
    curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($curl, CURLOPT_POSTFIELDS, $post);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
    $output = curl_exec($curl);
}
```

### ウェルカムメッセージ設定

実はこれだけ確認できていない。
設定まではFacebookからの `Successfully added new_thread's CTAs` というレスポンスで確認。

```php
<?php
$access_token = "[ACCESS TOKEN]";
$page_id = "[FacebookページID]";

$post = <<< EOM
{
  "setting_type":"call_to_actions",
  "thread_state":"new_thread",
  "call_to_actions":[
    {
      "message":{
        "text":"Welcome to My Company!"
      }
    }
  ]
}
EOM;

// メッセージ送信
api_send_welcome_message_request($access_token, $page_id, $post);

function api_send_welcome_message_request($access_token, $page_id, $post) {
    $url = "https://graph.facebook.com/v2.6/{$page_id}/thread_settings?access_token={$access_token}";
    $headers = array(
        "Content-Type: application/json"
    );

    $curl = curl_init($url);
    curl_setopt($curl, CURLOPT_POST, true);
    curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($curl, CURLOPT_POSTFIELDS, $post);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
    $output = curl_exec($curl);
}
```

### ユーザ情報取得

```php
<?php
$access_token = "[ACCESS TOKEN]";

// メッセージ受信
$json_string = file_get_contents('php://input');
$json_object = json_decode($json_string);
$from_user_id =$json_object->entry{0}->messaging{0}->sender->id;

// ユーザ情報取得
api_get_user_profile_request($access_token, $from_user_id);

function api_get_user_profile_request($access_token, $from_user_id) {
    $url = "https://graph.facebook.com/v2.6/{$from_user_id}?fields=first_name,last_name,profile_pic&access_token={$access_token}";
    $headers = array(
        "Content-Type: application/json"
    );

    $curl = curl_init($url);
    curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
    $output = curl_exec($curl);
}
```

## コールバックのPOSTデータの構造

コールバックで送信されてくるPOSTデータの構造は[Webhook Reference](https://developers.facebook.com/docs/messenger-platform/webhook-reference)に記載されている。





```json
{
    "object":"page",
    "entry":[
        {
            "id":000000000000000,
            "time":1460507400109,
            "messaging":[
                {
                    "sender":{"id":0000000000000000},
                    "recipient":{"id":000000000000000},
                    "timestamp":1460507400025,
                    "message":
                    {
                        "mid":"mid.0000000000000:xxxxxxxxxxxxxxxxxx",
                        "seq":5,
                        "text":"\\u30c6\\u30b9\\u30c8"
                    }
                }
            ]
        }
    ]
}
```

ちなみにボタンタップによりpostbackされた場合はこんなPOSTがされてくる。

```json
{
	"object":"page",
	"entry":[
		{
			"id":000000000000000,
			"time":1460548408088,
			"messaging":[
				{
					"sender":{"id":0000000000000000},
					"recipient":{"id":000000000000000},
					"timestamp":1460548408088,
					"postback":{"payload":"USER_DEFINED_PAYLOAD_FOR_ITEM100"}
				}
			]
		}
	]
}
```