GASSISTANTで「ミニ漢字テスト記録」WebアプリをGASとスプレッドシートを連携して作った話【ノンプログラマーの教師向け】
1. はじめに：AIでアプリ開発、教師の強い味方現る！
こんにちは、小学校教員のささです！
今日は、AIの力を借りて学校現場で役立つWebアプリを自作する方法をご紹介します。多くの学校ではGoogleが導入されていますが、Googleには「Google Apps Script」（通称GAS）というプログラミング言語があります。今回はこのGASを使ってWebアプリを作ります。
データベースにはスプレッドシートを活用するので、学校現場での運用に最適です。
「こんなアプリが欲しいな」
そう思っても、プログラミングは難しそう…と諦めていませんか？ 大丈夫です！ プログラミングの経験がない教師でも、このGASのコードが書けます。
GASのコードにAIアシスタントという「GASSISTANT」という魔法のようなツールを使えば、誰でも簡単にアプリ開発に挑戦できます。
私が今回作るのは、クラスで実施するミニ漢字テストの記録アプリ。煩雑なテスト結果の管理をWebアプリでスマートに解決します。プログラミングの知識がなくても、AIがあなたのアイデアを形にしてくれるんです。
2. 要件定義： 「こんなアプリが欲しい」を言葉にする
アプリ作りの第一歩は、AIにどんなアプリを作りたいかを伝えることです。
難しく考える必要はありません。普段使っている言葉で、作りたいアプリのイメージを伝えるだけでOKです。これを最近話題のAI（Deep Seek)にお願いしてみます。
https://chat.deepseek.com/a/chat/
例えば、今回作りたいのは、
ミニ漢字テストの記録を集計するウェブアプリを作りたい。要件定義して
・問題セットには通し番号がついている（１から１２）
・１００点満点（１０点刻み）
・スプレッドシートをデータベースに使う
・GASでデプロイして使用する
・教師がデプロイしたアプリを生徒が自分の得点を入力する ・名簿シートと記録シートの２つ準備する
・名簿シートにはID,name,number,認証パスワード ・記録シートには,入力した日付、生徒ID、問題セット番号、得点、ひとことふりかえり
・生徒は アプリに入ると、まず認証パスワードを入力する
・ 認証パスワードが正解したら、生徒自身の個別画面に切り替わる。 そこで点数の入力や過去の成績の閲覧を行うことができる。
・ 合格点を90点とし、何回でも入力することができる。個別閲覧ページには一覧となり、どのテストが合格していないのかがテーブルでわかるようにする。
そうすると、AI（Deep Seek)から次のような出力が帰ってきました。
以下は、ミニ漢字テストの記録を集計するウェブアプリの要件定義です。このアプリはGoogle Apps Script (GAS) を使用して開発し、Googleスプレッドシートをデータベースとして利用します。
---
### **1. アプリの目的**
- 教師が生徒の漢字テストの得点を管理し、生徒自身が自分の得点を入力・閲覧できるウェブアプリを提供する。
- 生徒は自分の成績を確認し、合格点に達していないテストを把握できる。
---
### **2. 機能要件**
#### **教師側の機能**
1. **データ管理**
- 名簿シートと記録シートを管理する。
- 名簿シートには生徒の基本情報（ID, 名前, 番号, 認証パスワード）を登録する。
- 記録シートには、生徒が入力した得点とふりかえりを記録する。
2. **アプリのデプロイ**
- GASを使用してウェブアプリをデプロイし、生徒がアクセスできるようにする。
#### **生徒側の機能**
1. **認証**
- アプリにアクセスした生徒は、認証パスワードを入力する。
- 認証が成功すると、個別画面に遷移する。
2. **得点入力**
- 生徒は問題セット番号（1～12）と得点（10点刻み、100点満点）を入力する。
- ふりかえりコメントを追加できる。
3. **成績閲覧**
- 過去の成績を一覧で表示する。
- 合格点（90点）に達していないテストを強調表示する。
- 各問題セットの最高得点を表示する。
4. **再入力**
- 生徒は何度でも得点を再入力できる。最新の得点が記録される。
---
### **3. データ構造**
#### **名簿シート**
| ID | Name | Number | 認証パスワード |
|-----|-------|--------|----------------|
| 001 | 田中 | 1 | pass123 |
| 002 | 佐藤 | 2 | pass456 |
#### **記録シート**
| 日付 | 生徒ID | 問題セット番号 | 得点 | ふりかえり |
|------------|--------|----------------|------|------------------|
| 2023-10-01 | 001 | 1 | 80 | 漢字が難しかった |
| 2023-10-02 | 002 | 2 | 90 | よくできた |
---
### **4. 画面設計**
#### **認証画面**
- 認証パスワード入力欄
- 送信ボタン
#### **個別画面**
1. **得点入力フォーム**
- 問題セット番号（ドロップダウンまたは入力欄）
- 得点（10点刻みのドロップダウン）
- ふりかえり（テキストエリア）
- 送信ボタン
2. **成績一覧**
- テーブル形式で表示
- 列: 問題セット番号, 得点, 合格/不合格, ふりかえり
- 不合格の場合は赤色で強調表示
---
### **5. 技術要件**
- **フロントエンド**: HTML, CSS, JavaScript
- **バックエンド**: Google Apps Script (GAS)
- **データベース**: Googleスプレッドシート
- **デプロイ**: GASのウェブアプリ機能を使用
---
### **6. 処理フロー**
1. **認証**
- 生徒が認証パスワードを入力。
- GASが名簿シートを参照し、認証が成功したら個別画面を表示。
2. **得点入力**
- 生徒が得点とふりかえりを入力。
- GASが記録シートにデータを追加。
3. **成績閲覧**
- 生徒が個別画面で過去の成績を閲覧。
- GASが記録シートからデータを取得し、一覧を表示。
---
### **7. 追加機能（オプション）**
- **教師用ダッシュボード**: 教師が全生徒の成績を一覧で確認できる。
- **グラフ表示**: 生徒の得点推移をグラフで表示。
- **通知機能**: 合格点に達した場合、メッセージを表示。
---
### **8. テスト要件**
- 認証機能の動作確認
- 得点入力の正しい記録
- 成績一覧の正確な表示
- 複数回入力時のデータ更新
---
この要件定義に基づいて、GASとGoogleスプレッドシートを使用してアプリを開発できます。必要に応じて機能を追加・修正してください。
まるで同僚に要望を伝えるように、AIに話しかけるだけでアプリの設計図ができあがります。素晴らしいと思いませんか？
3. アプリの具体化：AIアシスタントの実力
動画での作業はこちら
要望を伝えたら、あとはAIアシスタントGASSISTANTに先程の要件定義をコピペしてお任せです。GASSISTANTが、Webアプリに必要なファイルやスプレッドシートの設定を自動で準備してくれます。 具体的には、code.gs,index.html と、いったファイルを作ってくれます。
「え、でもエラーとか出たらどうするの？」
心配ありません。エラーが出ても、その内容をAIアシスタントに伝えれば、すぐに修正してくれます。まるで優秀なプログラマーが横でサポートしてくれているようです。
AIアシスタントは修正したコードを「これでどうですか？」と確認してくれるので、私たちはOKボタンを押していくだけでOK。パズルゲームを楽しむように、アプリが完成していきます。
私が実際に漢字テストアプリを作った時は、たった1時間ほどで完成しました。もちろん試行錯誤はありましたが、プログラミングの知識がなくてもここまでできるなんて感動です！
4. 動作確認：完成！漢字テスト記録アプリ
動画はこちら
完成した漢字テスト記録アプリの機能を、実際の画面を見ながらご紹介しましょう。
スプシがデータベースなる。
まずログイン画面では、IDとパスワードを入力します。子ども用IDでログインすると、自分の過去の漢字テスト結果が一
目で分かります。
問題セット、得点、合否、そして振り返りコメントまで。頑張った記録が目に見えるって、嬉しいですよね。
実際の授業での使用例を見てみましょう。例えば、問題8のテストで78点を取ったとします。振り返りコメントに「漢字ノートをもっと頑張ろう」と入力して「記録」ボタンをクリック。これだけで、テスト結果が記録されます。
先生用IDでログインすると、今度はクラス全員の記録が出席番号順に整然と表示されます。これなら、クラス全体の学習状況が一目瞭然ですね。
5. データ管理：スプレッドシートとの連携を図る
今回のアプリの裏側、データ管理の仕組みをご紹介しましょう。このアプリはGoogleスプレッドシートと連携しているんです。
スプレッドシートには、
ID（個別ID）
名前
出席番号
パスワード（先生用と生徒用でルール分け）
記録シート（テスト結果が自動入力）これらの項目が設定されています。先生があらかじめパスワードを設定しておけば、あとはアプリが自動でデータを管理してくれます。
Webアプリとスプレッドシートが連携することで、スプレッドシートを直接配布するよりも管理が楽
一つのスプレッドシートで全員のデータを集約
生徒は自分のデータのみ閲覧可能
教師は全員のデータを閲覧可能といったメリットがあります。データ管理の手間を減らしながら、生徒のプライバシーも守れる。まさに、教育現場にぴったりの仕組みなんです。アプリの公開（デプロイ）も簡単です。スプレッドシートの拡張機能から「Apps Script」を開き、コードを少し修正（タイトルの変更など）してデプロイ設定をするだけ。発行されたURLを子どもたちに共有すれば、すぐにアプリを使い始められます。
6. アプリ開発のハードルが下がる未来
AIアシスタントを使ったアプリ開発は、教育現場に大きな可能性をもたらすと感じています。
先生の業務負担を軽減
生徒の学習状況を可視化
生徒のモチベーション向上
プログラミング不要で簡単開発
カスタマイズ自由自在
問題解決能力も育成今回の漢字テスト記録アプリは、ほんの一例です。授業アンケート、作品共有、宿題管理…アイデア次第で、さまざまなアプリが作れるはずです。
「こんなアプリがあったらいいな」そう思った先生、ぜひAIアシスタントを使ったアプリ開発に挑戦してみませんか？最初は少し戸惑うかもしれませんが、エラーが出た時はAIに相談すれば、必ず理想のアプリが完成します。AIの力を活用して、教育現場のDXを加速させましょう！
未来の教室は、より便利で創造的な場所になるはずです。
この記事を読んで「自分もアプリを作ってみたい！」と思った方は、ぜひコメントで教えてください。
今回ご紹介した漢字テスト記録アプリのサンプルのプレゼントもします！もし欲しい方いらっしゃれば「クリエイターからの問い合わせ」で連絡ください。Xの方からでも大丈夫です。
おまけ：漢字テスト記録システム - 利用マニュアル
1. システム概要
このウェブアプリケーションは、漢字テストの結果を記録・管理するためのシステムです。生徒が自身のテスト結果を記録し、教師がクラス全体の成績を確認できます。
主な機能
生徒による漢字テスト結果の記録
生徒個人の成績履歴の確認
教師による全生徒の成績一覧の確認
合否判定（90点以上で合格）
2. ログイン方法
生徒の場合
パスワード入力欄に6桁の数字パスワードを入力
「ログイン」ボタンをクリック
正しいパスワードを入力すると、生徒用画面が表示されます
教師の場合
パスワード入力欄に8文字以上の英数字混合パスワードを入力
英大文字を1文字以上含む
英小文字を1文字以上含む
数字を1文字以上含む
「ログイン」ボタンをクリック
正しいパスワードを入力すると、教師用画面が表示されます
3. 生徒用機能
テスト結果の記録方法
「テスト結果入力」セクションで以下の項目を入力：
問題セット番号（1～100）
得点（0～100）
振り返り（できたところ、間違えたところなど）
「記録する」ボタンをクリック
保存完了のメッセージが表示されます
成績履歴の確認
「これまでの記録」セクションに自分の全記録が表示されます
表示項目：日付、セット番号、得点、合否（90点以上で合格）、振り返り
合格は緑色、不合格は赤色で表示されます
4. 教師用機能
全生徒の成績確認
「全生徒の成績一覧」に全生徒の記録が表示されます
表示項目：日付、出席番号、氏名、セット番号、得点、合否、振り返り
生徒ごとにグループ化され、見やすく整理されています
表示順序：
出席番号順
問題セット番号順
日付の新しい順
成績の見方
合格（90点以上）は緑色で表示
不合格（90点未満）は赤色で表示
生徒間は区切り線で分けられています
5. 注意事項
パスワードは他人に教えないでください
ログアウト機能はないため、使用後はブラウザを閉じてください
同じ問題セットの記録を入力すると、前回の記録は上書きされます
振り返りは具体的に記入することで、後の学習に活かせます
6. トラブルシューティング
ログインできない場合
パスワードが正しく入力されているか確認
生徒：6桁の数字であることを確認
教師：英大文字・小文字・数字を含む8文字以上であることを確認
記録が保存できない場合
全ての項目が入力されているか確認
得点が0～100の範囲内か確認
問題セット番号が1～100の範囲内か確認
表示に問題がある場合
ブラウザの更新ボタンをクリック
再度ログインし直す
7. 推奨環境
Google Chrome（最新版）
Firefox（最新版）
Safari（最新版）
Microsoft Edge（最新版）
8. サポート
問題が解決しない場合は、担当教師に連絡してください。