รู้จักกับ Message ใน LINE ที่ LINE Bot ส่งได้ แต่คนส่งเองไม่ได้
จากบทความที่แล้วที่ผมพาทุกคนไปรู้จักกับ Message รูปแบบ Basic ที่คนส่งได้ LINE ก็ส่งได้กันไปแล้ว (ใครที่ยังไม่ได้อ่านคลิกลิงค์ด้านล่างเบาๆ)
มาบทความนี้ ผมจะมาแนะนำให้รู้จักกับ Message รูปแบบพิเศษ ที่สร้างมาเพื่อให้ผู้ใช้สะดวกในการทำ action ต่างๆ มีรูปโฉมไฉไลน่าใช้ เหมาะกับงานและธุรกิจในหลายๆรูปแบบ และที่สำคัญคือ Message รูปแบบต่างๆในบทความนี้นั้น ถูกสร้างมาเพื่อ LINE Bot(คนส่งไม่ได้ และ forward ก็ไม่ได้นาจา)
ก่อนที่เราจะไปเริ่มกัน หากใครยังไม่รู้จักการ Reply, Push และ Multicast แนะนำให้อ่านบทความด้านล่างนี้ เพราะตัวอย่างทั้งหมดจะส่งข้อความด้วยการ Push ผ่าน Cloud Functions for Firebase
1. Imagemap Message
ข้อความประเภทรูปภาพที่เราสามารถออกแบบกราฟฟิกตามใจชอบ(จะสวยหรือแหวกแนวแค่ไหนนั้น ขึ้นอยู่กับฝีมือ Photoshop ของแต่ละคน) ซึ่งนักพัฒนาสามารถระบุพิกัด x, y ในรูปเพื่อให้ผู้ใช้สามารถคลิกตามตำแหน่งต่างๆได้ โดยประกอบไปด้วย property ดังนี้
- type:
imagemap[Required] - baseUrl: URL ของรูปภาพ [Required]
- altText: ข้อความอธิบายตัว Imagemap นี้ โดยระบุได้สูงสุด 400 ตัวอักษร [Required]
- baseSize.width: ความกว้างในการแสดงผลรูปภาพ[Required]
- baseSize.height: ความสูงในการแสดงผลรูปภาพ[Required]
- video: object ของวิดีโอ
- actions: object ของ action ที่จะตอบสนองเมื่อคลิก โดยมีได้สูงสุด 50 จุด [Required]
รายละเอียดของ video object มี property ดังนี้
- originalContentUrl: URL ของวิดีโอที่รองรับ HTTPS มีนามสกุลเป็น MP4
- previewImageUrl: URL รูปภาพพรีวิวของวิดีโอที่รองรับ HTTPS
- area.x: พิกัดในแนวราบของวิดีโอบนรูปภาพ
- area.y: พิกัดในแนวดิ่งของวิดีโอบนรูปภาพ
- area.width: ความกว้างของวิดีโอ
- area.height: ความสูงของวิดีโอ
- externalLink.linkUri: URL ของเว็บที่จะลิงค์จากวิดีโอ
- externalLink.label: ข้อความที่จะแสดงหลังวิดีโอเล่นจบ
2. Template Messages
Template messages คือชุดข้อความที่ออกแบบ layout มาแล้วสำหรับ LINE Bot แบ่งออกเป็น 4 รูปแบบ Buttons, Confirm, Carousel และ Image Carousel โดยที่เราสามารถกำหนดองค์ประกอบต่างๆได้เช่น image, title, text และ button
Template messages จะช่วยให้ผู้ใช้สามารถทำ action ต่อไปได้ง่ายๆผ่านการคลิก สะดวกกว่าโดยผู้ใช้ไม่ต้องจำหรือพิมพ์เอง และในเคสที่ต้องการให้ผู้ใช้เปิดลิงค์ก็ไม่ต้องส่ง URL ยาวๆ รกๆ สามารถแนบลิงค์ไปกับ object ได้เลย
โดยทั้ง 4 รูปแบบจะมี property ที่ required เหมือนกัน 3 ตัวดังนี้
- type:
template - altText: ข้อความอธิบายตัว Button template นี้ โดยระบุได้สูงสุด 400 ตัวอักษร
- template: object ของ (Buttons, Confirm, Carousel และ Image Carousel)
หมายเหตุ: เราไม่สามารถโยกย้ายหรือเปลี่ยนแปลงตำแหน่งของ object ต่างๆที่อยู่ layout ได้ เช่น จะเอารูปลงมาใต้ปุ่ม แบบนี้ทำไม่ได้ และ Template Messages ทุกประเภทจะไม่สามารถแสดงผลใน LINE Desktop ได้
2.1 Buttons Template
เป็นข้อความที่มีทั้ง image, title, text อย่างละ 1 object แต่จะมีปุ่มได้สูงสุด 4 ปุ่ม โดยมีรายละเอียด property ดังนี้
- type:
buttons[Required] - thumbnailImageUrl: URL ของรูปภาพที่รองรับ HTTPS
- imageAspectRatio: อัตราส่วนของรูปภาพ
- ระบุrectangleกรณีต้องการแสดงผลเป็นสี่เหลี่ยมผืนผ้า
- ระบุsquareกรณีต้องการแสดงผลเป็นสี่เหลี่ยมจัตุรัส - imageSize: ขนาดของรูปภาพ
- ระบุcoverกรณีต้องการแสดงผลรูปภาพเต็มพื้นที่
- ระบุcontain: กรณีต้องการแสดงผลรูปตามขนาดขนาดและอัตราส่วนของรูป โดยหากไม่พอดีพื้นที่ว่างจะแสดงสีของ background - imageBackgroundColor: สีพื้นหลังในส่วนการแสดงผลรูป โดยค่าเริ่มต้นคือ สีขาว #ffffff
- title: หัวข้อที่ระบุได้สูงสุด 40 ตัวอักษร
- text: ข้อความตัวอักษร [Required]
- กรณีมี thumbnailImageUrl หรือ title จะระบุได้สูงสุด 60 ตัวอักษร
- กรณีไม่มี thumbnailImageUrl หรือ title จะระบุได้สูงสุด 160 ตัวอักษร - defaultAction: action ที่จะให้เกิดขึ้นเมื่อผู้ใช้คลิกที่ image, title หรือ text
- actions: object ของปุ่มที่จะทำการแสดง พร้อม action ที่จะตอบสนองในแต่ละปุ่ม [Required]
2.2 Confirm Template
ข้อความที่เหมาะให้ผู้ใช้เลือกทำ action ที่มี 2 ทางเลือก เช่น การยืนยัน, เพศ(กรณีมีเพียง ชาย และ หญิง) โดยมีรายละเอียด property ดังนี้
- type:
confirm[Required] - text: ข้อความที่บ่งบอกให้ผู้ใช้เลือกคำตอบ [Required]
- action: object ของปุ่มที่จะทำการแสดง พร้อม action ที่จะตอบสนองในแต่ละปุ่ม ซึ่งจะมีได้สูงสุด 2 ปุ่ม [Required]
2.3 Carousel Template
ข้อความที่บรรจุ Buttons template หลายๆชุดไว้ สามารถเลื่อนซ้ายขวาได้ โดยมีรายละเอียด property ดังนี้
- type:
carousel[Required] - columns: เป็น column object ที่บรรจุ Buttons template ได้สูงสุด 10 ชุด [Required]
- imageAspectRatio: อัตราส่วนของรูปภาพ ซึ่งมีผลในทุก column
- ระบุrectangleกรณีต้องการแสดงผลเป็นสี่เหลี่ยมผืนผ้า
- ระบุsquareกรณีต้องการแสดงผลเป็นสี่เหลี่ยมจัตุรัส - imageSize: ขนาดของรูปภาพ ซึ่งมีผลในทุก column
- ระบุcoverกรณีต้องการแสดงผลรูปภาพเต็มพื้นที่
- ระบุcontain: กรณีต้องการแสดงผลรูปตามขนาดขนาดและอัตราส่วนของรูป โดยหากไม่พอดีพื้นที่ว่างจะแสดงสีของ background
รายละเอียดของ Column object มี property ดังนี้
- thumbnailImageUrl: URL ของรูปภาพ ที่รองรับ HTTPS
- imageBackgroundColor: สีพื้นหลังในส่วนการแสดงผลรูป โดยค่าเริ่มต้นคือ สีขาว #ffffff
- title: หัวข้อที่ระบุได้สูงสุด 40 ตัวอักษร
- text: ข้อความตัวอักษร [Required]
- กรณีมี thumbnailImageUrl หรือ title จะระบุได้สูงสุด 60 ตัวอักษร
- กรณีไม่มี thumbnailImageUrl หรือ title จะระบุได้สูงสุด 160 ตัวอักษร - defaultAction: action ที่จะให้เกิดขึ้นเมื่อผู้ใช้คลิกที่ image, title หรือ text
- actions: object ของปุ่มที่จะทำการแสดง พร้อม action ที่จะตอบสนองในแต่ละปุ่ม [Required]
2.4 Image Carousel Template
ข้อความที่บรรจุภาพไว้ได้สูงสุด 10 ภาพ สามารถเลื่อนซ้ายขวาได้ และสามารถคลิกที่ภาพได้ โดยมีรายละเอียด property ดังนี้
- type:
image_carousel[Required] - columns: เป็น column object ที่บรรจุรูปภาพได้สูงสุด 10 รูป[Required]
รายละเอียดของ Column object มี property ดังนี้
- imageUrl: URL ของรูปภาพที่รองรับ HTTPS
- action: object ของ action ที่จะตอบสนองหลังจากคลิกรูป [Required]
สรุป
นอกจาก 5 รูปแบบข้อความที่อธิบายในบทความนี้ ใน LINE Messaging API ยังมีข้อความอีกรูปแบบที่ LINE Bot ส่งได้ แต่คนทั่วไปส่งไม่ได้ และให้นักพัฒนาออกแบบข้อความได้ยืดหยุ่นอย่างมีอิสระ โดยสามารถอ่านได้จากบทความด้านล่างนี้ครับ
และเรายังสามารถเพิ่ม Quick Reply เพื่อแนะนำ action ต่อไปให้กับข้อความที่กล่าวมาได้ด้วย สนใจก็ลองอ่านบทความด้านล่างนี้ดูครับ
ก่อนจากกันไป ขอประชาสัมพันธ์กันสักหน่อย สำหรับใครที่ไม่อยากพลาดรถไฟขบวนสำคัญ ฝากกด LIKE เพจ LINE Developers Thailand กันไว้ เพราะเร็วๆนี้จะมีข่าวสำคัญมว๊ากกก ก ไก่ ล้านตัว จะประกาศที่เพจนี้เป็นที่แรก สำหรับวันนี้ราตรีสวัสดิ์นักพัฒนาชาวไทย
