たったこれだけ！ユーザビリティ向上策

サーバーサイド・インクルードをさらに活用する

　「第1回：サーバー管理の基本（http://www.thinkit.co.jp/article/134/1/）」では、Apache Webサーバーの設定を変更する.htaccessファイルの概要を解説しました。今回は.htaccessの具体的な活用方法として、Webサイトのユーザビリティ向上に役立つ設定をいくつか紹介していきます。サンプルコードがこちらからダウンロード（http://www.thinkit.co.jp/images/article/134/2/13421.zip）できますので、ご利用ください（13421.zip/643 KB）。

　まずは前回の最後に少しだけ解説したSSI（Server Side Include）の応用編です。前回は、別ファイルに用意した共通要素（ヘッダやナビゲーションメニューなど）をSSIで挿入する方法を説明しました。こうすることで共通要素のメンテナンスが楽になり、使いやすいナビゲーションなどのユーザビリティ改善にも注力しやすくなります。

　しかし、この方法を本格的に活用しはじめると、固定の文字列しか挿入できないのが不便に思えてきます。例えば、ヘッダにページタイトルを表示するなど、共通要素の中にページ固有の情報を含めることができると便利です。そこで、今回はそれを実現する「変数」という機能を使ってみましょう。

　変数とは、ユーザーが自由に文字列を記録できるメモ用紙のようなものです。set要素を使うと、指定した名前で変数を作成し、そこに文字列を保存できます。



　変数に保存した文字列は、前回も使用したecho要素でHTMLファイルに挿入できます。



　たったこれだけです。例えば、ページタイトルを変数に保存しておき、共通要素のファイルでecho要素を使ってそれを挿入すれば、共通要素の中にページごとのタイトルを表示できます。

SSIによる条件判定

　もう1つ、変数に関連した機能に条件判定があります。これは説明だけではわかりにくいので、実際に試してみましょう。前回と同様に、Webサイト内のどこかに実験用のディレクトリを作成し、そこに図1「リスト1」「リスト2」「リスト3」をそれぞれ見出しにあるファイル名で作成してください。リスト2（condition.shtml）をブラウザで表示させると、図1「condition.shtmlの表示結果」の上のように青地の画面になるはずです。

　次に、リスト2で変数「theme」に設定している文字列を「blue」から「yellow」に変更して、再度ブラウザで表示してください。今度は図1 「condition.shtmlの表示結果」の下のような黄色地の画面になります（切り替わらないときはページをリロードしてください）。とても簡単ですが、ページごとのテーマ切り替えのような機能が実現できているのがわかると思います。

　仕組みを順番に見ていきましょう。まず「リスト2」では、変数「theme」に文字列（「bule」か「yellow」）を設定して、condition_inc.shtmlを読み込んでいます。

　肝になるのは「リスト3」にある「if」「elif」「else」「endif」です。これらは指定した条件によって挿入する内容を選択するSSIディレクティブで、基本的な文法は「リスト4」になります。条件1が満たされれば内容1が、条件2が満たされれば内容2が、いずれも満たされなければ内容3 が、その場所に挿入されます。「elif」はいくつでも書けるので、選択肢をもっと増やすことも可能です。

　「リスト3」でも「$theme」として使ったように、条件の中では「$変数名」という記述ができます。こうすると、その部分が変数の内容で置き換えられた後に、条件判定が行われます。

　ここまでくれば仕組みは理解いただけるでしょう。「$theme」の内容を判定してSTYLEタグ内に挿入される文字列を変更することで、文字色と背景色を切り替える機能を実現しています。

　このようにSSIを利用すると、Webサイト内で共通に使うコードを1つにまとめて効率的に管理できます。ほかにも多くの機能がありますので、興味のある方は公式サイトのチュートリアル（http://httpd.apache.org/docs/2.2/howto/ssi.html）などを参照してください。CMSのような大げさなシステムを導入する前に、SSIを活用してみるのも1つの手ではないでしょうか。