Last updated on 2019年2月25日
高校の文化祭公式サイトを作りました。
サイト制作を許可してくれた責任者先生,生徒目線で中継ぎをしてくれた先生。暖かく受け入れてくれた友達にも感謝です。
（以下ブログポストのコピペ）
文化祭の公式サイトを作りました。その時に資料作ったのでその資料をそのまま記事にします。
サイトはこちら。モバイル専用サイトです。(現在サイトのアーカイブ化,2019年への移行作業中です)
できること
- 公式サイト
- スタンプラリー
- 企画投票
- バーコード認証による景品交換
使用言語 PHP, HTML, JavaScript (一部J-Query, Ajaxを含む)
役割分担
同じ学年の人,3人で制作した。それぞれ
- デザインする人
- デザインをCSSとJavaScriptで実装する人
- プログラムする人
である。建築科が二人で情報科が一人(ﾎﾞｸ)です。建築科のデザイン力はすごい…..
私はプログラム部分を中心に担当した(特にサーバーサイドで動く部分)。
目的
通っている学校に文化祭webサイトが存在していなかった。現在はスマートフォンが普及し多くの人が持ち歩いている。そこで文化祭をより便利にする公式webサイトの作成、及び文化祭をより楽しくするwebスタンプラリー,電子投票システムの作成を行った。
ウェブサイト制作
WEBサイトの構築のためにドメインの取得,レンタルサーバを契約しサイトを構築した。
このブログと同じサーバーで動いている。というアドレスによりアクセスできる。静的な部分はHTMLで書かれていて動的な部分はPHPで書かれている。PHPはサーバー上にてプログラムを通して動的にページが作成される。
スタンプラリーページ
スタンプラリーページでは専用のQRコードを各企画の入口付近に掲示してもらい、来場者の端末にてQR コードを読み込むと、スタンプが押印される。3 企画以上のスタンプを集めると「投票する」のボタンが表示され、投票できるようになる。
また何人がその企画へチェックインしたのかを知るために企画ごとにアクセス人数をテキストファイルにて記録、及び閲覧,グラフ化できる機能も作成した。
実装
スタンプラリーページでは・チェックインページと・スタンプ一覧ページ の二通りで構成されている。 チェックイン画面では次のようなフローで処理されている。
PHPと呼ばれるサーバーサイドの言語を用いている。 文化祭で行われる企画数は20を超えるため,企画ごとにページを一つ一つ作成することは非常に手間である。そこでURLにパラメータをつけ,PHPの機能であるGETを用いてパラメータを読み込み,一つのPHPページで全企画の画面を作成し表示できるようにした。具体的には
https://teiensai.tech/stamp/checkin.php?KIKAKU=ほにゃらら にアクセスすると1年A組のチェックインページ
https://teiensai.tech/stamp/checkin.php?KIKAKU=ほにゃらら2 にアクセスすると1年B組のチェックインページというようにURLのcheckin.phpの後の?KIKAKU=〇〇○ で企画を判別しそれに応じた表示を行う。 また何人がその企画へチェックインしたのかを知るためにPHPのファイルシステム関数を使用しテキストファイルにてアクセス数を記録した。 そして端末内にデータを保存するCookieというブラウザの標準機能を用いて,同一端末における重複カウントを行えないようにした。スタンプ一覧ページでは、チェックイン時に保存したcookieをもとにチェックインした企画が表示される。
投票ページ
3 企画以上のスタンプを集めると「投票する」のボタンが表示され、投票できるようになる。また、投票は一度のみ可能で、投票後のアクセスは投票済みとして処理される。スタッフ専用の投票数確認ページで確認できる。 投票数確認ページでは全企画の投票数に加えそれらをグラフ化したものも閲覧することができる。パスワード入力することでスタッフのみ閲覧できる。
実装
投票していない かつスタンプを3個以上集めているのかをCookieを用いて判断する。PHPのFor文により全企画の表示を行った。HTMLの標準機能であるラジオボタンを使用して選択できるようにした。 投票ボタンを押すとGETリクエストを送られる。GETリクエストをPHPが取得し投票を行う。 具体的には投票された企画と同じ名前のテキストファイルに+1をする。その後投票完了画面を表示する。その際にCookieに投票を行ったことを記録することで重複投票が行えないようにした。
景品交換ページ
取得スタンプの数が7個を超えると景品引き換えページを表示することができる。 景品引き換えページではバーコードが表示される。このページを表示した状態で運営者の景品交換場所に持ち込みバーコードをスキャンすると景品交換が完了する。 また読み取りが行われた数秒後に「読み取りが完了しました」と表示される。 また読み取りミスや重複して読み取りが行われないような対策が行われている。
実装
バーコードに表示する番号について
バーコードに表示する番号の上6桁は定数である。それ以降の桁は端末ごとに変化する。端末ごとに割り振られる値はアクセス人数を利用している。景品引き換えページでの初回訪問時にPHPでテキストファイルを読み取り
Cookieに保存、+1して保存する。
バーコード表示について
PHPにより生成した番号をJavaScriptに値を渡す。バーコードを表示にはJavaScriptのフレームワークであるJ-Query、及びそのライブラリであるjquery-barcode.jsを用いて表示を行った。
バーコードが読み取られたか監視する機能について
運営側にてバーコードが読み取られたか取得する機能はJ-Queryのライブラリであるjquery.periodicalupdater.jsを用いた。Ajaxを用いて非同期的にテキストファイルの更新をチェック、取得する。取得した文字列からPHPで作成された番号を検索し一致した場合引き換え済みと表示を行う。
運営側バーコード読み取りページについて
運営側読み取りページではバーコードを入力するためのテキストボックスと送信ボタンが設置されている。バーコードリーダーを接続して読み取ることも可能である。
送信ボタンが押されるとテキストボックスの文字列をGETリクエストにてPHPに送信する。 送信された文字列はPHPでテキストファイルに上書き保存をする。 テキストファイルの検索を行い,すでに読み取られた番号や,まだ未発行のバーコード番号の場合エラーと表示する。
「現在地を調べる」ページ
私の学校では校舎が4棟あり,配置が複雑で初めて学校に来る人は混乱しやすい。また,文化祭のパンフレットは全ての企画が載っており見辛い。そこで現在地を調べるページを作成した。図9はその案内を行うページである。校内のポスターやサインにある赤色QRコードを読み込むと現在何号館何階にいるのかという表示と現在地の画像表示を行う。
さらにそのフロアで行われている企画を一覧表示する。
実装
https://teiensai.tech/maininfo/current にアクセスすることで図9の案内ページを閲覧することができる。https://teiensai.tech/maininfo/current?W=bld4-4 にアクセスすると現在地情報を閲覧することができる。この場合四号館四階のURLである。 チェックインページと同じようにURLにパラメータをつけて,それに応じて表示する内容の変更を行う。パラメータがない場合は図9の案内ページを表示させる。URLのパラメータとなるIDや現在地画像などはCSVファイルで書かれた別ファイルで管理する。理由としてCSVファイルはExcelなど表計算ソフトで編集できるため扱いやすく,急な変更でもすぐに対応できることが挙げられる。PHPでCSVファイルを読み込み二次元配列にデータを格納する。
そのデータを基にパラメータと一致する現在地の表示を行う。また,現在地と同じフロアで行われている企画を,各企画の情報が格納されている配列と照合し表示している。
スタッフ専用ページ
ログインIDとパスワードを入力することで閲覧することができる。
結果
周りからめっちゃほめられられました。とてもうれしい限り。
文化祭サイト,文化祭に対するアンチコメントが無いかTwitterでずっとエゴサしてました。みんな暖かく受け入れてくれました。(うちの学校の人Twitterだとこわいから…)