Day 17：ImageMap Message 從互動海報到影片嵌入

2025-09-30 4.8k 字，約 5 分鐘

2025 iThome 鐵人賽：Line Bot × NestJS：30 天開發日記。原文發表於 iThome，也可以在下方留言。

文章目錄

前言

前言

在 Day 16 文章中，我們使用 Cloudflare Workers 實作了圖片代理功能。到目前為止，我們已經完成以下準備工作:

透過 Bot Designer 產生的完整 ImageMap Message JSON
使用 Cloudflare Workers 為 Cloudinary 圖片建立合法的 baseUrl

現在，我們可以將這些元素整合到後端系統中，並實際測試其運作效果。

本日程式碼的範例連結

ImageMap Message 型別定義

ImageMap Message 參數說明:

baseUrl：圖片的基礎路徑，需支援動態提供五種不同解析度的圖片
baseSize：圖片的完整解析度大小(寬度 x 高度)
altText：替代文字。當使用者收到訊息時，會顯示於裝置的推播通知或聊天列表中
actions：動作陣列。需定義每個可點擊區域的座標範圍(x、y 軸)及寬高(width、height)，以及該區域被點擊時要觸發的動作效果。
video(可選參數)：可在圖片區域中嵌入播放影片。

在這個型別定義中，我主要做了四個調整，其餘沿用原本的型別定義：

整合共用訊息參數：引入自訂的 MessageCommon 型別
強制使用 HTTPS 協議：要求 baseUrl 必須使用 HTTPS 以確保安全性
簡化 type 參數：移除 type 欄位，改為在函式內部定義,減少使用者需要傳遞的參數
設定預設尺寸：將 baseSize 設為可選參數，預設值為 1040 x 1040，使用者僅在需要自訂背景圖尺寸時才需傳遞

line-message/types/imageMap-message.ts

import { ImageMapMessage, Size } from '@line/bot-sdk';
import { MessageCommon } from './message-common';

type HttpsURL = `https://${string}`;

export type ImageMapMessageReq = MessageCommon &
  Omit<ImageMapMessage, 'type' | 'baseSize'> & {
    baseUrl: HttpsURL;
    baseSize?: Size;
  };

ImageMap 函式處理

ImageMap Action 可以設置以下三種類型(主要以前面兩種為主)：

Message：點擊時發送預設訊息
URI：點擊時開啟指定網址(可搭配 URL scheme 使用)，但要注意這部分功能在桌機版無法使用，會跳出不支援的提示訊息
clipboard：點擊時將指定文字複製到剪貼簿

從 Bot Designer 貼過來的 JSON 中，沒有看到關於 video 進階功能的屬性配置,因此我們會在函式中手動處理這個可選參數。

line-message/line-message.service.ts

  createImageMapMessage(imageMapMessageReq: ImageMapMessageReq) {
    const {
      baseUrl,
      altText,
      baseSize = {
        width: 1040,
        height: 1040,
      },
      actions,
      sender,
      quickReplyItems,
      video,
    } = imageMapMessageReq;

    const imageMapMessage: ImageMapMessage = {
      type: MessageType.ImageMap,
      baseUrl,
      altText,
      baseSize,
      actions,
      ...(video && { video }), // video 是可選的參數
      ...this.buildCommonMessageProps(sender, quickReplyItems),
    };

    return imageMapMessage;
  }

收到 imageMap 訊息發送 ImageMap 訊息

將 Bot Designer 產生的 JSON 直接貼上，並替換 baseUrl 為 Cloudflare Workers 端點即可使用

這個範例將圖片切割為四個互動區塊，點擊不同區域會觸發對應的訊息回應。

line-webhook/line-webhook.service

if (text === 'imageMap') {
  return this.lineMessageService.createImageMapMessage({
    // 記得替換成 Cloudflare Workers 端點
    baseUrl:
      'https://linebot-imagemap.qd513020.workers.dev/001_macrfh/jpeg',
    altText: 'This is an imagemap',
    actions: [
      {
        type: 'message',
        area: {
          x: 0,
          y: 0,
          width: 520,
          height: 520,
        },
        text: '左上角圖片訊息',
      },
      {
        type: 'message',
        area: {
          x: 0,
          y: 520,
          width: 520,
          height: 520,
        },
        text: '左下角圖片訊息',
      },
      {
        type: 'message',
        area: {
          x: 520,
          y: 0,
          width: 520,
          height: 520,
        },
        text: '右上角圖片訊息',
      },
      {
        type: 'message',
        area: {
          x: 520,
          y: 520,
          width: 520,
          height: 520,
        },
        text: '右下角圖片訊息',
      },
    ],
  });
}

成果展示

ImageMap Message 雖然設置較複雜，但與 Image Message 的應用場景截然不同。它就像互動式海報,提供豐富的視覺展示空間與多重互動體驗。實務上除了多區域切割，將整張圖片設為單一互動區域也很常見，特別適合宣傳海報、活動頁面、產品展示等需要視覺衝擊的場景。

使用 AI 工具製作 ImageMap 海報

實務上可以搭配 AI 工具快速產出行銷素材。例如使用 Microsoft Designer 生成廣告圖或宣傳海報，再透過 Canva 等設計工具調整為 1040 x 1040 尺寸，就能快速製作出一張互動海報。

