iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

1

今天要介紹的是 Template Message,不過就如前一篇提到的,因為它不支援電腦版,所以我建議大家可以改用 Flex Message,這篇就來教大家如何使用 Flex Message 重製 Template Message,希望能幫助想轉 Flex Message 卻不會刻版的人。

Template Message 用法

模板訊息分為四類:

  1. Buttons 按鈕
  2. Confirm 確認
  3. Carousel 輪播
  4. Image carousel 圖片輪播

四種模板的最外層通用屬性

  • type: 訊息類型,template
  • altText: 替代文字,最多 400 字。
  • template: 模板物件,ButtonsConfirmCarouselImage carousel

來源官方文件: #template-messages

1. Buttons 按鈕模板

按鈕模板由,圖片、標題、內容、按鈕組成,如下圖。

https://ithelp.ithome.com.tw/upload/images/20200107/20106865PTHLW0rZzF.jpg

參數說明:

  • type: buttons
  • thumbnailImageUrl: 縮圖網址。
    HTTPS TLS 1.2 以上JPEG or PNG寬度最大 1024px空間最大 1 MB
  • imageAspectRatio: 圖片長寬比,有兩個選項,預設為 rectangle。
    rectangle: 1.51:1square: 1:1
  • imageSize: 圖片尺寸,有兩個選項,預設為 cover。
    • cover: 填充整個區域,超過的地方不顯示。
    • contain: 顯示整張圖片,未填滿部分顯示背景色。
  • imageBackgroundColor: 背景色,預設為白色 #FFFFFF
  • title: 標題,最多40個字。
  • text: 內容,有字數限制。
    • 無圖片或標題: 最多 160 字。
    • 有圖片或標題: 最多 60 字。
  • defaultAction: 點擊圖片時觸發的動作,包含圖片、標題、內容區域。
  • actions: 按鈕動作,最多可以放 4 個。

來源官方文件: #buttons

程式碼

//按鈕模板
var templateMessage = new TemplateMessage("Buttons Template",
    new ButtonsTemplate(
        "Content Text",
        thumbnailImageUrl: "https://ithelp.ithome.com.tw/upload/images/20200106/20106865dA0ce7tJLA.png",
        title: "Title",
        imageAspectRatio: ImageAspectRatioType.Rectangle,
        imageSize: ImageSizeType.Cover,
        imageBackgroundColor: "#FFFFFF",
        defaultAction: new MessageTemplateAction("default", "default"),
        actions: new List<ITemplateAction>
        {
            new MessageTemplateAction("Button", "Button")
        }));
//回覆訊息
await _messagingClient.ReplyMessageAsync(ev.ReplyToken, new List<ISendMessage> { templateMessage });

2. Confirm 確認模板

確認模板由,內容和 YesNo 兩個按鈕組成,如下圖。

https://ithelp.ithome.com.tw/upload/images/20200107/20106865qLUhHSfgpE.jpg

參數說明:

  • type: confirm
  • text: 內容,最多 240 個字。
  • actions: 按鈕動作,需設定 YesNo 兩個按鈕。

來源官方文件: #confirm

程式碼

//確認模板
var templateMessage = new TemplateMessage("Confirm Template",
    new ConfirmTemplate(
        "Content Text",
        actions: new List<ITemplateAction>
        {
            new MessageTemplateAction("Yes", "Yes"),
            new MessageTemplateAction("No", "No")
        }));
//回覆訊息
await _messagingClient.ReplyMessageAsync(ev.ReplyToken, new List<ISendMessage> { templateMessage });

3. Carousel 輪播模板

輪播模板由,多個按鈕模板組成,可以橫向滑動,如下圖。

https://ithelp.ithome.com.tw/upload/images/20200107/20106865VGapmnCMqq.jpg

