TopMovable Typeカスタマイズモジュール化 > 2010年12月
2010年12月26日

Ajaxによるモジュール化(jQuery版)

December 26,2010 2:22 AM
Tag:[, , , ]
Permalink

Movable Type 5のサイドバーの各リストを、Ajaxによるモジュール化を行う方法を紹介します。

Ajaxによるモジュール化

このエントリーは3年ほど前に書いた「Ajax によるモジュール化」をjQuery向けに書き直したものです。

1.jQueryのダウンロード

jQuery(jquery.min.js)はjQueryの公式サイトから最新版をダウンロードしてサイトパスにアップロードするか、Movable Typeに同梱されている、mt-static/jquery/jquery.min.jsをそのまま利用します。

script要素の設定については5項を参照してください。

2.インデックステンプレートの作成

サイドバーに表示するリスト類はウィジェットに登録されているものを利用していると思いますが、Ajax化するにはこれらをインデックステンプレートに登録し直します。

例えば、「最近のブログ記事」をAjaxで表示させたい場合、「デザイン」→「テンプレート」→「インデックステンプレートの作成」をクリックし、ウィジェットにある「最近のブログ記事」をテンプレートの内容にコピーします。他の項目には下記を設定します。

テンプレート名:最近のブログ記事
出力ファイル名:recentEntries.html
テンプレートの種類:カスタムインデックステンプレート
ファイルへのリンク:(設定不要)
公開:スタティック

インデックステンプレートの作成

複数のリストをAjax化するには、同じ作業を繰り返します。

3.テンプレートの修正

インデックステンプレートやアーカイブテンプレートに、2項で作成した「最近のブログ記事」を表示させるには、「サイドバー」テンプレートモジュールに次の内容を設定します。

<div id="entries"></div>
<script type="text/javascript">
//<![CDATA[
getFile('<mt:BlogURL />recentEntries.html', 'entries');
//]]>
</script>

1行目のdiv要素の内容に「最近のブログ記事」を表示します。その後にあるJavaScriptがdiv要素に「最近のブログ記事」を表示するためのスクリプトです。

getFile()のパラメータには、Ajaxで取得したいファイル名(ここでは2項で設定した「出力ファイル名」)と、リストを表示させるdiv要素のid 属性値(ここでは「entries」)を設定します。

「サイドバー」への設定イメージは次のようになります。

テンプレートの修正

さらに他のリストを表示させるには、上記と同じセットを追加し、div要素のid属性値とgetFile()のパラメータを書き換えます。

4.JavaScript の追加

下記のスクリプトを外部ファイル(ajaxUtil.js)として保存し、サイトパスにアップロードします。

function getFile(url, id) {
    jQuery.ajaxSetup({
        cache: false
    });
    jQuery('#'+id).load(url);
}

getFile()の中で、jQueryのload関数を呼び出しています。また、キャッシュを無効にするため、ajaxSetupを利用しています。

リストが増えてもこのファイルを追加・変更する必要はありません。

5.script 要素の追加

jquery.min.jsと4項のスクリプトを読み込むため、「HTMLヘッダー」テンプレートモジュールに以下の内容を追加します。

<script type="text/javascript" src="<mt:StaticWebPath />jquery/jquery.min.js"></script>
<script type="text/javascript" src="<mt:BlogURL />ajaxUtil.js"></script>

「HTMLヘッダー」への設定イメージは次のようになります。

script 要素の追加

上のコードは、MTに同梱されているjquery.min.jsを利用した場合です。独自にダウンロードしたjquery.min.js(ブログのサイトパスにアップロード)を利用する場合は次のようにしてください。

<script type="text/javascript" src="<mt:BlogURL />jquery/jquery.min.js"></script>
<script type="text/javascript" src="<mt:BlogURL />ajaxUtil.js"></script>
Comments [2] | Trackbacks [1]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner


AMN
Categories
Monthly Archives
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3