学生時代に作った学園祭のサイトのお話

学生時代に作った学園祭のサイトのお話:

2017年当時、在学していた専門学校の学園祭特設サイトを作成したときのお話です（当時意識して作ったポイントなど含めて紹介します）。

先生「今年からWordpress使えないから、よろしく」

当時こんなことを言っていた気がします。というのも、2017年以前は学園祭特設サイトをWordpressで制作していました。

先生曰く

• 去年以降のサイトを残している関係上、契約しているサーバーのDBの空きが無い
• レガシーなプラグインを多用していたため、Wordpressの更新ができない
  
  
  • 学校側としても、セキュリティ的にOKを出せなかった模様（？）

なんせ卒業制作展示会も控えていたり、学園祭実行委員なるものも引き受けていたのでさぁ大変。
せっかくこのためにWordpressの勉強していたのに…

画像や文言を差し替えたりして済ませようとしていたが、どうしたものか……

考えて出てきた選択肢

そこまで選択肢があるわけではないので、以下の選択肢はわりとすぐに出てきました。

• Wordpress（PHP）を使わず、ベタのHTMLで作成
• DBを使わない範囲でPHPを利用して作成
• いろいろな理由をつけて諦める

Wordpress（PHP）を使わず、ベタのHTMLで作成

真っ先に思いついたのはこれでした。

当時の自分「Wordpressすら動かない状態でPHP使ったところで……」「まだ勉強不足なのもあるし、ベタのHTMLで作成したほうが手っ取り早いかも」と考えていました。

不採用

制作している途中でhtmlやcssの修正が入ってしまったりすると全htmlファイルの修正が必要になってしまう可能性があったため。

また、コピペをすると間違い（画像のパス指定のミス等）が発生してしまう可能性もあるため。

実際、学園祭特設サイトはページ数も約30ページ程でコピペとか駆使していけばできなくもない規模でした。

DBを使わない範囲でPHPを利用して作成

当時PHPの授業でincludeというものを知りました。

これを使えば特設サイトのheadやheader, footerを使いまわしができるのではと考えつきました。

しかし、まだまだPHPについて全く理解が追いついていなかったため、ベタのHTMLの方が確実に早く完成するのではというリスクも背負っていました。

採用

PHPの授業も当時あったため、もしわからない箇所があったら先生に聞くなり調べるなりして対処しようという自己判断をしました。

また、自分自身のプログラミング能力の向上にもつながるなと思い、この道を選びました。

いろいろな理由をつけて諦める

選択肢にはあげたが、これは去年の特設サイトを作った人を越えられない悔しさが湧きそうだなと思ったのと、根本的にプライドが許さなかった。

不採用

いざサイト制作

そうと決まれば情報をどんどん集めていきます。

Googleアナリティクス確認

まずはじめに、昨年の学園祭特設サイトのGoogleアナリティクスを確認し、どのようなサイトにすればいいかの確認を行いました。

調べてみると、利用者の6, 7割がスマホから閲覧していたこともあり、サイトのレイアウトをSP向けのレイアウトにしました。

もし期日的に間に合わなくなってしまった場合は、利用者の少ないPC向けレイアウトを切り捨てることができるからです。

実際に作ることになりそうなページのパターン選定

これはいわゆるテンプレートの洗い出しに当たる作業です。

30ページすべてが別々のhtml, cssになるわけではなく、ある一定のパターンに分けることができると考えました。

そして、共通化できそうなコンポーネントも同時に選定しました。

以下が実際に当時考えた共通テンプレート・共通パーツ選定項目です。

ページ単位

• トップページ
  
  
  • アクセス（駅から学校までの道順など
  • 学内マップ（校舎や教室の位置関係を掲載
  • 出し物一覧ページ
  • お知らせ一覧ページ
  • 汎用ページ（お知らせ詳細・出し物詳細などで利用

コンポーネント単位

• ヘッダー（header）
• フッター（footer）
• ヘッド（head）
• グローバルナビ（nav）
• 見出し（h1, h2, etc.）
• Googleアナリティクスのscriptタグ

洗い出しが終わった時点で「ページ数で怯えてたけど最終的に作る必要があるページはたった5テンプレートか、しかもコンポーネント使い回せるし楽勝やん」となっていました。

ただし、ここでPHPの知識不足が露呈してきました。

データの格納方法どうする？問題

これの具体的解決策がまだ出ていませんでした。

具体的にはお知らせ詳細や出し物のデータを格納し、上で説明したテンプレートの中身を出し分けする必要がありました。

真っ先に思いついたのはcsvやjsonをパースして出し分けを行うことでした。

もし外部ファイルが読み込みできなかったらphpファイルにデータべた書きしてincludeで別ファイルに分けておけばいいやとなっていたのですが。

先生「SQLiteを使ってみては？」

当時はそんな便利なものがあるのかととても驚いたと記憶しています。

オープンソースのリレーショナルデータベース管理システム（RDBMS:Relational Database Management System）の一つ。サーバー不要のファイルベースで動作することが特徴で、PHP 5から標準で組み込まれた。

引用元 : https://www.weblio.jp/content/SQLite

これでデータ格納法の問題解決と、SQL文でデータの呼び出しができるようになりました、やったぜ。

phpmyadmin使えないやん！

よしSQLite使おうとなったはいいものの、phpmyadminではSQLiteにデータの追加ができない（XAMPPやレンタルサーバーの多くが採用しているし、これを用いてお知らせや・出し物詳細のデータを格納しようと考えていた）

わい「Adminer使ってみるか」

SQLite phpadmin 代替と調べたらすぐ出てきました。公式HPからphpファイルと必要に応じてcssファイルをダウンロード

<?php 
function adminer_object() { 
  class AdminerSoftware extends Adminer { 
    function login($login) { 
      // validate user submitted credentials 
      return ($login == 'hogehoge'); 
    } 
  } 
  return new AdminerSoftware; 
} 
include "adminer.phpのパスを指定"; 

SQLiteに合わせて上記ソースを新規ファイル作成、このファイルからアクセスすればデータを投入する準備完了。

まとめ

こうして学園祭のサイトは無事公開にこぎつけることができたのでとても良かったです。

phpのシステム=Wordpressみたいな頭ができていたが、その認識を崩せてよかった。

また、データの一元管理の概念・CMSの概念が少しだけかもしれないが、理解することができてよかった。

時間に余裕があればフロントエンド側で工夫したところも追記して紹介できればと考えています。

それでわっ！