GASのHtmlServiceでテンプレートHTMLに値を埋め込む方法

Google Apps Script（GAS）のHtmlServiceを使うと、Apps Script側で用意した値をテンプレートHTMLに埋め込んで表示できます。

たとえば、スプレッドシートから取得した値をWebアプリの画面に表示したり、ダイアログやサイドバーに初期値を渡したりするときに便利です。

この記事では、GASのHtmlServiceでテンプレートHTMLに値を埋め込む方法を、基本コード・具体例・注意点まで含めてわかりやすく解説します。

GASのHtmlServiceでテンプレートHTMLに値を埋め込む仕組み
テンプレートHTMLを使う基本コード
HTMLファイル側で値を表示する書き方
スプレッドシートの値をHtmlServiceでHTMLに埋め込む例
HTMLタグを埋め込みたい場合の書き方
<?= ... ?> と <?!= ... ?> の違い
google.script.runで値を取得する方法との違い
うまく表示されないときの原因
HtmlServiceでテンプレートHTMLに値を埋め込むときの注意点
まとめ

GASのHtmlServiceでテンプレートHTMLに値を埋め込む仕組み

HtmlServiceでは、Apps Script側でHTMLを返して画面に表示できます。

その中でもテンプレートHTMLを使うと、Apps Scriptで作った値をHTMLへ渡し、画面の初期表示に反映できます。

基本的な流れは、HtmlService.createTemplateFromFile()でHTMLファイルをテンプレートとして読み込み、テンプレートオブジェクトに値を設定し、evaluate()でHTMLとして返す形です。

「HTMLに値を渡したい」と考えたときは、まずこの流れを押さえると理解しやすくなります。

テンプレートHTMLを使う基本コード

まずは、Apps Script側でテンプレートHTMLを読み込み、値を渡す基本コードを見ていきます。

Copyをクリックするとコピーできます。

GAS

Copy

function doGet() {

const template = HtmlService.createTemplateFromFile('index');

template.pageTitle = 'サンプルページ';

template.message = 'Hello GAS';

return template.evaluate();

}

doGet()はWebアプリにアクセスしたときに最初に呼ばれる入口の関数です。

HtmlServiceで画面を表示する場合は、このdoGet()の中でテンプレートHTMLを読み込み、evaluate()した結果を返します。

createTemplateFromFile('index')でindex.htmlを読み込み、template.pageTitleやtemplate.messageのように値を設定しています。

このように設定した値は、HTMLファイル側でそのまま使えます。

HTMLファイル側で値を表示する書き方

Apps Script側で設定した値は、HTMLファイル内で<?= ... ?>を使って表示できます。

<!DOCTYPE html>
<html>
  <head>
    <base target='_top'>
    <meta charset='UTF-8'>
    <title><?= pageTitle ?></title>
  </head>
  <body>
    <h1><?= pageTitle ?></h1>
    <p><?= message ?></p>
  </body>
</html>

<?= pageTitle ?>や<?= message ?>のように書くことで、Apps Script側で渡した値をHTMLに表示できます。

初めて見ると難しく感じるかもしれませんが、「Apps Scriptで値をセットして、HTML側で表示する」と考えるとシンプルです。

スプレッドシートの値をHtmlServiceでHTMLに埋め込む例

実務では、スプレッドシートの値を取得してHTMLに表示したいケースも多いです。

たとえば、シートのセルに入っているユーザー名を、Webアプリ画面に表示する場合は次のように書くことができます。

Copyをクリックするとコピーできます。

GAS

Copy

function doGet() {

const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('シート1');

const userName = sheet.getRange('A1').getValue();

const template = HtmlService.createTemplateFromFile('index');

template.userName = userName;

return template.evaluate();

}

<!DOCTYPE html>
<html>
  <head>
    <base target='_top'>
    <meta charset='UTF-8'>
  </head>
  <body>
    <p>こんにちは、<?= userName ?> さん</p>
  </body>
</html>

このようにすると、スプレッドシートのA1セルに入っている値をHTML側へ渡して、初期表示に反映できます。

「GAS（スプレッドシート）の値をHTMLに埋め込む」と聞くと難しく感じますが、実際には値を変数に入れ、テンプレートへ渡しているだけです。

HTMLタグを埋め込みたい場合の書き方

通常の<?= ... ?>は、値をそのまま表示したいときに使いやすい書き方です。

