เคยส่ง PDF แคตตาล็อกสินค้าให้ลูกค้าแล้วรู้สึกว่ามันดูแบนไปหน่อยไหม? เลื่อนขึ้นลงเหมือนอ่านเอกสารทั่วไป ไม่มีความรู้สึก "พลิกหน้าหนังสือ" เลย
FlipDeck คือเครื่องมือที่เปลี่ยน PDF ธรรมดาให้กลายเป็นหนังสือ 3 มิติที่พลิกหน้าได้จริงบนเว็บ และเวอร์ชันนี้ — flipdeck-gas — ถูกทำมาให้รันบน Google Apps Script โดยเฉพาะ แปลว่า:
- ไม่ต้องมีเซิร์ฟเวอร์ ไม่ต้องเช่าโฮสติ้ง
- ไม่ต้องรู้จัก git, Node.js หรือเปิด terminal เลยสักครั้ง
- ใช้แค่บัญชี Google ที่คุณมีอยู่แล้ว + ไฟล์ PDF ใน Google Drive
ใครที่มี Google Account ก็ตั้งได้เองใน 10 นาที
ทดลองใช้ของจริง: https://script.google.com/macros/s/AKfycbzl0BP4EiXkmKwugbZDZvRmSOXt9sEDEvDtC8qUTyAvxqGT2yYCBBJqOZqZzVF1LWrlxw/exec
โค้ดทั้งหมด: เทมเพลตพร้อม copy วางอยู่ใน flipdeck-gas ส่วนซอร์สโค้ดต้นทางของตัวแอป FlipDeck (React) อยู่ที่ flipdeck
§01ใช้งานยังไง (ทำตามได้เลย ไม่ต้องเขียนโค้ด)
โค้ดต้นแบบทั้งหมดถูก build ไว้ให้เรียบร้อยแล้ว สิ่งที่คุณต้องทำคือ "คัดลอกไฟล์" ไปวางในโปรเจกต์ Apps Script ของตัวเอง:
- เปิด script.google.com → กด New project
- เปิดไฟล์
template/Code.gsจากรีโป แล้ววางทับไฟล์Code.gsเริ่มต้น - สร้างไฟล์ HTML ใหม่ ตั้งชื่อว่า
Indexแล้ววางเนื้อหาจากtemplate/Index.htmlลงไป - ไปที่ Project Settings → Show "appsscript.json" แล้ววางเนื้อหาจาก
template/appsscript.json - ไปที่ Project Settings → Script Properties เพิ่ม 2 ค่า:
CATALOG_PDF_ID— ไอดีไฟล์ PDF แคตตาล็อกของคุณใน Google DriveCATALOG_NAME— ชื่อแคตตาล็อกที่จะแสดงบนหน้าเว็บ
- กด Deploy → New deployment → Web app เลือก execute as ตัวเอง, access เป็น "Anyone" แล้วกด Deploy เปิดลิงก์ที่ได้ 1 ครั้ง แล้วกด Advanced → Go to (unsafe) เพื่อยืนยันสิทธิ์อ่าน Google Drive (ระบบจะเตือนว่าเป็นแอปที่ยังไม่ได้ verify ซึ่งเป็นเรื่องปกติสำหรับสคริปต์ส่วนตัว)
เท่านี้ก็เสร็จ — ได้ลิงก์เว็บแอปที่เปิดแล้วเห็นแคตตาล็อกพลิกหน้าได้จริง
หมายเหตุเรื่องความเป็นส่วนตัว: ไฟล์ PDF ใน Drive ไม่จำเป็นต้องแชร์แบบ "Anyone with the link" เว็บแอปจะอ่านไฟล์ด้วยสิทธิ์บัญชีของคุณเองเสมอ ไฟล์จึงเก็บเป็นส่วนตัวได้ตามปกติ
§02อยากเปลี่ยนแคตตาล็อก?
ไม่ต้อง deploy ใหม่ทั้งหมด แค่เปลี่ยนค่า CATALOG_PDF_ID ใน Script Properties ให้ชี้ไปที่ไฟล์ PDF ใหม่ก็พอ
§03อยากรู้ว่าเบื้องหลังมันสร้างยังไง?
ไฟล์ที่คุณคัดลอกไปนั้นถูก generate มาจากซอร์สโค้ดจริงของ FlipDeck (แอป React ที่ทำ flipbook 3D ใน github.com/paepuripat/flipdeck) ผ่าน build pipeline ใน flipdeck-gas ถ้าอยากดูว่ามันประกอบกันยังไง อยากปรับแต่ง UI เอง หรืออยากเข้าใจสถาปัตยกรรมเบื้องหลัง เข้าไปดูได้ที่รีโปเลย — README และ CLAUDE.md อธิบายไว้ครบทั้งขั้นตอน build และเหตุผลของแต่ละการตัดสินใจ
§04เอาไปใช้ต่อ
ลองเอาไปใช้กับแคตตาล็อกสินค้า พอร์ตโฟลิโอ หรือ lookbook ของคุณดูได้ — ใช้เวลาไม่ถึงชั่วโมงตั้งแต่ต้นจนจบ
Resources
- 🔗 Live Demo: script.google.com/.../exec
- 🔗 Template folder (copy วางใช้เลย): flipdeck-gas/template
- 🔗 Template repo (เต็ม): flipdeck-gas
- 🔗 FlipDeck source (React app): flipdeck
💬 ถ้ามีคำถาม comment ใต้วิดีโอ หรือเปิด issue ใน GitHub repo ครับ
Engineer, writer, occasional GPU-melter. Writes every Sunday about applied AI — agents, evals, and whatever broke that week.
If you got something out of this, share it with someone who's trying to ship their first agent.