SSIが使えないサーバーで、JavaScriptで共通項目の一元管理をするには

質問

ボランティアで、とある零細企業のホームページを管理しています。

会社の経費削減により、SSI/PHP/CGIが使えないサーバへ、サイトを引っ越さなくてはならなくなってしまいました。サイトのページ数は100ページを越えています。

今までのサーバではSSIが使えたので、ヘッダー、フッター、共通メニュー部分をSSIで管理していましたが、引っ越し先ではSSIもPHPも使用することが出来ないので困っています。

そこで質問なのですが、JavaScriptでSSIのように共通メニューを一元管理するにはどのようにすればよいのでしょうか？JavaScriptの初心者でも分かるように、簡単に説明しているページなどがありましたら、教えてください。

また、JavaScript以外でも、一元管理する何か良い方法があったら教えてください。

よろしくお願いいたします。

回答No.2

神崎 渉瑠（@taloo） · ベストアンサー

「javascript csi」で検索してみてください。

SSI（Server Side Include）と同じことを
クライアントでやる（Client Side Include）ためのJavaScriptライブラリがいくつか見つかると思います。

使い方などはそのライブラリを配布しているページを参照して下さい。
使いやすい、使いにくい、説明がわかりやすいなど、個人差がありますので、いくつか使ってみて期待通りの表示ができた物を使うのがいいと思います。

お礼

無茶苦茶ありがとうございます！
まさに、こういうことを望んでいました。

SSIとかなり似たような形で埋め込むことができるのですね。

会社の経営が良くなるまで、CSIで頑張ります。
本当にありがとうございました！！

回答No.1

SAYKA

仕掛けの原理だけ書いておくね

javascriptによって
共通メニューになる要素(通常div)を差し込む
その中に共通メニューになる項目を読み込む等で取り込んで流し込む

って事をやろうと思えばできるよ。
具体的なソースは丸投げ応答になっちゃうから書いてあげられないけど。

あとはサイトのデータを一端整理して xml+xslt にしてしまって共通メニューを常に統合するxsltで記述……かな………
どちらも「簡単ではない」よ。(判って無くて1から作るとしたら、の話)

補足

早速ありがとうございます。

<div id="menu"></div>

のタグでくくられた部分のみを外部ファイルに置いて、一元管理出来るようにしたいのですが、それはどのように行えば良いのでしょうか？

外部ファイルに<div></div>の内容を置いて、ひとつのメニュー（例えばURLなど）に変更があった場合に、その外部ファイルを1カ所修正するだけで、すべてのHTMLに変更を反映できるようにしたいのですが。。。

よろしくお願いいたします。