穴埋め演習：学校祭アプリを自分用に変更する | 学校祭デジタル受付アプリを作る | AI活用と意思決定デザイン

この節で学ぶこと

前の節では、管理画面を開いて、来場者数やグラフ、最新受付一覧を確認しました。

この節では、完成した学校祭デジタル受付アプリを、少しだけ自分用に変更します。

ここで大切なのは、プログラムを全部書き換えることではありません。

完成コードを使う
↓
一部分だけ変更する
↓
保存する
↓
画面の変化を見る

この流れで進めます。

初心者の方は、まず「どこを変えると、何が変わるのか」を体験することが大切です。

今回変更する場所

この節では、主に次の部分を変更します。

変更するもの	ファイル	難しさ
アプリ名	`index.html`	やさしい
画面の説明文	`index.html`	やさしい
ボタンの文字	`index.html`	やさしい
メインカラー	`index.html`	少しだけ難しい
来場区分	`index.html`	やさしい
来場目的	`index.html`	やさしい
管理者パスコード	`Code.gs`	少しだけ難しい
目標来場者数	`Code.gs`	少しだけ難しい

まずは、画面に見える部分から変更していきます。

1. 変更する前に大切なこと

コードを変更するときは、いきなり何か所も変えないようにします。

初心者のうちは、次の流れを守ります。

1か所だけ変える
↓
保存する
↓
デプロイを更新する
↓
画面を見る
↓
変化を確認する

一度にたくさん変更すると、エラーが出たときに、どこが原因かわからなくなります。

変更前にメモしておく

変更する前に、元のコードをメモしておくと安心です。

たとえば、アプリ名を変える前は、次のように書かれています。

<h1>学校祭デジタル受付</h1>

これを変更する場合、元に戻せるようにしておきます。

元の文字：
学校祭デジタル受付

変更後の文字：
オープンキャンパス受付

2. 演習1：アプリ名を変える

まずは、画面に表示されるアプリ名を変更します。

index.html の中から、次の部分を探します。

<title>学校祭デジタル受付</title>

これは、ブラウザのタブに表示されるタイトルです。

穴埋め

次の ＿＿＿＿＿＿＿＿＿＿ の部分を、自分のアプリ名に変えます。

<title>＿＿＿＿＿＿＿＿＿＿</title>

例

<title>オープンキャンパス受付</title>

画面の大きな見出しも変える

次に、画面に大きく表示される見出しを変えます。

index.html の中から、次を探します。

<h1>学校祭デジタル受付</h1>

穴埋め

<h1>＿＿＿＿＿＿＿＿＿＿</h1>

例

<h1>オープンキャンパス受付</h1>

確認すること

変更後、画面を開いて、見出しが変わっていれば成功です。

学校祭デジタル受付
↓
オープンキャンパス受付

3. 演習2：上の英語ラベルを変える

画面上部には、小さく英語のラベルがあります。

完成コードでは、次のように書かれています。

<p class="hero-label">School Festival Reception</p>

この部分を変えると、見出しの上にある小さな英語文字が変わります。

穴埋め

<p class="hero-label">＿＿＿＿＿＿＿＿＿＿</p>

例

<p class="hero-label">Open Campus Reception</p>

または、日本語でも大丈夫です。

<p class="hero-label">来場受付フォーム</p>

4. 演習3：説明文を変える

次に、受付フォームの説明文を変更します。

index.html の中から、次の部分を探します。

<p>
  ご来場ありがとうございます。必要事項を入力して受付を完了してください。
  氏名はカタカナで入力してください。
</p>

穴埋め

<p>
  ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
</p>

例1：オープンキャンパス用

<p>
  本日はオープンキャンパスにご参加いただきありがとうございます。
  必要事項を入力して受付を完了してください。
</p>

例2：作品展示会用

<p>
  卒業制作展へお越しいただきありがとうございます。
  ご来場記録のため、必要事項の入力をお願いします。
</p>

例3：地域イベント用

<p>
  本日は地域イベントにご参加いただきありがとうございます。
  受付後に表示される番号をスタッフへお見せください。
</p>

5. 演習4：ボタンの文字を変える

次に、送信ボタンの文字を変えます。

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でボタンの文字を一時的に変えています。

index.html の中に次のコードがあります。

