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

จะทำอย่างไรเมื่อ 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

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

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

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

APNG

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

ไฟล์ต้นฉบับ (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"
  }
}

It’s a MAGIC

นำไปทดสอบกับ Chatbot

สามารถร่วมทดสอบความฮา และความเก่งของ”น้องโบ๊ะบ๊ะ”ได้ที่ https://lin.ee/OoX9V4s

น้องโบ๊ะบ๊ะ

ทิ้งท้าย

• ยอมรับว่าเกริ่นมาซะยาวเลย ทั้งๆทีนี้เนื้อหาก็นิดเดียว
• หวังว่าทุกคนคงจะได้ประโยชน์จากเนื้อหาในบทความนะครับ
• ใครสนใจโปรเจคดีๆเกี่ยวกับ Chatbot ไปตามต่อได้ที่ AI chatbot by BOTNOI
• ต้องขอบคุณทีมกลุ่มตลกที่เหมือนเป็นแรงผลักให้เกิดบทความนี้
• ขอบคุณบทความดีๆจากทีม LINE Developer Thailand