複数RSS の取得と一覧表示

普段は RSS の取得は PHP で処理していますが、今回は以下の提案を頂きました。
「サブドメイン配下にある複数の Blog の RSS 一覧を HTML 拡張子で表示したい。」
それに合わせて今回はRSSの取得をやってみます。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function(){

                // Set URL
                var maxFeed = 10;
                var urls = [
                    'http://jsource.nakweb.com/?feed=rss2',
                    'http://jsource.nakweb.com/?feed=comments-rss2'
                ];

                // Get RSS
                var arrFeed = new Array();
                var cntFeed = 0;
                for ( var urlCnt = 0; urlCnt < urls.length; urlCnt++ ){
                    $.ajax({
                        url      : urls[urlCnt],
                        dataType : 'xml',
                        success  : function(xml) {
                            // Get Feed
                            $(xml).find('item').each(function(){
                                var title = $(this).find('title').text();
                                var link  = $(this).find('link').text();
                                var date  = $(this).find('pubDate').text();
                                // Date Format
                                date = getFormatDate(date);
                                // Set Array
                                arrCnt = arrFeed.length;
                                arrFeed[arrCnt] = new Array();
                                arrFeed[arrCnt]['date'] = date;
                                arrFeed[arrCnt]['feed'] = '<dl><dt><a href="' + link + '">' + date + '</a></dt><dd><a href="' + link + '">' + title + '</a></dd></dl>';
                            });
                            cntFeed++;
                            exeDispFeed();
                        },
                        error    : function() { // Error
                            //$('#disp_area').append('<p>Not Read Feed</p>');
                            cntFeed++;
                        }
                    });
                }

                // Feed Disp Function
                var exeDispFeed = function(){
                    // Feed Disp
                    if (cntFeed >= urls.length) {
                        // Sort
                        arrFeed.sort(function(a, b) {
                            return (a.date > b.date) ? -1 : 1;
                        });
                        // Disp
                        for ( var feedCnt = 0; feedCnt < arrFeed.length; feedCnt++ ){
                            if (maxFeed <= feedCnt) {
                                return;
                            }
                            $('#disp_area').append(arrFeed[feedCnt]['feed']);
                        }
                    }
                };

                // Day Format
                var getFormatDate = function(date){
                    var getDate  = new Date(date);
                    var year     = getDate.getFullYear();
                    var month    = getDate.getMonth() + 1;
                        month    = ('0' + month).slice(-2);
                    var day      = getDate.getDate();
                        day      = ('0' + day).slice(-2);
                    var dispDate = year + '/' + month + '/' + day + '/';
                    return dispDate;
                };

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin           : 20px;
            }
            dd {
                margin-bottom    : 20px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <ul id="disp_area"></ul>
        </div>

    </body>
</html>

sample

sample を開くと当サイトの Feed が一覧表示されます。
投稿とコメントの Feed です。
# コメントが余りにも無いんで「投稿」しか表示されていませんが(笑)

RSSを指定すると指定数分の URL からの情報を取得します。
一応投稿日付によって Sort して指定数までの Feed を表示します。

全部読みこんでから表示する必要もあるのでちょっと悩みましたが
こんな感じでどうでしょう。
apache の設定を変えても良かったんですが、これも良い感じではないでしょうか。

今度から Blog の投稿一覧はこれでも良い気がします。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 1 人中 1 人がこの 投稿 は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です