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

บริการ HTML: แนวทางปฏิบัติแนะนำ

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

เพื่อช่วยแสดงแนวทางปฏิบัติแนะนำเหล่านี้ เราจึงได้สร้างตัวอย่างเว็บแอปโดยใช้บริการ HTML ที่เรียกว่า Simple Tasks ดูซอร์สโค้ดเต็มรูปแบบและวิธีการตั้งค่าได้ในที่เก็บของ GitHub

HTML, CSS และ JavaScript แยกกัน

การเก็บโค้ด HTML, CSS และ JavaScript ทั้งหมดไว้ในไฟล์เดียวอาจทำให้โปรเจ็กต์อ่านและพัฒนาได้ยาก แม้ว่า Apps Script จะกำหนดให้ต้องวางโค้ดฝั่งไคลเอ็นต์ไว้ในไฟล์ .html แต่คุณก็ยังสามารถแยก CSS และ JavaScript ฝั่งไคลเอ็นต์ออกเป็นไฟล์ที่แตกต่างกัน แล้วรวมไว้ในหน้า HTML หลักด้วยฟังก์ชันที่กำหนดเองได้

ตัวอย่างด้านล่างกำหนดฟังก์ชัน include() ฝั่งเซิร์ฟเวอร์ที่กำหนดเองในไฟล์ Code.gs เพื่อนำเข้าเนื้อหาไฟล์สไตล์ชีต.html และ JavaScript.html ไปยังไฟล์ Page.html เมื่อเรียกใช้โดยใช้ printing Scriptlets ฟังก์ชันนี้จะนำเข้าเนื้อหาไฟล์ที่ระบุลงในไฟล์ปัจจุบัน โปรดสังเกตว่าไฟล์ที่รวมไว้มีแท็ก <style> และ <script> เนื่องจากเป็นข้อมูลโค้ด HTML ไม่ใช่ไฟล์ .css หรือ .js เพียงอย่างเดียว

Code.gs

function doGet(request) {
  return HtmlService.createTemplateFromFile('Page')
      .evaluate();
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

Page.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('Stylesheet'); ?>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>Please enjoy this helpful script.</p>
    <?!= include('JavaScript'); ?>
  </body>
</html>

Stylesheet.html

<style>
p {
  color: green;
}
</style>

JavaScript.html

<script>
window.addEventListener('load', function() {
  console.log('Page is loaded');
});
</script>

โหลดข้อมูลแบบไม่พร้อมกัน ไม่ใช่ในเทมเพลต

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

ใช้แท็ก Scriptlet สำหรับงานที่รวดเร็วแบบครั้งเดียว เช่น การรวมเนื้อหาอื่นๆ หรือการตั้งค่าแบบคงที่ ข้อมูลอื่นๆ ทั้งหมดควรโหลดโดยใช้การเรียก google.script.run การเขียนโค้ดแบบไม่พร้อมกันนี้จะทำได้ยากกว่า แต่ UI จะโหลดได้เร็วขึ้นและเปิดโอกาสให้แสดงตัวหมุนหรือข้อความการโหลดอื่นๆ แก่ผู้ใช้

ไม่ควรทำ — โหลดเทมเพลต

<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
  <? for (var i = 0; i < things.length; i++) { ?>
    <li><?= things[i] ?></li>
  <? } ?>
</ul>

สิ่งที่ควรทำ — โหลดแบบไม่พร้อมกัน

<p>List of things:</p>
<ul id="things">
    <li>Loading...</li>
</ul>

<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
  google.script.run.withSuccessHandler(showThings)
      .getLotsOfThings();
});

function showThings(things) {
  var list = $('#things');
  list.empty();
  for (var i = 0; i < things.length; i++) {
    list.append('<li>' + things[i] + '</li>');
  }
}
</script>

ในแอปพลิเคชันตัวอย่างของ Simple Tasks หน้าบริการ HTML Page.html จะโหลดข้อมูลด้วยวิธีนี้ และใช้เทมเพลตเพื่อรวมซอร์สโค้ดอื่นลงในหน้าเท่านั้น

โหลดทรัพยากรโดยใช้ HTTPS

หากหน้าเว็บแสดงโดยใช้โหมดแซนด์บ็อกซ์IFRAMEที่ใหม่กว่า รวมถึงไฟล์ JavaScript หรือ CSS ที่ไม่ได้แสดงโดยใช้ HTTPS จะทำให้เกิดข้อผิดพลาดตามที่แสดงด้านล่าง

เนื้อหาผสม: ระบบโหลดหน้าเว็บที่ "https://..." ผ่าน HTTPS แต่ขอสคริปต์ที่ไม่ปลอดภัย "http://..." คำขอนี้ถูกบล็อก เนื้อหาต้องแสดงผ่าน HTTPS

ไลบรารีที่ได้รับความนิยมส่วนใหญ่รองรับทั้ง HTTP และ HTTPS ดังนั้นการสลับเปลี่ยนจึงมักเป็นแค่การแทรก 's' เพิ่มเติมใน URL เท่านั้น

ใช้การประกาศประเภทเอกสาร HTML5

หากหน้าเว็บแสดงโดยใช้IFRAME โหมดแซนด์บ็อกซ์เวอร์ชันใหม่ อย่าลืมใส่ข้อมูลโค้ดต่อไปนี้ที่ด้านบนของไฟล์ HTML

<!DOCTYPE html>

การจำแนกประเภทเอกสารนี้จะบอกเบราว์เซอร์ว่าคุณออกแบบหน้าเว็บสำหรับเบราว์เซอร์ที่ทันสมัย และไม่ควรแสดงผลหน้าเว็บโดยใช้โหมดที่ไม่มาตรฐาน แม้ว่าคุณจะไม่มีแผนที่จะใช้ประโยชน์จากองค์ประกอบ HTML5 หรือ JavaScript API ที่ทันสมัย ก็จะช่วยให้มั่นใจได้ว่าหน้าเว็บของคุณแสดงอย่างถูกต้อง

โหลด JavaScript เป็นครั้งสุดท้าย

นักพัฒนาเว็บจำนวนมากแนะนำให้โหลดโค้ด JavaScript ที่ด้านล่างของหน้าเพื่อเพิ่มการตอบสนอง ซึ่งยิ่งมีความสำคัญมากขึ้นเมื่อใช้บริการ HTML การย้ายแท็ก <script> ไปที่จุดสิ้นสุดของหน้าเว็บจะทำให้เนื้อหา HTML แสดงผลก่อนที่ระบบจะประมวลผล JavaScript ซึ่งช่วยให้คุณแสดงตัวหมุนหรือข้อความอื่นๆ แก่ผู้ใช้ได้

ใช้ประโยชน์จาก jQuery

jQuery เป็นไลบรารี JavaScript ยอดนิยมที่ช่วยให้งานทั่วไปจำนวนมากในการพัฒนาเว็บง่ายขึ้น