參數說明:

  • type: carousel
  • columns: #輪播項目物件,最多可以放 10 個。
  • imageAspectRatio: 圖片長寬比,有兩個選項,預設為 rectangle。
    rectangle: 1.51:1square: 1:1
  • imageSize: 圖片尺寸,有兩個選項,預設為 cover。
    • cover: 填充整個區域,超過的地方不顯示。
    • contain: 顯示整張圖片,未填滿部分顯示背景色。

#輪播項目物件

  • thumbnailImageUrl: 縮圖網址。
    HTTPS TLS 1.2 以上JPEG or PNG寬度最大 1024px空間最大 1 MB
  • imageBackgroundColor: 背景色,預設為白色 #FFFFFF
  • title: 標題,最多40個字。
  • text: 內容,有字數限制。
    • 無圖片或標題: 最多 120 字。
    • 有圖片或標題: 最多 60 字。
  • defaultAction: 點擊圖片時觸發的動作,包含圖片、標題、內容區域。
  • actions: 按鈕動作,最多可以放 3 個。

來源官方文件: #carousel

程式碼

//輪播模板
var templateMessage = new TemplateMessage("Carousel Template",
    new CarouselTemplate(
        imageAspectRatio: ImageAspectRatioType.Rectangle,
        imageSize: ImageSizeType.Cover,
        columns: new List<CarouselColumn>
        {   
            new CarouselColumn(
                "Content Text",
                thumbnailImageUrl: "https://ithelp.ithome.com.tw/upload/images/20200106/20106865dA0ce7tJLA.png",
                title: "Title",
                imageBackgroundColor: "#FFFFFF",
                defaultAction: null,
                actions: new List<ITemplateAction>
                {
                    new MessageTemplateAction("Button1", "Button1")
                }),
            new CarouselColumn(
                "Text",
                thumbnailImageUrl: "https://ithelp.ithome.com.tw/upload/images/20200106/20106865q03SKAqv0U.png",
                title: "Title",
                imageBackgroundColor: "#FFFFFF",
                defaultAction: null,
                actions: new List<ITemplateAction>
                {
                    new MessageTemplateAction("Button2", "Button2")
                })
        }));
//回覆訊息
await _messagingClient.ReplyMessageAsync(ev.ReplyToken, new List<ISendMessage> { templateMessage });

4. Image carousel 圖片輪播模板

圖片輪播模板由多張圖片組成,可以橫向滑動,如下圖。

https://ithelp.ithome.com.tw/upload/images/20200107/20106865bso2CItTmi.jpg

參數說明:

  • type: image_carousel
  • columns: #輪播項目物件,最多可以放 10 個。

#輪播項目物件

  • imageUrl: 圖片網址。
    HTTPS TLS 1.2 以上JPEG or PNG寬度最大 1024px空間最大 1 MB
  • action: 點擊圖片時觸發的動作。

來源官方文件: #image-carousel

程式碼

//圖片輪播模板
var templateMessage = new TemplateMessage("ImageCarousel Template",
    new ImageCarouselTemplate(
        new List<ImageCarouselColumn> {
            new ImageCarouselColumn(
                "https://ithelp.ithome.com.tw/upload/images/20200106/20106865dA0ce7tJLA.png",
                new UriTemplateAction("Image1", "https://ithelp.ithome.com.tw/upload/images/20200106/20106865dA0ce7tJLA.png")),
            new ImageCarouselColumn(
                "https://ithelp.ithome.com.tw/upload/images/20200106/20106865q03SKAqv0U.png",
                new UriTemplateAction("Image2", "https://ithelp.ithome.com.tw/upload/images/20200106/20106865q03SKAqv0U.png")),
    }));
//回覆訊息
await _messagingClient.ReplyMessageAsync(ev.ReplyToken, new List<ISendMessage> { templateMessage });

使用 Flex Message 重製

1. Buttons 按鈕

https://ithelp.ithome.com.tw/upload/images/20200107/20106865aESdgUhnzI.jpg

