1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

お題は不問!Qiita Engineer Festa 2024で記事投稿!
Qiita Engineer Festa20242024年7月17日まで開催中!

【備忘録】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
2
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
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?