หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

สร้างไฟล์ HTML

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

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

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

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

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

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

โค้ด.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() พิเศษของ google.script.host API เพื่อปิดอินเทอร์เฟซ

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