受付フォームを動かす | 学校祭デジタル受付アプリを作る | AI活用と意思決定デザイン

この節で学ぶこと

前の節では、学校祭デジタル受付アプリをWebアプリとして公開し、URLから受付フォームを開けるようにしました。

この節では、実際に受付フォームへ入力して、受付番号が発行されるところまで確認します。

ここで大切なのは、コードの意味をすべて理解することではありません。

まずは、次の流れを体験します。

受付フォームを開く
↓
必要事項を入力する
↓
受付するボタンを押す
↓
受付完了画面を見る
↓
受付番号を確認する

この流れができれば、アプリとして動いていることを確認できます。

まずWebアプリのURLを開く

前の節で発行されたWebアプリのURLを開きます。

正しく公開できていれば、次の見出しが表示されます。

学校祭デジタル受付

画面には、氏名カナ、来場区分、来場目的、郵便番号、都道府県、市区町村などの入力欄が表示されます。

1. 受付フォームで入力する項目

今回の受付フォームには、いくつかの入力欄があります。

最初は全部の意味を覚えなくても大丈夫です。

まずは、どのような項目があるか確認します。

項目	必須	内容
氏名カナ	必須	来場者の名前を全角カタカナで入力します
来場区分	必須	保護者、在校生、卒業生などを選びます
学年	任意	該当する場合に選びます
クラス	任意	A組、1組などを入力します
来場目的	必須	文化祭見学、模擬店利用などを選びます
同伴人数	任意	一緒に来た人の人数を入力します
郵便番号	必須	7桁の数字で入力します
都道府県	必須	住んでいる都道府県を選びます
市区町村	必須	都道府県に合わせて選びます
番地・建物名	任意	住所の続きを入力します
出身学校	任意	必要であれば入力します
備考	任意	連絡事項があれば入力します

必須と任意の違い

フォームには、必ず入力する項目と、入力しなくてもよい項目があります。

種類	意味
必須	入力しないと受付できない
任意	入力しなくても受付できる

画面上で「必須」と書かれている項目は、必ず入力します。

2. 入力例を使って受付してみる

まずは、次の入力例をそのまま使ってください。

入力例

項目	入力する内容
氏名カナ	ヤマダタロウ
来場区分	保護者
学年	1年
クラス	A組
来場目的	文化祭見学
同伴人数	2
郵便番号	1000001
都道府県	東京都
市区町村	千代田区
番地・建物名	千代田1-1
出身学校	〇〇小学校
備考	特になし

氏名カナの注意

氏名カナは、全角カタカナで入力します。

正しい例です。

ヤマダ タロウ
サトウ ハナコ
スズキ イチロウ

間違いやすい例です。

山田太郎
やまだたろう
YAMADA TARO
ﾔﾏﾀﾞ ﾀﾛｳ

漢字、ひらがな、英字、半角カタカナはエラーになります。

郵便番号の注意

郵便番号は、7桁の数字で入力します。

正しい例です。

ハイフン付きでも入力できます。

100-0001

このアプリでは、ハイフンを取り除いて7桁の数字として扱います。

3. 都道府県と市区町村を選ぶ

今回のアプリでは、都道府県を選ぶと、市区町村の選択肢が変わります。

たとえば、東京都を選ぶと、次のような市区町村が表示されます。

千代田区
中央区
港区
新宿区
渋谷区
世田谷区
八王子市

岐阜県を選ぶと、次のような市区町村が表示されます。

岐阜市
大垣市
各務原市
多治見市
高山市

これは、前の節で作成した 地域マスタ シートの内容を使っています。

市区町村が表示されない場合

都道府県を選んでも市区町村が出ない場合は、次を確認します。

確認すること	内容
`setupApp()` を実行したか	地域マスタが作られていない可能性があります
`地域マスタ` シートがあるか	シートが存在するか確認します
Webアプリを再読み込みしたか	古い画面を見ている可能性があります
エラーが表示されていないか	画面下部やブラウザの表示を確認します

4. 受付するボタンを押す

入力が終わったら、画面下部のボタンを押します。

受付する

ボタンを押すと、一時的にボタンの文字が次のように変わります。

受付中...

これは、アプリがデータを送信している途中という意味です。

送信中に起きていること

ボタンを押すと、裏側では次のような処理が行われています。

