勤怠打刻システム（LIFF版）仕様書 v1.0

アプリ名：TimeCard

概要

本システムは、LINEのLIFFとGoogle Apps Script（GAS）を活用して、NFCまたはQRコードをトリガーにスマホから出退勤を記録できるシステムです。位置情報を取得し、許可されたエリア内からのみ打刻が可能です。

iPhoneX以上、Androidは未検証。LINEを利用しているユーザが対象。ユーザIDとユーザ名を取得します。任意で位置情報も取得します。出勤する場所（GPS情報）を中心に半径50ｍの誤差を許容します。

ご要望により、出勤する場所や、出退勤時に位置情報を不要にすることも可能です。

管理者はスプレットシートで出勤/退勤の時刻と、位置情報を一覧で管理します。

出勤時刻から退勤時刻までの時間を集計し、名前毎にシートを作成し、1ヵ月の勤務時間合計を算出します。

 

ユーザは、iPhoneX以上のスマホを、NFCタグにかざすだけです。出勤用のタグと、退勤用のタグの2つが必要です。

NFCタグは市販されているものに特定のURLを書き込むだけです。

（※中央にあるQRコードは、LINEアカウント追加用ですが、初回も毎度もQRコードを読み込む必要はありません。念のために用意しただけです。）

使用技術

• フロントエンド：HTML / JavaScript / LIFF SDK
• バックエンド：Google Apps Script（GAS）
• データ保存先：Google スプレッドシート「勤怠データ」シート
• 位置情報取得：HTML5 Geolocation API（スマホ限定）

URL・ID一覧

• LIFF ID：2099999999-xxxxxxxx
• GAS URL：https://script.google.com/macros/s/xxxxxxxxxxxxxxxxxxxxxxxxxxxx/exec
• 起動URL例：https://liff.line.me/2099999999-xxxxxxxx?abc=123

処理の流れ

1. NFCまたはQRコードから上記URLにアクセス
2. LIFFによるLINEログイン（userId / displayNameを取得）
3. 位置情報を取得し、許可エリア（高崎市鞘町20-1）との距離を判定
4. 半径50m以内であれば出退勤データをGASへPOST
5. GASがスプレッドシートへ記録（日時、ID、名前、ステータス、位置リンク）
6. 成功時に画面表示＋ウィンドウ自動クローズ（3秒後）

送信データ例

{
  "userId": "Uxxxxxx",
  "displayName": "山田太郎",
  "datetime": "2025-04-22T09:24:00.000Z",
  "type": "out",
  "location": "https://www.google.com/maps?q=36.32xxx,139.00xxx"
}

スプレッドシート記録内容

日時	ユーザーID	名前	ステータス	位置情報
2025/04/22 09:24	Uxxxxxx	山田太郎	out	地図で見る

ステータスメッセージ一覧

• 出勤成功：出勤完了！ このウィンドウはまもなく閉じます。
• 退勤成功：退勤完了！ 今日もお疲れさまでした。 このウィンドウはまもなく閉じます。
• エリア外：許可されたエリア外からのアクセス（距離表示） 出勤/退勤処理はエリア外として記録。
• 位置情報取得失敗：位置情報の取得に失敗しました。位置情報アクセスを許可してください。

セキュリティと制限

• no-cors のため fetch レスポンスは取得不可
• スマホの位置情報許可が必要（初回アクセス時に確認）
• PCでは動作不可（スマホ専用）

推奨環境について

• NFCが読めるスマホ（iPhoneXより古いとダメかも。2018年以降のものならたぶんOK）
• LINEのアカウントでなりすましを防止（ユニークを特定）しているためLINE必須。
• Androidは対象外（未検証）。（※iPhoneSE第3世代、iOS18.3.2で動作確認済み）