{
  "type": "bubble",
  "hero": {
    "type": "image",
    "url": "https://ithelp.ithome.com.tw/upload/images/20200106/20106865q03SKAqv0U.png",
    "size": "full",
    "aspectRatio": "151:100",
    "aspectMode": "cover",
    "action": {
      "type": "message",
      "label": "action",
      "text": "default"
    },
    "backgroundColor": "#FFFFFF"
  },
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "Title",
        "weight": "bold",
        "size": "xl"
      },
      {
        "type": "text",
        "text": "Content Text",
        "size": "md",
        "color": "#9C9C9C"
      }
    ],
    "action": {
      "type": "message",
      "label": "action",
      "text": "default"
    }
  },
  "footer": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "button",
        "action": {
          "type": "message",
          "label": "Button",
          "text": "Button"
        }
      }
    ]
  },
  "styles": {
    "footer": {
      "separator": true
    }
  }
}
var flexMessage = new FlexMessage("Buttons Template")
{
    Contents = new BubbleContainer
    {
        Hero = new ImageComponent
        {
            Url = "https://upload.cc/i1/2020/01/07/xEyIW2.jpg",
            Size = ComponentSize.Full,
            AspectRatio = AspectRatio._151_1,
            AspectMode = AspectMode.Cover,
            Action = new MessageTemplateAction("default", "default"),
            BackgroundColor = "#FFFFFF"
        },
        Body = new BoxComponent
        {
            Layout = BoxLayout.Vertical,
            Contents = new List<IFlexComponent>
            {
                new TextComponent
                {
                    Text = "Title",
                    Weight = Weight.Bold,
                    Size = ComponentSize.Xl
                },
                new TextComponent
                {
                    Text = "Content Text",
                    Size = ComponentSize.Md,
                    Color = "#9C9C9C"
                }
            },
            Action = new MessageTemplateAction("default", "default")
        },
        Footer = new BoxComponent
        {
            Layout = BoxLayout.Vertical,
            Contents = new List<IFlexComponent>
            {
                new ButtonComponent
                {
                    Action = new MessageTemplateAction("Button", "Button")
                }
            }
        },
        Styles = new BubbleStyles
        {
            Footer = new BlockStyle
            {
                Separator = true
            }
        }
    }
};

結果畫面 - Buttons

  • 手機 - Template Message

https://ithelp.ithome.com.tw/upload/images/20200107/20106865r0tXoDUcoX.jpg

  • 手機 - Flex Message

https://ithelp.ithome.com.tw/upload/images/20200107/201068651CNB0EIfgD.jpg

  • 電腦版 - Flex Message

https://ithelp.ithome.com.tw/upload/images/20200107/20106865q7PVulrNDq.jpg


2. Confirm 確認

https://ithelp.ithome.com.tw/upload/images/20200107/20106865C2uVvNYrMn.jpg

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "Content Text",
        "size": "md"
      }
    ]
  },
  "footer": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "button",
        "action": {
          "type": "message",
          "label": "Yes",
          "text": "Yes"
        },
        "height": "sm"
      },
      {
        "type": "button",
        "height": "sm",
        "action": {
          "type": "message",
          "label": "No",
          "text": "No"
        }
      }
    ]
  },
  "styles": {
    "footer": {
      "separator": true
    }
  }
}
var flexMessage = new FlexMessage("Confirm Template")
{
    Contents = new BubbleContainer
    {
        Body = new BoxComponent
        {
            Layout = BoxLayout.Vertical,
            Contents = new List<IFlexComponent>
            {
                new TextComponent
                {
                    Text = "Content Text",
                    Size = ComponentSize.Md
                }
            }
        },
        Footer = new BoxComponent
        {
            Layout = BoxLayout.Horizontal,
            Contents = new List<IFlexComponent>
            {
                new ButtonComponent
                {
                    Height = ButtonHeight.Sm,
                    Action = new MessageTemplateAction("Yes", "Yes")
                },
                new ButtonComponent
                {
                    Height = ButtonHeight.Sm,
                    Action = new MessageTemplateAction("No", "No")
                }
            }
        },
        Styles = new BubbleStyles
        {
            Footer = new BlockStyle
            {
                Separator = true
            }
        }
    }
};

