最終課題：自分のイベント受付アプリにカスタマイズする
この節で学ぶこと
前の節では、エラーが出たときや意味がわからないときに、AIへどのように質問すればよいかを学びました。
この節では、これまで作ってきた学校祭デジタル受付アプリを、自分のイベント用の受付アプリに変更します。
ここまでの授業では、完成コードを貼り付けて動かし、少しずつ変更する練習をしてきました。
この節では、その練習を使って、次のようなオリジナル受付アプリを作ります。
学校祭デジタル受付
↓
自分のイベント受付アプリ
この節のゴール
この節のゴールは、ゼロから新しいアプリを作ることではありません。
すでに動いている受付アプリを、自分の目的に合わせて変更することです。
完成コードを使う
↓
イベント名を変える
↓
説明文を変える
↓
選択肢を変える
↓
色を変える
↓
受付フォームとして使える形にする
初心者の方は、まず「全部を自作する」よりも、動いているものを自分用に変えることを目標にします。
1. まずテーマを決める
最初に、自分が作る受付アプリのテーマを決めます。
たとえば、次のようなテーマがあります。
| テーマ | アプリ名の例 |
|---|---|
| 学校祭 | 学校祭デジタル受付 |
| オープンキャンパス | オープンキャンパス受付 |
| 作品展示会 | 卒業制作展 受付フォーム |
| サークルイベント | サークル体験会受付 |
| 地域イベント | 地域交流イベント受付 |
| フードイベント | フードフェス受付 |
| セミナー | 参加者受付フォーム |
| 勉強会 | プログラミング勉強会受付 |
| ライブイベント | ミニライブ入場受付 |
| スポーツ大会 | 校内スポーツ大会受付 |
テーマ選びのポイント
テーマは、難しく考えすぎなくて大丈夫です。
次のように、自分がイメージしやすいものを選びます。
自分が参加したことのあるイベント
学校でありそうなイベント
友達に説明しやすいイベント
受付フォームが必要そうなイベント
この授業では、実際に開催するイベントでなくても構いません。
架空のイベントでも大丈夫です。
2. 今回変更する場所
最終課題では、最低でも次の5つを変更します。
| 必須 | 変更するもの | ファイル | 例 |
|---|---|---|---|
| 必須 | アプリ名 | index.html | オープンキャンパス受付 |
| 必須 | 説明文 | index.html | 本日はご参加ありがとうございます |
| 必須 | 来場区分 | index.html | 高校生、保護者、先生 |
| 必須 | 来場目的 | index.html | 体験授業、施設見学、個別相談 |
| 必須 | ボタン文字 | index.html | 受付を完了する |
余裕がある人は、次の内容も変更します。
| 余裕があれば | 変更するもの | ファイル | 例 |
|---|---|---|---|
| 任意 | メインカラー | index.html | 青、緑、紫など |
| 任意 | 背景色 | index.html | 薄い青、クリーム色など |
| 任意 | 管理者パスコード | Code.gs | 1234など |
| 任意 | 目標来場者数 | Code.gs | 50、100など |
| 任意 | 管理画面の表示名 | index.html | 来場状況ダッシュボード |
3. 作業の前にバックアップを取る
コードを変更する前に、今の状態を残しておくと安心です。
初心者の場合、変更中にタグを消してしまったり、引用符を消してしまったりすることがあります。
そのため、変更前のコードをメモしておきます。
簡単なバックアップ方法
一番簡単なのは、現在のコードを別の場所にコピーしておくことです。
1. Code.gsを開く
2. 全部コピーする
3. Googleドキュメントやメモに貼る
4. index.htmlも同じように保存する
または、変更前の重要部分だけメモしても大丈夫です。
変更メモの例
変更前：
<h1>学校祭デジタル受付</h1>
変更後：
<h1>オープンキャンパス受付</h1>
このように残しておくと、失敗したときに戻しやすくなります。
4. ワークシート：自分のイベントを決める
まず、次のワークシートを埋めます。
作りたいイベント名：
＿＿＿＿＿＿＿＿＿＿
どんなイベントか：
＿＿＿＿＿＿＿＿＿＿
誰が来るイベントか：
＿＿＿＿＿＿＿＿＿＿
受付で知りたい情報：
＿＿＿＿＿＿＿＿＿＿
管理画面で見たい情報：
＿＿＿＿＿＿＿＿＿＿
アプリの雰囲気：
＿＿＿＿＿＿＿＿＿＿
記入例：オープンキャンパス
作りたいイベント名：
オープンキャンパス
どんなイベントか：
学校に興味がある高校生や保護者が参加するイベント
誰が来るイベントか：
高校生、保護者、高校の先生
受付で知りたい情報：
氏名、来場区分、来場目的、住んでいる地域、出身学校
管理画面で見たい情報：
高校生が何人来たか、どの地域から来たか、体験授業希望が多いか
アプリの雰囲気：
明るく、安心感があり、学校らしい雰囲気
5. 演習1：アプリ名を変更する
index.html の中から、次の部分を探します。
<title>学校祭デジタル受付</title>
これを、自分のイベント名に変更します。
穴埋め
<title>＿＿＿＿＿＿＿＿＿＿</title>
例
<title>オープンキャンパス受付</title>
大きな見出しも変更する
次に、画面に大きく表示される見出しも変更します。
<h1>学校祭デジタル受付</h1>
穴埋め
<h1>＿＿＿＿＿＿＿＿＿＿</h1>
例
<h1>オープンキャンパス受付</h1>
6. 演習2：説明文を変更する
次に、受付フォームの説明文を変更します。
index.html の中から、次の部分を探します。
<p>
ご来場ありがとうございます。必要事項を入力して受付を完了してください。
氏名はカタカナで入力してください。
</p>
穴埋め
<p>
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
</p>
例：オープンキャンパス用
<p>
本日はオープンキャンパスにご参加いただきありがとうございます。
必要事項を入力して受付を完了してください。
</p>
例：作品展示会用
<p>
本日は作品展示会にお越しいただきありがとうございます。
受付後に表示される番号をスタッフへお見せください。
</p>
例：フードイベント用
<p>
本日はフードイベントにご参加いただきありがとうございます。
混雑状況の確認のため、受付へのご協力をお願いします。
</p>
7. 演習3：来場区分を変更する
次に、来場区分の選択肢を変更します。
index.html の中から、次の部分を探します。
<option value="保護者">保護者</option>
<option value="在校生">在校生</option>
<option value="卒業生">卒業生</option>
<option value="地域の方">地域の方</option>
<option value="学校関係者">学校関係者</option>
<option value="その他">その他</option>
穴埋め
<option value="＿＿＿＿">＿＿＿＿</option>
<option value="＿＿＿＿">＿＿＿＿</option>
<option value="＿＿＿＿">＿＿＿＿</option>
<option value="その他">その他</option>
value と表示名は、基本的に同じにします。
例：オープンキャンパス用
<option value="高校生">高校生</option>
<option value="保護者">保護者</option>
<option value="高校の先生">高校の先生</option>
<option value="卒業生">卒業生</option>
<option value="その他">その他</option>
例：作品展示会用
<option value="一般来場者">一般来場者</option>
<option value="学生">学生</option>
<option value="保護者">保護者</option>
<option value="企業関係者">企業関係者</option>
<option value="その他">その他</option>
例：フードイベント用
<option value="一般参加">一般参加</option>
<option value="出店者">出店者</option>
<option value="スタッフ">スタッフ</option>
<option value="招待者">招待者</option>
<option value="その他">その他</option>
8. 演習4：来場目的を変更する
次に、来場目的の選択肢を変更します。
index.html の中から、次の部分を探します。
<option value="文化祭見学">文化祭見学</option>
<option value="発表・展示の見学">発表・展示の見学</option>
<option value="模擬店利用">模擬店利用</option>
<option value="学校説明会">学校説明会</option>
<option value="生徒の応援">生徒の応援</option>
<option value="その他">その他</option>
穴埋め
<option value="＿＿＿＿">＿＿＿＿</option>
<option value="＿＿＿＿">＿＿＿＿</option>
<option value="＿＿＿＿">＿＿＿＿</option>
<option value="その他">その他</option>
例：オープンキャンパス用
<option value="学校説明を聞く">学校説明を聞く</option>
<option value="体験授業に参加">体験授業に参加</option>
<option value="施設見学">施設見学</option>
<option value="個別相談">個別相談</option>
<option value="その他">その他</option>
例：作品展示会用
<option value="作品鑑賞">作品鑑賞</option>
<option value="学生作品の審査">学生作品の審査</option>
<option value="企業見学">企業見学</option>
<option value="知人の応援">知人の応援</option>
<option value="その他">その他</option>
例：フードイベント用
<option value="飲食">飲食</option>
<option value="出店ブース見学">出店ブース見学</option>
<option value="イベント参加">イベント参加</option>
<option value="友人の応援">友人の応援</option>
<option value="その他">その他</option>
9. 演習5：ボタン文字を変更する
送信ボタンの文字を変更します。
index.html の中から、次の部分を探します。
<button id="submitButton" class="button" type="submit">
受付する
</button>
穴埋め
<button id="submitButton" class="button" type="submit">
＿＿＿＿＿＿
</button>
例
<button id="submitButton" class="button" type="submit">
受付を完了する
</button>
または、
<button id="submitButton" class="button" type="submit">
参加登録する
</button>
JavaScript側の文字も確認する
このアプリでは、送信後にボタンの文字を戻すコードがあります。
次の部分も探します。
submitButton.textContent = '受付する';
ここも、ボタンに合わせて変更します。
submitButton.textContent = '受付を完了する';
10. 演習6：メインカラーを変更する
余裕がある人は、アプリのメインカラーを変更します。
index.html のCSSの中から、次を探します。
--black: #111827;
穴埋め
--black: ＿＿＿＿＿＿;
色の例
| 雰囲気 | カラーコード |
|---|---|
| 落ち着いた黒 | #111827 |
| 学校らしい青 | #2563eb |
| 安心感のある緑 | #16a34a |
| 元気なオレンジ | #ea580c |
| 文化祭らしい紫 | #7c3aed |
| 上品なネイビー | #1e3a8a |
| やわらかいピンク | #db2777 |
例
--black: #2563eb;
これで、ボタンや一部のグラフが青系になります。
11. 演習7：管理者パスコードを変更する
管理画面のパスコードも変更できます。
Code.gs の中から、次の部分を探します。
function setAdminPasscode() {
const passcode = '2026';
PropertiesService
.getScriptProperties()
.setProperty(ADMIN_PASSCODE_PROPERTY_KEY, passcode);
}
変更するのは、この部分です。
const passcode = '2026';
穴埋め
const passcode = '＿＿＿＿';
例
const passcode = '1234';
変更後に必要な作業
パスコードは、コードを変更しただけでは反映されないことがあります。
変更したら、次を実行します。
setAdminPasscode
手順です。
1. Code.gsでパスコードを変更する
2. 保存する
3. 関数選択メニューで setAdminPasscode を選ぶ
4. 実行する
5. 管理画面を開く
6. 新しいパスコードで入れるか確認する
12. 演習8：目標来場者数を変更する
管理画面の目標人数も変更できます。
Code.gs の上の方にある次の部分を探します。
const DEFAULT_TARGET_VISITOR_COUNT = 4;
穴埋め
const DEFAULT_TARGET_VISITOR_COUNT = ＿＿;
例
const DEFAULT_TARGET_VISITOR_COUNT = 50;
注意点
すでに一度 setupApp() を実行している場合、目標人数はスクリプトプロパティに保存されています。
そのため、DEFAULT_TARGET_VISITOR_COUNT を変更しただけでは、すぐに管理画面へ反映されない場合があります。
初心者の授業では、まず次の理解で大丈夫です。
DEFAULT_TARGET_VISITOR_COUNT
→ 目標来場者数の初期値を書く場所
確実に変更したい場合は、先生の指示に従って、目標人数更新用の関数を追加して実行します。
13. 変更後に保存とデプロイ更新をする
変更したら、必ず保存します。
Mac：
Command + S
Windows：
Ctrl + S
ただし、Webアプリの公開画面では、保存しただけでは反映されない場合があります。
その場合は、デプロイを更新します。
デプロイ
↓
デプロイを管理
↓
編集
↓
新バージョン
↓
デプロイ
確認すること
変更後は、必ずWebアプリのURLを開いて確認します。
| 確認項目 | 見る場所 |
|---|---|
| アプリ名が変わったか | 受付フォーム上部 |
| 説明文が変わったか | 受付フォーム上部 |
| 来場区分が変わったか | 来場区分の選択欄 |
| 来場目的が変わったか | 来場目的の選択欄 |
| ボタン文字が変わったか | 送信ボタン |
| 色が変わったか | ボタンやグラフ |
| パスコードが変わったか | 管理画面 |
| 目標人数が変わったか | 管理画面 |
14. 動作確認をする
自分用に変更できたら、必ず動作確認をします。
動作確認の流れ
1. 受付フォームを開く
2. 自分で1件入力する
3. 受付番号が表示されるか確認する
4. スプレッドシートに保存されたか確認する
5. 管理画面を開く
6. 集計に反映されたか確認する
テスト入力例
自分のイベントに合わせて、次のように入力します。
| 項目 | 入力例 |
|---|---|
| 氏名カナ | ヤマダ タロウ |
| 来場区分 | 高校生 |
| 学年 | 3年 |
| クラス | A組 |
| 来場目的 | 体験授業に参加 |
| 同伴人数 | 1 |
| 郵便番号 | 1000001 |
| 都道府県 | 東京都 |
| 市区町村 | 千代田区 |
| 出身学校 | 〇〇高等学校 |
| 備考 | 個別相談を希望 |
15. 提出物
最終課題では、次の内容を提出します。
作ったアプリ名：
どんなイベント用か：
変更したところ1：
変更したところ2：
変更したところ3：
変更した色：
管理者パスコード：
目標人数：
うまく動いたところ：
難しかったところ：
AIに質問した内容：
完成URL：
提出例
作ったアプリ名：
オープンキャンパス受付
どんなイベント用か：
高校生と保護者が参加する学校説明会用の受付アプリ
変更したところ1：
アプリ名を「オープンキャンパス受付」に変更した
変更したところ2：
来場区分を「高校生、保護者、高校の先生、卒業生」に変更した
変更したところ3：
来場目的を「学校説明、体験授業、施設見学、個別相談」に変更した
変更した色：
メインカラーを青に変更した
管理者パスコード：
1234
目標人数：
50人
うまく動いたところ：
受付番号が表示され、スプレッドシートに保存された
難しかったところ：
変更した内容がWebアプリに反映されず、デプロイ更新が必要だった
AIに質問した内容：
保存したのに画面が変わらない原因を質問した
完成URL：
https://script.google.com/...
16. 評価のポイント
この課題では、難しいコードを書けるかどうかだけを評価するわけではありません。
次の点を確認します。
| 評価項目 | 内容 |
|---|---|
| 動作するか | 受付フォームが動き、受付番号が表示されるか |
| 保存されるか | スプレッドシートにデータが入るか |
| 自分用に変更できているか | アプリ名や選択肢がテーマに合っているか |
| 管理画面が見られるか | 集計や最新受付が表示されるか |
| AIを使って調べられたか | 困ったことを整理して質問できたか |
| 変更内容を説明できるか | どこを変えて何が変わったか説明できるか |
17. よくあるつまずき
つまずき1：全部変えようとしてエラーになる
最初からたくさん変更すると、エラーが出たときに原因が分からなくなります。
次の順番で進めます。
アプリ名だけ変える
↓
保存・デプロイ更新
↓
確認
↓
説明文を変える
↓
保存・デプロイ更新
↓
確認
1つずつ進めることが大切です。
つまずき2：選択肢のタグを壊してしまう
option タグは、次の形を守ります。
<option value="高校生">高校生</option>
間違いやすい例です。
<option value="高校生">高校生
終了タグの </option> がないと、画面が崩れる原因になります。
つまずき3：パスコードを変えたのに入れない
パスコードを変更したら、setAdminPasscode を実行します。
コードを変更
↓
保存
↓
setAdminPasscodeを実行
↓
管理画面で確認
つまずき4：画面が変わらない
変更が反映されない場合は、次を確認します。
保存したか
デプロイを更新したか
ブラウザを再読み込みしたか
変更した場所が正しいか
18. わからない時にAIへ聞く方法
最終課題で困ったときは、次のテンプレートを使います。
Google Apps Scriptでイベント受付アプリを作っています。
元のコードは、学校祭デジタル受付アプリです。
自分のテーマ：
＿＿＿＿＿＿＿＿＿＿
やりたいこと：
＿＿＿＿＿＿＿＿＿＿
困っていること：
＿＿＿＿＿＿＿＿＿＿
変更前：
＿＿＿＿＿＿＿＿＿＿
変更後：
＿＿＿＿＿＿＿＿＿＿
エラー文：
＿＿＿＿＿＿＿＿＿＿
初心者にもわかるように、
原因と直し方を順番に教えてください。
例：選択肢を変えたら画面が崩れた
Google Apps Scriptでイベント受付アプリを作っています。
元のコードは、学校祭デジタル受付アプリです。
自分のテーマ：
オープンキャンパス
やりたいこと：
来場区分を高校生、保護者、高校の先生に変更したいです。
困っていること：
選択肢を変更したら、フォームの表示が崩れました。
変更後のコード：
<option value="高校生">高校生
<option value="保護者">保護者</option>
<option value="高校の先生">高校の先生</option>
初心者にもわかるように、
どこが間違っているか教えてください。
19. この節のまとめ
この節では、学校祭デジタル受付アプリを、自分のイベント用にカスタマイズしました。
大切なポイントは、次の通りです。
- 最終課題では、自分のイベントテーマを決める。
- 最低限、アプリ名、説明文、来場区分、来場目的、ボタン文字を変更する。
- 余裕があれば、色、管理者パスコード、目標人数も変更する。
- 変更前にバックアップやメモを取る。
- 1回に1か所ずつ変更する。
- 変更したら保存する。
- 必要に応じてデプロイを更新する。
- 受付フォーム、スプレッドシート、管理画面まで動作確認する。
- 提出時は、どこを変更したか、何が難しかったか、AIに何を質問したかも書く。
- エラーが出た場合は、変更前、変更後、エラー文をAIに伝える。
次の節では、完成したアプリを発表し、どこを変えたら何が変わったのかを振り返ります。
確認問題
問題1
最終課題で最低限変更する5つは何ですか。
回答
アプリ名、説明文、来場区分、来場目的、ボタン文字です。
問題2
コードを変更する前に、なぜバックアップやメモを取るとよいですか。
回答
エラーが出たときに、元の状態へ戻しやすくするためです。
問題3
来場区分や来場目的の選択肢を変更するときに使うHTMLタグは何ですか。
回答
<option> タグです。
問題4
パスコードを変更したあと、反映させるために実行する関数は何ですか。
回答
setAdminPasscode です。
問題5
最終課題の動作確認で見るべき3つの場所はどこですか。
回答
受付フォーム、スプレッドシート、管理画面です。