ทำครบหนึ่งรอบตั้งแต่ภาพจนถึงเมนูจริง โดยแยกขั้นออกแบบ ตรวจสอบ และเผยแพร่ให้ชัดเจน
สิ่งที่ต้องเตรียม
คุณต้องมี LINE Official Account, Messaging API Channel ที่เชื่อมกับบัญชีนั้น, Channel access token และภาพ JPEG/PNG ที่ผ่านข้อกำหนด ข้อมูลเหล่านี้ใช้เพื่อเรียก API ในนามของ Channel
- เตรียมภาพและข้อความบนปุ่มให้เสร็จก่อนวางพื้นที่
- อย่าใส่ Token ใน Git, รูปภาพ, เอกสารสาธารณะ หรือแชต
- ตั้งชื่อภายในที่สื่อเวอร์ชัน เช่น main-2026-08
วางพื้นที่ปุ่มแบบพิกัด
แต่ละพื้นที่ประกอบด้วย x, y, width และ height โดยจุด 0,0 อยู่มุมซ้ายบนของภาพ การลากวางช่วยลดการคำนวณเอง แต่ยังควรตรวจว่าพื้นที่ไม่เกินขอบและไม่มีช่องว่างที่ผู้ใช้แตะแล้วไม่เกิดอะไร
หนึ่ง Rich Menu มีพื้นที่ได้สูงสุด 20 พื้นที่ เลือกจำนวนเท่าที่จำเป็นเพื่อให้ปุ่มใหญ่พอสำหรับการแตะบนมือถือ
เลือก Action ให้ตรงกับผลลัพธ์
Label ของ Action มีไว้ช่วยการเข้าถึงและควรอธิบายสิ่งที่จะเกิด ไม่ควรใช้คำกว้างอย่าง “คลิกที่นี่” ทุกปุ่ม
| Action | เหมาะกับ |
|---|---|
| URI | เปิดเว็บไซต์, LIFF, โทรศัพท์ |
| Message | ส่งข้อความจากผู้ใช้เพื่อเข้าสู่ Bot flow |
| Postback | ส่งข้อมูลเข้า webhook โดยไม่ต้องแสดงข้อความ |
| Datetime picker | เลือกวัน เวลา หรือนัดหมาย |
| Rich menu switch | สลับแท็บด้วย Alias |
| Clipboard | คัดลอกโค้ดหรือข้อความบน LINE รุ่นที่รองรับ |
ตรวจและเผยแพร่ตามลำดับ
อย่าข้าม Validate เพราะช่วยแยกข้อผิดพลาด JSON ออกจากปัญหาไฟล์ภาพ หลังเผยแพร่ให้เปิดห้องแชตบนโทรศัพท์ใหม่เพื่อดูผลจริง
- Validate rich menu object
- Create rich menu เพื่อรับ richMenuId
- Upload image ไปยัง api-data.line.me
- ทดสอบ Action และพื้นที่
- Set default rich menu หรือผูกเป็นรายผู้ใช้
นิยามของคำว่าเสร็จ
งานเสร็จเมื่อภาพผ่านข้อกำหนด, JSON ผ่าน Validate, ทุก Action ทำงานกับระบบปลายทาง, ไม่มีพื้นที่ทับกันโดยไม่ตั้งใจ, ทดสอบบนมือถือ และมีแผนย้อนกลับ ไม่ใช่เพียงแค่ API ตอบ 200
เอกสารอ้างอิง
ตรวจสอบข้อกำหนดล่าสุดจากเอกสารทางการก่อนใช้งานกับระบบสำคัญ
พร้อมนำไปทำบน Canvas แล้วหรือยัง?
วางพื้นที่ปุ่มแบบลาก ย้าย ย่อ–ขยาย แล้วตรวจ JSON ก่อนเผยแพร่
เปิด Studio →