Zenn
🧒

GASでお弁当日の管理してみた～その2～

2022/07/22に公開
Google Sheets
HTML
JavaScript
GAS
tech

前回の「GASでお弁当日の管理してみた～その①～」ではWebページを開いた時の処理を中心に書きましたが、今回は編集機能を中心にまとめてみます。

↓前回の記事
https://zenn.dev/akaneiy/articles/3cbd9aaec27ed8

完成したもの


モバイル版編集画面

コード

form.html
<!DOCTYPE html>
<html>
  <head lang="ja">
    <base target="_top">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" crossorigin="anonymous"></script>
    <script type="text/javascript">
      function disp(){
        // 「OK」時の処理開始 ＋ 確認ダイアログの表示
        if(window.confirm('登録しますか？')){
          //FORMデータを送信する
          document.getElementById("form").submit(); 
        }else{
          window.alert('キャンセルされました'); // 警告ダイアログを表示
        }
      }

      function ShowDialog(value) {
      let dialog = document.querySelector('dialog');
        const rowNum = parseInt(value.value,10)+1;
        google.script.run.withSuccessHandler(
              function(resp){
                  console.log(resp);
                  let date = document.getElementById('dialog_date');
                  date.setAttribute('value', resp[0]);
                  let task = document.getElementById('dialog_text');
                  task.setAttribute('value', resp[1]);
                  let id = document.getElementById("rownum");
                  id.setAttribute('value', rowNum);
                  dialog.showModal();
              })
              .GetValue(rowNum);
      };

      function closeDialog() {
        let dialog = document.querySelector('dialog');
        dialog.close();
      };

      function update() {
        let date = document.getElementById("dialog_date").value;
        let task = document.getElementById("dialog_text").value;
        let id = document.getElementById("rownum").getAttribute('value');
        let del = document.getElementById("del");
        const rowValue = [id, date, task,del.checked];
        console.log(rowValue);
        google.script.run.withSuccessHandler(
              function(url){
                closeDialog();
                window.open(url, '_top');
              })
              .updateValue(rowValue);
      }
    </script>
  </head>
  <body>
    <div id="contents" class="container">
      <div class=”row”>
        <form id="form" action="https://script.google.com/macros/s/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" method="post">
          <h1>幼稚園タスク管理</h1>
          <p><?=result ?></p>
        <div class="item mb-3 col-">
          <label class="label form-label" for="date">日付</label>
          <input id="date" type="date" name="date" class="form-control">
        </div>
        <div class="item mb-3 col-">
          <label class="label form-label" for="value">内容</label>
          <input id="text" type="text" name="text" class="form-control">
        </div>
        <div class="item mb-3 form-check col-">
          <input type="checkbox" name="remind" checked>通知する
        </div>
          <input type="button" value="登録する" onClick="disp()" class="action btn btn-primary">
        </form>
      </div>
      <div class="lists">
          <h2>登録状況</h2>
          <?
            const tasklist = data;
            const today = dayjs.dayjs();
            output.append("<ul class='list-group list-group-flush'>");
            for(var i = 0; i < tasklist.length; i++) {
              if(today >= dayjs.dayjs(tasklist[i][0])) {
                continue;
              }
              var date = dayjs.dayjs(tasklist[i][0]).format("YYYY年MM月DD日");
              output.append("<li class='list-group-item' value='"+ i +"' onClick='ShowDialog(this)'>"+date+" : "+tasklist[i][1]+"</li>");
            }
            output.append("</ul>");
          ?>
      </div>
    </div>
    <dialog>
      <form id="dialog_form" action="https://script.google.com/macros/s/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX">
        <div class="item mb-3 col-">
          <input type="hidden" id="rownum">
          <label class="label form-label" for="date">日付</label>
          <input id="dialog_date" type="date" name="date" class="form-control">
        </div>
        <div class="item mb-3 col-">
          <label class="label form-label" for="value">内容</label>
          <input id="dialog_text" type="text" name="text" class="form-control">
        </div>
        <div class="item mb-3 form-check col-">
          <input type="checkbox" id="del">予定を削除する
        </div>
          <input id="register" type="button" value="登録する" class="action btn btn-primary" onclick="update()">
          <input id="cancel" type="button" value="キャンせル" class="action btn btn-primary" onClick='closeDialog()'>
        </form>
    </dialog>
   
  </body>
  <style>
    .selector-for-some-widget {
      box-sizing: content-box;
    }
    h1 {
      font-size: 40px;
      font-weight: bold;
      margin-bottom: 40px;
      text-align: center;
    }
    h2 {
      margin-top: 20px;
    }
    #form {
      margin: 0 auto;
    }
  </style>
