お知らせ

2009年9月23日

「WordPressで学ぶPHPとMySQL」を発売しました。
「WordPressをカスタマイズしたいけど、PHPやMySQLが分からなくて躓いている」という方のための、PHPとMySQLの入門書です。
WordPressでWeb製作をされている方などにお勧めです。
PDFによる販売で、当サイトでのみ購入できます（書店では購入できません）。

他にも多数書籍を執筆しています。
こちらもぜひご覧ください。

Ajaxでファイルを組み込むプラグイン（その1）

壱 (2008年3月21日 10:28) | コメント(4) | トラックバック(0)

Movable Typeの弱点は、再構築の処理に時間がかかることです。
再構築の処理を軽減するために、ブログの各ページをPHPとして出力し、各ページの共通部分を1つのファイルにまとめて、PHPのincludeを利用する、という手法がよく使われています。
ただ、この方法は、PHPが使えない環境や、PHPが使えないページ（検索結果のページなど）では動作しないという弱点があります。

PHPを使う代わりに、Ajaxで共通部分を読み込む方法もあります。
その際に便利な「AjaxInclude」というプラグインを公開します。

1.プラグインのインストール

AjaxIncludeプラグインは、以下からダウンロードすることができます。

AjaxInclude_1_00.zip

ダウンロードしたファイルを解凍すると、「plugins」と「mt-static」のフォルダができます。
これらのフォルダを、Movable Typeのインストール先ディレクトリにアップロードします。

2.MTAjaxIncludeJSタグの追加

まず、「ヘッダー」のテンプレートモジュールで、「</head>」のタグの直前に、以下のテンプレートタグを追加します。

<$MTAjaxIncludeJS$>

このタグにより、prototype.jsの組み込みと、AjaxIncludeプラグインのJavaScriptライブラリが組み込まれます。

3.MTAjaxIncludeタグの追加

次に、テンプレート内で、Ajaxでファイルを読み込みたい位置に、以下のようなテンプレートタグを追加します。

<MTAjaxInclude id="読込先のID">読み込むファイルのURL</MTAjaxInclude>

このタグの出力は、以下のようになります。
Ajaxで読み込んだ内容が、div要素の内部に挿入されます。

<div id="読込先のID"></div>
<script type="text/javascript">
Ajaxの処理を行うためのJavaScript
</script>

例えば、「somefile」というIDのdiv要素を出力し、ブログのディレクトリにある「somefile.html」というファイルを、そのdiv要素に挿入したいとします。
この場合は、以下のようにタグを書きます。

<MTAjaxInclude id="somefile"><$MTBlogURL$>somefile.html</MTAjaxInclude>

4.制限

Ajaxでは、読み込み先のページと、読み込むファイルとが、同じホスト（※）のアドレスになっている必要があります。

※ホスト
http://www.○○○.com/~等のアドレスで、「www.○○○.com」等の部分。

例えば、読み込み先のページのアドレスが「http://www.foo.com/index.html」で、読み込むファイルのアドレスが「http://www.foo.com/file.html」だとします。
この場合、どちらもホストは「www.foo.com」なので、Ajaxが問題なく動作します。

一方、読み込み先のページのアドレスが「http://blog.foo.com/index.html」で、読み込むファイルのアドレスが「http://www.foo.com/file.html」だとします。
この場合、ホストは「blog.foo.com」と「www.foo.com」で異なりますので、Ajaxは動作しません。