Flex Message ปี 2023 อิสระที่มากกว่าของการออกแบบข้อความใน LINE
ด้วยข้อดีของ Flex Message ที่ยืดหยุ่นออกแบบได้ตามใจปรารถนา แสดงผลได้รวดเร็ว รองรับทั้งแอป LINE บนสมาร์ทโฟนและ PC รวมถึงจะส่งผ่าน Messaging API หรือ LIFF app ก็ได้ ทำให้ผมกล้าพูดเลยว่า ณ ปี 2023 นี้ ข้อความที่นักพัฒนา LINE ทั่วโลกนิยมส่งหาผู้ใช้งานมากที่สุดคือ Flex Message
ปีนี้ทาง LINE ได้พัฒนาและออก 2 ฟีเจอร์ใหม่ใน Flex Message เพื่อตอบโจทย์การใช้งานที่มากขึ้น โดยได้เพิ่ม Bubble size ใหม่มาอีก 2 แบบ พร้อมกับการกำหนดให้ Font และ Icon ปรับขนาดตัวเองอัตโนมัติตาม Font size ใน Settings
ก่อนที่เราจะไปรู้จักกับทั้ง 2 ฟีเจอร์กันให้มากขึ้น หากคุณเป็นนักพัฒนามือใหม่ที่ยังไม่เคยสร้าง Flex Message มาก่อน ผมขอแนะนำให้เข้าไปอ่านบทความด้านล่างนี้ก่อน เพื่อความเข้าใจที่มากขึ้นนะครับ
1. Bubble size ใหม่
ปีนี้ LINE ได้เพิ่ม Bubble size ใหม่มาอีก 2 ตัว นั่นก็คือ hecto และ deca ซึ่งขนาดของมันทั้งคู่จะอยู่ระหว่าง kilo กับ micro โดย hecto จะใหญ่กว่า deca นิดนึง ดังนั้นตอนนี้นักพัฒนาสามารถกำหนดขนาดของ Bubble ได้ทั้งหมด 7 แบบ ผ่าน property ที่ชื่อ size (กรณีไม่กำหนด ค่าเริ่มต้นของ size จะเป็น mega)
- size:
giga
,mega
(default),kilo
,hecto
,deca
,micro
,nano
{
"type": "flex",
"altText": "Flex Message",
"contents": {
"type": "bubble",
"size": "deca",
"hero": {
// ...
}
}
}
เพื่อให้เห็นภาพการแสดงผล Bubble size ของทั้ง 7 แบบให้ชัดเจน ผมจึงได้เตรียมตัวอย่างการแสดงผลข้อความของแต่ละขนาดมาให้ดูกันด้วย ตามภาพด้านล่างเลย
เงื่อนไขในการแสดงผล Bubble size ที่เป็น hecto และ deca
- แอป LINE บน iOS และ Android จะต้องเป็นเวอร์ชัน 13.6.0 หรือใหม่กว่า
- แอป LINE บน macOS และ Windows จะต้องเป็นเวอร์ชัน 7.17.0 หรือใหม่กว่า
- กรณีที่แอป LINE ทั้งบนสมาร์ทโฟนและ PC เป็นเวอร์ชันที่ไม่รองรับ hecto และ deca ตัวแอปจะแสดงผลเป็น kilo
2. ขนาดของ Font และ Icon ที่ปรับอัตโนมัติตาม Font size ใน Settings
LINE ได้เพิ่ม scaling
ซึ่งเป็น property ใหม่ใน Flex Message ที่จะช่วยให้ขนาดของ Button, Icon, และ Text ปรับเปลี่ยนอัตโนมัติตามการตั้งค่าของ Font size ใน Settings ของแอป LINE (กรณีไม่กำหนด ค่าเริ่มต้นของ scaling จะเป็น false)
- scaling:
true
,false
(default)
{
"type": "bubble",
"body": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "text",
"text": "hello, world",
"margin": "10px",
"size": "30px",
"scaling": true
}
]
}
}
เพื่อให้เห็นภาพที่ชัดเจน ผมได้ทำตัวอย่าง Flex Message ที่มีทั้ง Button, Icon, และ Text มาใส่ property scaling
ให้เป็น true แล้วลองขยับ Font size ใน Settings ของแอป ผลปรากฏว่า…
หมายเหตุ
ปัจจุบัน Flex Message Simulator ยังไม่รองรับการปรับขนาด Font และ Icon แบบอัตโนมัติ จากการกำหนด property scaling
เป็น true
รวมฟีเจอร์ใน Flex Message ของแต่ละปี
ด้วยมีนักพัฒนาใน Community จำนวนหนึ่งบอกว่า บทความเกี่ยวกับ Flex Message ของผมที่ออกมาแต่ละปีมันกระจัดจาย บทความนี้เลยขอโอกาสรวบรวมทุกตอนมาไว้ที่เดียวกันไปเลย อะจัดให้!
บทสรุป
บอกเลยว่าเครดิตของ 2 ฟีเจอร์ใหม่ใน Flex Message นี้มาจากเสียงของนักพัฒนาใน Community ที่ส่ง Feedback มาให้กับทีม LINE โดยแท้จริง หวังว่าทั้ง Bubble size ใหม่ และการปรับขนาด Font + Icon อัตโนมัติ นี้จะช่วยเพิ่มอิสระในการส่งข้อความไปหาผู้ใช้ของคุณได้ดีมากยิ่งขึ้น…แล้วผมจะรอดู Use case การใช้งานฟีเจอร์ใหม่จากนักพัฒนาในบ้านเรา แล้วพบกันใหม่ในบทความหน้า สวัสดีครับ