結果畫面 - Confirm

  • 手機 - Template Message

https://ithelp.ithome.com.tw/upload/images/20200107/20106865sgPcil2KAS.jpg

  • 手機 - Flex Message

https://ithelp.ithome.com.tw/upload/images/20200107/20106865JnLnTVIcpe.jpg

  • 電腦版 - Flex Message

https://ithelp.ithome.com.tw/upload/images/20200107/20106865MUSAdQll95.jpg


3. Carousel 輪播

https://ithelp.ithome.com.tw/upload/images/20200107/20106865NUxesNkDup.jpg

{
  "type": "carousel",
  "contents": [
    {
      "type": "bubble",
      "hero": {
        "type": "image",
        "size": "full",
        "aspectRatio": "151:100",
        "backgroundColor": "#FFFFFF",
        "aspectMode": "cover",
        "url": "https://ithelp.ithome.com.tw/upload/images/20200106/20106865q03SKAqv0U.png"
      },
      "body": {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "Title",
            "size": "xl",
            "weight": "bold"
          },
          {
            "type": "text",
            "text": "Content Text",
            "size": "md",
            "color": "#9C9C9C"
          }
        ]
      },
      "footer": {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "button",
            "action": {
              "type": "message",
              "label": "Button1",
              "text": "Button1"
            }
          }
        ]
      },
      "styles": {
        "footer": {
          "separator": true
        }
      }
    },
    {
      "type": "bubble",
      "hero": {
        "type": "image",
        "url": "https://ithelp.ithome.com.tw/upload/images/20200106/20106865dA0ce7tJLA.png",
        "size": "full",
        "aspectRatio": "151:100",
        "backgroundColor": "#FFFFFF",
        "aspectMode": "cover"
      },
      "body": {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "Title",
            "size": "xl",
            "weight": "bold"
          },
          {
            "type": "text",
            "text": "Content Text",
            "size": "md",
            "color": "#9C9C9C"
          }
        ]
      },
      "footer": {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "button",
            "action": {
              "type": "message",
              "label": "Button2",
              "text": "Button2"
            }
          }
        ]
      },
      "styles": {
        "footer": {
          "separator": true
        }
      }
    }
  ]
}
var flexMessage = new FlexMessage("Carousel Template")
{
    Contents = new CarouselContainer
    {
        Contents = new List<BubbleContainer>
        {
            new BubbleContainer
            {
                Hero = new ImageComponent
                {
                    Url = "https://upload.cc/i1/2020/01/07/xEyIW2.jpg",
                    Size = ComponentSize.Full,
                    AspectRatio = AspectRatio._151_1,
                    AspectMode = AspectMode.Cover,
                    BackgroundColor = "#FFFFFF"
                },
                Body = new BoxComponent
                {
                    Layout = BoxLayout.Vertical,
                    Contents = new List<IFlexComponent>
                    {
                        new TextComponent
                        {
                            Text = "Title",
                            Weight = Weight.Bold,
                            Size = ComponentSize.Xl
                        },
                        new TextComponent
                        {
                            Text = "Content Text",
                            Size = ComponentSize.Md,
                            Color = "#9C9C9C"
                        }
                    }
                },
                Footer = new BoxComponent
                {
                    Layout = BoxLayout.Vertical,
                    Contents = new List<IFlexComponent>
                    {
                        new ButtonComponent
                        {
                            Action = new MessageTemplateAction("Button1", "Button1")
                        }
                    }
                },
                Styles = new BubbleStyles
                {
                    Footer = new BlockStyle
                    {
                        Separator = true
                    }
                }
            },
            new BubbleContainer
            {
                Hero = new ImageComponent
                {
                    Url = "https://upload.cc/i1/2020/01/07/BKplZJ.jpg",
                    Size = ComponentSize.Full,
                    AspectRatio = AspectRatio._151_1,
                    AspectMode = AspectMode.Cover,
                    BackgroundColor = "#FFFFFF"
                },
                Body = new BoxComponent
                {
                    Layout = BoxLayout.Vertical,
                    Contents = new List<IFlexComponent>
                    {
                        new TextComponent
                        {
                            Text = "Title",
                            Weight = Weight.Bold,
                            Size = ComponentSize.Xl
                        },
                        new TextComponent
                        {
                            Text = "Content Text",
                            Size = ComponentSize.Md,
                            Color = "#9C9C9C"
                        }
                    }
                },
                Footer = new BoxComponent
                {
                    Layout = BoxLayout.Vertical,
                    Contents = new List<IFlexComponent>
                    {
                        new ButtonComponent
                        {
                            Action = new MessageTemplateAction("Button2", "Button2")
                        }
                    }
                },
                Styles = new BubbleStyles
                {
                    Footer = new BlockStyle
                    {
                        Separator = true
                    }
                }
            }
        }
    }
};

