AI LINE Bot練功坊-L10 Message Type (4) Imagemap Message

匯入函式庫

from linebot.v3.messaging import (
    ImagemapMessage,
    ImagemapArea,
    ImagemapBaseSize,
    ImagemapExternalLink,
    ImagemapVideo,
    URIImagemapAction,
    MessageImagemapAction,
)

Imagemap

是以一個可以設定多個點擊區域的圖像訊息。當使用者點擊區域時，就可以打開網頁或讓用戶發送訊息。還可以在圖片呈現後播放影片，並在影片播放完畢後顯示一個連結與文字

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted

Learn More →

Imagemap設定

首先，需要先準備圖片。需要有五張樣子相同，但大小(px)不同的圖片，放在同一個資料夾中

圖片格式需要是 JPEG 或 PNG
圖片寬度分別要有240px、300px、460px、700px、1040px。一定要有這五張
並且檔案最大不能超過10MB

再來，將這五張的圖片的副檔名刪掉(就是把.jpeg或.png刪掉)
變成下圖的樣子。

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted

Learn More →

Imagemap相關的物件

ImagemapMessage()

ImagemapMessage(base_url, alt_text, base_size, video, actions)

base_url : 連結到有五張圖的資料夾路徑
alt_text : 替代文字
base_size : 需使用ImagemapBaseSize()物件
video : 如有使用ImagemapVideo()，要有影片url以及預覽圖片URL(不一定要有)
actions : 最多50個
動作的物件有URIImagemapAction()、MessageImagemapAction()

ImagemapBaseSize()

ImagemapBaseSize(height=1040, width=1040)

指定Imagemap訊息圖片的寬度和高度

URIImagemapAction()

程式碼

URIImagemapAction(
    linkUri='https://instagram.com/ntue.bigdata?igshid=YmMyMTA2M2Y=',
    area=ImagemapArea(
        x=0, y=520, width=520, height=520
    )
)

linkUri : 連結的URI
area : Action的作用範圍

ImagemapArea()

指定 action 作用範圍的 x 和 y 座標，以及區域的寬度和高度

MessageImagemapAction()

程式碼

MessageImagemapAction(
    text='這是fb網頁https://www.facebook.com/NTUEBIGDATAEDU',
    area=ImagemapArea(
        x=520, y=520, width=520, height=520
    )
)

linkUri : 連結的URI
area : Action的作用範圍

ImagemapArea()

指定 action 作用範圍的 x 和 y 座標，以及區域的寬度和高度

ImagemapVideo()與ImagemapExternalLink()

覆蓋在imagemap上面的video，只能有一個影片

ImagemapVideo(
    original_content_url=url2,
    preview_image_url=url3,
    area=ImagemapArea(
        x=0, y=0, width=1040, height=520
    ),
    external_link=ImagemapExternalLink(
        link_uri='https://www.youtube.com/@bigdatantue',
        label='點我看更多',
    ),
)

ImagemapVideo()

original_content_url : 提供影片的URL
preview_image_url : 預覽圖片的URL
area ：播放區域的座標和長寬設定
external_link : 設定一個按鈕可以放入連結

ImagemapExternalLink()

link_uri : 連結的URI
label : 顯示文字標籤

影片播放範例

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted

Learn More →

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted

Learn More →

紅色的標籤就是可以自己設定的 external_link

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted

Learn More →

Imagemap範例

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted

Learn More →

程式碼:

imagemap_base_url = request.url_root + '/static/imagemap'
imagemap_base_url = imagemap_base_url.replace("http", "https")
video_url = request.url_root + '/static/video.mp4'
video_url = video_url.replace("http", "https")
preview_image_url = request.url_root + '/static/preview_image.png'
preview_image_url = preview_image_url.replace("http", "https")

imagemap_message = ImagemapMessage(
    base_url=imagemap_base_url,
    alt_text='this is an imagemap',
    base_size=ImagemapBaseSize(height=1040, width=1040),
    video=ImagemapVideo(
        original_content_url=video_url,
        preview_image_url=preview_image_url,
        area=ImagemapArea(
            x=0, y=0, width=1040, height=520
        ),
        external_link=ImagemapExternalLink(
            link_uri='https://www.youtube.com/@bigdatantue',
            label='點我看更多',
        ),
    ),
    actions=[
        URIImagemapAction(
            linkUri='https://instagram.com/ntue.bigdata?igshid=YmMyMTA2M2Y=',
            area=ImagemapArea(
                x=0, y=520, width=520, height=520
            )
        ),
        MessageImagemapAction(
            text='這是fb網頁https://www.facebook.com/NTUEBIGDATAEDU',
            area=ImagemapArea(
                x=520, y=520, width=520, height=520
            )
        )
    ]
)
            
line_bot_api.reply_message(
    ReplyMessageRequest(
        reply_token=event.reply_token,
        messages=[imagemap_message]
    )
)

Reference：https://developers.line.biz/en/reference/messaging-api/#imagemap-message

Line Bot Designer

下載連結：https://developers.line.biz/en/docs/messaging-api/download-bot-designer/
利用Line Bot Designer來調整action的area

開始新專案
Image Not Showing Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
直接按確定就可以了
點擊訊息旁邊的"+"號並選擇影像地圖訊息
選擇本機檔案後找到檔案，然後點擊開啟
先在右側的圖片中選出action的範圍後，在選擇action的類型
再來將action的內容輸入
最後將取得的 action 作用範圍的 x、y 座標，以及範圍的寬度、高度複製貼到程式碼上就完成了