入力内容を集める
↓
入力内容をチェックする
↓
Code.gsに送る
↓
スプレッドシートに保存する
↓
受付番号を作る
↓
受付完了画面に切り替える

初心者の方は、まずこの流れをイメージできれば大丈夫です。

5. 受付完了画面を確認する

送信に成功すると、受付完了画面が表示されます。

画面には、次のような内容が表示されます。

受付が完了しました

受付番号
FES-20260519-0001

この受付番号が表示されれば、受付成功です。

受付番号の意味

受付番号は、次のような形で作られます。

FES-20260519-0001

部分	意味
`FES`	学校祭・イベント受付を表す文字
`20260519`	受付した日付
`0001`	受付順の番号

たとえば、2人目なら次のようになります。

FES-20260519-0002

6. 続けて受付する

受付完了画面には、次のボタンがあります。

続けて受付する

このボタンを押すと、もう一度フォーム画面に戻ります。

複数人分の受付を試したい場合は、このボタンを使います。

3件ほど入力してみる

授業では、動作確認のために、最低3件ほど受付してみると分かりやすいです。

例として、次のように入力できます。

氏名カナ	来場区分	来場目的	都道府県	市区町村
ヤマダタロウ	保護者	文化祭見学	東京都	千代田区
サトウハナコ	在校生	模擬店利用	岐阜県	大垣市
スズキイチロウ	卒業生	発表・展示の見学	愛知県	名古屋市

このように複数件入れておくと、後の管理画面でグラフが見やすくなります。

7. 入力エラーを試してみる

アプリが正しく動いているか確認するために、あえて間違った入力も試します。

エラー例1：氏名を漢字で入力する

氏名カナに、次のように入力します。

山田太郎

この状態で受付しようとすると、エラーが表示されます。

氏名は全角カタカナで入力してください。例：ヤマダ タロウ

エラー例2：郵便番号を短くする

郵便番号に、次のように入力します。

すると、次のようなエラーが表示されます。

郵便番号は7桁の数字で入力してください。例：1000001

エラー例3：都道府県を選ばない

都道府県を選ばずに送信しようとすると、エラーになります。

都道府県を選択してください。

なぜエラーを試すのか

エラーを試すことで、アプリが入力内容を正しくチェックしていることが分かります。

正しい入力
→ 受付できる

間違った入力
→ エラーを出して止める

これもアプリにとって大切な機能です。

8. この入力チェックはどこに書かれているか

入力チェックは、index.html と Code.gs の両方にあります。

index.html側のチェック

フォーム送信前に、画面側で簡単なチェックをしています。

たとえば、氏名カナを確認している部分です。

function isValidKatakanaName(name) {
  const katakanaNamePattern = /^[ァ-ヶー・　\s]+$/;
  return katakanaNamePattern.test(String(name || '').trim());
}

Code.gs側のチェック

データをスプレッドシートに保存する前にも、もう一度チェックしています。

if (!isValidKatakanaName(name)) {
  throw new Error('氏名は全角カタカナで入力してください。例：ヤマダ タロウ');
}

なぜ2回チェックするのか

画面側だけでチェックすると、何らかの理由で不正なデータが送られる可能性があります。

そのため、保存する直前にも Code.gs 側で確認します。

index.html
→ 送信前に確認

Code.gs
→ 保存前にもう一度確認

初心者の方は、次のように覚えてください。

大事なデータは、画面側と裏側の両方で確認する

9. 送信に失敗したときの確認

受付するボタンを押しても完了画面にならない場合は、次を確認します。

状況	確認すること
エラー文が出る	エラー文を読む
ボタンが反応しない	入力必須項目が空欄ではないか
都道府県が出ない	地域マスタがあるか
受付中のまま止まる	Code.gs側でエラーが起きている可能性
画面が真っ白になる	index.htmlのコード貼り付けミスの可能性

エラー文は怖くない

エラー文は、失敗を知らせるだけでなく、直すためのヒントです。

たとえば、

氏名は全角カタカナで入力してください。

と出たら、氏名欄をカタカナに直せばよいと分かります。

エラー文は、AIに質問するときにも使えます。

10. わからない時にAIへ聞く方法

この節では、受付フォームの入力や送信でつまずくことがあります。

その場合は、AIに次のように聞きます。

質問例1：受付ボタンを押しても動かない

Google Apps Scriptで学校祭デジタル受付アプリを作っています。

Webアプリとして公開し、受付フォームを開きました。

困っていること：
受付するボタンを押しても、受付完了画面になりません。

入力した内容：
氏名カナ：ヤマダ タロウ
来場区分：保護者
来場目的：文化祭見学
郵便番号：1000001
都道府県：東京都
市区町村：千代田区

画面に表示されたエラー：
ここにエラー文を貼る

初心者にもわかるように、確認する場所を教えてください。

質問例2：氏名カナでエラーになる

Google Apps Scriptで学校祭デジタル受付アプリを作っています。

氏名カナに「山田太郎」と入力したら、
「氏名は全角カタカナで入力してください」と表示されました。

なぜエラーになるのか、
初心者にもわかるように説明してください。

質問例3：郵便番号でエラーになる

Google Apps Scriptで受付フォームを作っています。

郵便番号に「123」と入力したらエラーになりました。

このアプリでは郵便番号を7桁で確認しているようです。

初心者にもわかるように、
どのコードが郵便番号を確認しているのか説明してください。

質問例4：受付番号の意味を聞く

Google Apps Scriptで学校祭デジタル受付アプリを作っています。

受付番号が FES-20260519-0001 のように表示されます。

この番号がどのように作られているのか、
初心者にもわかるように説明してください。

関係しそうな関数：
createReceptionNumber(rowNumber)

11. この節のまとめ

この節では、公開した受付フォームを実際に動かしました。

大切なポイントは、次の通りです。

WebアプリのURLを開くと受付フォームが表示される。
氏名カナは全角カタカナで入力する。
郵便番号は7桁の数字で入力する。
都道府県を選ぶと、市区町村の選択肢が変わる。
受付するボタンを押すと、データが送信される。
送信に成功すると、受付完了画面が表示される。
受付番号は FES-日付-番号 の形で発行される。
入力ミスがあるとエラーが表示される。
エラー文は、直すためのヒントになる。
複数件入力しておくと、次の管理画面確認が分かりやすくなる。

次の節では、フォームから送信したデータが、Googleスプレッドシートに保存されているか確認します。

確認問題

問題1

受付フォームで、氏名カナはどのように入力しますか。

回答

全角カタカナで入力します。例は ヤマダタロウ です。

問題2

郵便番号は何桁の数字で入力しますか。

回答

7桁の数字で入力します。例は 1000001 です。

問題3

受付に成功すると、画面には何が表示されますか。

回答

受付完了画面と受付番号が表示されます。

問題4

受付番号はどのような形で表示されますか。

回答

FES-20260519-0001 のように、FES-日付-番号 の形で表示されます。

問題5

入力ミスがある場合、画面には何が表示されますか。

回答

エラーメッセージが表示されます。例えば、氏名がカタカナでない場合は「氏名は全角カタカナで入力してください」と表示されます。

この節で学ぶこと

前の節では、学校祭デジタル受付アプリをWebアプリとして公開し、URLから受付フォームを開けるようにしました。

この節では、実際に受付フォームへ入力して、受付番号が発行されるところまで確認します。

ここで大切なのは、コードの意味をすべて理解することではありません。

まずは、次の流れを体験します。

受付フォームを開く
↓
必要事項を入力する
↓
受付するボタンを押す
↓
受付完了画面を見る
↓
受付番号を確認する

この流れができれば、アプリとして動いていることを確認できます。

まずWebアプリのURLを開く

前の節で発行されたWebアプリのURLを開きます。

正しく公開できていれば、次の見出しが表示されます。

学校祭デジタル受付

画面には、氏名カナ、来場区分、来場目的、郵便番号、都道府県、市区町村などの入力欄が表示されます。

1. 受付フォームで入力する項目

今回の受付フォームには、いくつかの入力欄があります。

最初は全部の意味を覚えなくても大丈夫です。

まずは、どのような項目があるか確認します。

