jsとgasによるdoPostとfetch間によるhtmlファイルの受け渡しについて

Question

前提

SpreadShhetのwebアプリを利用して、QRコードを読み込むPOSシステムのようなものを考えています。
ここでは、読み取り後の購入情報等をgas側に送信しSpreadSheetへ書き込みを行うと同時にhtml側に領収書ページを表示させたいと考えています。
doPost関数へ値を渡し、SpreadSheetへの書き込み。htmlServiceにてファイルを作成するところまではできていると思います。

ですが、html側のfetchにて返信されたデータを確認するとobjectは受け取れるのですが、html側でページの遷移を起こすことができず、どのように実装してよいか悩んでおります。

実現したいこと

ここに実現したいことを箇条書きで書いてください。

• html側から商品情報等をgasのdopost等へ送り、SpreadSheetにlogを残したい。
• gas側で作成してある"領収書"htmlファイルに値をセットし、jsへ送り返したい。
• doPostで返信されたhtmlをjs側で受け取り、ページ遷移をしたい。

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

doPostでhtmlService.createHtmlOutputFromFile("result");を返却して、jsで確認すると以下のオブジェクトが確認できるが、doGetのようにページが表示されることはない。

Response {type: 'opaque', url: '', redirected: false, status: 0, ok: false, …}

該当のソースコード

doPost(e){
  const json_data = JSON.parse(e.postData.getDataAsString());
  const result = HtmlService.createHtmlOutpustFromFile("result");
  result.data = "付随したいデータ";
  
  return result.evaluate();
}

function get_url(){
  // gasのURL取得関数(jsで呼び出す)
  return ScriptApp.getService().getUrl();
}

function send_data() {
  google.script.run.withSuccessHandler(e => {
    const URL = e;
     const postparam = {
      "method"     : "POST",
      "mode"       : "no-cors",
      "Content-Type" : "application/x-www-form-urlencoded",
      "body" : JSON.stringify(item_dict)
    };

    const res = fetch(URL, postparam).then(response => response).then(data => {
      // 読み取るタイミングやfetchの使い方が曖昧なため、これで合っているかすら疑問
      // オブジェクトは取得できているが処理の方法を理解できていない、、？
      console.log(data);
    });
  }).get_url();
}

試したこと

doGetでresult.htmlを返却する事は考えたのですが、購入商品情報等のjsonを渡す方法をどう繋げればいよのか、また余計な考えかもしれませんがスマートに処理ができるのでは、、と考えdoPostでの画面遷移の方法を模索しています。

質問の中で、至らない所などあるとは思いますが
どうぞご教授のほどよろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

html, gas, google chromeなどは最新だと思います

// 以下gas -----------------------------------------------------------------------
function doGet(e) {
  // 最初に商品読み取り用のページを表示させる。(ここは表示できる)
  return HtmlService.createHtmlOutputFromFile("index");
}

function doPost(e) {
  // 各種データの取得
  const json_data = JSON.parse(e.postData.getDataAsString());
  const sheet_id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

  // 管理表で商品の売上数を計上
  const sheet_name1 = "管理表";
  // logに現在時刻とindexから返却された商品購入情報のjsonを記録
  const sheet_name2 = "log";
  // 領収書情報に記載されている情報(会社名や電話番号等)を取得
  const sheet_name3 = "領収証情報";
  const sheet1 = SpreadsheetApp.openById(sheet_id).getSheetByName(sheet_name1);
  const sheet2 = SpreadsheetApp.openById(sheet_id).getSheetByName(sheet_name2);
  const sheet3 = SpreadsheetApp.openById(sheet_id).getSheetByName(sheet_name3);
  const r_last1 = sheet1.getLastRow() + 1;
  const r_last2 = sheet2.getLastRow() + 1;
  const range_all1 = sheet1.getRange(1, 1, r_last1, 9);
  const range_all2 = sheet2.getRange(1, 1, r_last2, 2);
  const data_all1 = range_all1.getValues();
  const data_all2 = range_all2.getValues();
  const data_id = data_all1.map(elm => elm[0]);
  // 購入商品の合計金額
  let amount = 0;
  // 商品の税率情報より求める内税額
  let tax = 0;

  // 商品情報json処理
  Object.keys(json_data).forEach(key => {
    const keyword = key.split(",")[0];
    const r_hit1 = data_id.indexOf(keyword);
    const num = data_all1[r_hit1][5];
    range_all1.offset(r_hit1, 5, 1, 1).setValue(num + json_data[key]);

    amount += key.split(",")[4] * json_data[key];
    tax += key.split(",")[5] * json_data[key];
  });

  // シートへ書き込み
  const r_hit2 = data_all2.map(elm => elm[0]).indexOf("");
  const date = Utilities.formatDate(new Date(), 'JST', "yyyy/MM/dd (E) HH:mm:ss Z");

  range_all2.offset(r_hit2,0,1,2).setValues([[date, json_data]]);

  const info = sheet3.getRange(2, 1, 1, 5).getValues().flat();

  // htmlデータ作成
  const result = HtmlService.createHtmlOutputFromFile("result");

  result.date = info[0];
  result.zip = info[1];
  result.address = info[2];
  result.corp = info[3];
  result.phone = info[4];
  result.amount = amount;
  result.tax = tax;
  result.without = amount - tax;

  // 返却するが、表示できない
  return result.evaluate;
}

