今天要介紹的是訊息格式 Message Types，前面已經介紹過 Flex 和 Template，今天就跳過這兩個，來看 Line Bot 還可以傳送哪些訊息內容給使用者。

Message Types:

• Text message 文字訊息
• Sticker message 貼圖訊息
• Image message 圖片訊息
• Video message 影片訊息
• Audio message 音訊訊息
• Location message 位置訊息
• Imagemap message 圖片地圖訊息
• Template message 模板訊息
• Flex Message 彈性訊息

官方文件: message-types

1. Text message 文字訊息

• type: 類型 text
• text: 文字內容，最多 2000 字。
  內容可以包含 emoji 符號，官方提供的 emoji 清單。

來源官方文件: #text-message

程式碼:

var message = new TextMessage(
    $"{Char.ConvertFromUtf32(0x10005C)} Text Message");

await _messagingClient.ReplyMessageAsync(ev.ReplyToken, 
    new List<ISendMessage> { message });

結果:

2. Sticker message 貼圖訊息

官方提供的貼圖才能使用 Line 貼圖清單。

• type: 類型 sticker
• packageId: 包裝代碼。
• stickerId: 貼圖代碼。

來源官方文件: #sticker-message

程式碼:

var stickerMessage = new StickerMessage("11538", "51626519");

結果:

3. Image message 圖片訊息

• type: 類型 image
• originalContentUrl: 圖片網址。
  HTTPS、JPEG、最大解析度 4096 x 4096、大小限制 1MB。
• previewImageUrl: 預覽圖片網址。
  HTTPS、JPEG、最大解析度 240 x 240、大小限制 1MB。

來源官方文件: #image-message

程式碼:

var imageMessage = new ImageMessage(
    "https://xxxxx/image1.jpg",
    "https://xxxxx/image2.jpg");

結果:

4. Video message 影片訊息

• type: 類型 video
• originalContentUrl: 圖片網址。
  HTTPS、mp4、最長 1 分鐘、大小限制 10MB。
• previewImageUrl: 預覽圖片網址。
  HTTPS、JPEG、最大解析度 240 x 240、大小限制 1MB。

來源官方文件: #video-message

程式碼:

var videoMessage = new VideoMessage(
    "https://xxxxx/video.mp4",
    "https://xxxxx/image.jpg");

結果:

5. Audio message 音訊訊息

• type: 類型 audio
• originalContentUrl: 圖片網址。
  HTTPS、m4a、最長 1 分鐘、大小限制 10MB。
• duration: 畫面上顯示的時間 (milliseconds)。

來源官方文件: #audio-message

程式碼:

var audioMessage = new AudioMessage(
    "https://xxxxx/audio.mp3", 45000);

結果:

6. Location message 位置訊息

• type: 類型 location
• title: 標題，最多 100 字。
• address: 地址，最多 100 字。
• latitude: 經度。
• longitude: 緯度。

來源官方文件: #location-message

程式碼:

var locationMessage = new LocationMessage( 
    "我家地址", "台中市潭子區潭子火車站", 24.212890M, 120.705579M);

結果:

7. Imagemap message 圖片地圖訊息

最後一個 Imagemap 直接看文件有點難理解它的用途，簡單說就是我們可以在一張圖片上，用座標畫出幾個區塊，當使用者點擊區塊時執行某些動作。

• type: 類型 imagemap
• baseUrl: 圖片網址。
• baseSize.width: 圖片寬度。
• baseSize.height: 圖片高度。
  # 圖片說明
• actions: 動作。
  # 動作說明

# 圖片說明

• 格式需為 JPEG 或 PNG
• 大小限制 1MB
• 需要準備 5 張不同解析度的圖片，LINE 會根據設備的解析度顯示適合的圖片。
• 網址需由 baseUrl/{image width} 組成，不能有副擋名。

#動作說明

動作類型有兩個 uri 和 message。

