位置情報付きタイムカードを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().addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

ここではdoGet関数を使っています。この関数を使うと、GASでWEBサイトを作成して表示することができます。

GASのコードを書いて、デプロイした際に決められたURLにアクセスすると、doGet(){ 　　}関数の内容が実行されます。ここではtimerecord.htmlが実行されることになります。

.addMetaTag(‘viewport’, ‘width=device-width, initial-scale=1’)は、スマートフォンで使いやすいようにレスポンシブ対応のためです。

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); //経度情報のエントリーIDを追加
 
           // フォームを送信
            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>

フォームIDの確認

フォームIDは、ご自分で作成したGoogleフォームのアドレスをコピーしてペーストしてください。

https://docs.google.com/forms/d/Form_ID/editのForm＿IDです。

entry.numberの確認

entry.numberは、Google Chromeであればデベロッパーツールを使用します。

Windowsであれば、Ctrl＋F キーを押すと検索バーが表示されます。

デベロッパーツール内で該当の入力フィールド（テキストボックスや選択肢など）に対応するHTMLコードを探してください。

<input> タグや <textarea> タグの中に name="entry.XXXXXXX" の形式で表示される値が entry.number です。

検索で”entry.”と入力してGoogle Formのコードの中を探してください。

このように、entry.XXXXXXXXXとなっています。

デプロイ

デプロイしてできたリンクをコピーして、ブラウザーで表示させて入力してみましょう。

スプレッドシートで確認

Google Formで回答をスプレッドシードで表示させてみましょう。うまくいったら、このようになります。

緯度経度から住所を表示する

緯度経度の情報から住所を表示させることもできます。

カスタム関数の作成

回答のスプレッドシートを開いて、拡張機能からApps Scriptを開いてください。

 function getAddress(lat, long)
{
    
  var response = Maps.newGeocoder().reverseGeocode(lat, long);
  var address = "";
  
  if (response.status == 'OK')
    address = response["results"][0]["formatted_address"];
  
  return address;
}