iT邦幫忙

2025 iThome 鐵人賽

DAY 17
0
Modern Web

Line Bot × NestJS:30 天開發日記系列 第 17

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

  • 分享至 

  • xImage
  •  

2025 鐵人賽背景圖

前言

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(可選參數):可在圖片區域中嵌入播放影片。

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

  1. 整合共用訊息參數:引入自訂的 MessageCommon 型別
  2. 強制使用 HTTPS 協議:要求 baseUrl 必須使用 HTTPS 以確保安全性
  3. 簡化 type 參數:移除 type 欄位,改為在函式內部定義,減少使用者需要傳遞的參數
  4. 設定預設尺寸:將 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: '右下角圖片訊息',
      },
    ],
  });
}

成果展示

LINE Bot ImageMap Message 發送呈現

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

使用 AI 工具製作 ImageMap 海報

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

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

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

  • 將設計好的圖片上傳到 Cloudinary
  • 從圖片 URL 取得 publicIdimageType
  • 將這兩個參數放入 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',
      },
    ],
  });
}

成果展現

LINE ImageMap 互動海報

ImageMap 影片置入 - 進階用法

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

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

ImageMap video 屬性參數說明

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

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

{
    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 可以在行動裝置播放影片的過程中,引導使用者前往網站查看完整資訊

手機呈現 ImageMap Video 畫面


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

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

設定方式

  • baseUrlpreviewImageUrl 設為相同圖片
  • 在 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 略
  });
}

成果展示
Line ImageMap Video 桌機與手機呈現畫面

本日結語

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


上一篇
Day 16:Cloudflare Workers 圖片代理實作
下一篇
Day 18:Flex Message 設計個人名片
系列文
Line Bot × NestJS:30 天開發日記18
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言