uri

• type: uri。
• label: 輔助文字，設備開啟輔助功能時會使用此文字。
• linkUri: 網址連結，可以使用 http、https、line、tel。
  詳細內容可以參考 LINE URL scheme。
• area: #區域物件。

message

• type: message。
• label: 輔助文字，設備開啟輔助功能時會使用此文字。
• text: 發送的文字，最多 400 字。
• area: #區域物件。

# 區域物件

• x: 起始水平座標
• y: 起始垂直座標
• width: 寬度
• height: 高度

JSON 結構

{
  "type": "imagemap",
  "baseUrl": "https://xxxxx/image",
  "altText": "Imagemap Message",
  "baseSize": {
    "width": 1040,
    "height": 1040
  },
  "actions": [
    {
      "type": "message",
      "text": "A",
      "area": {
        "x": 0,
        "y": 0,
        "width": 520,
        "height": 520
      }
    },
    {
      "type": "uri",
      "linkUri": "https://xxxxx/link",
      "area": {
        "x": 520,
        "y": 0,
        "width": 520,
        "height": 520
      }
    }
  ]
}

來源官方文件: #imagemap-message

程式碼:

var imagemapMessage = new ImagemapMessage(
    "https://github.com/fysh711426/ithelp/raw/master/IronMan/Day13/images",
    "Imagemap Message",
    new ImagemapSize(1040, 1040),
    new List<IImagemapAction>
    {
        new MessageImagemapAction(
            new ImagemapArea(0, 0, 520, 520), "A"),
        new MessageImagemapAction(
            new ImagemapArea(520, 0, 520, 520), "B"),
        new MessageImagemapAction(
            new ImagemapArea(0, 520, 520, 520), "C"),
        new UriImagemapAction (
            new ImagemapArea(520, 520, 520, 520),
            "https://ithelp.ithome.com.tw/users/20106865/articles")
    });

結果:

還有另一個功能，可以在 Imagemap 圖片上方播放影片。

• video.originalContentUrl: 影片網址。
  HTTPS、mp4、最長 2 分鐘、大小限制 10MB。
• video.previewImageUrl: 預覽圖片。
  HTTPS、JPEG、最大解析度 240 x 240、大小限制 1MB。
• video.area.x: 水平起始座標。
• video.area.y: 垂直起始座標。
• video.area.width: 影片區域寬度。
• video.area.height: 影片區域長度。

如果想要在影片播放結束後顯示超連結，可以加上這兩個屬性。

• video.externalLink.linkUri: 網址連結，可以使用 http、https、line、tel。
  詳細內容可以參考 LINE URL scheme。
• video.externalLink.label: 影片結束後顯示的文字，最多 30 字。

程式碼:

var imagemapMessage = new ImagemapMessage(
    "https://github.com/fysh711426/ithelp/raw/master/IronMan/Day13/images",
    "Imagemap Message",
    new ImagemapSize(1040, 1040),
    new List<IImagemapAction>
    {
        new MessageImagemapAction(
            new ImagemapArea(0, 0, 520, 520), "A"),
        new MessageImagemapAction(
            new ImagemapArea(520, 0, 520, 520), "B"),
        new MessageImagemapAction(
            new ImagemapArea(0, 520, 520, 520), "C"),
        new UriImagemapAction (
            new ImagemapArea(520, 520, 520, 520),
            "https://ithelp.ithome.com.tw/users/20106865/articles")
    },
    video: new Video(
        "https://xxxxx/video.mp4",
        "https://xxxxx/image.jpg",
        new ImagemapArea(160, 280, 720, 480),
        new ExternalLink(
            "https://ithelp.ithome.com.tw/users/20106865/articles", "超連結")
    ));

結果:

結語

下一篇要介紹「按鈕」或「圖文選單」可以觸發的動作類型 Action Objects。

今天就到這裡，感謝大家觀看。 (´・ω・｀)