01
アプリケーションの概要
従業員がスマートフォンから1か月分のシフト希望を提出し、自分の提出内容やPT申請履歴を確認できるWebアプリです。従業員IDによるログイン、初回パスワード登録、下書き保存、希望の再提出にも対応しています。
店長やエリア管理者は、使い慣れたGoogleスプレッドシート上で調整と確定作業を行います。従業員の入力画面だけを使いやすくしながら、管理者側の運用を大きく変えない構成にしました。
制作前は、約30名の従業員が1つの表へ直接入力していました。スマートフォンではセルを選びにくく、他の人の入力欄を誤って触ることもあったため、本人の入力だけに集中できるWeb画面へ置き換えました。
課題整理、要件定義、画面設計、データ設計、実装、動作確認
02
主要ユースケースと設計意図
中心に置いたのは、勤務の合間や移動中でも、従業員が自分の希望だけを短時間で提出できる体験です。
誰が
約30名の従業員
普段の操作端末はスマートフォン。表計算ソフトの詳しい操作経験は前提にしません。
どんな場面で
毎月の希望提出期間に
勤務の休憩中や移動中など、短い時間でも1か月分を入力し、必要なら下書きから再開します。
何をするのか
希望日時を選び、確認して提出
従業員IDでログインし、日付ごとのカードから希望を選択。送信後は自分の提出内容を確認します。
03
画面・比較・構成図
個人情報を含む実画面は掲載せず、設計した操作と情報の流れが伝わるよう、ダミーデータを使った図で再構成しています。
Finished screen
完成画面のイメージ
Before / After
提出体験の比較
Before
共有の表へ直接入力
- 月別・店舗別のシートを探す
- 自分の行と日付の列を合わせる
- 小さなセルへ希望を入力する
他の人の欄に触れる不安があり、入力は約2分。
After
本人専用の画面から提出
- 従業員IDでログインする
- 日付カードから希望を選ぶ
- 内容を確認して提出する
自分の希望だけに集中でき、入力は約30秒。
System architecture
システム構成
- User 従業員 スマートフォンから希望を入力
- Interface HTML / CSS / JavaScript カード表示と入力内容の事前確認
- Bridge google.script.run 画面からサーバー処理を呼び出す
- Backend Google Apps Script 認証、再検証、保存処理を実行
- Data Google Sheets マスタ、提出内容、履歴を管理
04
技術スタック
Google Apps Script
認証、入力検証、保存、管理用シートへの反映
Google Sheets
マスタ、希望提出、PT申請、確定シフト、変更履歴
HTML / CSS / JavaScript
スマートフォン向け入力画面と操作処理
google.script.run
画面からApps Scriptの処理を呼び出す連携
05
技術選定の理由
「使った技術」だけでなく、現場の要件と比較した代替案を基準に選定しました。
Backend
Google Apps Script
- 要件・制約
- 管理者のGoogle中心の業務を変えず、個人開発で新たなサーバー契約や常時監視を増やさないこと。
- 比較した代替案
- Node.jsとFirebase、またはSupabaseを組み合わせた独立Webアプリ。
- 選んだ理由
- スプレッドシートを直接扱え、Webアプリの公開から保存処理までGoogle環境内で完結します。約30名規模の利用に対し、構築と保守の負担を抑えられると判断しました。
Data
Google Sheets
- 要件・制約
- 店長がコードを書かずに従業員・店舗を更新し、提出状況を目視で確認できること。
- 比較した代替案
- Firestoreやリレーショナルデータベースと、専用の管理画面を新設する構成。
- 選んだ理由
- 現場が使い慣れた並べ替えや絞り込みをそのまま使えます。データの混在を避けるため、全体確認・DB管理・エリア確認・提出ログの4ファイルへ役割を分けました。
Frontend / Bridge
Vanilla JS + google.script.run
- 要件・制約
- スマートフォン向けの入力画面を軽く保ち、Apps ScriptのHTML Service内で配信・更新できること。
- 比較した代替案
- ReactやNext.jsを別環境へ配置し、REST APIを介してデータを送る構成。
- 選んだ理由
- 画面数と状態管理が限定的なため、ビルド工程を持たないHTML・CSS・JavaScriptで十分でした。google.script.runなら別APIを公開せず、成功・失敗を受け取りながらApps Scriptの処理を呼び出せます。
06
工夫した点
スマホで迷わないカード型入力
1か月分の希望を日付ごとのカードで表示。ログイン後は本人の名前に固定し、他人の名義で提出するミスを防ぎました。
画面とサーバーの二重検証
開始・終了時刻などを画面側とApps Script側の両方で確認します。提出や入力クリアの前には確認画面を挟みます。
運用担当者が保守できるマスタ設計
エリア、店舗、従業員、所属先をスプレッドシートで管理し、人員の増減をコード変更なしで反映できます。
認証情報を平文で残さない
パスワードは従業員ごとのソルトを使ったハッシュで保存。連続失敗時の一時停止とセッション期限も設けました。
07
現時点の改善点
- 01
従業員向け画面から確定シフトを確認できる機能を追加する。
- 02
通常シフトの受付状態を、再公開せず管理画面から切り替えられるようにする。
- 03
ローカルの修正とApps Script側の反映を自動化し、更新漏れを防ぐ。
- 04
実運用後に管理者の集計時間と入力ミスを測り、改善効果を検証する。