Webアプリ

【Webアプリ】出退勤管理アプリ③　社員毎の管理

 

次は、
「誰が出勤・退勤したか」をきちんと記録できるようにします！

つまり、
【ログインした社員の名前（メールアドレス）＋出勤・退勤時間】をFirestoreに保存する仕組みを作ります！

🔥 やることまとめ

内容ゴール
①出勤・退勤ボタンを押したときに「ログイン中のユーザー情報」も一緒に保存する
②Firestoreのデータが「社員ごと」に整理される

✏️ index.htmlを変更する

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>出退勤管理</title>
    <script src="https://www.gstatic.com/firebasejs/10.11.0/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/10.11.0/firebase-auth-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/10.11.0/firebase-firestore-compat.js"></script>
</head>
<body>
    <h1>出退勤管理アプリ</h1>

    <button onclick="recordTime('出勤')">出勤</button>
    <button onclick="recordTime('退勤')">退勤</button>

    <p id="result"></p>

    <script>
        // Firebase 設定
        const firebaseConfig = {
            apiKey: "あなたのAPIキー",
            authDomain: "あなたのauthDomain",
            projectId: "あなたのprojectId",
            storageBucket: "あなたのstorageBucket",
            messagingSenderId: "あなたのmessagingSenderId",
            appId: "あなたのappId"
        };

        // Firebase初期化
        firebase.initializeApp(firebaseConfig);
        const auth = firebase.auth();
        const db = firebase.firestore();

        // 出勤・退勤を記録する関数
        function recordTime(type) {
            const user = auth.currentUser;
            if (!user) {
                document.getElementById('result').innerText = "ユーザーがログインしていません。";
                return;
            }

            const now = new Date();
            const timeString = now.toLocaleString();

            db.collection("attendance").add({
                uid: user.uid,           // ユーザーID
                email: user.email,       // メールアドレス
                type: type,              // 出勤 or 退勤
                time: now                // 時刻
            })
            .then(() => {
                document.getElementById('result').innerText = `${type} 時刻保存成功：${timeString}`;
            })
            .catch((error) => {
                document.getElementById('result').innerText = `エラー: ${error}`;
            });
        }
    </script>
</body>
</html>

ここが変わった！

  • ログインしているユーザーの
    • uid（ユーザーID）
    • email（メールアドレス）
  • これを出勤・退勤データと一緒に保存する！

これで、
「誰が出勤したか」完璧にわかるようになります✨

おすすめ記事