はじめに
学校現場や研修の場で、紙のワークシートやGoogleフォームを使って「振り返り（自己評価）」を行っている方は多いと思います。
しかし、Googleフォームだと「過去の自分の回答を見ながら書けない」「教員側での管理が（スプレッドシートを見に行く必要があり）面倒」といった悩みがありました。
そこで、Google Apps Script (GAS) と Google Spreadsheets を組み合わせて、「生徒はスマホでサクサク入力」「教員は管理画面で進捗確認＆集計」 ができるWebアプリを開発しました。
今回は、このシステムの仕組みと、開発における技術的なポイントを共有します。
なおこのWEBアプリは以前に投稿した GAS】スマホ対応・グラフ付き相互評価システムを作った（テンプレート公開）をもとに作成しました。
どんなアプリ？
📱 生徒（ユーザー）側の機能
- スマホ対応UI: レスポンシブデザインで、スマホ、PCどちらからでも快適に入力できます
- 過去の振り返り: 入力画面を開くと、自分の過去の回答がロードされます。「前回どう書いたっけ？」を確認しながら上書き更新が可能です
-
リアルタイムバリデーション: 入力漏れなどを即座にチェックします
PC入力画面
スマホ入力画面
集計結果
👨🏫 教員（管理者）側の機能
- 進捗ダッシュボード: 誰が提出済みで、誰が未提出かがリストで一目瞭然です
- 権限管理: スプレッドシートに登録されたメールアドレスに基づいて、自動的に「生徒」か「教員」かを判別します
-
ワンクリック集計: 全員の回答が終わったら、ボタン一つで平均値や度数分布を計算し、グラフ化できます
生徒選択画面
技術スタックと構成
フレームワーク（React/Vueなど）は使わず、GASの標準機能とVanilla JSのみで構築しました。学習コストが低く、メンテナンスしやすいのが特徴です。
- バックエンド: Google Apps Script (GAS)
- データベース: Google Spreadsheets
- フロントエンド: HTML5, CSS3 (Variables活用), Vanilla JavaScript
-
認証: Google Workspace アカウント（
Session.getActiveUser()） - グラフ描画: Google Charts API
こだわりポイントと実装の仕組み
1. スプレッドシートを「設定ファイル兼DB」として使う
このアプリの最大の特徴は、「質問項目をコードで書かない」 ことです。
スプレッドシートのヘッダー行を読み取り、動的にフォームを生成する仕組みにしました。
▼ スプレッドシートの構成
- 1行目: 質問文（例：「授業に意欲的に取り組めた」）
- 2行目: 質問タイプ（
R: ラジオボタン,T: テキストエリア）
このように定義しておくと、GAS側でこれをパースし、HTMLを動的に生成します。
これにより、「来学期は質問を変えたい」と思っても、プログラムを修正する必要がなく、シートを書き換えるだけで対応できます。
// GAS側でのデータ取得イメージ（概念コード）
function getFormConfig() {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('自己評価データ');
const headers = sheet.getRange(1, 1, 2, sheet.getLastColumn()).getValues();
// 1行目の質問文と2行目のタイプ設定をセットにしてフロントへ返す
return headers;
}
2. HtmlService でモダンな構成を作る
GASのWebアプリは doGet 関数からHTMLを返しますが、CSSやJavaScriptを1つのファイルに書くと管理が大変です。
そこで、ファイルを分割し、テンプレート機能を使って読み込む構成にしています。
<head>
<?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
</head>
<body>
<?!= HtmlService.createHtmlOutputFromFile('script').getContent(); ?>
</body>
この HtmlService.createHtmlOutputFromFile 関数を使うことで、開発時は css.html, script.html のようにファイルを分けて開発できます。
3. セキュリティ対策（XSS対策・サニタイズ）
ユーザー入力を扱うため、セキュリティには気を使っています。
特にGASのWebアプリは HtmlService の仕様上、DOM操作時に意図しないスクリプトが埋め込まれないよう対策が必要です。
フロントエンド側での対策
入力されたテキストを表示する際は、必ずエスケープ処理を通すか、textContent プロパティを使用するように徹底しました。
const SecurityUtils = {
// HTMLエスケープ処理
escapeHtml: function (str) {
if (str == null) return '';
const div = document.createElement('div');
div.textContent = String(str);
return div.innerHTML;
},
// スクリプトタグ等の除去
sanitizeInput: function (str) {
if (str == null) return '';
return String(str)
.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '') // scriptタグ除去
.replace(/<[^>]+>/g, '') // 全タグ除去
.trim();
}
};
4. ロールベースの画面制御
ユーザーのメールアドレスを取得し、スプレッドシート上の「教員リスト」「生徒リスト」と照合して、返す画面や権限を変えています。
- 教員の場合: 全生徒のリストを表示するダッシュボードモード
- 生徒の場合: 自分専用の入力フォームモード
- リストにない場合: 「権限がありません」というエラー画面
これにより、URLは1つでも、アクセスする人によって適切な画面が表示されます。
デザイン（CSS）の工夫
「GASで作ったツール＝デザインが古い」というイメージを払拭するため、CSS変数（Custom Properties）を活用してモダンなUIを目指しました。
:root {
--color-primary: #1068d4;
--color-bg: #f5f7fb;
--color-surface: #ffffff;
--radius-sm: 8px;
}
/* スマホでのタップ領域を意識 */
.radio-label {
padding: 12px;
cursor: pointer;
display: flex;
align-items: center;
}
特にスマホでの操作性を重視し、ラジオボタンや送信ボタンのタップ領域を広めに確保しています。
試用方法
スプレッドシートのテンプレートを以下のURLで公開しています。
【テンプレート】自己評価アプリ
MITライセンスで配布します。(c) 2025 Shigeru Suzuki
試用していただく場合、以下の手順で簡単に試せます。(Googleworkspaceのアカウントが必要です)
- スクリプトをデプロイしてください（詳しくは「GAS デプロイ手順」でWeb検索してください）
- シート内にデータを追加します
<生徒として試用>
シート「生徒」に自分のメールアドレスと氏名を入力してください。
<教員として試用>
シート「教員」に自分のメールアドレスと氏名を入力してください。
※生徒・教員に同じメールアドレスがあると生徒として判断されます。
まとめ
GASを使うことで、サーバー代もかからず、セキュアで柔軟な自己評価アプリを作ることができました。
特に 「スプレッドシートの設定だけで質問項目を変えられる」 点は、運用していく上で非常に強力です。
「高機能なツールを導入する予算はないけど、Googleフォームよりはリッチな機能が欲しい」というケースにおいて、GASによるWebアプリ開発は最適な選択肢の一つだと考えています。