各ページのメニューを一括変更する

サーバ管理って難しい（7）

こんにちは、さち です。

今回は、ホームページを作成したなどに各ページで共通する部分である
「ナビゲーションメニュー」「ヘッダー」「フッター」などを
一括で管理する方法について書いてみようと思います。

私の覚え書きとしての兼ね合いもある記事ですが
同じことで困っている方に少しでも参考になれば嬉しいです。

では、さっそく見ていきます！

SSIを使う

SSI は「Server Side Include」の略で
HTMLファイルの中に"特殊なコメント"を記述することで
サーバ側でその指示にしたがった処理をしその結果を出力します。

特殊なコメントというのは実際にこのような感じです。

上の例では記述では
このコメントを書いた部分を「sample.html」の内容に置き換えるという指示です。

これをナビゲーションメニューの部分などに使えば
1つの HTMLファイル を書き換えるだけで
すべてのページのナビゲーションメニューが書き換えられるので管理が非常に簡単になります。

ただし、SSI を使うためには使用しているサーバが SSI に対応している必要があります。
XAMPP でも SSI を使えるのでローカルで動作を確認することもできます。

→ Apache で SSI の設定 （Linuxで自宅サーバ様）

拡張子は「shtml」

SSI を利用した場合はそのファイルの拡張子を「shtml」にする必要があります。

拡張子が「shtml」になっても
特殊なコメントの部分以外は基本的にはHTMLの記述と全く変わりません。
別途 PHP や JavaScript などのプログラミング言語を覚える必要がないので
非常に簡単に使うことができます。

「.htaccess」で別途設定をすれば
拡張子が「html」のファイルに SSI を記述しても機能するようにできますが
パフォーマンス や セキュリティ の面からあまり好ましくないようです。

他にも便利なコマンドが

私は今のところ「include」のコマンド以外は使う予定はありませんが
他にも便利なコマンドが用意されています。

こちらのページで分かりやすく紹介されていますので
興味がある方は読んでみることをおすすめします。

→ とほほのSSI入門 （とほほのWWW入門様）

UTF-8 で include を使う場合には注意！

機種依存文字を考えるとUTF-8は非常に便利なのですが
文字コードが UTF-8 で include を使用すると
ページの上側に1行分の隙間ができてしまう症状が出ます。

BOM(Byte Order Mark)というものが関係しているようなのですが
私もこの問題にハマってしまい30分くらい格闘していました…。
UTF-8 でページを作成しようと思っている人は気を付けて下さい。

こちらのページに解決方法が紹介されています。

→ UTF-8でinclude使用時に上部に隙間ができる時の解決法 （ミトミトブログ様）

この記事を作成するのに下記サイト様を参考にさせて頂きました、ありがとうございます。

→ とほほのSSI入門 （とほほのWWW入門様）
→ SSI入門 （初心者のためのホームページ作り様）
→ Apache で SSI の設定 （Linuxで自宅サーバ様）
→ UTF-8でinclude使用時に上部に隙間ができる時の解決法 （ミトミトブログ様）