ส่องคอนเซ็ปต์!! เปลี่ยนการส่งความสุขใน LINE ให้ไฉไลกว่าเดิมด้วย Sawasdee Studio

Supakarn Laorattanakul
LINE Developers Thailand
3 min readJan 3, 2024

ทุก ๆ วันสิ้นปี หรือคืนข้ามปี เข้าสู่ศักราชใหม่ ในยุคหลัง ๆ มานี้ ตั้งแต่สมาร์ทโฟนเข้ามามีอิทธิพลกับชีวิตคนเรา การส่งความสุขหรือการอวยพรในช่วงปีใหม่จะเป็นไปได้อย่างงายดาย เพียงส่งข้อความผ่านแอปข้อความต่าง ๆ ปกติแล้วการส่งก็จะเป็นการส่งในรูปแบบรูปภาพหรือข้อความแบบทั่ว ๆ ไป โดยเฉพาะบนแอปพลิเคชัน LINE

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

วันนี้เราจะมาส่องเบื้องหลังคอนเซ็ปต์ของ Sawasdee Studio ว่าใช้เทคโนโลยีอะไรของ LINE ในการส่งข้อความและในการทำเว็บไซต์บ้าง เผื่อจะเป็นไอเดียของหลาย ๆ คนทำโซลูชันมาแก้ปัญหาต่าง ๆ ของคนในสังคม

รูปแบบข้อความแปลกใหม่ ส่งแบบปกติไม่ได้

นักพัฒนาหลาย ๆ คนอาจจะทราบกันดีอยู่แล้วว่าข้อความที่สื่อสารใน LINE ไม่ได้มีแค่ ข้อความที่เป็นตัวอักษร (Text), สติกเกอร์ (Sticker), รูปภาพ (Image), วิดีโอ (Video), เสียง (Audio), และ​สถานที่ (Location) ที่เราต่างใช้กันปกติในทุก ๆ วัน แต่จะมี Flex Message, Template Message, และ Imagemap Message ที่เราสามารถส่งได้เช่นกัน

ปกติแล้วข้อความทั้ง 3 ประเภทนั้น ไม่สามารถกดส่งในห้องแชตแบบปกติได้ สามารถส่งได้จาก LINE Messaging API เท่านั้น แต่จะมีข้อความ 2 ประเภทที่เราสามารถเป็นผู้ส่งได้ คือ Flex Message และ Template Message โดยจะเป็นการส่งผ่าน LINE Front-end Framework (LIFF) ด้วยฟังก์ชัน liff.sendMessages() และ liff.shareTargetPicker()

Flex Message สวรรค์สำหรับคน Creative

เมื่อเราได้ข้อมูลมาแล้วว่า LIFF สามารถส่งข้อความ Flex Template และ Template Message ได้ ก็มาดูในรายละเอียดว่าเราสามารถทำอะไรได้บ้าง

อย่างที่รู้กันอยู่แล้วว่า Flex Message นั้น สามารถแปลงเป็นข้อความธรรมดาให้เป็นอะไรก็ได้ เราสามารถใส่รูป ใส่ไอคอน ใส่ข้อความ Customize กล่องข้อความให้เป็นรูปแบบต่าง ๆ ที่มีลักษณะเฉพาะตัวก็ได้เช่นกัน สามารถลองปั้น Flex Message ได้เองใน Flex Message Simulator

เทมเพลตตัวอย่างจาก Flex Message Simulator
เทมเพลตตัวอย่างจาก Flex Message Simulator

เราก็นำมาดัดแปลงให้ใส่รูป ใส่ข้อความ รวมถึงชื่อด้านล่าง แล้วทำเป็นช่อง ๆ ไว้ เพื่อนำข้อความที่ทุกคนต้องการใช้มาประกอบใส่ได้

เทมเพลต Default ใน Sawasdee Studio ที่มีการเจาะช่องสำหรับข้อความ
เทมเพลต Default ใน Sawasdee Studio ที่มีการเจาะช่องสำหรับข้อความ

ส่วนประกอบครบแล้ว ถึงเวลา Assemble…

เมื่อเราได้ส่วนประกอบครบแล้ว ได้เวลาประกอบร่างนำ Flex Message กับ LIFF มาให้สามารถ Share ได้จริง โดยโจทย์ของเราคือต้องทำฟอร์มให้ทุกคนสามารถแก้ไขข้อความได้ Personalized ส่งให้แต่ละคนได้ ไม่ซ้ำกัน

ฟอร์มสำหรับปรับแต่งข้อความ
ฟอร์มสำหรับปรับแต่งข้อความ

