このブログ「別館」のトップには、「お知らせ」と称して「別館」と「新館」の更新情報が表示されるようになっていますが、「別館」の更新情報を表示する仕組みについての記事2回目です。前回は、更新情報を提供する側、すなわち「新館」で更新情報をJSON形式で返す手順について触れました。今回は、「別館」でそれを受けて表示するための仕組みを書きます。
前回の記事：【Web開発】ブログに新館の更新情報を貼る（1）
実は、「別館」の実装の方が簡単なのです。トップにある記事に、以下のようなJavaScriptのコードを埋め込んでいます。
<div id="whatsnew" style="font-size: 80%;"></div>
<p><script type="text/javascript">
<!–
$.ajax( {
url: ‘http://www.naosan.jp/whatsnew.aspx’,
dataType: ‘jsonp’,
jsonp: ‘callback’,
error: function(XMLHttpRequest, status, errorThrown) {
$("#whatsnew").text(status);
},
success: function(data) {
var html = ‘<ul>’;
$.each(data, function() {
var aopen = ”;
var aclose = ”;
if( this.url != null ) {
aopen = ‘<a href="’+this.url+’">’;
aclose = ‘</a>’;
}
html += ‘<li>’+'[‘+this.date+’]’+aopen+this.title+aclose+'</li>’;
});
html += ‘</ul>’;
$("#whatsnew").html(html);
}
});
//–>
</script>
これを見てわかるように、jQueryを使っています。ですので、どこかでjQueryのライブラリを読み込んでおかなければなりません。私は、テンプレートをいじくりましたが、これはココログプロのみの話ですので、そうでない場合は記事内でscriptタグを用いて読み込んで下さい。
$.ajax()メソッドを使っていますが、これはエラーを捕捉したいためです。他のラッパーメソッドを使った方が簡単でしょうが、個人的にはきめ細かな制御ができる方が、後々楽です。ちなみにajax()メソッドの引数はリストのみで、必要なパラメータのみ指定すればOKです。
このコードでは、urlで「新館」の更新情報をJSONPで返すURLを、dataTypeでJSONPを、一応jsonpでコールバックパラメータ名callbackを、そしてエラー時の関数errorと成功時の関数successを指定しています。
重要なのはsuccessの中身で、要は得られたJSONPデータを順番に、<ul>要素の中身としてリンクとして展開しているだけです。展開したHTMLは、上の方にあるdiv要素の中身になります。
これで目的は達成できるのですが、なぜajax()なのかと言いますと、将来的に「新館」の方でデータ形式が変わっても追従しやすいようにするためと、すでに書きましたがエラーの捕捉を容易にしたいからです。
ということで、無事目的は達成されました。結果だけ書けば簡単ですが、実際にはかなり試行錯誤しました。Ajaxプログラムのデバッグがもっとやりやすければいいのですが…。
コメント