ส่งภาพเคลื่อนไหว (Animation) ผ่าน LINE ด้วย Flex Message

2 min readMay 15, 2021

จะทำอย่างไรเมื่อ LINE ไม่รองรับการส่งไฟล์ GIF ผ่าน LINE Messaging API

ในที่สุดก็มีแรงผลักดันให้ได้มานั่งเขียนบทความลง Medium อีกครั้ง เหตุเกิดจากความอยาก Challenge ตัวเองอยู่เป็นเนืองๆ จึงพาตัวเองเข้าไป join project ของทาง Botnoi ที่ชื่อว่า “10XP” เป็นโครงการที่ต้องการผลักดันให้เกิด Chatbot ใหม่ๆจากความร่วมมือของกลุ่มคนที่มีจุดมุ่งหมายเหมือนๆกัน ซึ่งมีหลายไอเดียที่น่าสนใจเลยครับ ส่วนตัวผมเองเลือกที่จะเข้าไปอยู่ในกลุ่ม “ตลก” ไม่ค่อยได้ช่วยกลุ่มเท่าไหร่ เพราะงานก็ยุ่งๆอะเนอะ

แต่แล้วก็มีโจทย์ที่มาท้าทายตัวผม เพราะพี่ๆน้องๆในกลุ่มมีโจทย์ที่ต้องการให้ Chatbot ส่งไฟล์ GIF ได้ เราทราบกันดีอยู่แล้วเนอะว่าไฟล์ประเภทนี้เป็นไฟล์ภาพแบบเคลื่อนไหว (Animation) จากการค้นหาว่าจะทำอย่างไรให้เราสามารถส่งไฟล์ประเภทนี้ไปยัง LINE ก็พบว่า LINE Messaging API ยังไม่รองรับไฟล์ GIF ทีนี้ทำไงดีเลยนึกถึง Flex Message ไม่รอช้าจัดแจงเปิด Flex Message Simulator ขึ้นมาทดสอบโดยพลันแต่สิ่งที่เกิดขึ้นเหมือนโดนหลอกให้อยากแล้วจากไปครับ เพราะเมื่อเอา json ของ Flex Message ไปใช้มันไม่ animated กลับได้ภาพนิ่งมาๆ ทำไงดีละ

ความพยายามไม่เคยทำร้ายใคร เพราะผมไปเจอบทความของพี่ตี๋พูดถึงลูกเล่นใหม่ๆของ Flex Message หนึ่งในนั้นคือ การแสดงผลภาพเคลื่อนไหว (Animation) บน Flex Message เอาละเกริ่นมาซะยืดยาวเลยได้เวลาลงมือทำจริงละ

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

ฟีเจอร์ใหม่ใน Flex Message ที่จะมาช่วยเปลี่ยนจินตนาการเป็นข้อความใน LINE ให้ง่ายกว่าเดิม

medium.com

ข้อควรรู้สำคัญ

เราไม่สามารถใช้ไฟล์ GIF ในการแสดงภาพเคลื่อนไหวบน Flex Message ได้
เราต้องเปลี่ยนไปใช้ไฟล์ APNG แทน
ไฟล์ APNG ต้องมีขนาดไม่เกิน 300KB
ภาพเคลื่อนไหวจะทำงานก็ต่อเมื่อผู้ใช้งานไม่ได้ disable เมนู Auto-play GIFs

เตรียมวัตถุดิบ

APNG

ภาพเคลื่อนไหวที่น้องในกลุ่มใช้ ซึ่งผมชื่นชอบมากมันเป็น Meme ที่โดนใจเลยแหละซึ่งตอนผมได้ภาพนี้มามันอยู่ในรูปแบบของไฟล์ GIF ดังนั้นตามเงื่อนเราจะต้องแปลงไฟล์นี้ก่อน และต้องมีขนาดไฟล์ได้ตามข้อกำหนด (ตอนแรกผมก็งงเหมือนกันว่าทำไมไม่ได้สักทีติดอยู่ที่ขนาดไฟล์) พอแปลงเสร็จก็ได้ไฟล์ที่ถูกลดถอนรายละเอียดไปพอสมควร

โครงสร้างของ Flex Message

{
  "type": "image",
  "url": "https://davidmz.github.io/apng-canvas/images/clock.png",
  "animated": true
}

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

{
  "type": "bubble",
  "hero": {
    "animated": true,
    "size": "full",
    "type": "image",
    "url": "https://bn-sme-production.s3.amazonaws.com/609694aec58976f4996c341f/a52c8227-a433-46eb-bf7e-7b5adfacbac1.png"
  }
}