Closed11

レポート閲覧機能

内田直樹内田直樹

スプレッドシートの名前を抜き出してくるサンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test document</title>
</head>
<body>
  <input type="text" id="name"><br>
  <button onclick="thanks()">感謝した</button>
<script src="https://unpkg.com/stein-js-client"></script>
<script>
  const store = new SteinStore("https://api.steinhq.com/v1/storages/61b5fd69c582292380bcaf36");

  store.read("sheet", { limit: 100, offset: 0 }).then(data => {
      console.dir(data);
      console.log(" - - - - - - - - - - - ");
      for (let i = 0; i < data.length; i++) {
        const element = data[i];
        console.log("title:"+element.text);
        
        // 画面に取得したデータを表示する
        const newDiv = document.createElement("div");
        const newContent = document.createTextNode(data[i].name);
        newDiv.appendChild(newContent);
        var currentDiv = document.getElementById("div1");
        document.body.insertBefore(newDiv, currentDiv);
      }
  });

  async function thanks() {
    await store.append("sheet", [
      {
        name: '光岡',
        date: new Date().toISOString(),
        point: 1,
      }
    ]);

    location.href = './thanks.html';
  }
</script>
</body>
</html>
内田直樹内田直樹

サンクスレポートの内容だけを同画面に表示させるコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--これでブラウザのタブにsmile pointと表示される-->
    <title>smile point</title>
</head>
<body>
  <!--入力欄を置くコード-->
  <p>点数計算</p>
  <input type="text" id="name" placeholder="氏名スペース入れない" required><br>
  <!--ボタンを置くコード-->
  <button onclick="points()">点数計算</button>
<script src="https://unpkg.com/stein-js-client"></script>
<script>
  const store = new SteinStore("https://api.steinhq.com/v1/storages/61c840ddc582292380bfedc1");

  //"sheet"の部分はスプレッドシート名。limitは何行のデータを記載するか。offsetは取得を開始する行数。
  async function points() {
    store.read("sheet1", { limit: 1000, offset: 0 }).then(data => {
      console.dir(data);
      console.log(" - - - - - - - - - - - ");
      for (let i = 0; i < data.length; i++) {
        const element = data[i];
        const thxdata = element.サンクスレポートの内容;
        console.log(thxdata); 
       
        const newDiv = document.createElement("div");
        const newContent = document.createTextNode(thxdata);
        newDiv.appendChild(newContent);
        var currentDiv = document.getElementById("div1");
        document.body.insertBefore(newDiv, currentDiv);


      }
  });

  }
</script>
</body>
</html>
内田直樹内田直樹

空白とnullは違う！！
空文字は0文字の文字列ですが、nullは存在がない状態

内田直樹内田直樹

サンクスレポートの詳細のうち、書き込みがあるものだけを表示

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--これでブラウザのタブにsmile pointと表示される-->
    <title>smile point</title>
</head>
<body>
  <!--入力欄を置くコード-->
  <!--<p>点数計算</p>
  <input type="text" id="name" placeholder="氏名スペース入れない" required><br>-->
  <!--ボタンを置くコード-->
  <button onclick="thx()">サンクスレポート表示</button>
<script src="https://unpkg.com/stein-js-client"></script>
<script>
  const store = new SteinStore("https://api.steinhq.com/v1/storages/61c840ddc582292380bfedc1");

  //"sheet"の部分はスプレッドシート名。limitは何行のデータを記載するか。offsetは取得を開始する行数。
  async function thx() {
    store.read("sheet1", { limit: 1000, offset: 0 }).then(data => {
      console.dir(data);
      console.log(" - - - - - - - - - - - ");
      for (let i = 0; i < data.length; i++) {
        const element = data[i];
        const thxdata = element.サンクスレポートの内容;
        console.log(thxdata); 
       if(thxdata!==null){
        const newDiv = document.createElement("div");
        const newContent = document.createTextNode(thxdata);
        newDiv.appendChild(newContent);
        var currentDiv = document.getElementById("div1");
        document.body.insertBefore(newDiv, currentDiv);

       }
      }
  });

  }
