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 มาก่อน ผมขอแนะนำให้เข้าไปอ่านบทความด้านล่างนี้ก่อน เพื่อความเข้าใจที่มากขึ้นนะครับ

ฉีกกฎการแสดงผลข้อความแบบเดิมๆใน LINE Messaging API ด้วย 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 แบบให้ชัดเจน ผมจึงได้เตรียมตัวอย่างการแสดงผลข้อความของแต่ละขนาดมาให้ดูกันด้วย ตามภาพด้านล่างเลย

ขนาดของน้องใหม่ hecto และ deca เมื่อนำมาเปรียบเทียบกับขนาดของรุ่นพี่

เงื่อนไขในการแสดงผล 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 ของแอป ผลปรากฏว่า…

Button, Icon, และ Text ปรับขนาดตาม Font size ใน Settings

หมายเหตุ

ปัจจุบัน Flex Message Simulator ยังไม่รองรับการปรับขนาด Font และ Icon แบบอัตโนมัติ จากการกำหนด property scaling เป็น true

รวมฟีเจอร์ใน Flex Message ของแต่ละปี

ด้วยมีนักพัฒนาใน Community จำนวนหนึ่งบอกว่า บทความเกี่ยวกับ Flex Message ของผมที่ออกมาแต่ละปีมันกระจัดจาย บทความนี้เลยขอโอกาสรวบรวมทุกตอนมาไว้ที่เดียวกันไปเลย อะจัดให้!

อัพเดท 11 ฟีเจอร์ใหม่ของ Flex Message ปี 2019 อิสระที่แท้ทรูของการออกแบบข้อความใน LINE

10 ฟีเจอร์ใหม่ใน Flex Message ปี 2020 อิสระที่เหนือกว่าของการออกแบบข้อความใน LINE

3 ฟีเจอร์ใหม่ใน Flex Message ปี 2022 อิสระที่ไร้ขีดจำกัดของการออกแบบข้อความใน LINE

บทสรุป

บอกเลยว่าเครดิตของ 2 ฟีเจอร์ใหม่ใน Flex Message นี้มาจากเสียงของนักพัฒนาใน Community ที่ส่ง Feedback มาให้กับทีม LINE โดยแท้จริง หวังว่าทั้ง Bubble size ใหม่ และการปรับขนาด Font + Icon อัตโนมัติ นี้จะช่วยเพิ่มอิสระในการส่งข้อความไปหาผู้ใช้ของคุณได้ดีมากยิ่งขึ้น…แล้วผมจะรอดู Use case การใช้งานฟีเจอร์ใหม่จากนักพัฒนาในบ้านเรา แล้วพบกันใหม่ในบทความหน้า สวัสดีครับ