จากบทความก่อนหน้า สร้างเว็บค้นหาข้อมูลจาก Google Sheet ด้วย Apps Script และ Sheetrock.js เว็บแอปของเราสามารถใส่สีและปรับแต่งฟ้อนท์ข้อความได้หรือไม่ หลายท่านคงมีคำถาม บทความนี้จะแสดงถึงการจัดระเบียบสคริปต์ที่เราเขียน เพิ่มการตกแต่งข้อความและการแสดงผลข้อมูลภายในตารางให้อ่านง่าย
เริ่มที่การเปิดไฟล์ Apps Script เดิมที่เคยสร้างไว้ ชื่อ SheetRock
เข้าไปที่ไฟล์ Code.gs หรือ รหัส.gs เพิ่มฟังก์ชัน
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent()
}
![](https://km.cc.swu.ac.th/wp-content/uploads/2022/12/0-1.png)
จากนั้นที่ไฟล์ Home.html เราจะแยกส่วนของสคริปต์ CSS และ JavaScript อย่างละ 1 ไฟล์ โดยการสร้างไฟล์ html เพิ่ม 2 ไฟล์ ชื่อ Stylesheet และ JavaScript
ไฟล์ Stylesheet.html
![](https://km.cc.swu.ac.th/wp-content/uploads/2022/12/2-2.png)
ไฟล์ JavaScript.html
![](https://km.cc.swu.ac.th/wp-content/uploads/2022/12/3-1.png)
ไปที่ไฟล์ Home.html
1.ในแท็ก head ตัดบรรทัดที่ขึ้นต้นด้วยแท็ก script ไปวางภายในไฟล์ JavaScript.html
2.ในแท็ก body ตัดบรรทัดที่ขึ้นต้นด้วยแท็ก script ไปวางภายในไฟล์ JavaScript.html ต่อจากสคริปต์ที่มาจากแท็ก head
![](https://km.cc.swu.ac.th/wp-content/uploads/2022/12/5-2.png)
จุดสังเกต ในการวางสคริปต์ JavaScript จะมีการทำงานแบบเรียงลำดับ ต้องเรียงไฟล์ตามต้นฉบับ
3.แทนที่การตัดสคริปต์ JavaScript ในไฟล์ Home.html ด้วย การเขียนอ้างอิงไฟล์
<?!= include('JavaScript'); ?>
- ในแท็ก head ตัดบรรทัดที่ขึ้นต้นด้วยแท็ก link rel=”stylesheet” type=”text/css” ไปวางภายในไฟล์ Stylesheet.html
![](https://km.cc.swu.ac.th/wp-content/uploads/2022/12/4-1.png)
5. แทนที่การตัดสไตล์ชีต CSS ในไฟล์ Home.html ด้วย การเขียนอ้างอิงไฟล์
<?!= include('Stylesheet'); ?>
จุดสังเกต สไตล์ชีต CSS จะอยู่ในแท็ก head เสมอ
![](https://km.cc.swu.ac.th/wp-content/uploads/2022/12/8-2.png)
ในไฟล์ Stylesheet.html สามารถเพิ่มแท็ก style เพื่อตกแต่งการแสดงผลข้อความ เช่น ใส่สีข้อความ แท็ก h1 แสดงข้อความสีน้ำเงิน
<style>
h1{
color: blue;
}
</style>
![](https://km.cc.swu.ac.th/wp-content/uploads/2022/12/6-2.png)
จะเห็นได้ว่าสคริปต์ไฟล์ Home.html มีความเป็นระเบียบ การแยกส่วนของสคริปต์ไฟล์ ทำให้การอ่านและแก้ไขสคริปต์ง่ายขึ้น
![](https://km.cc.swu.ac.th/wp-content/uploads/2022/12/8-2.png)
ทดสอบ Apps Script ด้วยการ Deploy แบบ Test deployments คัดลอกลิงก์เพื่อทดสอบผ่านเว็บเบราว์เซอร์ ผลลัพธ์ที่ได้ตามภาพ เว็บแอปแสดงข้อมูลยังคงต้องทำงานได้เหมือนเดิม
![](https://km.cc.swu.ac.th/wp-content/uploads/2022/12/7-2-1024x564.png)
อ้างอิง: Apps Script – HTML Service: Best Practices
การเพิ่ม Font ให้กับเว็บแอป
ใช้รูปแบบการแสดงผล Font จาก Google Fonts ไปที่เว็บ ค้นหา Font ที่ต้องการ
![](https://km.cc.swu.ac.th/wp-content/uploads/2022/12/9-2-1024x547.png)
ใช้ Font – Sarabun เลือกแบบ Regular 400
![](https://km.cc.swu.ac.th/wp-content/uploads/2022/12/10-2-1024x253.png)
คัดลอก link ตามไฮไลท์สีเหลือง
![](https://km.cc.swu.ac.th/wp-content/uploads/2022/12/11-2-1024x721.png)
วางสคริปต์ที่ตัดลอก ในไฟล์ Stylesheet.html
<link href="https://fonts.googleapis.com/css2?family=Sarabun&display=swap" rel="stylesheet">
และในแท็ก style เพิ่มการกำหนดให้ข้อความทั้งหมดที่แสดงในแท็ก body ใช้ Font “Sarabun”
body {
font-family: "Sarabun" !important;
}
![](https://km.cc.swu.ac.th/wp-content/uploads/2022/12/12-1.png)
จากนั้นทดสอบ Apps Script ด้วยการ Deploy แบบ Test deployments คัดลอกลิงก์เพื่อทดสอบผ่านเว็บเบราว์เซอร์ หรือ หากเปิดหน้าต่างเบราว์เซอร์สำหรับทดสอบอยู่แล้วให้กดปุ่ม Ctrl+F5 เพื่อ Refresh การแสดงผลเว็บแอป ผลลัพธ์ที่ได้ตามภาพ Font ข้อความแสดงรูปแบบ Sarabun แล้ว 🙂
![](https://km.cc.swu.ac.th/wp-content/uploads/2022/12/13-1-1024x592.png)
การเพิ่ม Bootstrap CSS ให้กับเว็บแอป
สามารถติดตั้ง Bootstrap ให้กับเว็บแอป โดยการอ้างอิง link โดยเข้าไปที่เว็บ getbootstrap.com เลือกการ Include via CDN
คัดลอกลิงก์อ้างอิง
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
วางลิงก์ในไฟล์ Stylesheet.html
![](https://km.cc.swu.ac.th/wp-content/uploads/2022/12/14-1.png)
จากนั้นทดสอบ Apps Script ด้วยการ Deploy แบบ Test deployments คัดลอกลิงก์เพื่อทดสอบผ่านเว็บเบราว์เซอร์ หรือ หากเปิดหน้าต่างเบราว์เซอร์สำหรับทดสอบอยู่แล้วให้กดปุ่ม Ctrl+F5 เพื่อ Refresh การแสดงผลเว็บแอป ผลลัพธ์ที่ได้ตามภาพ ตาราง DataTables แสดงรูปแบบ table-striped (รายการข้อมูลแสดงสีพื้นสลับกัน) 🙂
![](https://km.cc.swu.ac.th/wp-content/uploads/2022/12/15-1-1024x616.png)
หวังว่าบทความนี้จะช่วยให้ผู้เริ่มต้นการเขียน Apps Script สนุกกับการเขียนและสามารถตกแต่งเว็บแอปให้น่าใช้งานมากยิ่งขึ้น 🥰