ฉีกกฎการแสดงผลข้อความแบบเดิมๆใน LINE Messaging API ด้วย Flex Message

ใครที่เล่น LINE Messaging API มาแล้ว ก็คงทราบว่า LINE มีรูปแบบการแสดงผลของข้อความหลายแบบไม่ว่าจะเป็น Text, Image, Sticker, Video, Audio, Location, Imagemap และ Template

โดยรูปแบบข้อความที่กล่าวมาทั้งหมด จะเป็นรูปแบบที่ทาง LINE กำหนดมา ซึ่งเราสามารถออกแบบได้ตามรูปแบบที่กำหนดไว้เท่านั้น หากเราต้องการแสดงผลข้อความที่แปลกแตกต่างไปเพื่อความน่าสนใจ ก็ยังเป็นข้อจำกัดอยู่…แต่ข้อจำกัดเหล่านั้นจะหมดไปทันที เมื่อคุณได้อ่านบทความนี้ บทความนี้จะช่วยให้คุณทลายข้อจำกัดการแสดงผลแบบเดิมๆที่มีไปตลอดกาล ว๊ะ​ ฮา ฮา

รู้จัก Flex Message

Flex Message หรือ Flexible Message เป็นการแสดงผลข้อความที่นักพัฒนาสามารถออกแบบได้อย่างอิสระ ทั้งแนวตั้งแนวนอน ภายในบรรจุได้ทั้ง button, icon, image, text และอื่นๆ รวมถึงสามารถสร้าง action จาก button และ image ได้

การพัฒนาก็คล้ายๆกับ message ประเภทอื่นๆ คือเป็นการสร้างข้อความขึ้นมาในรูปแบบ JSON โดย type ที่เราจะส่งเข้าไปที่ Messaging API จะเป็น flex ตามรูปแบบด้านล่างนี้

{
    "type": "flex",
    "altText": "This is a Flex message",
    "contents": {
        // เนื้อหาตรงนี้อ่านต่อเลยจ้า
    }
}

โครงสร้างภายในของ Flex Message จะประกอบไปด้วย 3 ชั้นคือ

1. Container
2. Block
3. Component

1. Container

เป็นโครงสร้างชั้นนอกสุดของ Flex Message มีได้ 2 รูปแบบ คือ Bubble และ Carousel

1.1 Bubble container เป็นข้อความเดี่ยว ที่มี element ใน JSON ดังต่อไปนี้

• direction: ทิศทางการแสดงผล text โดยค่า default คือซ้ายไปขวา หรือ ltr
• Styles: ส่วนที่เราสามารถระบุสี background และเส้นคั่น ของแต่ละ block
• separator: เส้นคั่นที่จะอยู่ส่วนบนสุดของ block และจะไม่แสดงผลหาก block นั้นเป็น block แรก

1.2 Carousel container เป็นข้อความที่บรรจุข้อความเดี่ยว(bubble) ภายใน สามารถเลื่อนซ้ายขวาเพื่อดูแต่ละ bubble ได้ ซึ่ง JSON จะอยู่ในรูปแบบของ Array

จากตัวอย่างด้านบนจะเห็นว่า ผู้เขียนไม่ได้ระบุ direction, header และ hero ใน bubble ก็เพราะว่าเราไม่จำเป็นต้องระบุทุก component ในการสร้างนั่นเอง

2. Block

เป็นโครงสร้างชั้นกลางของ Flex Message แบ่งออกเป็น 4 ส่วน และในการสร้างข้อความเราสามารถระบุบางส่วนหรือทุกส่วนก็ได้

• Header เป็นส่วนแสดงหัวข้อ
• Hero เป็นส่วนแสดงรูปภาพ cover
• Body เป็นส่วนแสดงเนื้อหาหลัก
• Footer เป็นส่วนแสดงข้อมูลเพิ่มเติม

Block แต่ละตัวสามารถมี component ซ้อนกันภายในได้มากมาย ยกเว้น Hero ที่มี component ที่เป็นชนิด image ได้ชุดเดียว

3. Component

