Image for post
Image for post

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

Jirawatee
Jirawatee
Oct 8, 2020 · 6 min read

เหมือนเป็นธรรมเนียมไปแล้วว่า Flex Message หรือข้อความใน LINE ที่ให้นักพัฒนาสามารถออกแบบได้อย่างอิสระ และแสดงผลได้ในทุก device จะมีอัพเดทมาปีละครั้ง โดยในปี 2020 นี้ ทีม Flex Message ก็ตอบรับเสียงของนักพัฒนา พร้อมออกฟีเจอร์ใหม่ เพื่อมาช่วยเปลี่ยนจินตนาการเป็นข้อความใน LINE ให้ง่ายกว่าเดิม

สำหรับใครที่กำลังอ่านบทความนี้ และยังไม่คุ้นเคยกับ Flex Message ก็แนะนำให้ไปทำความรู้จักกับมันก่อน ที่บทความด้านล่างนี้ครับ

และ 10 ฟีเจอร์ใหม่ที่จะมาช่วยปลดล๊อคข้อจำกัดในการออกแบบข้อความใน Flex Message ของปี 2020 แด้ไก่…เอ้ย!…ได่แก้…เอ้ย!…ได้แก่…เอ้ย!…ถูกแล้ว!!!

  1. APNG Support
  2. Content Alignment
  3. Font size & Icon size in px
  4. Shrink-to-Fit
  5. Gradient Background
  6. Margin & Spacing in px
  7. Image size in px and %
  8. Empty Box
  9. Max size of JSON for a Single Bubble is increased
  10. Max number of bubbles in a Carousel is increased

แค่เห็นชื่อแต่ละฟีเจอร์ ก็เหมือนเห็นหลัง ถ้าอยากเห็นหน้า ตามมาเลย ผมจะเล่าให้ฟัง

1. APNG Support

วันนี้ใครอยากเอาภาพ animation เคลื่อนไหว ดุ๊กดิ๊ก อย่าง APNG มาใช้ใน Flex Message ก็ทำได้แล้วนะ เพียงระบุ property ที่ชื่อ animated เป็น true เข้าไปใน Image component

  • animated: true, false(default)
{
"type": "image",
"url": "https://davidmz.github.io/apng-canvas/images/clock.png",
"animated": true
}
Image for post
Image for post

หมายเหตุ

  • Animation จะทำงานต่อเมื่อผู้ใช้ไม่ได้ disable เมนู Auto-play GIFs ใน Settings > Photos & videos
  • หาก URL ภาพที่ระบุมีขนาดใหญ่กว่า 300KB ตัว animation จะไม่ทำงาน และจะแสดงผลเพียงแค่ frame แรกของภาพเท่านั้น
  • คุณสามารถระบุ animated ได้สูงสุด 3 Image component ต่อ 1 ข้อความ หากระบุมามากกว่า 3 จะไม่สามารถส่งข้อความออกได้

2. Content Alignment

หากพูดถึงการจัดเรียง item ต่างๆภายใน Box เราก็มักใช้ property ต่างๆ เช่น flex, width และ height มาเพื่อแบ่งสัดส่วนของความกว้าง(แนว horizontal) และความสูง(แนว vertical) ควบคู่กับการกำหนดค่า spacing และ margin เพื่อให้เกิดระยะห่างระหว่าง component ภายใน Box นั้นๆ ซึ่งวิธีเดิมแบบนี้เราจะต้องกำหนดค่าต่างๆไปใน component ทุกๆตัว

ปีนี้ทีม Flex Message ได้เตรียม 2 properties ใหม่ ที่คุณสามารถกำหนดที่ Box เพียงที่เดียว แต่มีผลกับการจัดเรียง item ทุกตัว ซึ่งง่ายกว่าเดิมแน่นอน

2.1 justifyContent

