dogmap.jp

さて、昨日のエントリの続き。
「Googlle AJAX Feed API なんて外部のサービスに依存したくないんじゃ！」という人のために、昨日と同様のことを自前で行うための方法。

WordPress の更新情報を JavaScript で取得して表示するには AJAX と呼ばれる技術を使います。
しかし、http を通してデータを読み込むための XMLHttpRequest では、制限として別ドメインのデータを読み込むことができません。
これを回避する方法が JSONP です。
hiromasa さんが、昨日のエントリにトラックバックしてくれた静的 HTML に WordPress を埋め込む方法を用いて JSONP 形式で、WordPress の最新記事を取得してみましょう。

まずは JSONP 形式で、WordPress の最新エントリ一覧を取得する方法。
以下のようなコードを get_the_archives.php とでも名づけて WordPress のルートディレクトリに置いておきましょう。

<?php
include_once('./wp-load.php');

// パラメータ取得
$limit = (int) (isset($_GET['limit']) && is_numeric($_GET['limit']) ? $_GET['limit'] : 5 );
$callback = wp_specialchars(attribute_escape(isset($_GET['callback']) ? $_GET['callback'] : 'callback'));
$charset = get_bloginfo('charset');

query_posts("showposts=$limit");		// 最終 $limit エントリ取得のループをつくる
if ( have_posts() ) {
	$out = null;

	// 最終 $limit エントリのタイトル・URL・日付を取得する
	while ( have_posts() ) {
		the_post();
		$out .= ( !empty($out) ? ',' : '');
		$out .= '{';
		$out .= '"title":"' . get_the_title() . '"';
		$out .= ',"link":"' . get_permalink() . '"';
		$out .= ',"pubdate":"' . the_date('Y-m-d H:i:s','','',false) . '"';
		$out .= '}';
	}

	// JSONP 形式で書き出す
	nocache_headers();
	header("Content-Type: application/x-javascript; charset=$charset");
	echo "$callback([$out]);";

} else {
	// 無ければ 404 Not Found を返す
	header("HTTP/1.0 404 Not Found");
	wp_die("404 Not Found");
}
?>

これを <script type="text/javascript" src="http://dogmap.jp/get_the_archives.php?limit=5&amp;callback=callback"></script> みたいな感じで呼び出してやれば、JSONP 形式で最新記事の一覧を取得できます。

で、この取得したデータを展開するための callback 関数を作ってやれば、別ドメインにある html 上に一覧を表示することができます。
callback 関数は、以下のような感じ。

function callback(results) {
	var ul = document.createElement("ul");
	for (var i = 0; i < results.length; i++) {
		var entry = results[i];
		var li = document.createElement("li");
		var a  = document.createElement("a");
		a.setAttribute("title", entry.title);
		a.setAttribute("href",  entry.link);
		a.appendChild(document.createTextNode(entry.title));
		li.appendChild(a);
		ul.appendChild(li);
	}
	var container = document.getElementById("archives");
	container.appendChild(ul);
}

とても、簡単ですね。
これで、id="archives" な要素の子要素として、更新情報一覧がセットされている <ul> 要素が追加表示されます。

注意点は callback 関数は、JSONP 形式で呼び出すための <script> タグよりも前に書いておくことです。

これを使ったデモを、以下のリンクに置いておきます。
RSS フィード表示テスト : dogmap.jp