概要

実験マウスは世代周期が早い哺乳類ということでモデル動物となってから久しく、あらゆる研究室で飼われていると思われる。

しかし、おそらく多くの研究室では筆記もしくはExcelなどの表計算ソフトでの管理がされており、マウスの種類、数、週齢の管理が自動化されているところは少ない。

Google Apps Script (通称GAS) はGoogleが開発したシステムで、Google Drive内にあるGoogle スプレッドシートやGoogleドキュメント、Googleフォームなどと連携してファイル操作を行うことができる(計算処理はGoogleのサーバーもち)。

これを用いて、Google Drive内にwebサイトを作成し、そのサイト内にあるフォームに記入することでGoogle スプレッドシートの値を変化させ、半自動でマウスの管理を行うことが本ブログの趣旨である。

f:id:wet-to-dry:20200301201624p:plain — マウス管理システム要旨

Google スプレッドシートを毎回、直接いじってもいいのだが、個人的に私のスマホキャリアがUQモバイルであり、データ通信料を制限できる機能があるので、この制限をONにしながら操作できる(=通信料の軽いhtmlメインの)webサイトを作りたかったというのも理由の一つです。

できたもの

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

productivityresearch.net

スプレッドシートに連携させたGASを作り、スクリプトファイルに並列する形でフォーム用html、送信後htmlを作成しました。

スプレッドシートは以下のものを作成した(URL共有済み)

docs.google.com

GASは共有するのが怖いので、キャプションのみで↓

f:id:wet-to-dry:20200302132219j:plain — マウス管理システムGAS画面

それぞれの内容は以下の通り

コード.js

function doGet() {
  var toppage = HtmlService.createTemplateFromFile("index");
  return toppage.evaluate();
}

function doPost(postdata) {
  var id = "--------------------------------------"; // スプレッドシートのID

  // 日時を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/"を参考にした-->
    <!--"************"の中には共有用のGASのIDを入れる-->
    <form
      method="post"
      action="https://script.google.com/macros/s/********************************/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>
    送信が完了しました。<br /><br />
    <!--"************"の中には共有用のGASのIDを入れる-->
　<a
      href="https://script.google.com/macros/s/ --------------------------------------/exec"
      >もう一度回答する</a
    >
  </body>
</html>