เป็นโครงสร้างชั้นในสุดของ Flex Message ประกอบไปด้วย 2 กลุ่ม คือกลุ่ม component สำหรับสร้างข้อความ และกลุ่ม component สำหรับการปรับแต่ง layout

กลุ่ม component สำหรับสร้างข้อความ มี 4 ชนิด

3.1 Button

• type: button
• action: (postback, message, uri และ datetime picker)
• flex: ค่าน้ำหนักในการแบ่งสัดส่วนสำหรับ component ทั้งแนวตั้งและแนวนอนภายใน box โดยค่า default ในแนวตั้งคือ 0 และค่า default ในแนวนอนคือ 1

ตัวอย่างใน box มี text 3 ชุด จากนั้นใช้ค่า flex มาแบ่งสัดส่วนการแสดงผล

• margin: (none, xs, sm, md, lg, xl, xxl) ระยะห่างระหว่างปุ่มที่ระบุและ component ก่อนหน้า แต่จะไม่มีผลถ้าปุ่มที่ระบุเป็น component ตัวแรกใน box
• height: (sm ,md) ส่วนสูงของปุ่ม โดยค่า default คือ md
• color: สีของ background ในกรณีเลือก style เป็น primary หรือ secondary และ สีของ text ในกรณีเลือก style เป็น link
• gravity: (top, center, bottom) การเรียงตัวของปุ่มในแนวตั้ง โดยค่า default เป็น top แต่จะไม่ส่งผลในกรณีที่เลือก layout ใน box เป็น baseline
• style: (primary, secondary, link) การแสดงผลปุ่มแบบ สีเข้ม, สีอ่อน และ text ลิงค์ ตามลำดับ โดยค่า default คือ text ลิงค์

Button component

3.2 Icon

• type: icon
• url: ใช้ HTTPS, นามสกุล JPG หรือ PNG, resolution ไม่เกิน 240x240 px และขนาดไม่เกิน 1MB
• margin: (none, xs, sm, md, lg, xl, xxl) ระยะห่างระหว่าง icon ที่ระบุและ component ก่อนหน้า ในแนวนอน แต่จะไม่มีผลถ้า icon ที่ระบุ เป็น component ตัวแรกใน box
• size: (xxs, xs, sm, md, lg, xl, xxl, 3xl, 4xl, 5xl) ขนาดของ icon โดยค่า default คือ md
• aspectRatio: อัตราส่วนพื้นที่ของความกว้างและความสูง width:height ซึ่งสามารถกำหนดได้ตั้งแต่ 1–1000000 โดยมีเงื่อนไขว่า height ต้องใหญ่ไม่เกิน 3 เท่าของ width โดยค่า default เป็น 1:1

Icon component

3.3 Image

• type: image
• url: ใช้ HTTPS, นามสกุล JPG หรือ PNG, resolution ไม่เกิน 1024x1024 px และขนาดไม่เกิน 1MB
• flex: ค่าน้ำหนักในการแบ่งสัดส่วนสำหรับ component ทั้งแนวตั้งและแนวนอนภายใน box โดยค่า default ในแนวตั้งคือ 0 และค่า default ในแนวนอนคือ 1
• margin: (none, xs, sm, md, lg, xl, xxl) ระยะห่างระหว่างรูปที่ระบุและ component ก่อนหน้า แต่จะไม่มีผลถ้ารูปที่ระบุเป็น component ตัวแรกใน box
• align: (start, center, end) การเรียงตัวของรูปในแนวนอน โดยค่า default เป็น center
• gravity: (top, center, bottom) การเรียงตัวของรูปในแนวตั้ง โดยค่า default เป็น top แต่จะไม่ส่งผลในกรณีที่เลือก layout ใน box เป็น baseline
• size: (xxs, xs, sm, md, lg, xl, xxl, 3xl, 4xl, 5xl, full) ขนาดของรูปโดยค่า default คือ md
• aspectRatio: อัตราส่วนพื้นที่ของความกว้างและความสูง width:height ซึ่งสามารถกำหนดได้ตั้งแต่ 1–1000000 โดยมีเงื่อนไขว่า height ต้องใหญ่ไม่เกิน 3 เท่าของ width โดยค่า default เป็น 1:1
• aspectMode: (cover, fit) รูปแบบการแสดงผลของรูป โดยค่า default เป็น fit
• backgroundColor: สีที่เป็น hexadecimal เช่น #cc0000
• action: (postback, message, uri และ datetime picker)

