制作物へ戻る Tatsuki Portfolio

Works / Web System

シフト提出
システム

約30名が使うシフト提出を、スマートフォンから迷わず完了できる仕組みへ。 現場に残る運用まで考えて設計したWebアプリです。

利用対象
約30
1回の入力時間
2 30
データ構成
4ファイル

01

アプリケーションの概要

従業員がスマートフォンから1か月分のシフト希望を提出し、自分の提出内容やPT申請履歴を確認できるWebアプリです。従業員IDによるログイン、初回パスワード登録、下書き保存、希望の再提出にも対応しています。

店長やエリア管理者は、使い慣れたGoogleスプレッドシート上で調整と確定作業を行います。従業員の入力画面だけを使いやすくしながら、管理者側の運用を大きく変えない構成にしました。

担当範囲

課題整理、要件定義、画面設計、データ設計、実装、動作確認

02

創った背景

アルバイト先では、約30名の従業員が1つのGoogleスプレッドシートへ直接シフト希望を入力していました。スマートフォンでは表を操作しにくく、他の従業員の入力欄を誤って触ることもありました。

月別・店舗別のシートが増えて必要な情報が埋もれることも課題でした。そこで、従業員は自分専用の画面から入力し、管理者は既存のスプレッドシートを使い続けられる仕組みを作りました。入力時間は1人あたり約2分から約30秒まで短縮しました。

Before 全員が同じ表へ直接入力

スマホ操作と誤入力に課題

After 個人専用のWeb画面から送信

短時間で迷わず提出

03

技術スタック

Backend

Google Apps Script

認証、入力検証、保存、管理用シートへの反映

Data

Google Sheets

マスタ、希望提出、PT申請、確定シフト、変更履歴

Frontend

HTML / CSS / JavaScript

スマートフォン向け入力画面と操作処理

Bridge

google.script.run

画面からApps Scriptの処理を呼び出す連携

04

技術選定の理由

今ある業務へ無理なく導入する

もともとGoogleスプレッドシートを使っていたため、新しい管理サービスへ移行せず導入できるGoogle Apps Scriptを選びました。

引き継ぎ後もコードを書かずに管理する

店舗や従業員の追加はマスタ用シートから行えます。プログラミング知識のない担当者でも日常運用を続けられることを優先しました。

データの役割を分ける

データを1か所へ集中させず、全体確認・DB管理・エリア確認・提出ログの4ファイルへ分割しました。

05

工夫した点

01

スマホで迷わないカード型入力

1か月分の希望を日付ごとのカードで表示。ログイン後は本人の名前に固定し、他人の名義で提出するミスを防ぎました。

02

画面とサーバーの二重検証

開始・終了時刻などを画面側とApps Script側の両方で確認します。提出や入力クリアの前には確認画面を挟みます。

03

運用担当者が保守できるマスタ設計

エリア、店舗、従業員、所属先をスプレッドシートで管理し、人員の増減をコード変更なしで反映できます。

04

認証情報を平文で残さない

パスワードは従業員ごとのソルトを使ったハッシュで保存。連続失敗時の一時停止とセッション期限も設けました。

06

現時点の改善点

  • 01

    従業員向け画面から確定シフトを確認できる機能を追加する。

  • 02

    通常シフトの受付状態を、再公開せず管理画面から切り替えられるようにする。

  • 03

    ローカルの修正とApps Script側の反映を自動化し、更新漏れを防ぐ。

  • 04

    実運用後に管理者の集計時間と入力ミスを測り、改善効果を検証する。

07

公開画像・URL

実データをダミー情報へ置き換えたうえで、公開後の画面とURLを掲載します。

公開画面を準備中 画像URL:未設定
Webアプリを開く(準備中)