Line Bot Flex Message 設計實用工具推薦

FLEX MESSAGE 模擬

Flex Message SIMULATOR 線上
https://developers.line.biz/flex-simulator

一個線上的Flex Message設計工具,可以直接設計 bubble 和 carousel 的樣式,並提供 JSON 代碼。

可以直接在頁面右上角 Showcase 選擇 demo 來修改:

showcase Line Bot Flex Message 設計實用工具推薦

設計好之後右上角的 View as JSON 可以直接複製 JSON code

json2 Line Bot Flex Message 設計實用工具推薦
json3 Line Bot Flex Message 設計實用工具推薦

可以使用 Send 功能測試在 Line 中的效果 (要先+ Flex Message Sim 為好友)

send Line Bot Flex Message 設計實用工具推薦

LINE Flex 開發人員工具

LINE Flex 開發人員工具
https://github.com/taichunmin/gcf-line-devbot

功能

  • 直接用 JSON 印出收到的 Event
  • 以文字傳送 Message JSON 就會直接顯示
  • 從 Flex Message Simulator 直接貼上複製下來的 JSON 也可以直接顯示

也就是說,你可以使用剛剛的 Flex Message 設計工具,接著把JSON貼上到這個開發人員工具,即可顯示效果:

68747470733a2f2f692e696d6775722e636f6d2f6350357075727a2e706e67 Line Bot Flex Message 設計實用工具推薦

加入好友: https://line.me/R/ti/p/@736cebrk

加好友 Line Bot Flex Message 設計實用工具推薦

你也可以拉個群組,將 Flex 開發人員工具拉進去:

建群 Line Bot Flex Message 設計實用工具推薦
群組2 Line Bot Flex Message 設計實用工具推薦

接著你傳送任何內容,都可以接收到用 JSON 印出的 event:

json Line Bot Flex Message 設計實用工具推薦

還可以獲取好友、個人、群組成員的資料:

/getProfile 
/getProfile @第一個好友 @第二個好友
/getGroupMemberProfile 
/getGroupMemberProfile @第一個好友 @第二個好友
image Line Bot Flex Message 設計實用工具推薦

把要測試的 Flex Message JSON code 貼上就能看到在line中的效果:

輸出json Line Bot Flex Message 設計實用工具推薦

LINE Bot Designer

LINE Bot Designer
https://developers.line.biz/en/services/bot-designer/

不需要會任何程式語言,直接使用GUI 設計和demo Line Bot 介面

bot designer main en Line Bot Flex Message 設計實用工具推薦

程式布局有Bot項目、屬性設定、效果預覽、JSON 這些主要的區塊:

工具布局 Line Bot Flex Message 設計實用工具推薦

提供所有範本demo,直接在中間屬性欄位調整屬性,並且右下方會有JSON code可以直接使用

按鍵範本 Line Bot Flex Message 設計實用工具推薦

程式內也提供多種範本供使用者修改

對話框訊息 Line Bot Flex Message 設計實用工具推薦

把幾種類型訊息建好之後,還可以嘗試在line bot模擬器中發送:

bot demo Line Bot Flex Message 設計實用工具推薦

並且可以修改模擬器裝置機型(目前僅支援iPhone 8↑ & Galaxy S7↑),還有直式橫式效果

手機型號 Line Bot Flex Message 設計實用工具推薦

如果有任何操作上的問題,上方也有手冊pdf可以查閱(全英文)

說明 Line Bot Flex Message 設計實用工具推薦
0 0 評分數
Article Rating
訂閱
通知
guest

2 Comments
在線反饋
查看所有評論
黃惠妮
黃惠妮
1 年 前

請問用模擬器simulator製作出來的JSON,有辦法傳給朋友圈嗎?好像SEND只能傳給官網測試帳號!謝謝您賜教!