LINE Toolkit Studio — Visual Editor & Orchestrator สำหรับ LINE OA

ระบบ Visual Editor และ Orchestrator สำหรับออกแบบ Rich Menu แบบหลายแท็บ (Tabbed Switcher) คำนวณพิกัดระดับพิกเซล และ Deploy ตรงสู่ LINE Messaging API

1. Overview#

LINE Toolkit Studio คือเครื่องมือ Visual Canvas Editor และ Orchestrator ระดับมืออาชีพสำหรับการออกแบบ, จำลอง (Simulator), และติดตั้ง Rich Menu บน LINE Official Account (LINE OA) รองรับระบบเมนูแบบสลับแท็บไปมา (Tab Switcher ผ่าน Rich Menu Alias) ช่วยลดความซับซ้อนในการเขียน JSON Schema และคำนวณพิกัด (x, y, width, height) ด้วยตนเอง

ระบบถูกสร้างขึ้นตามแนวทาง Security & Privacy First โดยข้อมูล Channel Access Token ของลูกค้าจะถูกจัดเก็บเฉพาะใน Local Storage ของเบราว์เซอร์ผู้ใช้งานเท่านั้น ไม่มีการบันทึก Credential หรือความลับของลูกค้าลงในฐานข้อมูลหรือเซิร์ฟเวอร์ใดๆ

2. Stories & Visual Tour#

Visual Canvas & Interactive Editor#

หน้าอินเทอร์เฟซแบ่งเป็น 3 คอลัมน์หลัก: แผงควบคุมโปรไฟล์ลูกค้า/แท็บเมนู, ผืนผ้าใบ (Canvas) วาดพื้นที่ Bounding Box แบบลากวาง พร้อมคำนวณสเกลให้ตรงกับความละเอียดมาตรฐานของ LINE (2500x1686 px หรือ 2500x843 px) แบบแม่นยำ 100%

LINE Toolkit Studio Main Editor

ระบบจำลองหน้าจอแชทเสมือนจริงของ LINE ช่วยให้ทีมงานสามารถทดสอบการคลิกปุ่ม สลับแท็บ Rich Menu และตรวจสอบ Action (URI, Message, Rich Menu Switch) ได้แบบ Realtime ก่อน Deploy ขึ้นบัญชีจริง

LINE Toolkit Simulator

Card Studio & Template Designer#

แผงจัดการโครงสร้าง Rich Menu Cards และการเชื่อมโยง Aliases ช่วยให้การสร้างเมนูที่มีหลายหน้าหรือหลายบริบททำได้อย่างเป็นระบบ

LINE Toolkit Card Studio

3. Architecture & Workflows#

ระบบออกแบบการทำงานเป็น 4 ขั้นตอนในการติดตั้งสู่ LINE Platform ผ่าน Pipeline อัตโนมัติ:

1
graph TD
2
    A["Visual Canvas / Action Config"] -->|Draw & Configure| B["Zustand State Store"]
3
    B -->|Export & Validate| C["Rich Menu Schema Generator"]
4
    C -->|Coordinate Scaling| D["Next.js API Route /api/richmenu/deploy"]
5
    D -->|Step 1: Create Schema| E["LINE API: /v2/bot/richmenu"]
6
    D -->|Step 2: Upload Image Binary| F["LINE API: /v2/bot/richmenu/:id/content"]
7
    D -->|Step 3: Bind Alias| G["LINE API: /v2/bot/richmenu/alias"]
8
    D -->|Step 4: Set Default Menu| H["LINE API: /user/all/richmenu/:id"]

การไหลของข้อมูล (Data Pipeline)#

