この授業で作るもの：学校祭デジタル受付アプリ
この節で学ぶこと
この節では、今回作るアプリの完成イメージを確認します。
今回作るのは、学校祭デジタル受付アプリです。
学校祭やイベントに来た人が、スマホやパソコンから受付フォームに入力すると、受付番号が発行されます。
入力された内容は、Googleスプレッドシートに自動で保存されます。
さらに、管理画面では、来場者数や来場区分、都道府県別の人数などをグラフで確認できます。
ただし、最初から全部のプログラムを理解する必要はありません。
この授業では、まず完成しているコードをコピーして貼り付けます。
そのあと、アプリを動かしながら、どこを変えると何が変わるのかを少しずつ見ていきます。
今回作るアプリの完成イメージ
完成すると、次のような流れで使えるアプリになります。
来場者が受付フォームを開く
↓
氏名や来場区分を入力する
↓
受付するボタンを押す
↓
受付番号が表示される
↓
入力内容がスプレッドシートに保存される
↓
管理画面で来場者数や集計を確認できる
このように、ただ画面を作るだけではなく、入力されたデータを保存し、あとから集計できるアプリを作ります。
受付フォームで入力する内容
来場者は、受付フォームで次の内容を入力します。
| 入力項目 | 内容 |
|---|---|
| 氏名カナ | 来場者の名前をカタカナで入力します |
| 来場区分 | 保護者、在校生、卒業生、地域の方などを選びます |
| 学年 | 該当する場合のみ選びます |
| クラス | A組、1組などを入力します |
| 来場目的 | 文化祭見学、発表・展示の見学、模擬店利用などを選びます |
| 同伴人数 | 一緒に来た人数を入力します |
| 郵便番号 | 7桁の郵便番号を入力します |
| 都道府県 | 住んでいる都道府県を選びます |
| 市区町村 | 都道府県に合わせて市区町村を選びます |
| 番地・建物名 | 必要であれば住所の続き入力します |
| 出身学校 | 必要であれば出身学校を入力します |
| 備考 | 連絡事項があれば入力します |
受付が完了すると表示されるもの
フォームを送信すると、受付完了画面が表示されます。
そこには、次のような受付番号が表示されます。
FES-20260519-0001
この番号は、次のような意味を持っています。
| 部分 | 意味 |
|---|---|
FES | Festival、学校祭を表す文字 |
20260519 | 受付した日付 |
0001 | 受付順の番号 |
つまり、この番号を見ることで、いつ受付した何番目の来場者かが分かります。
管理画面で見られるもの
このアプリには、受付フォームだけでなく、管理画面もあります。
管理画面では、受付データを集計して、次のような情報を確認できます。
| 管理画面で見られるもの | 内容 |
|---|---|
| 本日の来場者数 | 今日受付した人数 |
| 総受付数 | これまでに受付した人数 |
| 保護者数 | 来場区分が保護者の人数 |
| 在校生数 | 来場区分が在校生の人数 |
| 目標達成率 | 目標人数に対して何％達成したか |
| 都道府県別グラフ | どの都道府県から来た人が多いか |
| 市区町村別グラフ | どの市区町村から来た人が多いか |
| 来場区分グラフ | 保護者、在校生、卒業生などの割合 |
| 時間帯別推移 | 何時ごろに受付が多いか |
| 学年別グラフ | 学年ごとの人数 |
| 来場目的グラフ | 何を目的に来場した人が多いか |
| 最新受付一覧 | 直近の受付データ |
今回使うファイル
今回のアプリでは、2つのファイルを使います。
| ファイル名 | 役割 |
|---|---|
Code.gs | データを保存したり、受付番号を作ったり、集計したりする裏側の処理 |
index.html | 受付フォーム、完了画面、管理画面など、画面に見える部分 |
初心者の方は、まず次のように覚えてください。
Code.gs
→ 裏側の処理
index.html
→ 画面の見た目
Code.gsの役割
Code.gs は、アプリの裏側を担当します。
たとえば、次のような処理です。
| 処理 | 内容 |
|---|---|
| 画面を表示する | Webアプリにアクセスされたとき、index.html を表示する |
| 初期設定をする | 受付データ用のシートや地域マスタを作る |
| データを保存する | フォームから送られた内容をスプレッドシートに保存する |
| 入力内容を確認する | 氏名カナや郵便番号が正しいか確認する |
| 受付番号を作る | FES-日付-番号 の形で番号を作る |
| 管理画面用の集計を作る | 来場者数や区分別の人数を集計する |
| パスコードを確認する | 管理画面に入る人を確認する |
index.htmlの役割
index.html は、アプリの見た目を担当します。
たとえば、次のような画面を作ります。
| 画面 | 内容 |
|---|---|
| 受付フォーム | 来場者が入力する画面 |
| エラー表示 | 入力ミスがあるときに表示するメッセージ |
| 受付完了画面 | 受付番号を表示する画面 |
| 管理画面 | 来場状況を確認する画面 |
| グラフ | 来場者数や区分を視覚的に表示する部分 |
| ボタン | 受付する、続けて受付する、管理画面を見るなど |
アプリの全体像
このアプリの全体の流れは、次のようになります。
index.html
来場者がフォームに入力する
↓
index.html
受付するボタンを押す
↓
Code.gs
入力内容を受け取る
↓
Code.gs
入力内容をチェックする
↓
Code.gs
スプレッドシートに保存する
↓
Code.gs
受付番号を作る
↓
index.html
受付完了画面に番号を表示する
管理画面では、次のような流れになります。
index.html
管理画面を見る
↓
index.html
パスコードを入力する
↓
Code.gs
パスコードを確認する
↓
Code.gs
スプレッドシートのデータを集計する
↓
index.html
グラフや数字として表示する
初心者が最初に理解しておくこと
今回のプログラムは長いです。
そのため、最初から全部の意味を理解しようとすると難しく感じます。
この授業では、次の考え方で進めます。
全部理解する前に、まず動かす
これがとても大切です。
この授業での進め方
今回の授業では、次の順番で進めます。
| 順番 | やること |
|---|---|
| 1 | 完成アプリのイメージを知る |
| 2 | Google Apps Scriptを開く |
| 3 | Code.gs と index.html を作る |
| 4 | 完成コードをコピーして貼り付ける |
| 5 | setupApp() を実行する |
| 6 | Webアプリとして公開する |
| 7 | 受付フォームに入力してみる |
| 8 | スプレッドシートに保存されたデータを見る |
| 9 | 管理画面を開く |
| 10 | 文字や色を少し変える |
| 11 | わからないところをAIに質問する |
| 12 | 自分用のイベント受付アプリに変える |
この授業で大切にすること
プログラミング初心者にとって、最初に大切なのは、細かい文法を全部覚えることではありません。
大切なのは、次の流れを体験することです。
コードを貼る
↓
保存する
↓
実行する
↓
画面を見る
↓
一部分を変える
↓
もう一度画面を見る
↓
変化を確認する
この流れが分かれば、プログラムを少しずつ自分のものにできます。
この授業でできるようになること
授業が終わるころには、次のことができるようになります。
| できるようになること | 内容 |
|---|---|
| GASのプロジェクトを作れる | Google Apps Scriptを開いて作業を始められる |
| 2つのファイルを扱える | Code.gs と index.html を使える |
| 完成コードを貼り付けられる | コピペでアプリを作れる |
| 初期設定を実行できる | setupApp() を実行できる |
| Webアプリとして公開できる | URLで開けるアプリにできる |
| フォーム送信を試せる | 入力して受付番号を表示できる |
| スプレッドシート保存を確認できる | 入力データが保存されたことを確認できる |
| 管理画面を見られる | 集計画面を開いて確認できる |
| 文字や色を変えられる | アプリ名やボタン色を変更できる |
| AIに質問できる | エラーや不明点をAIに聞ける |
まず覚える言葉
この授業で何度も出てくる言葉を、先に確認します。
| 言葉 | 意味 |
|---|---|
| GAS | Google Apps Scriptのこと |
| Webアプリ | ブラウザで開いて使えるアプリ |
| フォーム | 入力欄がある画面 |
| スプレッドシート | 表形式でデータを保存するGoogleの表計算ツール |
| デプロイ | 作ったアプリをURLで使えるように公開すること |
| 関数 | まとまった処理に名前をつけたもの |
| 変数 | データを一時的に入れておく箱 |
| HTML | 画面の構造を作る言語 |
| CSS | 画面の見た目を整える言語 |
| JavaScript | 画面の動きや処理を書く言語 |
| パスコード | 管理画面に入るための合言葉 |
今回は「作る」より「変える」を重視する
この授業では、最初から空白の状態でプログラムを書きません。
完成コードを使います。
理由は、初心者が最初から全部書こうとすると、エラーが多くなり、何が起きているのか分からなくなりやすいからです。
その代わり、次のように進めます。
完成コードを貼る
↓
動く
↓
一部を変える
↓
変化を見る
これにより、プログラムの意味を体験しながら理解できます。
穴埋めで変更する場所
後半では、次のような場所を穴埋めで変更します。
| 変更するもの | 例 |
|---|---|
| アプリ名 | 学校祭デジタル受付 → オープンキャンパス受付 |
| 説明文 | ご来場ありがとうございます → 本日はご参加ありがとうございます |
| ボタン文字 | 受付する → 受付を完了する |
| メインカラー | 黒 → 青、緑、紫など |
| 管理者パスコード | 2026 → 自分で決めた番号 |
| 目標人数 | 4人 → 100人 |
| 来場区分 | 保護者、在校生 → 一般、招待者、スタッフ |
| 来場目的 | 文化祭見学 → 展示見学、体験参加 |
AIを使って調べる前提で進める
プログラムを書いていると、必ずわからないところが出てきます。
この授業では、わからない時にAIを使って調べる方法も学びます。
たとえば、次のように聞きます。
Google Apps Scriptで学校祭デジタル受付アプリを作っています。
Code.gsとindex.htmlを使っています。
この部分の意味がわかりません。
const DEFAULT_TARGET_VISITOR_COUNT = 4;
初心者にもわかるように説明してください。
このように聞くと、AIは初心者向けに説明しやすくなります。
AIに聞くときの基本
AIに質問するときは、次の4つをセットで伝えます。
1. 何を作っているか
2. 何をしたいか
3. 何に困っているか
4. 関係するコード
悪い聞き方は、次のようなものです。
動きません。
これだけでは、AIも原因を見つけにくいです。
良い聞き方は、次のようなものです。
Google Apps Scriptで学校祭デジタル受付アプリを作っています。
やりたいこと：
管理者パスコードを変更したいです。
困っていること：
コードを変更しても、管理画面に入るパスコードが変わりません。
変更したコード：
const passcode = '1234';
初心者にもわかるように、原因と直し方を教えてください。
このように聞くと、AIから具体的な答えが返ってきやすくなります。
この節のゴール
この節のゴールは、まだコードを書くことではありません。
まず、今回作るアプリの全体像を理解することです。
最後に、次の内容を自分の言葉で説明できれば十分です。
今回作るのは、学校祭の受付アプリである。
来場者がフォームに入力する。
入力内容はスプレッドシートに保存される。
受付番号が自動で発行される。
管理画面では来場者数や集計を確認できる。
Code.gsは裏側の処理。
index.htmlは画面の見た目。
最初はコピペで動かし、あとから穴埋めで変更する。
わからない時はAIに質問してよい。
確認問題
問題1
今回作るアプリの名前は何ですか。
回答
学校祭デジタル受付アプリです。
問題2
来場者が入力した内容は、どこに保存されますか。
回答
Googleスプレッドシートに保存されます。
問題3
Code.gs は何を担当しますか。
回答
データ保存、受付番号の作成、入力チェック、集計など、裏側の処理を担当します。
問題4
index.html は何を担当しますか。
回答
受付フォーム、受付完了画面、管理画面など、画面に見える部分を担当します。
問題5
初心者がこの授業で最初に大切にすることは何ですか。
回答
コードを全部理解する前に、まずコピペで動かして、少しずつ変更してみることです。