CMS+SSIで効率的なWebサイトを構築

  • 投稿日:2012年07月05日
  • カテゴリ:Web制作のこと
  • このエントリーをはてなブックマークに追加
  • Check

Webサイトの更新を視野に入れて、HTML等の知識なしWeb上で更新・管理が可能な「Movable Type」「Wordpress」などのCMS(コンテンツ・マネジメント・システム)で構築するWebサイトが多くみられます。

CMSのメリットのひとつは、Webの知識が豊富ではなくても効率よく更新作業が行えるという点です。
基本的には動的なページ(更新頻度高い)静的なページ(更新頻度低い)で分類して設計することが多くなります。

静的ページ:CMSで管理しない領域、動的ページ:CMSで管理できる領域

ただしCMSを使って効率よく更新や管理をする場合、
ページ単位での"静的""動的"だけでは区別しにくい場合があります。
例として下記のような仕様の場合が考えられます。

[想定される複合条件の例]

  • ・ヘッダー、フッターの領域をすべて共通化したい
  • ・共通箇所をCMS側の管理画面から追加・更新できるようにしたい
  • ・その他共通部分で追加・更新した箇所を全ページに反映したい

想定イメージ

この場合、"静的""動的"に関係なく両方の更新が必要になってきます。
あくまで一部ですが、こういったケースの解決方法をいくつかご紹介します。

1.全てをCMS内に組み込んだ管理方法

全てのコンテンツをCMS側に組み込んでしまえば、共通して表示という部分は解決します。
また全てがCMS内で管理できるので管理画面から全てのページを管理・更新できるというメリットがあります。
しかし、その反面、下記のようなデメリットがいくつか考えられます。

[想定されるデメリット]

  • 1.全てをCMSに組み込むことで更新しやすさが向上するわけではない
  • 2.作業工数が増え、制作期間・費用が若干増える
  • 3.上記、理由からも静的なページをCMS内に設置するメリットがあまりない
  • ※デメリットもWebサイトで表現する仕様・要件によって異なります。

2.Javascriptによる管理方法

Javascriptで設置する方法もあります。
サーバーの条件などは必要ないのと開発側からすると手軽に実装できるので場合によっては大変効果的です。
しかし、SEO的にも効果的ではないことや更新に少し技術的な知識が必要なこと、また、Javascriptがオフのブラウザでは起動しないというデメリットがあります。

これらのデメリットの回避や要件を実現する方法として
SSI(Server Side Include)を利用する場合があります。

3.SSIによる管理方法

SSI(Server Side Include)を利用することで共通化したい箇所をCMS側で生成するように設定しておくだけで、
サーバー側で処理を行い動的ページ、静的ページともに共通化することが可能です。
※SSIとは何かという点は省略させていただきます。

CMS+SSIによる構築イメージ

※2 SSI設置のためのコード挿入例

[HTMLで利用する場合]

<!--#include virtual="/common/inc/g_navi.inc" -->

[PHPで利用する場合]

<?php virtual("/common/inc/g_navi.inc"); ?>

※注意
SSIが利用できないサーバーもあるので、構成を検討する際は、サーバー情報を確認することが重要です。

ただし全てにおいて、SSIで設置する方法が良いとは限りません。
Webサイトの構成によっては、全ての情報をCMSに埋め込んだ方が効率的な場合もあります。
設定に対する費用対効果も考え、利用方法や条件によって仕様を決めていくことが重要となります。

ソリューション事業部 山中