自作CMSの作り方#5 テンプレート機構を実装する

こんにちは。suipediaです。

この連載も5回目まで来ました（1回目はこちら）。前回まででローカル（自分の端末機）の開発環境にトップページを表示できるようになりましたね。

↑こんな画面を表示できました。データベースと連携してデータを表示する箇所はまだ内容が空っぽです。右サイドの部分ね。

今回はテンプレート機構を実装します。

「テンプレート機構ってなんぞや・・？」という方にもまずはその概要から説明しますので、ご安心ください。

このページが終わるころには、今後の開発や運用をグッと楽にするための仕組みが完成しています。画面的にはあまり変わり映えしません。。汗

今回の開発では内部的に整理された状態でのトップページの表示を目指します。

では、参りましょう。　

テンプレート機構とは・・・？

まず、webサイトを訪問したときどのページに移っても変わらずあり続ける要素というものがありますね。

例えば上図の赤枠で囲んだ部分です。ヘッダ（ページ上部のこと）やサイドメニュー、フッタ（ページ下部のこと）はどのページにも共通して表示されます。

これにはユーザに対しページ間の移動がしやすく、また情報にアクセスしやすい設計にすることでユーザビリティ（使いやすさ）を上げることやサイトとしてのカラーや一貫性を保つ狙いがあります。

どのページにも存在する、ということはすなわちどのページのHTMLファイルにも同様の記載があると言い換えることができます。

ただですね、管理する側のメンテナンスの観点からみるとどうでしょうか。100ページあるサイトだったら100のHTMLファイルを編集しないといけない・・・それはメチャクチャ面倒くさいですよね。

ですので、実際にはファイルを1つだけ用意しておき各ページがそのファイルを参照するようにしたり、PHPというプログラミング言語によって表示内容を自動生成したりするように実装します。

webページ上で「F12」キーを押すとそのページを構成するソース情報を見ることができます。そこには間違いなくどのページにもヘッダやサイド部分は同じ内容が書かれてあるのですが、実際にアクセスされるファイルもそうなっているとは限りません。

ユーザがアクセスした際に表示されるものはサーバ側でぐるぐるポン！とプログラムやDB連携を解釈して出来上がったファイルなんです。

図で説明しましょう。テンプレートを使わなかった場合、以下の様に同じ内容を複数ファイルに記載することになります。

メイン部分以外、同じ内容のソースコードになります。直すときはどちらにも手を加えないといけません。それを以下のようにします。

矢印を加えたせいで煩雑になりました汗。でもこういうことです。

ヘッダ部分を直したい！と思ったとき、上図で言うならheader.phpを修正するだけでOKです。参照するというのは参照先のファイルの内容があたかも参照元に書かれているような振る舞いをできる、ということです。

では、次の章で実際に手を動かしていきます。