項目	必須	内容
氏名カナ	必須	来場者の名前を全角カタカナで入力します
来場区分	必須	保護者、在校生、卒業生などを選びます
学年	任意	該当する場合に選びます
クラス	任意	A組、1組などを入力します
来場目的	必須	文化祭見学、模擬店利用などを選びます
同伴人数	任意	一緒に来た人の人数を入力します
郵便番号	必須	7桁の数字で入力します
都道府県	必須	住んでいる都道府県を選びます
市区町村	必須	都道府県に合わせて選びます
番地・建物名	任意	住所の続きを入力します
出身学校	任意	必要であれば入力します
備考	任意	連絡事項があれば入力します

必須と任意の違い

フォームには、必ず入力する項目と、入力しなくてもよい項目があります。

種類	意味
必須	入力しないと受付できない
任意	入力しなくても受付できる

画面上で「必須」と書かれている項目は、必ず入力します。

2. 入力例を使って受付してみる

まずは、次の入力例をそのまま使ってください。

入力例

項目	入力する内容
氏名カナ	ヤマダタロウ
来場区分	保護者
学年	1年
クラス	A組
来場目的	文化祭見学
同伴人数	2
郵便番号	1000001
都道府県	東京都
市区町村	千代田区
番地・建物名	千代田1-1
出身学校	〇〇小学校
備考	特になし

氏名カナの注意

氏名カナは、全角カタカナで入力します。

正しい例です。

ヤマダ タロウ
サトウ ハナコ
スズキ イチロウ

間違いやすい例です。

山田太郎
やまだたろう
YAMADA TARO
ﾔﾏﾀﾞ ﾀﾛｳ

漢字、ひらがな、英字、半角カタカナはエラーになります。

郵便番号の注意

郵便番号は、7桁の数字で入力します。

正しい例です。

ハイフン付きでも入力できます。

100-0001

このアプリでは、ハイフンを取り除いて7桁の数字として扱います。

3. 都道府県と市区町村を選ぶ

今回のアプリでは、都道府県を選ぶと、市区町村の選択肢が変わります。

たとえば、東京都を選ぶと、次のような市区町村が表示されます。

千代田区
中央区
港区
新宿区
渋谷区
世田谷区
八王子市

岐阜県を選ぶと、次のような市区町村が表示されます。

岐阜市
大垣市
各務原市
多治見市
高山市

これは、前の節で作成した 地域マスタ シートの内容を使っています。

市区町村が表示されない場合

都道府県を選んでも市区町村が出ない場合は、次を確認します。

確認すること	内容
`setupApp()` を実行したか	地域マスタが作られていない可能性があります
`地域マスタ` シートがあるか	シートが存在するか確認します
Webアプリを再読み込みしたか	古い画面を見ている可能性があります
エラーが表示されていないか	画面下部やブラウザの表示を確認します

4. 受付するボタンを押す

入力が終わったら、画面下部のボタンを押します。

受付する

ボタンを押すと、一時的にボタンの文字が次のように変わります。

受付中...

これは、アプリがデータを送信している途中という意味です。

送信中に起きていること

ボタンを押すと、裏側では次のような処理が行われています。

入力内容を集める
↓
入力内容をチェックする
↓
Code.gsに送る
↓
スプレッドシートに保存する
↓
受付番号を作る
↓
受付完了画面に切り替える

初心者の方は、まずこの流れをイメージできれば大丈夫です。

5. 受付完了画面を確認する

送信に成功すると、受付完了画面が表示されます。

画面には、次のような内容が表示されます。

受付が完了しました

受付番号
FES-20260519-0001

この受付番号が表示されれば、受付成功です。

受付番号の意味

受付番号は、次のような形で作られます。

FES-20260519-0001

部分	意味
`FES`	学校祭・イベント受付を表す文字
`20260519`	受付した日付
`0001`	受付順の番号

たとえば、2人目なら次のようになります。

FES-20260519-0002

6. 続けて受付する

受付完了画面には、次のボタンがあります。

続けて受付する

このボタンを押すと、もう一度フォーム画面に戻ります。

複数人分の受付を試したい場合は、このボタンを使います。

3件ほど入力してみる

授業では、動作確認のために、最低3件ほど受付してみると分かりやすいです。

例として、次のように入力できます。

氏名カナ	来場区分	来場目的	都道府県	市区町村
ヤマダタロウ	保護者	文化祭見学	東京都	千代田区
サトウハナコ	在校生	模擬店利用	岐阜県	大垣市
スズキイチロウ	卒業生	発表・展示の見学	愛知県	名古屋市

