Imagemap Message

官方文檔
練習模板Github連結

Imagemap Message 是一種以圖片組成的訊息，提供很多可以點擊的區域
不過它實在是很麻煩w 所以特意放到進階訊息的最後講
在這個訊息種類中，除了圖片之外，最多也可以放一個影片
麻煩的地方是對於圖片有這樣的要求

1. 格式要是 JPEG 或 PNG
2. 寬度要包括 240px 300px 460px 700px 1040px 缺一不可
3. 檔案大小需在 1MB 內
4. 各種圖片的檔名需要與寬度相同，且不能有副檔名

大致上包含以下幾種參數

• baseUrl (Required)
  顯示的圖片
• altText (Required)
  在電腦版查看訊息時會收到的文字內容
• baseSize.width (Required)
  圖片寬度，最高1040px
• baseSize.height (Required)
  圖片高度，最高1040px
• video.originalContentUrl
  顯示的影片 (Optional *1)
• video.previewImageUrl
  預覽圖片 (Optional *1)
• video.area (Optional *1)
  • x
    影片的 x 座標起點
  • y
    影片的 y 座標起點
  • width
    影片的寬度
  • height
    影片的高度
• video.externalLink.linkUri (Optional *2)
  當影片被點擊後開啟的連結網址
• video.externalLink.label (Optional *2)
  當影片撥放結束後顯示的內容
• actions (Required)
  各個區域被點擊後的Action
  • URI Action
    被觸發後會導向指定連結
    • linkUri (Required)
      連結網址
    • area (Required)
      • x
        Action 的 x 座標起點
      • y
        Action 的 y 座標起點
      • width
        Action 的寬度
      • height
        Action 的高度
  • Message Action
    觸發後會傳送指定訊息
    • area (Required)
      • x
        Action 的 x 座標起點
      • y
        Action 的 y 座標起點
      • width
        Action 的寬度
      • height
        Action 的高度

{
  "type": "imagemap",
  "baseUrl": "https://example.com/bot/images/rm001",
  "altText": "This is an imagemap",
  "baseSize": {
      "width": 1040,
      "height": 1040
  },
  "video": {
      "originalContentUrl": "https://example.com/video.mp4",
      "previewImageUrl": "https://example.com/video_preview.jpg",
      "area": {
          "x": 0,
          "y": 0,
          "width": 1040,
          "height": 585
      },
      "externalLink": {
          "linkUri": "https://example.com/see_more.html",
          "label": "See More"
      }
  },
  "actions": [
      {
          "type": "uri",
          "linkUri": "https://example.com/",
          "area": {
              "x": 0,
              "y": 586,
              "width": 520,
              "height": 454
          }
      },
      {
          "type": "message",
          "text": "Hello",
          "area": {
              "x": 520,
              "y": 586,
              "width": 520,
              "height": 454
          }
      }
  ]
}

實作面

在實作面上，可以參考 line-bot-sdk-python 的部分
或是參考Github模板
因為Imagemap真的不太好設計，所以也可以透過輔助工具產生JSON
之後再轉成line-bot-sdk-python所支援的格式

另外，至今仍無法確認原因
在電腦版介面瀏覽Imagemap會出現下載失敗 請確認網路連線後再確認一次
但是實際上在手機上是可以查看的，這點就請大家多多留意
這樣看起來，也許Imagemap沒有對於實作上很大的幫助Q

後記

Imagemap真的好難QQ
雖然說參數不多，但是本身的要求需要那麼多不同格式的圖片，要求就挺高
而且對於電腦版顯示又有問題，所以我之前根本沒有用過Q
現在即使再重新回去看多一次，也覺得這個訊息類別很莫名其妙
但是卻仍然存在，所以還是想說介紹一下

接下來準備要進入實作環節了
各位可以期待一下囉~