Flex Message

Flex Message “ Flex Message ลูกเล่นการส่งข้อความอัโนมัติ บน LINE ที่สรา้งด้วยตัวเราเอง ”

ภัทราวรรณ พุ่มนิคม 13580228

รู้จัก Flex Message ?

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

ภัทราวรรณ พุ่มนิคม 13580228

โครงสร้างภายในของ Flex Message Flex message ประกอบไปด้วยโครงสร้าง ข้อมูล 3 แบบ คือ Container, Block และ Component จะเห็นได้ว่า container จะเป็นส่วนนอกสุดของ message และ ข้างในจะมี block ในแบบต่างๆ เช่น Header, Hero, Body และ Footer และส่วนในสุดจะประกอบไปด้วย component หลายๆ แบบ เช่น Text, Image, Icon และ Button

ภัทราวรรณ พุ่มนิคม 13580228

Container คือ top-level ของ Flex Message เรียกง่ายๆ ว่าชุดข้อความที่เราจะส่ง ซึ่งใน container นี้จะมีอยู่ 2 รูปแบบ คือ Bubble และ Carousel

Container เป็นส่วนนอกสุดของ message มี 2 แบบด้วยกัน คือ Bubble — เป็นการแสดง message เดียว Carousel — เป็นการแสดงหลายๆ message และสามารถ เลื่อนได้

ภัทราวรรณ พุ่มนิคม 13580228

Block เป็นโครงสร้างชั้นกลางของ Flex Message แบ่งออกเป็น 4 ส่วน และในการสร้างข้อความ เราสามารถระบุบางส่วนหรือทุกส่วนก็ได้ ซึ่งในแต่ละส่วน มันจะเรียงลำดับแบบนี้เสมอ ไม่ว่าเราจะใส่ ข้อมูลส่วนไหนก่อนก็ตามและ เราจะใส่ block ได้เพียงประเภทเดียว จะใส่ body ครั้งไม่ได้ หากเราจะแสดงแบบ 2 body จะใช้วิธีสร้าง box แยกเองได้ Block เป็นส่วนข้างใน Container โดยมี องค์ประกอบต่างๆ ดังนี้ Header — เป็น block ที่แสดงสวนหัว Hero — เป็น block ที่แสดง image หลัก Body — เป็น block ที่แสดง ข้อความหลัก Footer — เป็น block ที่แสดงส่วนด้านล่าง

ภัทราวรรณ พุ่มนิคม 13580228

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

ภัทราวรรณ พุ่มนิคม 13580228

Button —แสดงปุ่มบน message Icon — แสดงไอคอนบน message

ภัทราวรรณ พุ่มนิคม 13580228

Image — แสดงรูปภาพบน message Text —แสดงข้อความบน message

ภัทราวรรณ พุ่มนิคม 13580228

Box — ี่ระบุโครงสร้างของ component ลูก Filler — เป็น component ที่มองไม่เห็นที่มี ความกว้างและความสูงเท่านั้น

ภัทราวรรณ พุ่มนิคม 13580228

Separator —สร้างตัว separator Spacer —สร้างส่วนว่างๆ

ภัทราวรรณ พุ่มนิคม 13580228

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

ภัทราวรรณ พุ่มนิคม 13580228

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

ภัทราวรรณ พุ่มนิคม 13580228

คุณสมบัติ - เราสามารถสร้างโครงสร้าง message ที่ซับซ้อนได้ โดยรวมโครงสร้างแนวตั้งและ แนวนอนด้วยระบบ box-layout - เราสามารถแสดง message ในแบบ carousel (ข้อความแบบหมุน) โดยที่ user สามารถเลื่อนดู หลายๆ message ได้ - เราสามารถตั้งทิศทางของข้อความเลื่อนได้ จากซ้ายไปขวา หรือ จากขวามาซ้าย

ภัทราวรรณ พุ่มนิคม 13580228

World Cup มาประยุกต์กับ Flex Message

ภัทราวรรณ พุ่มนิคม 13580228

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

ภัทราวรรณ พุ่มนิคม 13580228