</script>
</body>
</html>
内田直樹内田直樹

サンクスレポートの内容が書いてある場合のみ表示

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--これでブラウザのタブにsmile pointと表示される-->
    <title>smile point</title>
</head>
<body>
  <!--入力欄を置くコード-->
  <!--<p>点数計算</p>
  <input type="text" id="name" placeholder="氏名スペース入れない" required><br>-->
  <!--ボタンを置くコード-->
  <button onclick="hyr()">ヒヤリハットレポート表示</button>
<script src="https://unpkg.com/stein-js-client"></script>
<script>
  const store = new SteinStore("https://api.steinhq.com/v1/storages/61c840ddc582292380bfedc1");

  //"sheet"の部分はスプレッドシート名。limitは何行のデータを記載するか。offsetは取得を開始する行数。
  async function hyr() {
    store.read("sheet1", { limit: 1000, offset: 0 }).then(data => {
      console.dir(data);
      console.log(" - - - - - - - - - - - ");
      for (let i = 0; i < data.length; i++) {
        const element = data[i];
        const hyrdata = element.内容;
        console.log(hyrdata); 
       if(hyrdata!==null){
        const newDiv = document.createElement("div");
        const newContent = document.createTextNode(hyrdata);
        newDiv.appendChild(newContent);
        var currentDiv = document.getElementById("div1");
        document.body.insertBefore(newDiv, currentDiv);

       }
      }
  });

  }
</script>
</body>
</html>
内田直樹内田直樹

ヒヤリハットレポートの内容と発生時の対応を引っ張ってこれるようになった

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--これでブラウザのタブにsmile pointと表示される-->
    <title>smile point</title>
</head>
<body>
  <!--入力欄を置くコード-->
  <!--<p>点数計算</p>
  <input type="text" id="name" placeholder="氏名スペース入れない" required><br>-->
  <!--ボタンを置くコード-->
  <button onclick="hyr()">ヒヤリハットレポート表示</button>
<script src="https://unpkg.com/stein-js-client"></script>
<script>
  const store = new SteinStore("https://api.steinhq.com/v1/storages/61c840ddc582292380bfedc1");

  //"sheet"の部分はスプレッドシート名。limitは何行のデータを記載するか。offsetは取得を開始する行数。
  async function hyr() {
    store.read("sheet1", { limit: 1000, offset: 0 }).then(data => {
      console.dir(data);
      console.log(" - - - - - - - - - - - ");
      for (let i = 0; i < data.length; i++) {
        const element = data[i];
        const hyrdata = element.内容;
        const hyrrp = element.発生時の対応;
        console.log(hyrdata); 
       if(hyrdata!==null){
        const newDivhd = document.createElement("div");
        const newContenthd = document.createTextNode(hyrdata);
        newDivhd.appendChild(newContenthd);
        var currentDivhd = document.getElementById("div1");
        document.body.insertBefore(newDivhd, currentDivhd);
        const newDivrp = document.createElement("div");
        const newContentrp = document.createTextNode(hyrrp);
        newDivrp.appendChild(newContentrp);
        var currentDivrp = document.getElementById("div1");
        document.body.insertBefore(newDivrp, currentDivrp);

       }
      }
  });

  }
</script>
</body>
</html>
内田直樹内田直樹

ヒヤリハットレポートの内容、発生時の対応、原因、今後の対応を引っ張ってこれるようになった

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--これでブラウザのタブにsmile pointと表示される-->
    <title>smile point</title>
</head>
<body>
  <!--入力欄を置くコード-->
  <!--<p>点数計算</p>
  <input type="text" id="name" placeholder="氏名スペース入れない" required><br>-->
  <!--ボタンを置くコード-->
  <button onclick="hyr()">ヒヤリハットレポート表示</button>
