• 記事更新情報やコメント情報をヘッドラインとして表示する

記事更新情報やコメント情報をヘッドラインとして表示する

投稿者 hyperhands 時刻: 日曜日, 4月 11, 2010 カテゴリー , ,
これまで、サマリーのリスト表示ページでは最新の投稿記事を表示できますので、これを「What's New」としていました。

これは、記事の公開日時を元にしていますので記事の修正があっても分からないのが難点でした。

そこで、更新日時でソートした記事フィードをJSONP呼び出しして、コールバック関数で受け取り後に更新日時とタイトル、そしてコメント数をリスト表示する事としました。

リストは各記事へのリンク、そしてコメント数の表示部は記事の当該コメントへのリンクとして動作します。

なお、カテゴリーのリストページでも当該カテゴリー内の更新内容を表示しますので、ユーザビリティの向上が期待できます。

ソースコード

以前書いたリストのページング表示のスクリプト内でオブジェクト「ID:headline-updated」があれば動作するようプログラムされています。
※　関連関数は「getHeadline、viewHeadline」となっています。 
<!--
//-------------------------------------
// Copyright (C) 2010 Hyperhands.com
// This code Created by S.Kobayashi
// License agreement with GNU LGPL
//-------------------------------------
var blogUrl = "/";
var currentUrl = location.href;

var maxResults = 5;
var maxHeadlines = 10;
var maxLinks = 10;
var isHome=false;
var isLabel=false;
var isStatic=false;
var isItem=false;
var labelPrefix = "search/label/";

var pageNo = 0;

if( currentUrl.indexOf("#PageNo=" ) > -1){
   var strNo = currentUrl.substring( currentUrl.indexOf("#PageNo=" )+8);
   pageNo = parseInt( strNo )-1;

}

if ( currentUrl.indexOf( labelPrefix ) > -1 ){
   isLabel=true;
} else if( currentUrl.indexOf( '.html' ) == -1 ){
   isHome=true;
} else if( currentUrl.indexOf( '/p/' )> -1){
   isStatic=true;
} else {
 isItem=true;
}
var feedUrl = blogUrl + "feeds/posts/summary/";
var headlineUrl = blogUrl + "feeds/posts/summary/";
var blogPager = document.getElementById("blog-pager");
var labelName = "";

function viewPager(){
  try{
    if( isLabel || isHome ){ 
      if( isLabel ){
        var st = currentUrl.indexOf( labelPrefix ) + labelPrefix.length;
        labelName = currentUrl.substring( st );
        if( labelName.indexOf("/") > -1){
          labelName = labelName.substring(0,labelName.indexOf("/"));
        }else if( labelName.indexOf("?") > -1 ){
          labelName = labelName.substring(0,labelName.indexOf("?"));
        }
        feedUrl += "-/" + labelName;
        headlineUrl += "-/" + labelName;
        blogUrl += labelPrefix + labelName + "?";
      }else{
        blogUrl = blogUrl + "search?";
      }
      feedUrl = feedUrl + "?orderby=published";
      headlineUrl = headlineUrl + "?orderby=updated";
      blogUrl += "orderby=published&max-results=" + maxResults ;

      feedUrl += ("&max-results=" );
      headlineUrl += ("&max-results=" );
      var srcStr = (feedUrl + maxResults + "&alt=json-in-script&callback=viewPageNavigation");
      var scriptStr = ("<script src='"
                 + srcStr
                 + "' type='text/javascript'>"
                 + "</script>");
      //blogPager.innerHTML = srcStr;
      document.write( scriptStr );
    }
  }catch( e ){
    alert( e );
  }
}

function viewPageNavigation( result ){

   var feed = result.feed;   
   
   var totalResults = parseInt(feed.openSearch$totalResults.$t, 10);
   var startIndex = parseInt(feed.openSearch$startIndex.$t, 10);
   var itemsPerPage  = parseInt(feed.openSearch$itemsPerPage.$t, 10);
   
   var totalPage = parseInt(totalResults / maxResults );
   if( (totalResults % maxResults ) > 0){
      totalPage += 1;
   }
   var head = "<span class='headPager'>Pages( " + totalPage + " )</span>";
   
   blogPager.innerHTML = head;
   
   if( pageNo > 0 ){
      getPrevNext("Prev");
   }
   var startPage = pageNo;
   var endPage= pageNo + maxLinks;
   var offset = parseInt( maxLinks / 2 );
   if( endPage > totalPage){
     if( endPage - totalPage > offset ) offset = endPage - totalPage;
     for(i=0; i < offset; i++ ){
       if( endPage == totalPage ) break;
       if( startPage > 0) startPage--;
       endPage--;
     }
   }else{
     for(i=0; i < offset; i++ ){
       if( startPage == 0 ) break;
       if( startPage > 0) startPage--;
       endPage--;
     }
   }
   for(i=startPage; i < endPage; i++){
      getHeadline( i );
      var pager="";
      var className = "pageLink";
      if( pageNo == i) className = "currentPageLink";

      pager += "<span class='" + className + "'>";
      var targetIndex=0;
      var scriptStr ="";
      var srcStr ="";
      if( className != "currentPageLink" ){
         scriptStr = "<script src='" ;
         srcStr = feedUrl + 1 + "&start-index=";
         targetIndex =  (maxResults*i); //+ startIndex -1;
         if( targetIndex ==0) targetIndex =1; 
         srcStr += (targetIndex + "&alt=json-in-script&callback=redirectTargetPage");
         scriptStr += (srcStr + "' type='text/javascript'></script>");
      }
      pager += ("<a id='targetPageLink" + targetIndex + "'>" +( i+1 ) + "</a></span>");
      blogPager.innerHTML += pager;
      if( className != "currentPageLink" ) document.write( scriptStr );
      
   }
   
   if( pageNo<(totalPage-1)){
      getPrevNext("Next");
   }
   
}

function getHeadline( i ){
  try{
   if(i==0){
    var div = document.getElementById( 'headline-updated');
    if( div != undefined ){
      var srcStr = headlineUrl + maxHeadlines + "&alt=json-in-script&callback=viewHeadline";
      var scriptStr = "<script src='" + srcStr + "' type='text/javascript'></script>";
      //div.innerHTML = srcStr;
      document.write( scriptStr );
    }
   }
  }catch( e ){
    alert( e );
  }
}

function viewHeadline( result ){
  try{

    var div = document.getElementById( 'headline-updated');
    if( div != undefined ){
      var idPrefix = '.post-';
      var feed = result.feed;
      if( feed.entry.length > 0 ){
        var h5 = document.createElement( 'h5' );
        var prefix = "";
        //if( isHome ) prefix = "このサイト";
        if( isLabel ) prefix = decodeURI( labelName ) + " で";
        h5.appendChild( document.createTextNode( prefix + '最近更新のあった記事 ' + feed.entry.length+ '件' ));
        div.appendChild( h5 );

        var ul = document.createElement( 'ul' );
        div.appendChild( ul );
        for( var i=0; i< feed.entry.length; i++){
          var entry = feed.entry[i];
          var h = document.createElement( 'li' );
          h.setAttribute( 'class', 'updatedHeadline' );
          var id = entry.id.$t;
          id = id.substring( id.indexOf( idPrefix  ) + idPrefix.length );// 将来のコメントHeadline化で使用する
          h.setAttribute( 'id', 'uHeadline-' + id );
        
          var d = document.createElement( 'span' );
          d.setAttribute( 'class', 'updated' );
          var upd = entry.updated.$t;
          var monthDay = upd.substring(5,10).replace('-','/');
          var time = upd.substring(10,16).replace('T',' ');
          d.appendChild( document.createTextNode( monthDay + time ) );
          h.appendChild( d );

          var t = document.createElement( 'a' );
          t.setAttribute( 'class', 'title' );
          t.setAttribute( 'href', getLink( entry ) );
          var title = entry.title.$t;
          var abbr = document.createElement( 'abbr' );
          abbr.setAttribute( 'title', '記事を表示するリンク' );
          abbr.appendChild( document.createTextNode( title ) );
          t.appendChild( abbr );

          // コメントカウント
          for(var j=0; j< entry.link.length; j++){
            var link = entry.link[j];
            if( link.rel == 'replies' ){
              if( link.title.indexOf( ' 件のコメント' ) > -1){
                var commentCount = link.title.substring( 0, link.title.indexOf( ' ' ) );
                if( commentCount != '0' ){
                  var c = document.createElement( 'a' );
                  c.setAttribute( 'class', 'commentCount' );
                  c.setAttribute( 'href', link.href );
                  var ab = document.createElement( 'abbr' );
                  ab.setAttribute( 'title', 'コメントを表示するリンク' );
                  ab.appendChild( document.createTextNode( '【' + commentCount + '】' ) );
                  c.appendChild( ab );
                  t.appendChild( c );
                }
              }
            }
          }// j loop

          h.appendChild( t );

          ul.appendChild( h );
        }// i loop
      }
    }
  }catch( e ){
    alert( e );
  }
}
function getLink(entry){
   
    for(var i=0;i<entry.link.length;i++){
      if( entry.link[i].rel == 'alternate' ){
        return entry.link[i].href;
      }
    }
    return '';
}
function getPrevNext(vector){
   var startIndex = 0;
   var scriptStr = "<script src='";
   var srcStr = (feedUrl + 1 + "&start-index=");
   var span = "<span class='";

   if( vector.toLowerCase() == "prev" ){
      srcStr += ((pageNo-1) * maxResults + 1)
              + "&alt=json-in-script"
              + "&callback=redirectPrevPage";
      span += "naviLinkPrev'>"
           + "<a href='javascript:void();' id='prevPageLink'>" + vector + "</a></span>";
   }else{
      srcStr += ((pageNo+1) * maxResults)
           + "&alt=json-in-script"
           + "&callback=redirectNextPage";
      span += "naviLinkNext'>"
           + "<a href='javascript:void();' id='nextPageLink'>" + vector + "</a></span>";  
   }
   blogPager.innerHTML += span;
   scriptStr += (srcStr + "' type='text/javascript'></script>");
   document.write(scriptStr);
}

