จำ Action ได้ ใช้ Action เป็น ใน LINE Messaging API

รู้หรือไม่ว่าตอนนี้ Action ใน LINE Messaging API มีทั้งหมดกี่แบบ? แต่ละแบบทำอะไรได้บ้าง? และ message object ประเภทไหนที่รองรับ Action บ้าง? คงเป็นคำถามที่นักพัฒนาส่วนมากสงสัยกัน

บทความนี้จะพาทุกคนมาดื่มด่ำกับเรื่องของ Action ใน LINE Messaging API ว่ามีอะไรบ้าง สามารถทำอะไรได้บ้าง รวมถึงข้อจำกัดที่มีแบบทุกซอกทุกมุมกัน

สำหรับใครที่ยังไม่เคยพัฒนา LINE Bot มาก่อน ผมขอแนะนำให้อ่านบทความด้านล่างนี้ เพื่อสร้าง Bot ตัวแรกของตัวเองซะก่อน จะได้ต่อยอดเรื่อง Action ได้เข้าใจรวดเร็วขึ้น

สร้าง LINE Bot ด้วย Messaging API และ Cloud Functions for Firebase

ปัจจุบัน Actionใน LINE Messaging API มีทั้งหมด 8 รูปแบบด้วยกัน โดยนักพัฒนาสามารถแนบ Action object ที่อยู่ในรูปแบบ JSON ไปกับ message object ที่รองรับได้ ซึ่ง Action แต่ละแบบจะทำปฏิกริยาหลังจากที่ผู้ใช้ไปสัมผัส component ต่างๆ เช่น ปุ่ม, รูป, ข้อความ, quick reply หรือใน Rich menu เป็นต้น

เตรียมความพร้อม

ก่อนที่เราจะไปทำความรู้จัก Action แต่ละตัว อยากให้ทุกคนเตรียม webhook ไว้สำหรับ reply ก้อน JSON object ที่เข้ามาจาก action กลับออกไปให้นักพัฒนา เพื่อจะได้เห็นว่า หน้าตา payload ที่ได้รับจาก Action แต่ละแบบนั้นเป็นอย่างไร

นอกจากนี้ ตัวอย่างที่เราจะแนบ Action ไป จะเป็น Quick Reply และ Flex Message สามารถไปทำความรู้จักทั้งคู่จากบทความตอนก่อนหน้านี้ครับ

รู้จัก Quick Reply ฟีเจอร์ใหม่แกะกล่องใน LINE Messaging API

ฉีกกฎการแสดงผลข้อความแบบเดิมๆใน LINE Messaging API ด้วย Flex Message

1. Message Action

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

Object ที่รองรับการแนบ Message Action

• Imagemap Message, Template Message, Flex Message, Quick Reply และ Rich Menu

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

• type: message (Required)
• text: ข้อความที่มีตัวอักษรได้สูงสุด 300 ตัวอักษร (Required)
• label: ชื่อที่กำหนดให้กับ Action โดยมีรายละเอียดแตกต่างกันไปตามแต่ objects ที่แนบไป (อ่านรายละเอียดของ label ได้ที่ท้ายบทความ)[1]

ตัวอย่าง

เตรียม message payload ซึ่งได้แนบ Message Action ไปกับ Quick Reply และมีหน้าตาแบบนี้

{
 "to": "U3c28a...",
 "messages": [
  {
   "type": "text",
   "text": "Hello Quick Reply!",
   "quickReply": {
    "items": [
     {
      "type": "action",
      "action": {
       "type":"message",
       "label":"Message",
       "text":"Hello World!"
      }
     }
    ]
   }
  }
 ]
}

เมื่อ Push ตัว payload ด้านบนไปก็จะได้ข้อความพร้อม Quick Reply(รูปซ้าย) จากนั้นก็กดตุ่ม Quick Reply ตัว Message Action ก็จะส่งข้อความ Hello World! เข้าไปที่ห้องแชท สุดท้ายเราก็ reply ตัว object ทั้งหมดออกมาผ่านห้องแชท(รูปขวา)

2. URI Action

