Google Ajax Feed API でホームページにRSSを表示させるメモ

ご無沙汰です。

暑かった夏もようやく終わってくれたようで、ここ数日はクーラーをつけづに仕事をしています。

先週から仕事仲間と一緒にサイト制作＆一部WordPressの組み込み＋携帯サイトの導入作業をしています。
今日は『サイトトップページにWPの記事一覧を表示する』の一つの方法メモ。

★今回は「Aｶﾃｺﾞﾘｰ」「Bｶﾃｺﾞﾘｰ」の記事をそれぞれ独立して構築したかったのでWPは2つ設置。
　Ver3.0からMTのようなマルチブログ化も可能になりましたが、
　今回は『Aｶﾃｺﾞﾘｰ』だけの検索フォームが必須項目だったので、ちょっとアナログな方法で
　こうちくすることに・・・しました！

逆に『Bｶﾃｺﾞﾘｰ』のみすべての記事をWebサイトのトップページに表示したかったので、
今回は「RSSを表示させる」方法をとることにしました。

仕掛けは「Google Ajax Feed API」を利用すること。
今回はこちらで紹介している方法を参考にさせてもらいました。
jQueryでRSSを取得しリストで表示

＜HTML＞

    //head内にjQueryを<script type="text/Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> //body内にリスト表示させる場所を作ってあげる<div id="list-01"><!-- ここにフィードの内容が表示される --></div>

＜JavaScript＞

    $(function(){
    //RSSが同じドメインにある場合
    $.ajax({
    //同じドメインにあるXMLファイルのある場所を指定してあげる
    url: 'rss.xml',
    //非同期通信
    async: true,
    //通信結果をキャッシュしない
    cache: false,
    dataType: "xml",
    success: function(xml){
    $(xml).find('item').each(function(i){
    if (i == 10) {
    return false;
    }
    var title = $(this).find('title').text();
    var url = $(this).find('link').text();
    var date = $(this).find('pubDate').text();
    //月表示を数字表示に変換する
    date = dateChanger(date);
    //idがlist-01の箇所にリストで書き出す
    $('#list-01').append('<li>' + date + '<a href="' + url + '">' + title + '</a></li>');
    });
    //idがlist-01にあるliをolで括る
    $('#list-01 li').wrapAll('<ol></ol>');
    },
    //エラー表示
    error: function(xml){
    $('#list-01').append('<p>Feedの読み込みに失敗しちゃいました。</p>');
    }
    });
    //月表示を数字表示に変換する
    var dateChanger = function(str){
    var mydate = new Date(str);
    yy = mydate.getFullYear();
    mm = mydate.getMonth() + 1;
    dd = mydate.getDate();
    if (mm < 10) { mm = "0" + mm; }
    if (dd < 10) { dd = "0" + dd; }
    datestr = yy + "年" + mm + "月" + dd + "日";
    return datestr;
    };
    });

これを実際にトップページで読み込ませて設置。
今回は日付の表示はいらないので（タイトルだけでOK）
日付に関する表示はCUTしました。

今回は『同じドメイン内にRSSが設置されていることが前提』の方法です。

違うドメインからのRSSを引っ張ってくるやり方はまた別で。

Follow me!

@goristyle