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

### 匯入函式庫

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

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

## Imagemap設定

首先，需要先準備圖片。需要有**五張樣子相同，但大小(px)不同的圖片**，放在**同一個資料夾中**
* 圖片格式需要是 JPEG 或 PNG
* 圖片寬度分別要有240px、300px、460px、700px、1040px。一定要有這五張
* 並且檔案最大不能超過10MB

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

## 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 : 顯示文字標籤

### 影片播放範例


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


## Imagemap範例

**程式碼:**

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

1. 開始新專案

2. 直接按確定就可以了

3. 點擊訊息旁邊的"+"號並選擇影像地圖訊息

4. 選擇本機檔案後找到檔案，然後點擊開啟

5. 先在右側的圖片中選出action的範圍後，在選擇action的類型

6. 再來將action的內容輸入

7. 最後將取得的 action 作用範圍的 x、y 座標，以及範圍的寬度、高度 複製貼到程式碼上就完成了

>Reference：https://developers.line.biz/en/docs/messaging-api/using-bot-designer/

Youtube 課程影片
---
<iframe width="560" height="315" src="https://www.youtube.com/embed/JhRk7c9J-5M?si=_yteISpWXOcUZ3FB" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

{%hackmd @ntuebigdata/about %}

## 相關教材連結

<div style="display: flex; justify-content:space-between;">
<div>
<a class="btn btn-warning" href="https://hackmd.io/@ntuebigdata/message-type-3-flex-message" style="color:white;width:300px;text-overflow:ellipsis;overflow:hidden">◀◀◀ L09 Message Type(3) Flex Message ◀◀◀</a>
</div>
<div>
<a class="btn btn-info" href="https://hackmd.io/@ntuebigdata/quick-reply" style="color:white;width:300px;text-overflow:ellipsis;overflow:hidden">▶▶▶ L11 Quick Reply ▶▶▶</a>
</div>
</div>