Google appscript เขียนเว็บไซต์ อย่างไร
ถ้าคุณอยาก “เขียนเว็บไซต์” แบบเร็วๆ โดยไม่ต้องเช่าโฮสติ้ง Google Apps Script (หรือที่หลายคนเรียก appscript / appscrip) ทำเป็น Web App ได้เลย เราใช้มันทำหน้าเว็บฟอร์มเล็กๆ หน้าแสดงผลข้อมูล หรือหน้าเครื่องมือภายในทีมบ่อยมาก เพราะกด Deploy แล้วได้ลิงก์ใช้งานทันที 1) เริ่มต้นติดตั้ง/เข้าใช้งาน Apps Script - ไปที่ Google Drive > New > More > Google Apps Script (ถ้าไม่เจอให้กด Connect more apps) - ตั้งชื่อโปรเจกต์ (เช่น testweb) เพื่อกันงงเวลาเรามีหลายงาน - ไฟล์หลักที่เจอบ่อย: Code.gs (ฝั่งเซิร์ฟเวอร์) และไฟล์ HTML (เช่น index.html) 2) โครงสร้างพื้นฐานของ GAS Web App (ตัวอย่างเข้าใจง่าย) - ใน Code.gs ทำฟังก์ชัน doGet เพื่อให้เว็บ “แสดงผล” - return HtmlService.createHtmlOutputFromFile('index'); - ใน index.html ก็ใส่ HTML/CSS/JS ได้ตามปกติ - ถ้าต้องเรียกใช้ข้อมูลจากฝั่ง Script ให้ใช้ google.script.run (เหมาะมากกับงานฟอร์ม/ดึงชีต) 3) เพิ่มไลบรารี (Library) เมื่อจำเป็น บางคนทำเว็บแล้วอยากใช้ไลบรารีเสริม ให้ไปที่เมนู Libraries/เพิ่มไลบรารี แล้วใส่ Script ID ของไลบรารีนั้น จากนั้นเลือกเวอร์ชันและกด Add วิธีนี้ช่วยให้โปรเจกต์เป็นระเบียบ แต่ถ้าเป็นเว็บหน้าเดียวธรรมดาอาจยังไม่ต้องใช้ 4) การทำให้ใช้งานได้ (Deploy) แบบ Web app ขั้นตอนนี้สำคัญสุด เพราะหลายคนเขียนเสร็จแต่เปิดลิงก์ไม่ได้ - กด Deploy > New deployment - เลือกประเภท “Web app” (ในบางหน้าจอจะขึ้น Select type) - ตั้งค่า - Execute as: Me (ส่วนใหญ่เลือกแบบนี้) - Who has access: - “Anyone” หรือ “Anyone with Google account” ถ้าต้องการให้คนอื่นเข้าได้ - ถ้าเลือก “Only myself” คนอื่นจะเข้าไม่ได้ - กด Deploy ระบบจะขอ Authorization ให้กดยอมรับ 5) ทำไมถึงเจอข้อความ “แอปพลิเคชันนี้สร้างโดยผู้ใช้ Google Apps Script” และควรเอาออกไหม? อันนี้เป็นข้อความ/หน้าคั่นที่ Google แสดงเพื่อความปลอดภัย (โดยเฉพาะเวลายังไม่ได้ Verify หรือเป็นสคริปต์ที่ขอสิทธิ์หลายอย่าง) เรา “เอาออกแบบ 100%” ไม่ค่อยได้ถ้าเป็นบัญชีทั่วไป เพราะเป็นนโยบายของ Google แต่ทำให้คนใช้งานสบายขึ้นได้ด้วยวิธีนี้ - ลดขอบเขตสิทธิ์ที่ขอ (Scopes) ให้เท่าที่จำเป็น เช่น ถ้าแค่อ่านชีต ก็อย่าขอสิทธิ์เกินจำเป็น - ใช้ลิงก์ Web app ล่าสุดเสมอ: ทุกครั้งที่ Deploy ใหม่ ให้เอา URL ใหม่/อัปเดตที่เดิม (ถ้าเลือกแก้ deployment เดิม) - ตั้งค่า Who has access ให้เหมาะสม: ถ้าอยากให้เปิดได้ง่าย เลือก Anyone (แต่ต้องประเมินความปลอดภัยข้อมูล) - ถ้าเป็นงานองค์กร/ภายใน อาจใช้ Google Workspace และตั้งค่า trusted apps หรือแนวทางของแอดมินเพื่อให้ผู้ใช้ไม่ตกใจ 6) ทริคแก้ปัญหายอดฮิตตอนทำ GAS Web App - เปิดแล้วเจอ “การเปลี่ยนแปลงที่ไม่ได้บันทึก”: กดบันทึกไฟล์ทุกอันก่อน Deploy - แก้โค้ดแล้วเว็บไม่เปลี่ยน: ลอง Deploy เวอร์ชันใหม่ หรือเคลียร์แคช/เปิดโหมดไม่ระบุตัวตน - Permission error: ไปที่ Deploy settings แล้วดูว่า Execute as/Access ถูกต้อง และลอง authorize ใหม่ ถ้าคุณบอกได้ว่าอยากทำเว็บแนวไหน (หน้าเดียว, ฟอร์มบันทึกลงชีต, หรือเว็บดึงข้อมูลมาโชว์) เราจะช่วยจัดโครง Code.gs + HTML ให้เริ่มได้เร็วขึ้น และแนะนำการตั้งค่า Deploy ที่เหมาะกับเคสคุณได้เลย
function doGet() { return HtmlService.createTemplateFromFile('index') .evaluate() .addMetaTag('viewport', 'width=device-width, initial-scale=1') .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL) }