客注リマインドシステム②入力部分の作成

以前作成したこちらの記事の続きです。

https://qiita.com/watanabe-tsubasa/items/d5532466a72d1b63fba4

　スプレッドシート上に記入してあるお客さまからのご予約を、LINE Botに通知することで、客注の失念を防ぐというシステムを作成しました。
今回作成したのはスプレッドシート上への記入を行うためのUIとなります。

　UIとして明確化することで、**お名前・御連絡先・受取時間等必要情報の確認漏れを防ぐ**という効果もあるかと思います。

#全体概要
<img src = 'https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/03a31e73-fc65-950c-3f3f-89fc95c7b04f.jpeg' alt = '客注bot入力.jpg' width = 50%>

　[CodePen](https://codepen.io/)でUIを作成、[Stein](https://github.com/SteinHQ)で入力内容をGoogle sheetsに記載しています。前回作成した部分と合わせて、スマホで入力、スマホに出力という一連の流れとなっています。

#実際のプロダクト
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="zYEZRXV" data-user="watanabe-tsubasa" 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/watanabe-tsubasa/pen/zYEZRXV">
  客注プロトタイプ掲載用</a> by watanabe-tsubasa (<a href="https://codepen.io/watanabe-tsubasa">@watanabe-tsubasa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

<img src = 'https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/aa071fa1-09d1-9e40-c31e-61037c0c0df9.png' alt ='5e14ca7bc8544e0a1fe5e4bbb2df7947a61c1418.png' width = 20%>
> こちらは掲載用なのでスプレッドシートへの記入はできません

<details><summary>steinの詳細はこちら</summary><div>

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

記事の通り作成いただき、JS内 steinAPI URLの部分を発行されたAPIに置き換えてください。
2-2,Steinへ登録 までを実施いただければ大丈夫です。
また、CodePenへのSteinライブラリの埋め込みも同様に実施してください。

https://qiita.com/watanabe-tsubasa/items/d831c10ae2be574a6fd1

作り方詳細 の中の折り畳み部分を参照ください。
</div></details>

:::note warn
前回記事integromat部分を以下の通り変更してください。
承り日の自動通知が動かなくなってしまいます。
:::

<img src = 'https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/b666ce4b-0862-1884-7074-f61e44c08f70.jpeg' alt = '変更箇所.jpg' width =50%>

>Equal to の中身を
>formatDate(now ; YYYY-MM-DD)
>に変更してください。
>HTML上で入力した日付が、Google Sheetsにこの形式で転記されるためです（元記事はYYYY/MM/DDの形式でした）。

#使い方
**入力画面**
<img src = 'https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/82607d76-7f59-7a6e-2770-df0124d6115e.png' width = 50%>

**日付の入力**
<img src = 'https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/25d62a76-61f6-f433-08b2-354141d34d0f.png' width = 50%>

**お渡し時間の入力**
<img src = 'https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/e8f26d8f-222f-5405-6629-72ea9c72955e.png' width = 50%>

**お客さま氏名、御連絡先、客注内容の入力**
<img src = 'https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/2956bb61-4f1c-a98c-e5ed-76c159ad1cb9.png' width = 50%>

:::note
客注内容は音声入力も可能です。うまく認識されずに慌てふためくパートさんの顔が目に浮かんだため実装を迷いましたが、入力内容が長いときの補助になるかと思い試験的に入れてみました。
:::

**全部終わったら送信**
<img src = 'https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/ebf176ae-dc8f-6ea9-f7f5-4b2ddd928cf2.png' width = 50%>

**入力内容がシートに反映されます。**
<img src = 'https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/dac1d70e-f435-4f3c-4f02-6238dce0e6d3.jpeg' width = 50%>

#結びに
不足している機能は以下の通りです。

- 重複送信の防止（送信したら入力内容を削除等）
- 空欄ありでの送信防止

フロント作成した経験が浅いので結構粗削りですが、これ以上先延ばしすると年越ししてしまいそうなので、ひとまず出します。
作成が遅れた理由は9割音声認識の実装と両立するためだったため、落としどころの重要性を学びました。