function redirectPrevPage( result ){
   var targetLink = document.getElementById("prevPageLink");
   var date = encodeDate( result.feed.entry[0].published.$t );
   if( pageNo == 1) targetLink.href =  blogUrl + "#PageNo=1";
   else targetLink.href =  blogUrl + "&updated-max=" + date  + "#PageNo=" + pageNo ;
}

function redirectNextPage( result ){
   var targetLink = document.getElementById("nextPageLink");
   var date = encodeDate( result.feed.entry[0].published.$t );
   
   targetLink.href =  blogUrl + "&updated-max=" + date  + "#PageNo=" + (pageNo + 2);
}

function redirectTargetPage( result ){
   var startIndex = parseInt(result.feed.openSearch$startIndex.$t, 10);
   var targetPage = parseInt( startIndex / maxResults );
   var targetLink = document.getElementById("targetPageLink" + startIndex );   
   var feed = result.feed;   
   var date = encodeDate( feed.entry[0].published.$t );
   if( startIndex == 1) targetLink.href =  blogUrl + "#PageNo=" + targetLink.innerHTML;
   else targetLink.href =  blogUrl + "&updated-max=" + date + "#PageNo=" + targetLink.innerHTML;
}

function encodeDate(dateStr){
   dateStr = dateStr.substring(0, 19) + dateStr.substring(23, 29);
   return encodeURIComponent( dateStr );
}

viewPager();

-->
ヘッドラインを表示するタイミングを制御するコード
@Bloggerの管理ツールで「レイアウト＞Htmlの編集」で「<data:post.body/>」の記載されているセクション内に以下のコードをコピー＆ペーストし、「<b:include data='top' name='status-message'/>」の後ろへ「<b:include data='posts' name='wellcomeItem'/>」を記載します。
※　ウィジェットのテンプレートを展開をチェックして挿入箇所を検索します。 
<b:includable id='wellcomeItem' var='posts'>
  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <div class='headline'>  
        <b:if cond='data:blog.url == data:blog.homepageUrl'>
          <h2>What&#39;s New</h2>
        </b:if>
        <div id='headline-updated'/>
      </div>
    </b:if>
  </b:if> 
</b:includable>
ヘッドライン用のCSS
「]]></b:skin>」の前に以下のスタイルシートをコピー＆ペーストして適用します。
.headline{
  margin:20px;
  padding: 20px;
  font-size: 15px;
  border-radius:10px;
  -webkit-border-radius: 10px; /* Safari、Google Chrome */
  -moz-border-radius: 10px; /* Firefox */
  background: beige;
  border: 1px solid #black;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
 filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=5);
}
.headline abbr{
  margin-left: 5px;
}
.headline h2{
 margin-top: 0px;
 color: #ff5555;
 text-shadow: 2px 2px 3px #550000; 
}
.headline h5{
 margin-top: 0px;
 margin-left:20px;
 border-bottom:3px double #112299;
 color: #1133aa;
 font-size:18px;
 font-weight: bold;
 text-shadow: 2px 2px 2px #silver; 
}
.headline .updated{
 color: #3355ff;
 font-size:10px;
 font-weight: bold;
}
.headline .title{
 margin-left: 5px;
 font-size:8px;
 color: #11cc33;
}
.headline .commentCount{
 margin-left:5px;
 font-size:8px;
 color: #ff3355;
 font-weight: bold; 
}

コメント(0)

コメントを投稿

関連記事
Blogger
Javascript
ページング