PR

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

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のWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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

たったこれだけ!ユーザビリティ向上策 | Think IT(シンクイット)

Think IT(シンクイット)

サイトに予期せぬエラーが起こりました。しばらくたってから再度お試しください。