submitButton.textContent = '受付中...';

送信に成功した後は、次のコードで元に戻しています。

submitButton.textContent = '受付する';

そのため、ボタンの文字を完全に変えたい場合は、こちらも合わせて変更すると自然です。

送信後に戻る文字も変える

次の部分を探します。

submitButton.textContent = '受付する';

これを変更します。

submitButton.textContent = '受付を完了する';

6. 演習5：メインカラーを変える

次に、アプリのメインカラーを変えます。

完成コードでは、黒に近い色がメインカラーとして使われています。

index.html のCSSの中から、次を探します。

--black: #111827;

この --black は、ボタンやグラフなどで使われています。

穴埋め

--black: ＿＿＿＿＿＿;

色の例

色	カラーコード
黒	`#111827`
青	`#2563eb`
緑	`#16a34a`
赤	`#dc2626`
紫	`#7c3aed`
オレンジ	`#ea580c`
ネイビー	`#1e3a8a`
ピンク	`#db2777`

例：青に変える

--black: #2563eb;

これで、ボタンや一部のグラフの色が青になります。

注意点

-black という名前のままでも、色は変えられます。本格的には変数名も --main などに変えると分かりやすいですが、初心者の授業では、まず色だけ変えれば大丈夫です。

7. 演習6：背景色を変える

背景色も変更できます。

CSSの中から、次を探します。

--bg: #f5f6f8;

これは、画面全体の背景色です。

穴埋め

--bg: ＿＿＿＿＿＿;

例

--bg: #f8fafc;

または、少し温かい色にする場合です。

--bg: #faf7f2;

背景色の例

雰囲気	カラーコード
明るいグレー	`#f5f6f8`
かなり薄い青	`#f8fafc`
クリーム色	`#faf7f2`
薄い緑	`#f0fdf4`
薄い紫	`#faf5ff`

8. 演習7：来場区分を変える

次に、来場区分の選択肢を変更します。

index.html の中から、次の部分を探します。

<option value="保護者">保護者</option>
<option value="在校生">在校生</option>
<option value="卒業生">卒業生</option>
<option value="地域の方">地域の方</option>
<option value="学校関係者">学校関係者</option>
<option value="その他">その他</option>

穴埋め

<option value="＿＿＿＿">＿＿＿＿</option>

value と、画面に表示される文字は、基本的に同じにします。

例1：オープンキャンパス用

<option value="高校生">高校生</option>
<option value="保護者">保護者</option>
<option value="先生">先生</option>
<option value="卒業生">卒業生</option>
<option value="その他">その他</option>

例2：展示会用

<option value="一般来場者">一般来場者</option>
<option value="学生">学生</option>
<option value="保護者">保護者</option>
<option value="企業関係者">企業関係者</option>
<option value="その他">その他</option>

例3：地域イベント用

<option value="一般参加">一般参加</option>
<option value="出店者">出店者</option>
<option value="スタッフ">スタッフ</option>
<option value="招待者">招待者</option>
<option value="その他">その他</option>

9. 演習8：来場目的を変える

次に、来場目的の選択肢を変えます。

index.html の中から、次を探します。

<option value="文化祭見学">文化祭見学</option>
<option value="発表・展示の見学">発表・展示の見学</option>
<option value="模擬店利用">模擬店利用</option>
<option value="学校説明会">学校説明会</option>
<option value="生徒の応援">生徒の応援</option>
<option value="その他">その他</option>

穴埋め

<option value="＿＿＿＿">＿＿＿＿</option>

例1：オープンキャンパス用

<option value="学校説明を聞く">学校説明を聞く</option>
<option value="体験授業に参加">体験授業に参加</option>
<option value="施設見学">施設見学</option>
<option value="個別相談">個別相談</option>
<option value="その他">その他</option>

例2：作品展示会用

<option value="作品鑑賞">作品鑑賞</option>
<option value="学生作品の審査">学生作品の審査</option>
<option value="企業見学">企業見学</option>
<option value="知人の応援">知人の応援</option>
<option value="その他">その他</option>

例3：フードイベント用

<option value="飲食">飲食</option>
<option value="出店ブース見学">出店ブース見学</option>
<option value="イベント参加">イベント参加</option>
<option value="友人の応援">友人の応援</option>
<option value="その他">その他</option>

