管理画面を開いてダッシュボードを見る | 学校祭デジタル受付アプリを作る | AI活用と意思決定デザイン

この節で学ぶこと

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

この節では、保存された受付データをもとに、管理画面のダッシュボードを確認します。

管理画面では、来場者数や来場区分、都道府県別、市区町村別、来場目的別などを、数字やグラフで見ることができます。

受付フォームで入力する
↓
スプレッドシートに保存される
↓
管理画面で集計される
↓
数字やグラフで確認できる

この節のゴールは、受付データがただ保存されるだけでなく、見やすく集計されることを体験することです。

管理画面とは

管理画面とは、来場者ではなく、学校祭の運営スタッフや先生が見る画面です。

来場者が使うのは受付フォームです。

来場者
→ 受付フォームを使う

先生・スタッフ
→ 管理画面を見る

管理画面では、受付状況を確認できます。

たとえば、次のようなことが分かります。

確認できること	例
今日何人受付したか	本日の来場者数
全部で何人受付したか	総受付数
保護者が何人いるか	保護者数
在校生が何人いるか	在校生数
どの地域から来たか	都道府県別、市区町村別
何を目的に来たか	来場目的別
何時ごろ受付が多いか	時間帯別推移
直近で誰が受付したか	最新受付一覧

1. 管理画面を開く

Webアプリの受付フォーム画面を開きます。

画面の下に、次のリンクがあります。

管理画面を見る

このリンクをクリックします。

すると、管理画面に移動します。

URLで開く方法

管理画面は、URLの最後に次のように付けても開けます。

?page=admin

たとえば、WebアプリのURLが次のようなものだったとします。

https://script.google.com/macros/s/xxxxxxxx/exec

管理画面を開く場合は、次のようにします。

https://script.google.com/macros/s/xxxxxxxx/exec?page=admin

初心者の方は、まず画面下の「管理画面を見る」をクリックすれば大丈夫です。

2. 管理者パスコードを入力する

管理画面を開くと、パスコード入力が表示されます。

これは、誰でも管理画面を見られないようにするためです。

初期状態の管理者パスコードは、次です。

この数字を入力して進みます。

なぜパスコードが必要なのか

管理画面には、来場者の情報や受付状況が表示されます。

そのため、来場者全員が見られる状態にするのはよくありません。

受付フォーム
→ 来場者が入力する画面

管理画面
→ 先生・スタッフが確認する画面

管理画面は、運営側だけが見るものとして考えます。

パスコードが違う場合

間違ったパスコードを入力すると、管理画面は表示されません。

次のようなエラーが出ます。

管理者パスコードが正しくありません。

この場合は、もう一度正しいパスコードを確認します。

初期設定では 2026 です。

3. 管理画面に表示される内容

パスコードが正しいと、管理画面が表示されます。

画面の見出しは、次のようになっています。

来場状況ダッシュボード

この画面には、受付データをもとにした集計が表示されます。

主な表示内容

表示名	内容
本日の来場者数	今日受付した人数
目標達成率	目標人数に対して何％達成しているか
総受付数	これまでに受付した人数
本日	今日の受付数
保護者	来場区分が保護者の人数
在校生	来場区分が在校生の人数
都道府県別	都道府県ごとの人数
市区町村別	市区町村ごとの人数
来場区分	保護者、在校生などの割合
時間帯別推移	何時台に受付が多いか
学年別	学年ごとの人数
来場目的	目的ごとの人数
最新受付	最近受付されたデータ

4. 本日の来場者数を確認する

管理画面で最初に目立つのは、本日の来場者数です。

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

本日の来場者数
3人

これは、今日受付フォームから送信された件数です。

前の節で3件入力していれば、3人のように表示されます。

総受付数との違い

管理画面には、本日 と 総受付数 があります。

表示	意味
本日	今日受付した人数
総受付数	シートに保存されているすべての受付数

授業中は同じ数字になることが多いですが、日をまたいで使うと違いが出ます。

