筑波大学技術報告
34 : 28 - 32 , 2014

夏休み自由研究お助け隊（Web 担当として）
高野 昭子、中山 勝
筑波大学システム情報工学等技術室〒305-8573 茨城県つくば市天王台 1-1-1

概要

2.1 トップページ

1

夏休み自由研究お助け隊（以下、お助け隊とする）
は、筑波大学の技術職員が中学生を対象に、提供するテーマを 2 日間それぞれ、午前午後の計 4 回の時間帯に分けて実施している。今年は、Web ページからのみ、参加の申し込みを受け付けることになった。そのため、参加希望者に、応募状況をリアルタイムに、伝えることができるページ構成を検討した。
実際には、PHP プログラムで MySQL にアクセスし、各テーマの時間帯ごとに人数を計算、その結果をテーマページに反映させた。
キーワード：夏休み自由研究お助け隊、PHP、MySQL

図 2. トップページの構成

１．はじめに

図 2 に示すように、ページは左右 2 面構成にした。右面は、お助け隊のコンセプト、開催日程、会場、リーフレットなどの固定情報を掲載した。左面に最新情報として、提供するテーマ、参加申込み受付期間などを随時追加した。申し込みやテーマなどの詳細ページは、最新の情報にリンク先を設定することで、移動できるようにした。トップページの画面を図 3 に示す。

お助け隊の参加申込みは、Web ページ、Fax 送信、郵送と 3 つの方法を利用していた。参加申し込み方法が複数あることから、応募人数と受入人数との把握に問題が生じていた。近年では、図 1 に示すように、Web ページからの申し込みが増加している。また、昨年度のアンケートでほとんどの参加者から、Web 申し込みが可能と回答された。以上のことをふまえ、お助け隊実行委員会で、申し込み方法について検討し、Web ページからの申し込みに、一本化することが決定した。実行委員会の決定を受け、Webページのテーマ情報に応募状況を追加した点などを報告する。

図 3. トップページの画面
図 1. 申し込み方法別参加人数

2.2 実施要綱

２．Web ページの構成

実施要綱は、対象地区の中学校に配布していた、リーフレットの内容と同じものを掲載した。掲載内
容については、実行委員会で検討を重ね、申し込み者が読んでわかりやすいように、要点を簡潔にまとめたものとなった。実施要綱には、参加についての構成は、トップページ（実施要綱を含む）と提供するテーマ、申込み画面およびその他とに分けた。
そして、統一感を持たせるため、無料 CSS ファイ
ル2を利用してお助け隊用ページの体裁を整えた。
1
2

http://www.tech.tsukuba.ac.jp/summer/
http://www.coolwebwindow.com/template/public.php

28筑波大学技術報告
34 : 28 - 32 , 2014

それぞれが、工夫をこらして作成したものを掲載しそれぞれが、工夫をこらして作成したものを掲載した。今年から追加情報として、前年度の実施風景、た。今年から追加情報として、前年度の実施風景、感想などを掲載し、より研究内容が伝わるようにし感想などを掲載し、より研究内容が伝わるようにした。参加希望者にとって、最も重要な応募状況は残た。参加希望者にとって、最も重要な応募状況は残り座席数として、各時間帯ごとに逐次更新した。申り座席数として、各時間帯ごとに逐次更新した。申し込みに関しては、残り数がし込みに関しては、残り数が 00 人になると応募でき人になると応募できないようにした。さらにセルの色を変えて、応募でないようにした。さらにセルの色を変えて、応募できないことをわかりやすくした。詳細ページの最後きないことをわかりやすくした。詳細ページの最後には申し込みボタンを用意し、そこから申し込みには申し込みボタンを用意し、そこから申し込みフォームに移動するようにした。なお、そのページフォームに移動するようにした。なお、そのページを図を図 88 に示す。に示す。
お助け隊のイベント実施後には、実施風景、参加お助け隊のイベント実施後には、実施風景、参加者の声を今年度のものに更新して表示した。
者の声を今年度のものに更新して表示した。

図4.
図4. 実施要綱の画面
実施要綱の画面
注意点、申し込み方法などの記載があるため、申し注意点、申し込み方法などの記載があるため、申し込みの前に、必ず目を通してもらえるような注意書込みの前に、必ず目を通してもらえるような注意書きも添えた。このページの画面を図きも添えた。このページの画面を図 44 に示す。に示す。

2.3 提供するテーマ
提供するテーマを紹介するページは、2提供するテーマを紹介するページは、2 部構成と部構成とした。まず、図した。まず、図 55 で示す構成で、テーマの簡単な説で示す構成で、テーマの簡単な説明文と画像の組合せで一覧を作成した。その中で、明文と画像の組合せで一覧を作成した。その中で、興味のあるテーマのセルをクリックすることで、各興味のあるテーマのセルをクリックすることで、各テーマの詳細ページが開く形式にした。テーマ一覧
テーマの詳細ページが開く形式にした。テーマ一覧の画面を図
今回提供したテーマはの画面を図 66 に示す。に示す。
今回提供したテーマは 16
16 で、で、そのうち、新規テーマがそのうち、新規テーマが 22 つあった。
つあった。
図図 7.
7. テーマ詳細の構成
テーマ詳細の構成図
図 5.
5. テーマ一覧の構成
テーマ一覧の構成

図
図 8.
8. テーマ詳細の画面
テーマ詳細の画面

図
図 6.
6. テーマ一覧の画面
テーマ一覧の画面
テーマ詳細ページは、図テーマ詳細ページは、図 77 のような構成にした。のような構成にした。
ページ管理を容易にするために、掲載内容をデータページ管理を容易にするために、掲載内容をデータベース化した。テーマの説明などは、テーマ担当者ベース化した。テーマの説明などは、テーマ担当者

