Slack Block Kit Builder: ประกอบข้อความริชโดยไม่ต้องเขียนโค้ด

ถ้าเคยเขียน bot หรือตั้ง incoming webhook บน Slack คุณคงรู้ดีว่าข้อความธรรมดาแบบ plain text มันไม่พอแล้ว Slack Block Kit คือเฟรมเวิร์กสำหรับสร้างข้อความริชและ modal ที่ทำให้ notification ของคุณดูเป็นมืออาชีพ — มี header, section จัดรูปแบบด้วย mrkdwn, เส้นแบ่ง และปุ่มที่ผู้ใช้กดโต้ตอบได้จริง แต่ปัญหาคือ Block Kit ต้องเขียนเป็น JSON ที่ซ้อนกันหลายชั้น พอโครงสร้างเริ่มยาว ก็ผิดง่ายมาก คอมมาลอยแม้ว วงเล็บหลุด หรือจำ field ผิด เรื่องแบบนี้เกิดขึ้นกับทุกคนที่เคยพิมพ์ payload เองใน editor เปล่า ๆ

Slack Block Kit Builder ถูกสร้างมาเพื่อแก้ปัญหานี้โดยตรง เครื่องมือฟรีตัวนี้ให้คุณประกอบ block ทีละชิ้นจาก palette ที่มี section, header, divider, button และ input แก้ข้อความและ label ได้ทันที พร้อม preview สไตล์ Slack แบบเรียลไทม์ด้านข้าง เห็นทันทีว่าข้อความจะหน้าตาเป็นยังไงตอนส่งจริง โดยไม่ต้องรอ deploy bot ขึ้นไปทดสอบใน channel จริง

ที่สำคัญคือทุกอย่างทำงานใน browser 100% ไม่มีข้อมูลอะไรถูกส่งขึ้น server ไม่ต้องสมัครสมาชิก ไม่ต้องใส่ token หรือ API key ใด ๆ พอประกอบเสร็จก็กดคัดลอก JSON payload ไปวางใน chat.postMessage, webhook หรือโค้ด bot ของคุณได้เลย บทความนี้จะพาไปดูว่าเครื่องมือตัวนี้ทำอะไรได้บ้าง ใช้ยังไง และ Block Kit แต่ละประเภทควรใช้ตอนไหน

ทำไมต้องใช้ Slack Block Kit Builder?

• จบปัญหา JSON ผิดพลาด — payload ของ Block Kit ซ้อนกันหลายชั้น พิมพ์มือทีเดียวพลาดคือ Slack ส่งไม่ได้ builder สร้าง JSON ที่ถูกต้องให้อัตโนมัติ
• เห็นผลลัพธ์ก่อนส่งจริง — preview สไตล์ Slack อัปเดตเรียลไทม์ข้างแต่ละ block ไม่ต้องเดาว่าหน้าตาจะออกมาแบบไหน ไม่ต้องส่งทดลองเข้า channel จริง
• ไม่ต้องจำโครงสร้าง — ไม่ต้องเปิดเอกสาร Slack ทุกครั้งว่า field ชื่ออะไร ซ้อนตรงไหน palette เลือกประเภท block แล้วใส่เนื้อหาได้เลย
• ลากจัดลำดับได้ — อยากย้าย section ขึ้นบน หรือสลับตำแหน่ง divider ลากสลับได้ทันที payload เรียงตามใหม่ให้เอง
• ทำงานใน browser ทันที — ฟรี ไม่ต้องสมัคร ไม่ต้องติดตั้งอะไร ข้อมูลอยู่กับเครื่องคุณ ปลอดภัยกับ payload ที่มีข้อความภายในองค์กร
• ใช้ได้ทั้งนักพัฒนาและคนไม่ใส่โค้ด — นักพัฒนา bot ใช้เร่งงาน ทีม design หรือผู้ดูแล notification ก็ใช้ประกอบ message template ได้เหมือนกัน

ฟีเจอร์หลัก

รายละเอียดที่น่าสังเกตเพิ่มเติม:

