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 屬性的方式,改變其寬度。可指定的選項為 gigamegakilomicronano

另外,橫向捲軸內的對話框寬度,將套用:

  • 最大尺寸
  • 畫面寬度的 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 元素的 positionoffsetTop 等屬性,製作出 CSS 之 absolute 般的版面。

offset 值能以下列格式指定。

單位數值備註
%json 格式上有效的數值 (負整數亦可) 以母元素的尺寸作為 100,進行計算
像素json 格式上有效的數值 (負整數亦可)
關鍵字none, xs, sm, md, lg, xl, xxl

令人驚喜的改變!

  • 可藉由搭配內部留白與風格的方式,使用 Flex Message,開發圖片橫向捲軸範本。

對話框的動作

bubble 元素中,新增 action 屬性,可針對整個 bubble 元素,定義行動。

子元素亦已定義動作時,將以子元素為優先。

令人驚喜的改變!

  • UX 獲得改良

針對 Hero 元素,配置 Box 元素

原本針對 hero 元素,只能配置 image 元素,但現在可配置 box 元素。

文字造型

文字除了新增可套用的風格外,還可針對較長文字中的部分文字套用風格。

屬性數值
stylenormalitalic
decorationnoneunderlineline-through
contents以陣列指定

styledecoration 由於與 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 參考資料