เป็น Action สำหรับการ redirect ทั้งเปิดเว็บไซต์, โทรศัพท์ หรือ การเปิดหน้าและเมนูต่างๆในแอป LINE

Object ที่รองรับการแนบ URI Action

• Imagemap Message, Template Message, Flex Message, Quick Reply และ Rich Menu

โครงสร้างของ URI Action

• type: uri (Required)
• uri: เป็น URI ที่มีความยาวได้สูงสุด 1,000 ตัวอักษร รองรับ scheme ได้แก่ http, https, line และ tel (Required)
• label: ชื่อที่กำหนดให้กับ Action โดยมีรายละเอียดแตกต่างกันไปตามแต่ objects ที่แนบไป (อ่านรายละเอียดของ label ได้ที่ท้ายบทความ)[1]
• altUri.desktop: เป็น URI ที่มีความยาวได้สูงสุด 1,000 ตัวอักษร รองรับ scheme ได้แก่ http, https, line และ tel ซึ่งหากตั้งค่านี้ URI จะทำงานกับ LINE บน Desktop และเฉพาะกับ Flex Message เท่านั้น(Optional)

ตัวอย่าง

เตรียม message payload ซึ่งได้แนบ URI Action ไปกับ Flex Message และมีหน้าตาแบบนี้

{
 "to": "U3c28...",
 "messages": [
  {
   "type": "flex",
   "altText": "This is a Flex Message",
   "contents": {
    "type": "bubble",
    "body": {
     "type": "box",
     "layout": "vertical",
     "contents": [
      {
       "type": "button",
       "style": "primary",
       "height": "sm",
       "action": {
        "type": "uri",
        "label": "Add to Cart",
        "uri": "https://developers.line.me"
       }
      }
     ]
    }
   }
  }
 ]
}

เมื่อ Push ตัว payload ด้านบนไปก็จะได้ Flex Message(รูปซ้าย) จากนั้นก็กดปุ่มใน Flex Message จะพบว่าจะมีหน้าเว็บถูกเปิดขึ้นมา(รูปขวา)

3. Postback Action

เป็น Action ที่จะทำการ post ค่ากลับไปที่ webhook โดย Action ประเภทนี้เหมาะกับการแนบค่าต่างๆไปเพื่อการตรวจสอบ, ดึงข้อมูล หรือ save state เป็นต้น

Object ที่รองรับการแนบ Postback Action

• Template Message, Flex Message, Quick Reply และ Rich Menu

โครงสร้างของ Postback Action

• type: postback (Required)
• data: String สูงสุดไม่เกิน 300 ตัวอักษร เพื่อส่งค่ากลับไป webhook โดยทั่วไปจะใช้ query string (Required)
• displayText: ข้อความที่จะโพสลงในห้องแชท ความยาวไม่เกิน 300 ตัวอักษร (Optional)
• label: ชื่อที่กำหนดให้กับ Action โดยมีรายละเอียดแตกต่างกันไปตามแต่ objects ที่แนบไป (อ่านรายละเอียดของ label ได้ที่ท้ายบทความ)[1]

ตัวอย่าง

เตรียม message payload ซึ่งได้แนบ Postback Action ไปกับ Quick Reply และมีหน้าตาแบบนี้

{
 "to": "U3c28...",
 "messages": [
  {
   "type": "text",
   "text": "Hello Quick Reply!",
   "quickReply": {
    "items": [
     {
      "type": "action",
      "action": {
       "type": "postback",
       "label": "Postback",
       "data": "action=buy&itemid=123"
      }
     }
    ]
   }
  }
  ]
}

เมื่อ Push ตัว payload ด้านบนไปก็จะได้ข้อความพร้อม Quick Reply(รูปซ้าย) จากนั้นก็กดตุ่ม Quick Reply ตัว Postback Action ก็จะ Post ค่าไปที่ webhook สุดท้าย เราก็ reply ตัว object ทั้งหมดออกมาผ่านห้องแชท(รูปขวา)

เอา object ที่ Postback Action ส่งเข้ามา มากางดูหน่อยซิ

{
 "type": "postback",
 "replyToken": "6424b...",
 "source": {
  "userId": "U3c28...",
  "type": "user"
 },
 "timestamp": 1536570744752,
 "postback": {
  "data": "action=buy&itemid=123"
 }
}

