🚀

GASでWebアプリを作る際のテンプレ

2023/01/12に公開1件

Google Apps Script

GAS

tech

GASでWebアプリを作成する際のテンプレ。
(今回はHTMLとCSSファイルしか準備していません)

👆試しに文字列とボタンを設置してみました。

HTMLとCSSのファイルを別にする場合

code.gs

function doGet() {
  let html = HtmlService.createTemplateFromFile('index').evaluate().getContent();
  return HtmlService.createHtmlOutput(html)
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>TEST</title>
    <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
</head>
<body>
    <h1>GASでWebアプリを作る</h1>
    <div class="button">BUTTON</div>
    </div>
</body>
</html>

css.html

<style>

.button{
width: 148px;
height: 48px;
border-radius: 4px;
background: #333333;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
font-size: 12px;
font-weight: bold;
cursor: pointer;
}

.button:hover{
opacity: .85;
}
</style>

Discussion

Mr.Acorn

愛用させていただいてます。ありがとうございます。