Google AJAX Feed API 展開例4(タブ表示)

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

ローディング中・・・

ソースコード

  • jqueryを使用します。
  • フィード情報はJSONPで取得します。
  • 複数のフィード情報が読込可能です。
  • 表示したい場所に「<div id="feedTab"></div><div id="feed"></div>」を追加することでフィード情報を表示できます。(変更可能)
  • 24時間以上経過している場合は、経過時間表示ではなく、年月日で表示します。
  • javascriptソースコード、cssを変更することでHTMLの表示変更が可能。
//jqueryのパスは、ご使用の環境に適時書き換えてください。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
<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,
      TAHTML : '',
      FRHTML : '',
      End : 1
   };

   //Jqueryを使用します。
   $(function($){
      Entries.Max = Entries.AryURL.length;
      //フィード情報挿入先を指定
      Entries.TabHTML = document.getElementById( "feedTab" );
      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 );
      }
      $("a","#feedTab").live("click",function(e){
         $(this).parent("li").addClass("opend").removeClass("closed"),
         $(this).parent("li").siblings().removeClass("opend").addClass("closed"),
         $( "#"+$(this).attr("href") ).slideDown(),
         $( "#"+$(this).attr("href") ).siblings().slideUp(),
         e.preventDefault();//#feedTab内の a href によるページ推移は無効にする
      });
   });

   var IentrieS = function( data ){
      if( data.responseStatus == '200' ){
         //出力するHTMLを書き換えることでカスタマイズ可能
         Entries.TAHTML += '<li class="trigger' + Entries.End + '"><a href="Box' + Entries.End + '"><span>'
            + data.responseData.feed.title + '</span></a></li>';
         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.TabHTML.innerHTML = '<ul>' + Entries.TAHTML + '</ul>';
            Entries.FsHTML.innerHTML = Entries.FRHTML;
         }else{
            Entries.End ++;
         }
      }
   }
</script>			

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

<style type="text/css">
   /*タブコントロールの成形*/
   #feedTab{
      margin-bottom: -1px;
   }
   #feedTab ul{
      display: block;
      margin: 0px;
      padding: 0px;
      list-style-type: none;
      width: 100%;
      overflow: hidden;
   }
   #feedTab li{
      display: block;
      float: left;
      list-style-type: none;
      margin: 0px 1px 0px 0px;
      border: 1px solid #CCC;
      padding: 0px;
      background-color: #E6E6E6;
   }
   #feedTab li a{
      padding: 0.5em;
      display: block;
      text-decoration: none;
      outline: none;
   }

   /*開いた時のタブ(.trigger1は最初に開けておくタブ)*/
   #feedTab li.trigger1,
   #feedTab li.opend{
      padding-bottom: 3px;
      border-bottom-style: none;
      background-color: #FFF;
   }
   #feedTab li.trigger1 a:before,
   #feedTab li.opend a:before{
      content:"▼";
      position:relative;
      right:0.2em;
   }
   /*閉じた時のタブ*/
   #feedTab li.closed{
      border: 1px solid #CCC;
      padding: 0px;
      background-color: #E6E6E6;
   }
   #feedTab li a:before,
   #feedTab li.closed a:before{
      content:"━";
      position:relative;
      right:0.2em;
   }
   /*対象は閉じておく*/
   #feed > div{
      display: none;
      padding: 2em;
      border: 1px solid #CCC;
   }
   /*最初に開いておく対象*/
   #feed > div#Box1{
      display: block;
   }

   /*#feed内の成形*/
   #feed .title{
      margin: 0px;
      padding: 0px;
   }
</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 指定すると、キャッシュに残っている過去のエントリも取得する