【GAS】スプシで日報が編集できるWebアプリを作ってみた！

ブログお久しぶりになってしまいました。
前の更新から１ヵ月も経っていたなんて…月日が過ぎるのが早すぎる…。

さて、今日はスプシで日報が編集できるWebアプリを作ってみました。
GAS(Google Apps Script)で作っています。

いつも仕事の日報をスプレッドシートで書いているのですが、
わざわざ毎日シートを複製して、シートに名前をつけて、日付欄に日にちを入力するのも面倒だなあとか、
セル内で改行って何のキー押せばいいんだっけ？
セル内で文章書きづらいな……とか、地味に不便だと感じていました。

この日報をWeb上のフォームから記入して、日付ごとに置いておけるようにしました。

こんな感じでシートが増えていくイメージ

こうやって８月の日報シートをひとつのスプシファイルにためていきます。
９月になったら新しいスプシファイルを作成します。
するとコード中のスプシURL部分だけ変更になるので、新しいスプシファイルのものにします。
こうやって毎月更新していきます。

GASプロジェクト作成
コード.gs
index.html
css.html
デプロイしてみよう
最後に
1. 共有:

GASプロジェクト作成

Googleドライブのページから、
[新規]→[その他]→[Google Apps Script]を開きます。

HTMLファイルを増やすときは[ファイルの＋]→[HTML]を押します。

今回のプロジェクトファイル構成は以下の３つなので、index.htmlとcss.htmlを増やしてください。

コード.gs
index.html
css.html

以下がコードになります。

コード.gs

（編集したいファイルのURLを入力）の部分は差し替えてください。

getRange()の引数はシートの入力箇所に対応しています。
B2セルに入力したい→getRange(B2)という感じです。
なので、自身のスプシを使用したい場合は適宜引数を調整してください。

サンプルの日報をエクセルファイルでダウンロードできるようにしました。
こちらからダウンロードする場合は引数を変更する必要はありません。
８月の日報.xlsx
ダウンロードしたらGoogleドライブにアップロードして、
当該ファイルを開いて[ファイル]→[Googleスプレッドシートとして保存]を押してください。
[.XLSX]とマークがついているエクセルの方じゃなくて、スプシに変換した方を使用します。

function doGet(){

 return HtmlService.createTemplateFromFile("index").evaluate();

}

function doPost(e){

 var url ="（編集したいファイルのURLを入力）";
 var sh = SpreadsheetApp.openByUrl(url);

 var numSheets = sh.getNumSheets();
 var copySheet = sh.getSheets()[numSheets-1]; // 最後のシートを選択

 var day = new Date();
 let today = day.getDate(); // 今日の日付

 let todaySheet = copySheet.copyTo(sh).setName(today); // シートを複製しシート名を日付にする

 var loc = String(e.parameters.loc);
 var start = e.parameters.start.toString();
 var finish = e.parameters.finish.toString();
 var work = e.parameters.work.toString();

 // 日付入力
 let hiduke = "2022/8/" + today;
 todaySheet.getRange("D2").setValue(hiduke);

 // 勤務地、勤務時間入力
 let kihon = [[loc, "", "", "", "", "", "", start, "", "", "", finish]];
 todaySheet.getRange(4,2,1,12).setValues(kihon);

 // 業務内容入力
 todaySheet.getRange("B6").setValue(work);

 //送信後トップに帰る
 return resultpage = HtmlService.createTemplateFromFile("index").evaluate();

}

index.html

（デプロイURLを入力）の部分は差し替えて下さい。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
     <?!=HtmlService.createHtmlOutputFromFile('css.html').getContent(); ?>
  </head>

  <body>
    <header>
      <h1>【８月】日報！</h1>
    </header>
    <main>
     <form class="" action="（デプロイURLを入力）" method="post">

        <dl>
         <div class="form-item">
           <div class="location">
             <dt>勤務地</dt>
              <dd>
                <label>
                  <input type="radio" name="loc" value="〇〇事務所△△支店">
      				    <span>〇〇事務所△△支店</span>
      			    </label>
                <label>
                  <input type="radio" name="loc" value="〇〇事務所□□支店">
      				    <span>〇〇事務所□□支店</span>
      			    </label>
              </dd>
            </div>
            <div class="time">
              <dt>勤務時間</dt>
              <dd>
                <label>
                  開始
                  <input type="time" name="start" value="09:00">
                </label>
                <label>
                  終了
                  <input type="time" name="finish" value="17:00">
                </label>
              </dd>
            </div>
            <div class="">
              <dt>本日の業務内容</dt>
              <dd>
                <textarea name="work" rows="3" cols="20">初期値も入れておけます。</textarea>
              </dd>
            </div>
          </div>
        </dl>
        <!-- 送信ボタン -->
        <div class="form-submit">
          <input type="submit" name="" value="送信する">
        </div>
     </form>
    </main>
  </body>
</html>  <dd>
            <label>
              <input type="radio" name="loc" value="〇〇事務所△△支店">
                      <span>〇〇事務所△△支店</span>
                  </label>
            <label>
              <input type="radio" name="loc" value="〇〇事務所□□支店">
                      <span>〇〇事務所□□支店</span>
                  </label>
          </dd>
        </div>
        <div class="time">
          <dt>勤務時間</dt>
          <dd>
            <label>
              開始
              <input type="time" name="start" value="09:00">
            </label>
            <label>
              終了
              <input type="time" name="finish" value="17:00">
            </label>
          </dd>
        </div>
        <div class="">
          <dt>本日の業務内容</dt>
          <dd>
            <textarea name="work" rows="3" cols="20">初期値も入れておけます。</textarea>
          </dd>
        </div>
      </div>
    </dl>
    <!-- 送信ボタン -->
    <div class="form-submit">
      <input type="submit" name="" value="送信する">
    </div>
 </form>
</main>

css.html

<style>
body {
  background-color: #eee;
  text-align: center;
}

dl {
  padding: 0 20px;
  display: block;
}

dt {
  display: inline-block;
  width: 60%;
  margin-top: 30px;
  font-weight: bold;
  border-bottom: solid 3px #bc32cc;
}

dd {
  margin-top: 10px;
  font-size: 1.1em;
  margin-inline-start: 0px;
}

.location dd label:first-of-type,
.time dd label:first-of-type {
  margin-right: 20px;
}

input[type="submit"] {
  margin-top: 30px;
  background: #bc32cc;
  color: #fff;
  font-size: 1.1em;
  border: solid 2px #fff;
  border-radius: 5px;
  padding: 5px 20px;
}

input[type="submit"]:hover {
  opacity: 0.86;
  cursor: pointer;
}

</style>