3 ฟีเจอร์ใหม่ใน Flex Message ปี 2022 อิสระที่ไร้ขีดจำกัดของการออกแบบข้อความใน LINE
เชื่อว่านักพัฒนาที่เป็นแฟนพันธุ์แท้ของ LINE ต่างรอคอยการมาของฟีเจอร์ใหม่ๆใน Flex Message เพื่อมาเติมเต็มจินตนาการในการแสดงผลข้อความใน LINE แบบ “Think out of the box” ทั้งการส่งผ่าน LINE Chatbot ก็ดี หรือส่งผ่าน LIFF app ก็เกร๋
สำหรับใครที่เปิดมาเจอบทความนี้ แล้วได้ยินคำว่า Flex Message เป็นครั้งแรก ก็อยากแนะนำให้ไปทำความรู้จักกับความสามารถของมันที่บทความนี้ก่อนนะครับ
เรามารู้จักกับ 3 ฟีเจอร์ใหม่ใน Flex Message ปี 2022 ที่จะมาช่วยให้คุณสามารถสื่อสารกับผู้ใช้บริการได้อย่างมีสิทธิภาพ รวมถึงสามารถแสดงตัวตนความเป็นคุณให้มากขึ้นกันเลย
- Video Component
- Max Width และ Max Height ใน Box Component
- Line Spacing ใน Text Component
1. Video Component
หนึ่งในฟีเจอร์ที่นักพัฒนาที่เล่น Flex Message ในบ้านเรารอคอยกันมานานก็ได้คลอดออกมาแล้ว ซึ่งตอนนี้เราสามารถเพิ่มวิดีโอลงไปใน Hero block ได้แล้วนาจา
Property ภายใน Video Component
- type:
video(required) - url: URL ของไฟล์วิดีโอที่รองรับ HTTPS(TLS 1.2 หรือใหม่กว่า) และมีนามสกุลเป็น mp4 โดยขนาดของไฟล์จะต้องไม่เกิน 200MB (required)
- previewUrl: URL ของภาพพรีวิวที่รองรับ HTTPS(TLS 1.2 หรือใหม่กว่า) และมีนามสกุลเป็น JPEG, JPG หรือ PNG โดยขนาดของไฟล์จะต้องไม่เกิน 1MB (required)
- altContent: เป็น property ที่สามารถบรรจุ
BoxหรือImagecomponent ลงไป ซึ่งจะใช้แสดงผลในกรณีที่ LINE ของผู้ใช้เป็นเวอร์ชันที่ไม่รองรับการแสดงวิดีโอ (required) - aspectRatio: อัตราส่วนพื้นที่การแสดงผลวิดีโอ
width:heightโดยมีเงื่อนไขว่า height จะต้องใหญ่ไม่เกิน 3 เท่าของ width และมีค่า default เป็น 1:1 - action: ลิงก์ที่จะแสดง กรณีที่กดดูวิดีโอแบบเต็มหน้าจอ หรือในกรณีที่ดูวิดีโอจบ ซึ่งจะรองรับ Action ที่เป็นแบบ URI เท่านั้น
เงื่อนไขการใช้งาน
- Video component จะต้องอยู่ภายใน Hero block เท่านั้น
- ขนาดของ Bubble ที่รองรับการแสดงผล video component จะมี 3 ขนาด ได้แก่
kilo,megaและgiga - Video component ไม่สามารถใช้กับ Carousel container ได้
หมายเหตุ: ค่าของ aspectRatio และ ratio ของภาพใน previewUrl ควรเป็นแบบเดียวกัน เพื่อการแสดงผลที่งดงาม
2. Max Width และ Max Height ใน Box Component
maxWidth และ maxHeight 2 properties ใหม่ที่จะเข้ามาควบคุมความกว้างและความสูงของ child ทั้งหมดไม่ให้เกินไปกว่าค่าที่กำหนดใน maxWidth หรือ maxHeight ใน Box component ที่เป็น parent
Property ใหม่ที่เพิ่มเข้ามาใน Box Component
- maxWidth: ความกว้างมากที่สุดของ Box ในหน่วย px หรือ % เช่น 75%
- maxHeight: ความสูงมากที่สุดของ Box ในหน่วย px หรือ % เช่น 40px
ปกติใน Button เราจะไม่สามารถกำหนด width ให้ได้ แต่จากตัวอย่างเราเอา Box ไปครอบ Button ไว้ แล้วกำหนด maxWidth เป็น 75% ที่ Box ทำให้ตัว Button ไม่สามารถจะแสดงความกว้างไปเกินกว่าความกว้าง Box ซึ่งเป็น parent ของมันได้
ส่วน Button สีเทา ผมก็เอา Box ไปครอบแล้วกำหนด maxHeight เป็น 40px จึงทำให้ตัว Button ไม่สามารถแสดงความสูงได้เกินกว่าความสูงของ Box ซึ่งเป็น parent ของมันได้
3. Line Spacing ใน Text Component
ถึงเวลาจบปัญหา สระลอย หรือ สระจม กับภาษาไทย เพราะ LINE ได้เพิ่ม property ชื่อ lineSpacing ที่เข้ามาช่วยถ่างและขยายพื้นที่ว่างระหว่างบรรทัดของ Text component แล้ว
Property ใหม่ที่เพิ่มเข้ามาใน Text Component
- lineSpacing: ตัวเลขจำนวนเต็มบวก และ ทศนิยม ในหน่วยของ pixel
หมายเหตุlineSpacing จะไม่มีผลกับระยะห่างด้านบนของข้อความบรรทัดแรก และระยะห่างด้านล่างของข้อความบรรทัดสุดท้าย
สรุป
เรียกได้ว่าคุ้มค่ากับการรอคอยจริงๆกับ Flex Message 2022 โดยเฉพาะ Video component ที่ในที่สุดก็มาสักที และ lineSpacing ที่เข้ามาช่วยให้การแสดงผลภาษาไทยสมบูรณ์โดยไม่ต้องไป hack มันละ หวังว่าเนื้อหาในบทความนี้จะทำให้ทุกคนได้เห็นภาพ ว่าจะเอาฟีเจอร์ใหม่ๆเหล่านี้ไปใช้ประโยชน์ได้อย่างไรนะครับ
โดยวันนี้ใครที่อยากจะทดลองฟีเจอร์ใหม่ๆใน Flex Message 2022 แบบง่ายๆ แบบที่ออกแบบเสร็จแล้วกดส่งเข้า LINE ของคุณทันที ก็สามารถไปลองเล่นกันได้แล้วที่ Flex Message Simulator
และถ้าคุณชอบบทความนี้ก็ฝากกด Clap เป็นกำลังใจให้ผม หากมันเป็นประโยชน์ก็ฝากกด Share ให้เพื่อนของคุณ และเพื่อที่คุณจะไม่พลาดบทความถัดๆไปก็ฝากกดติดตามตัว Publication ไว้ด้วยนะครับ สำหรับวันนี้ต้องขอตัวลาไปก่อน แล้วพบกันใหม่บทความหน้าครับ