<script src="https://unpkg.com/stein-js-client"></script>
<script>
  const store = new SteinStore("https://api.steinhq.com/v1/storages/61c840ddc582292380bfedc1");

  //"sheet"の部分はスプレッドシート名。limitは何行のデータを記載するか。offsetは取得を開始する行数。
  async function hyr() {
    store.read("sheet1", { limit: 1000, offset: 0 }).then(data => {
      console.dir(data);
      console.log(" - - - - - - - - - - - ");
      for (let i = 0; i < data.length; i++) {
        const element = data[i];
        const hyrdata = element.内容;
        const hyrrp = element.発生時の対応;
        const hyrreason = element.原因;
        const hyrreact = element.今後の対応;
        console.log(hyrdata); 
       if(hyrdata!==null){
        const newDivhd = document.createElement("div");
        const newContenthd = document.createTextNode(hyrdata);
        newDivhd.appendChild(newContenthd);
        var currentDivhd = document.getElementById("div1");
        document.body.insertBefore(newDivhd, currentDivhd);

        const newDivrp = document.createElement("div");
        const newContentrp = document.createTextNode(hyrrp);
        newDivrp.appendChild(newContentrp);
        var currentDivrp = document.getElementById("div1");
        document.body.insertBefore(newDivrp, currentDivrp);

        const newDivreason = document.createElement("div");
        const newContentreason = document.createTextNode(hyrreason);
        newDivreason.appendChild(newContentreason);
        var currentDivreason = document.getElementById("div1");
        document.body.insertBefore(newDivreason, currentDivreason);

        const newDivreact = document.createElement("div");
        const newContentreact = document.createTextNode(hyrreact);
        newDivreact.appendChild(newContentreact);
        var currentDivreact = document.getElementById("div1");
        document.body.insertBefore(newDivreact, currentDivreact);

       }
      }
  });

  }
</script>
</body>
</html>
内田直樹内田直樹

時間順（降順）に並べる

