[LINE bot 好好玩 30 天玩轉 LINE API] 第 17 天:誰說 Flex Message 不能做進度條

2020 11th 鐵人賽 LINE

本文同步刊載於 iT 邦幫忙第11屆鐵人賽:[LINE bot 好好玩 30 天玩轉 LINE API] 第 17 天:誰說 Flex Message 不能做進度條

前言

昨天賣了關子說要做一個頁面,今天就來頁面大解析吧!

先到 Flex Message Simulator BETA ver

建立 header

首先要來建立 header 的地方

https://i2.wp.com/ithelp.ithome.com.tw/upload/images/20191002/20117701QtDhRe9a13.jpg?w=640&ssl=1
  • 打開之後出現一個範例,不過我們不要這個範例
https://i1.wp.com/ithelp.ithome.com.tw/upload/images/20191002/201177011U3tWqDS0Y.png?w=640&ssl=1
  • 點選 New 建立一個 bubble
  • 在 header 建立一個 box,並且把 paddingAll 改成 0px
https://i0.wp.com/ithelp.ithome.com.tw/upload/images/20191002/201177018BkqE4WSae.png?w=640&ssl=1
  • 在 vertical box 下面加入一個 image 並且把剛剛的 hello, world 移除
https://i2.wp.com/ithelp.ithome.com.tw/upload/images/20191002/201177018JKgPn5pNh.png?w=640&ssl=1
  • 修改 flex, size, aspectRatio 與 aspectMode
https://i0.wp.com/ithelp.ithome.com.tw/upload/images/20191002/201177010lBIC92AFP.png?w=640&ssl=1

我們的 header 做出來了!

建立 body

body 第一部分

  • vertical box 建立 box
https://i2.wp.com/ithelp.ithome.com.tw/upload/images/20191002/20117701SsUjjDW92o.jpg?w=640&ssl=1

為什麼要在 vertical box 再建立一個 box 呢?那是因為 vertical box 是這個部分

https://i1.wp.com/ithelp.ithome.com.tw/upload/images/20191002/20117701k2Qig1BhqQ.jpg?w=640&ssl=1

我們再建立的 box 是這個部分

https://i2.wp.com/ithelp.ithome.com.tw/upload/images/20191002/20117701ZpwS5zV7Zc.png?w=640&ssl=1
  • 修改一下 vertical boxbackgroundColor 改為 #464F69
  • 移除 兩層 hello, world 並起再加入一層 box,放入文字
  • text: Amos的推坑教2.0
  • size: xl
  • color: #ffffff
  • weight: bold

body 第二部分

再來應該是大家最期待的,怎麼做進度條呢?

  • 放入 % 數
    • margin: lg
    • text: 43%
    • size: xs
    • color: #ffffffde
https://i1.wp.com/ithelp.ithome.com.tw/upload/images/20191002/20117701zL3x3QqFGK.png?w=640&ssl=1
  • 在 body 的下面再建立一層 box 然後在他的下面再一個 box

其實筆者也覺得這樣做很麻煩 XDD,看圖比較容易懂

https://i0.wp.com/ithelp.ithome.com.tw/upload/images/20191002/20117701X4i0bJw27E.png?w=640&ssl=1
  • hello, word 都移除
https://i2.wp.com/ithelp.ithome.com.tw/upload/images/20191002/20117701J6XPWESXXM.png?w=640&ssl=1

慘了出現錯誤了怎麼辦?出現錯誤的原因是因為 vertical box 下面是不可以空的,所以跳出錯誤,這時候我們要在下面加入東西給他

  • 加入 filler
  • 修改第二層的 vertical box
    • width: 43%
    • height: 6px
    • backgroundColor: #ffffff5A

看看我們的進度條出現拉!


body 第三部分

  • 在 body 的下面再建立一層 box 然後在它的下面再一個 box,修改一下數值
    • margin: xl
    • backgroundColor: #ffffff1A
    • cornerRadius: 2px
    • paddingAll: 13px

看看我們的小框框出現了

  • 新增一下文字
    • margin: lg
    • text: 累計文章:95
    • size: sm
    • color: #ffffffde
  • 介紹一下複製貼上的功能
    選取 累計文章:95 點選複製

這個地方是沒有辦法直接貼上的呦!
我們要點選上層的 vertical box 然後按貼上

https://i2.wp.com/ithelp.ithome.com.tw/upload/images/20191002/20117701kKvdjugZSO.png?w=640&ssl=1

結果 JSON 大公開

如果看不懂上面的教學也想要這個樣板怎麼辦?這邊不藏私的直接大公開!

{
  "type": "bubble",
  "header": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "image",
        "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/01_1_cafe.png",
        "flex": 1,
        "size": "full",
        "aspectRatio": "2:1",
        "aspectMode": "cover"
      }
    ],
    "paddingAll": "0px"
  },
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "box",
            "layout": "vertical",
            "contents": [
              {
                "type": "text",
                "text": "Amos的推坑教2.0",
                "size": "xl",
                "color": "#ffffff",
                "weight": "bold",
                "wrap": true
              },
              {
                "type": "text",
                "text": "推坑無需理由!跳坑就能擁有!跳坑鐵人快來報到吧!",
                "size": "sm",
                "color": "#ffffffcc"
              }
            ]
          },
          {
            "type": "text",
            "text": "43%",
            "size": "xs",
            "margin": "lg",
            "color": "#ffffffde"
          }
        ]
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "box",
            "layout": "vertical",
            "contents": [
              {
                "type": "filler"
              }
            ]
          }
        ],
        "width": "43%",
        "backgroundColor": "#ffffff5A",
        "height": "6px"
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "box",
            "layout": "vertical",
            "contents": [
              {
                "type": "text",
                "text": "累計文章:95",
                "margin": "lg",
                "size": "sm",
                "color": "#ffffffde"
              },
              {
                "type": "text",
                "text": "團隊人數:7人",
                "margin": "lg",
                "size": "sm",
                "color": "#ffffffde"
              },
              {
                "type": "text",
                "text": "團隊狀態:挑戰中",
                "margin": "lg",
                "size": "sm",
                "color": "#ffffffde"
              }
            ]
          }
        ],
        "margin": "xl",
        "backgroundColor": "#ffffff1A",
        "cornerRadius": "2px",
        "paddingAll": "13px"
      }
    ],
    "backgroundColor": "#464F69"
  }
}

總結

目前這個範例是一個用 LINE 新功能做出進度條的一個範例,歡迎大家多多利用拉 ~