wet-to-dry’s blog

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

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

概要

以前、マウス管理システムなるものを作成した。

wet-to-dry.hatenablog.com

これにちょっとだけ変更を加えたので、ご報告。

変更点としては、

  • result.htmlからindex.htmlへの遷移がうまくできていなかったので修正

  • gsファイル内でグローバル変数を設定できることを知ったので修正

できたもの

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

  • html間の遷移

surleconomiejp.blogspot.com

tonari-it.com

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

docs.google.com

コードは以下の通り

main.js

var id = "1HuaAdg-xdo6n_JJXCYgyzD8bAHjl09ngtJbVwF8SXNw";

function doGet() {
  // アクセスの際、まずindex.htmlを開かせる
  var toppage = HtmlService.createTemplateFromFile("index");
  return toppage.evaluate();
}

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

function doPost(postdata) {
  
  // 日時を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 number = postdata.parameters.male.toString();

  var shMale = SpreadsheetApp.openById(id).getSheetByName("オス");

  var lastRow = shMale.getLastRow() + 1;

  shMale.getRange(lastRow, 1, 1, 2).setValues([[number, time]]);

  shMale
    .getRange(lastRow, 3)
    .setFormulaR1C1("=ROUNDDOWN((TODAY()-R" + lastRow + "C2)/7)");

  // メスファイルの変更

  var number = postdata.parameters.female.toString();

  var shFemale = SpreadsheetApp.openById(id).getSheetByName("メス");

  var lastRow = shFemale.getLastRow() + 1;

  shFemale.getRange(lastRow, 1, 1, 2).setValues([[number, time]]);

  shFemale
    .getRange(lastRow, 3)
    .setFormulaR1C1("=ROUNDDOWN((TODAY()-R" + lastRow + "C2)/7)");

  var resultpage = HtmlService.createTemplateFromFile("result");
  return resultpage.evaluate();
}

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" />
  </head>
  <body>
    <h1>マウス管理フォーム</h1>
    <!--doPostによる方法 "https://productivityresearch.net/programing/116/"を参考にした-->
    <form
      method="post"
      action="https://script.google.com/macros/s/AKfycbw_sqIXkdCyTOxQdwyn-cnvsVcgtZc-DiTo8gCoULDAphcpQCY/exec"
    >
      オスの匹数
      <select name="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 name="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 />

      <input type="submit" value="送信する" />
    </form>
  </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>
  </head>
  <body>
   <!---別のhtmlへの遷移は"https://surleconomiejp.blogspot.com/2017/02/google-apps-script-htmlhtml.html"を参考にした--->
    <!---index.htmlへの遷移用--->
    <?var url = getScriptUrl();?>
    
    送信が完了しました。<br /><br />
    
    <!---index.htmlへの遷移ボタン作成--->
   <input type="button" value="もう一度回答する" onclick="window.top.location.href = '<?!=url?>?page=index';"/>
  </body>
</html>

あとがき

また付け加えたら記事にします。

2020/12/03追記

記事をまとめました。

wet-to-dry.hatenablog.com