【Web開発】ブログに新館の更新情報を貼る(2)

このブログ「別館」のトップには、「お知らせ」と称して「別館」と「新館」の更新情報が表示されるようになっていますが、「別館」の更新情報を表示する仕組みについての記事2回目です。前回は、更新情報を提供する側、すなわち「新館」で更新情報をJSON形式で返す手順について触れました。今回は、「別館」でそれを受けて表示するための仕組みを書きます。

前回の記事:【Web開発】ブログに新館の更新情報を貼る(1)

Oshirase_01

 

実は、「別館」の実装の方が簡単なのです。トップにある記事に、以下のような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プログラムのデバッグがもっとやりやすければいいのですが…。

コメント