第2週 課題の学び：GAS×AIでツール作成｜勤怠管理
AIを使って業務効率化するプロジェクト始動！
このkeitaroさん率いる「けいたろ軍団」のプロジェクトでは
毎週 課題提出＆フィードバックを繰り返し「2ヶ月後にAIを使って業務効率化できるようになること」を目指しています。
【挑戦】
GASで勤怠管理を自動化する
▼前回の投稿【課題への挑戦】
こちらを元にフィードバックを受けブラッシュアップした内容を記録します。
勤怠アプリを無料で自作したいな〜という方、ぜひ一緒に作ってみてください！
フィードバックの内容
スマホアプリのUIをもっと視覚的に理解しやすく！
ユーザーマスターを整え管理すると便利！
打刻エラーもチェック！
ブラッシュアップした内容
1.スマホアプリのUIをもっと視覚的に理解しやすく！
ボタンを大きく表示
アイコンをつけて一目でわかりやすく
現在時刻を表示打刻履歴を表示
2.ユーザーマスターを整え管理すると便利！
重複、誤入力などを防ぐためにGoogleアカウントでログイン
Googleアカウントではわかりにくいので、社員ID・氏名を連動
3.打刻エラーもチェック！
二重打刻や打刻漏れを日次処理でチェック
同時に勤務時間の集計も行う
どんなアプリか動画で紹介
▼Xに投稿した内容
誰でもできる！GAS×AIでオリジナルアプリ作成！
— konmari (@konmari_tweet) December 29, 2024
今回は勤怠アプリ⏰を作りました✨
GASなら自分で無料でWEBアプリが作れるって知っていました？
…でもコードなんて書けない💦
AIを活用してオリジナルアプリを作っちゃおう！… pic.twitter.com/IHFnfXJzUI
GAS勤怠アプリの作り方
GASは全てAIに書いてもらいます。今回使ったのはGoogle Ai Studioです。
GoogleのことはGoogleに聞くのがいいかな・・・と思って！
Chat GPTでもFeloでもClaudeでもOKです！
GASを書いてもらって、それをどのようにどこに反映するのか、手順をまとめましたので、ぜひこちらをご覧ください！
ベースは前回紹介した音声入力で作成
▼入力した内容
「GASを使って勤怠管理ツールを作りたいです。ウェブアプリでスマホ上で出勤、休憩、休憩戻り、退勤のボタンを押すとユーザごとにスプレッドシートにその時間日時が登録されるようにしたいです。最終的に集計してその数値をもとに時給をかけて給与の計算にできるようにしたいです。どのようなスプレッドシートとGASを構築すればいいか教えてください。」
これでできたコードに、どんどんブラッシュアップを加えて今の形になりました！
追加した具体的なプロンプト
勤怠アプリのUIをスクショ→「画像のような視覚的にわかりやすいUI」
現在時刻を表示
どのアカウントかわかるようにGoogleアカウントを表示
何時に打刻したかわかるように表示（24時間でクリア）
出勤を打刻しないと休憩・休憩戻り・退勤は押せない
休憩を打刻した後は休憩戻りを押すまで休憩や退勤は押せない
退勤を打刻しないと出勤は押せない
もし二重打刻があった場合アラートを出す
打刻のタイミングでメールを自動送信
日次集計で日別勤務時間と残業時間を計算
二重打刻など勤怠エラーが発生した場合、集計時に一覧にエラーを表示
※夜間課金などが発生する場合など、実際の勤怠規定に合わせてカスタマイズしましょう！
そもそもGASのアプリって何？
GASのWebアプリについて
Google Apps Script（GAS）は、Googleのサービスを自動化し、簡単なWebアプリケーションを作成するためのスクリプト言語です。
開発の流れ
プロジェクトの作成: Google Driveから新しいGASプロジェクトを作成します。
HTMLファイルの作成: Webアプリで表示するために、HTMLコンテンツを作成します。GASでは、HtmlServiceを使用してHTMLを生成し、ブラウザに返します
デプロイ: 作成したWebアプリをデプロイすることで、他のユーザーがアクセスできるようになります。デプロイ時に、アプリのアクセス権限を設定することも重要です
機能と利点
データの管理: GASはGoogleスプレッドシートと連携し、データの読み書きが容易です。これにより、データの可視化や共同編集が可能になります
無料で利用可能: GASは無料で利用でき、特別なサーバーを必要としないため、手軽に始められます。ただし、実行回数や処理速度には制限があるため、大規模なアプリケーションには向かないことがあります
拡張性: HTML、CSS、JavaScriptを使用して、より複雑なWebアプリケーションを構築することも可能です。BootstrapやVue.jsなどのフレームワークを利用することで、モダンなデザインを実現できます
注意点
スケーラビリティ: GASのWebアプリは、同時に多くのユーザーがアクセスする場合、クォータ制限に達する可能性があります。したがって、大規模なユーザーを想定する場合は、他の技術を検討する必要があります
複数ページの管理: 複数のページを持つWebアプリを作成する場合、URLパラメータを使用してページ遷移を管理する必要があります
GASを使用したWebアプリ開発は、初心者でも取り組みやすく、Googleのエコシステム内での自動化やデータ管理に非常に便利です！
こんなアプリが自分で、無料でできるなんて！✨
GASはコードを書けない人にとっては敷居の高いものでした。でも今は自然言語でコードを書いてくれる優秀なパートナーがいます！
GAS×AIの可能性は無限大！
勤怠アプリが作れるということは・・・あれもこれもできるのでは！？と夢が膨らんでいます！
次回の課題
次回はこの勤怠データを使って給与計算・明細発行まで自動化に挑戦します！