4. Datetime Picker Action

เป็น Action สำหรับการเลือกวันเวลา โดยเมื่อคลิกจะมี datetime dialog ขึ้นมา หลังจากเลือกวันเวลาได้แล้วก็จะ Postback กลับไปที่ webhook

Object ที่รองรับการแนบ Datetime Picker Action

• Template Message, Flex Message, Quick Reply และ Rich Menu

โครงสร้างของ Postback Action

• type: datetimepicker (Required)
• data: String สูงสุดไม่เกิน 300 ตัวอักษร เพื่อส่งค่ากลับไป webhook โดยทั่วไปจะใช้ query string (Required)
• mode: โหมดในการแสดง dialog มี 3 ประเภทคือ date, time และ datetime (Required)
• initial: วันเวลาเริ่มต้นใน dialog ตัวอย่าง 2018–09–11t00:00 (Optional)
• max: วันเวลามากที่สุดที่สามารถให้เลือกได้ใน dialog ตัวอย่าง 2019–12–31t23:59 (Optional)
• min: วันเวลาที่น้อยที่สุดที่สามารถให้เลือกได้ใน dialog ตัวอย่าง 2018–01–01t00:00
• label: ชื่อที่กำหนดให้กับ Action โดยมีรายละเอียดแตกต่างกันไปตามแต่ objects ที่แนบไป (อ่านรายละเอียดของ label ได้ที่ท้ายบทความ)[1]

ตัวอย่าง

เตรียม message payload ซึ่งได้แนบ Datetime Picker Action ไปกับ Quick Reply และมีหน้าตาแบบนี้

{
 "to": "U3c28...",
 "messages": [
  {
   "type": "text",
   "text": "Hello Quick Reply!",
   "quickReply": {
    "items": [
     {
      "type": "action",
      "action": {
       "type": "datetimepicker",
       "label": "Datetime Picker",
       "data": "storeId=12345",
       "mode": "datetime",
       "initial": "2018-09-11T00:00",
       "max": "2018-12-31T23:59",
       "min": "2018-01-01T00:00"
      }
     }
    ]
   }
  }
 ]
}

เมื่อ Push ตัว payload ด้านบนไปก็จะได้ข้อความพร้อม Quick Reply(รูปซ้าย) จากนั้นก็กดตุ่ม Quick Reply ตัว Datetime Picker Action ก็จะเปิด Dialog ขึ้นมาให้เลือกวันเวลา(รูปกลาง) หลังจากเลือกวันเวลาแล้ว ก็จะ Post ค่าไปที่ webhook สุดท้ายเราก็ reply ตัว object ทั้งหมดออกมาผ่านห้องแชท(รูปขวา)

เอา object ที่ Datetime Picker Action ส่งเข้ามา มากางดูหน่อยซิ

{
 "type": "postback",
 "replyToken": "74b36...",
 "source": {
  "userId": "U3c28...",
  "type": "user"
 },
 "timestamp": 1536637895702,
 "postback": {
  "data": "storeId=12345",
  "params": {
   "datetime": "2018-09-11T12:00"
  }
 }
}

5. Camera Action

เป็น Action ที่จะใช้เปิดกล้องถ่ายรูป ซึ่งเหมาะสำหรับ LINE Bot ที่ต้องการให้ผู้ใช้ถ่ายรูปและส่งรูปภาพเข้าไปยังระบบ

Object ที่รองรับการแนบ Camera Action

• Quick Reply

โครงสร้างของ Camera Action

• type: camera (Required)
• label: ข้อความที่แสดงใน Quick Reply ยาวสูงสุดที่ 20 ตัวอักษร (Required)

ตัวอย่าง

เตรียม message payload ซึ่งได้แนบ Camera Action ไปกับ Quick Reply และมีหน้าตาแบบนี้

{
 "to": "U3c28...",
 "messages": [
  {
   "type": "text",
   "text": "Hello Quick Reply!",
   "quickReply": {
    "items": [
     {
      "type": "action",
      "action": {
       "type":"camera",
       "label":"Camera"
      }
     }
    ]
   }
  }
 ]
}

