
各位好,我是 Sho Tachibana,我在 LINE 擔任 Technical Evangelist,負責協助各位開發者成功使用 LINE 的 API 並創造商機。
Flex Message Update 1 已公開且變得更加好用,容我為各位介紹其新功能。
何謂 Flex Message?
Flex Message 是一種對話介面,可使用 CSS Flexible Box (CSS Flexbox) 的基礎知識,自由客製化版面。
支援的用戶端版本
支援所有版本,但唯有使用 text
元素的 maxLines
時,iOS 版的 LINE 與 Android 版的 LINE 皆須為 9.8.0 以後版本,PC 版則必須為 5.17 以後版本。
新功能
對話框大小

原本 bubble
元素的寬度無法改變,但現在已能藉由指定 size
屬性的方式,改變其寬度。可指定的選項為 giga
、mega
、kilo
、micro
、nano
。
另外,橫向捲軸內的對話框寬度,將套用:
- 最大尺寸
- 畫面寬度的 80%
兩者中較小的一方 (不會超過畫面尺寸的 80% 以上)。
令人驚喜的改變!
- 可使用 Flex Message,建立與範本訊息相同大小的元素。
- 不再需要產生調整對話框尺寸用的動態圖片。
- 能增加單一畫面中可顯示的對話框數量。
Box 的內部留白

原本套用於 box
元素內之元素中的內部留白無法改變,但現在可藉由指定 paddingAll 等屬性的方式進行改變。其數值能以下列格式指定:
單位 | 數值 | 備註 |
% | 大於 0 且在 json 格式上有效的數值 | 以母元素的尺寸作為 100,進行計算 |
像素 | 大於 0 且在 json 格式上有效的數值 | |
關鍵字 | none , xs , sm , md , lg , xl , xxl |
此外,未設定內部留白時,將套用母元素設定的數值。
令人驚喜的改變!
- 能以不留白、且填滿整個對話框的方式配置圖片。
- 版面的自由度增加。
Box 的風格

新增了 box
元素可設定的風格。
屬性 | 數值 | 預設值 |
backgroundColor | 以 16 進位色碼指定 (#RRGGBB、#RRGGBBAA 等) | transparent |
borderColor | 以 16 進位色碼指定 (#RRGGBB、#RRGGBBAA 等) | |
borderWidth | 任一數值 | none |
cornerRadius | 任一數值 | none |
width | 任一數值 | |
height | 任一數值 |
此外,指定 cornerRadius
時,子元素亦會同時以鏤空方式顯示。另外,還可設定動作。
令人驚喜的改變!
- 修飾的自由度增加。
- 可設定點選
box
元素時的動作。
位置 (Position) 與偏移 (Offset)

box
可使用 box
元素的 position
、offsetTop
等屬性,製作出 CSS 之 absolute
般的版面。
offset 值能以下列格式指定。
單位 | 數值 | 備註 |
% | json 格式上有效的數值 (負整數亦可) | 以母元素的尺寸作為 100,進行計算 |
像素 | json 格式上有效的數值 (負整數亦可) | |
關鍵字 | none , xs , sm , md , lg , xl , xxl |
令人驚喜的改變!
- 可藉由搭配內部留白與風格的方式,使用 Flex Message,開發圖片橫向捲軸範本。
對話框的動作
bubble
元素中,新增 action
屬性,可針對整個 bubble
元素,定義行動。
子元素亦已定義動作時,將以子元素為優先。
令人驚喜的改變!
- UX 獲得改良
針對 Hero 元素,配置 Box 元素
原本針對 hero
元素,只能配置 image
元素,但現在可配置 box
元素。
文字造型

文字除了新增可套用的風格外,還可針對較長文字中的部分文字套用風格。
屬性 | 數值 |
style | normal 或 italic |
decoration | none 或 underline 或 line-through |
contents | 以陣列指定 |
style
與 decoration
由於與 CSS 相同,因此將其去除。
contents
的屬性,用於僅針對文字的一部份,套用風格,因此必須以陣列的型態,將 span
元素新增於 text
元素下方使用。如此一來,不只能讓修飾效果套用至使用 text
元素的整體文字,還能變更局部的造型。
原本的 text
元素

使用 contents
屬性後的修飾文字

令人驚喜的改變!
- 修飾的自由度增加。
填充元素的 flex 屬性
filler
元素中,新增 flex
屬性,增加了自由度。
令人驚喜的改變!
- 版面的自由度增加。
Simulator
亦可使用支援 Flex Message Update 1 的 Flex Message Simulator Update 1 (β 版)。另外,Showcase 應該也可作為參考。
但由於為 β 版,因此可能會出現無法正確執行的情況,敬請多加注意。
總結
若要使用 Messaging API,安裝對使用者來說非常好用的服務時,Flex Message 可說是幾乎必備的功能。經過這次更新後,更能建構出版面更加俐落的對話介面,請務必試用看看。