GASでHTMLの遷移をボタン経由で行う(GAS, HTMLservice, Google sheets)

前提・実現したいこと

GAS, Javascript, HTML初心者です．

GAS，HTMLservice, Google sheetsを用いて店舗間の在庫共有システムを作っています．
HTMLで作成したフォームからgoogle.script.runでGAS関数を動かします．

HTML上のボタンを押すことで，URLパラメータのみ異なる別のHTMLページに遷移するシステムを作ろうとしています．

google.script.runでCode.gs上の関数を呼び出し，そこでHtmlService.createTemplateFromFile("XXX").evaluate();を返す方法を試しています．

発生している問題・エラーメッセージ

関数の呼び出しまではうまくいっているのですが，nullが帰ってきてしまいます．

該当のソースコード

Code.gs

var ss_id = 'スプレッドシートのID';

function doGet(e) {
  return HtmlService.createTemplateFromFile("customer").evaluate();
}

function customer_input(lastname, firstname, sex, tel, bday, email, adress) {
  var sh_name = '顧客情報';
  var sh = SpreadsheetApp.openById(ss_id).getSheetByName(sh_name);
  var lastrow = sh.getLastRow();
  sh.appendRow([lastrow, lastname, firstname, sex, tel, bday, email, adress, new Date()]);

  return "顧客情報を入力しました";
}

function open_purchase(){
  return HtmlService.createTemplateFromFile("purchase").evaluate();
}

customer.html

<!DOCTYPE html>
<html>
<head>
  Customer data<br>
</head>

<body>
  <label>last name</label><input type="text" id="lastname"><br>
  <label>first name</label><input type="text" id="firstname"><br>
  
  <select id="sex">
    <option value="MALE">男性</option>
    <option value="FEMALE">女性</option>
  </select><br>
  <label>TEL</label><input type="text" id="tel"><br>
  <label>Birthday</label><input type="date" id="bday"><br>
  <label>E-mail</label><input type="text" id="email"><br>
  <label>Adress</label><input type="text" id="adress"><br>

  <button id="submit">submit</button>
  <button id="norder">new order</button>

  <script>    
    document.getElementById("submit").onclick = input_to_sheet;
    document.getElementById("norder").onclick = open_page;
    
    function input_to_sheet() {
      var lastname = document.getElementById("lastname").value;
      var firstname = document.getElementById("firstname").value;
      var sex = document.getElementById("sex").value;
      var tel = document.getElementById("tel").value;
      var bday = document.getElementById("bday").value;
      var email = document.getElementById("email").value;
      var adress = document.getElementById("adress").value;
      
      google.script.url.getLocation(location => {
        google.script.run
          .withFailureHandler(onFailure)
          .withSuccessHandler(onSuccess)
          .customer_input(lastname, firstname, sex, tel, bday, email, adress, location.parameter["store"]);
      });  
    }
    function onSuccess(result) {
      alert(result);
    }
    function onFailure(e) {
      alert([e.message, e.stack]);
    }


    function open_page() {
      google.script.url.getLocation(location => {
        google.script.run
          .withFailureHandler(onFailure)
          .withSuccessHandler(onSuccess)
          .open_purchase();
      });  
    }
    function onSuccess(result) {
      alert(result);
    }
    function onFailure(e) {
      alert([e.message, e.stack]);
    }
  </script>
</body>
</html>

試したこと

Code.gs上のopen_purchase関数が確実に呼び出されていることは確認できています．
引数にeを加えても症状に変わりはありませんでした．

呼び出そうとしているpurchase.htmlファイルは記載しておりませんが，タイトルだけのデモファイルです．

お手数ですがご教授いただければ幸いです．

行動規範の内容に同意します

回答1件

ベストアンサー

例えば次のような修正はいかがでしょうか。

ここでは、Web AppsのURLへクエリパラメータを使用して別のウィンドウを表示する方法を提案させていただきます。ご使用中のスクリプトを修正する場合、下記のように修正してみてください。

HTML側: customer.html

From

javascript
1function open_page() {
2  google.script.url.getLocation(location => {
3    google.script.run
4      .withFailureHandler(onFailure)
5      .withSuccessHandler(onSuccess)
6      .open_purchase();
7  });
8}

To

javascript
1function open_page() {
2  window.open("https://script.google.com/macros/s/###/exec?open=purchase", "_top");
3}

ここでクエリパラメータとしてopen=purchaseを追加してURLを開きます。
https://script.google.com/macros/s/###/execはWeb AppsのURLです。ご使用中のURLをセットしてください。

Google Apps Script側: Code.gs

From

javascript
1function doGet(e) {
2  return HtmlService.createTemplateFromFile("customer").evaluate();
3}

To

javascript
1function doGet(e) {
2  if (e.parameter.open == "purchase") {
3    return HtmlService.createTemplateFromFile("purchase").evaluate();
4  }
5  return HtmlService.createTemplateFromFile("customer").evaluate();
6}