結果畫面 - Carousel

  • 手機 - Template Message

https://ithelp.ithome.com.tw/upload/images/20200107/201068654aJ7mGYTu3.jpg

  • 手機 - Flex Message

https://ithelp.ithome.com.tw/upload/images/20200107/20106865z1ChhanboO.jpg

  • 電腦版 - Flex Message

https://ithelp.ithome.com.tw/upload/images/20200107/20106865B1Ffge8zfh.jpg


4. Image carousel 圖片輪播

https://ithelp.ithome.com.tw/upload/images/20200107/20106865vEmxG2YX2x.jpg

{
  "type": "carousel",
  "contents": [
    {
      "type": "bubble",
      "body": {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "image",
            "url": "https://ithelp.ithome.com.tw/upload/images/20200106/20106865q03SKAqv0U.png",
            "size": "full",
            "aspectRatio": "1:1",
            "aspectMode": "cover"
          },
          {
            "type": "box",
            "layout": "vertical",
            "contents": [
              {
                "type": "box",
                "layout": "horizontal",
                "contents": [
                  {
                    "type": "filler",
                    "flex": 1
                  },
                  {
                    "type": "box",
                    "layout": "vertical",
                    "contents": [
                      {
                        "type": "text",
                        "text": "Image1",
                        "color": "#FFFFFF",
                        "size": "xs",
                        "flex": 0,
                        "align": "center",
                        "gravity": "center",
                        "weight": "bold"
                      }
                    ],
                    "cornerRadius": "25px",
                    "backgroundColor": "#00000066",
                    "position": "relative",
                    "flex": 0,
                    "paddingTop": "12px",
                    "paddingBottom": "12px",
                    "paddingStart": "20px",
                    "paddingEnd": "20px"
                  },
                  {
                    "type": "filler",
                    "flex": 1
                  }
                ],
                "paddingBottom": "25px",
                "position": "relative"
              }
            ],
            "position": "absolute",
            "offsetBottom": "0px",
            "offsetStart": "0px",
            "offsetEnd": "0px"
          }
        ],
        "paddingAll": "0px",
        "action": {
          "type": "uri",
          "label": "action",
          "uri": "https://ithelp.ithome.com.tw/upload/images/20200106/20106865dA0ce7tJLA.png"
        }
      }
    },
    {
      "type": "bubble",
      "body": {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "image",
            "url": "https://ithelp.ithome.com.tw/upload/images/20200106/20106865dA0ce7tJLA.png",
            "size": "full",
            "aspectRatio": "1:1",
            "aspectMode": "cover"
          },
          {
            "type": "box",
            "layout": "vertical",
            "contents": [
              {
                "type": "box",
                "layout": "horizontal",
                "contents": [
                  {
                    "type": "filler",
                    "flex": 1
                  },
                  {
                    "type": "box",
                    "layout": "vertical",
                    "contents": [
                      {
                        "type": "text",
                        "text": "Image2",
                        "color": "#FFFFFF",
                        "size": "xs",
                        "flex": 0,
                        "align": "center",
                        "gravity": "center",
                        "weight": "bold"
                      }
                    ],
                    "cornerRadius": "25px",
                    "backgroundColor": "#00000066",
                    "position": "relative",
                    "flex": 0,
                    "paddingTop": "12px",
                    "paddingBottom": "12px",
                    "paddingStart": "20px",
                    "paddingEnd": "20px"
                  },
                  {
                    "type": "filler",
                    "flex": 1
                  }
                ],
                "paddingBottom": "25px",
                "position": "relative"
              }
            ],
            "position": "absolute",
            "offsetBottom": "0px",
            "offsetStart": "0px",
            "offsetEnd": "0px"
          }
        ],
        "paddingAll": "0px",
        "action": {
          "type": "uri",
          "label": "action",
          "uri": "https://ithelp.ithome.com.tw/upload/images/20200106/20106865dA0ce7tJLA.png"
        }
      }
    }
  ]
}
var flexMessage = new FlexMessage("ImageCarousel Template")
{
    Contents = new CarouselContainer
    {
        Contents = new List<BubbleContainer>
        {
            new FixFlex.BubbleContainer
            {
                Body = new FixFlex.BoxComponent
                {
                    Layout = BoxLayout.Vertical,
                    PaddingAll = "0px",
                    Contents = new List<IFlexComponent>
                    {
                        new ImageComponent
                        {
                            Url = "https://upload.cc/i1/2020/01/07/xEyIW2.jpg",
                            Size = ComponentSize.Full,
                            AspectRatio = AspectRatio._1_1,
                            AspectMode = AspectMode.Cover
                        },
                        new FixFlex.BoxComponent
                        {
                            Layout = BoxLayout.Vertical,
                            Position = "absolute",
                            OffsetStart = "0px",
                            OffsetEnd = "0px",
                            offsetBottom = "0px",
                            Contents = new List<IFlexComponent>
                            {
                                new FixFlex.BoxComponent
                                {
                                    Layout = BoxLayout.Horizontal,
                                    Position = "relative",
                                    PaddingBottom = "25px",
                                    Contents = new List<IFlexComponent>
                                    {
                                        new FixFlex.FillerComponent
                                        {
                                            Flex = 1
                                        },
                                        new FixFlex.BoxComponent
                                        {
                                            Layout = BoxLayout.Vertical,
                                            Position = "relative",
                                            Flex = 0,
                                            BackgroundColor = "#00000066",
                                            CornerRadius = "25px",
                                            PaddingTop = "12px",
                                            PaddingBottom = "12px",
                                            PaddingStart = "20px",
                                            PaddingEnd = "20px",
                                            Contents = new List<IFlexComponent>
                                            {
                                                new TextComponent
                                                {
                                                    Text = "Image1",
                                                    Color = "#FFFFFF",
                                                    Size = ComponentSize.Xs,
                                                    Flex = 0,
                                                    Align = Align.Center,
                                                    Gravity = Gravity.Center,
                                                    Weight = Weight.Bold
                                                }
                                            }
                                        },
                                        new FixFlex.FillerComponent
                                        {
                                            Flex = 1
                                        }
                                    }
                                }
                            }
                        }
                    },
                    Action = new UriTemplateAction("Image1", "https://upload.cc/i1/2020/01/07/xEyIW2.jpg")
                }
            },
            new FixFlex.BubbleContainer
            {
                Body = new FixFlex.BoxComponent
                {
                    Layout = BoxLayout.Vertical,
                    PaddingAll = "0px",
                    Contents = new List<IFlexComponent>
                    {
                        new ImageComponent
                        {
                            Url = "https://upload.cc/i1/2020/01/07/BKplZJ.jpg",
                            Size = ComponentSize.Full,
                            AspectRatio = AspectRatio._1_1,
                            AspectMode = AspectMode.Cover
                        },
                        new FixFlex.BoxComponent
                        {
                            Layout = BoxLayout.Vertical,
                            Position = "absolute",
                            OffsetStart = "0px",
                            OffsetEnd = "0px",
                            offsetBottom = "0px",
                            Contents = new List<IFlexComponent>
                            {
                                new FixFlex.BoxComponent
                                {
                                    Layout = BoxLayout.Horizontal,
                                    Position = "relative",
                                    PaddingBottom = "25px",
                                    Contents = new List<IFlexComponent>
                                    {
                                        new FixFlex.FillerComponent
                                        {
                                            Flex = 1
                                        },
                                        new FixFlex.BoxComponent
                                        {
                                            Layout = BoxLayout.Vertical,
                                            Position = "relative",
                                            Flex = 0,
                                            BackgroundColor = "#00000066",
                                            CornerRadius = "25px",
                                            PaddingTop = "12px",
                                            PaddingBottom = "12px",
                                            PaddingStart = "20px",
                                            PaddingEnd = "20px",
                                            Contents = new List<IFlexComponent>
                                            {
                                                new TextComponent
                                                {
                                                    Text = "Image2",
                                                    Color = "#FFFFFF",
                                                    Size = ComponentSize.Xs,
                                                    Flex = 0,
                                                    Align = Align.Center,
                                                    Gravity = Gravity.Center,
                                                    Weight = Weight.Bold
                                                }
                                            }
                                        },
                                        new FixFlex.FillerComponent
                                        {
                                            Flex = 1
                                        }
                                    }
                                }
                            }
                        }
                    },
                    Action = new UriTemplateAction("Image2", "https://upload.cc/i1/2020/01/07/BKplZJ.jpg")
                }
            }
        }
    }
};

