【Codex × GAS】ブラウザだけで社内出退勤システムを作った話。Googleアカウントで自動識別・Spreadsheet記録まで。
前回の記事では、CodexをブラウザだけでセットアップしてGitHubリポジトリに接続するところまで解説しました。
今回はいよいよ実践編です。
そのCodex環境を使って、実際に社内で使える出退勤システムを作ります。
しかも、
- 社員番号の入力は不要
- Googleアカウントにログインしていれば自動で打刻者を識別
- 記録はGoogle Spreadsheetにリアルタイム保存
- インストール不要・全部無料
という、かなり実用的な構成です。
前回の記事はこちら：
【Codex】ダウンロード不要。ブラウザだけでAIコーディングエージェントを使い始める方法
📋 目次
- 今回作るもの
- システム構成と使用技術
- 必要なもの
- Step 1. Google Spreadsheetを準備する
- Step 2. Google Sitesを準備する
- Step 3. CodexでGASコードを生成する
- Step 4. GASにコードを貼り付けてデプロイする
- Step 5. Google SitesにUIを埋め込む
- Step 6. 動作確認する
- 実際にハマったポイント
- まとめ
今回作るもの
社内出退勤打刻システムです。
機能はシンプルに絞りました。
- 出勤ボタンを押す → Spreadsheetに記録
- 退勤ボタンを押す → Spreadsheetに記録
- 打刻者はGoogleアカウントのメールで自動識別
- 社員番号・名前の入力は不要
「シンプルすぎない？」と思うかもしれませんが、これがCodexとの相性が一番良い題材です。
実務でも「まず動くものを作って、後から機能を足す」が正解です。
システム構成と使用技術
今回のシステムはこんな構成です。
社員のブラウザ（Googleアカウントでログイン済み）
↓
Google Sites（公開ページ・ボタンUI表示）
↓
GAS Webアプリ（ボタンUI + 打刻処理）
↓
Google Spreadsheet（打刻記録）
使用技術はこちら。
| 役割 | 技術 | 理由 |
|---|---|---|
| 公開ページ | Google Sites | 組織内限定公開が簡単 |
| ボタンUI | GAS HTML | Sitesに埋め込める |
| 打刻処理 | Google Apps Script | Spreadsheetと直接連携できる |
| データ保存 | Google Spreadsheet | そのまま管理台帳になる |
| コード生成 | Codex | 今回の主役 |
なぜGoogle Sitesを使うのか
Google Sitesは「<script>タグを直接埋め込めない」という制約があります。
そのため、GASでUIごと作ってWebアプリとしてデプロイ → Sitesに埋め込むという構成にしています。
GASが「UIの表示」と「Spreadsheetへの書き込み」の両方を担当するイメージです。しかも全部無料です。
なぜ社員番号入力が不要なのか
GASの Session.getActiveUser().getEmail() という機能を使います。
Google Workspaceの組織アカウントでログインしていれば、ボタンを押したユーザーのメールアドレスを自動で取得できる機能です。
入力の手間がなく、なりすましも防げます。
必要なもの
| 必要なもの | 備考 |
|---|---|
| Google Workspaceアカウント | 組織のアカウント必須（メール自動識別のため） |
| Codex（前回セットアップ済み） | GitHubリポジトリも接続済みであること |
| ブラウザ | Chrome推奨 |
Step 1. Google Spreadsheetを準備する
まず打刻データの保存先を作ります。
Google Driveで新規Spreadsheetを作成して、1行目に以下の列を入力してください。
| A列 | B列 | C列 | D列 |
|---|---|---|---|
| メール | 日付 | 種別 | 時刻 |
ポイント： シート名はデフォルトの「シート1」を 「打刻記録」 に変更しておいてください。後でGASのコードと自動的に対応します。
Step 2. Google Sitesを準備する
次に社員が実際にアクセスするページを作ります。
新規サイトを作成する
Google Siteで 空白のサイト を選択します。
ページを編集する
サイトの編集画面が開きます。
タイトルを入力しておきましょう。今回は「社内出退勤システム」にしました。
⚠️ この段階ではまだUIは埋め込みません。
GASのデプロイが完了してからURLを埋め込みます。このままStep 3へ進んでください。
Step 3. CodexでGASコードを生成する
ここが今回の核心です。
Codexを開いて、前回接続したリポジトリを選択します。
プロンプトを入力する
以下のプロンプトをそのままコピーして入力してください。
Google Apps ScriptのWebアプリとして動作する
出退勤打刻UIを作成してください。
【ファイル構成】
- index.html（UI）
- Code.gs
【UI要件】
- 出勤ボタン・退勤ボタン
- ローディング表示
- 送信完了トースト表示
- モダンダークUI
- スマホ対応
【GAS要件】
- HTMLを返してSpreadsheetに記録までする
- 記録内容：メールアドレス・日付・種別（出勤/退勤）・時刻
- メール自動取得
【Spreadsheet列】
| メール | 日付 | 種別 | 時刻 |
シート名は「打刻記録」
ポイント： プロンプトはシンプルに書く方が、Codexが余計な実装を追加せず意図通りのコードを生成してくれます。
Codexが生成を開始する
送信するとCodexがサーバー上で作業を開始します。
しばらく待つと、index.html と Code.gs の2ファイルが生成されます。
クリックするとコードの内容が確認できます。
ここがCodexの面白いところ。
プロンプトを投げるだけで、UIからバックエンド処理まで一気に生成してくれます。
「指示を出す人」と「実装する人」が分業できる感覚です。
PRを作成してGitHubに保存する
生成が完了したら 「PRを作成する」 をクリックします。
PRとは何か？
PR（プルリクエスト）とは、Codexが生成したコードをGitHubのリポジトリに保存するための仕組みです。
「AIが書いたコードをGitHubに提出する」イメージで、以下の流れで行われます。
Codexがコードを生成
↓
PRとしてGitHubへ提出
↓
確認・承認（マージ）
↓
リポジトリに保存完了
確認画面が表示されます。
「Merge pull request」 をクリックします。
「Confirm merge」 をクリックします。
⚠️ 今回はGASに直接コードを貼り付けるため、GitHubのコードはあくまでバックアップとして活用します。
Step 4. GASにコードを貼り付けてデプロイする
Codexが生成したコードをGASに移します。
GASエディタを開く
Step 1で作成したSpreadsheetを開き、
拡張機能 → Apps Script
をクリックします。
編集画面が表示されます。青いお知らせはXをクリックして閉じます。
ポイント： SpreadsheetからApps Scriptを開くことで、SpreadsheetのIDを設定する必要がありません。GASが自動的にそのSpreadsheetを認識します（コンテナバインド）。
コードを貼り付ける
Code.gs：
Codexが生成した Code.gs の内容をそのまま貼り付けます。
保存ボタンをクリックして保存します。この時点でプロジェクト名を変更してもよいです。
index.html：
左側の「＋」ボタンから index.html ファイルを追加して、Codexが生成した内容を貼り付けます。
保存ボタンを忘れずに。
デプロイする
右上の 「デプロイ」→「新しいデプロイ」 をクリックします。
設定は以下の通りにしてください。
| 項目 | 設定値 |
|---|---|
| 種類 | ウェブアプリ |
| 説明 | 任意（例：出退勤システムv1） |
| 次のユーザーとして実行 | ウェブアプリにアクセスしているユーザー |
| アクセスできるユーザー | 組織内ユーザーのみ |
⚠️ ここが最重要ポイントです。
「次のユーザーとして実行」を**「ウェブアプリにアクセスしているユーザー」**にしないと、メールアドレスが取得できません。
「デプロイ」 をクリックすると、WebアプリのURLが発行されます。
このURLをコピーしておいてください。次のステップで使います。「デプロイの管理」からいつでも確認できます。
Step 5. Google SitesにUIを埋め込む
Step 2で準備したGoogle Sitesに戻ります。
埋め込みを追加する
ページ編集画面で 「挿入」→「埋め込む」 を選択します。
GASのURLを入力する
「URLで埋め込む」タブを選択して、Step 4でコピーしたWebアプリURLを入力します。
「挿入」 をクリックするとページにUIが埋め込まれます。
ポイント： この編集画面のプレビューではボタンを押せません。公開後に動作確認します。
サイトを公開する
右上の 「公開」 をクリックします。
URLの末尾（サイト名）を設定して公開します。表示されるURLはコピーして控えておきましょう。
公開範囲は 「組織内のユーザー」 になっていることを確認してください。
これで社内のGoogleアカウントを持つ社員だけがアクセスできる出退勤システムの完成です。
Step 6. 動作確認する
公開されたGoogle SitesのURLを開いてみましょう。
初回アクセス時の権限承認
初めてURLを開くと、権限承認ダイアログが表示されます。
「(Unverified)」と表示されますが、これは正常です。
自分で作成した社内アプリはGoogle審査を受けていないため、このような表示になります。エラーではありません。
以下の手順で承認してください。
- 「REVIEW PERMISSIONS」 をクリック
- Googleアカウントを選択
- 「詳細」 をクリック
- 「（アプリ名）（安全ではないページ）に移動」 をクリック
- 「許可」 をクリック
⚠️ この権限承認は初回のみ必要です。
一度承認すれば、次回以降は表示されません。
ボタンUIが表示されることを確認
承認が完了すると、ボタンUIが表示されます。
実際に打刻してみる
「出勤」ボタンを押してみます。
ローディング表示 → 送信完了トーストが表示されれば成功です。
Spreadsheetに記録されているか確認する
メールアドレス・日付・種別・時刻がSpreadsheetに記録されていれば完成です🎉
実際にハマったポイント
初回アクセス時に「Unverified」と表示される
原因： Google審査を受けていない社内アプリには必ず表示されます。
解決： 「REVIEW PERMISSIONS」→「詳細」→「移動」→「許可」の順に進むだけでOKです。
まとめ
| ステップ | 内容 |
|---|---|
| Step 1 | Google Spreadsheet準備 |
| Step 2 | Google Sites準備 |
| Step 3 | CodexでGASコード生成・PRでGitHubに保存 |
| Step 4 | GASに貼り付け・デプロイ |
| Step 5 | Google SitesにiFrameで埋め込み・公開 |
| Step 6 | 動作確認 |
Codexへのプロンプト1回で、UIからバックエンドまで生成できました。
コードを一行も書かずに、社内で実際に使える出退勤システムが完成しています。
正直に言うと、このくらいのコードであれば普通のChatGPTでも生成できます。
それでもCodexを紹介した理由は、**「コードを生成して終わり」ではなく「GitHubに保存・管理まで一気にできる」**という体験を伝えたかったからです。
コードは作って終わりではなく、修正・改善・引き継ぎが必ず発生します。GitやGitHubはそのためのツールです。慣れていない方には少し敷居が高く感じるかもしれませんが、Codexを通じてその流れを体験できるのが今回の本当の価値だと思っています。
AIを使った開発で大切なのは、
「何を作るか設計する力」と「AIに正しく指示する力」
です。ツールは変わっても、この2つは変わりません。まずは小さく試してみてください。
【無料勉強会のお知らせ】
AIアプリ開発や業務改善のハンズオンコミュニティを運営しています。
「最新技術を現場でどう使うか」をテーマに、定期的にオンライン開催中です。
詳細は公式LINEにてご案内しています。
https://lin.ee/zsrYtYk