ChatGPT o1 Proを使ってGASで簡単な勤怠管理アプリを作る方法
こんにちは！
非エンジニアでもできるAI活用を推進している「なおき」です！
今回は、AI×Google Apps Script（GAS） を使って 勤怠管理アプリを作る手順について紹介します。
といっても、GAS の細かい書き方やスプレッドシートの操作はあまり詳しく扱いません。
代わりに、「どんなプロンプトをAIに投げれば、初心者でも使えるコードが出てくるのか？」 というポイントをメインに解説します。
何故かというと…
プロンプトさえ理解すればアプリ作成からカスタマイズまで誰でも簡単に自分の力だけでできるようになるからです。
ちなみに、どんな感じのアプリができるかというとこんなイメージです。
出勤や退勤に合わせて作成したアプリのボタンを押すとスプレッドシートに打刻時間が溜まっていきます。
さらに、これらの時間から勤務時間や残業時間などを計算し、集計することも可能です。
しかもGASは一定の使用量であれば無料で制限なく使えるのでコスト削減にもつながります！
このようなアプリを自分で作ることができれば便利ですよね！
※ちなみに、Xで@konmariさんのポストを拝見したことがきっかけで作成しましたので、皆さんも参考にしてください！👇
誰でもできる！GAS×AIでオリジナルアプリ作成！
— konmari (@konmari_tweet) December 29, 2024
今回は勤怠アプリ⏰を作りました✨
GASなら自分で無料でWEBアプリが作れるって知っていました？
…でもコードなんて書けない💦
AIを活用してオリジナルアプリを作っちゃおう！… pic.twitter.com/IHFnfXJzUI
是非、@konmariさんのnoteもご覧ください！
では、早速やってみましょう！
■ やりたいことを AI に伝える
結論を先に言うと、非エンジニアでも「この機能を実装したい」と具体的に書いたプロンプトを AI に渡せば、コードはほぼ自動で生成されるということです。
実際に今回は、
「勤怠アプリを作りたい」
「出勤や休憩ボタンを押したら時刻を記録したい」
「スプレッドシートと連携して集計したい」
「打刻のルール（休憩を押さないと戻りを押せない、など）を組み込みたい」
…などの要望を AI（ChatGPT o1 Pro） に伝え、少しずつ修正を重ねることで完成させました。
■ 具体的にどんなプロンプトが必要なの？
では、実際にどんなプロンプトをAIに投げていくか？ をまとめてみました。
1. 大まかな仕様を伝える
まずは「こんなアプリにしたいんだけど、どういうコードになる？」という大枠の質問をします。
具体例としては:
「GASを使って勤怠管理ツールを作りたいです。ウェブアプリでスマホ上で出勤、休憩、休憩戻り、退勤のボタンを押すと、ユーザごとにスプレッドシートに記録されるようにしたいです。計算用に、日次で集計したいのですが、どんなコードになりますか？」
こんな具合に投げると、AI はひととおりのHTMLとGASの例を返してくれます。
ポイントは、「どういう動きにしたいか」といったユーザ情報の扱い方や、スプレッドシートの連携などを必ず明確に書くこと。
2. UI（見た目）を整えてもらう
次に、「ボタンの配置を画像のようにしたい」「視覚的にわかりやすいUIにしてほしい」とUIに関する要望を伝えます。
具体例としては
（イメージ画像を添付した後）「こちらのUIデザイン（添付画像のイメージ）で、ボタンが横並びで大きく、色分けされているようにしたいです。HTMLとCSSを再度修正してください。」
そうすると、AIは新たなHTML/CSSを提示してくれます。
大事なのは、「こうしたい」という具体的なデザイン要望を文章化することです。
3. 機能の追加を要望する
必要な機能を思いつく度、細分化して伝えるとAIがそれに沿ったスクリプトを追記・修正してくれます。
今回挙げられた例を引用すると
「現在時刻をリアルタイムで表示してほしい」
「二重打刻があったらアラートを出してほしい」
「出勤を打刻しないと休憩・退勤を押せないようにしたい」
「打刻時に自動でメール送信したい」
…といった機能ごとに、やりたいことを文章で伝えると、AIがそれに応じたGASを提示してくれます。
4. 条件分岐やエラー表示の追加
勤怠アプリでは、「休憩開始したら休憩終了まで押させない」など細かいルールを設けがちです。
そういった指示も
「一度休憩ボタンを押したら、休憩戻りを押すまで休憩ボタンや退勤ボタンが押せないようにしてください」
と書き加えてリクエストするだけでOK。
何度かやりとりをすると、想定通りの制御が追加されます。
5. （オプション）集計や給与計算への拡張
最後に、「日次集計で勤務時間を計算し、残業があれば●●列に表示。給与を計算できるようにする」など、集計ロジックを追加したい場合も同様にプロンプトで依頼。
夜間課金など独自ルールがあれば、そのルールを言語化し、「このルールで計算して」と書くことで対応可能です。
■ まとめ
もう一度まとめると、「私はこういうアプリを作りたい」「こういう機能が必要」「こんなUIにしたい」という要望を具体的に書いたプロンプトを投げることで、非エンジニアでもGASアプリを作りやすくなる、というわけです。
細かい実装はAIが候補を出してくれるので、やりたい要素をひとつずつ追加していけば自然と完成度が上がります。
記事のポイントまとめ
何をしたいのかを具体的に伝える（出勤・休憩・退勤ボタンの条件やエラー表示など）
UIデザインや細かい要望も、プロンプトで追記するだけでAIがHTML/CSSを修正
「スプレッドシート連携」「GASのWebアプリ公開」などの作業手順は、多数の解説サイトがあるので必要に応じて参照
補足
GASは無料で始められますが、実行回数などに制限があります。
大規模運用には不向きなので注意してください。
非エンジニアの方でも「やりたいこと」を言葉にできればOK
コードの細部に悩む必要はありません。
やりたいことをAIに言えば必要なコードが返ってきます。
今回のような勤怠アプリの例以外にも、データ集計・管理などをChatGPTや他のAIに相談しながら作ることが可能です。
こうしたプロンプト中心の開発スタイルを取り入れると、少しずつアプリをブラッシュアップしやすいので、ぜひお試しください。
最後まで読んでくださってありがとうございます。
もしよければ、ぜひご参考にしてみてください！
ちなみに、GASの使い方が詳しく知りたいという方は機能別に業務効率化の方法をまとめているので、是非コチラをご覧ください！
今回紹介した内容で皆さんの業務が少しでも効率化できれば、スキ、SNSでの紹介をしていただけると大変励みになりますので、何卒よろしくお願いします！
このほか、AI×時短術の知識をX（旧Twitter）で紹介していますので、是非フォローしてください！