5. 目標達成率を確認する

管理画面には、目標達成率も表示されます。

今回の完成コードでは、初期の目標人数は次になっています。

const DEFAULT_TARGET_VISITOR_COUNT = 4;

つまり、最初は4人を目標として考えます。

達成率の例

総受付数	目標人数	達成率
1人	4人	25%
2人	4人	50%
3人	4人	75%
4人	4人	100%

授業では、4件受付すると目標達成の演出を確認できます。

なぜ目標人数が4人なのか

実際の学校祭では、目標人数は100人、300人、500人などになるかもしれません。

しかし、授業中に100件入力するのは大変です。

そこで、最初は4人に設定されています。

授業中に確認しやすくするため、初期目標は4人

6. グラフを確認する

管理画面には、いくつかのグラフがあります。

グラフを見ることで、スプレッドシートの数字を見なくても、来場状況を直感的に確認できます。

都道府県別

都道府県別では、どの都道府県から来場者が多いかを確認できます。

たとえば、次のように表示されます。

東京都　1
岐阜県　1
愛知県　1

これは、受付フォームで選択した都道府県を集計しています。

市区町村別

市区町村別では、どの市区町村から来場者が多いかを確認できます。

千代田区　1
大垣市　1
名古屋市　1

地域イベントや学校説明会では、どの地域から来ているかを知る手がかりになります。

来場区分

来場区分では、保護者、在校生、卒業生、地域の方などの人数を確認できます。

保護者　1
在校生　1
卒業生　1

どんな人が来場しているのかを把握できます。

学年別

学年別では、入力された学年ごとの人数を確認できます。

1年　1
2年　1
未設定　1

学年が入力されていない場合は、未設定として集計されることがあります。

来場目的

来場目的では、来場者が何を目的に来たかを確認できます。

文化祭見学　1
模擬店利用　1
発表・展示の見学　1

学校祭後の振り返りにも使える情報です。

7. 最新受付を確認する

管理画面の下には、最新受付の一覧があります。

ここには、直近で受付されたデータが表示されます。

表示される項目

項目	内容
受付時刻	受付された日時
受付番号	発行された受付番号
氏名	氏名カナ
区分	来場区分
学年	学年
クラス	クラス
目的	来場目的
郵便番号	郵便番号
都道府県	都道府県
市区町村	市区町村
住所	都道府県、市区町村、住所詳細
出身学校	出身学校

8. 自動更新を確認する

管理画面は、一定時間ごとに自動で更新されます。

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

setInterval(() => {
  loadDashboard(false);
}, 10000);

これは、10秒ごとに管理画面のデータを読み込み直すという意味です。

初心者向けに言うと

10秒ごとに、新しい受付データがないか確認する

ということです。

そのため、別のタブで受付フォームから新しいデータを送信すると、管理画面側にも少し後で反映されます。

実験してみる

できる人は、次のように試してみましょう。

1. 受付フォームを別タブで開く
2. 管理画面も別タブで開く
3. 受付フォームから1件送信する
4. 管理画面に戻る
5. 数秒待つ
6. 来場者数が増えるか確認する

これで、自動更新の動きを確認できます。

9. 新しい来場者のアニメーション

管理画面を開いた状態で新しい受付が入ると、画面に次のような表示が出ることがあります。

新しい来場者

これは、新しい受付が登録されたことを知らせる演出です。

完成コードでは、受付数が増えたときにアニメーションを表示するようになっています。

どんなときに出るか

次の条件で表示されます。

管理画面を開いている
↓
別の画面から新しい受付が入る
↓
管理画面が自動更新される
↓
前回より受付数が増えている
↓
新しい来場者の表示が出る

この演出は、受付本部のモニターで表示しておくと、現場感が出ます。

10. 目標達成の演出

受付数が目標人数に到達すると、目標達成の演出が表示されます。

初期目標は4人なので、4件受付すると確認できます。

目標達成
来場者4人を達成しました。

授業では、この演出を見るために、4件ほど受付してみると分かりやすいです。

