จับกระแส World Cup มาลองเล่น LINE Flex Message

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

ส่วนใครที่ยังไม่รู้จัก LINE Flex Message ลองศึกษาเบื้องต้นได้จาก Blog ของคุณตี๋ ดูก่อนครับ

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

อ่ะ พร้อมแล้ว ก็มาลองดูกันครับ ว่า Flex Message มันจะแน่ สักแค่ไหน

หน้าจอแรก (เมนู)

เริ่มต้นจากการออกแบบหน้าจอแรก ที่ผู้ใช้จะเห็นก่อน ผมอยากลองใช้ components ต่างๆของ Flex Bubble ให้ครบถ้วน ทั้ง header , hero, body, footer เลยออกแบบส่วนต่างๆ ดังนี้

• header : ข้อความ FIFA World Cup 2018
• hero : ภาพ background รูปถ้วย FIFA
• body : แบ่งออกเป็น 2 ส่วน คือ
  1. แสดง Live Score (จะแสดงส่วนนี้ เฉพาะเวลาที่มีการแข่งขัน) และ
  2. Menu (button) สำหรับไปดูข้อมูลส่วนอื่นๆ (Last Match / Next Match / Schedule / Table)
• footer : ส่วนของปุ่ม View Source (button) สำหรับดู source ของ flex message ที่ส่งให้ LINE

ก็จะได้ component หน้าตา ออกมาแบบนี้

หน้าจอ Flex Message แรก

ถ้ากดดูปุ่ม View Source ในส่วนของ footer ก็จะเห็น json ที่เราส่งไปสร้างข้อความนี้ ดังนี้ https://gist.github.com/kamnan43/8a754e2e665967c43b4829df4dc4a552