function get_url(){
  // js側でrun関数で呼び出すデプロイurl取得用の関数
  return ScriptApp.getService().getUrl();
}
// 以下index.html -----------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>QRコードリーダ</title>
  <script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
</head>
<!-- html -->
<body>
  <div id="wrapper">
    <canvas id="canvas"></canvas>
    <ul id="results"></ul>
    <span id="confirm">確定</span>
    <p id="subtotal">0円</p>
  </div>
  <script>
    // DOM取得とQRコード用のビデオ設定
    const video = document.createElement("video");
    const canvasElement = document.getElementById("canvas");
    const canvas = canvasElement.getContext("2d");
    const results = document.getElementById("results");
    const subtotal = document.getElementById("subtotal");
    const confirm = document.getElementById("confirm");
    let item_dict = {};
    // カウンターで商品の連続読み取りを阻止
    let next_counter = 0;

    // ここでjsにデータを送る関数を設定
    confirm.addEventListener("click", send_data);

    // Use facingMode: environment to attemt to get the front camera on phones
    navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(stream) {
      video.srcObject = stream;
      video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
      video.play();
      requestAnimationFrame(tick);
    });

    function tick() {
      // キャンバスにビデオ画像を反映
      if (video.readyState === video.HAVE_ENOUGH_DATA) {
        canvasElement.height = video.videoHeight;
        canvasElement.width = video.videoWidth;
        canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
        const imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
        const code = jsQR(imageData.data, imageData.width, imageData.height, {
          inversionAttempts: "dontInvert",
        });
        if (code) {
          if (Object.keys(item_dict).includes(code.data)){
            // アイテムを読み取っていたら購入個数をプラスしていく
            if(next_counter > 50){
              item_dict[code.data] += 1;
              results.children[Object.keys(item_dict).indexOf(code.data)].children[1].innerText = item_dict[code.data];
              next_counter = 0;
              change_subtotal();
            }
          } else if (code.data != "") {
            // 初めて読み込む商品(QRコード)なら画面に表示＋内部でdictに追加
            const child = document.createElement("li");
            const name = document.createElement("p");
            const num = document.createElement("p");
            const price = document.createElement("p");
            const btn_minus = document.createElement("span");
            const btn_plus = document.createElement("span");
            const btn_delete = document.createElement("span");

            btn_minus.addEventListener("click", {num: -1, data: code.data, handleEvent: change_num});
            btn_plus.addEventListener("click", {num: 1, data: code.data, handleEvent: change_num});
            btn_delete.addEventListener("click", {data: code.data, handleEvent: delete_elm});

            name.innerText = code.data.split(",")[1];
            num.innerText = 1;
            price.innerText = code.data.split(",")[4];
            btn_minus.innerText = "-";
            btn_plus.innerText = "+";
            btn_delete.innerText = "x";

            child.append(name);
            child.append(num);
            child.append(btn_minus);
            child.append(btn_plus);
            child.append(btn_delete);

            results.append(child);
            item_dict[code.data] = 1;

            next_counter = 0;
            change_subtotal();
          }
        } else {
          next_counter++;
        }
      }
      requestAnimationFrame(tick);
    }

    function change_num(e) {
      item_dict[this.data] += this.num;
      e.target.parentNode.children[1].innerText = item_dict[this.data];
      change_subtotal();
    }

    function delete_elm(e) {
      delete item_dict[this.data];
      e.target.parentNode.remove();
      change_subtotal();
    }

    function change_subtotal() {
      let sum = 0;
      Object.keys(item_dict).forEach(elm => {
        sum += item_dict[elm] * elm.split(",")[4];
      });
      subtotal.innerText = sum.toLocaleString() + "円";
    }

    function send_data() {
      // ここが一番の疑問点
      // データの送信はできていてdoPost側でも読み取れる(こちらから送信はできているため通信は可能)
      google.script.run.withSuccessHandler(e => {
        const URL = e;

        const postparam = {
          "method"     : "POST",
          "mode"       : "no-cors",
          "Content-Type" : "application/x-www-form-urlencoded",
          "body" : JSON.stringify(item_dict)
        };

        const res = fetch(URL, postparam).then(response => response).then(data => {
          // 読み取るタイミングやfetchの使い方が曖昧なため、これで合っているかすら疑問
          // オブジェクトは取得できているが処理の方法を理解できていない、、？
          console.log(data);
        });
      }).get_url();
    }
  </script>