• preview ที่อัปเดตขณะพิมพ์ช่วยให้จูนความยาวข้อความได้พอดี เพราะ Slack จะตัด header ที่ยาวเกินไป และ layout บางอย่างแตกต่างกันระหว่าง desktop กับมือถือ
• action ID ที่ตั้งให้ปุ่มคือสิ่งที่ backend ของคุณจะได้รับตอนผู้ใช้กด ตั้งชื่อให้สื่อความหมายตั้งแต่ใน builder จะช่วยให้ฝั่ง server เขียน handler ได้เป็นระเบียบ
• payload ที่ได้ออกแบบให้ตรงกับรูปแบบที่ Slack API รับ ทั้งกรณี message ธรรมดาและ modal ที่ใช้ input block

วิธีสร้างข้อความ Slack

1. เปิด Slack Block Kit Builder แล้วเริ่มจาก block แรก — ส่วนใหญ่คือ header สำหรับชื่อเรื่อง หรือ section สำหรับเนื้อความหลักของข้อความ
2. เพิ่ม block จาก palette ทีละชิ้นตามลำดับที่ต้องการ เช่น header, section อธิบายรายละเอียด, divider คั่น และ actions ที่มีปุ่ม
3. แก้ข้อความ label และ action ID ในแต่ละ block ดูผลลัพธ์สดในแผง preview ด้านข้างไปพร้อมกัน
4. ลากสลับลำดับ block ให้เข้าที่ จนเนื้อหาไหลตามที่คุณต้องการให้ผู้อ่านเห็น
5. กดคัดลอก JSON payload แล้วเอาไปวางในโค้ด bot, สคริปต์ CI หรือคำสั่ง curl ที่เรียก Slack API ได้ทันที

ทำความเข้าใจ Block ของ Block Kit

section — บล็อกพื้นฐานด้วย mrkdwn

section คือ block ที่ใช้บ่อยที่สุด รับข้อความประเภท mrkdwn ซึ่งเป็นรูปแบบ markup ของ Slack ใช้ *ตัวหนา*, _ตัวเอียง_, ~ขีดฆ่า~, `โค้ด` และลิงก์แบบ <https://example.com|ข้อความ> ได้ ใช้ section เขียนเนื้อหาหลัก รายละเอียด deployment หรือคำอธิบายต่าง ๆ

header — พาดหัวให้เห็นชัด

header คือข้อความตัวใหญ่ด้านบนสุดเหมาะกับประกาศหรือหัวข้อ notification ข้อจำกัดสำคัญคือใช้ plain_text เท่านั้น ใส่ mrkdwn ไม่ได้ และมีจำนวนตัวอักษรสูงสุด 150 ตัว ควรเขียนสั้น กระชับ และถ้าเป็น alert ให้ใส่ระดับความรุนแรงไว้ในหัวเลย

divider — เส้นแบ่งเรียบง่าย

divider คือเส้นขีดแนวนอนเอาไว้คั่นช่วงเนื้อหา ไม่มี property ให้ตั้งค่าอะไรเลย ใช้เมื่อข้อความยาวและมีหลายหัวข้อ ช่วยให้อ่านไม่ปนกัน

actions และ button — ทำให้ข้อความโต้ตอบได้

block ประเภท actions คือแถวที่วางปุ่ม แต่ละปุ่มมี text, สไตล์ (primary สีเขียว, danger สีแดง) และ action_id ที่ backend ใช้รู้ว่าผู้ใช้กดอะไร ยกตัวอย่าง workflow อนุมัติก็มีปุ่ม "อนุมัติ" และ "ปฏิเสธ" คู่กัน โดยตั้ง action ID แยกชัด เช่น approval_approve กับ approval_reject

input — สำหรับ modal

input block ใช้เก็บข้อมูลจากผู้ใช้ ให้ใส่ label และตั้ง action ID ได้เหมือนกัน จุดต่างสำคัญคือ input ใช้ได้เฉพาะใน modal (หน้าต่าง popup ที่ Slack เปิดให้กรอกฟอร์ม) ไม่ใช่ใน message ปกติ เหมาะกับฟอร์มลงทะเบียน on-call, ฟอร์มรายงาน incident หรือฟอร์มขอสิทธิ์

