Google AJAX Feed API 展開例3(ブロック表示)

展開例(yahoo!ニュース・トピックスのトップ、海外、経済を表示します)

ローディング中・・・

ソースコード

  • フィード情報はJSONPで取得します。
  • 複数のフィード情報が読込可能です。
  • 表示したい場所に「<div id="feed"></div>」を追加することでフィード情報を表示できます。(変更可能)
  • 24時間以上経過している場合は、経過時間表示ではなく、年月日で表示します。
  • javascriptソースコードを変更することでHTMLの表示変更が可能。
<script type="text/javascript">
    var Entries = {
        //表示するフィードエントリの件数
        Num : 8,
        //読み込むファイルのURLを記述([]中の最終行はカンマなし)
        AryURL : [
            'http://rss.dailynews.yahoo.co.jp/fc/rss.xml',
            'http://rss.dailynews.yahoo.co.jp/fc/world/rss.xml',
            'http://rss.dailynews.yahoo.co.jp/fc/economy/rss.xml'
        ],
        Max : 0,
        FRHTML : '',
        End : 1
    };

    window.onload = function(){
        Entries.Max = Entries.AryURL.length;
        //フィード情報挿入先を指定
        Entries.FsHTML = document.getElementById( "feed" );
        for( var i = 0; i < Entries.Max; i++){
            var Urle = 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=' 
                    + Entries.Num + '&q=' + encodeURIComponent( Entries.AryURL[i] ) + '&callback=IentrieS';
            var target = document.createElement('SCRIPT');
            target.type = 'text/javascript';
            target.src = Urle;
            target.charset = 'UTF-8';
            document.body.appendChild( target );
        }
    }

    var IentrieS = function( data ){
        if( data.responseStatus == '200' ){
            //出力するHTMLを書き換えることでカスタマイズ可能
            Entries.FRHTML += '<div id="Box' + Entries.End + '"><h4 class="title"><a href="' + data.responseData.feed.link + '">'
               + data.responseData.feed.title + '</a></h4>';
            if( data.responseData.feed.entries.length ){
                Entries.FRHTML += '<ul class="box">';
                for (var i = 0; i < data.responseData.feed.entries.length; i++) {
                    var entry = data.responseData.feed.entries[i];
                    //時間表示の計算ここから
                    var D = '', Dsec = 0, s = 0, Dmin = 0, m = 0, Dhour = 0, h = 0, d = 0;
                    var FeDATE = new Date( entry.publishedDate );
                    var Dp = ( new Date() ).getTime() - Date.parse( entry.publishedDate );
                    Dsec = Dp / 1000;
                    s = ( Dp / 1000 ) % 60;
                    D = s + '秒前';//出力するHTMLを書き換えることでカスタマイズ可能
                    if( ( ( Dp / 1000 ) - s ) >= 60 ){
                        Dmin = ( Dsec - s ) / 60;
                        m = Dmin % 60;
                        D = m + '分前';//出力するHTMLを書き換えることでカスタマイズ可能
                        if( ( Dmin - m ) >= 60 ){
                            Dhour = ( Dmin - m ) / 60;
                            h = Dhour % 60;
                            D = h + '時間前';//出力するHTMLを書き換えることでカスタマイズ可能
                            if( ( Dhour - h ) >= 24 ){
                                //出力するHTMLを書き換えることでカスタマイズ可能
                                D = FeDATE.getFullYear() + '.' + ( FeDATE.getMonth()+1 ) + '.' + FeDATE.getDate();
                            }
                        }
                    }
                    //時間表示の計算ここまで
                    //出力するHTMLを書き換えることでカスタマイズ可能
                    Entries.FRHTML += '<li class="entry"><a href="' + entry.link + '">' + entry.title + '</a>   ' + D + '</li>';
                }
                Entries.FRHTML += '</ul></div>';//出力するHTMLを書き換えることでカスタマイズ可能
            }
            if( Entries.End == Entries.Max ){
                Entries.FsHTML.innerHTML = Entries.FRHTML;
            }else{
                Entries.End ++;
            }
        }
    }
</script>			

フィード情報表示部分のCSSソース

<style type="text/css">
   #feed{
      width: 880px;
      margin-right: auto;
      margin-left: auto;
      overflow: hidden;
   }
   #feed > div{
      float: left;
      width: 33%;
   }
   #feed .title{
      margin: 0px 0.8em 0px 0px;
      background-color: #DDDDDD;
      padding: 0.5em 0.5em 0.2em 0.5em;
      border-top: solid 1px #DFDFDF;
      border-right: solid 1px #ACACAC;
      border-bottom: double 4px #ACACAC;
      border-left: solid 1px #EAEAEA;
      
   }
   #feed .box{
      margin: 0px;
      padding: 0em 1em 0em 0em;
      border-left: solid 1px #CCC;
   }
   #feed .entry{
      list-style-type: none;
      margin: 0px;
      border-bottom: solid 1px #CCC;
      padding: 0.3em 0.3em 0.3em 1.5em;
   }
   #feed .entry:before{
      content:"»";
      position:relative;
      right:6px;
      color: #F00;
   }

   #feed .title a{
      text-decoration: none;
   }
   #feed .entry a{
      text-decoration: none;   
   }
</style>

Google AJAX Feeds API のパラメータ

q 読み込むフィード情報のURL(省略不可)
v バージョン番号。現在は1.0固定(省略不可)
hl 言語指定
key APIキーの指定
callback JSONPのコールバック関数名
context callbackの第一引数にそのまま渡される文字列
num 取得するエントリの最大数。最大は100、省略時は4
output データ形式の指定。json, json_xml, xml のどれか(省略時はjson)
scoring=h 指定すると、キャッシュに残っている過去のエントリも取得する