บริการ HTML: สร้างและแสดงผล HTML

บริการ HTML ช่วยให้คุณแสดงหน้าเว็บที่โต้ตอบกับฟังก์ชัน Apps Script ฝั่งเซิร์ฟเวอร์ได้ ซึ่งมีประโยชน์อย่างยิ่ง สำหรับการสร้างเว็บแอปหรือการเพิ่มอินเทอร์เฟซผู้ใช้ที่กำหนดเองใน Google เอกสาร, ชีต และฟอร์ม คุณยังใช้ฟีเจอร์นี้เพื่อสร้างเนื้อหาของอีเมลได้ด้วย

สร้างไฟล์ HTML

หากต้องการเพิ่มไฟล์ HTML ลงในโปรเจ็กต์ Apps Script ให้ทำตามขั้นตอนต่อไปนี้

  1. เปิดเครื่องมือแก้ไข Apps Script
  2. ที่ด้านซ้าย ให้คลิกเพิ่มไฟล์ > HTML

คุณเขียน HTML, CSS และ JavaScript ฝั่งไคลเอ็นต์มาตรฐานส่วนใหญ่ได้ภายในไฟล์ HTML ระบบจะแสดงหน้าเว็บเป็น HTML5 แม้ว่าฟีเจอร์ขั้นสูงบางอย่างของ HTML5 จะไม่พร้อมใช้งานตามที่อธิบายไว้ใน ข้อจำกัด

นอกจากนี้ ไฟล์ยังอาจมีสคริปต์ย่อยของเทมเพลตที่ประมวลผลในเซิร์ฟเวอร์ ก่อนที่จะส่งหน้าเว็บไปยังผู้ใช้ ซึ่งคล้ายกับ PHP ดังที่อธิบายไว้ในส่วนHTML ที่ใช้เทมเพลต

แสดง HTML เป็นเว็บแอป

หากต้องการสร้างเว็บแอปด้วยบริการ HTML โค้ดของคุณต้องมีdoGet() ฟังก์ชันที่บอกสคริปต์วิธีแสดงหน้าเว็บ ฟังก์ชันต้องแสดงผลออบเจ็กต์ HtmlOutput ดังที่แสดงใน ตัวอย่างนี้

Code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World!
  </body>
</html>

เมื่อมีเฟรมเวิร์กพื้นฐานแล้ว สิ่งที่คุณต้องทำก็คือ บันทึกเวอร์ชันของสคริปต์ จากนั้น นําสคริปต์ไปใช้เป็นเว็บแอป

หลังจากที่ติดตั้งใช้งานสคริปต์เป็นเว็บแอปแล้ว คุณยังฝังสคริปต์ใน Google Sites ได้ด้วย

แสดง HTML เป็นอินเทอร์เฟซผู้ใช้ของ Google เอกสาร, ชีต, สไลด์ หรือฟอร์ม

บริการ HTML สามารถแสดงกล่องโต้ตอบหรือแถบด้านข้าง ใน Google เอกสาร, ชีต, สไลด์ หรือฟอร์มได้หากสคริปต์เชื่อมโยงกับคอนเทนเนอร์ของไฟล์ (ใน Google ฟอร์ม อินเทอร์เฟซผู้ใช้ที่กำหนดเองจะแสดงต่อเฉพาะผู้แก้ไขที่เปิดแบบฟอร์มเพื่อ แก้ไขเท่านั้น ไม่แสดงต่อผู้ใช้ที่เปิดแบบฟอร์มเพื่อตอบ)

ไม่เหมือนกับเว็บแอป สคริปต์ที่สร้างอินเทอร์เฟซผู้ใช้สำหรับเอกสาร สเปรดชีต หรือแบบฟอร์มไม่จำเป็นต้องมีฟังก์ชัน doGet() โดยเฉพาะ และคุณไม่จำเป็นต้องบันทึกเวอร์ชันของสคริปต์หรือติดตั้งใช้งาน แต่ฟังก์ชัน ที่เปิดอินเทอร์เฟซผู้ใช้ต้องส่งไฟล์ HTML เป็นออบเจ็กต์ HtmlOutput ไปยังเมธอด showModalDialog()) หรือ showSidebar() ของออบเจ็กต์ Ui สำหรับเอกสาร ฟอร์ม หรือ สเปรดชีตที่ใช้งานอยู่

ตัวอย่างเหล่านี้มีฟีเจอร์เพิ่มเติมเล็กน้อยเพื่อความสะดวก ได้แก่ onOpen() ฟังก์ชันสร้างเมนูที่กำหนดเองเพื่อให้เปิดอินเทอร์เฟซได้ง่าย และปุ่มในไฟล์ HTML จะเรียกใช้เมธอดพิเศษ close() ของ API google.script.host เพื่อปิดอินเทอร์เฟซ

Code.gs

// Use this code for Google Docs, Slides, Forms, or Sheets.
function onOpen() {
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .createMenu('Dialog')
      .addItem('Open', 'openDialog')
      .addToUi();
}

function openDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Index');
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .showModalDialog(html, 'Dialog title');
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World!
    <input type="button" value="Close"
        onclick="google.script.host.close()" />
  </body>
</html>

โปรดทราบว่าครั้งแรกที่คุณต้องการแสดงอินเทอร์เฟซผู้ใช้นี้ คุณต้อง เรียกใช้ฟังก์ชัน onOpen() ด้วยตนเองในตัวแก้ไขสคริปต์ หรือโหลดหน้าต่างสำหรับตัวแก้ไขเอกสาร ชีต หรือฟอร์มซ้ำ (ซึ่งจะปิดตัวแก้ไขสคริปต์) หลังจากนั้น เมนูที่กำหนดเองจะปรากฏขึ้นภายในไม่กี่วินาที ทุกครั้งที่คุณเปิดไฟล์ เลือกกล่องโต้ตอบ > เปิดเพื่อดู อินเทอร์เฟซ