【GAS】Webアプリでページ遷移させる方法

Googleが提供するGoogle Apps Script（GAS）は、Googleアカウントがあれば、無料でWebアプリを作成できます。

Webアプリは、GASのHtmlServiceを使って、HTMLを表示させることで作成できます。

ただし、このHTMLは基本的に１つのため、ページ遷移をさせるためにはコツが必要です。

今回は、その方法についてまとめます。

ページ遷移させる方法とは
ページ遷移させるスクリプト
説明
1. HTMLファイル
2. コード.gs
まとめ

ページ遷移させる方法とは

GASでは、公開したWebアプリのURLにアクセスすると実行する、doGet関数が用意されています。

doGet関数で、HTMLを返すことでWebアプリを実現しています。

下のコードでは、プロジェクト内の「index」というファイル名のHTMLファイルから、HTMLオブジェクトを生成しています。

const doGet = () => {
  return htmlOutput = HtmlService.createTemplateFromFile("index")
      .evaluate()
      .setTitle("ページ遷移")
      .addMetaTag('viewport', 'width=device-width,initial-scale=1');
};

doGet関数は、URLの後ろにデータを付与することで、引数としてそのデータを受け取ることができます。

引数として受け取るデータを利用することで、webアプリのページ遷移を実現します。

ページ遷移させるスクリプト

今回は、次の４つのスクリプトファイルでページ遷移をさせてみます。

コード.gs：HTMLオブジェクトを生成するdoGet関数のファイル
index.html：indexページのHTMLファイル
page1.html：page1ページのHTMLファイル
page2.html：page2ページのHTMLファイル

動作としては次のようになります。リンクをクリックすることで、ページが変わります。

const doGet = (e) => {
  const page = (e.parameter.p　|| "index");
  return htmlOutput = HtmlService.createTemplateFromFile(page) 
      .evaluate()
      .setTitle("ページ遷移")
      .addMetaTag('viewport', 'width=device-width,initial-scale=1');
};

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>index</h1>
    <a href="公開したWebアプリのURL?p=page1">page1へ</a>
    <a href="公開したWebアプリのURL?p=page2">page2へ</a>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>page1</h1>
    <a href="公開したWebアプリのURL?p=page2">page2へ</a>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>page2</h1>
    <a href="公開したWebアプリのURL?p=page1">page1へ</a>
  </body>
</html>

各HTMLファイルの「<a href=”公開したwebアプリのURL～中略～</a>」内の「公開したwebアプリのURL」には、Webアプリとして公開したURLを入力してください。

Webアプリとして公開する方法などは、以下の記事を参考にしてください。

説明

HTMLファイル

「index.html」、「page1.html」、「page2.html」のHTMLファイルですが、リンクタグである「<a href=”リンク先のURL”>」の「リンク先のURL」に、doGet関数に渡すためのデータを付与しています。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>index</h1>
    <a href="公開したWebアプリのURL?p=page1">page1へ</a>
    <a href="公開したWebアプリのURL?p=page2">page2へ</a>
  </body>
</html>

URLの「？」より後ろがパラメータになり、「パラメータ名＝値」で表します。

今回の場合、ｐというパラメータ名に、表示するページの「page1」や「page2」のデータを付与しています。

コード.gs

const doGet = (e) => {
  const page = (e.parameter.p　|| "index");
  return htmlOutput = HtmlService.createTemplateFromFile(page) 
      .evaluate()
      .setTitle("ページ遷移")
      .addMetaTag('viewport', 'width=device-width,initial-scale=1');
};

送られてきたデータは引数eに格納されています。

引数eのパラメータを取得するには「e.parameter.｛パラメータ名｝」で取得できます。

今回のパラメータ名は「p」なので、「e.parameter.p」で取得します。

変数「page」に、パラメータを格納していますが、パラメータがない場合は「”index”」が格納されるようにしています。

const page = (e.parameter.p || "index");

変数「page」に格納されているファイル名のHTMLオブジェクトを生成することで、表示するHTMLを変更しています。

こうすることで、ページ遷移を実現します。

return htmlOutput = HtmlService.createTemplateFromFile(page) 
    .evaluate()
    .setTitle("ページ遷移")
    .addMetaTag('viewport', 'width=device-width,initial-scale=1');