ซึ่ง json ที่ได้มานี้ สามารถนำไปทดสอบใน Flex Message Simulator (https://developers.line.me/console/fx/) ได้ทันที สำหรับเอาไปปรับแก้ไข ตามสไตล์ที่ต้องการได้เลยครับ เมื่อกด Preview ก็จะได้หน้าตาออกมาแบบเดียวกันเด๊ะๆ

Flex Simulator

หน้าจอตารางคะแนน

ต่อมา ผมออกแบบหน้าจอแสดงตารางคะแนน ซึ่งน่าจะเป็นส่วนที่ง่ายที่สุด โดยออกแบบให้ใช้ Flex Message แบบ Carousel (1 กลุ่มการแข่งขันต่อ 1 Bubble) และในแต่ละ Bubble ได้แบ่งส่วนต่างๆ ดังนี้

• header : ชื่อกลุ่ม
• hero : ไม่ใช้
• body : แบ่งออก 3 ส่วน ซ้อนกันอยู่ใน vertical box
  1. หัวตาราง (text ใน horizontal box)
  2. เส้นคั่นตาราง (separator)
  3. ตารางคะแนนแต่ละทีม (text+icon ใน horizontal box)
• footer : ส่วนของปุ่ม Schedule เพื่อดูตารางการแข่งขัน (button) และปุ่ม View Source สำหรับดู source ของ flex message ที่ส่งให้ LINE

ในส่วนของ source ก็จะได้ ตามนี้ครับ
https://gist.github.com/kamnan43/4dba0111ee8498524602498f3bec7764

หน้าจอข้อมูล Match การแข่งขัน

ส่วนนี้จะใช้ทั้งในส่วนของ Last Match, Next Match และ Live Match โดยออกแบบให้ใช้ Flex Message แบบ Carousel (1 Match ต่อ 1 Bubble) และในแต่ละ Bubble ได้แบ่งส่วนต่างๆ ดังนี้

• header : ไม่ใช้
• hero : ไม่ใช้
• body : แบ่งออกเป็น 4ส่วน คือ
  1. แสดงนาทีที่แข่งขัน (text)
  2. ผลการแข่งขัน (horizontal box)
  3. ผู้ทำประตู (icon + text อยู่ใน horizontal box ซ้อนใน vertical box)
  4. ใบเหลือง/ใบแดง (icon + text อยู่ใน horizontal box ซ้อนใน vertical box)
• footer : แบ่งออกเป็น 3 ส่วน
  1. ข้อมูลกลุ่มการแข่งขัน และวันเวลา (separator + box)
  2. ปุ่มดูข้อมูลเพิ่มเติม Head 2 Head , Statistics
  3. ปุ่ม View Source สำหรับดู source ของ flex message ที่ส่งให้ LINE

หน้าจอ Match

จะเห็นว่า เราไม่จำเป็นต้องระบุข้อมูลใน bubble ให้ครบทั้ง header, hero, body, footer ก็ได้ อย่างตัวอย่างนี้ระบุแค่ body กับ footer เท่านั้น ซึ่งจริงๆขอให้มีอย่างน้อย 1 ส่วน ก็ใช้ได้แล้วครับ

ถ้าลองกดดู view source ก็จะเห็น json ตามนี้ครับ
https://gist.github.com/kamnan43/2676a37e9da9f2cb73de14d4434c450a

เล่นท่ายาก

สุดท้าย ผมลองนำมาเอา Flex มาใช้ โดยออกแบบให้ซับซ้อนขึ้นมาอีกหน่อย เพื่อมองหาข้อจำกัดของ Flex ซึ่งผลที่ได้ ก็ค่อนข้างเป็นที่พอใจของผมทีเดียว ลองดู source แล้วเอาไปปรับใช้กันนะครับ

หน้าสถิติการแข่งขัน : https://gist.github.com/kamnan43/1b7d6a4d61fbcc247f425864073892a3

หน้า Head to Head : https://gist.github.com/kamnan43/81a35c18d7fe42489890faa10580b423

หน้า Head to Head

หน้าตารางการแข่งขัน : https://gist.github.com/kamnan43/f5ecc9b03cdd2accca8ac7358aaedb42

ลองเล่นกันดู

ในส่วนของบทความนี้ ผมทำเป็น Line Bot เอาไว้ ใครสนใจอยากลองเล่น ก็ไปลองกันได้เลยครับ แต่รับได้แค่ 50 คนนะครับ line://ti/p/@osp8317c

สรุป

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

ข้อดี

• แน่นอนว่า ความพิเศษของ Flex คือการฉีกข้อจำกัดรูปแบบการส่ง message แบบเดิมๆ ซึ่งพอได้ลองแล้วก็พบว่า มันแจ่มมากกกกก ทำอะไรได้เยอะมาก
• คนที่เคยออกแบบเวบมาก่อน น่าจะเข้าใจได้ไม่ยาก โดยเฉพาะการทำ nested container ซึ่งเหมือนกับโครงสร้าง table ใน html เลย
• การกำหนดขนาดโดยใช้ flex ช่วยให้งานง่ายขึ้นมากๆๆๆๆ
• สามารถปรับแต่งได้มากพอสมควร เช่น ขนาด, สี, margin, style ฯลฯ
• จากการออกแบบ message ที่ซับซ้อน ก็ยังไม่เกินข้อจำกัดของ Flex Message ที่กำหนดไว้ (แบบ Bubble ต้องไม่เกิน 10kb, แบบ Carousel รวมต้องไม่เกิน 50kb) ก็ถือว่าน่าจะเพียงพอให้จัดเต็มกันได้เต็มที่

ข้อเสีย

• พื้นที่การแสดงผลน้อย พอต้องใส่ข้อมูลเยอะๆ จะพบว่า จัด UI ยากพอสมควร เกิดความแออัดของ components ต่างๆอย่างชัดเจน จนบางจังหวะคิดว่า ไปใช้ LIFF (https://medium.com/linedevth/introduction-to-liff-7d708e2f42ec) เลย ดีมั้ยเนี่ย
• พยายามคิดข้อเสียอีกข้อ ก็คิดไม่ออกละ เอาเป็นว่า มันแจ่มมากจริงๆ

ทั้งนี้ ความคิดเห็นของผมอันนี้ เกิดจากการลองเล่นเองแค่ 2–3 วัน เดี๋ยวมีโอกาสหน้า จะมาอัพเดทกันใหม่นะครับ ส่วนใครที่ได้ลองเล่น ลองใช้งานแล้ว ก็เอามาแชร์กันด้วยนะครับ

เจอกันโอกาสหน้า บุญรักษา ขอบคุณครับ