Interactive Canvas: ผู้ใช้งานวาดกรอบ Action Area บนรูปภาพ Rich Menu ระบบจะทำการแปลง Coordinate จากขนาดแสดงผลในบราวเซอร์ไปสู่ Resolution ดั้งเดิมของ LINE โดยอัตโนมัติ
Action Binding: กำหนด Action ประเภทต่างๆ เช่น เปิดลิงก์ (URI), ตอบกลับข้อความ (Message), หรือสลับหน้าเมนู (RichMenuSwitch ผ่าน Alias ID)
Automated 4-Step Deployment:
- สร้าง Rich Menu Metadata ID ผ่าน /v2/bot/richmenu
- แปลงไฟล์รูปภาพเป็น Buffer Binary แล้วอัปโหลดผ่าน Content Endpoint
- ผูก Alias ID เพื่อให้ฟังก์ชันสลับแท็บทำงานได้อย่างไร้รอยต่อ
- ตั้งค่าเมนูเริ่มต้น (Default Rich Menu) ให้กับผู้ติดตามทุกคนทันที

4. Engineering Highlights & Challenges#

1. Accurate Coordinate Scaling#

ขนาดจริงของรูปภาพ Rich Menu มาตรฐาน LINE มีความละเอียดสูงมาก (2500x1686 px สำหรับ Full size และ 2500x843 px สำหรับ Compact size) การแสดงผลบนหน้าจอจึงต้องย่อสเกลลง ระบบจึงสร้าง Coordinate Transformation Engine ที่แปลงพิกัด CSS พิกเซลกลับไปเป็นพิกัดจริงอย่างแม่นยำ ป้องกันปัญหาการกดไม่ติดหรือพื้นที่ Action ทับซ้อน

การจัดการสถานะของเมนูแบบหลายแท็บ ที่แต่ละแท็บมีรูปภาพ Action Areas และการผูก Alias ข้ามไปมา ถูกควบคุมผ่าน Zustand อย่างเป็นระเบียบ ทำให้การสลับแท็บและการ Undo/Redo เป็นไปอย่างลื่นไหล

3. Zero-Server Secret Policy#

เพื่อความปลอดภัยสูงสุดในการรับงานลูกค้าหลายราย ระบบจะไม่เก็บ Channel Access Token ของ LINE ไว้บนเซิร์ฟเวอร์ ทุกคำขอการ Deploy จะถูกส่งผ่าน Payload ที่เข้ารหัสใน Session และเคลียร์ทิ้งทันทีเมื่อคำขอเสร็จสิ้น

5. My Role & What I Built#

ในฐานะ Full-stack & System Architect ผมรับผิดชอบการออกแบบและพัฒนาระบบทั้งหมดตั้งแต่ต้นจนจบ:

Frontend Canvas Engine: พัฒนาผืนผ้าใบแบบ Interactive บน React 19 และ Next.js 16 พร้อมระบบ Drag & Resize Bounding Box
State & Multi-Client Architecture: ออกแบบระบบจัดการ Client Profile และ Tab Switcher ด้วย Zustand
LINE Messaging API Integration: สร้าง Server-side Proxy Handler ที่รองรับการอัปโหลดไฟล์ภาพ Binary ขนาดใหญ่ (สูงสุด 1MB) และเชื่อมโยง Alias แบบครบวงจร
Automated Testing: เขียนชุดทดสอบ Vitest ครอบคลุมการคำนวณพิกัด, การตรวจสอบขนาดไฟล์, และการสร้าง Schema ตามมาตรฐาน LINE

6. Result & Current State#

Production Live: ระบบ Deploy และใช้งานจริงบน Vercel Production (line-toolkit.vercel.app)
Efficiency Boost: ลดเวลาในการออกแบบและติดตั้ง Rich Menu หลายแท็บจากเดิมหลายชั่วโมง เหลือเพียงไม่กี่นาที
Zero Config Overhead: ทีมการตลาดหรือกราฟิกสามารถนำรูปที่ออกแบบมาวาง วาดกรอบ แล้วกด Deploy ขึ้น LINE OA ได้ทันทีโดยไม่ต้องเขียนโค้ด

7. Demo & Code#

Production Live (เข้าใช้งานได้จริง): line-toolkit.vercel.app
GitHub (Private Repository): Manchinn/line-toolkit
Architecture: Next.js 16 (App Router) + React 19 + TypeScript + Tailwind CSS v4 + Zustand + LINE Messaging API
Deployment Target: Vercel Production Environment