Webアプリ

【Webアプリ】出退勤管理アプリ④　管理画面作成

 

次は【管理者が、全社員の出退勤履歴を一覧で見る画面】を作ります。

これで

  • 「誰が」
  • 「何時に」
  • 「出勤・退勤したか」

を管理者が一覧で見れるようにします。

🛠 やること

  • 新たに「admin.html」を作成する
  • Firestoreから attendance コレクションを読み取る
  • 表形式（テーブル）で画面に表示する

admin.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-firestore-compat.js"></script>
</head>
<body>
    <h1>出退勤履歴一覧</h1>

    <table border="1">
        <thead>
            <tr>
                <th>メールアドレス</th>
                <th>出勤/退勤</th>
                <th>時間</th>
            </tr>
        </thead>
        <tbody id="attendanceList">
        </tbody>
    </table>

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

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

        // attendanceコレクションからデータ取得
        db.collection("attendance").orderBy("time", "desc").get()
            .then((querySnapshot) => {
                const list = document.getElementById('attendanceList');
                querySnapshot.forEach((doc) => {
                    const data = doc.data();
                    const tr = document.createElement('tr');

                    const emailTd = document.createElement('td');
                    emailTd.textContent = data.email;

                    const typeTd = document.createElement('td');
                    typeTd.textContent = data.type;

                    const timeTd = document.createElement('td');
                    timeTd.textContent = new Date(data.time.seconds * 1000).toLocaleString();

                    tr.appendChild(emailTd);
                    tr.appendChild(typeTd);
                    tr.appendChild(timeTd);
                    list.appendChild(tr);
                });
            })
            .catch((error) => {
                console.error("エラー:", error);
            });
    </script>
</body>
</html>

✨実装すると

実装するとブラウザに下記のように表示されます！

メールアドレス出勤/退勤時間
example@xxx.com出勤2025/04/26 09:00
example@xxx.com退勤2025/04/26 18:00
another@xxx.com出勤2025/04/26 09:10

社員の出退勤記録が一覧で見えるようになります！👀✨

おすすめ記事