在設計時，建議在圖片中加入視覺引導元素(如按鈕樣式、箭頭指示等),提示使用者該區域可點擊。點擊後系統會顯示對應訊息或開啟指定連結,創造良好的互動體驗。

若只需單一互動區塊，可以跳過 Bot Designer，直接定義 action 座標範圍。實作步驟如下：

將設計好的圖片上傳到 Cloudinary
從圖片 URL 取得 publicId 和 imageType
將這兩個參數放入 Cloudflare Workers 的 baseUrl
設定 action 的 width 和 height 為圖片完整尺寸(如 1040 x 1040)

這樣整張海報都會成為可點擊的互動區域，是非常實用的設計手法。

line-webhook/line-webhook.service.ts

if (text === 'imageMap') {
  return this.lineMessageService.createImageMapMessage({
    baseUrl:
      'https://linebot-imagemap.qd513020.workers.dev/Line_%E6%B5%B7%E5%A0%B1v2_hsp2fd/png',
    altText: '背單字提醒！',
    actions: [
      {
        type: 'message',
        area: {
          x: 0, // 起始 x 座標
          y: 0, // 起始 y 座標
          width: 1040,
          height: 1040,
        },
        text: 'greate',
      },
    ],
  });
}

成果展現

ImageMap 影片置入 - 進階用法

ImageMap 支援影片嵌入功能，透過定義座標範圍將影片覆蓋在圖片上方。需要注意的是：

影片及其縮圖無法在桌機版 LINE 應用程式上顯示
每個 ImageMap 只能設置一個 video

ImageMap video 屬性參數說明：

previewImageUrl：影片預覽縮圖的 URL
originalContentUrl：影片檔案的 URL
area：影片在 ImageMap 中的顯示區域座標(x, y, width, height)
externalLink：影片右上角的外部連結按鈕(可選)

先以半屏寬度(520px)的方式將影片覆蓋在圖片左側，觀察其顯示效果。

json

{
    baseUrl:
      'https://linebot-imagemap.qd513020.workers.dev/Line_%E6%B5%B7%E5%A0%B1v2_hsp2fd/png',
    altText: '背單字提醒！',
    video: {
      previewImageUrl: 'https://res.cloudinary.com/dseg0uwc9/image/upload/e_improve,w_520,h_600,c_thumb,g_auto/v1752220479/2025%20IT%20%E9%90%B5%E4%BA%BA%E8%B3%BD/569400541533438471.jpg',
      originalContentUrl:'https://res.cloudinary.com/dseg0uwc9/video/upload/v1753430100/test_video_fyraxr.mp4',
      area: {
        x: 0,
        y: 0,
        width: 520, // 寬度設置一半
        height: 1040,
      },
      externalLink: {
        label: '點我領取相關資訊',
        linkUri: 'https://google.com.tw/',
      },
    },
    // action 略
}

手機呈現 ImageMap Video 畫面

externalLink 可以在行動裝置播放影片的過程中，引導使用者前往網站查看完整資訊

全屏影片覆蓋 - 跨平台相容方案

接著將 video 區塊設為全屏(1040 x 1040)完全覆蓋圖片。由於桌機版 LINE 無法顯示 ImageMap 影片功能，為了實現跨平台相容，建議採用以下設計。

設定方式

將 baseUrl 和 previewImageUrl 設為相同圖片
在 actions 中加入 message 提示，引導桌機使用者切換到行動裝置

顯示效果

桌機版本：顯示 baseUrl 的海報圖片，點擊後提示切換到行動裝置觀看
行動裝置版本：顯示 previewImageUrl 的影片預覽縮圖，可直接播放影片

這樣設計能確保兩個平台都有良好的使用體驗。

if (text === 'imageMap') {
  return this.lineMessageService.createImageMapMessage({
    baseUrl:
      'https://linebot-imagemap.qd513020.workers.dev/Line_ImageMap_Message_video_%E8%A8%AD%E8%A8%88_g4oh3d/png',
    altText: '背單字提醒！',
    video: {
      previewImageUrl:'https://linebot-imagemap.qd513020.workers.dev/Line_ImageMap_Message_video_%E8%A8%AD%E8%A8%88_g4oh3d/png/1040',
      originalContentUrl:'https://res.cloudinary.com/dseg0uwc9/video/upload/v1753430100/test_video_fyraxr.mp4',
      area: {
        x: 0,
        y: 0,
        width: 1040, // 滿版 1040
        height: 1040,
      },
      externalLink: {
        label: '點我領取相關資訊',
        linkUri: 'https://google.com.tw/',
      },
    },
    // action 略
  });
}

成果展示

本日結語

花了三篇文章的篇幅，總算把 ImageMap Message 的完整流程說明清楚了。會特別著墨在這個訊息類型，主要是因為它在實務上真的很常被使用。特別是搭配 video 功能後，在短影音盛行的現在，越來越多品牌會用這種方式吸引使用者點擊，再導流到主網站查看完整資訊。

留言

留言使用 GitHub 帳號登入（Giscus），留言會存在 GitHub Discussions。