</body>
</html>

Comments

[penguin520]

"Response {type: 'opaque', url: '', redirected: false, status: 0, ok: false, …}" は　console.log(data);　で取得した値ですか？
もう少しミニマムなコードを提示することはできますか？

[seito]

response...はlogで取得した値です。
質問になれていなかったため、見ずらい質問で申し訳ありません。
上記のソースコードを自分が主要と考える部分に編集したのですが、もし主要な部分が欠落していましたら、そこも含めて教えていただけると幸いです。
お手数をお掛けしますが、何卒よろしくお願いいたします。

Answer 1

doPostで返信されたhtmlをjs側で受け取り、ページ遷移をしたい。

あくまで、「ボタンを押下後に別ページに遷移したい」のであれば、UrlFetchApp を使うのではなく、たとえば form を submit する形式の方が簡単だと思います。
（GAS は iframe の関係で制限があるため、「UrlFetchApp を使ってページ内容を取得してそのページに自動的に遷移する」ということを行うのは難しいと思います。
UrlFetchApp を使うならページ遷移せず、Ajax でページを書き換えるやりかたの方をおすすめします。
ただ今回はページ遷移が要件のようですのでこちらについては触れません）

---

下記のコードは基本的な動作を理解していただく目的のために簡略化しています。（簡略といっても省略しているわけではなく、コピペしてデプロイすれば動作します）。実際には動作を理解した上で、質問者さんのアプリに適用してください。また、コード中のコメントが冗長になっていますが説明のためですので、御承知おきください。

---

１

👉 createTemplateFromFile

HTML 内で <?= ?> をつかっていて、その部分を任意の値に置き換えたいようなときは
createHtmlOutputFromFile ではなくて、
createTemplateFromFile を使います。

・以下は動作するサンプルコードです。ためしに新しいファイルに記述してWebアプリとしてデプロイすると動作がわかりやすいかと思います。

＜コード.gs＞

function doGet() {
  // テンプレートファイルを読み込む
  const index = HtmlService.createTemplateFromFile('index');

  // テンプレートファイルに値を渡す。
  index.value1 = 'おはよう';

  // ページを構築して返す。
  return index.evaluate();
}

function getMessage() {
  return 'おやすみ';
}

＜index.html＞

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1><?= value1 ?></h1>
    <h1><?= getMessage() ?></h1>
</body>
</html>

こうすることで、HTML の <?= ?> で囲まれた部分に、任意の値を渡したり、GAS側で用意した関数の計算結果を表示したりできます。
（※ただし、<?= ?>部分の置き換えはページを読み込んで構築する時だけ行われますので、たとえばページ表示後、動的に<?= ?>部分を変更するということはできません）

---

createTemplateFromFile 関数の基本：

• <?= ?> が使われているHTML（テンプレートファイル）の <?= ?> の部分を、GAS 側の変数や関数の計算結果、または渡された値に置き換えて、ページを構築します。
• ページを返すときに、evaluate() 関数を使う必要があります。

---

２

👉 formdata イベントを利用して、フォーム送信時にデータを追加する。

ではフォームの submit（＝送信時）に任意のデータ（今回でいえば領収書内に記載する金額やユーザー情報等のデータ）を渡すにはどうすればよいでしょうか。

