MovebleType + Ajax

タイトルでもう意味がわからないと思いますが、
MTを利用した案件を進めている途中でして、「これはつかえるなぁ」と感じたtipsを公開します。

要件定義

  • MT(MobableTyle)を利用したブログを作成する。
  • サイドバーにページング付「最近の記事」を表示。
  • 全件さかのぼって見られるようにする。
  • 全ページにこのページングアーカイブを設置

side

こんな感じですね。
今回は、下部にある数字をクリックでリストが非同期で入れ替わるという動きにします。

MTによるJSONの吐き出し

非同期で読み込ませるために、読み込ませるためのJSONファイルを用意します。
これにはMTユーザーにはおなじみスカイアークシステムのページングプラグイン「pageBute」を利用するため、あらかじめインストールしておきます。

まず、「メインページテンプレート」を新規追加します。
今回は出力ファイル名を「pagelist.json」としました。

MT template


<mt:pagecontents count="5" abs2rel="1">
<$mt:PageMaxCount setvar="TotalNum"$>
<$mt:PageCount setvar="CurrentNum"$>
<mt:setvarblock name="hasNext"><mt:if name="TotalNum" eq="$CurrentNum">false<mt:else>true</mt:if></mt:setvarblock>
<mt:entries lastn="0">
<mt:pagecontentsheader>
{
	"totalPage": "<$mt:Var name="TotalNum"$>",
	"currentPage": "<$mt:Var name="CurrentNum"$>",
	"unit": [
</mt:pagecontentsheader>
		<mt:if name="__counter__" value="5" op="%" ne="1">,</mt:if>{
		"title": "<$mt:EntryTitle remove_html="1" escape="js" replace="\'","'"$>",
		"time": "<$mt:EntryDate format="%Y/%m/%d"$>",
		"permalink": "<$mt:Entrypermalink$>"
		}
<mt:pagecontentsfooter>
	]
}
</mt:pagecontentsfooter>
<$mt:PageSeparator$>
</mt:entries>
</mt:pagecontents>

上記テンプレートを再構築すると、

  • pagelist.json
  • pagelist_2.json
  • pagelist_3.json

といった感じでJSONが吐き出されます。1ページの記事数が5になっていますが、必要に応じて上記テンプレート内を適宜書き換えて下さい。たとえばpagelist_2.jsonだと、以下のようなファイルが生成されます。

pagelist_2.json


{
	"totalPage": "4",
	"currentPage": "2",
	"unit": [
	
		{
		"title": "test09",
		"time": "2015.11.07",
		"permalink": "http://example.com/2015/12/000009.html"
		}
		
		,{
		"title": "test08",
		"time": "2015.11.06",
		"permalink": "http://example.com/2015/12/000008.html"
		}
		
		,{
		"title": "test07",
		"time": "2015.11.05",
		"permalink": "http://example.com/2015/12/000007.html"
		}
		
		,{
		"title": "test06",
		"time": "2015.11.04",
		"permalink": "http://example.com/2015/12/000006.html"
		}
		
		,{
		"title": "test05",
		"time": "2015.11.03",
		"permalink": "http://example.com/2015/12/000005.html"
		}

	]
}

MTのテンプレートを設定。

HTML側を作っていきます。
サイドバーなので、ウィジェットにでもしてしまいましょう。
今回は以下のようなソースでウィジェットを作成し、ウィジェットセットに組み込み全ページに読み込ませています。

ウィジェット


<div class="widget archive">
	<div class="widgetInner">
		<h3 class="widgeTitle">最新の記事</h3>
		<ul id="output"></ul>
		<div class="pager"></div>
	</div>
</div>

jsでAjaxによる非同期通信を行う

最後にjsを書きます。

jQuery


jsonPager();

function jsonPager(){
	jsonFileName =  '/pagelist.json';
    getJson(jsonFileName);

	$(document).on('click','#side .pager a', function(){
		$('#side #output').empty();
		$('#side .pager').empty();
    
		var num = $(this).html();
		var jsonFileName =  '/pagelist_' + num + '.json';
		if(num==1){
			jsonFileName =  '/pagelist.json';
		}
		getJson(jsonFileName);
		return false;
	});

}

function getJson(url){
	$.getJSON(url, function(data){
	for(var j=0; j< data.unit.length; j++){
		$('#output').append('<li>' + data.unit[j].time + '<a href="'+ data.unit[j].permalink +'">' + data.unit[j].title + '</a></li>'+ "\n");
	}
	for(var p = 0; p<data.totalPage; p++){
		var linkFlg = p == parseInt(data.currentPage)-1 ? false : true;
		if(linkFlg==false){
			$current = '<span>' + (p+1) + '</span>';
		} else {
			$current = '<a href="' + (p+1) + '">' + (p+1) + '</a>';
		}
		$('#side .pager').append($current);
	}
	});
}

これでページャー部分の数字(.pager a)をクリックすると上部のリスト(#output)がまるっと入れ替わります。
結果的にページングが実装できたということになります。

内容的には冗長な箇所や意図不明な箇所があるかもしれないので変なソースは適宜変更の上お役立てください。
ただこんなマニアックな仕様もあまり聞いたことが無いのでだれも興味ないかもしれないですが、誰かの役に立てばよいですね。

参考にさせてもらったサイト