こんにちは！スタッフのやまさきです。
今回は久しぶりにコードを触ってWebアプリを作成しました。
めっちゃ楽しかったです！
知識ゼロから作成して、４時間ほどかかりましたー
デジタルスタジオでは、これまでキッチンタイマーを使ってPCやゲーム機の利用時間を管理していましたが、運用上いくつかの課題がありました。
本記事では、その課題解決のために開発した「タイマー管理Webアプリ」について、設計からデプロイまでの流れをまとめます。
プロジェクトの背景
スタジオ内では複数のPC・Xboxを時間制で利用していますが、従来のキッチンタイマー運用には以下の問題がありました。
- 利用者がタイマーを誤って停止してしまう
- スタッフが利用者の近くに行かないと残り時間が把握できない
- 複数端末の同時管理が困難
これらを解決するため、Webアプリによる一元管理システムの開発を行うことにしました。
今回のシステムの目的
- PC / Xboxの利用時間をリアルタイムで管理
- 大型モニタに残り時間を表示
- 管理画面と表示画面を分離
- Firestoreによるリアルタイム同期
- 現場でそのまま使える運用レベルの実現
技術スタック
- Next.js（フロントエンド）
- Firebase Hosting（公開環境）
- Firestore（リアルタイムデータベース）
- React（UI構築）
特にFirebaseを採用した理由は、サーバー管理不要でリアルタイム同期が実現できる点です。
Firebaseプロジェクトの初体験
今回初めてFirebaseプロジェクトを本格的に利用しました。
Firestoreを使うことで、サーバーを構築せずにデータ同期ができる点は非常に強力でした。
devicesコレクションに各機器の状態（開始時間・終了時間・ステータス）を保存し、リアルタイムで更新される仕組みを構築しました。
アプリ構成
管理画面（admin）
- 利用開始
- 延長
- 一時停止
- 再開
- 終了処理
表示画面（display）
- 残り時間の表示
- 状態の色分け表示
- 終了時のアラート表示
■ ローカル開発とテスト
まずはローカル環境でNext.jsとFirestoreを接続し、UIの動作確認を行いました。
この段階で、リアルタイム更新やタイマー表示の基本動作を検証しました。
Firebase Hostingへのデプロイ
本番環境はFirebase Hostingを利用しました。 静的ファイルとしてNext.jsをビルドし、outフォルダをそのままデプロイしています。
基本手順は以下の通りです。
- Next.jsをbuild
- next exportで静的化
- Firebase Hostingへデプロイ
つまずいたポイント
開発中はいくつかの問題に直面しました。
- Vercelの初期テンプレート画面が表示される
- display画面が正しくルーティングされない
- Firebase Hostingへの反映遅延
- outフォルダの生成ミス
特に「どの環境を見ているのか分からなくなる」という問題は非常に重要な学びでした。
生成AIとの開発
今回の開発では、設計・実装・デバッグのほぼ全工程で生成AIを活用しました。
特に以下の用途で有効でした。
- アーキテクチャ設計の相談
- Firestore構造の設計
- UI構成の改善
- エラー原因の特定
AIは単なるコード生成ツールではなく、設計パートナーとして機能しました。
完成したシステム
- admin画面：操作用UI
- display画面：表示専用UI
- Firestore：リアルタイム同期
- タイマー制御（開始・延長・停止・再開）
現場でそのまま運用できるレベルまで完成しました。
得られた学び
- Firebaseは構造設計が最重要
- 静的ホスティングの理解が必要
- 状態設計がUI品質を決める
- 小さく作って検証する重要性
- AIを使った開発は設計スピードを大きく向上させる
今後の改善
- 利用履歴の保存
- 音・通知の強化
- UIの改善
- 認証機能の追加
まとめ
今回のプロジェクトは、小さな現場課題から始まりましたが、結果としてFirebaseとNext.jsを活用した実用的なシステムに発展しました。
特に、生成AIと組み合わせた開発は、試行錯誤のスピードを大きく改善し、実装のハードルを下げる効果がありました。
今後も現場改善と連動したシステム開発を継続していきます。
Firebaseの使い方メモはこちらの投稿から
