概要

Google Apps Script でのwebアプリ(SPA)開発においては, 公式ドキュメントで複数のhtmlを統合して表示する方法が紹介されています。
しかし, この公式の方法を直接用いると, doGet() で呼び出された html ファイル内でのみしか他のhtmlファイルを読み込むことはできず, そのため, 複数階層に html ファイルを分割するようなことはできません。
そこで, 本稿では, 公式の提示した実装に若干の変更を加えることで, 複数階層にわたる html ファイル分割を実現するための実装を提示します。

背景:公式の提唱手法とその限界

Google Apps Script においては, gs ファイルと html ファイルのみが許容されています。

しかし, 公式ドキュメントのHTML Service: Best Practicesの Separate HTML, CSS, and JavaScript の項目には, 以下のようなコード(抜粋)を用意することで, 疑似的に html, css, JSファイルを分けることができると紹介されています。

code.gs

function doGet(request) {
  return HtmlService.createTemplateFromFile('Page')
      .evaluate();
}

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

Page.html

<html>
  <head>
    <base target="_top">
    <?!= include('Stylesheet'); ?>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>Please enjoy this helpful script.</p>
    <?!= include('JavaScript'); ?>
  </body>
</html>

ここで, <?!= … ?> はサーバサイドの式を呼び出す構文です。
code.gs で定義されたinclude()をそれぞれの場所で評価することで, Stylesheet.html および JavaScript.html を展開できるということです。

しかし, この実装では, たとえば JavaScript.html 内で再び <?!= include(...); ?> を記述して(Page.htmlから見れば)孫の呼び出しを行うことはできません。行うと, <?!= include(...); ?> が文字列としてそのまま表示されます。

サイトの規模が多少大きくなってくると, これでは不便なことが出てきます。

本題

そこで, サーバサイドのinclude() 関数を以下のように書き換えます。

code.gs

function include(filename) {
  var template = HtmlService.createTemplateFromFile(filename);
  var html = template.evaluate().getContent();
  return html;
}

ファイルから直接 htmlOutput オブジェクトを得るのではなく, まず template オブジェクトを得て, その中身を評価(template.evaluate())してから htmlOutput を得るようにしています。

すると、呼び出し先のhtmlファイルにおいて記述したinclude()も評価されるようになり, 結果として再帰的にファイルを読み込めるようになります。

補足

循環的に include() が呼ばれると無限ループになるので, それは防ぐようにしたほうがいいかもしれません。