10. 演習9：管理者パスコードを変える

次に、管理者パスコードを変更します。

これは Code.gs の中にあります。

次の部分を探します。

function setAdminPasscode() {
  const passcode = '2026';

  PropertiesService
    .getScriptProperties()
    .setProperty(ADMIN_PASSCODE_PROPERTY_KEY, passcode);
}

変更するのは、この部分です。

const passcode = '2026';

穴埋め

const passcode = '＿＿＿＿';

例

const passcode = '1234';

または、

const passcode = '5678';

重要：変更しただけでは反映されないことがある

このパスコードは、PropertiesService という場所に保存されています。

そのため、コードを書き換えただけでは、すぐに管理画面のパスコードが変わらないことがあります。

変更したら、次のどちらかを実行します。

setAdminPasscode

または、

setupApp

手順

1. Code.gsで passcode を変更する
2. 保存する
3. 関数選択メニューで setAdminPasscode を選ぶ
4. 実行する
5. Webアプリの管理画面を開く
6. 新しいパスコードで入れるか確認する

11. 演習10：目標来場者数を変える

次に、管理画面の目標人数を変えます。

Code.gs の上の方に、次のコードがあります。

const DEFAULT_TARGET_VISITOR_COUNT = 4;

この 4 が、初期状態の目標来場者数です。

穴埋め

const DEFAULT_TARGET_VISITOR_COUNT = ＿＿;

例

const DEFAULT_TARGET_VISITOR_COUNT = 100;

注意点

目標人数も、スクリプトプロパティに保存されている場合があります。

そのため、すでに一度 setupApp() を実行していると、DEFAULT_TARGET_VISITOR_COUNT を変えただけでは反映されないことがあります。

今回の初心者向け授業では、まず次のことを覚えてください。

初期値を書き換える場所は DEFAULT_TARGET_VISITOR_COUNT

実際に反映したい場合は、保存済みのプロパティも更新する必要があります。

授業では、先生の指示に従って進めます。

目標人数を確実に変更する関数を追加する場合

目標人数を簡単に変更したい場合は、Code.gs に次の関数を追加してもよいです。

function setTargetVisitorCountForLesson() {
  const targetCount = 100;

  PropertiesService
    .getScriptProperties()
    .setProperty(TARGET_VISITOR_COUNT_PROPERTY_KEY, String(targetCount));
}

この場合、targetCount の数字を変更してから、この関数を実行します。

穴埋め

function setTargetVisitorCountForLesson() {
  const targetCount = ＿＿;

  PropertiesService
    .getScriptProperties()
    .setProperty(TARGET_VISITOR_COUNT_PROPERTY_KEY, String(targetCount));
}

12. 変更したらデプロイを更新する

index.html や Code.gs を変更したら、保存します。

ただし、公開済みのWebアプリでは、保存しただけでは反映されないことがあります。

その場合は、デプロイを更新します。

デプロイ更新の流れ

1. 右上の「デプロイ」をクリック
2. 「デプロイを管理」をクリック
3. 編集アイコンをクリック
4. バージョンで「新バージョン」を選ぶ
5. 説明を入力する
6. 「デプロイ」をクリック
7. WebアプリのURLを再読み込みする

変更が反映されないとき

画面が変わらない場合は、次を確認します。

保存したか
デプロイを更新したか
ブラウザを再読み込みしたか
古いURLを見ていないか

13. 最終チェック

変更ができたら、次の項目を確認します。

確認項目	できたら○
アプリ名を変更した
説明文を変更した
ボタン文字を変更した
メインカラーを変更した
来場区分を変更した
来場目的を変更した
管理者パスコードを変更した
新しいパスコードで管理画面に入れた
受付フォームを送信できた
スプレッドシートに保存された
管理画面に反映された

すべてできなくても大丈夫です。

まずは、アプリ名、説明文、ボタン文字の3つが変更できれば十分です。

14. よくあるつまずき

つまずき1：コードを変えたのに画面が変わらない

次を確認します。

保存したか
デプロイを更新したか
ブラウザを再読み込みしたか

特に、Apps ScriptのWebアプリでは、デプロイ更新が必要なことがあります。

つまずき2：パスコードを変えたのに反映されない

