參考資料 ----
Imagemap message
例如：
我們的訊息要回覆下圖，並且設置 左上角 紅線框起的區為點擊區，點擊後跳轉至指定的網址。
<?php
// 因為網站是寄放在虛擬主機商那, 所以要指定時區
date_default_timezone_set('Asia/Taipei');
$channelAccessToken = '{從 LINE 官方帳號後台取得的 token}';
// 客戶端傳來的訊息
$bodyMsg = file_get_contents('php://input');
// 寫 log, 檔案在目前目錄下的 log 目錄內
// 檔名為 log_西元年月日.log, 一天一個檔
$sLogfile = './log/log_'.date('Ymd').'.log';
$fp = fopen($sLogfile, "a+");
fwrite($fp , print_r(date('Y-m-d H:i:s').', Recive: '.$bodyMsg."\n", true));
fclose($fp);
$obj = json_decode($bodyMsg, true);
foreach ($obj['events'] as &$event)
{
$userId = $event['source']['userId'];
// 取得 使用者傳來的訊息
$msgUser = $event['message']['text'];
// 回傳 imagemap 訊息
$payload = [ 'replyToken' => $event['replyToken'],
'messages' => [
[
"type" => "imagemap",
"baseUrl" => "https://圖片網址/目錄/", // 注意: 是目錄, 不是檔名, 上限 2000 字
"altText" => "imagemap 訊息", // 上限 400 字
"baseSize" => ["width" => 1040, // 固定值 1040
"height" => 585, // 自行計算 您的圖片長寬比例換算成寬度為 1040 時的 高度值
],
"actions" => [ // json 物件, 上限 50 個
// 轉換成 PHP 就成為 陣列
[
"type" => "uri",
"label" => "LINE 家族成員合照", // 選擇性參數, 這是讓手機朗讀給視障人士的文字
"linkUri" => "https://要跳轉的目標網址/",
"area" => [
"x" => 0, // 紅框的左上角座標
"y" => 0, // 紅框的左上角座標
"width" => 520, // 紅框的右下角座標, 以最大尺寸的 1040 去計算設置
"height" => 290 // 紅框的右下角座標, 以最大尺寸的 1040 去計算設置
]
]
]
]
]
];
// Send reply API
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'https://api.line.me/v2/bot/message/reply');
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($payload));
curl_setopt($ch, CURLOPT_HTTPHEADER, [ 'Content-Type: application/json',
'Authorization: Bearer ' . $channelAccessToken
]);
$result = curl_exec($ch);
curl_close($ch);
}
?>
在上例，我們想將圖片置於
https://www.example.com/imagemap/ 這個目錄內，原圖為大小 430*260
可以利用如 Gimp 這類的影像處理軟體縮放原圖，複製出 寬度為 240px, 300px, 460px, 700px, 1040px 這 5 種尺寸的圖片，圖片格式限定 JPG 或 PNG，並且檔名分別 240, 300, 460, 700, 1040，有無副檔名則其次，如下圖：
由此也可知，imagemap 的圖片是以目錄名為主
一定要有 5 張，不然 LINE 不會有回應；LINE 會依據使用者的裝置解析度，自動顯示尺寸最適合的圖片。
altText 則是在 聊天列表 或 手機訊息列 所顯示的文字，如下圖
在 actions 有個屬性 label，官網說當您在
"設定" → "無障礙設定"
啟用了 "隨選朗讀"，則當視障朋友點擊這張圖片的指定區域時，手機會朗讀 label 的文字，不過我沒試出來。
回覆 imagemap 訊息
在本例，點擊後，直接在 LINE 裡跳轉至 tw.yahoo.com，並沒有另外開啟瀏覽器 app。
imagemap 也可以內嵌影片
<?php
// 因為網站是寄放在虛擬主機商那, 所以要指定時區
date_default_timezone_set('Asia/Taipei');
$channelAccessToken = '{從 LINE 官方帳號後台取得的 token}';
// 客戶端傳來的訊息
$bodyMsg = file_get_contents('php://input');
// 寫 log, 檔案在目前目錄下的 log 目錄內
// 檔名為 log_西元年月日.log, 一天一個檔
$sLogfile = './log/log_'.date('Ymd').'.log';
$fp = fopen($sLogfile, "a+");
fwrite($fp , print_r(date('Y-m-d H:i:s').', Recive: '.$bodyMsg."\n", true));
fclose($fp);
$obj = json_decode($bodyMsg, true);
foreach ($obj['events'] as &$event)
{
$userId = $event['source']['userId'];
// 取得 使用者傳來的訊息
$msgUser = $event['message']['text'];
// 回傳 video imagemap 訊息
$payload = [ 'replyToken' => $event['replyToken'],
'messages' => [
[
"type" => "imagemap", // 必要參數
"baseUrl" => "https://www.whalin.com.tw/line/imagemap/", // 必要參數, 上限 2000 字
"altText" => "imagemap 訊息", // 必要參數, 上限 400 字
"baseSize" => ["width" => 1040, // 必要參數, 固定值 1040
"height" => 585, // 自行計算 您的圖片長寬比例換算成寬度為 1040 時的 高度值
],
"video" => [ // 影片格式: mp4, 檔案大小不可超過 200MB
"originalContentUrl" => "https://影片網址/blabla.mp4", // 字串長度上限 2000 字,
"previewImageUrl" => "https://預覽圖網址/pre.png", // 預覽圖, 格式限 JPEG/PNG, 檔案大小不可超過 1MB, 字串長度上限 2000 字,
"area" => [
"x" => 260,
"y" => 130,
"width" => 520,
"height" => 292
],
"externalLink" => [
"linkUri" => "https://網址", // 字串長度上限 1000 字, 支援 http, https, line, tel 協定
"label" => "影片播畢後標籤"
],
],
"actions" => [ // json 物件, 上限 50 個
// 轉換成 PHP 就成為 陣列
[
"type" => "uri",
"label" => "LINE 家族成員合照",
"linkUri" => "https://要跳轉的目標網址/",
"area" => [
"x" => 0,
"y" => 0,
"width" => 520,
"height" => 290
]
]
]
]
]
];
// Send reply API
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'https://api.line.me/v2/bot/message/reply');
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($payload));
curl_setopt($ch, CURLOPT_HTTPHEADER, [ 'Content-Type: application/json',
'Authorization: Bearer ' . $channelAccessToken
]);
$result = curl_exec($ch);
curl_close($ch);
}
?>
沒有留言:
張貼留言