iT邦幫忙

第 11 屆 iThome 鐵人賽
DAY 6
0
Software Development

LINE bot 好好玩 30 天玩轉 LINE API系列 第 6 篇

[30 天教你如何玩弄 Line bot API] 第 6 天：教你怎麼嘴最舒服！- Flex Message

11th鐵人賽
20410 瀏覽

  • 分享至 

  • xImage
    •  

本文同步刊載於 Clarence 部落格：[LINE bot 好好玩 30 天玩轉 LINE API] 第 6 天：什麼回應方法都難不倒我！- Flex Message

前言

昨天有提到我們其實可以用 Flex Message 達成所有的 Template message，那今天的目標就是把昨天的 Template message 都用 Flex Message 做一次！

LINE 官方提供工具分析

在目前 LINE 官方有提供三個工具可以用來製作 Flex Message 分別是

我們分別來討論他們！

Flex Message Simulator BETA ver

目前最新的工具，它有一個比較方便使用的 UI 介面與 LINE Bot Designer 的操作比較相識
優點：

  • 可以快速的建立 Flex Message 並且支援匯出匯入功能，
  • 有下拉式選單，不用記得有哪些參數
  • 可以快速看到 UI 變化，不用像 Flex Message Simulator，需要手動更新
  • 可以直接貼上 JSON 看結果

缺點：

  • 可能是新工具目前沒有想到什麼缺點 XD

LINE Bot Designer

桌面版本的開發工具，是一個設計師也很好入門的工具，設計師做好的樣板給工程師就可以直接生出內容
優點：

  • 是一個在輔助開發上完整的工具，不是只有 Flex Message 可以在裡面設計，各種情境都可以模擬

缺點：

  • 只可以完整匯出整個專案，如果中間想要做改動 JSON 的動作沒有辦法做到

Flex Message Simulator

早期的 Flex Message 線上工具，可以直接寫 JSON，對於工程師可能比較友善，對於設計師可能會有點吃力
優點：

  • 早期的線上工具，老開發者只有它可以選擇 XD
  • 可以直接貼上 JSON 看結果

缺點：

  • 所有的參數都要自己記得，然後才有辦法開發，不然就要一直切換看參數
  • 需要手動更新才可以看到 UI 變化

以上工具都有適用場合就看應用拉！。

Flex Message

Flex Message fork Buttons template

第一題 Buttons template，筆者並沒有完美的做出與 Buttons template 一樣請大家見諒 XD

如下是我用的元件結構，在上面有提到這個工具沒有辦法匯入 JSON，製作完成之後直接使用右上角的 View as JSON 把做完的 JSON 匯出，如下面的 JSON。

https://ithelp.ithome.com.tw/upload/images/20190921/201177014uacmKhftS.png

{
  "type": "bubble",
  "hero": {
    "type": "image",
    "url": "https://ithelp.ithome.com.tw/images/ironman/11th/event/kv_event/kv-bg-addfly.png",
    "size": "full",
    "aspectRatio": "20:13",
    "aspectMode": "cover",
    "action": {
      "type": "uri",
      "uri": "http://linecorp.com/"
    },
    "backgroundColor": "#FFFFFF"
  },
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "Menu",
        "weight": "bold",
        "size": "xl",
        "margin": "md"
      },
      {
        "type": "text",
        "text": "Please select",
        "margin": "md"
      },
      {
        "type": "spacer"
      }
    ],
    "action": {
      "type": "uri",
      "label": "View detail",
      "uri": "http://linecorp.com/",
      "altUri": {
        "desktop": "http://example.com/page/123"
      }
    }
  },
  "footer": {
    "type": "box",
    "layout": "vertical",
    "spacing": "sm",
    "contents": [
      {
        "type": "button",
        "action": {
          "type": "postback",
          "label": "Buy",
          "data": "action=buy&itemid=123"
        },
        "height": "sm"
      },
      {
        "type": "button",
        "action": {
          "type": "message",
          "label": "it 邦幫忙鐵人賽",
          "text": "it 邦幫忙鐵人賽"
        },
        "height": "sm"
      },
      {
        "type": "button",
        "action": {
          "type": "uri",
          "label": "View detail",
          "uri": "https://ithelp.ithome.com.tw/2020ironman"
        },
        "height": "sm"
      }
    ],
    "flex": 0
  },
  "styles": {
    "footer": {
      "separator": true
    }
  }
}

