wet-to-dry’s blog

京大大学院生の備忘録ブログ

実験マウスを管理するための専用フォームを開発する３

Google Apps Script Googleスプレッドシート 研究室最適化

概要

以前から「マウス管理システム」なるものをちょくちょく作っています。

wet-to-dry.hatenablog.com

wet-to-dry.hatenablog.com

これに、いくつかの機能を追加しました。

変更点としては、

  • css、javascriptのファイルを別ファイルで作成し、読み込ませた

  • spreadsheetへの書き込みを、doPost関数ではなく、「html→javascript→gas」ルートであらかじめ作成した関数を通して書き込みにした

書き込みをdoPostでなく他の関数にしたのは、理由があります。

officeforest.org

このサイトにちょこっと書いてあるのですが、doPost関数は

1プロジェクトで1個しか用意できない

らしいのです。

僕は将来的に、もう少し複雑なアプリを作りたいと思っている(できればデータの追加＆削除＆シート間の移動などがしたい)ので、1個しか関数を作れないのはとても不便だと思ってました。

なので、doPost関数にとらわれずに、新しく自分で関数を作ることにしました。

できたもの

以下のサイトを参考にしました。

qiita.com

  • Javascriptによるspreadsheetへの書き込み

www.pre-practice.net

スプレッドシートは引き続き以下のものを使用している(URL共有済み)

docs.google.com

コードもいっそ共有してしまおう！

script.google.com

一応コードを下に書きます

main.js

var id = "1HuaAdg-xdo6n_JJXCYgyzD8bAHjl09ngtJbVwF8SXNw";

function doGet(e) {
    // htmlからhtmlへの遷移用。"https://surleconomiejp.blogspot.com/2017/02/google-apps-script-htmlhtml.html"を参考にした。
    Logger.log( Utilities.jsonStringify(e) );
    if (!e.parameter.page) {
        return HtmlService.createTemplateFromFile('index').evaluate();
    }
    return HtmlService.createTemplateFromFile(e.parameter['page']).evaluate();
}

function getScriptUrl() {
    // htmlからhtmlへの遷移用。"https://surleconomiejp.blogspot.com/2017/02/google-apps-script-htmlhtml.html"を参考にした。
    var url = ScriptApp.getService().getUrl();
    return url;
}

function include(filename) {
  // cssやjavascriptの外部ファイルを読み込むための関数。"https://qiita.com/taromorimotohf/items/5e52cb9062600e8ccac3"を参考にした。
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function input_to_sheet_gs(sheetname, value) {
  // spreadsheetにhtmlから直接書き込むための関数。"https://www.pre-practice.net/2017/10/web.html"を参考にした。
  
  // 日時をYYYY//MM//DDの形式に変更
  var dt = new Date();
  var y = dt.getFullYear();
  var m = ("00" + (dt.getMonth() + 1)).slice(-2);
  var d = ("00" + dt.getDate()).slice(-2);
  var time = y + "/" + m + "/" + d;
  
  var ss = SpreadsheetApp.openById(id)
  var sh = ss.getSheetByName(sheetname);
  
  var lastRow = sh.getLastRow() + 1;
  sh.getRange(lastRow, 1, 1, 2).setValues([[value, time]]);
  sh.getRange(lastRow, 3).setFormulaR1C1("=ROUNDDOWN((TODAY()-R" + lastRow + "C2)/7)");
}

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <base target="_top" />
    <?!= include('css'); ?>
    <?var url = getScriptUrl();?>
  </head>
  <body>
    <h1>マウス管理フォーム</h1>
    オスの匹数
    <select id="male">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
    <br />
    メスの匹数
    <select id="female">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
    <br />

    <button id="submit" onclick = "input_to_sheet();window.top.location.href = '<?!=url?>?page=result';">送信する</button>
    <?!= include('js'); ?>
  </body>
</html>

result.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <?!= include('css'); ?>
    <!---index.htmlへの遷移用--->
    <?var url = getScriptUrl();?>
  </head>
  <body>
    送信が完了しました。<br /><br />
    
  　<!---別のhtmlへの遷移は"https://surleconomiejp.blogspot.com/2017/02/google-apps-script-htmlhtml.html"を参考にした--->
  　<input type="button" value="もう一度回答する" onclick="window.top.location.href = '<?!=url?>?page=index';"/>
    <?!= include('js'); ?>
  </body>
</html>

css.html

<style>
body{
background:#000;
color:#fff;
}
</style>

js.html

<script>
  function input_to_sheet() {
    let list = ["male", "female"];
    let sheetname = ""
    for (let i = 0; i < 2; i++) {
      if (i < 1) {
        sheetname = "オス";
      } else {
        sheetname = "メス";
      }
      let value = document.getElementById(list[i]).value;
      google.script.run.input_to_sheet_gs(sheetname, value);
    }
    alert("スプレッドシートに入力しました！")
  }
</script>

あとがき

GAS難しいっすね。

gsファイルからのreturnをJavascriptのalertで表示しようと思ったらうまくいかなんだ。

また解決策がわかったら書きます。

2020/12/03追記

記事をまとめました。

wet-to-dry.hatenablog.com