Property ที่เข้ามาช่วยในการจัดเรียง item ในแนวทางเดียวกันกับที่เราได้กำหนดใน parent โดย value แต่ละตัวมีคุณสมบัติดังนี้

  • flex-start: เป็นการเรียง item ทั้งหมดจากจุดเริ่มต้น โดยถ้าเป็นแนวนอนก็จะยึดจากค่า direction ที่กำหนดใน bubble ว่าจาก ltr(left-to-right) หรือ rtl(right-to-left) ส่วนถ้าเป็นแนวตั้งก็จะเรียง item ทั้งหมดจากบนลงล่างนั้นเอง
  • center: เป็นการเรียง item ทั้งหมดเข้าสู่จุดศูนย์กลางทั้งแนวตั้งและแนวนอน
  • flex-end: เป็นการเรียง item ทั้งหมดจากจุดสุดท้าย โดยถ้าเป็นแนวนอนก็จะยึดจากค่า direction ที่กำหนดใน bubble ว่าจาก ltr หรือ rtl ส่วนถ้าเป็นแนวตั้งก็จะเรียง item ทั้งหมดจากล่างขึ้นบนนั้นเอง
  • space-between: เป็นการเรียงโดยให item ตัวแรกและตัวสุดท้ายไปชิดขอบแต่ละด้าน ส่วน item ที่เหลือจะแบ่งช่องว่างเท่าๆกันตรงกลางในการแสดงผล
  • space-around: เป็นการเรียงโดยแบ่งระยะห่างของแต่ละ item ออกเท่าๆกันและตามอัตราส่วนของความกว้างและสูงของ item นั้นๆ
  • space-evenly: เป็นการเรียง item โดยแบ่งระยะห่างของแต่ละ item ออกเท่าๆกัน
{
"type": "box",
"layout": "horizontal",
"justifyContent": "flex-start",
"contents": [
{},
{},
{}
]
}
Image for post
Image for post
{
"type": "box",
"layout": "vertical",
"justifyContent": "flex-start",
"height": "200px",
"contents": [
{},
{},
{}
]
}
Image for post
Image for post

2.2 alignItems

Property ที่เข้ามาช่วยในการจัดเรียง item ในแนวทางตรงข้ามกันกับที่เราได้กำหนดใน parent โดย value แต่ละตัวมีคุณสมบัติดังนี้

  • flex-start: ในกรณีที่ parent มีการจัดเรียงแบบ horizontal ตัว item ทั้งหมดจะเรียงจากบนลงล่าง และ ในกรณีที่ parrent มีการจัดเรียงแบบ vertical ตัว item ทั้งหมดจะเรียงจากจุดเริ่มต้น(ขึ้นอยู่กับว่า direction ที่กำหนดใน bubble เป็น ltr หรือ rtl)
  • center: เป็นการเรียง item ทั้งหมดเข้าสู่จุดศูนย์กลางทั้งแนว horizontal และ vertical
  • flex-end: ในกรณีที่ parent มีการจัดเรียงแบบ horizontal ตัว item ทั้งหมดจะเรียงจากล่างขึ้นบน และ ในกรณีที่ parrent มีการจัดเรียงแบบ vertical ตัว item ทั้งหมดจะเรียงจากจุดสิ้นสุด(ขึ้นอยู่กับว่า direction ที่กำหนดใน bubble เป็น ltr หรือ rtl)
{
"type": "box",
"layout": "horizontal",
"alignItems": "flex-start",
"height": "200px",
"contents": [
{},
{},
{}
]
}
Image for post
Image for post
{
"type": "box",
"layout": "vertical",
"alignItems": "flex-start",
"height": "200px",
"contents": [
{},
{},
{}
]
}
Image for post
Image for post

3. Font size & Icon size in px

การกำหนดขนาดของ font ผ่าน property ที่ชื่อ size ใน Text component, Span component และ Icon component เราจะสามารถกำหนดได้จาก pre-defined keyword(xxs(11px), xs(13px), sm(14px), md(16px), lg(19px), xl(22px), xxl(29px), 3xl(35px), 4xl(48px), 5xl(74px)) เท่านั้น และการกำหนดขนาดของ component เหล่านี้ให้ได้ดังใจก่อนหน้านี้คงเป็นแค่เพียงฝัน

แต่บัดนี้ฝันของทุกคนเป็นจริงแล้ว เพราะการกำหนดขนาดของ component ที่ว่ามาทั้งหมดสามารถกำหนดในหน่วยของ pixel ได้แล้วจ้า

  • size: keywords, px
{
"type": "text",
"text": "...",
"contents": [
{
"type": "span",
"text": "LINE",
"size": "32px",
"weight": "bold",
"color": "#00ff00"
},
{
"type": "span",
"text": " Developers",
"size": "24px"
}
]
}
Image for post
Image for post

4. Shrink-to-Fit

การแสดงผลข้อความใน Flex Message ทั้งแบบที่เป็น Text หรือ Button component ในกรณีที่ข้อความมีความยาวมากกว่าความกว้างของตัว component สิ่งที่จะเกิดขึ้นก็คือ ข้อความส่วนที่เกินจะถูกซ่อนแล้วแสดงผลเป็น …(จุด จุด จุด)