パスコードは、コード内の文字だけでなく、スクリプトプロパティにも保存されています。

変更後は、次を実行します。

setAdminPasscode

つまずき3：来場区分を変えたら管理画面の保護者・在校生が0になる

完成コードでは、管理画面のサマリーに次のような表示があります。

visitorTypeCounts['保護者'] || 0
visitorTypeCounts['在校生'] || 0

そのため、来場区分から「保護者」「在校生」を消すと、サマリーの保護者・在校生は0になります。

これはエラーではありません。

来場区分グラフには、新しく変更した選択肢が表示されます。

つまずき4：引用符を消してしまった

JavaScriptでは、文字を ' ' や " " で囲む必要があります。

たとえば、これは正しいです。

const passcode = '1234';

これは間違いです。

const passcode = 1234;

数字だけなら動く場合もありますが、このアプリでは文字として扱うため、引用符をつけます。

つまずき5：HTMLのタグを壊してしまった

HTMLでは、開始タグと終了タグがあります。

たとえば、これは正しいです。

<h1>オープンキャンパス受付</h1>

これは間違いです。

<h1>オープンキャンパス受付

</h1> がないと、画面が崩れる原因になります。

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

この節では、コード変更や反映確認でつまずくことがあります。

AIに聞くときは、変更前、変更後、困っていることをセットで伝えます。

質問例1：タイトル変更が反映されない

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

index.htmlの見出しを変更しました。

変更前：
<h1>学校祭デジタル受付</h1>

変更後：
<h1>オープンキャンパス受付</h1>

保存しましたが、Webアプリの画面では変わっていません。

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

質問例2：パスコード変更が反映されない

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

Code.gsで管理者パスコードを変更しました。

変更前：
const passcode = '2026';

変更後：
const passcode = '1234';

しかし、管理画面では1234で入れません。

初心者にもわかるように、
なぜ反映されないのか、何を実行すればよいか教えてください。

質問例3：来場区分を変更したい

Google Apps Scriptのindex.htmlで、来場区分の選択肢を変更したいです。

現在：
<option value="保護者">保護者</option>
<option value="在校生">在校生</option>

変更後：
<option value="一般来場者">一般来場者</option>
<option value="スタッフ">スタッフ</option>

初心者にもわかるように、
どこをどのように変えればよいか説明してください。

質問例4：色を変えたい

Google Apps Scriptで作ったWebアプリの見た目を変更しています。

index.htmlのCSSで、
ボタンの色を青にしたいです。

今のコード：
--black: #111827;

これを青に変えるにはどうすればよいですか。
初心者にもわかるように説明してください。

16. この節のまとめ

この節では、完成した学校祭デジタル受付アプリを、自分用に変更しました。

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

初心者は、1回に1か所だけ変更する。
変更したら保存する。
公開画面に反映されない場合は、デプロイを更新する。
アプリ名は title と h1 を変更する。
説明文は hero 内の p を変更する。
ボタン文字は button と、JavaScript内の戻す文字も確認する。
メインカラーは -black のカラーコードを変更する。
背景色は -bg を変更する。
来場区分と来場目的は option を変更する。
管理者パスコードは setAdminPasscode() 内の passcode を変更する。
パスコード変更後は、setAdminPasscode を実行する。
目標人数は DEFAULT_TARGET_VISITOR_COUNT を確認する。
わからない時は、変更前、変更後、エラー文をAIに伝える。

次の節では、エラーが出たときや意味がわからないときに、AIへどのように質問すればよいかを詳しく学びます。

確認問題

問題1

初心者がコードを変更するとき、なぜ1回に1か所だけ変更するのがよいですか。

回答

エラーが出たときに、どこが原因か分かりやすくするためです。

問題2

画面の大きな見出しを変更するには、どのタグを変更しますか。

回答

<h1> タグを変更します。

問題3

ボタンやグラフのメインカラーを変えるには、どのCSS変数を変更しますか。

回答

-black を変更します。

問題4

管理者パスコードを変更した後、反映させるために実行する関数は何ですか。

回答

setAdminPasscode です。場合によっては setupApp を実行しても反映できます。

問題5

コードを変更したのにWebアプリの画面が変わらない場合、何を確認しますか。

回答

