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

2008年9月12日(金)
伊藤 千光

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

 「第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つの手ではないでしょうか。

白髪になってもプログラムを組んでいたい、元ゲームプログラマーのWebエンジニア。いくつかのゲーム会社を渡り歩いた後、2007年にWebの世界に転身。現在はRuby on Railsを用いた業務システムの開発に従事している。ブログでの情報発信も精力的に展開。WebOS Goodies : http://webos-goodies.jp

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています