• BloggerをGoogle検索結果風にページングする③

BloggerをGoogle検索結果風にページングする③

投稿者 hyperhands 時刻: 月曜日, 3月 22, 2010 カテゴリー , ,
さて、ラベルページ・ホームページの判断ができるようになったら、フィード問合せスクリプトを仕込んで、後の処理はコールバック関数（viewPageNavigation）を後に作成して任せる事としています。 

var feedUrl = blogUrl + 'feeds/posts/summary/'; // フィードサマリー取得クエリー
var blogPager = document.getElementById("blogPager");// PageNavigationを配置するSpanオブジェクトを取得
if( isLabel || isHome ){ 
   if( isLabel ){
      // ラベルページの場合、ラベル名を取得
      var labelPrefix = 'search/label/';
      var st = currentUrl.indexOf( labelPrefix  ) + labelPrefix.length;
      var 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;
      blogUrl += labelPrefix + labelName + "?";
   }else{
      blogUrl = blogUrl + 'search?';
   }
   feedUrl = feedUrl + '?orderby=published';
   blogUrl += 'orderby=published&max-results=' + maxResults ;

   feedUrl += '&max-results=';
   // JSONPでフィードを呼び出すスクリプトを生成
   var srcStr = feedUrl  + maxResults + '&alt=json-in-script&callback=viewPageNavigation';
   var scriptStr = "<script src="&quot; + srcStr + &quot;" type="text/javascript">
</script>";

   document.write( scriptStr );// スクリプトを書き出してコールバック関数に引き渡す
   // blogPager.innerHTML = srcStr ;テストコード
}

これで、ページが表示された直後にフィードサマリーを１件取得するクエリーを投げて、非同期でコールバック関数が回答を受け取るまで待ちとなる訳です。
※　非同期なので、回答が来るまでブラウザが固まるといったことはありません。

ところで、取得できる回答の形式とはどんなものかと言うと、Json形式オブジェクトとXMLオブジェクトの説明ページを参照して下さい。
個人的にはXMLの方が判読し易いですが、構造は同じだと思います。
YouTube要素の説明も、参考になると思います。



これらを参考にコールバック関数を作成してみましょう。
※　最大リンク表示数で範囲制限とカレントページをセンタリングする機能を付加しました。(2010/03/28)

//-------------------------------------------------
// フィードクエリの回答を受け取るコールバック関数
// 全体数とカレント位置の把握で分かる範囲の
// Object[数前方・各ページ・後方のリンク]を
// 空リンクとして作成し、具体的なリンク先を調べる
// ためのフィードクエリをコールバックScript３種に
// 分けて書き出しJSONP呼び出しします。
//-------------------------------------------------
function viewPageNavigation( result ){
   // JSON結果セットからフィード情報を取得
   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++){
      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");
   }
   
}
上記関数内では、さらに外部関数が呼び出されていますが、それは続きに記載しますので大まかな流れを掴んで下さい。

予めコールバック関数内で対象を判別できるようユニークなIDを割り当てた空リンク（aタグ）を生成し、結果を受け取ったあとで、フィードの結果情報から対象ページへの適正なURLを生成して空リンクを動作するように、href属性へ設定する仕組みとしています。

コメント(0)

コメントを投稿

関連記事
Blogger
Javascript
ページング