GAS WEBアプリシリーズの続き
今回はスタイルシートやJavaScriptの内容を分離してみます。
実際のところ
code.gs
メイン処理。
最後の方にindludeという関数が追加されています。
こいつがメインのHTMLファイル内に他のHTMLファイルを展開する役割を担います。
function doGet() { var template = HtmlService.createTemplateFromFile('hello.html'); return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME); } function getData() { var fileid = 'YOURFILEID'; return SpreadsheetApp .openById(fileid) .getActiveSheet() .getDataRange() .getValues(); } function include(filename) { return HtmlService.createHtmlOutputFromFile(filename) .getContent(); }
hello.html
メインのファイルです。
includeの関数で部分埋め込みのHTMLを展開する仕組み。
<!DOCTYPE html> <html> <head> <base target="_top"> <?!= include('Stylesheet'); ?> </head> <body> <p>List of things:</p> <ul id="data"> <li>Loading...</li> </ul> </body> </html> <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) .getData(); }); function showThings(things) { var list = $('#data'); list.empty(); for (var i = 0; i < things.length; i++) { list.append('<li>' + things[i][i] + '</li>'); } } </script>
Stylesheet.html
今回の新造ファイルです
用途はスタイルシートですが、HTMLの部分テンプレートめいて使うため
保存形式はHTMLです気をつけてください
<style> p { color: green; } </style>
動作の様子
ちゃんと動くと、こんな感じで一部文字の色が変わります