これには複数のやり方がありますが、formdata イベントを利用してみるのはいかがでしょうか。
(注：質問文記載のアプリの動作を考察すると、ユーザーに文字を手入力させる要素がなく、特に入力内容のチェックも不要であるようなので、その前提でこの方法を採用しています。仮に入力値をチェック（バリデーション）する必要があるような場合は、別の方法になります）

具体的には、formdata イベントのイベントハンドラー内に「送信したいデータをフォームデータに追加する処理」を記述する、ということです。

といわれても意味不明と思われるかもしれませんので、コードで示します。

＜コード.gs＞

/* 初期ページ表示時に呼ばれる */
function doGet(e) {
  // テンプレートファイルを読み込む
  var index = HtmlService.createTemplateFromFile("index");
  // WebアプリのURLを index.html に渡す。
  index.url = ScriptApp.getService().getUrl();

  // ページを構築して返す
  return index.evaluate();
}

/*  フォーム送信時に呼ばれる */
function doPost(e) {
  // フォームから受け取ったデータ（JSONフォーマットの文字列）を取出す。
  const item_dict_json = e.parameter.item_dict;

  // JSONフォ－マットの文字列を、オブジェクトに戻す。
  const item_dict = JSON.parse(item_dict_json);

  // テンプレートファイルを読み込む
  const result = HtmlService.createTemplateFromFile("result");

  // フォームから受け取ったデータを result.html に渡す。
  result.date     = item_dict.date;
  result.address  = item_dict.address;

  // ページを構築して返す
  return result.evaluate();
}

＜index.html＞

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <meta charset="UTF-8">
  <title>フォーム送信サンプル by Qnoir</title>
</head>

<body>
  <form id="form" method="POST" action="<?= url ?>" target="_top">
    <button type="submit">送信</button>
  </form>

  <script>
    // 送信用のデータ。
    let item_dict = {
      date: '2023/01/01',
      address: '東京都新宿区○ ○',
    };

    // フォーム送信時に発生する 'formdata' イベントを処理する関数（イベントハンドラー）を実装
    document.getElementById('form').addEventListener('formdata', (e) => {
      // フォームデ－タを格納するオブジェクト（FormDataオブジェクト）への参照を取得
      const fd = e.formData;
    
      // フォーム送信先（result.html）に送信するデータをセット.
      fd.set('item_dict',  JSON.stringify(item_dict));
    });
  </script>
</body>

</html>

＜result.html＞

<!DOCTYPE html>
<!-- 返却用html -->
<html>

<head>
  <base target="_top">
</head>

<body>
  <div>
    日付  <?= date ?></p>
  </div>
  <div>
    住所  <?= address ?></p>
  </div>
  
</body>

</html>

---

流れとしては以下のようになります。
（１）GASでデプロイして発行したURLをブラウザに入力すると、コード.gs の doGet関数が呼ばれ、index.html が返されます。
このとき、index.html内の form要素の <?= url ?> の部分を、GAS Web アプリのデプロイURL に置き換えています。

なぜこのようにするかといえば、フォーム送信時に、form 要素の action 属性に指定した URL に対してフォームデータが POST されるためです。
（こうすることで、フォームデータを GAS のデプロイURLで受け取れる）
↓
↓
（２）「送信」ボタンを押すと、フォームデータが form 要素の action 属性に指定した URL に対して送信されます。
このとき、「formdata イベント」が発生し、index.html の<script>タグ内に記述した「イベントハンドラー」が実行されます。
「イベントハンドラー」というのは、「イベントを処理するための関数」という意味で、具体的には下記の 「(e) => { 」以降の部分です。

この関数の中で、送信するデータ(item_dict）をセットしています。
複数のオブジェクトを送るため、JSON.stringfy でJSON文字列に変換しています。

    // フォーム送信時に発生する 'formdata' イベントを処理する関数（イベントハンドラー）を実装
    document.getElementById('form').addEventListener('formdata', (e) => {
      // フォームデ－タを格納するオブジェクト（FormDataオブジェクト）への参照を取得
      const fd = e.formData;
    
      // フォーム送信先（コード.gs の doPost 関数）に送信するデータをセット
      fd.set('item_dict',  JSON.stringify(item_dict));
    });

↓
↓
（３）フォームを送信すると、(form 要素の action 属性に指定した URL に基づき) GAS 側の doPost 関数が実行されます。

/*  フォーム送信時に呼ばれる */
function doPost(e) {
  // フォームから受け取ったデータ（JSONフォーマットの文字列）を取り出す。
  const item_dict_json = e.parameter.item_dict;

  // JSONフォーマットの文字列を、オブジェクトに戻す。
  const item_dict = JSON.parse(item_dict_json);
  以下略

doPost関数の引数 「e」には、先ほどのイベントハンドラー内でセットしたフォームデータが含まれています。
これを取り出すには e.parameter.変数名 というようにします。

取り出されるのは、JSON.stgringify によって JSON 文字列に変換されたデータなので、これをオブジェクトにもどすために JSON.parse しています。

↓
↓
（４）あとは１．と同様に、返却用のページに値を渡して、evaluate でページを構築して result.html を表示する、という流れです。

Comments

[seito]

createTemplateFromFileの変更と、formを利用したデータやり取りをしてみたら、想像していた動きを作ることができました！！！
gasの開発が初だったので、createTempalteFromFileの使用などを詳しく知りませんでした、、助かりました！

とてもわかり易くご回答して下さりありがとうございます。
ベストアンサーにさせていただきます。