Image component

3.4 Text

• type: text
• text: ข้อความ
• flex: ค่าน้ำหนักในการแบ่งสัดส่วนสำหรับ component ทั้งแนวตั้งและแนวนอนภายใน box โดยค่า default ในแนวตั้งคือ 0 และค่า default ในแนวนอนคือ 1
• margin: (none, xs, sm, md, lg, xl, xxl) ระยะห่างระหว่างข้อความที่ระบุและ component ก่อนหน้า แต่จะไม่มีผลถ้าข้อความที่ระบุเป็น component ตัวแรกใน box
• size: (xxs, xs, sm, md, lg, xl, xxl, 3xl, 4xl, 5xl) ขนาดของข้อความโดยค่า default คือ md
• align: (start, center, end) การเรียงตัวของข้อความในแนวนอน โดยค่า default เป็น start
• gravity: (top, center, bottom) การเรียงตัวของข้อความในแนวตั้ง โดยค่า default เป็น top แต่จะไม่ส่งผลในกรณีที่เลือก layout ใน box เป็น baseline
• wrap: (true, false) การตัดคำขึ้นบรรทัดใหม่กรณีที่พื้นที่การแสดงผลข้อความในบรรทัดนั้นเต็ม โดยค่า default คือ false หากเต็มจะแสดงข้อความส่วนที่เกินเป็น …(จุด จุด จุด)
• maxLines: จำนวนบรรทัดสูงสุดที่สามารถแสดงข้อความ โดยค่า default คือ 0 เป็นการแสดงข้อความแบบไม่จำกัดบรรทัด ซึ่งเราสามารถระบุตัวเลขบรรทัดตามต้องการได้ แต่หากข้อความเกินบรรทัดที่เราระบุ ส่วนที่เกินจะแสดงเป็น … (จุด จุด จุด)
• weight: (regular, bold) ความหนาของข้อความ โดยค่า default คือ regular
• color: สีของข้อความ
• action: (postback, message, uri และ datetime picker)

Text component

กลุ่ม component สำหรับการปรับแต่ง layout

3.5 Box

• type: box
• layout: (vertical, horizontal, baseline) เป็นทิศทางการเรียงลำดับของ component ภายใน ทั้ง vertical และ horizontal คงไม่ต้องอธิบายละเนอะ แต่สำหรับ baseline จะคล้าย horizontal เพียงแต่การเรียงลำดับจะเหมือนมีเส้นที่ทุก component ต้องมายึดไว้ ตามรูปด้านล่าง

• contents: เป็นที่บรรจุ array ของ component โดยถ้า layout เป็น vertical หรือ horizontal ภายในสามารถบรรจุ box, button, filler, image, separator และ text ได้ แต่หาก layout เป็น baseline จะสามารถบรรจุ filler, icon และ text ได้เท่านั้น
• flex: ค่าน้ำหนักในการแบ่งสัดส่วนสำหรับ component ทั้งแนวตั้งและแนวนอนโดยค่า default ในแนวตั้งคือ 0 และค่า default ในแนวนอนคือ 1
• spacing: (none, xs, sm, md, lg, xl, xxl) ช่องว่างระหว่าง component ภายใน box และตัว box โดยค่า default คือ none
• margin: (none, xs, sm, md, lg, xl, xxl) ระยะห่างระหว่าง box ที่ระบุและ component ก่อนหน้า แต่จะไม่มีผลถ้า box ที่ระบุ เป็น component ตัวแรกใน parent box
• action: (postback, message, uri และ datetime picker)

ในการออกแบบ box จะซ้อน box กี่ชั้นก็ได้ ตามที่เราสบายใจ