เมื่อ Push ตัว payload ด้านบนไปก็จะได้ข้อความพร้อม Quick Reply(รูปซ้าย) จากนั้นก็กดตุ่ม Quick Reply ตัว Camera Action ก็จะเปิดกล้อง(รูปกลาง) ถ่ายรูปแล้วก็ส่งเข้าห้องแชท สุดท้ายเราก็ reply ตัว object ทั้งหมดออกมาผ่านห้องแชท(รูปขวา)

6. Camera Roll Action

เป็น Action ที่จะใช้เปิดแกลเลอรีรูปภาพ ซึ่งเหมาะสำหรับ LINE Bot ที่ต้องการให้ผู้ใช้ส่งรูปภาพเข้าไปยังระบบ

Object ที่รองรับการแนบ Camera Roll Action

• Quick Reply

โครงสร้างของ Camera Roll Action

• type: cameraRoll (Required)
• label: ข้อความที่แสดงใน Quick Reply ยาวสูงสุดที่ 20 ตัวอักษร (Required)

ตัวอย่าง

เตรียม message payload ซึ่งได้แนบ Camera Roll Action ไปกับ Quick Reply และมีหน้าตาแบบนี้

{
 "to": "U3c28...",
 "messages": [
  {
   "type": "text",
   "text": "Hello Quick Reply!",
   "quickReply": {
    "items": [
     {
      "type": "action",
      "action": {
       "type":"cameraRoll",
       "label":"Gallery"
      }
     }
    ]
   }
  }
 ]
}

เมื่อ Push ตัว payload ด้านบนไปก็จะได้ข้อความพร้อม Quick Reply(รูปซ้าย) จากนั้นก็กดตุ่ม Quick Reply ตัว Camera Roll Action ก็จะเปิดแกลเลอรี(รูปกลาง) เลือกรูปแล้วก็ส่งเข้าห้องแชท สุดท้ายเราก็ reply ตัว object ทั้งหมดออกมาผ่านห้องแชท(รูปขวา)

7. Location Action

เป็น Action ที่จะใช้เปิดหน้าแผนที่ ซึ่งเหมาะสำหรับ LINE Bot ที่ต้องการให้ผู้ใช้ส่ง Location ไปยังระบบ

Object ที่รองรับการแนบ Location Action

• Quick Reply

โครงสร้างของ Location Action

• type: location (Required)
• label: ข้อความที่แสดงใน Quick Reply ยาวสูงสุดที่ 20 ตัวอักษร (Required)

ตัวอย่าง

เตรียม message payload ซึ่งได้แนบ Location Action ไปกับ Quick Reply และมีหน้าตาแบบนี้

{
 "to": "U3c28...",
 "messages": [
  {
   "type": "text",
   "text": "Hello Quick Reply!",
   "quickReply": {
    "items": [
     {
      "type": "action",
      "action": {
       "type":"location",
       "label":"Location"
      }
     }
    ]
   }
  }
 ]
}

เมื่อ Push ตัว payload ด้านบนไปก็จะได้ข้อความพร้อม Quick Reply(รูปซ้าย) จากนั้นก็กดตุ่ม Quick Reply ตัว Location Action ก็จะเปิดหน้า Location ขึ้นมา(รูปกลาง) แล้วก็เลือกสถานที่ที่ต้องการ สุดท้ายเราก็ reply ตัว object ทั้งหมดออกมาผ่านห้องแชท(รูปขวา)

8. Richmenu Switch Action

เป็น Action ที่เกิดมาเพื่อ Rich Menu ซึ่งจะเข้ามาช่วยให้ผู้ใช้สามารถสลับ Rich Menu ได้รวดเร็วมากกว่าเดิมแบบเท่าตัว เพราะ request ที่เกิดขึ้น จะเหลือเพียง 2(จาก 4) ระหว่าง Client กับ LINE server

Object ที่รองรับการแนบ Location Action

• Rich Menu

โครงสร้างของ Location Action

