Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

GAS WEBアプリでスタイルシートやJavaScriptのファイルを分離する

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>

動作の様子

ちゃんと動くと、こんな感じで一部文字の色が変わります
f:id:shuzo_kino:20180811001039p:plain