Webアプリ公開事例

らくログタスク

作業時間管理Webアプリ

Next.jsとSupabaseで構築した、出勤・退勤・作業時間の記録と集計を行うWebアプリです。

アプリを見る使い方ページを見る

概要

作業開始・終了の記録、日別・月別の集計、タスク別の可視化を行うためのWebアプリです。

認証、カレンダー表示、色管理、通知、初回ガイドなど、業務アプリでよく必要になる機能を組み合わせています。

このTech Blogでは、実装時に得られたNext.js、Supabase、UI実装、セキュリティ確認のノウハウを記事化しています。

使用技術

Next.jsSupabaseVercelOAuthTailwind CSS

実装・設計のポイント

Supabase Authを使ったログイン制御
作業時間をカレンダー・グラフ・一覧で確認できるUI
タスク色をアプリ全体へ反映する設計
初回利用時のガイドとトースト通知
Vercel運用時のセキュリティ確認

関連する技術記事

前回作業日の未完了データを入口画面で補正するUI

修正フォームの近くに参考情報を表示するUI

Supabase OAuth後にcallback routeを挟む

公開アプリ更新時にREADME・仕様書・画面導線を揃える

Next.js App RouterとSupabase Authでミドルウェア認証ガードを実装する方法

useRefとmousedownでドロップダウンを外側クリックで閉じる方法

ライブラリ不要でトースト通知を実装する方法

HEXカラーコードをRGBAへ変換して動的カラーを適用する方法

同様の業務アプリ開発について

現場ごとの入力項目、帳票レイアウト、保存先フォルダ、承認フローに合わせた GAS・Webアプリ・Excel VBAの業務改善ツール開発に対応しています。