ChatGPTだけで、フリースクールの出席アプリを作ったら感動した
こんにちは。
神奈川県は逗子市でフリースクールを運営している勇弥です。
今回は、ChatGPTだけで、出席アプリを作ってみた話です。
ChatGPTなどのAIを使ってみたいけど、どうしたらいいのか分からない方やまだAIを使ったことのない人。毛嫌いしている人。
学校関係者、フリースクール関係者の方にも是非見てもらいたいです！
フリースクールの出席レポートがめんどくさい
フリースクールを運営している中で、学校の校長先生が大変理解があり、寛大な方が多く、生徒のレポート出すと出席扱いにしてくれるケースが多くなった。
僕の場合は、エクセルやスプレッドシートに来た日にちとやったことを書いてPDFにして各学校事に分けて提出するという感じである。
でも、正直めんどくさい。
何がめんどくさいかというと、フリースクール自体に出席管理のフォーマットがないという事である。
うちのフリースクールの場合、「cas!ca book」通称「カシブ」というものを帰りの30分前に子どもに作成してもらっている。
A3ノートを配布して、その日の写真を印刷して1ページにまとめるというもの。
思い出を記録するのと、家族と話す時に何をしたのか話せるように作った一方で、これを学校に持っていってもらって、写真で出来事を思い出しながら視覚的にも分かりやすく、先生などとコミュニケーションを取れるようにする役目がある。
これを定期的に先生方に見てもらって、出席にしてもらうというのが目的でもあったが、先生たちもそこまで時間を取れない為になかなかうまくいかない。
フリースクール的なことを初めて6年ほどになるが、結局エクセルやスプレッドシートに来た日にちとやったことを書いて、PDFにして提出するというのが楽なのである。
で、フォーマットがない僕は、毎回新規のスプレッドシートを作成してカシカブックを見てやった事を写真ベースで見返して、エクセルに入れて、それを生徒別のシートにして、pdfにしてダウンロードして、gmailで学校宛にファイルを添付して送るわけである。
めんどい！正直めんどい！！
なので出席フォーマットを作成しようと思ったのである。
だけど、テンプレートを作るのに関数を入れたり、雛形をデザインするのはどうも気持ち的に乗らない。
そこでAIを使おうと思ったのである。
開発ツール
スプレッドシートを用いる為、GASというツールを使って開発をする事にした。もちろん無料。
Google Apps Script（GAS）は、Googleが提供する各種サービスの自動化／連携を行うためのローコード開発ツールである。
勉強不足でたまたま知り合いと話をしていて存在を知った。
スプレッドシートとか、フォーム、ドライブに対してコードを添付して自動化してくれる。ベースはJavaScriptなので、プログラムを書いている人にとってもとっつきやすい。
僕も知識は少しあるだけで、プログラム書けるかというとそういう訳でもない。
でもこれを使えば、DB（データベース）からの情報取得やメール送信の自動化ができそうだ！
ということで、AIにぶん投げる事にした。
教えてAI先生
ChatDPT-3.5は無料で使えるのですが、最新の4oは有料である。
でも、GMOが4o無料で使えるようにしている！
チャットの記録は残らないが、ありがたい！
もう1つチャットAIとしてかなり有名になっているclaudeも併用する。
これも1日数ラリーであれば無料で使える。
claudeは、コードを表示するだけではなくコードの実行結果どうなるかのプレビューを画面に表示してくれる。
このコードを打ち込むとどんな結果になるのかリアルタイムで分かる。
これはすごい…。
実現したい事
僕が実現したいのは以下の事でした。
・出席というボタンをメニューに表示して、押すと生徒の名前が選択できる
・出席ボタンを押すと、スプレッドシートに生徒の名前と日時が記録される
・生徒のやったことを編集すると生徒別のシートにも反映される
・生徒別のシートをpdfでダウンロードできる
・学校別ファイルをドライブに作成する
・ダウンロードしたpdfは学校のファイルに保存される
・学校ごとにpdfを添付したメールが送れる
・翌月になると生徒のシートが自動で作られる
・同じように月別ファイルも自動で作られる
・その他諸々
多いなぁ…。
でもこれができたら嬉しいなぁ。
プロンプト
AIに対して、指令を出すことをプロンプトという。
今回はGASを使って出席アプリを作りたいので、まずは以下のようにプロンプトを入力した。
あなたは優秀なエンジニアです。
スプレッドシートを用いて、フリースクールにくる子どもの出席アプリを作ります。開発環境はGASで変数はconstで揃えてください。
まず、GPTに対して、「あなたは優秀な〇〇です」って言う。
なんかかわいいよね。
結果は以下のようになる。
スプレッドシートの設定：
スプレッドシートの1枚目のシートに、生徒名が1列目にあり、1行目には日付が記されています。
最初のセル（A1）には「Name」と記載し、2行目から生徒の名前を記入します。
const SPREADSHEET_ID = 'YOUR_SPREADSHEET_ID'; // スプレッドシートIDを記載
const SHEET_NAME = '出席簿'; // シート名を記載
// function to mark attendance
function markAttendance(studentName, date, isPresent) {
const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
const sheet = ss.getSheetByName(SHEET_NAME);
// Find the row for the student
const names = sheet.getRange('A2:A').getValues().flat();
const studentRow = names.indexOf(studentName) + 2; // +2 because of 1-based index and header row
if(studentRow < 2) {
Logger.log('Student not found');
return;
}
// Find the column for the date
const dates = sheet.getRange('1:1').getValues().flat();
const dateColumn = dates.indexOf(date) + 1; // +1 because of 1-based index
if(dateColumn < 2) {
Logger.log('Date not found, adding new date column');
// Add new date header
sheet.getRange(1, dates.length + 1).setValue(date);
markAttendance(studentName, date, isPresent); // recursive call to mark attendance now that column is added
return;
}
// Mark attendance
sheet.getRange(studentRow, dateColumn).setValue(isPresent ? '出席' : '欠席');
}
// function to initialize sheet with test data (optional)
function initializeSheet() {
const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
const sheet = ss.getSheetByName(SHEET_NAME);
// Example Data
const students = ['Alice', 'Bob', 'Charlie'];
const dates = ['Name', '2023-10-01', '2023-10-02', '2023-10-03'];
// Set headers
for(let i = 0; i < dates.length; i++) {
sheet.getRange(1, i + 1).setValue(dates[i]);
}
// Set student names
for(let i = 0; i < students.length; i++) {
sheet.getRange(i + 2, 1).setValue(students[i]);
}
}
// Test Functions
function testMarkAttendance() {
markAttendance('Alice', '2023-10-01', true);
markAttendance('Bob', '2023-10-01', false);
markAttendance('Charlie', '2023-10-01', true);
}
// This is to run initially to set up the sheet with sample data
// initializeSheet();コードの説明：
・SPREADSHEET_IDとSHEET_NAMEでスプレッドシートとシート名を指定します。
**markAttendance()**関数は、指定した生徒名の日付に出席（`'出席'`）または欠席（`'欠席'`）を記録します。
**initializeSheet()**関数は、シートを初期化するために使用できるサンプルデータを挿入します。
**testMarkAttendance()**関数を用いて、エントリをテストすることができます。
このコードを使用して基本的な出席管理システムが構築できます。必要に応じて、UIの改良や入力方法の自動化など追加の機能を追加することもできます。
手順まで説明してくる親切✨
変数もちゃんとconstで揃えてくれています。
関数の意味（コードをまとめて実行するまとまり コマンド的な？）の説明もある。
だからプログラムが分からない人にとっても、これが何をしているかわかるのである。少し前なら考えられない。
プログラムの流れが分からないなら、「これのフローチャート（視覚的に書いたプログラムの流れ）を非エンジニアにも分かるように書いて」といえば表示してくれる。
出してくれたコードを「コピーして、実行して、修正」と繰り返していく。
イメージと違う場合は日本語で、「この箇所はこうしたい」と説明をしていけばコードを修正して書いてくれる。
最小単位を考える
僕にとって業務を楽にする出席アプリは考えれば考えるだけ、膨大になる。
機能を持たせて、あれもこれもできたら最高である。
だけど、たくさんのプロンプトを書くのは大変な訳で。
一度にたくさんの事を実現しようとするのは現実世界でも難しい。
本当の最低限の機能だけを考えれば
生徒が出席登録をボタンを押して記録して、やったことを書く
というシンプルなものになる。
最低限のものを少しずつアップデートしていこう。
試される日本語力
先ほど書いた、山のような実現したい事を一度全部書いて、出力してもらって実行するのもいいのだが多分カオスになる。
きっと何がなんだか分からなくなってしまう。
なので、1つの機能ができたら次、1つできたら次と小分けに作っていく。
「じゃあめっちゃ時間かかるじゃん」
って思うかもしれないが、そうではない。
今までなら、プログラム自体を考えて書いて、実行してエラーが出て直すという時間のかかる作業を、プロンプトを書いて出してもらったコードをコピーして貼り付けて実行するだけでいい。
だからサイクルがめっちゃ早い！
でも大事なことがあってそれは、日本語力が大事になってくるということ。
僕の場合「出席っていうメニューを出したい」と言っても分かってくれなかった。
スプレッドシートのメニューの事を調べるとダイヤログというらしい。
ダイヤログという言葉を知らないと、実現までに時間がかかる。
シートの項目に名前をつける箇所をカラムと読んだりもそうだった。
そうなると
出席というボタンをメニューに表示して、押すと生徒の名前が選択できる
というプロンプトが
出席というダイヤログを表示させて、ダイヤログ選択すると生徒名が選択できるようにする。生徒名は生徒名簿というシートのA列の生徒というカラムからとってきて表示させる。
と1つの機能に対して詳細になっていく訳である。
これ、僕の場合はめちゃくちゃ楽しかった。
今まではプログラミングを書くことに時間をかけていたのが、実装までが早いのでトライアンドエラーがめっちゃ早くできる。
コツとしては1つの機能を大雑把に書いてから詳細にしていく事。
AIの性格
今回ChatGPTとClaudeの2つを併用して開発をしたが、正直GPTのようが良いと感じた。
あくまで感覚ではあるが、GPTの方が感覚的に伝えていることを理解してくれるイメージである。例として
自動でフォルダを生成できるようにしてください。
というプロンプトを入れる。
会話の前後で、学校のフォルダを作る意味を込めて作っていた。
GPTの場合は、そのまま該当する学校のファイルを生成してくれるプログラムを書いてくれるのだが、Claudeの場合は「新規フォルダ」を作った。
これはまだ試していないが、このAIにはこのテイストのプロンプトみたいなことがあるのではないだろうか。
でも、Claudeで生成されたものの方が見やすい、分かりやすいという事もたくさんあり、それも1つの面白さとして楽しめた。
アップデートしていく
さて、30分ほどで、最小限の
出席というボタンをメニューに表示して、押すと生徒の名前が選択できる
ができるようになった。
HTMLもGPTに書いてもらって見やすくしてもらって大枠が完成した。
それから2週間
大枠が完成して2週間、全ての実装したい機能が完成した。
全てAIで…。
pdfをシートごとに選択してダウンロードしたり、ファイルを自動生成したり、メールを送る機能も実現した泣。
本当に1つの機能が実現する度に感動を覚えた。
もう、最高です…。
今まではプログラムだけでコンピューターに命令を出していたのが、AIというソフト面の革命によって大幅な進化を、たったこれだけでも肌で感じた訳である。
数年前アプリ開発がしたく勉強したこともあったが、途中で諦めた。
でも、今は違う。
すぐに解決できるアシスタントがいるし、リアクションも早い。
エラーまでの解決も早い。
最高じゃん。
検索ツールか道具かアシスタントか
PCを検索するものか、検索されるものを作るのか。
ゲームをするものか、ゲームを作るものか。
動画を見るものか、動画を作るものか。
で大きく使い方が変わる。AIもそうだろう。
appleはisoにもMacOSにもGPTを搭載する事を発表して、僕たちは数年、いや既に気が付かないうちにAIに触れている状態になる。
スマホが当たり前に普及にしたように、今度はソフトでもそうなっている。
平均的な回答をする傾向にあるAIは、僕たちに同じ価値観を提供してくれるのかもしれない。
だからより簡単で、すぐに答えが出てしまうだろう。
そのうちカスタマイズされた声で自分にとってとても都合のいいアシスタントが出てくると思う。
だから、イレギュラーな事、理不尽な事に対して繊細な人も増えそうだ。
だから今のうちに、先生や、大人が毛嫌いしないでどんどん使って「道具」として使うことや、ツールとして使っていくスタンスを見せた方がいいような気がした。
ハードであれば、手元にある実感があるが、ソフトは気が付かないうちに手の中になるから。
2次元上の事で「これやりたいんだよな」って事はかなり現実味を帯びて可能になってきているから。
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？