LANG SELRCT

Google Apps Scriptのコードを書く場所  (新規作成: スプレッドシート | スクリプトエディタ

2020年6月21日日曜日

Fetch APIでGASのアプリにデータを渡したい


Chrome Extensionの開発中に
Google Apps Scriptへデータを渡したくなって書いたコードです。

XMLHttpRequestを使おうと思いましたが、
Fetch APIでもできそうなのでFetch を使うを参考にしました。
  • コード.gsはGoogle Apps Scriptのスクリプトエディタに書くコードです
  • 外部ファイル.jsは、Chrome Extensionの場合background.jsに書いたコードです

dataの中身はcreate_file(data)でGoogleドライブにJSONファイルを作成して確認しています。


POSTデータを受け取る側

コード.gs
function doPost(e) {
  var json = e.postData.contents;
  create_file(json);
}

function create_file(data) {
  var content_type = "application/json";
  var file_name = "FILE_NAME";
  var blob = Utilities.newBlob("", content_type, file_name);
  var file = blob.setDataFromString(data, "UTF-8");
  var folder = DriveApp.getFolderById("FOLDER_ID");
  folder.createFile(file);
}


POSTデータを送る側

外部ファイル.js 
<!DOCTYPE html>
<html>
<body>
  <button id="post">post</button>
<script>
document.getElementById("post").onclick = sendJson;

function sendJson(data) {
  var url = "https://script.google.com/macros/s/ID/exec";
  var data = {message: "hello"};
  fetch(url, {
    method: "POST",
    body: JSON.stringify(data),
    mode: "no-cors",
    headers:{
      "Content-Type": "application/json"
    }
  })
  .then(response => console.log("Success:", response))
  .catch(error => console.error("Error:", error));
}
</script>
</body>
</html>



参考

最新の投稿

Pixel 5でSuicaが使えないときはGoogle PayでSuicaを有効にしてみる

Pixel 5への機種変でSuicaが使えない人向けに書きました。 MISSION Pixel 5でSuicaを使えるようにする SOLUTION 旧端末で機種変更の設定を行う NFCをオンにする Google PayでSuicaを有効にする PROBLEMS 以前...