การสร้างอินเทอร์เฟซผู้ใช้ด้วยบริการ HTML คล้ายกับการพัฒนาเว็บมาตรฐาน อย่างไรก็ตาม บางแง่มุมเป็นเรื่องเฉพาะของ สภาพแวดล้อมของ Apps Script คู่มือนี้จะเน้นแนวทางปฏิบัติแนะนำสำหรับการพัฒนา UI ของ HTML Service ที่ตอบสนองและปลอดภัย
HTML, CSS และ JavaScript แยกกัน
การรวม HTML, CSS และ JavaScript ทั้งหมดไว้ในไฟล์เดียวอาจทำให้โปรเจ็กต์ดูแลรักษาได้ยาก แม้ว่า Apps Script จะกำหนดให้โค้ดฝั่งไคลเอ็นต์ อยู่ในไฟล์ .html แต่คุณก็ควรแยก CSS และ JavaScript ฝั่งไคลเอ็นต์ ไว้ในไฟล์ของตัวเอง แล้วรวมไว้ในหน้า HTML หลักด้วยฟังก์ชันที่กำหนดเอง
ตัวอย่างต่อไปนี้ใช้ฟังก์ชันฝั่งเซิร์ฟเวอร์ include ใน Code.gs เพื่อ
นำเข้า Stylesheet.html และ JavaScript.html ไปยัง Page.html เมื่อเรียกใช้ด้วยสคริปต์ย่อยสำหรับการพิมพ์
ฟังก์ชันนี้จะแทรกเนื้อหาไฟล์โดยตรง เนื่องจากเป็นข้อมูลโค้ด HTML
ไม่ใช่ไฟล์ .css หรือ .js แบบสแตนด์อโลน จึงต้องมีแท็ก <style>
และ <script>
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>โหลดทรัพยากรโดยใช้ 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 ที่ได้รับความนิยมซึ่งช่วยลดความซับซ้อนของ งานทั่วไปหลายอย่างในการพัฒนาเว็บ