โครงสร้าง payload และปลายทางที่เอาไปใช้

payload ของ Block Kit คือ object ที่มี key blocks เป็น array เรียงตามลำดับการแสดงผล ตัวอย่าง payload ขั้นต่ำ:

{
  "blocks": [
    { "type": "header", "text": { "type": "plain_text", "text": "Deploy สำเร็จ" } },
    {
      "type": "section",
      "text": { "type": "mrkdwn", "text": "*api-service* v1.4.2 ขึ้น production" }
    }
  ]
}

เอา payload นี้ไปใช้ได้สามทางหลัก หนึ่งคือ method chat.postMessage ของ Web API ผ่าน bot token เหมาะเมื่อ bot ต้องส่ง message แบบมีเงื่อนไข สองคือ incoming webhook ที่คุณตั้งค่าใน Slack app แล้ว POST JSON เข้า URL นั้น เหมาะกับ CI/CD หรือ script ง่าย ๆ และสามคือ modal ที่เปิดผ่าน trigger ซึ่งใช้ array blocks แบบเดียวกันแต่รวม input block ได้ด้วย

กรณีใช้งานจริง

Bot แจ้งเตือน deploy

ทีม dev ประกอบ message deploy ด้วย header "Deploy สำเร็จ" section ที่ใช้ mrkdwn บอกชื่อ service กับ version และ divider คั่นก่อนลิงก์ไป changelog ครั้งถัดไปที่ pipeline รัน ก็แค่แทนค่า version ใน template เดิม — ไม่ต้องเขียน JSON ใหม่ตั้งแต่ต้นทุกครั้งที่แก้ layout

ปุ่มอนุมัติใน workflow

เมื่อมีคำขออนุมัติ PR หรือคำขอเบิกเงิน bot ส่ง message ที่มี actions block ใส่ปุ่ม "อนุมัติ" (สไตล์ primary) และ "ปฏิเสธ" (สไตล์ danger) พร้อม action ID ที่ชัดเจน ผู้อนุมัติกดใน Slack ได้เลย backend รับ interaction แล้วอัปเดตสถานะในระบบ ทำให้ workflow เดินต่อโดยไม่ต้องสลับไปเปิดหน้าเว็บอื่น

โพสต์รายงานตามรอบ

รายงานรายวันหรือรายสัปดาห์อย่างยอด ticket, uptime หรือสรุปเหตุการณ์ ทำเป็น message ที่มี header บอกช่วงเวลา ตามด้วย section ต่อหัวข้อ คั่นด้วย divider ประกอบ template ครั้งเดียวใน builder แล้วให้ cron หรือ scheduled job แทนตัวเลขก่อน POST เข้า webhook ทุกรอบ

จัดรูปแบบ alert ของทีม on-call

alert จากระบบ monitoring มักมาเป็นข้อความยาวที่อ่านยาก ใช้ header บอกความรุนแรง (เช่น "SEV1: API down") section แรกสรุปสิ่งที่เกิดขึ้นและเวลา section ถัดไปแนบลิงก์ dashboard และ runbook ปิดท้ายด้วย actions ที่มีปุ่ม "Acknowledge" ทีม on-call เห็นข้อมูลสำคัญในไม่กี่วินาทีและจัดการได้จากใน Slack เลย

แนวทางปฏิบัติที่ดี

