prototype.js を利用してコンテンツをインクルードする

Webサイトを構築する場合、繰り返し利用されるコンテンツ - サイトフッターなど - は、ファイルを分割して共通利用するのが一般的ですね。

ここでは、prototype.js を利用したちょっと変わった共通利用（つまり、コンテンツのインクルード）の方法があるので、説明したいと思います。

その前に、コンテンツのインクルード方法にはよく知られた方法がいくつかありますので、まずは簡単に触れておきます。

・SSI（サーバーサイドインクルード）

　Webサーバが提供するコンテンツインクルード機能。昔のWebサイトでは多様されていましたが、処理速度の問題などから利用がさけられる傾向になっていきました。現在ではほぼ利用しなくなっています（私のまわりでは、ですが）。利用する条件としては、Webサーバの設定で、SSIの利用が許可されている必要があります。

・CGI（サーバ―サイドのプログラム、アプリケーションサーバ）によるインクルード

　サーバーサイドのプログラム（Java, Perl, PHPなど） で行うコンテンツインクルード。おそらく現在(2008/5)もっとも普及している方法ですね。具体的な方法（ソースコード）はプログラム言語ごとにことなりますが、簡単に、確実にコンテンツをインクルードすることができる方法です。

・JavaScript document.write() によるインクルード

　インクルードするコンテンツ部分を、すべて document.write() で出力する方法。あまり見かけない方法ですが、サーバーサイドのインクルードが利用できない環境では、回避策として利用されることもあるようです。具体的には、コンテンツの出力内容を document.write() で記述した JavaScript の外部ファイルを作成し、この JavaScript ファイルを、インクルード元のHTMLファイルの script タグでロードする(src属性に指定する)というものです。JavaScript のソースコードとコンテンツが混在してしまうため、メンテナンス性が低下してしまいますね。

と、大雑把ですがこの３つの方法があります。

では、prototype.js を利用したコンテンツインクルードの方法についてですが、特徴は、JavaScript を利用したインクルード（サーバーサイドの技術は不要）ですが、メンテナンス性が低下しないというところでしょうか。

サーバーサイドで利用される方法と同様に、インクルードするコンテンツを外部ファイルとして分離できます。

具体的な方法について説明します。

1.まずは、prototype.js をロードします

<script type="text/javascript" src="[あなたのサーバ上のパス]/prototype.js"></script> 

2.次に、インクルード用のオリジナルファンクションを定義します

<script type="text/javascript">
function my_include(id, file) {
    document.open();
    document.write('<div id="' + id + '"></div>');
    document.close();

    var options = {};
    options.method = "get";
    options.asynchronous = false;
    new Ajax.Updater(id, file, options);
}
</script>

※ファンクションは head タグ内で定義

3.定義したファンクションで外部ファイルをインクードする

<script type="text/javascript">my_include("sample_id","sample.html");</script> 

※インクルードするコンテンツは Ajax を利用してロードされるため、インクルード元と同じサーバ（ドメイン）に設置しておく必要があります

以上です。

利用方法はとても簡単ですので、興味がある方はぜひお試しください。