保存したか、デプロイを更新したか、ブラウザを再読み込みしたかを確認します。

この節で学ぶこと

前の節では、管理画面を開いて、来場者数やグラフ、最新受付一覧を確認しました。

この節では、完成した学校祭デジタル受付アプリを、少しだけ自分用に変更します。

ここで大切なのは、プログラムを全部書き換えることではありません。

完成コードを使う
↓
一部分だけ変更する
↓
保存する
↓
画面の変化を見る

この流れで進めます。

初心者の方は、まず「どこを変えると、何が変わるのか」を体験することが大切です。

今回変更する場所

この節では、主に次の部分を変更します。

変更するもの	ファイル	難しさ
アプリ名	`index.html`	やさしい
画面の説明文	`index.html`	やさしい
ボタンの文字	`index.html`	やさしい
メインカラー	`index.html`	少しだけ難しい
来場区分	`index.html`	やさしい
来場目的	`index.html`	やさしい
管理者パスコード	`Code.gs`	少しだけ難しい
目標来場者数	`Code.gs`	少しだけ難しい

まずは、画面に見える部分から変更していきます。

1. 変更する前に大切なこと

コードを変更するときは、いきなり何か所も変えないようにします。

初心者のうちは、次の流れを守ります。

1か所だけ変える
↓
保存する
↓
デプロイを更新する
↓
画面を見る
↓
変化を確認する

一度にたくさん変更すると、エラーが出たときに、どこが原因かわからなくなります。

変更前にメモしておく

変更する前に、元のコードをメモしておくと安心です。

たとえば、アプリ名を変える前は、次のように書かれています。

<h1>学校祭デジタル受付</h1>

これを変更する場合、元に戻せるようにしておきます。

元の文字：
学校祭デジタル受付

変更後の文字：
オープンキャンパス受付

2. 演習1：アプリ名を変える

まずは、画面に表示されるアプリ名を変更します。

index.html の中から、次の部分を探します。

<title>学校祭デジタル受付</title>

これは、ブラウザのタブに表示されるタイトルです。

穴埋め

次の ＿＿＿＿＿＿＿＿＿＿ の部分を、自分のアプリ名に変えます。

<title>＿＿＿＿＿＿＿＿＿＿</title>

例

<title>オープンキャンパス受付</title>

画面の大きな見出しも変える

次に、画面に大きく表示される見出しを変えます。

index.html の中から、次を探します。

<h1>学校祭デジタル受付</h1>

穴埋め

<h1>＿＿＿＿＿＿＿＿＿＿</h1>

例

<h1>オープンキャンパス受付</h1>

確認すること

変更後、画面を開いて、見出しが変わっていれば成功です。

学校祭デジタル受付
↓
オープンキャンパス受付

3. 演習2：上の英語ラベルを変える

画面上部には、小さく英語のラベルがあります。

完成コードでは、次のように書かれています。

<p class="hero-label">School Festival Reception</p>

この部分を変えると、見出しの上にある小さな英語文字が変わります。

穴埋め

<p class="hero-label">＿＿＿＿＿＿＿＿＿＿</p>

例

<p class="hero-label">Open Campus Reception</p>

または、日本語でも大丈夫です。

<p class="hero-label">来場受付フォーム</p>

4. 演習3：説明文を変える

次に、受付フォームの説明文を変更します。

index.html の中から、次の部分を探します。

<p>
  ご来場ありがとうございます。必要事項を入力して受付を完了してください。
  氏名はカタカナで入力してください。
</p>

穴埋め

<p>
  ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
</p>

例1：オープンキャンパス用

<p>
  本日はオープンキャンパスにご参加いただきありがとうございます。
  必要事項を入力して受付を完了してください。
</p>

例2：作品展示会用

<p>
  卒業制作展へお越しいただきありがとうございます。
  ご来場記録のため、必要事項の入力をお願いします。
</p>

例3：地域イベント用

<p>
  本日は地域イベントにご参加いただきありがとうございます。
  受付後に表示される番号をスタッフへお見せください。
</p>

5. 演習4：ボタンの文字を変える

次に、送信ボタンの文字を変えます。

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でボタンの文字を一時的に変えています。

index.html の中に次のコードがあります。

submitButton.textContent = '受付中...';

