Go to Qiita Advent Calendar 2024 Top
LoginSignup
240
227

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@betchi

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

Last updated at Posted at 2016-04-13

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

Messenger.png

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

まずはMessenger Platformのドキュメントを確認し、LINE BOT APIとできる事を比較してみた。（参考：LINE BOT API Trialでできる全ての事を試してみた ）

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

できる事 Facebook Messenger API LINE BOT API 備考
テキスト送信 text.jpg text.jpg
画像送信 image.jpg image.jpg
動画送信 × video.jpg
音声送信 × audio.jpg
場所送信 × location.jpg
スタンプ送信 × sticker.jpg
リッチメッセージ送信 画像+画像タップ時のURL × rich.png 画像にリンクが設定できる。
Button template（テキスト+ボタン） IMG_0074.jpg × ボタンは最大3つ。ボタンアクションは2パターン（webへのリンク、もしくはpostbackといって再度コールバックを呼ばせるもの）
General template（画像+テキスト＋ボタン） IMG_0075.jpg × ボタンは最大3つ。画像は最大10個（横スクロール表示）。※ボタンの説明は同上
Receipt template（領収書） IMG_0076.jpg ×
ユーザ情報取得 名前 ○ ○
プロフィール画像URL ○ ○
ステータスメッセージ ○ ×

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

ユーザ目線でまず体感したい方は以下のアプリとメッセージングしてみると良いかも。
Shop Spring
CNN

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

APIを実装してみた

テキスト送信

<?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
$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
$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
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
$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
$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
$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に記載されている。

{
    "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がされてくる。

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
240
227

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?