Box component

3.6 Filler เป็น component ว่างเปล่าที่เอาไว้เติมเต็มช่องว่างระหว่าง component

• type: filler

Filler component

3.7 Separator เป็นเส้นคั่นระหว่าง component ได้ทั้งแนวตั้งและแนวนอน

• type: separator
• margin: (none, xs, sm, md, lg, xl, xxl) ระยะห่างระหว่างเส้นที่ระบุและ component ก่อนหน้า แต่จะไม่มีผลถ้า separator ที่ระบุ เป็น component ตัวแรกใน box
• color: สีที่เป็น hexadecimal เช่น #cc0000

Separator component

3.8 Spacer เป็นช่องว่างที่คั่นส่วนบนสุดของ box และ component ตัวแรก หรือ ส่วนล่างสุดของ box และ component ตัวสุดท้าย

• type: spacer
• size: (xs, sm, md, lg, xl,xxl) ขนาดของช่องว่าง โดยค่า default คือ md

Spacer component

Simulator

ใครอ่านถึงตรงนี้แล้วรู้สึกคันไม้คันมือ ก็สามารถไปทดลองสร้าง Flex Message กับ LINE Bot Designer ได้ ซึ่งเครื่องมือตัวนี้จะช่วยให้เราสร้าง Prototype ได้แบบง่ายดาย แบบโค้ดก็ไม่ต้องเขียนเอง โดยมีตัวอย่างเริ่มต้นมาให้ 6 แบบด้วยกัน ที่เหลือก็อยู่ที่จินตนาการของแต่ละคนแล้ว

https://developers.line.biz/en/services/bot-designer/

ข้อจำกัดของ Flex Message

1. Carousel container บรรจุ bubble ได้สูงสุด 10 bubbles
2. รองรับใน LINE app ตั้งแต่เวอร์ชัน 6.7.0 เป็นต้นไป
3. action ใน Box component จะรองรับใน LINE สำหรับ iOS เวอร์ชัน 8.0.0 และ Android 6.7.0 เป็นต้นไป
4. property ชื่อ maxLines จะรองรับใน LINE สำหรับ iOS และ Android เวอร์ชัน 8.11.0 เป็นต้นไป

อัพเดท 11 ฟีเจอร์ใหม่ใน Flex Message ปี 2019

เพิ่มเติมจากเนื้อหาในบทความ ปี 2019 นี้ทีม Flex Message ก็ออกฟีเจอร์ใหม่มาเพิ่มอีก 11 ฟีเจอร์ด้วยกัน ใครสนใจอ่านต่อบทความด้านล่างนี้เลยครับ

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

สรุป

ถึงตอนนี้ผู้อ่านคงได้ทราบทุกซอกทุกมุมของ Flex Message แล้ว สิ่งที่จะยืนยันความสำเร็จของพวกเราเหล่านักพัฒนาได้นั้นก็คือ การยิง Message รูปแบบนี้ออกไปที่ LINE Messaging API เอาหละอย่าได้ช้าที เตรียม Channel Access Token, UID ปลายทาง และข้อความ Flex Message ใน Postman ให้พร้อมสรรพ

พร้อมแล้วก็ซัดเลย Hello World! เต็มๆข้อ…จากนั้นไม่นาน ไม่เกินช่วงเคี้ยวหมากแหลก จริงๆก็เพียงเสี้ยววินาทีเท่านั้นหละ Flex Message ก็วิ่งเข้า LINE ของเราแล้ว

สุดท้ายนี้ก็หวังเป็นอย่างยิ่งว่านักพัฒนาจะนำ Flex Message ไปสร้างสรรค์ข้อความตามจินตนาการ รูปแบบใหม่ๆ เพิ่มความน่าสนใจในสินค้าและบริการผ่านข้อความของ LINE Chatbot ได้ ใครนำไปใช้แล้ว ก็อย่าลืมส่งมาให้ผู้เขียนได้เชยชมกันบ้าง สำหรับวันนี้ขอตัวลาไปก่อน Happy coding ครับ