送信に成功した後は、次のコードで元に戻しています。

submitButton.textContent = '受付する';

そのため、ボタンの文字を完全に変えたい場合は、こちらも合わせて変更すると自然です。

送信後に戻る文字も変える

次の部分を探します。

submitButton.textContent = '受付する';

これを変更します。

submitButton.textContent = '受付を完了する';

6. 演習5：メインカラーを変える

次に、アプリのメインカラーを変えます。

完成コードでは、黒に近い色がメインカラーとして使われています。

index.html のCSSの中から、次を探します。

--black: #111827;

この --black は、ボタンやグラフなどで使われています。

穴埋め

--black: ＿＿＿＿＿＿;

色の例

色	カラーコード
黒	`#111827`
青	`#2563eb`
緑	`#16a34a`
赤	`#dc2626`
紫	`#7c3aed`
オレンジ	`#ea580c`
ネイビー	`#1e3a8a`
ピンク	`#db2777`

例：青に変える

--black: #2563eb;

これで、ボタンや一部のグラフの色が青になります。

注意点

-black という名前のままでも、色は変えられます。本格的には変数名も --main などに変えると分かりやすいですが、初心者の授業では、まず色だけ変えれば大丈夫です。

7. 演習6：背景色を変える

背景色も変更できます。

CSSの中から、次を探します。

--bg: #f5f6f8;

これは、画面全体の背景色です。

穴埋め

--bg: ＿＿＿＿＿＿;

例

--bg: #f8fafc;

または、少し温かい色にする場合です。

--bg: #faf7f2;

背景色の例

雰囲気	カラーコード
明るいグレー	`#f5f6f8`
かなり薄い青	`#f8fafc`
クリーム色	`#faf7f2`
薄い緑	`#f0fdf4`
薄い紫	`#faf5ff`

8. 演習7：来場区分を変える

次に、来場区分の選択肢を変更します。

index.html の中から、次の部分を探します。

<option value="保護者">保護者</option>
<option value="在校生">在校生</option>
<option value="卒業生">卒業生</option>
<option value="地域の方">地域の方</option>
<option value="学校関係者">学校関係者</option>
<option value="その他">その他</option>

穴埋め

<option value="＿＿＿＿">＿＿＿＿</option>

value と、画面に表示される文字は、基本的に同じにします。

例1：オープンキャンパス用

<option value="高校生">高校生</option>
<option value="保護者">保護者</option>
<option value="先生">先生</option>
<option value="卒業生">卒業生</option>
<option value="その他">その他</option>

例2：展示会用

<option value="一般来場者">一般来場者</option>
<option value="学生">学生</option>
<option value="保護者">保護者</option>
<option value="企業関係者">企業関係者</option>
<option value="その他">その他</option>

例3：地域イベント用

<option value="一般参加">一般参加</option>
<option value="出店者">出店者</option>
<option value="スタッフ">スタッフ</option>
<option value="招待者">招待者</option>
<option value="その他">その他</option>

9. 演習8：来場目的を変える

次に、来場目的の選択肢を変えます。

index.html の中から、次を探します。

<option value="文化祭見学">文化祭見学</option>
<option value="発表・展示の見学">発表・展示の見学</option>
<option value="模擬店利用">模擬店利用</option>
<option value="学校説明会">学校説明会</option>
<option value="生徒の応援">生徒の応援</option>
<option value="その他">その他</option>

穴埋め

<option value="＿＿＿＿">＿＿＿＿</option>

例1：オープンキャンパス用

<option value="学校説明を聞く">学校説明を聞く</option>
<option value="体験授業に参加">体験授業に参加</option>
<option value="施設見学">施設見学</option>
<option value="個別相談">個別相談</option>
<option value="その他">その他</option>

例2：作品展示会用

<option value="作品鑑賞">作品鑑賞</option>
<option value="学生作品の審査">学生作品の審査</option>
<option value="企業見学">企業見学</option>
<option value="知人の応援">知人の応援</option>
<option value="その他">その他</option>

例3：フードイベント用

<option value="飲食">飲食</option>
<option value="出店ブース見学">出店ブース見学</option>
<option value="イベント参加">イベント参加</option>
<option value="友人の応援">友人の応援</option>
<option value="その他">その他</option>

