簡単に報告できるアプリ作成へ

みなさま、こんにちは！

私は小売業店舗で登録販売者として勤務しています。

登録販売者とは、風邪薬や湿布薬など一般用医薬品を接客・販売をすることが出来る資格を持つ者で、有資格者が勤務していないと医薬品を販売することが出来ません。

登録販売者として日々お客さまからどのような薬がいいか等さまざまな内容を尋ねられますが、専門知識を持っていても接客に困ったことや返答が分からなくなってしまうことが発生します。そんな時は登録販売者同士でこんな事聞かれたよ、等を共有するのですが、シフト制勤務のためすれ違いになることが多く、タイムリーに情報共有できないのが現状です。

そこで、先日webアプリ作成とChatGPTの使い方を学んだ私は、誰でも簡単に情報共有できるツールを作成したいと思い、挑戦しました。

作ったもの

使用ツール

・Google スプレッドシート
・Google Apps Script
・ChatGPT
・CodePen

制作過程

①ChatGPTに聞いてみました

すごい！パパっと教えてくれました。よーし！頑張るぞ！

②Googleスプレッドシートの準備

1. 新しいスプレッドシートを作成

項目は（タイムスタンプ、名前、日付、部門カテゴリー、内容）としました。

2. Google Apps Scriptの作成

Googleスプレッドシートを開き、「拡張機能」メニューから「Apps Script」を選択します。

ChatGPTが教えてくれたコードを貼り付けます。

保存したら、右上の「デプロイ」メニューから「新しいデプロイ」を選択します。

「ウェブアプリ」を選択し、アクセスできるユーザーを「全員」に設定します。

ここで今回初のつまづきポイントが発生…
翻訳したところ、Googleによる認証を完了するまでこのアプリは使用しないでください、とのこと。困った…

そこでChatGPT様の出番です！なんなく簡単に教えてくれました。
もっと早く聞けばよかったです。
ここで私は30分以上時間を費やしてしまいました。

デプロイ完了後、ウェブアプリURLが表示されるのでコピーします。
※あとで使用します。

③CodePenでWebアプリを作成

ChatGPTにHTMLコードを教えてもらいました。

CodePenにHTMLコードを貼り付け、赤矢印で記入してある部分に先程デプロイした際コピーしたウェブアプリURLを貼り付けます。

コードの流れをよく見て、「タイトル」や「部門カテゴリー」の項目を追加しました。

ひとまず、ここで完成！

④動作確認

CodePenで作成したフォームに内容を入力して送信ボタンを押し、「スプレッドシートに送信されました！」と表示されました。

迷宮入り…スプレッドシートに反映されない！！

何度送信してもスプレッドシートに内容が反映されなかったので、ChatGPTに改善方法を聞いて色々チェックして何度も送信したけれど、結局解決できず、時間切れとなってしまいました…

まとめ

完成できず無念…

CodePenでWebアプリを作るまではなんとか完成出来ましたが、最後の動作確認で大苦戦。対処方法をChatGPTに聞いて、GASのURLが合っているか、GASのアクセス設定が「全員」になっているか、関数に記載されているシート名が実際のシートと一致しているか、などチェックしては送信、を繰り返し2日間粘りました…がCodePenとGoogleスプレッドシートの連携までたどり着くことが出来ずとても悔しいです。プロンプトが悪かったのかもしれませんが、ChatGPTも決して完璧ではないんだなと実感しました。

やりたかったこと

普段店頭での医薬品の接客頻度は少ないのですが、我々登録販売者はいざ聞かれた時にしっかりと受け答え出来るよう、常に薬の知識をアップデートしないといけません。今回の報告アプリを活用して、誰でも簡単に報告→自動でスプレッドシートに記録→内容をまとめたシートを誰もが閲覧、という感じで、いろいろな人（医薬品取り扱い店舗全店の登録販売者・薬剤師）の対処方法を学んで自分の接客に活かすことが出来る、そんなツールを目指したかったです。
今回は未完成で終わってしまいましたが、時間をかけてでもCodePenとスプレッドシートの連携までやって完成、そして実際に使用してみたいです。

参考資料

企画内容は違えど、使用するツールは同じだったので大変参考にさせていただきました。ありがとうございました！