element.sort(function(a,b){
    if(a.タイムスタンプ>b.タイムスタンプ) return -1;
    if(a.タイムスタンプ < b.タイムスタンプ) return 1;
    return 0;
内田直樹内田直樹

スプレッドシートの下からサンクスレポートの項目を表示する

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--これでブラウザのタブにsmile pointと表示される-->
    <title>smile point</title>
</head>
<body>
  <!--入力欄を置くコード-->
  <!--<p>点数計算</p>
  <input type="text" id="name" placeholder="氏名スペース入れない" required><br>-->
  <!--ボタンを置くコード-->
  <button onclick="thx()">サンクスレポート表示</button>
<script src="https://unpkg.com/stein-js-client"></script>
<script>
  const store = new SteinStore("https://api.steinhq.com/v1/storages/61c840ddc582292380bfedc1");

  //"sheet"の部分はスプレッドシート名。limitは何行のデータを記載するか。offsetは取得を開始する行数。
  async function thx() {
    store.read("sheet1", { limit: 1000, offset: 0 }).then(data => {
      console.dir(data);
      console.log(" - - - - - - - - - - - ");
      for (let i = data.length-1; i > 0; i--) {
        const element = data[i];
        const thxdata = element.サンクスレポートの内容;
        console.log(thxdata); 
        if(thxdata!==null){
        const newDiv = document.createElement("div");
        const newContent = document.createTextNode(thxdata);
        newDiv.appendChild(newContent);
        var currentDiv = document.getElementById("div1");
        document.body.insertBefore(newDiv, currentDiv);
       }
      }
      
  });
  }
</script>
</body>
</html>
内田直樹内田直樹

スプレッドシートの下からヒヤリハットレポートの項目を表示する

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--これでブラウザのタブにsmile pointと表示される-->
    <title>smile point</title>
</head>
<body>
  <!--入力欄を置くコード-->
  <!--<p>点数計算</p>
  <input type="text" id="name" placeholder="氏名スペース入れない" required><br>-->
  <!--ボタンを置くコード-->
  <button onclick="hyr()">ヒヤリハットレポート表示</button>
<script src="https://unpkg.com/stein-js-client"></script>
<script>
  const store = new SteinStore("https://api.steinhq.com/v1/storages/61c840ddc582292380bfedc1");

  //"sheet"の部分はスプレッドシート名。limitは何行のデータを記載するか。offsetは取得を開始する行数。
  async function hyr() {
    store.read("sheet1", { limit: 1000, offset: 0 }).then(data => {
      console.dir(data);
      console.log(" - - - - - - - - - - - ");

      for (let i = data.length-1; i > 0; i--) {
        const element = data[i];
        const hyrdata = element.内容;
        const hyrrp = element.発生時の対応;
        const hyrreason = element.原因;
        const hyrreact = element.今後の対応;
        console.log(hyrdata); 
       if(hyrdata!==null){
        const newDivhd = document.createElement("div");
        const newContenthd = document.createTextNode(hyrdata);
        newDivhd.appendChild(newContenthd);
        var currentDivhd = document.getElementById("div1");
        document.body.insertBefore(newDivhd, currentDivhd);

        const newDivrp = document.createElement("div");
        const newContentrp = document.createTextNode(hyrrp);
        newDivrp.appendChild(newContentrp);
        var currentDivrp = document.getElementById("div1");
        document.body.insertBefore(newDivrp, currentDivrp);

        const newDivreason = document.createElement("div");
        const newContentreason = document.createTextNode(hyrreason);
        newDivreason.appendChild(newContentreason);
        var currentDivreason = document.getElementById("div1");
        document.body.insertBefore(newDivreason, currentDivreason);

        const newDivreact = document.createElement("div");
        const newContentreact = document.createTextNode(hyrreact);
        newDivreact.appendChild(newContentreact);
        var currentDivreact = document.getElementById("div1");
        document.body.insertBefore(newDivreact, currentDivreact);

       }
      }
  });
  }
</script>
</body>
</html>
内田直樹内田直樹

cssでヒヤリハットごとに枠線つけることを考えて、表示をまとめたコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="hyr.css">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--これでブラウザのタブにsmile pointと表示される-->
    <title>sumarepo</title>
</head>
<body>
  <h1>ヒヤリハットレポート</h1>
  <!--入力欄を置くコード-->
  <!--<p>点数計算</p>
  <input type="text" id="name" placeholder="氏名スペース入れない" required><br>-->
  <!--ボタンを置くコード-->
  <button onclick="hyr()">ヒヤリハットレポート表示</button>
<script src="https://unpkg.com/stein-js-client"></script>
<script>
  const store = new SteinStore("https://api.steinhq.com/v1/storages/61c840ddc582292380bfedc1");

  //"sheet"の部分はスプレッドシート名。limitは何行のデータを記載するか。offsetは取得を開始する行数。
  async function hyr() {
    store.read("sheet1", { limit: 1000, offset: 0 }).then(data => {
      console.dir(data);
      console.log(" - - - - - - - - - - - ");

      for (let i = data.length-1; i > 0; i--) {
        const element = data[i];
        const hyrdata = element.内容;
        const hyrrp = element.発生時の対応;
        const hyrreason = element.原因;
        const hyrreact = element.今後の対応;
        console.log(hyrdata); 
       if(hyrdata!==null){
        const newDivhd = document.createElement("div");
        const newContenthd = document.createTextNode("[内容]" + hyrdata + "[発生時の対応]" + hyrrp + "[原因]" + hyrreason + "[今後の対応]" + hyrreact);
        newDivhd.appendChild(newContenthd);
        var currentDivhd = document.getElementById("div1");
        document.body.insertBefore(newDivhd, currentDivhd);
       }
      }
  });
  }
</script>
</body>
</html>
このスクラップは2021/12/26にクローズされました