</html>

解説

実際の表示されている画面は下の画像のように、今後の予定等が登録状況として表示されています。


PC番登録画面

<div class="lists">
  <h2>登録状況</h2>
  <?
    const tasklist = data;
    const today = dayjs.dayjs();
    output.append("<ul class='list-group list-group-flush'>");
    for(var i = 0; i < tasklist.length; i++) {
      if(today >= dayjs.dayjs(tasklist[i][0])) {
	continue;
      }
      var date = dayjs.dayjs(tasklist[i][0]).format("YYYY年MM月DD日");
      output.append("<li class='list-group-item' value='"+ i +"' onClick='ShowDialog(this)'>"+date+" : "+tasklist[i][1]+"</li>");
    }
    output.append("</ul>");
  ?>
</div>

日付とタスクのliタグの属性に、valueでスプレッドシートの何行目の予定か値を持たせて、onclick属性でliタグの属性を引数にしてShowDialog関数を呼び出しています。

function ShowDialog(value) {
        let dialog = document.querySelector('dialog');
	const rowNum = parseInt(value.value,10)+1;
	google.script.run.withSuccessHandler(
	      function(resp){
		  console.log(resp);
		  let date = document.getElementById('dialog_date');
		  date.setAttribute('value', resp[0]);
		  let task = document.getElementById('dialog_text');
		  task.setAttribute('value', resp[1]);
		  let id = document.getElementById("rownum");
		  id.setAttribute('value', rowNum);
		  dialog.showModal();
	      })
	      .GetValue(rowNum);
};

引数で受け取ったliタグの属性を数値に直して1足しておきます。
これはプログラム上は0スタートですが、スプレッドシートで行指定するときは1スタートだからです。
この行番号を引数に、今度はコード.gs側のGetValue関数を呼び出します。

function GetValue(rowNum){
  let sheet = SpreadsheetApp.openById(gasheet).getSheetByName('POST');
  let date = sheet.getRange(rowNum,1).getValue();
  let task = sheet.getRange(rowNum,2).getValue();
  var value = [dayjs.dayjs(date).format("YYYY-MM-DD"),task];
  return value;
}

データが保存されているスプレッドシートから、引数で受け取った行番号のデータを取得して、日付とタスクの内容を配列にしてreturnします。

戻り値を受け取ったらその内容を入れてダイアログを表示しています。

<dialog>
      <form id="dialog_form" action="https://script.google.com/macros/s/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX">
        <div class="item mb-3 col-">
          <input type="hidden" id="rownum">
          <label class="label form-label" for="date">日付</label>
          <input id="dialog_date" type="date" name="date" class="form-control">
        </div>
        <div class="item mb-3 col-">
          <label class="label form-label" for="value">内容</label>
          <input id="dialog_text" type="text" name="text" class="form-control">
        </div>
        <div class="item mb-3 form-check col-">
          <input type="checkbox" id="del">予定を削除する
        </div>
          <input id="register" type="button" value="登録する" class="action btn btn-primary" onclick="update()">
          <input id="cancel" type="button" value="キャンせル" class="action btn btn-primary" onClick='closeDialog()'>
        </form>
    </dialog>

登録ボタンを押したらUpdate関数を呼び出して更新、キャンセルボタンを押したらダイアログを閉じる等の処理を行っています。

基本的な機能はかなりザっとですがこんな感じです。

所感

これで基本の登録、編集、削除の機能は完成しました。
使うのも数人で、もはや自分でスプレッドシートにベタ書きして登録しようかなとか思っていたくらいなので多少便利になったと思います。

次回は最終回で、LINE通知するところを投稿します。

Discussion