前の記事 «：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指定で使えるので、開発に役立てたり、使い方は色々考えられますね。

スポンサード リンク

投稿者 KJ : 2007年09月20日 07:02 | ブックマークに追加する Subscribe with livedoor Reader
間違いの指摘をしていただける方はメールでお願いします


本を執筆しました。