Flex Message fork Confirm template

與上面使用同樣的工具製作，這個項目感覺應該比較像，因為元件比較沒有太多的變化，實作圖如下圖，JSON 也在以下提供給大家使用。

https://ithelp.ithome.com.tw/upload/images/20190921/20117701CwWFBoB8Hr.png

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "Are you sure?",
        "margin": "md"
      },
      {
        "type": "spacer"
      }
    ],
    "action": {
      "type": "uri",
      "label": "View detail",
      "uri": "http://linecorp.com/",
      "altUri": {
        "desktop": "http://example.com/page/123"
      }
    }
  },
  "footer": {
    "type": "box",
    "layout": "horizontal",
    "spacing": "sm",
    "contents": [
      {
        "type": "button",
        "action": {
          "type": "message",
          "label": "Yes",
          "text": "yes"
        },
        "height": "sm"
      },
      {
        "type": "button",
        "action": {
          "type": "message",
          "label": "No",
          "text": "no"
        },
        "height": "sm"
      }
    ],
    "flex": 0
  },
  "styles": {
    "footer": {
      "separator": true
    }
  }
}

Flex Message fork Carousel template

與上面的 Buttons template 差不多基本上就是多了一層 carousel 在外面，而這個部分就是前面說的 Flex Message Simulator BETA ver 沒有辦法匯入 JSON，也沒有辦法在外面加一層 carousel，因此我使用 Flex Message Simulator 來完成這道題目。

https://ithelp.ithome.com.tw/upload/images/20190921/201177012FWFERYf7k.png

{
  "type": "carousel",
  "contents": [
    {
      "type": "bubble",
      "hero": {
        "type": "image",
        "url": "https://ithelp.ithome.com.tw/images/ironman/11th/event/kv_event/kv-bg-addfly.png",
        "size": "full",
        "aspectRatio": "20:13",
        "aspectMode": "cover",
        "action": {
          "type": "uri",
          "uri": "http://linecorp.com/"
        },
        "backgroundColor": "#FFFFFF"
      },
      "body": {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "Menu",
            "weight": "bold",
            "size": "xl",
            "margin": "md"
          },
          {
            "type": "text",
            "text": "Please select",
            "margin": "md"
          },
          {
            "type": "spacer"
          }
        ],
        "action": {
          "type": "uri",
          "label": "View detail",
          "uri": "http://linecorp.com/",
          "altUri": {
            "desktop": "http://example.com/page/123"
          }
        }
      },
      "footer": {
        "type": "box",
        "layout": "vertical",
        "spacing": "sm",
        "contents": [
          {
            "type": "button",
            "action": {
              "type": "postback",
              "label": "Buy",
              "data": "action=buy&itemid=123"
            },
            "height": "sm"
          },
          {
            "type": "button",
            "action": {
              "type": "message",
              "label": "it 邦幫忙鐵人賽",
              "text": "it 邦幫忙鐵人賽"
            },
            "height": "sm"
          },
          {
            "type": "button",
            "action": {
              "type": "uri",
              "label": "View detail",
              "uri": "https://ithelp.ithome.com.tw/2020ironman"
            },
            "height": "sm"
          }
        ],
        "flex": 0
      },
      "styles": {
        "footer": {
          "separator": true
        }
      }
    },
    {
      "type": "bubble",
      "hero": {
        "type": "image",
        "url": "https://ithelp.ithome.com.tw/images/ironman/11th/event/kv_event/kv-bg-addfly.png",
        "size": "full",
        "aspectRatio": "20:13",
        "aspectMode": "cover",
        "action": {
          "type": "uri",
          "uri": "http://linecorp.com/"
        },
        "backgroundColor": "#FFFFFF"
      },
      "body": {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "Menu",
            "weight": "bold",
            "size": "xl",
            "margin": "md"
          },
          {
            "type": "text",
            "text": "Please select",
            "margin": "md"
          },
          {
            "type": "spacer"
          }
        ],
        "action": {
          "type": "uri",
          "label": "View detail",
          "uri": "http://linecorp.com/",
          "altUri": {
            "desktop": "http://example.com/page/123"
          }
        }
      },
      "footer": {
        "type": "box",
        "layout": "vertical",
        "spacing": "sm",
        "contents": [
          {
            "type": "button",
            "action": {
              "type": "postback",
              "label": "Buy",
              "data": "action=buy&itemid=123"
            },
            "height": "sm"
          },
          {
            "type": "button",
            "action": {
              "type": "message",
              "label": "it 邦幫忙鐵人賽",
              "text": "it 邦幫忙鐵人賽"
            },
            "height": "sm"
          },
          {
            "type": "button",
            "action": {
              "type": "uri",
              "label": "View detail",
              "uri": "https://ithelp.ithome.com.tw/2020ironman"
            },
            "height": "sm"
          }
        ],
        "flex": 0
      },
      "styles": {
        "footer": {
          "separator": true
        }
      }
    },
    {
      "type": "bubble",
      "hero": {
        "type": "image",
        "url": "https://ithelp.ithome.com.tw/images/ironman/11th/event/kv_event/kv-bg-addfly.png",
        "size": "full",
        "aspectRatio": "20:13",
        "aspectMode": "cover",
        "action": {
          "type": "uri",
          "uri": "http://linecorp.com/"
        },
        "backgroundColor": "#FFFFFF"
      },
      "body": {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "Menu",
            "weight": "bold",
            "size": "xl",
            "margin": "md"
          },
          {
            "type": "text",
            "text": "Please select",
            "margin": "md"
          },
          {
            "type": "spacer"
          }
        ],
        "action": {
          "type": "uri",
          "label": "View detail",
          "uri": "http://linecorp.com/",
          "altUri": {
            "desktop": "http://example.com/page/123"
          }
        }
      },
      "footer": {
        "type": "box",
        "layout": "vertical",
        "spacing": "sm",
        "contents": [
          {
            "type": "button",
            "action": {
              "type": "postback",
              "label": "Buy",
              "data": "action=buy&itemid=123"
            },
            "height": "sm"
          },
          {
            "type": "button",
            "action": {
              "type": "message",
              "label": "it 邦幫忙鐵人賽",
              "text": "it 邦幫忙鐵人賽"
            },
            "height": "sm"
          },
          {
            "type": "button",
            "action": {
              "type": "uri",
              "label": "View detail",
              "uri": "https://ithelp.ithome.com.tw/2020ironman"
            },
            "height": "sm"
          }
        ],
        "flex": 0
      },
      "styles": {
        "footer": {
          "separator": true
        }
      }
    }
  ]
}

