【AppSheet勤怠①】アプリを作ろう！ゼロから出勤ボタンを作成
勤怠管理、皆さんはどうされていますか？？
専用のシステムを使っている会社もありますが、中小企業では、まだ打刻式のタイムカードなど主流の企業もあると思います。毎月タイムカードの用意、集計するのが大変！——そんな悩みを解決するのが、GoogleのノーコードツールAppSheet（アップシート）。
このシリーズでは、中学生にもわかる！無料からはじめる を合言葉に、出勤ボタンを押すだけで時刻が自動記録される勤怠アプリをゼロから作ります。
今回のゴール
① スプレッドシートを用意する → ② AppSheetでアプリにする → ③ 出勤／退勤ボタンで「いまの時刻」を自動保存！
1. 準備しよう（Googleスプレッドシート）
まずは台本（データの器）を用意します。Googleドライブで新規→Googleスプレッドシートを作成し、シート名を Attendance にします。
1-1. 見出し行（1行目）をこうする
| 列名 | 説明 | 型（のちほどAppSheet側で設定） |
|---|---|---|
| ID | 各行の識別子（自動採番でOK） | テキスト |
| 日付 | 打刻した日 | Date（日付） |
| ユーザー | 誰の打刻か（メールでも氏名でもOK） | テキスト |
| 出勤時刻 | 出勤ボタンを押した時の時刻 | DateTime |
| 退勤時刻 | 退勤ボタンを押した時の時刻 | DateTime |
| 備考 | メモ（遅刻理由など） | 長文 |
コツ：1行目は「見出し（ヘッダー）」です。2行目以降にデータが入ります。空行は作らないでOK。
2. AppSheetでアプリ化する
- Googleドライブの右上「アプリ」から AppSheet を開く（見つからない場合は 新しいタブで「AppSheet」検索）。
- 「Create > Start with existing data」を選び、さきほどのスプレッドシートを指定。
- テーブルに
Attendanceが自動で追加されます。右側プレビューに一覧が出ればOK。
2-1. 列の型（Type）を正しくする
左メニュー Data > Columns → テーブル Attendance を開き、各列の型を次のように設定します。
- ID：Text（Initial valueに
UNIQUEID()を入れると自動採番） - 日付：Date（Initial valueに
TODAY()を入れると自動で今日） - ユーザー：Text（サインインを使う場合は
USEREMAIL()を初期値に） - 出勤時刻：DateTime
- 退勤時刻：DateTime
- 備考：LongText
ヒント：列の「Editable?」を 出勤時刻 と 退勤時刻 は falseにすると、ボタンのみで時刻が入る“押し間違い防止”になります。
3. 出勤・退勤ボタンを作る（Action）
ボタン＝AppSheetでは Action（アクション） と呼びます。行に対して「この列にこの値を入れる」を実行できます。
3-1. 出勤ボタン（出勤時刻に現在時刻を入れる）
- 左メニュー Behavior > Actions → New Action
- For a record of this table：
Attendance - Do this：Data: set the values of some columns in this row
- Set these columns：
出勤時刻=NOW()、日付=TODAY()（任意） - Display：Prominence を Display prominently、Icon は「play_arrow」など。
Button label に 出勤 と入力。
3-2. 退勤ボタン（退勤時刻に現在時刻）
- 同様に New Action を作成。
- Set these columns：
退勤時刻=NOW() - ラベルに 退勤、アイコンは「stop」など、Prominenceは Display prominently。
ポイント：ボタンが表示されない時は、ビュー設定を確認。UX > Views でメインの一覧ビュー（Table/Deck）を開き、Event actions（Row selected）やDisplayの表示位置を確認しましょう。
4. ビュー（画面）を整える
- 左メニュー UX > Views で New View。
- View name：
勤怠一覧、For this data：Attendance。 - View type：最初は Table が見やすいです。
- Primary header に
[日付]、Subtitle に[ユーザー]を設定すると分かりやすい。 - 下部の Actions で「出勤」「退勤」アクションが目立つ位置にあるか確認。
5. スマホで試す（テスト）
- 右上の Test または Preview App を押して動作確認。
- スマホへは右上の Share → 自分のメールアドレスを追加 → 招待メールのリンクから開けばOK。
- 一覧画面の行（自分の行）で 出勤 ボタン → しばらくしてシートの
出勤時刻に時刻が入れば成功！
うまくいかないときのチェック表
- 見出しがずれていない？（1行目は列名、2行目からデータ）
- 列の型が合っている？（出勤/退勤は DateTime）
- アクションの対象テーブルは Attendance？
- 表示の目立たせ方（Prominence）が「Display prominently」？
6. 次回の予告（② 勤務時間を自動計算）
次回は、シート側で勤務時間（退勤−出勤）を自動計算し、時:分で見やすく表示する方法を解説します。
「9時間を超えたら“残業”」の考え方も、中学生にもわかる数式でゆっくり進めます。
付録：よくある質問（超カンタン版）
- Q. ボタンを押し間違えたら直せる？
A. 一時的に列の「Editable?」をtrueに戻して修正し、またfalseにすれば安全に運用できます。 - Q. だれが押したか自動で入れたい。
A. Initial value にUSEREMAIL()。アプリの User sign-in を有効にしておくと確実です。 - Q. 日付と時刻を同時に入れたい。
A. 日付はTODAY()、時刻はNOW()を使い分けます。まとめてアクションで設定可能です。
© 2025 Wataboushi. All Rights Reserved.
コメント