อีกโจทย์นึงที่คนรอบข้างที่ลองใช้งานรีเควสมากันเยอะ ๆ คือ การที่สามารถอัปโหลดรูปภาพเพื่อแสดงผลได้ เพราะการทำใส่เพียง URL ก็อาจจะทำให้ผู้ใช้งงได้ ก็ได้บริการฮีโร่จาก EX10 มาช่วยไว้ ที่เปิดให้เราฝากรูปเพื่อไม่ใช่ใน Flex Message ได้ สามารถไปทดลองใช้ได้ที่ ex10.tech/portal/tools/upload-image (ขอบคุณมา ณ ที่นี้ด้วยค้าบบบบ…)

บริการฝากรูปภาพจาก EX10
บริการฝากรูปภาพจาก EX10

หลังจากทำฟอร์มเสร็จ ก็ทำการ integrate LIFF เข้ากับเว็บไซต์ที่สามารถทำได้ง่าย ๆ ด้วย LIFF SDK ที่จะทำให้การใช้งานเว็บไซต์เชื่อมต่อกับข้อมูลหรือระบบต่าง ๆ ของ LINE ได้อย่างง่าย ๆ

ชื่อไม่ต้องกรอก เพราะ LIFF ช่วย

จากที่บอกไปข้างต้นว่าใน Flex Message เราจะมีช่องสำหรับกรอกชื่อด้วย แต่เพื่อความง่ายสำหรับคนใช้งาน ในฟอร์มเราสามารถ Pre-fill ชื่อได้ โดยใช้ชื่อที่ได้จาก ฟังก์ชันหนึ่งของ LIFF นั่นคือ liff.getProfile() ที่เราจะได้ชื่อ รูปโปรไฟล์ ไอดี และสถานะมาด้วย

ช่อง Name ที่กรอกชื่อที่ได้มาจาก liff.getProfile()
ช่อง Name ที่กรอกชื่อที่ได้มาจาก liff.getProfile()

สุดท้าย Share Target Picker พระเอกของงานนี้

เมื่อได้ฟอร์ม ได้ Flex Message ที่ต้องการใช้งานแล้ว สุดท้ายนำมาประมวลผล นำข้อความที่ Customize ใส่ลงในช่องที่เจาะไว้ และทำการเรียกฟังก์ชัน liff.shareTargetPicker()

(ซ้าย) รูปแบบ Default (กลาง) รูปแบบ Simple (ขวา) รูปแบบ Square

หมายเหตุ: การที่จะใช้ Share Target Picker จะต้องทำการเปิดใช้งานบน LINE Developers Console ด้วย

การตั้งค่าเปิด Share Target Picker ใน LINE Login Channel บน LINE Developers Console
การตั้งค่าเปิด Share Target Picker ใน LINE Login Channel บน LINE Developers Console

อยากหาทำจนได้เรื่อง…

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

ทำแล้ว มีคนชอบ มีคนใช้ มันก็ดีต่อใจ

พอเราได้ Track ดูสถิติของการใช้งาน Sawasdee Studio ก็พบว่ามีการใช้งานรวม ๆ กับช่วงอาทิตย์ที่ผ่านมามากกว่า 5,000+ ครั้งในการแชร์ข้อความอวยพรรูปแบบใหม่ให้กับใครหลาย ๆ คน ด้วยผู้ใช้มากกว่า 1,000+ คน ก็รู้สึกว่าสิ่งที่ทำไปมันน่าจะมีประโยชน์กับใครหลาย ๆ คนไม่มากก็น้อย

ยอดมากมายถึงขนาดนี้จะเกิดไม่ได้เลยถ้าขาดคนกระจายข่าว ขอขอบคุณสื่อไอทีที่หลาย ๆ คนคุ้นเคย แบไต๋, ไอที 24 ชั่วโมง, และ LINE Developers Thailand ที่มีการนำเสนอ Sawasdee Studio ให้คนมาทดลองใช้งาน

อนาคตของ Sawasdee Studio…

หลังจากที่ใช้ Sawasdee Studio สำหรับการส่งคำอวยพรปีใหม่กันไปแล้ว ก็อาจจะเปลี่ยนไปเป็นอย่างอื่นได้ เช่น การส่งสวัสดีวันต่าง ๆ ในรูปแบบใหม่ ๆ เปลี่ยนคำ เปลี่ยนสีได้ ให้ดู Unique ไปในแต่ละวัน รวมถึงการทำ Quote ต่าง ๆ แชร์ไปให้กับเพื่อน ๆ ได้

ถ้าใครได้ลองใช้ Sawasdee Studio ก็สามารถให้ฟีดแบกกลับมาได้นะครับ หรือใครอยากแนะนำว่าควรมีฟีเจอร์อะไรดี เผื่อการใช้งาน Sawasdee Studio จะดียิ่งขึ้นกว่าเดิม

โปรเจกต์นี้เปิดไว้เป็น Open source นักพัฒนาที่สนใจสามารถศึกษาตัวอย่างโค้ดได้ที่ GitHub iamprompt/line-sawasdee

--

--