結果畫面 - ImageCarousel

  • 手機 - Template Message

https://ithelp.ithome.com.tw/upload/images/20200107/201068652XqBUhCw3R.jpg

  • 手機 - Flex Message

https://ithelp.ithome.com.tw/upload/images/20200107/20106865XagWgW2fW1.jpg

  • 電腦版 - Flex Message

https://ithelp.ithome.com.tw/upload/images/20200107/20106865V0LWYozUxp.jpg


結語

這篇最困難的地方是,圖片輪播下方的 圓角框框,試了好多種辦法都失敗,一度以為這種版型是做不出來的,最後認真研究官方範例,才把它做出來,不過那個圓角還是沒有 Template 的好看,算是美中不足的地方。

另一個卡住的地方是電腦版的圖片,一開始我把圖片上傳到 it 幫,手機正常顯示,電腦版卻是一片空白,我想是不是 it 幫有防外連機制,就改用 imgur 圖床,不過一樣不行,接著開始亂改亂試,jpg、png、圖片寬高比等等都沒有用,最後是換了另一個圖床 Upload.cc 才解決這個問題,不過我還是沒搞清楚問題所在,歡迎有經驗的大大分享。

重製後的 Flex Message 除了外框比 Template Message 稍大一些,其他部分幾乎一模一樣,大家可以安心服用。

下一篇要介紹的是 LINE Bot 快速回覆功能 「Quick Reply」

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


上一篇
[Day10] 客製化 LINE Bot 的回覆訊息 - Flex Message
下一篇
[Day12] LINE Bot 的快速回覆功能 - Quick Reply
系列文
Line Bot 心得分享 LineMessagingApi + LUIS + BotFramework27

尚未有邦友留言

立即登入留言