名前を入れてクリックしたらポイントが入力される仕組みの実装-スマイルレポート３

スマイルレポートという仕組みで医療介護現場の笑顔を増やすというプロジェクトを行なっています。

https://note.com/naokiuc/n/n8ce5dca62b60

詳しくはぜひ上の記事を読んでいただきたいのですが、**サンクスレポートで職場内の感謝を共有しヒヤリハットレポートでミスの繰り返しを減らす取り組みをデジタル化することで職場の笑顔を増やそうというのがプロジェクトの概要**になります。

この仕組みの実装については、過去に二つ記事を書いており今回が三つ目です。
[前回の記事](https://qiita.com/naokiuc/items/dc4cb35fbdeba7c7a7a3)でサイトのイメージをCodePenを使って実装しました。

はじめのnote記事にも書いていますが、**今回のプロジェクトの一つの鍵となる仕組みがポイント制**です。
ボタンをクリックしたときにポイントが入る仕組みをどう実装するかについて、今回考えたので記事にしています。

実装動画はこちら。

![SmilePoint1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2051906/c83f0e31-07c2-2c16-f556-f59c5a061e77.gif)

#ベースはGoogleスプレッドシート
サンクスレポートもヒヤリハットレポートもGoogleフォームで作成しスプレッドシートで集計と共有を行うため、ポイントを記載していくのもスプレッドシートを用いることを考えました。

そこで参考にしたのがこちらの記事。

https://qiita.com/masuraoProg/items/efaa6397d2d5409c968b

Steinを使うことでスプレッドシートがデータベースになるということで、この記事に内にあるコードをもとに、ボタンを押すと「内田」という名前と入力の日時、1ポイントが入力されるコードをまずは書きました。

<details><summary>サンプルコード</summary><div>

```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">
    <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("スプレッドシートのAPI URL");

  store.read("sheet1", { 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);
      }
  });

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

    location.href = './thanks.html';
  }
</script>
</body>
</html>
```
</div></details>

#inputに入れた名前をスプレッドシートに入力する
次に、inputに入れた名前をスプレッドシートに入力する方法を考えます。
参考にしたのはこちらの記事です。

https://code-kitchen.dev/html/input/

```js
name: document.getElementById("name").value,
```
とすることでinputに入れた名前をスプレッドシートに入力することに成功しました。

また、[前回の記事](https://qiita.com/naokiuc/items/dc4cb35fbdeba7c7a7a3)ではCodePenを使って実装し、一ページずつをNetlifyでデプロイしていたのですが、今回はVSCodeを用いて複数ページを扱っています。

パス(URL)の指定法についてはこちらの記事を参照しました。

http://lab.agr.hokudai.ac.jp/useful/utile/Path_URL.htm

また、VSCodeでCodePenのようにサイトを見ながら作業をするためにこちらを参考にLive Serverをインストール。

https://webdesign-trends.net/entry/14461

氏名欄に名前を入れて「サンクスレポート」をクリックすると入れた名前、入れた日時、３ポイントが入るコードがこちら。

<details><summary>サンプルコード</summary><div>

```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">
    <title>test document</title>
</head>
<body>
  <input type="text" id="name" placeholder="氏名"><br>
  <button onclick="thanks()">サンクスレポート</button>
<script src="https://unpkg.com/stein-js-client"></script>
<script>
  const store = new SteinStore("スプレッドシートのAPI URL");

  store.read("sheet1", { 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);
      }
  });

  async function thanks() {
    await store.append("sheet1", [
      {
        name: document.getElementById("name").value,
        date: new Date().toISOString(),
        point: 1,
      }
    ]);

    location.href = './thanks.html';
  }
</script>
</body>
</html>
```
</div></details>

```html
<input type="text" id="name" placeholder="氏名"><br>
```

とすることで、入力欄に薄く「氏名」と入れました。
これも[先程の記事を参考](https://code-kitchen.dev/html/input/)にしています。

#トップページの実装

前回CodePenで実装したトップページがこちらです。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="BawLzoe" data-user="naokiuc" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/naokiuc/pen/BawLzoe">
  スマイルレポート最後</a> by Naoki Ucihda (<a href="https://codepen.io/naokiuc">@naokiuc</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

このまま実装すると、入力した人の名前が追えないという問題があったため、inputで名前を入れれるようにしました。
**inputに名前を入れた上で、「サンクスレポート」か「ヒヤリハットレポート」をクリックすれば3ポイント、「レポートなし」をクリックすれば1ポイント入るように今回実装したのが最初に上げていた動画**です。

メインのコードはこちらになります。

```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">
    <title>test document</title>
</head>
<body>
  <input type="text" id="name" placeholder="氏名"><br>
  <h3><button onclick="thanks()">サンクスレポート</button></h3>
  <h3><button onclick="hiyari()">ヒヤリハットレポート</button></h3>
  <h3><button onclick="owari()">レポートなし</button></h3>
<script src="https://unpkg.com/stein-js-client"></script>
<script>
  const store = new SteinStore("スプレッドシートのAPI URL");

  store.read("sheet1", { 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);
      }
  });

  async function thanks() {
    await store.append("sheet1", [
      {
        name: document.getElementById("name").value,
        date: new Date().toISOString(),
        point: 3,
      }
    ]);

    location.href = './thanks.html';
  }
  async function hiyari() {
    await store.append("sheet1", [
      {
        name: document.getElementById("name").value,
        date: new Date().toISOString(),
        point: 3,
      }
    ]);

    location.href = './hiyari.html';
  }
  async function owari() {
    await store.append("sheet1", [
      {
        name: document.getElementById("name").value,
        date: new Date().toISOString(),
        point: 1,
      }
    ]);

    location.href = './owari.html';
  }
</script>
</body>
</html>
```

#サイトの修飾はできなかった
さらに、CSSを用いてサイトの修飾を試みましたが、うまくいきませんでした。

```html
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index1.css">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
```

このようにheadにcssファイルを読み込むコードを入れて、

```CSS
body{
    font-family:"Avenir Next";
  }
  
  .main{
    height: 1000px;
    padding: 20px 20px;
     background-color: #b0c4de;
  }
  
  .copy-container h3{
    font-size: 60px;
  }
  
  .contents{
   height: 100px;
   margin-top: 10px;
  }
```

前回のCodePenを転用した上記のCSSを書いたものの反映されず表示は変わりませんでした。

サイトの修飾は次回の課題としたいと思います。