1 of 14

每天五分鐘

LINE API 輕鬆上手 #14

訊息其實可以如此絢麗

​

2019@RenZhou

Messaging API - Flex Message (上）

​

2 of 14

Messaging API - Flex Message 彈性訊息

​

​

​

​

​

�

2

3 of 14

Messaging API - Flex Message

  • 主要的 type 是 flex
  • 而 contents 裡的 type 有 Bubble、Carousel 兩種
  • Carousel 其實就是再開一層來放很多個 Bubble
  • 記得要放在 flex 的 contents 裡面

​

​

​

​

​

�

3

{

"type": "flex",

"altText": "this is a flex message",

contents: {

type: "carousel",

contents: [

{

type: "bubble",

// 第一個bubble 內容先不要看

},

{

type: "bubble",

// 第二個bubble 內容先不要看

}

]

}

}

​

4 of 14

Messaging API - Flex Message Bubble佈局

  • 分成四大主要區塊
  • 四大區塊可以放的都差不多
  • Header、Body、Footer 只能放 box
  • Hero 可以放 box 跟 image (就當作是放圖片的就好）

​

​

​

​

�

4

5 of 14

要怎麼開始？

6 of 14

Messaging API - Flex Message - 目前有幾種做法

  1. 直接用編輯器憑空拉畫面 (壞在哪都不知道)
  2. 用LINE bot Designer來拉畫面 （目前介面不是很友善 個人不推）
  3. 用模擬器對照文件來拉畫面

​

​

​

​

�

6

7 of 14

Messaging API - Flex Message - 用模擬器來拉畫面

https://developers.line.biz/console/fx/

​

​

​

​

�

7

8 of 14

Messaging API - Flex Message - 來看看隨便一頁API 文件...

​

​

​

​

​

�

8

9 of 14

照這個速度要拉多久？

還好最近更新了這個！！

​

10 of 14

Messaging API - Flex Message -模擬器beta ！！！

https://developers.line.biz/console/fx-beta/

注意：beta版模擬器因為是beta 所以目前 不會存檔 不會存檔 不會存檔 （不小心重新整理就沒了喔）�

​

​

​

​

�

10

11 of 14

Messaging API - 模擬器 操作方法

�

​

​

​

​

�

11

實際預覽

物件選擇

參數設定

操作列

12 of 14

Messaging API - 模擬器 操作方法 - JSON

�

​

​

​

​

�

12

13 of 14

Messaging API 模擬器 操作方法 - Showcase

�

​

​

​

​

�

13

14 of 14

詳細的元件使用方法

明天再講 ＸＤ

大家先玩玩模擬器吧