位置情報付きタイムカードをGoogleフォームで作成

Google Formを活用したタイムカードシステムのご紹介

現代のビジネスシーンにおいて、効率的な労働時間管理は不可欠です。そこで、Google Formを活用したタイムカードシステムをGoogle Formで作成し、従業員の出退勤管理をシンプルかつ効果的に行えるようにしました。

位置情報付きGoogleフォームのタイムカードのメリット

正確な勤務時間の把握:

位置情報により、従業員が実際に指定された勤務地で出退勤しているか確認でき、不正な打刻を防止できます。

リモートワークや現場作業の管理向上:

従業員がどこで仕事をしているかを正確に把握できるため、リモートワークや外回りの作業の管理が容易になります。

簡単な導入と運用:

Googleフォームは無料で利用でき、特別な機器やソフトウェアの導入が不要です。

データの自動集計:

Googleフォームとスプレッドシートを連携させることで、出退勤データを自動的に集計・管理できます。

アクセスの柔軟性:

インターネット環境があれば、スマートフォンやタブレットなどのデバイスからいつでもどこでも打刻が可能です。

位置情報付きGoogleフォームのタイムカードのデメリット

プライバシーの懸念:

従業員の位置情報を取得するため、プライバシーに関する懸念が生じる可能性があります。従業員の同意が必要です。

位置情報の精度:

GPSの精度や電波状況によっては、位置情報が正確に取得できない場合があります。

セキュリティリスク:

Googleフォームにアクセスできるデバイスが不正に使用された場合、位置情報や出退勤情報が漏洩するリスクがあります。

データの信頼性:

他の人が代わりに入力することが可能なため、実際の出退勤状況とデータが一致しない可能性があります。

インターネット依存:

インターネット接続が必要なため、通信環境が不安定な場所や状況では打刻が難しくなる可能性があります。

Google Formの作成

最初にタイムカードをGoogle Formで作成しましょう。

氏名、緯度、経度は記述式に、出退勤はラジオボタンで出勤と退勤として作成してください。

送信をクリックしてください。

リンクをコピーして、Googleの検索でペーストして開いてください。

実際に表示させて確認してみましょう。

Google Apps Script

次にGoogle Apps Scriptの作成です。

コード.gs

コード.gsは下記の通りにしてください。

function doGet() {
   return HtmlService.createTemplateFromFile('timerecord.html').evaluate();
}

HTMLファイルの追加

HTMLファイルを追加しましょう。ここでは timerecord.htmlとしています。

コードは下記のように作成しましょう。

<!DOCTYPE html>
<html>
<head>
    <title>Google Form with Location</title>
    <script>
        function submitForm() {
            // ユーザーの位置情報を取得する
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(sendDataToGoogleForm, handleError);
            } else {
                alert("Geolocation is not supported by this browser.");
            }
        }

        function sendDataToGoogleForm(position) {
            // 位置情報を取得
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;

            // 出勤/退勤の選択を取得
            var attendance = document.querySelector('input[name="attendance"]:checked').value;

            // GoogleフォームのURL（フォームIDは適宜変更してください） form action
            var googleFormUrl = "https://docs.google.com/forms/u/0/d/e/フォームID/formResponse";

            // フォームデータを作成 entry.number "<input type="hidden" name="entry.number"value>
            var formData = new FormData();
            formData.append("entry.number1", document.getElementById("name").value); // 名前のエントリーIDを追加
            formData.append("entry.number2", attendance); // 出勤/退勤のエントリーIDを追加
            formData.append("entry.number3", latitude); // 位置情報のエントリーIDを追加
            formData.append("entry.number4", longitude); //位置情報
            // フォームを送信
            var xhr = new XMLHttpRequest();
            xhr.open("POST", googleFormUrl, true);
            xhr.send(formData);

            xhr.onload = function () {
                if (xhr.status === 200) {
                    alert("Form submitted successfully!");
                } else {
                    alert("Failed to submit the form.");
                }
            };
        }

        function handleError(error) {
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    alert("User denied the request for Geolocation.");
                    break;
                case error.POSITION_UNAVAILABLE:
                    alert("Location information is unavailable.");
                    break;
                case error.TIMEOUT:
                    alert("The request to get user location timed out.");
                    break;
                case error.UNKNOWN_ERROR:
                    alert("An unknown error occurred.");
                    break;
            }
        }
    </script>
</head>


<body>
    <h1>Submit Form with Location</h1>
    <form onsubmit="event.preventDefault(); submitForm();">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        <br><br>

        <label for="attendance">Attendance:</label>
        <input type="radio" id="attendance" name="attendance" value="出勤"> Check-in
        <input type="radio" id="attendance" name="attendance" value="退勤"> Check-out

       
        <br><br>
        <button type="submit">Submit</button>
    </form>
</body>
</html>