はじめに

GASで画面遷移を実装する際の備忘録

index.htmlとviewer.html間を移動できるようにします。

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
  </head>
  <body>
    <a href="<?= getAppUrl() ?>?page=viewer">Viewerへ</a>
    <a href="<?= getAppUrl() ?>?page=index">Indexへ</a>
  </body>
</html>

viewer.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <a href="<?= getAppUrl() ?>?page=viewer">Viewer へ</a>
    <a href="<?= getAppUrl() ?>?page=index">Index へ</a>
  </body>
</html>

コード.gs

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

  var template = HtmlService.createTemplateFromFile(page);
  return template.evaluate();
}

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

デプロイ

デプロイして実行すると、画面遷移できるようになりました。
画面遷移した際に、URLの末尾が変化していることがわかります。