このように複数件入れておくと、後の管理画面でグラフが見やすくなります。

7. 入力エラーを試してみる

アプリが正しく動いているか確認するために、あえて間違った入力も試します。

エラー例1：氏名を漢字で入力する

氏名カナに、次のように入力します。

山田太郎

この状態で受付しようとすると、エラーが表示されます。

氏名は全角カタカナで入力してください。例：ヤマダ タロウ

エラー例2：郵便番号を短くする

郵便番号に、次のように入力します。

すると、次のようなエラーが表示されます。

郵便番号は7桁の数字で入力してください。例：1000001

エラー例3：都道府県を選ばない

都道府県を選ばずに送信しようとすると、エラーになります。

都道府県を選択してください。

なぜエラーを試すのか

エラーを試すことで、アプリが入力内容を正しくチェックしていることが分かります。

正しい入力
→ 受付できる

間違った入力
→ エラーを出して止める

これもアプリにとって大切な機能です。

8. この入力チェックはどこに書かれているか

入力チェックは、index.html と Code.gs の両方にあります。

index.html側のチェック

フォーム送信前に、画面側で簡単なチェックをしています。

たとえば、氏名カナを確認している部分です。

function isValidKatakanaName(name) {
  const katakanaNamePattern = /^[ァ-ヶー・　\s]+$/;
  return katakanaNamePattern.test(String(name || '').trim());
}

Code.gs側のチェック

データをスプレッドシートに保存する前にも、もう一度チェックしています。

if (!isValidKatakanaName(name)) {
  throw new Error('氏名は全角カタカナで入力してください。例：ヤマダ タロウ');
}

なぜ2回チェックするのか

画面側だけでチェックすると、何らかの理由で不正なデータが送られる可能性があります。

そのため、保存する直前にも Code.gs 側で確認します。

index.html
→ 送信前に確認

Code.gs
→ 保存前にもう一度確認

初心者の方は、次のように覚えてください。

大事なデータは、画面側と裏側の両方で確認する

9. 送信に失敗したときの確認

受付するボタンを押しても完了画面にならない場合は、次を確認します。

状況	確認すること
エラー文が出る	エラー文を読む
ボタンが反応しない	入力必須項目が空欄ではないか
都道府県が出ない	地域マスタがあるか
受付中のまま止まる	Code.gs側でエラーが起きている可能性
画面が真っ白になる	index.htmlのコード貼り付けミスの可能性

エラー文は怖くない

エラー文は、失敗を知らせるだけでなく、直すためのヒントです。

たとえば、

氏名は全角カタカナで入力してください。

と出たら、氏名欄をカタカナに直せばよいと分かります。

エラー文は、AIに質問するときにも使えます。

10. わからない時にAIへ聞く方法

この節では、受付フォームの入力や送信でつまずくことがあります。

その場合は、AIに次のように聞きます。

質問例1：受付ボタンを押しても動かない

Google Apps Scriptで学校祭デジタル受付アプリを作っています。

Webアプリとして公開し、受付フォームを開きました。

困っていること：
受付するボタンを押しても、受付完了画面になりません。

入力した内容：
氏名カナ：ヤマダ タロウ
来場区分：保護者
来場目的：文化祭見学
郵便番号：1000001
都道府県：東京都
市区町村：千代田区

画面に表示されたエラー：
ここにエラー文を貼る

初心者にもわかるように、確認する場所を教えてください。

質問例2：氏名カナでエラーになる

Google Apps Scriptで学校祭デジタル受付アプリを作っています。

氏名カナに「山田太郎」と入力したら、
「氏名は全角カタカナで入力してください」と表示されました。

なぜエラーになるのか、
初心者にもわかるように説明してください。

質問例3：郵便番号でエラーになる

Google Apps Scriptで受付フォームを作っています。

郵便番号に「123」と入力したらエラーになりました。

このアプリでは郵便番号を7桁で確認しているようです。

初心者にもわかるように、
どのコードが郵便番号を確認しているのか説明してください。

質問例4：受付番号の意味を聞く

Google Apps Scriptで学校祭デジタル受付アプリを作っています。

受付番号が FES-20260519-0001 のように表示されます。

この番号がどのように作られているのか、
初心者にもわかるように説明してください。

関係しそうな関数：
createReceptionNumber(rowNumber)