1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【備忘録】GASで画面遷移を実装する

Last updated at Posted at 2024-06-17

はじめに

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

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

image.png

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の末尾が変化していることがわかります。

image.png

image.png

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?