10. 演習9：管理者パスコードを変える

次に、管理者パスコードを変更します。

これは Code.gs の中にあります。

次の部分を探します。

function setAdminPasscode() {
  const passcode = '2026';

  PropertiesService
    .getScriptProperties()
    .setProperty(ADMIN_PASSCODE_PROPERTY_KEY, passcode);
}

変更するのは、この部分です。

const passcode = '2026';

穴埋め

const passcode = '＿＿＿＿';

例

const passcode = '1234';

または、

const passcode = '5678';

重要：変更しただけでは反映されないことがある

このパスコードは、PropertiesService という場所に保存されています。

そのため、コードを書き換えただけでは、すぐに管理画面のパスコードが変わらないことがあります。

変更したら、次のどちらかを実行します。

setAdminPasscode

または、

setupApp

手順

1. Code.gsで passcode を変更する
2. 保存する
3. 関数選択メニューで setAdminPasscode を選ぶ
4. 実行する
5. Webアプリの管理画面を開く
6. 新しいパスコードで入れるか確認する

11. 演習10：目標来場者数を変える

次に、管理画面の目標人数を変えます。

Code.gs の上の方に、次のコードがあります。

const DEFAULT_TARGET_VISITOR_COUNT = 4;

この 4 が、初期状態の目標来場者数です。

穴埋め

const DEFAULT_TARGET_VISITOR_COUNT = ＿＿;

例

const DEFAULT_TARGET_VISITOR_COUNT = 100;

注意点

目標人数も、スクリプトプロパティに保存されている場合があります。

そのため、すでに一度 setupApp() を実行していると、DEFAULT_TARGET_VISITOR_COUNT を変えただけでは反映されないことがあります。

今回の初心者向け授業では、まず次のことを覚えてください。

初期値を書き換える場所は DEFAULT_TARGET_VISITOR_COUNT

実際に反映したい場合は、保存済みのプロパティも更新する必要があります。

授業では、先生の指示に従って進めます。

目標人数を確実に変更する関数を追加する場合

目標人数を簡単に変更したい場合は、Code.gs に次の関数を追加してもよいです。

function setTargetVisitorCountForLesson() {
  const targetCount = 100;

  PropertiesService
    .getScriptProperties()
    .setProperty(TARGET_VISITOR_COUNT_PROPERTY_KEY, String(targetCount));
}

この場合、targetCount の数字を変更してから、この関数を実行します。

穴埋め

function setTargetVisitorCountForLesson() {
  const targetCount = ＿＿;

  PropertiesService
    .getScriptProperties()
    .setProperty(TARGET_VISITOR_COUNT_PROPERTY_KEY, String(targetCount));
}

12. 変更したらデプロイを更新する

index.html や Code.gs を変更したら、保存します。

ただし、公開済みのWebアプリでは、保存しただけでは反映されないことがあります。

その場合は、デプロイを更新します。

デプロイ更新の流れ

1. 右上の「デプロイ」をクリック
2. 「デプロイを管理」をクリック
3. 編集アイコンをクリック
4. バージョンで「新バージョン」を選ぶ
5. 説明を入力する
6. 「デプロイ」をクリック
7. WebアプリのURLを再読み込みする

変更が反映されないとき

画面が変わらない場合は、次を確認します。

保存したか
デプロイを更新したか
ブラウザを再読み込みしたか
古いURLを見ていないか

13. 最終チェック

変更ができたら、次の項目を確認します。

確認項目	できたら○
アプリ名を変更した
説明文を変更した
ボタン文字を変更した
メインカラーを変更した
来場区分を変更した
来場目的を変更した
管理者パスコードを変更した
新しいパスコードで管理画面に入れた
受付フォームを送信できた
スプレッドシートに保存された
管理画面に反映された

すべてできなくても大丈夫です。

まずは、アプリ名、説明文、ボタン文字の3つが変更できれば十分です。

14. よくあるつまずき

つまずき1：コードを変えたのに画面が変わらない

次を確認します。

保存したか
デプロイを更新したか
ブラウザを再読み込みしたか

特に、Apps ScriptのWebアプリでは、デプロイ更新が必要なことがあります。

つまずき2：パスコードを変えたのに反映されない

パスコードは、コード内の文字だけでなく、スクリプトプロパティにも保存されています。

