เคยไหมครับ สร้าง Web Application ด้วย Google Apps Script เสร็จแล้ว แต่ URL ที่ได้ออกมามันยาวเหยียด แถมด้านบนยังมีแถบ “แอปพลิเคชันนี้สร้างโดยผู้ใช้ Google Apps Script” ขึ้นมาอีก จะส่งให้ลูกค้าก็รู้สึกไม่ค่อยเป็นมืออาชีพเท่าไหร่ใช่ไหมครับ
ส่งลิงก์ไปให้คนอื่นทีก็แอบกลัวเขาจะคิดว่าเป็นลิงก์แปลกๆ หรือลิงก์จาก hacker หรือเปล่า 😅
โพสนี้ผมเลยจะมาสอนวิธีทำให้ URL ของเราสั้นลง ดูเป็นมืออาชีพ แล้วก็ทำให้ แถบด้านบนหายไปด้วย ครับ ขอแอบสปอยนิดนึงว่า วิธีนี้ง่ายมากๆ ไม่ต้องเขียนโค้ดเองเลยสักบรรทัด ใช้แค่ AI กับ Netlify ก็จบครับ
💡 หลักการง่ายๆ ของวิธีนี้
สำหรับคนที่ยังไม่เคยทำ ไอเดียของวิธีนี้คือ เราจะให้ AI สร้างไฟล์ HTML ขึ้นมา 1 ไฟล์ ที่ทำหน้าที่เป็น “ตัวห่อ” (Wrapper) ครอบลิงก์ Google Apps Script ของเราไว้ด้วย iframe แบบเต็มจอครับ
พอเราเอาไฟล์นี้ไป Deploy บนเว็บโฮสติ้งฟรีอย่าง Netlify คนที่เข้าเว็บก็จะเห็นแค่โดเมนสั้นๆ ของเรา ในขณะที่ข้างในยังเป็น Web App ตัวเดิมที่ทำงานได้ครบทุกอย่างเหมือนเดิมเลยครับ
Step 1: ให้ AI สร้างไฟล์ index.html ให้เรา
ขั้นแรก ให้คุณไปที่ AI ตัวไหนก็ได้เลยครับ ส่วนในคลิปผมใช้เป็น AI Passport นะครับ
.
จากนั้นก๊อป Prompt นี้ มาวางได้เลยครับ ใน Prompt นี้คุณต้องแก้แค่ 2 จุด เท่านั้น
ช่วยสร้างไฟล์ index.html สำหรับ wrap Google Apps Script Web App
ให้ URL สั้นลงและซ่อน URL จริง โดยมีเงื่อนไขดังนี้:
[URL] //google app script url//
[ชื่อแอป] //ชื่อแอปของเรา//
ความต้องการ:
1. ใช้ iframe เต็มจอ (fullscreen, ไม่มี scrollbar, ไม่มีขอบ)
ไม่ใช้ redirect — address bar ต้องคงเป็นโดเมนของผมตลอด
2. ไม่ให้แถบ "แอปพลิเคชันนี้สร้างโดยผู้ใช้ Google Apps Script" แสดง
3. รองรับมือถือ: ใช้ 100dvh กัน address bar บัง + viewport-fit=cover
4. มี loading screen ระหว่างรอโหลด แล้ว fade out ตอน iframe โหลดเสร็จ
5. ใส่ allow="fullscreen"📌 [URL] — ใส่ลิงก์ Web App ของ Google Apps Script ของคุณ
📌 [ชื่อแอป] — ใส่ชื่อ Web App ของคุณ (ในตัวอย่างผมใช้ “Money Tracker”)
.
ถ้าคุณใช้ AI Passport เหมือนผม ผมแนะนำให้เลือกโมเดลเป็น Claude Opus 5 นะครับ แล้วกดส่งได้เลย
Step 2: ดาวน์โหลดไฟล์ + เพิ่มโค้ดฝั่ง Apps Script
แป๊บเดียว AI ก็จะเขียนไฟล์ index.html ขึ้นมาให้เราครับ ให้กด Download ไฟล์ออกมา แล้วเปลี่ยนชื่อไฟล์ให้เป็น index.html
ลองเปิดไฟล์ index.html ในเครื่องดูครับ จะเห็นว่าเราใช้งาน Web App ผ่านไฟล์นี้ได้เลย URL กลายเป็นไฟล์ในเครื่องเรา และ แถบด้านบนก็หายไปแล้ว 🎉
Step 3: Deploy ขึ้น Netlify (ฟรี)
ไฟล์ index.html นี้เราเอาไป Deploy ที่ไหนก็ได้นะครับ แต่ในคลิปนี้ผมจะพาไป Deploy ที่ Netlify ครับ
📌 ไปที่ netlify.com ถ้ายังไม่มี Account ก็สมัครก่อนเลยครับ ส่วนใครมีแล้วก็เข้าไปที่ Dashboard ได้เลย
📌 หาช่อง “Want to deploy a new project? Drag and drop your folder here” แล้วเลือกไฟล์ index.html ของเราอัปโหลดขึ้นไป
Step 4: ตั้งชื่อโดเมนให้ดูดี
พออัปโหลดเสร็จ เราจะได้ลิงก์มาหนึ่งลิงก์ ซึ่งชื่อจะเป็นแบบสุ่มๆ อาจจะไม่ถูกใจเราเท่าไหร่ ไม่เป็นไรครับ
ให้กดปุ่ม Quick setup แล้วแก้ชื่อ Project ได้เลย เช่นของผมเปลี่ยนเป็น expense-tracker-noobitguy แล้วกด Update project name
.
แค่นี้ครับ! เราก็จะได้เว็บไซต์ที่ชื่อดูดีขึ้นมากๆ อย่างของผมก็คือ expense-tracker-noobitguy.netlify.app กดเข้าไปก็จะเจอ Web App ของเราเองเลย ไม่ใช่ลิงก์ยาวๆ ของ Google Apps Script อีกแล้ว และ แถบด้านบนก็หายไปด้วย ✨
🎥 ดูแบบจับมือทำได้ที่คลิปนี้เลยครับ
[ฝังคลิป YouTube]
หวังว่าจะเป็นประโยชน์นะครับ ถ้าติดปัญหาการใช้งานหรือมีข้อสงสัย สามารถทักมาได้ที่ Facebook: บริหารงานแบบคนไอที ได้เลยครับ 🙂
🎓 สนใจคอร์สสร้าง Template ระบบสต๊อกสินค้าใน Google Sheets สอนโดยผมเอง สามารถดูรายละเอียดได้ที่ลิงค์นี้เลย
https://www.skilllane.com/courses/GoogleSheets-Noobitguy
🎓 สนใจคอร์ส สร้าง Web Application โดยไม่ต้องเขียนโค้ดด้วย Lovable AI สอนโดยผมเอง สามารถดูรายละเอียดได้ที่นี้เลย
https://page.futureskill.co/lovablewebapp?aff=446
🎥 อุปกรณ์ที่ผมใช้
กล้อง Sony ZV-E10 kit 16-50mm
Mouse Logitech MX Master 3s
MacBook Air M2
ไมค์ wireless Saramonic Blink 500
เก้าอี้ Anda Seat X-Air Pro Ergonomic Gaming Chair
แขนจับจอ Anda Seat Stealth A6L Ergonomic Monitor Arm
ไมโครโฟน AKG Lyra
ไฟส่องหน้าจอ Xiaomi Light Bar