ซึ่งก่อนหน้านี้วิธีการที่จะทำให้ข้อความยาวๆแสดงผลได้อย่างครบถ้วนก็คือ การกำหนด property ชื่อ wrap เป็นค่า true แต่ถึงกระนั้นก็อาจส่งผลทำให้ layout เพี้ยนไปได้ เพราะความสูงของ Text หรือ Button component อาจมีการขยายเพื่อแสดงผลข้อความ

ดังนั้น Flex Message ปี 2020 จึงขอเสนอ adjustMode ซึ่งเป็น property ที่จะเข้ามาช่วยลดขนาด font ให้พอดีกับความกว้างของ component แบบอัตโนมัติ เพื่อที่ layout จะได้คงเดิมรูปตามที่ออกแบบไว้

  • adjustMode: shrink-to-fit
{
"type": "button",
"action": {
"type": "uri",
"label": "Buy a coffee to your friends anywhere",
"uri": "http://line.me"
},
"style": "primary",
"adjustMode": "shrink-to-fit"
}
Image for post
Image for post

หมายเหตุ

  • adjustMode จะสามารถแสดงผลได้ในแอป LINE v10.13.0 เป็นต้นไป

5. Gradient Background

เมื่อปีที่แล้ว เราสามารถเปลี่ยนสีพื้นหลังของ Box ได้ด้วย property ที่ชื่อว่า backgroundColor ด้วยรหัสสีที่เป็น hex color ซึ่งรองรับการทำ alpha(rgba) ได้แล้ว

ส่วนในปีนี้ ทีม Flex Message ก็ให้เราสามารถกำหนดสีพื้นหลังแบบไล่เฉดสีด้วย property ที่ชื่อ background ได้เพิ่มขึ้นมา โดยภายในจะประกอบไปด้วย property ย่อยๆดังนี้

  • type: linearGradient (Required)
  • angle: 0deg — 360deg องศาสำหรับจุดเริ่มต้นของการไล่เฉดสี ซึ่งสามารถกำหนดเป็นทศนิยมได้ เช่น 88.8deg (Required)
  • startColor: รหัสสีจุดเริ่มแบบ hex color 6 หรือ 8 ตัวก็ได้ (Required)
  • endColor: รหัสสีจุดสิ้นสุดแบบ hex color 6 หรือ 8 ตัวก็ได้ (Required)
  • centerColor: รหัสสีตรงกลางแบบ hex color 6 หรือ 8 ตัวก็ได้
  • centerPosition: 0 — 100% ของตำแหน่งที่จะเริ่มไล่เฉดสีของ centerColor ใน Box นั้นๆ ซึ่งสามารถกำหนดเป็นทศนิยมได้ เช่น 88.8%
{
"type": "box",
"layout": "vertical",
"contents": [],
"background": {
"type": "linearGradient",
"angle": "0deg",
"startColor": "#ff4d79",
"centerColor": "#ff0000",
"endColor": "#ffdb2c",
"centerPosition": "50%"
},
"height": "200px"
}
Image for post
Image for post

6. Margin & Spacing in px

ก่อนหน้านี้การกำหนดช่องว่างผ่าน property ทั้ง margin และ spacing ใน Flex Message เราจะสามารถกำหนดได้จาก pre-defined keyword(none, xs, sm, md, lg, xl, xxl) เท่านั้น

แต่เพื่อความละเอียดและแม่นยำในการออกแบบข้อความที่มากขึ้น ปีนี้ทีม Flex Message เลยให้เราสามารถระบุช่องว่างในหน่วยของ pixel ได้แล้ว

  • margin: keywords, px
{
"type": "text",
"text": "Hello World!",
"margin": "16px"
}
  • spacing: keywords, px
{
"type": "box",
"layout": "horizontal",
"spacing": "16px",
"contents": [
{
"type": "text",
"text": "grape"
},
{
"type": "separator"
},
{
"type": "text",
"text": "lemon"
}
]
}
Image for post
Image for post

หมายเหตุ

ตั้งแต่นี้ component ที่ระบุ margin ทุกตัวใน Box จะสามารถใช้เพื่อการเว้นระยะห่างได้ (ก่อนหน้านี้จะไม่มีผลกับ component ที่อยู่เป็นตัวแรกใน Box)

7. Image size in px and %

ก่อนหน้านี้การกำหนดขนาดของรูป เราจะสามารถกำหนดผ่าน property ที่ชื่อ size ได้จาก pre-defined keyword(xxs, xs, sm, md, lg, xl, xxl, 3xl, 4xl, 5xl, full) เท่านั้น ซึ่งเอาเข้าจริง การกำหนดขนาดลักษณะนี้ก็ยังไม่ถือว่ามีอิสระซะทีเดียว