一方で、文字列の中にHTMLタグが含まれていて、そのタグも含めて画面に反映したい場合があります。

そのようなときは、<?!= ... ?>を使います。

Copyをクリックするとコピーできます。

GAS

Copy

function doGet() {

const template = HtmlService.createTemplateFromFile('index');

template.messageHtml = '<strong>重要なお知らせ</strong>';

return template.evaluate();

}

<!DOCTYPE html>
<html>
  <body>
    <p><?!= messageHtml ?></p>
  </body>
</html>

この場合、<strong>タグが文字列として表示されるのではなく、HTMLタグとして解釈されて太字で表示されます。

ただし、<?!= ... ?>は便利な反面、外部から受け取った値やユーザーが入力した値をそのまま表示すると危険です。

理由は、意図しないHTMLやスクリプトまでそのまま画面に出力されるおそれがあり、レイアウト崩れやセキュリティ上の問題につながることがあるためです。

自分で内容を管理できるHTMLだけに限定して使うようにしましょう。

<?= ... ?> と <?!= ... ?> の違い

この2つは見た目が似ていますが、用途が異なります。

書き方	向いている使い方
`<?= ... ?>`	通常はこちら。値を表示したいときに使う
`<?!= ... ?>`	HTMLタグもそのまま出力したいときに使う

迷ったときは、まず<?= ... ?>を使い、HTMLタグを実際に描画したいときだけ<?!= ... ?>を使うと考えるとわかりやすいです。

google.script.runで値を取得する方法との違い

HtmlServiceでは、テンプレートに値を埋め込む方法とは別に、表示後にgoogle.script.runでApps Script側の関数を呼び出して値を取得する方法もあります。

テンプレートHTMLへの埋め込みは、画面を開いた時点で必要な値をあらかじめ表示しておきたいときに向いています。

一方で、ボタンを押したあとに値を取得したい場合や、ユーザー操作に応じて動的に更新したい場合は、google.script.runのほうが向いています。

方法	向いているケース
テンプレートHTMLに埋め込む	ページの初期表示に必要な値をあらかじめ渡したいとき
`google.script.run`	ユーザー操作のあとに値を取得したり、表示内容を更新したいとき

まずは初期表示の値を出したいのか、それとも表示後に再取得したいのかを分けて考えると、実装方法を選びやすくなります。

うまく表示されないときの原因

HtmlServiceで値がうまく表示されない場合は、次の点を確認してみてください。

HTMLファイル名とcreateTemplateFromFile()の指定名が一致しているか
Apps Script側でテンプレートに値を設定しているか
HTML側の変数名とApps Script側のプロパティ名が一致しているか
return template.evaluate();になっているか
スプレッドシートの取得処理でエラーが出ていないか

特に多いのは、ファイル名の不一致、変数名のスペルミス、evaluate()の書き忘れです。

まずは、Apps Script側で値を渡せているか、HTML側で正しい名前を参照しているかを確認すると原因を見つけやすくなります。

HtmlServiceでテンプレートHTMLに値を埋め込むときの注意点

テンプレート埋め込みは初期表示に向いている

テンプレートに埋め込んだ値は、基本的に画面を表示した時点の内容です。

表示後に値を更新したい場合は、テンプレート埋め込みだけではなく、google.script.runの利用も検討したほうがよいです。

HTMLタグの出力は使いどころを選ぶ

<?!= ... ?>を使うとHTMLタグをそのまま出力できますが、便利だからといって何でも使うのは危険です。

外部データやユーザーが入力した値をそのまま出力するのではなく、内容を自分で管理できる場合に限定するのが安全です。

渡す値が増えると見通しが悪くなりやすい

テンプレートへ渡す値が増えすぎると、どの値をどこで使っているのか把握しにくくなります。

値が多くなる場合は、用途ごとに整理したり、必要に応じてgoogle.script.runとの使い分けを考えると管理しやすくなります。

まとめ

GASのHtmlServiceを使うと、Apps Script側で用意した値をテンプレートHTMLに埋め込んで表示できます。

基本は、HtmlService.createTemplateFromFile()でテンプレートを読み込み、プロパティに値を設定し、HTML側で<?= ... ?>や<?!= ... ?>を使って表示します。

初期表示の値を出したいときはテンプレートHTMLへの埋め込み、表示後に値を取得・更新したいときはgoogle.script.runというように使い分けると、実務でも迷いにくくなります。