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

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

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

全体概要

　CodePenでUIを作成、Steinで入力内容をGoogle sheetsに記載しています。前回作成した部分と合わせて、スマホで入力、スマホに出力という一連の流れとなっています。

実際のプロダクト

こちらは掲載用なのでスプレッドシートへの記入はできません

steinの詳細はこちら

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

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

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

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

入力画面

日付の入力

お渡し時間の入力

お客さま氏名、御連絡先、客注内容の入力

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

全部終わったら送信

入力内容がシートに反映されます。

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

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