文化祭の公式サイトを作りました。その時に資料作ったのでその資料をそのまま記事にします。モバイル専用サイトです。(現在サイトのアーカイブ化,2019年への移行作業中です)弟燕祭2018オフィシャルサイト弟燕祭2018オフィシャルサイトhttps://www.teiensai.tech東工大附属弟燕祭のオフィシャルWEBサイト。2018年度は10月13日(土)〜14日(日)の2日間、田町キャンパスにて開催されます。同じ学年の人,3人で制作した。それぞれデザインする人デザインをCSSとJavaScriptで実装する人プログラムする人である。建築科が二人で情報科が一人(ボク)です。建築科のデザイン力はすごい.....私はプログラム部分を中心に担当した(特にサーバーサイドで動く部分)。通っている学校に文化祭webサイトが存在していなかった。現在はスマートフォンが普及し多くの人が持ち歩いている。そこで文化祭をより便利にする公式webサイトの作成、及び文化祭をより楽しくするwebスタンプラリー,電子投票システムの作成を行った。ウェブサイト制作WEBサイトの構築のためにドメインの取得,レンタルサーバを契約しサイトを構築した。このブログと同じサーバーで動いている。静的な部分はHTMLで書かれていて動的な部分はPHPで書かれている。コードを読み込むと、スタンプが押印される。企画以上のスタンプを集めると「投票する」のボタンが表示され、投票できるようになる。何人がその企画へチェックインしたのかを知るために企画ごとにアクセス人数をテキストファイルにて記録、及び閲覧,グラフ化できる機能も作成した。二通りで構成されている。チェックイン画面では次のようなフローで処理されている。PHPと呼ばれるサーバーサイドの言語を用いている。文化祭で行われる企画数は20を超えるため,企画ごとにページを一つ一つ作成することは非常に手間である。そこでURLにパラメータをつけ,PHPの機能であるGETを用いてパラメータを読み込み,一つのPHPページで全企画の画面を作成し表示できるようにした。企画を判別しそれに応じた表示を行う。何人がその企画へチェックインしたのかを知るためにPHPのファイルシステム関数を使用しテキストファイルにてアクセス数を記録した。端末内にデータを保存するCookieというブラウザの標準機能を用いて,同一端末における重複カウントを行えないようにした。スタンプ一覧ページでは、チェックイン時に保存したcookieをもとにチェックインした企画が表示される。企画以上のスタンプを集めると「投票する」のボタンが表示され、投票できるようになる。投票は一度のみ可能で、投票後のアクセスは投票済みとして処理される。スタッフ専用の投票数確認ページで確認できる。投票数確認ページでは全企画の投票数に加えそれらをグラフ化したものも閲覧することができる。スタンプを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コードを読み込むと現在何号館何階にいるのかという表示と現在地の画像表示を行う。そのフロアで行われている企画を一覧表示する。アクセスすることで図9の案内ページを閲覧することができる。アクセスすると現在地情報を閲覧することができる。この場合四号館四階のURLである。チェックインページと同じようにURLにパラメータをつけて,それに応じて表示する内容の変更を行う。パラメータがない場合は図9の案内ページを表示させる。URLのパラメータとなるIDや現在地画像などはCSVファイルで書かれた別ファイルで管理する。理由としてCSVファイルはExcelなど表計算ソフトで編集できるため扱いやすく,急な変更でもすぐに対応できることが挙げられる。PHPでCSVファイルを読み込み二次元配列にデータを格納する。そのデータを基にパラメータと一致する現在地の表示を行う。現在地と同じフロアで行われている企画を,各企画の情報が格納されている配列と照合し表示している。スタッフ専用ページログインIDとパスワードを入力することで閲覧することができる。周りからめっちゃほめられた。