GAS｜Webアプリケーションでページ遷移を実装する方法

2025年5月26日

Google Apps Script（GAS）を使って Web アプリを開発するとき、通常は「1つのHTMLページだけ」が表示対象になります。

しかし実は、URLにパラメーターを付けることで、複数のHTMLページを切り替えることが可能です。

この記事では、GASで複数ページ表示を実現する方法と、iframe を使ったページの切り替え・変数制御テクニックをまとめました。

複数ページを表示する基本構成

GASで複数のWebページを切り替えるには、doGet(e) 関数内でURLパラメーター（例：?p=menu1）を読み取り、それに応じて表示するHTMLファイルを切り替える構成にします。

Code.gs

<!DOCTYPE html>
<html>
<head><base target="_top"></head>
<body>
  <h1>Indexページ</h1>
  <a href="<?= ScriptApp.getService().getUrl() ?>?p=menu1">Menu1</a><br>
  <a href="<?= ScriptApp.getService().getUrl() ?>?p=menu2">Menu2</a>
</body>
</html>

ページ遷移の例

デプロイしたURLの末尾に ?p=menu1 のようにパラメータを付けることで、表示するページを切り替えます。

https://script.google.com/macros/s/プロジェクトID/exec?p=menu1

HTMLファイル例

index.html

<!DOCTYPE html>
<html>
<head><base target="_top"></head>
<body>
  <h1>Indexページ</h1>
  <a href="<?= ScriptApp.getService().getUrl() ?>?p=menu1">Menu1</a><br>
  <a href="<?= ScriptApp.getService().getUrl() ?>?p=menu2">Menu2</a>
</body>
</html>

Menu1.html

<!DOCTYPE html>
<html>
<head><base target="_top"></head>
<body>
  <h1>Menu1ページです</h1>
  <a href="<?= ScriptApp.getService().getUrl() ?>?p=index">Index へ戻る</a><br>
  <a href="<?= ScriptApp.getService().getUrl() ?>?p=menu1">Menu2</a><br>
</body>
</html>

<a href="?p=menu2"> のようにリンクすれば、同じスクリプト内でページ遷移が可能になります。

Menu2.html

<!DOCTYPE html>
<html>
<head><base target="_top"></head>
<body>
  <h1>Menu1ページです</h1>
  <a href="<?= ScriptApp.getService().getUrl() ?>?p=index">Index へ戻る</a><br>
  <a href="<?= ScriptApp.getService().getUrl() ?>?p=menu1">Menu1</a><br>
</body>
</html>

応用│iframeで外部ページを埋め込む方法

特定のURLの中身だけを埋め込んで表示したい場合、<iframe> を使うと便利です。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <iframe src="https://cg-method.com/search?q=gas" width="256" height="256"></iframe>
  </body>
</html>

変数を使ってiframeのURLを動的に切り替える

HTML内で iframe の src 属性を JavaScript で後から変更することで、動的なURL切り替えが可能になります。

単純な変数

<iframe src="" id="ifr" width="256" height="256"></iframe>
<script>
  var link = "https://cg-method.com/";
  document.getElementById("ifr").src = link;
</script>

複数のパスを組み合わせる例

<iframe src="" id="ifr" width="256" height="256"></iframe>
<script>
  var link = "https://cg-method.com/";
  var page = "search?q=gas";
  var fullUrl = link + page;
  document.getElementById("ifr").src = fullUrl;
</script>

注意点

GASのWebアプリで iframe を使うときは、HtmlService.XFrameOptionsMode.ALLOWALL にする必要があります。
外部サイトによっては iframeでの埋め込みを禁止 していることがあり、その場合は表示できません（例：X-Frame-Optionsヘッダーで拒否されている）。

まとめ

機能	方法・構成
複数ページ表示	`doGet()` + パラメータ判定 + 複数HTMLファイル
ページ内遷移	`<a href="?p=menu2">` で切り替え
iframeの埋め込み	`<iframe src="URL">`
変数によるURL制御	JavaScript で `src` を書き換え