Home > スポンサー広告 > Google_Feed_APIでフィードを読み込んで表示を自分仕様に変更したい。 Web API > Google_Feed_APIでフィードを読み込んで表示を自分仕様に変更したい。

[ スポンサー広告 ] はてなブックマーク - スポンサーサイト
スポンサーサイト

  • -------- :
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[ Web API ] はてなブックマーク - Google_Feed_APIでフィードを読み込んで表示を自分仕様に変更したい。
Google_Feed_APIでフィードを読み込んで表示を自分仕様に変更したい。

google.feeds.FeedControlでも簡単にrssを表示でき、見た目もcssで変更できます。ですが、細かいところの表示を変えることはできません。そんなときはgoogle.feeds.Feedを使用するとよいようです。
今回は3点、

 ・サイトタイトルと記事リストの間に好きな文章をいれたい。

 ・フィードによって読み込む記事数を指定したい。

 ・日付の表示を変えたい。

を実現できればなと思いました。MSN産経ニュース と はてなブックマーク のフィードを読み込んで試してみます。


例えば、下記のようにすると、

<script src='http://www.google.com/jsapi?key=あなたのAPIキー' type='text/javascript'></script>
<script type='text/javascript'>

google.load('feeds', '1');

function feed(){
    this.url      = '';
    this.title     = '';
    this.numentry = null;
}
function feedList(){
    this.list = [];
}
feedList.prototype.addFeed = function(_url,_title,_numentry){
    fd          = new feed();
    fd.url      = _url;
    fd.title    = _title;
    fd.numentry = _numentry;
    this.list.push(fd);
}

function getFeed(_feedlist,_id){

     var keylist={};//urlとタイトルの連想配列を作成
     for (var k = 0; k < _feedlist.list.length; k++) {
        keylist[_feedlist.list[k].url] = _feedlist.list[k].title;
     }

     for (var e = 0; e < _feedlist.list.length; e++) {
     
         var feed = new google.feeds.Feed(_feedlist.list[e].url);
         if(_feedlist.list[e].numentry){  feed.setNumEntries(_feedlist.list[e].numentry);}
         feed.load(function (result){
              if (!result.error) {
                var container = document.getElementById(_id);
                html = '<h3>' + result.feed.title +'</h3>';
                html += '<p>'+ keylist[result.feed.feedUrl] +'</p>';
                html += '<ul>';
                for (var i = 0; i < result.feed.entries.length; i++) {
                        var entry = result.feed.entries[i];
                        var pdate = new Date(entry.publishedDate);
                        var Y = pdate.getFullYear();
                        var m = ('0' + (pdate.getMonth() + 1) ).slice(-2);//2桁表示に
                        var d = ('0' + pdate.getDate() ).slice(-2);
                        var date = Y + '年' + m + '月' + d + '日';
                        var time = pdate.getHours() +'時'+ pdate.getMinutes() +'分'+ pdate.getSeconds()+'秒';

                        html += '<li>';
                        html += '<a href="' + entry.link + '" target="_blank">' + entry.title + '</a>';
                        html += '<span>[&nbsp;'+ date + '&nbsp;' +time +'&nbsp;]<span></li>';                               
                }
                html += '</ul>';
                container.innerHTML += html;
                }
            }
         );
     }
}

function init(){
    var feedlist= new feedList();
    feedlist.addFeed( 'http://sankei.jp.msn.com/rss/news/points.xml'
                     ,'<a href="http://sankei.jp.msn.com/">MSN産経ニュース</a>はマイクロソフトと産経デジタルが共同運営しているニュースサイトです。'
                     ,5 );
                 
    feedlist.addFeed( 'http://b.hatena.ne.jp/entrylist/it?sort=hot&threshold=3&mode=rss'
                     ,'<a href="http://b.hatena.ne.jp/">はてなブックマーク</a>はオンラインにブックマークを無料で保存できるソーシャルブックマークサービスです。'
                     ,8 );
    getFeed( feedlist , 'outcontent' );
}

google.setOnLoadCallback(init);

</script>
<div id='outcontent'></div>


↓↓↓このように表示されます(cssで見た目を整えています)。


ところで、javascriptの書き方ってこれでいいのかな。よくわかりません。変なところがあったら、どなたか教えてくだされば嬉しいです


補足:

resultで取得できるものです。

result.feed.title       サイトのタイトル
result.feed.link        サイトのアドレス
result.feed.description サイトの概要
result.feed.author      サイトの著者

result.feed.entries[…].title          記事のタイトル
result.feed.entries[…].link           記事のアドレス
result.feed.entries[…].content        記事の内容(HTMLのタグも含む)
result.feed.entries[…].contentSnippet 記事の概要(HTMLのタグは含まない)
result.feed.entries[…].publishedDate  記事が公開された日付
result.feed.entries[…].categories[]   記事のカテゴリやタグ



参考:

Google AJAX Feed API入門 フィードの取得
google.feeds.Feedクラス
Google Feed API Developer's Guide Result formats
Google AJAX Feed APIではてなブックマークの人気エントリーを表示
Google Feed APIを使って複数RSSフィードを表示する【カスタマイズ版】

こちらの記事も合わせてご覧ください



コメントの投稿

非公開コメント

サイト内検索

カテゴリ
最新記事
RSS
最新トラックバック
最新コメント
月別アーカイブ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。