แต่จากนี้ คุณจะสามารถกำหนด size ของ Image component ในหน่วย pixel และ percentage ได้แล้วนะ โดยการกำหนด size จะถือเป็นการกำหนดความกว้าง(width) ของรูปภาพ ส่วนความสูงจะถูกคำนวนให้อัตโนมัติ

  • size: keywords, px, %
{
"type": "image",
"url": "https://apng.onevcat.com/assets/elephant.png",
"size": "80%"
}
Image for post
Image for post

8. Empty Box

Box คือ component ที่ช่วยในการจัด layout ของ Flex Message มีลักษณะคล้ายกับ <div> ที่ซ้อนกันได้หลายๆชั้นในการพัฒนาเว็บ

โดยเมื่อเรากำหนดมันขึ้นมา เราก็จำเป็นจะต้องกำหนด object ที่ชื่อ contents ซึ่งภายในประกอบไปด้วย array ของ items ต่างๆ แต่หากเราเผลอสร้าง Box เพลิน โดยลืมระบุ item ลงไปใน contents แม้เพียง Box เดียว เราก็จะไม่สามารถส่งข้อความออกได้

{
"type": "box",
"layout": "vertical",
"contents": []
}

แต่เพื่อความยืดหยุ่นในการใช้งานที่มากขึ้น ปี 2020 นี้ทีม Flex Message จึงให้คุณสามารถส่งข้อความออกได้ แม้คุณจะไม่ได้ระบุ item ลงไปใน contents ก็ตาม

9. Max size of JSON for a Single bubble is increased

ไม่เชื่อก็ต้องเชื่อว่าก่อนหน้านี้ มีนักพัฒนาใน community เรา ที่สร้าง Flex Message แบบ single bubble แล้วขนาดของ JSON มันทะลุลิมิต 10KB กันมาแล้ว ซึ่งวิธีแก้ไขเพื่อให้ส่งข้อความได้ก็คือต้องตัดทอนรายละเอียดในข้อความออกนั่นเอง

แต่จากนี้ไปคุณจะสามารถระบุรายละเอียดในข้อความได้มากกว่าเดิมถึง 3 เท่า เพราะขนาดของ JSON ใน Flex Message แบบ single bubble ได้ขยายลิมิตเป็น 30KB เรียบร้อยแล้ว

10. Max number of bubbles in a Carousel is increased

หลายคนน่าจะทราบกันเป็นอย่างดีว่าการสร้างข้อความแบบ Carousel ใน LINE ทั้งที่เป็น Template Messages หรือ Flex Message ก็ดี จะสามารถมีจำนวน bubble ได้สูงสุด 10 bubbles ต่อ 1 ข้อความ

แต่โชคก็เข้าข้างคนที่ได้อ่านบทความมาถึงตรงนี้ เพราะผมจะบอกว่าวันนี้ Flex Message ให้คุณมีจำนวน bubble ได้สูงสุดถึง 12 bubbles ต่อ 1 ข้อความแล้วนาจา

ปิดท้าย

ต้องบอกเลยว่าฟีเจอร์ทั้งหมดทั้งมวลที่โผล่มาในปี 2020 นี้ มาจากการที่ทีม Flex Message ได้ฟังเสียงของนักพัฒนาแล้วนำไปปรับปรุงบริการโดยแท้จริง ซึ่งผมต้องขอขอบคุณนักพัฒนาชาวไทยรวมถึงกลุ่ม LINE API Expert ที่ช่วยให้ feedback และ request ฟีเจอร์ใหม่ๆมา ณ ที่นี้ด้วยครับ สุดท้ายนี้ก็ขอปิดท้ายบทความแบบหล่อๆด้วยประโยคที่ว่า…

A Technology without a Community has no Meaning.

LINE Developers Thailand

Closing the distance.

Thanks to Traitanit Huangsri and Warit Wanwithu

Jirawatee

Written by

Jirawatee

Technology Evangelist at LINE Thailand / Google Developer Expert - 🔥Firebase

LINE Developers Thailand

Closing the distance. Our mission is to bring people, information and services closer together

Jirawatee

Written by

Jirawatee

Technology Evangelist at LINE Thailand / Google Developer Expert - 🔥Firebase

LINE Developers Thailand

Closing the distance. Our mission is to bring people, information and services closer together

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store