GASでevalUI生成

• GAS実践でHTMLテンプレートを活用
• createTemplateFromFileと変数の埋め込み
• evaluateで動的HTMLをレンダリングし、ビューとUIを構築

GAS実践でHTMLテンプレートを活用

Google Apps Script（GAS）を使った業務自動化では、メール送信やダッシュボード作成などでHTMLを生成するケースが増えています。HTMLテンプレートを利用すると、プレーンテキストと同様にコードを再利用でき、保守性が向上します。GASのスクリプトエディタ内でテンプレートを管理し、必要に応じて呼び出すことで、UIを一元化できます。

createTemplateFromFileと変数の埋め込み

GASでは HtmlService.createTemplateFromFile('template') を使って、プロジェクト内にある template.html を読み込み、テンプレートオブジェクトを生成します。テンプレート内では <?= variable ?> のように変数を埋め込むことができ、スクリプト側で template.variable = value; と設定すれば、動的に値を差し込むことが可能です。

function getHtml() {
  var template = HtmlService.createTemplateFromFile('template');
  template.userName = Session.getActiveUser().getEmail();
  template.items = ['Apple', 'Banana', 'Cherry'];
  return template.evaluate();
}

このように createTemplateFromFile と変数の埋め込みを組み合わせることで、データベースやスプレッドシートから取得した情報をそのままHTMLに反映できます。

evaluateで動的HTMLをレンダリングし、ビューとUIを構築

テンプレートに変数を埋め込んだ後、evaluate() メソッドを呼び出すと、GASはテンプレートを実際のHTMLに変換します。evaluate() は HtmlOutput オブジェクトを返し、これを SpreadsheetApp.getUi().showModalDialog() などで表示することで、ユーザーに対してインタラクティブな UI を提供できます。

function showDialog() {
  var html = getHtml(); // 上記関数を呼び出し
  SpreadsheetApp.getUi()
    .showModalDialog(html, '動的ビュー');
}

この手法を使えば、スプレッドシートのデータをリアルタイムで反映したダッシュボードや、ユーザー入力に応じて変化するフォームを簡単に作成できます。ビュー と UI を分離しつつ、GASのサーバーサイドロジックとクライアントサイドのHTMLをシームレスに連携させることが可能です。

この記事はAIによって作成されました。