変更後は、次を実行します。

setAdminPasscode

つまずき3：来場区分を変えたら管理画面の保護者・在校生が0になる

完成コードでは、管理画面のサマリーに次のような表示があります。

visitorTypeCounts['保護者'] || 0
visitorTypeCounts['在校生'] || 0

そのため、来場区分から「保護者」「在校生」を消すと、サマリーの保護者・在校生は0になります。

これはエラーではありません。

来場区分グラフには、新しく変更した選択肢が表示されます。

つまずき4：引用符を消してしまった

JavaScriptでは、文字を ' ' や " " で囲む必要があります。

たとえば、これは正しいです。

const passcode = '1234';

これは間違いです。

const passcode = 1234;

数字だけなら動く場合もありますが、このアプリでは文字として扱うため、引用符をつけます。

つまずき5：HTMLのタグを壊してしまった

HTMLでは、開始タグと終了タグがあります。

たとえば、これは正しいです。

<h1>オープンキャンパス受付</h1>

これは間違いです。

<h1>オープンキャンパス受付

</h1> がないと、画面が崩れる原因になります。

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

この節では、コード変更や反映確認でつまずくことがあります。

AIに聞くときは、変更前、変更後、困っていることをセットで伝えます。

質問例1：タイトル変更が反映されない

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

index.htmlの見出しを変更しました。

変更前：
<h1>学校祭デジタル受付</h1>

変更後：
<h1>オープンキャンパス受付</h1>

保存しましたが、Webアプリの画面では変わっていません。

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

質問例2：パスコード変更が反映されない

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

Code.gsで管理者パスコードを変更しました。

変更前：
const passcode = '2026';

変更後：
const passcode = '1234';

しかし、管理画面では1234で入れません。

初心者にもわかるように、
なぜ反映されないのか、何を実行すればよいか教えてください。

質問例3：来場区分を変更したい

Google Apps Scriptのindex.htmlで、来場区分の選択肢を変更したいです。

現在：
<option value="保護者">保護者</option>
<option value="在校生">在校生</option>

変更後：
<option value="一般来場者">一般来場者</option>
<option value="スタッフ">スタッフ</option>

初心者にもわかるように、
どこをどのように変えればよいか説明してください。

質問例4：色を変えたい

Google Apps Scriptで作ったWebアプリの見た目を変更しています。

index.htmlのCSSで、
ボタンの色を青にしたいです。

今のコード：
--black: #111827;

これを青に変えるにはどうすればよいですか。
初心者にもわかるように説明してください。

16. この節のまとめ

この節では、完成した学校祭デジタル受付アプリを、自分用に変更しました。

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

初心者は、1回に1か所だけ変更する。
変更したら保存する。
公開画面に反映されない場合は、デプロイを更新する。
アプリ名は title と h1 を変更する。
説明文は hero 内の p を変更する。
ボタン文字は button と、JavaScript内の戻す文字も確認する。
メインカラーは -black のカラーコードを変更する。
背景色は -bg を変更する。
来場区分と来場目的は option を変更する。
管理者パスコードは setAdminPasscode() 内の passcode を変更する。
パスコード変更後は、setAdminPasscode を実行する。
目標人数は DEFAULT_TARGET_VISITOR_COUNT を確認する。
わからない時は、変更前、変更後、エラー文をAIに伝える。

次の節では、エラーが出たときや意味がわからないときに、AIへどのように質問すればよいかを詳しく学びます。

確認問題

問題1

初心者がコードを変更するとき、なぜ1回に1か所だけ変更するのがよいですか。

回答

エラーが出たときに、どこが原因か分かりやすくするためです。

問題2

画面の大きな見出しを変更するには、どのタグを変更しますか。

回答

<h1> タグを変更します。

問題3

ボタンやグラフのメインカラーを変えるには、どのCSS変数を変更しますか。

回答

-black を変更します。

問題4

管理者パスコードを変更した後、反映させるために実行する関数は何ですか。

回答

setAdminPasscode です。場合によっては setupApp を実行しても反映できます。

問題5

コードを変更したのにWebアプリの画面が変わらない場合、何を確認しますか。

回答

保存したか、デプロイを更新したか、ブラウザを再読み込みしたかを確認します。