29筑波大学技術報告
34 : 28 - 32 , 2014

2.4 申し込み画面

参加者の入力データを登録するために、申し込み画面、入力データ確認画面、登録完了画面の 3 種類を用意した。
1．申し込み画面（図 10）では、申し込みデータを入力する。

申し込み画面へのアクセス方法を 2 つ用意した。
1 つ目は、それぞれのページのサブメニューから、「申し込み」をクリックして、テーマ選択画面(図 9)

図 9. 申し込みテーマの選択画面
図 11．入力データ確認画面（1）

図 12. 登録完了画面

図 10. 申し込み画面

2．入力データ確認画面では、入力データの誤りチェック、二重登録チェックをする（図 11）。
3．登録完了画面では、受け付け番号を発行する。
受け付け番号は申し込み者に控えていただき、問い合せなどに利用していただくように表示した(図12)。

を開き、テーマを選択した後に、申し込み画面に移動する。2 つ目はテーマの詳細ページの申し込みボタンから申し込み画面に移動する。申し込み画面（図10）はデータベースを利用するため、PHP プログラムで作成した。
参加申し込みの受付開始、終了はプログラムに時間設定をすることで自動的に処理している。
申し込み画面から入力されるデータの構成を表 1に示す。

2.5 その他
その他のページとして、筑波大学アクセスマップ3と問い合わせ先のページを用意した。

表 1. 申し込み者入力データ

３．Web ページの更新
トップページは逐次追加し、最新情報を掲載した。
固定情報は実施前と実施後で挨拶文を変更した。そして、実施後には、申し込み画面に移動するリンクを外した。実施後の情報として、実施風景の写真は当日のものに、参加者の感想はアンケートをもとに差し替えた。写真は開催日にスタッフが撮影したものをテーマ担当者に確認のうえ掲載した。

330

http://www.tsukuba.ac.jp/access/map_central.html

筑波大学技術報告
34 : 28 - 32 , 2014

４．MySQL と PHP の活用

表 3. テーマ紹介用テーブルの構造

受け付け用、テーマ詳細ページ応募用、記録用と 3つのテーブルを作成し、PHP プログラムでアクセスすることで申し込み状況などの情報を Web ページに反映させた。表示内容を表形式にし、データとしてテーブルから読み出すことで、Web ページの管理が容易になった。

4.1 受け付け用テーブル
表 2. 受け付け用テーブルの構造

4.3

テーマ実施報告用テーブル

紹介用と実施報告用ページの違いは申し込み状況を削除した点である。さらに実施風景の写真は、そのサムネイルにリンクを貼ることで拡大表示させた（表 4）。
表 4. テーマ実施報告用テーブルの構造

表 2 に示す kana（せいめい）をチェックし、さらに同姓同名の場合を考慮し tel（電話番号）も併せて二重登録をチェックした。
もし、同じ人からの申し込みと判断された場合には、後からの申し込みを受け入れて、先の申し込みを取り消す（図 13）。また、受け付け用テーブルの内容は、アクセス制限付きで作成された Web ページに表示させた。

５．まとめ
昨年までは、Fax 受付後に担当者が受け付け用テーブルに入力していため、Web から申し込めていたにも関わらず、お断りするケースが発生していた。
今年度から、申し込み受付を自動化することでその問題が解消した。
Fax および郵送での申し込み受け付け処理が、無くなることで不必要なミスが解消した。また、申し込み者に対する受領連絡も不要になった。
受け付け開始・終了作業の自動化により、受け付け期間外申し込みの対応も不要になった。

図 13. 入力データ確認画面（2）4.2 テーマ紹介用テーブル

６．最後に

表 3 に示す tname（テーマ）をキーとして、それぞれのフィールドを、指定場所に表示する HTMLファイルを作成した。申し込み状況は、受け付け用テーブルに書き込まれたデータを取得、残りの席数を計算、最新情報を表示した。

今年度のお助け隊の参加者は 99 名だった。参加者のうち、県内の中学校から 19 校 75 名、県外から 22 校 24 名だった。お助け隊の募集案内は、つくば市および近隣中学校へのポスター、リーフレットの配布と Web ページがある。今年度のアンケートでは、情報源として、リーフレット 21 人、Webページ 35 人、その他 40 人だった。その他の内訳
31筑波大学技術報告
34 : 28 - 32 , 2014

で学校、先生合わせて 26 人だった。これらのことから、まず、リーフレット、ポスターなどからお助け隊の開催という漠然とした情報を得て、二次的要素として Web ページの情報があるように感じられた。そのため、Web ページでは、テーマを具体的に紹介する必要があると感じた。
今回は Web ページの管理面を考えて、イベント実施前と実施後のページ構成をほとんど同じにした。
しかし、参加者にとっては、実施後の記録写真などは、もっと多くあっても良かったのではないかと思われる。実施後の記録写真の掲載については、個人情報の問題も合わせて、検討するべきだと思う。

32

謝辞
お助け隊実行委員長室井光裕技術専門官をはじめ、テーマ担当、スタッフの皆様に感謝申し上げます。

参考文献[1] 立岡佐到士著(株)ソフトエイジェンシー監修，実例で身につける！ MySQL×PHP による本格 Web-DB
システム入門，技術評論社[2] Spencer K Ogawa ， オ ー プ ン ソ ー ス 徹 底 活 用MySQL4/PHP5 による Web データベース構築，秀和
システム