• เขียนข้อความกระชับ — header จำกัด 150 ตัวอักษร ส่วน section ควรสั้นพอที่จะอ่านจบในแจ้งเตือน ถ้ายาวมากแยกเป็นหลาย section
• ตั้ง action ID ให้สื่อความหมาย — ใช้รูปแบบเดียวกันทั้งโปรเจกต์ เช่น deploy_retry หรือ approval_approve เพื่อให้ฝั่ง backend จับคู่ handler ได้ง่าย
• ทดสอบก่อนใช้จริง — ดูจาก preview ใน builder แล้วลองส่งเข้า channel ทดสอบหนึ่งครั้ง เพราะข้อความจริงอาจต่างไปบนจอมือถือ
• อย่ายัดหลาย block จนเกิน — Slack จำกัดจำนวน block ต่อ message ควรใช้เท่าที่จำเป็น และย้ายรายละเอียดที่เยอะไปเป็นลิงก์แทน
• เก็บ payload เป็น template — วาง JSON ที่สร้างเสร็จไว้ใน repo หรือ config ของ bot แล้วให้ตัวแปรแทนค่าที่เปลี่ยนบ่อย เช่น version หรือ environment
• อย่าฝังข้อมูลลับใน message — token, รหัสผ่านหรือ secret ไม่ควรอยู่ใน payload เพราะข้อความ Slack เห็นได้จากทุกคนใน channel

พร้อมให้ notification ของคุณดูมืออาชีพแล้วหรือยัง เปิด Slack Block Kit Builder ประกอบ block แรกได้ในไม่กี่นาที ฟรี ทำงานใน browser ทันที ไม่ต้องสมัครอะไรทั้งสิ้น

เครื่องมือที่เกี่ยวข้องที่คุณอาจสนใจ:

• Markdown to Slack Converter — แปลงข้อความ Markdown ให้เป็นรูปแบบ mrkdwn ของ Slack
• Discord Embed Builder — สร้าง embed message สำหรับ Discord webhook พร้อม preview
• Webhook Signature Verifier — ตรวจสอบลายเซ็น HMAC ของ webhook เพื่อยืนยันว่า request มาจากแหล่งจริง

ขอให้ประกอบข้อความอย่างสนุก!

คำถามที่พบบ่อย

ถ: ใช้เครื่องมือนี้ฟรีจริงไหม ต้องสมัครหรือใส่ token ไหม?

ตอบ: ฟรี 100% ไม่ต้องสมัครสมาชิกและไม่ต้องใส่ token หรือ API key ใด ๆ เครื่องมือไม่เชื่อมต่อกับบัญชี Slack ของคุณเลย มีหน้าที่ประกอบ payload และให้คุณคัดลอก JSON ไปใช้เอง

ถ: ข้อมูลที่พิมพ์ในเครื่องมือถูกส่งไป server ไหม?

ตอบ: ไม่ ทุกอย่างประมวลผลใน browser ของคุณทั้งหมด ข้อความหรือ payload ที่คุณประกอบไม่ออกจากเครื่อง จึงใช้กับเนื้อหาภายในองค์กรได้อย่างปลอดภัย

ถ: payload ที่ได้เอาไปใช้ตรงไหนได้บ้าง?

ตอบ: ใช้ได้กับทุกที่ที่รับ payload ของ Block Kit เช่น method chat.postMessage ของ Slack Web API, incoming webhook URL ที่คุณตั้งค่าไว้ และ blocks ของ modal ที่เปิดจาก interaction

ถ: block ประเภท input ใช้ใน message ปกติได้ไหม?

ตอบ: ไม่ได้ ตามข้อกำหนดของ Slack input block ใช้ได้เฉพาะใน modal ถ้าต้องการให้ผู้ใช้กรอกข้อมูล ให้เปิด modal จาก interaction เช่น การกดปุ่ม แล้ววาง input block ไว้ใน modal นั้นแทน

ถ: ทำไม JSON ที่เขียนเองถึงส่งไม่สำเร็จทั้งที่ดูถูกแล้ว?

ตอบ: สาเหตุที่พบบ่อยคือ field ผิดตำแหน่ง เช่น ใส่ mrkdwn ใน header (ต้องเป็น plain_text เท่านั้น) จำนวน block เกินขีดจำกัด หรือวงเล็บและคอมมายังไม่ตรง ใช้ builder สร้าง payload จะตัดปัญหาเหล่านี้ออกไปทั้งหมด