実際のイベントでは

実際のイベントで使う場合は、目標人数を変更できます。

たとえば、100人を目標にしたい場合は、Code.gs の次の部分を変更します。

const DEFAULT_TARGET_VISITOR_COUNT = 100;

ただし、すでに目標人数がスクリプトプロパティに保存されている場合は、別途設定を更新する必要があります。

この詳しい変更は、後の穴埋め演習で扱います。

11. 管理画面が表示されない場合

管理画面がうまく表示されない場合は、次を確認します。

状況	確認すること
パスコードが通らない	初期値 `2026` を入力しているか
データが0のまま	受付フォームから送信したか
グラフが出ない	受付データがあるか
更新エラーと出る	パスコードやGAS側の処理に問題がないか
画面が崩れる	`index.html` が途中で切れていないか

データがない場合

受付データがまだ1件もない場合、グラフには次のように表示されます。

まだデータがありません。

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

受付フォームから1件以上送信すると、集計が表示されます。

12. 管理画面のデータはどこから来ているか

管理画面のデータは、Code.gs の次の関数で作られています。

function getDashboardData() {

この関数は、スプレッドシートの 受付データ シートを読み込み、来場区分や都道府県などを数えています。

集計している部分

たとえば、来場区分を数えるために、次のような処理があります。

incrementCount(visitorTypeCounts, visitorType);

初心者向けに言うと、これは次の意味です。

来場区分ごとの人数を1つ増やす

保護者が1人来たら、保護者の数を1増やします。

在校生が1人来たら、在校生の数を1増やします。

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

この節では、管理画面、パスコード、グラフ、自動更新でつまずくことがあります。

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

質問例1：管理画面に入れない

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

管理画面を開くと、パスコードを求められます。
2026を入力しましたが、管理画面に入れません。

やったこと：
setupAppは実行しました。
受付フォームから1件送信しました。

エラー文：
ここにエラー文を貼る

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

質問例2：管理画面が0のまま

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

受付フォームから送信し、受付データシートにはデータがあります。
しかし、管理画面では来場者数が0のままです。

初心者にもわかるように、
どこを確認すればよいか教えてください。

質問例3：getDashboardDataの意味を聞く

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

Code.gsの getDashboardData() という関数が何をしているのか知りたいです。

初心者にもわかるように、
スプレッドシートのデータをどのように集計しているのか説明してください。

質問例4：10秒ごとの自動更新を聞く

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

setInterval(() => {
  loadDashboard(false);
}, 10000);

これは何をしているコードですか。
初心者にもわかるように説明してください。

14. この節のまとめ

この節では、管理画面を開いて、受付データがどのように集計されるかを確認しました。

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

管理画面は、先生やスタッフが見る画面。
管理画面は ?page=admin で開ける。
初期パスコードは 2026。
受付データがあると、来場者数やグラフが表示される。
本日の来場者数と総受付数は意味が違う。
初期目標人数は4人。
4件受付すると、目標達成の演出を確認できる。
管理画面は10秒ごとに自動更新される。
新しい受付が入ると、来場者通知が表示される。
グラフはスプレッドシートの受付データをもとに作られる。
管理画面の集計は getDashboardData() が担当している。
わからない時は、パスコード、受付データ、エラー文、関係するコードをAIに伝える。

次の節では、穴埋め演習として、アプリ名、説明文、ボタン文字、色、来場区分、来場目的などを自分用に変更していきます。

確認問題

問題1

管理画面は、どんな人が見る画面ですか。

回答

先生や学校祭スタッフなど、受付状況を確認する運営側の人が見る画面です。

問題2

管理画面に入るための初期パスコードは何ですか。

回答

2026 です。

問題3

初期状態の目標来場者数は何人ですか。

回答

4人です。

問題4

管理画面は何秒ごとに自動更新されますか。

回答

10秒ごとです。

問題5

管理画面用の集計データを作っている主な関数は何ですか。

回答

getDashboardData() です。