Flex Message 的 Update 1 已公開

各位好，我是 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 可說是幾乎必備的功能。經過這次更新後，更能建構出版面更加俐落的對話介面，請務必試用看看。

Flex Message 參考資料

#Flex Message #Messaging API #Messaging API