總結

為什麼要使用 Flex Message 是因為 Template message 沒有辦法在電腦上面呈現，而 Flex Message 可以，在體驗上會比較一致，因此比較推薦使用 Flex Message。

參考資料

如果對以上想要了解更詳細可以看官方文件

工商時間

團隊系列文

CSScoke - 金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎
King Tzeng - IoT沒那麼難！新手用JavaScript入門做自己的玩具～
Hina Hina - 陣列大亂鬥
阿斬 - Python 程式交易 30 天新手入門
塔塔默 - 用Python開發的網頁不能放到Github上？Lektor說可以！！
Vita Ora - 好 Js 不學嗎 !? JavaScript 入門中的入門。


上一篇
[30 天教你如何玩弄 Line bot API] 第 5 天：教你怎麼嘴最舒服！- Template message
下一篇
[30 天教你如何玩弄 Line bot API] 第 7 天：教你如何自動嘴！
系列文
LINE bot 好好玩 30 天玩轉 LINE API 共 30 篇
  1. 26
    [30 天教你如何玩弄 Line bot API] 第 26 天：賴滴卡製作 - 第一集
  2. 27
    [30 天教你如何玩弄 Line bot API] 第 27 天：賴滴卡製作 - 第二集
  3. 28
    [30 天教你如何玩弄 Line bot API] 第 28 天：賴滴卡製作 - 第三集 - 看回應訊息
  4. 29
    [30 天教你如何玩弄 Line bot API] 第 29 天：有了它！我就知道你經過這裡！
  5. 30
    [30 天教你如何玩弄 Line bot API] 第 30 天：這不是結束！是另一個開始！
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
King Tzeng
iT邦新手 3 級 ‧ 2019-09-22 00:13:34

/images/emoticon/emoticon32.gif

登入發表回應
0
joey1248
iT邦新手 4 級 ‧ 2022-10-30 10:28:55

請問要如何在javascript中處理flexMessage呢?

Clarence iT邦新手 3 級 ‧ 2022-12-06 20:49:05 檢舉

只能使用官方的 Flex Message Simulator

登入發表回應

我要留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22207 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