2012年11月3日土曜日

サイトのヘッダとフッタ分割

タイトルこれでいいのか悩む。
うちのサイトではページの上部にメニューがあって、こいつはどのページでも共通する部分。
だから変更を加えると全ページに渡って変更作業をしなきゃいけなかったのね。
そこで、ここだけ独立して管理して、あとから他のページに貼付けるようなことができないかなーと常々思ってたわけです。
(ちょっと紛らわしいけど、ここで言うヘッダってheadタグじゃなくてメニュー含むそれより上部に記述してある部分だと思ってね。)

当然PHPだわな…。

というわけでいろいろググってみたんだけど、どれもしっくりしない。
インラインフレームを使う方法なんかはもう前時代的だと思うしやりたくない。
ソースが外部にあるからSEO的にもよろしくないしね。
他にももろもろあったけど、いろんなデメリットを抑えられる方法が…PHPっすかー。
まあ予感はしてたけどね。しかし忍者ホームページさんは残念ながらサーバサイドのアプリは使えない…。困った。

しょうがないからオフライン環境でなんとかする方法を模索。
最初はド正直にcatコマンドとか使って本当にそのまんま分割htmlファイルを繋ぎあわそうとか思ってたのね。
でもこれにはひとつ問題点があったのよ。
うちのサイトで言えば、現在開いてるページはメニューのデザインが変わるようにしてある(ボタンが押されたような感じ)。
開いてるページに対応するli要素に、デザインを変えるためにクラスを設定してるわけ。
つまり、完全にはメニュー部分が全ページで一致してないのが問題として残っちゃう。

m4とMakefile

この時点で3時間ぐらい粘ってたんだけど、ついに解決法を発見。
watanet Personal Side-C
プリプロセッサでHTMLファイルの生成 – m4 Makefile html
まさに同じことで悩んでる人を発見!

詳細はリンク先を見てくれれば分かるけど、
m4とやらはテキストファイル厨に別のファイルの内容を挿入したり、
とある文字列を別の文字列に置き換えたりする機能をもってるそうで。
変数の宣言っぽいこともできるらしい。

これらの機能のおかげで、まず各ページの上部にメニュー部分を外部ファイルから挿入することができるようになった。
そのとき各ページによって変数の値を変えることで、先ほどの問題もクリア!

おまけでMakefileを使えばmakeコマンド一発で全ページ自動生成だよ!
いたれりつくせり。これは便利。

m4の概要を理解するのに1,2時間かかったり、
Makefileの記法(自動変数ェ…)を理解?するのに2時間ぐらいかかったり結構手こずっちゃったけど、相応の価値はあったね。

なにはともあれこれで目的は達成できた。
ほとんどないけどフッタの部分もついでに外部ファイル化。
あとmetaタグで更新日時を自動設定できるようにとかしてみた。
あとで入れようと思ってるjQueryの導入も一文書くだけで済むようになったじぇ。

唯一気になるのはemacsでのインデントが崩れちゃうことかな。
最終的に統合したhtmlを作った後にindent-regionをかける方法が分からなかった。
誰か知ってたらおしえてくだしゃー。

0 件のコメント: