Webアプリ

【Webアプリ】出退勤管理アプリ①　基礎コード

  /
Contents
  1. 社員管理アプリ
  2. 出退勤管理アプリ　基礎コード
  3. 解説

社員管理アプリ

社員の出退勤を管理するアプリを段階的に作っていきたいと思います。

目標とするステップは下記とします。

ステップ内容ゴール
①社員ごとにログインできるようにする「自分の名前」でログインできる
②社員ごとに出勤/退勤を記録する誰がいつ出勤・退勤したかがわかる
③管理者が全社員の記録を一覧で見れる社員の出退勤状況を管理者が確認できる

出退勤管理アプリ　基礎コード

<!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>

    <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 db = firebase.firestore();

        function recordTime(type) {
            const now = new Date();
            const timeString = now.toLocaleString();

            db.collection("attendance").add({
                type: type,
                time: now
            })
            .then(() => {
                document.getElementById('result').innerText = `${type} 時刻保存成功：${timeString}`;
            })
            .catch((error) => {
                document.getElementById('result').innerText = `エラー: ${error}`;
            });
        }
    </script>
</body>
</html>

解説

はい！このコードをわかりやすく順番に解説しますね👇

【全体像】

これは「出勤」「退勤」ボタンを押すと、
そのときの時刻と押したボタンの種類を、
Firebase Firestore（クラウド上のデータベース）に記録する、
シンプルな「出退勤管理アプリ」のコードです！

【パーツごとの説明】

1. HTML基本構成

<!DOCTYPE html>
<html lang="ja">

→ 日本語向けのWebページですよ、という宣言。

<head> ... </head>

→ ページの設定部分。ここでFirebaseのライブラリを読み込んでます。

<body> ... </body>

→ 実際に画面に表示される部分です。

2. Firebaseのライブラリを読み込み

<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>

→

  • 1個目：Firebaseアプリ本体を使えるようにします。
  • 2個目：Firestore（データベース）を使えるようにします。

3. Firebaseの設定

const firebaseConfig = { ... };

→
Firebaseプロジェクトをこのアプリと紐づけるための「カギ」です！
（APIキーやプロジェクトIDが入っています）

4. Firebaseの初期化

firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();

→
ここで、実際にFirebaseと接続して、
db という変数で Firestoreデータベース を使えるようにしています。

5. ボタンを押したときの動作

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

→

  • 「出勤」ボタンを押したら recordTime('出勤') を実行
  • 「退勤」ボタンを押したら recordTime('退勤') を実行

6. 時刻を保存する関数

function recordTime(type) { ... }

中身はこんな流れ👇

  1. 今の時間を取得する
  2. Firestoreのattendanceコレクションに
    type（出勤or退勤）と時間を保存する
  3. 成功したら「保存成功！」メッセージを画面に表示
  4. エラーが起きたら「エラー内容」を表示

【まとめ】

このコードを実行すると：

  • 出勤ボタン→今の時刻が「出勤」として保存される
  • 退勤ボタン→今の時刻が「退勤」として保存される

保存されたデータはFirebase Firestoreにどんどんたまっていきます！

おすすめ記事