GASのスクリプトレットタグ<? ～ ?>の"<"がエスケープされる

前提・実現したいこと

Google Apps Script(以下GAS)でWebアプリを作成しています。
複数ページに毎度同じフォームを表示するので、フォームを別htmlファイルに記述し、そのファイルを読み込むinclude関数をコード.gsに記述しました。
そのうえでスクリプトレットタグ<? ～ ?>をindex.htmlに埋め込み、include関数を呼んでフォームの記述を簡略化しようとしています。

発生している問題・エラーメッセージ

ところがいざ実行してみると、該当部分のスクリプトレットタグがそのまま（タグの表記のまま）表示されていました。詳しくは後述しますが、htmlソースをコード.gs側で読み込んだ時に"<?!= include(form); ?>"が"<?!= include(form); ?>"のように、小なり記号がエスケープして読み込まれていました。

該当のソースコード

html
1<!-- index.html -->
2<!DOCTYPE html>
3<html>
4  <head>
5    <base target="_top">
6  </head>
7  <body>
8    <p>%usernum%<br>%username%</p>
9  <?!= include("form"); ?>
10  </body>
11</html>

html
1<!-- form.html -->
2<form>
3  <!-- 実際はフォームのパーツが入ります -->
4</form>

javascript
1//コード.gs
2function doGet{
3  var tmphtml = HtmlService.createHtmlOutputFromFile(page).getContent();
4    Logger.log(tmphtml);
5    tmphtml = tmphtml.replace(/%username%/g,"Number001");
6    tmphtml = tmphtml.replace(/%usernum%/g,"UserName");
7    return HtmlService.createTemplate(tmphtml).evaluate() 
8      .setSandboxMode(HtmlService.SandboxMode.IFRAME).setTitle(title);
9}

Logger.logは、デバッグ用に入れました。

ログの出力結果は先にも述べましたが、

html
1<!-- index.html -->
2<!DOCTYPE html>
3<html>
4  <head>
5    <base target="_top">
6  </head>
7  <body>
8    <p>Number001<br>UserName</p>
9  &lt;?!= include("form"); ?>
10  </body>
11</html>

のようになっていました。

スプレッドシートから取得したデータをもとにusernameとusernumを動的に変化させる必要があったため、

form.htmlのソースを文字列としてtmphtmlに読み込む
tmphtmlの%username%と%usernum%を置換する
文字列tmphtmlをもとにHtmlテンプレートを作る
returnでevaluate()して表示

のように回りくどくしています。
（そもそもここの部分がスマートに解決できるならそれが一番いいのですが…）

試したこと

とりあえず、上記工程の1でhtmlソースを吸い出した時点でエスケープ状態で取得されているということが分かったので、フォームを置く場所に"%form%"などと書き、工程2の置換の時に"%form%"→"<?!= include('form'); ?>"とすることで暫定的に解決はしました。ただ、結局htmlを吸い出す時点でエスケープされる理由がよくわからないので、そこをご教授願いたいです。（そもそもこれは仕様？）

お知恵を貸していただきたいのは、

htmlソースを吸い出すときに小なり記号がエスケープされる理由
そもそも吸い出して書き換えてevaluateなどという回りくどい策をとらずにコード.gs内で動的に変わる変数の値ををhtml側に渡せるのか

の二点です。よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

htmlソースを吸い出すときに小なり記号がエスケープされる理由

こちらは理由はわかりませんが、そういう仕様のようですね。

そもそも吸い出して書き換えてevaluateなどという回りくどい策をとらずにコード.gs内で動的に変わる変数の値ををhtml側に渡せるのか

HTMLに値を渡すためには下記のようにします。

JavaScript
1//コード.gs
2function doGet() {
3  var page = HtmlService.createTemplateFromFile('index');
4  
5  // HTMLへ値の引き渡し
6  page.userNo = "Number001";
7  page.userName = "UserName";
8  
9  return page.evaluate();
10}

HTML
1<!-- index.html -->
2<!DOCTYPE html>
3<html>
4  <head>
5    <base target="_top">
6  </head>
7  <body>
8    <p><?= userNo ?><br><?= userName ?></p>
9    <?!= HtmlService.createHtmlOutputFromFile('form').getContent(); ?>
10  </body>
11</html>