GAS内のHTML間で遷移したり、パラメーターを渡したりする方法

はじめに

GAS で複数の HTML が含まれる Web アプリを作ることがあります。
そういう時に、特定の HTML を開きたいとか、HTML どうしでページ遷移したいとか、パラメーター渡したいとか思うけどやり方をいつも忘れてるので、まとめておきます。

対象の方

• 基本的な JavaScript が読める方
• GAS で Web アプリを作ったことがある方

前提

以下のような構造の GAS プロジェクトを想定します。
ここで GAS プロジェクト と言っているのは、Google ドライブ上で「新規」→「その他」→「Google Apps Script」から作成されるファイルを指します。

• GAS プロジェクト
  • Code.gs
  • index.html
  • page1.html
  • page2.html

特定の HTML を開けるようにする

一般的な Web サイトのように URL から開く HTML を指定したいです。
ただし GAS の Web アプリには標準でそういった機能は提供されていません（と思います）。

ないんだったら自分で作ればいいのよ！

以下のコードを書いておけば、URL から開く HTML を指定できるようになります。

Code.gs

function doGet(e) {
  let page = e.parameter.page;
  if (!page) {
    page = 'index';
  }
  return HtmlService.createTemplateFromFile(page).evaluate();
}

GET でアクセスされると Code.gs の doGet 関数が呼ばれるので、ここでリクエストパラメーター page と同じ名前の HTML を返すようにしています。
例えば https://script.google.com/xxxxx/exec?page=page1 を開けば、GAS プロジェクト内の page1.html が返されるようになります。

HTML から別の HTML へ遷移する

GAS 内部の HTML どうしで行き来できるようにします。

まず準備として、Code.gs に下記の関数を追加します。
アプリの URL を返す関数です。

Code.gs

function getAppUrl() {
  return ScriptApp.getService().getUrl();
}

a 要素を使う場合

HTML の a 要素を下記のように書きます。

index.html

<a href="<?= getAppUrl() ?>?page=page1">PAGE1へ</a>
<a href="<?= getAppUrl() ?>?page=page2">PAGE2へ</a>

page1.html

<a href="<?= getAppUrl() ?>?page=index">INDEXへ</a>

getAppUrl() でアプリの URL が取得できるので、その後ろにリクエストパラメーターでページを指定すれば良いです。

JS から遷移する場合

index.html

<script>
window.top.location.href = '<?= getAppUrl() ?>?page=page1';
</script>

window.top.location.href に URL を代入すれば遷移できます。

各 HTML で固有のリクエストパラメーターを使う

アクセスされる URL は↓と想定します。
https://script.google.com/xxxxx/exec?page=page1&param1=hoge&param2=fuga

クライアントサイド

page1.html

<script>
google.script.url.getLocation(function(location) {
  const param1 = location.parameter.param1;
  console.log(param1);  // => 'hoge'
  const param2 = location.parameter.param2;
  console.log(param2);  // => 'fuga'
});
</script>

google.script.url.getLocation のコールバック関数内でリクエストパラメーターを取得できます。

サーバーサイド

前に書いた doGet 関数を修正します。

Code.gs

function doGet(e) {
  let page = e.parameter.page;
  if (!page) {
    page = 'index';
  }
  // -- 変更ここから --
  const template = HtmlService.createTemplateFromFile(page);
  if (page === 'page1') {
    template.param1 = e.parameter.param1;
    template.param2 = e.parameter.param2;
  }
  return template.evaluate();
  // -- 変更ここまで --
}

doGet で受け取ったパラメーターをテンプレートに設定しておけば、HTML 側でスクリプトレットを使って param1 と param2 を取得できます。

page1.html

<div>
  <span><?= param1 ?></span>
  <span><?= param2 ?></span>
</div>

画面ごとに使うパラメーター名は違うと思われます。
この方法だと画面ごとに分岐してパラメーターを設定する処理を書くことになります。

画面ごとにいちいちやってられない！という場合は、受け取ったリクエストパラメーターをまとめて登録することもできます。

Code.gs

function doGet(e) {
  let page = e.parameter.page;
  if (!page) {
    page = 'index';
  }
  // -- 変更ここから --
  const template = HtmlService.createTemplateFromFile(page);
  for (const key in e.parameter) {
    template[key] = e.parameter[key];
  }
  return template.evaluate();
  // -- 変更ここまで --
}

これだとラクだし、コードもスッキリですが、意図していないリクエストパラメーターまで登録される可能性があるので、その点は注意してください。