Apps Scriptリファレンス: Apps Script Reference |障害・課題追跡: IssueTracker |Google Workspace: Status Dashboard - Summary

2023年9月19日火曜日

Creating HTML with Google Apps Script(createTemplateFromFile)

This is an example of code that creates a simple HTML page with Google Apps Script's HtmlService.createTemplateFromFile().

HtmlService.createTemplateFromFile() allows you to manage CSS and JavaScript files separately from index.html.

The output HTML page will be as follows.





The script editor will look like this:

We can create a .html file by clicking the Plus icon to the right of Files and selecting HTML.


Code.gs
function doGet() {
return HtmlService.createTemplateFromFile('index')
.evaluate()
.setTitle("Title");
}

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


index.html
<!DOCTYPE html>
<html>
<head>
<?!= include('css'); ?>
</head>
<body>
<textarea></textarea>
<?!= include('javascript'); ?>
</body>
</html>


css.html
<style>
textarea {
width: 80vw;
height: 80vh;
font-size: 15px;
}
</style>


javascript.html
<script>
myFunction();
function myFunction() {
console.log("This is a log message.");
}
</script>




Related pages

Latest post

Google Formsでクイズを作りたい

Googleフォームには回答を判定するクイズモードがあります 今回はそのクイズモードで回答の判定とフィードバックについて書いていきます 「クイズモード」の表記: 日本語の表記は「テストにする」ですが 英語の表記は「Make this a quiz」となっています この記事ではでは...