GAS001

キーを入れてGAS経由でGoogle Spread Sheetへアクセスし、検索結果を戻して表示する

<style>

.scrollable {

    width: 1300px;

    height: 600px;

    overflow: auto;

    border: 1px solid #ccc;

    padding: 10px;

}

.btn {

    width: 70px;

    height: 24px;

    font-size: 14px;

}

#sid {

    width: 700px;

}

.tbl {

    border-top: 1px solid black;

    border-spacing: 0;

}

.c0 {

    padding: 3px;

    vertical-align: top;

    border-bottom: 1px solid black;

}

.c1 {

    width: 110px;

    border-left: 1px solid black;

}

.c2 {

    width: 400px;

    border-left: 1px solid black;

}

.c3 {

    width: 400px;

    border-left: 1px solid black;

}

.cf {

    width: 20px;

    vertical-align: top;

}

.cm {

    width: 20px;

    vertical-align: bottom;

}

.ce {

    width: 20px;

    vertical-align: bottom;

    border-right: 1px solid black;

}

.hid {

    display: none;

}

</style>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script>

  function find(wd) {

      //alert();

      if (wd == "r10-" || wd == "r5-") {

      } else {

          wd = $("#word").val();

      }

      getInfo(wd);

  }

  async function getInfo(wd) {

      try {

          const sid = "AKfycbyuBF1J-LvCnqUCmbwwJQkV4N9RMoVad3t9kuQ6Bn9ABc7iyeFpGKapFz1TlTo" + $("#sid").val();

          const url = `https://script.google.com/macros/s/${sid}/exec?wd=${wd}`;

          // Fetch the data

          $("#kekka").html("読み込み中");

          const response = await fetch(url);

          const data = await response.text();

          $("#kekka").html(editData(data));

      } catch (error) {

          $("#kekka").html("ERROR");

      }

  }

  function editData(data) {

      let ret = "<table class='tbl'>";

      let arr1 = data.split(";;;");

      let arr2;

      for (let i=0; i<arr1.length; i++) {

          if (arr1[i] == "") break;

          arr2 = arr1[i].split(":::");

          ret += "<tr>"

              +  "<td id='wd-"+i+"-"+0+"' class='c0 c1'>"+editMask(arr2[0], arr2[0])+"</td>"

              +  "<td class='c0 cf'>"+makePbtn(i, 0)

              +  "<span id='hid-"+i+"-"+0+"' class='hid'>"+arr2[0]+"</span></td>"

              +  "<td id='wd-"+i+"-"+1+"' class='c0 c2'>"+editMask(arr2[0], arr2[1])+"</td>"

              +  "<td class='c0 cm'>"+makePbtn(i, 1)

              +  "<span id='hid-"+i+"-"+1+"' class='hid'>"+arr2[1]+"</span></td>"

              +  "<td id='wd-"+i+"-"+2+"' class='c0 c3'>"+editMask(arr2[0], arr2[2])+"</td>"

              +  "<td class='c0 ce'>"+makePbtn(i, 2)

              +  "</td>"

              +  "</tr>"

      }

      ret += "</table>";

      return ret;

  }

  function editMask(a, b) {

      if ($("#msk").prop("checked")) {

          //return b.replaceAll(a, "_____");

          return replaceIgnoreCase(b, a, "_____");

      } else {

          return b;

      }

  }

  function replaceIgnoreCase(text, search, replacement) {

      const regex = new RegExp(search, "gi"); // 'g'は全置換, 'i'は大文字小文字無視

      return text.replace(regex, replacement);

  }

  function makePbtn(a, b) {

      return "<button onClick='doSay("+a+","+b+")'>P</button>";

  }

  function debug(s) {

      console.log(s);

  }

  function debugSts(a, b, c) {

      debug("  sts:"+ a +" uke:" + b + " yoyaku:" + c);

  }

  function doSay(a, b) {

      let text;

      if (b == 0 || b == 1) {

          text = $("#hid-"+a+"-"+b).html();

      } else {

          text = $("#wd-"+a+"-"+b).html();

      }

      if (text.trim() === "") {

          return;

      }

      const utterance = new SpeechSynthesisUtterance(text);

      utterance.lang = "en-US";

      utterance.rate = 0.7;

      const voices = speechSynthesis.getVoices();

      const femaleVoice = voices.find(voice => voice.lang === "en-US" && voice.name.includes("Female"));

      if (femaleVoice) {

          utterance.voice = femaleVoice;

      }

      speechSynthesis.speak(utterance);

  }

</script>

    <input id="word" type="text" value="">

    <input class="btn" type="button" value="検索"   onClick="find();">

    <input class="btn" type="button" value="最近5"  onClick="find('r5-');">

    <input class="btn" type="button" value="最近10" onClick="find('r10-');">

    <input id="msk" type="checkbox">マスク

    <input id="sid" type="text" value="" style="width: 200px;">(b2g1B)

    <br />

    <div id="kekka" class="scrollable"></div>

GASプログラム

const SPREAD_SHEET_ID = '1eBR************************************m0Ks';

const SHEET_ID = "list";

function doGet(e) {

 const app = SpreadsheetApp.openById(SPREAD_SHEET_ID);

 let sheet = app.getSheetByName(SHEET_ID);

 let findWd = e.parameter.wd;

 let iEnd = sheet.getRange(1, 1).getValue();

 let iStart;

 if (findWd == "r5-") {

   iStart = iEnd - 4;

   findWd = "";

 } else if (findWd == "r10-") {

   iStart = iEnd - 9;

   findWd = "";

 } else {

   iStart = 5;

 }

 let str = "";

 let tbldata1 = "";

 let ts;

 let cnt=0;

 for (let i=iEnd; i>=iStart; i--) {

   cnt++;

   let wd = sheet.getRange(i, 1).getValue();

   if (findWd != "") {

     if (wd.indexOf(findWd) == -1) {

       continue;

     }

   }

   let s1 = sheet.getRange(i, 2).getValue();

   let s2 = sheet.getRange(i, 3).getValue();

   let s3 = sheet.getRange(i, 4).getValue();

   let s4 = sheet.getRange(i, 5).getValue();

   let sw = sheet.getRange(i, 6).getValue();

   tbldata1 += wd + ":::"

            +  s1 + ":::"

            +  s2 + ":::"

            +  s3 + ":::"

            +  s4 + ":::"

            +  sw + ";;;";

 }

 str = tbldata1;

 return ContentService.createTextOutput(str);

}