▲PAGE TOP

2014年4月24日木曜日

複数のRSSを読み込んで、ギャラリー(画像の下にタイトルを配置)のように並べる


複数のRSSを読み込んで、ギャラリー形式に並べます。

表示したい場所に以下のタグを入力して保存するだけ。


<script type="text/javascript" src="http://www.hans-huber.com/0102030405/java/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// 初期設定
var disp_entry_count = 9;       //表示させたい記事の数
// RSS URL
var site = new Array();
site[0] = {
    title:'ブログ',
    url:'http://israel-biz.andjapan.org/feeds/posts/default',
    disp_entry:9        // 取得する記事の数
};


var channel = new Array();
var entry = new Array();
var entries = new Array();
var Feed = "";
google.load("feeds", "1");
function init() {
 
    var site_count = 0;
 
    for (var i=0; i<site.length; i++){
 
        // 読み込むRSSを設定
        var feed = new google.feeds.Feed(site[i]['url']);
        feed.setNumEntries(site[i]['disp_entry'])
        feed.load(function(rss) {
            if (!rss.error) {
             
                // RSSからサイトの情報を配列に格納
                channel['title'] = rss.feed.title;
                channel['link'] = rss.feed.link;
                channel['favicon'] = "http://favicon.hatena.ne.jp/?url=" + channel['link'];
                channel['description'] = rss.feed.description;
                channel['author'] = rss.feed.author;
                // RSSから記事の情報を配列に格納
                for (var j=0; j<rss.feed.entries.length; j++){
                 
                    var feed_entry = rss.feed.entries[j];
                    var entry = {
                        site_title : channel['title'],
                        site_link : channel['link'],
                        site_favicon : channel['favicon'],
                        title : feed_entry.title,
                        link : feed_entry.link,
                        content : feed_entry.content,
                        contentSnippet : feed_entry.contentSnippet,
                        publishedDate : feed_entry.publishedDate
                    };
                 
                    var date = new Date(entry['publishedDate']);
                    entry['time'] = date.getTime();
                    var yy = date.getYear();
                    var mm = date.getMonth() + 1;
                    var dd = date.getDate();
                    if (yy < 2000) { yy += 1900; }
                    if (mm < 10) { mm = "0" + mm; }
                    if (dd < 10) { dd = "0" + dd; }
                    entry['date'] = yy + "年" + mm + "月" + dd + "日";
                 
                    entry['img'] = entry['content'].match(/src="(.*?)"/igm);
                 
                    if (entry['img'] != null) {
                        for (var k=0; k<entry['img'].length; k++){
                            entry['img'][k] = entry['img'][k].replace(/src=/ig, "");
                            entry['img'][k] = entry['img'][k].replace(/"/ig, "");
                        }
                    }
                    entries.push(entry);
                }
            }
            site_count++;
            if (site.length == site_count){ disp(); }
        });
    }
}
 
function disp() {
    //日付順に並べ替え
    entries.sort (function (b1, b2) { return b1.time < b2.time ? 1 : -1; } );
 
    // 記事をhtmlに整形
    for (var l=0; l<disp_entry_count; l++){
        if (entries.length < l+1){ break; }
     
        if (entries[l]['img'] != null) { Feed +='<table cellpadding=6 id="toppage-rss-table"><tr><td><a href="'+ entries[l]['link'] + '"><img width="190" height="190" src="' + entries[l]['img'][0] + '"></a>'; }
        Feed += ''
                    + '<div id="toppage-rss"><a href="'+ entries[l]['link'] + '">' + entries[l]['title'] + '</a></div></td></tr></table>'
                    + '';
    }

    // 表示するタグに追加
    $('#topics').append( Feed );
}
google.setOnLoadCallback(init);
</script>
<!-- RSSを表示するタグ -->
<div id="topics"></div>




2つ以上のRSSを読み込む場合は?

いくつでも増やせますが、ウェブサイトの読み込み速度が遅くなるので注意!


site[0] = {
    title:'ブログの名前1',
    url:'読み込むサイトのRSS',
    disp_entry:9        // 取得する記事の数
};
site[1] = {
    title:'ブログの名前2',
    url:'読み込むサイトのRSS',
    disp_entry:9        // 取得する記事の数
};
site[2] = {
    title:'ブログの名前3',
    url:'読み込むサイトのRSS',
    disp_entry:9        // 取得する記事の数
};







COMMENT 投稿した内容は「 掲示板 」に掲載されます。
ペンネーム(必須)

タイトル

メールアドレス

話題にするページ/ウェブサイトのURL
メッセージ(必須)
アップロードする画像
パスワード(必須)