GAS│スクリプトプロパティをHTML内で使う方法

2025年5月29日

Google Apps Script（GAS）では、APIトークンや外部リンクなどソースコード内に直接書きたくない情報を「スクリプトのプロパティ」に設定することができます。

しかし、スクリプト内で取得したプロパティをHTMLテンプレート内に反映させる方法が少しわかりづらかったので、備忘録としてまとめておきます。

スクリプトのプロパティの設定

メニューから「プロジェクトの設定」を開きます
「スクリプトプロパティ」タブを選択し、以下のように追加します：

プロパティ名：link
値：https://motoki-design.co.jp/

gasコード

function doGet() {
  const app = HtmlService.createTemplateFromFile("index.html");
  return app.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

※ .setSandboxMode(HtmlService.SandboxMode.IFRAME) はセキュリティ確保のために必要です。

index.html のコード

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
</head>
<body>
  <iframe src="" id="ifr" width="256" height="256"></iframe>
  <script>
    // スクリプトレットでGASから値を取得
    var link = <?= PropertiesService.getScriptProperties().getProperty('link'); ?>;
    document.getElementById("ifr").src = link;
  </script>
</body>
</html>

ここで使われているのが、スクリプトレット（<?= ... ?>）という書き方です。

PHPで見慣れている方もいるかもしれません。

この書き方を使うことで、PropertiesService などのGASのAPIから値をHTML内のJavaScriptに渡すことができます。