GASで作成したWebアプリの使用時にエラーになる

HTML
1コード> 引用テキスト

下記URLを参考に作ったのですが、POSTFormでは上手くいくのにGETFormではTypeError:Failed to fetchと表示されます。　ただこの通りにコピペしただけなのですがどこがまちがっていたのでしょうか？

https://tatsuya-note.com/create-database-web-application-in-gas-spreadsheets/](url)

<!DOCTYPE html> <html lang="ja"> <head> <title>GAS Form</title> <style> body{ width: 100vw; height: 100vh; display: flex; flex-direction: row; } #left{ background-color: #ffeeee; width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: start; } #right{ background-color: #eeeeff; width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: start; } </style> <script> function OnPost(){

    const URL = "https://script.google.com/macros/s/AKfycbx4458BgydyTQnaqH_d0JN9XbYtbiashHn1Pn_Edbvu6W16_nbLOsN6SVgE3qizm0RS/exec";

    let SendDATA = {
      "column_1" : document.getElementById("column_1").value,
      "column_2" : document.getElementById("column_2").value,
      "column_3" : document.getElementById("column_3").value,
      "column_4" : document.getElementById("column_4").value
    };
    let postparam = {
      "method" : "POST",
      "mode" : "no-cors",
      "Content-Type" : "application/x-www-form-urlencoded",
      "body" : JSON.stringify(SendDATA)
    };
    fetch(URL, postparam);
  }
  function OnGet(){

    const URL = "https://script.google.com/macros/s/AKfycbx4458BgydyTQnaqH_d0JN9XbYtbiashHn1Pn_Edbvu6W16_nbLOsN6SVgE3qizm0RS/exec";

    fetch(URL)
    .then(response => {
      return response.json();
    })
    .then(data => {
      render_text = data.message;
      document.getElementById("get_value").innerHTML = render_text;
    })
    .catch(error => {
      document.getElementById("get_value").innerHTML = error;
    });
  }
</script>

</head> <body> <div id="left"> <h1>POST Form</h1> <p>1列目</p> <input type="text" id="column_1"> <p>2列目</p> <input type="text" id="column_2"> <p>3列目</p> <input type="text" id="column_3"> <p>4列目</p> <input type="text" id="column_4"> <button style="margin-top: 20px;" onclick="OnPost();">送信</button> </div> <div id="right"> <h1>GET Form</h1> <button style="margin-top: 20px;" onclick="OnGet();">取得</button> <p>スプレッドシートの最終行は</p> <p id="get_value"></p> <p>です。</p> </div> </body> </html>

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

回答1件

コード中のURL（ttps://script.google.com/macros/s/～～～～）が間違っている可能性が高いです。

GETでそのエラーが出る場合、デベロッパーツールで見るとPOST時にもエラーが発生しているはずです。

コード中のURLが、有効なデプロイURLであるか再確認してはいかがでしょうか。

そのURLをひらいたところ「doGetがありません」というエラーが出ています。

なので、保存していない状態でデプロイしてしまっているか、「doGet」という関数名が間違っているかのどちらかです。

（確認の仕方がわからないということですので）新しくファイルを作った方が早いと思います。

１．GASで新しくファイルを作って、スクリプトエディタを開いてください。

２．スクリプトエディタに、元のサイトに記載の下記のスクリプトを入力して、保存してください（保存しないとデプロイ時にエラーになります）

function obj2txtout(obj){
  let output = ContentService.createTextOutput();
  output.setMimeType(ContentService.MimeType.JSON);
  output.setContent(JSON.stringify(obj));
  return output;
}
function doPost(e){
  let Sheet = SpreadsheetApp.getActiveSheet();
  let JsonDATA = JSON.parse(e.postData.getDataAsString());
  Sheet.appendRow([JsonDATA.column_1,JsonDATA.column_2,JsonDATA.column_3,JsonDATA.column_4]);
  return obj2txtout({ message: "success!", });
}
function doGet(){
  let Sheet = SpreadsheetApp.getActiveSheet();
  let Data = Sheet.getDataRange().getValues();
  let DataIndex = Data.length-1;
  let ReturnTxt = "1列目：" + Data[DataIndex][0] + "　2列目：" + Data[DataIndex][1] + "　3列目：" + Data[DataIndex][2] + "　4列目：" + Data[DataIndex][3];
  return obj2txtout({ message: ReturnTxt, });
}

３．スクリプトエディタ右上の青い「デプロイ」のボタンをクリックし、新しいデプロイを行って、デプロイurlをコピーしてください。
そしてそのデプロイURLを、HTMLファイルのデプロイURLの所に置換してください。

ここら辺の手順は
https://tatsuya-note.com/create-database-web-application-in-gas-spreadsheets/
の真ん中へんに書いてある説明通りにやればよいです。

投稿2022/04/09 21:03

編集2022/04/10 20:52

退会済みユーザー

総合スコア0

lenovoice

2022/04/10 01:32

デベロッパーツールでエラー確認とはどうやるのでしょうか？

lenovoice

2022/04/10 01:34

このサイトのコンソールを検証したら確かに失敗してるようですね。。。 file:///C:/Users/ryota/OneDrive/%E3%83%87%E3%82%B9%E3%82%AF%E3%83%88%E3%83%83%E3%83%97/Sites/git-practice/GAS.html

退会済みユーザー

2022/04/10 01:43

> デベロッパーツールでエラー確認 OSがWindowsで使用ブラウザがChromeかChromium Edgeならば、ブラウザの画面でF12キーを押します。 OSがmacOSで使用ブラウザがChromeならば、option + command + i、 Safariの場合は、https://support.apple.com/ja-jp/guide/safari/sfri20948/mac

lenovoice

2022/04/10 14:07

開きかたは確認しました。　しかしどのように確認すればいいかわかりません。。。

退会済みユーザー

2022/04/10 20:53 編集

追記しました。GASの方を新しくファイルを作ってやり直してみて下さい。

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