• type: richmenuswitch (Required)
• richMenuAliasId: ชื่อของ Rich Menu เป้าหมาย โดยสามารถระบุเป็น a-z, A-Z, 0–9, _, และ — สูงสุด 100 ตัวอักษร (Required)
• data: ข้อมูลที่จะแนบไปกับ Webhook Event แบบ Postback ที่ระบุได้สูงสุด 300 ตัวอักษร (Required)

ตัวอย่าง

{
  "size": {
    "width": 2500,
    "height": 1686
  },
  "selected": true,
  "name": "richmenu-a",
  "chatBarText": "Menu",
  "areas": [
    {
      "bounds": {
        "x": 1679,
        "y": 858,
        "width": 804,
        "height": 813
      },
      "action": {
        "type": "richmenuswitch",
        "richMenuAliasId": "richmenu-b",
        "data": "richmenu=b"
      }
    }
  ]
}

9. Clipboard Action

เป็น Action ที่ให้ Copy ข้อความ Text เข้าไปเก็บใน Clipboard ซึ่งเหมาะกับนักพัฒนาที่ต้องการใช้ผู้ใช้งาน Copy ข้อความไปแบบง่ายๆ เช่น คูปอง โค้ด หรือ รหัสส่วนลด เป็นต้น

Object ที่รองรับการแนบ Location Action

• Rich Menu, Quick Reply, Imagemap Message, Template Message และ Flex Message

โครงสร้างของ Location Action

• type: clipboard (Required)
• label: ชื่อที่กำหนดให้กับ Action โดยมีรายละเอียดแตกต่างกันไปตามแต่ objects ที่แนบไป (อ่านรายละเอียดของ label ได้ที่ท้ายบทความ)[1]
• clipboardText: ข้อความ Text ที่ระบุได้สูงสุด 1,000 ตัวอักษร (Required)

ตัวอย่าง

{
    "to": "U4af4980629...",
     "messages":[
      {
        "type": "template",
        "altText": "This is your coupon code.",
        "template": {
          "type": "buttons",
          "thumbnailImageUrl": "{your coupon image}",
          "imageAspectRatio": "rectangle",
          "imageSize": "cover",
          "imageBackgroundColor": "#FFFFFF",
          "title": "Your exclusive coupon!",
          "text": "Period: Feb 2024.\nCopy and use the code from the button.",
          "actions": [
            {
              "type": "clipboard",
              "label": "Copy",
              "clipboardText": "3B48740B"  // Specify text to be copied to the clipboard
            }
          ]
        }
      }
    ]
}

[1]เพิ่มเติม - รายละเอียดของ label

• กรณีที่แนบไปกับ Template Messages ทุกประเภทของ template จะสามารถระบุตัวอักษรได้สูงสุด 20 ตัวอักษร และเป็น Required ยกเว้น template ประเภท Image carousel ที่จะระบุตัวอักษรได้สูงสุด 12 ตัวอักษร และเป็น Optional
• กรณีที่แนบไปกับ Rich Menu จะระบุตัวอักษรได้สูงสุด 20 ตัวอักษร (Optional)
• กรณีที่แนบไปกับ Quick Reply จะระบุตัวอักษรได้สูงสุด 20 ตัวอักษร (Required)
• กรณีที่เป็น Flex Message จะระบุตัวอักษรได้สูงสุด 20 ตัวอักษร (Required) และจะแสดงผลเฉพาะกับ component ที่เป็น Button แต่กับ Box, Text, และ Image จะไม่แสดง

บทสรุป

ใครที่อ่านมาถึงตรงนี้ ก็คงรู้จักและเข้าใจ Action ทั้ง 8ใน LINE Messaging API กันมากขึ้นละ ว่าสามารถใช้กับ Message Object แบบไหนได้บ้าง และมีข้อจำกัดอะไรอยู่บ้าง ซึ่งใน LINE Developers Thailand ก็เจอคำถามเรื่องนี้เป็นระยะ และเข้าใจว่าเรื่อง Action มันแอบซับซ้อนเพราะมีข้อจำกัดยิบย่อยอยู่ เลยหยิบเรื่องนี้มาเขียนซะเลย และหวังว่าบทความนี้จะเป็นคัมภีร์ให้นักพัฒนาจำ Action ได้และใช้ Action เป็น…แล้วพบกันใหม่ LINE Developers