SSIならぬクライアントサイドインクルード（CSI）を実現できる「sprinkle.js」:phpspot開発日誌

前の記事 ≪：PHPやPerlでQRコードを超簡単に作れるサンプルスクリプト
次の記事 ≫：ゲームのキャラクターをクールに装飾するPhotoShopチュートリアル

SSIならぬクライアントサイドインクルード（CSI）を実現できる「sprinkle.js」

2007年09月20日-

スポンサードリンク

Sprinkle Javascript library by Jon Davis

This is basically CSI (Client-Side Includes), when SSI (Server-Side Includes) is not available. You can also call it "sprinkle", as that's the name I gave the Javascript library.

SSIならぬクライアントサイドインクルード（CSI）を実現できる「sprinkle.js」。
SSIとは、指定の位置に決められたタグを埋め込んでおくことで、サーバ側で処理して特定の文字列を出力する仕組みです。

今回紹介するCSIは、JavaScript を使い、DIV要素内にsrcで指定したファイルをAjaxで読みこむという仕組みです。
次のようなコードで、<div src="info.html"></div> 内に、info.html の中身を挿入することが可能です。

<html>
<body>
<script src="sprinkle.js"></script>
<div src="info.html"></div>
</body>
</html>

HTMLをモジュールごとに分けて開発したい場合、PHPやSSIのようなサーバサイドに依存する仕組みが必要でした。
CSIを使えばブラウザオンリーでモジュールごとの開発が可能になります。

sprinkle.js を読み込めば、あとはdivにsrc指定で使えるので、開発に役立てたり、使い方は色々考えられますね。

関連の記事検索：Ajax, csi, ssi, Web制作