簡単に報告ができるアプリ作成へ
みなさま、こんにちは。私は小売業で販売課長をしています。
先日webアプリの作成を学んだ私は、簡単に作成できることに感動し、職場の課題解決ができるwebアプリを作ってみたい！と、習いたてのwebアプリ作成に初挑戦しました。当店は「レジミス」「売価エラー」が発生した際、対策書を手書きで記入し、主任→課長→店長から押印をいただき集計部署に提出をしています。シフト制の職場のため、主任・課長・店長から押印をもらうために自分とのシフトを照らし合わせ、事務所にいないかと何度も覗きに行ってみたり、店内を探しまわってみたり...その時間ももったいない。課長である私のところに辿り着くのが1週間後！そこで初めてレジミスの発生を知るなんてことも。タイムリーに状況把握をして迅速な対策＆チーム全体で情報共有がしたい。
完成品
使用ツール
・CodePen
・ChatGPT
・Gemini
・Google スプレッドシート
・GoogleAppsScript
制作開始
ChatGPT先生に相談してみよう
私には「簡単に」というところがポイントです。先生がすぐに作成方法を教えてくれたのでLet'sトライ！
ステップ1: Googleスプレッドシートの準備
新しいGoogleスプレッドシートを作成します。
スプレッドシートの名前を付け、適当な列を作成します。→後ほどアプリの項目と合わせます。（名前、日付、報告の種類、報告の内容）
ステップ2: Google Apps Scriptの作成
スプレッドシートを開き、「拡張機能」メニューから「Apps Script」を選択します。
新しいスクリプトエディタが開いたら、ChatGPTが生成してくれたコードを貼り付けます。スクリプトを保存し、プロジェクト名を適当に設定します。
「デプロイ」メニューから「新しいデプロイ」を選択します。
「ウェブアプリ」としてデプロイします。アクセスを「全員」に設定しデプロイ→ウェブアプリURLをコピーします。
ステップ3: CodePenのフォーム作成
HTMLコードをCodePenのHTMLエディタに貼り付けます。
'YOUR_GOOGLE_APPS_SCRIPT_WEB_APP_URL'を、先ほどコピーしたGoogleAppsScriptのウェブアプリURLに置き換えます。
完成したフォームを確認、ChatGPTに修正するプロンプトを伝えコード修正をしていきます。
ステップ4: CodePenの動作確認
CodePenで完成したフォームに必要な情報を入力して送信します。
Googleスプレッドシートを確認し、入力されたデータが新しい行として追加されていることを確認します。
動作確認ができない...
「送信」を押すと”報告の送信中にエラーが発生しました”の表示が。
このエラーの対処法をChatGPTに聞くと、”Google Apps ScriptのウェブアプリのURLが正しくない”との回答でしたが、新規デプロイで新しいURLを試しても状況変わらず。デプロイ３２まで頑張りましたがここで時間切れとなってしまいました（泣）
まとめ
大苦戦！エラーを解決できない...
初心者の私でもステップ１〜３までは約30分で出来ました。しかし、ステップ４の動作確認の壁が高く、最後まで完成できなかったことがとても悔しいです。エラーメッセージの意味と対処法をChatGPTに聞いて→提案された手順通りに進んでも解決せず違うエラーが出たり→HTMLが成功してもGASがエラーで...のエンドレスを約3日間続けました。（絶対頭から湯気が出ていた...)。ChatGPT先生には大変お世話になりましたが、先生も完璧ではないこと学びました。Gemini先生にも頼ってみました。Geminiは画像をアップロードしてプロンプトを作成することができます。文字だけでなく画像でより具体的にプロンプトを作成できるので、私のような初心者には合っていると思います。必ず参考資料も付けてくれますし、ChatGPTに比べると自然で人間に近い印象です。
やりたかった事
CodePenとGoogleスプレッドシートを連携させて報告アプリを作成し、誰でも簡単に報告でき、報告内容を自動でスプレッドシートに記録する。忙しくなると従業員とのコミュニケーションが不足してしまう悩みがあり、「報連相」を大事にしようね！と言いながらも、私が忙しくしていると声をかけづらいという周りの気持ちもわかります。レジミス・売価エラーだけでなく、上司に報告すべきか悩む小さなお申し出や商品不良もこの報告フォーマットを活用して気軽に報告できる環境を作りたいのです。ですのでフォーマットはtheシンプル、報告の種類はドロップダウンメニューでレジミス、売価エラー、お申し出からの選択形式にしました。集計部署では日々の伝票を1枚1枚確認し手作業で集計しており、シートに自動で記録し報告内容を一元管理できれば後方での作業効率が改善でき、売場への投入人時を増やすことができます。
リベンジしたい事
未完成のこのアプリを完成させたい！！
完成したら記事にその過程を残して、同じように苦戦している人の助けになりたい。
今後は報告フォーマットを進化させ、対策フォーマットを活用して手書きの対策書＆上司の押印文化を減らしていきたい。上司を探し回る時間を売場に投入したい。
参考資料