2013年8月6日火曜日

[Blogger]指定したラベルが付いたページを一覧表示する②リスト表示

「日記」とラベル付けしたページの一覧を表示させます。

フィード URL の確認

「日記」というラベルの付いたページのURL はこちら。
http://marumarutonton.blogspot.jp/search/label/日記
http://marumarutonton.blogspot.jp/search/label/%E6%97%A5%E8%A8%98
※UTF-8 でコード表記しています。(日→e697a5、記→e8a898)

Blogger 記事のフィード URL はこちら。
http://marumarutonton.blogspot.jp/feeds/posts/default

Blogger 「日記」というラベルの付いた記事のフィード URL はこちら。
http://marumarutonton.blogspot.jp/feeds/posts/default/-/%E6%97%A5%E8%A8%98

最新の100件分のデータを取得するやり方はこちら。
http://marumarutonton.blogspot.jp/feeds/posts/default?max-results=100

25件ごとに区切って取得する場合はこうなります。
http://marumarutonton.blogspot.jp/feeds/posts/default?max-results=25
http://marumarutonton.blogspot.jp/feeds/posts/default?max-results=25&start-index=26
http://marumarutonton.blogspot.jp/feeds/posts/default?max-results=25&start-index=51
・・・

これを使って Java Script を作成します。

Java Script コード

赤い所を書きかえればページ数を変えられます。(1-25 が1ページ目、26-50 が2ページ目・・・、このページは3ページ目になります。)
緑色は特にここで気にするものではないです。このページのレイアウトのコードです。
一番下の赤いところが実際に書き出している処理になります。

<script src="http://www.google.com/jsapi/" type="text/javascript"></script>
<script type="text/javascript">
google.load("feeds","1");
google.setOnLoadCallback(function(){
 getFeed();
}); //google.setOnLoadCallback
function getFeed(){
   var feed = new google.feeds.Feed("http://marumarutonton.blogspot.jp/feeds/posts/default/-/%E6%97%A5%E8%A8%98?max-results=25&start-index=76");
   feed.setNumEntries(25);
   feed.load(callback);
 }
  function callback(result){
   if (result.error){
     alert(reault.error.message);
   }
   var res = "";
   var len = result.feed.entries.length;
   for (var i = 0;i < len;i++){
     var entry = result.feed.entries[i];
     var title = entry.title;
     var link = entry.link;
     var publisheddate = entry.publishedDate;

     var date = new Date (publisheddate);
     var year = date.getFullYear();
     var month = date.getMonth() + 1;
     var day = date.getDate();
     var hour = date.getHours();
     var min = ('0' + date.getMinutes() ).slice( -2 );
     var datestring = year + "/" + month + "/" + day + " " + hour + ":" + min;
     var content = entry.contentSnippet;
     res += "<li><a href=\"" + link + "\"><b>" + title + "</b></a> - " + datestring +"</li>";
   }
   var panel = document.getElementById("feed");
   panel.innerHTML = res;
 }
</script>
過去の日記の一覧です。<br />
<hr />
<div style="text-align: left;">
<div style="float: right; text-align: right;">
<a href="http://marumarutonton.blogspot.jp/2013/08/blog-post_3885.html">▶ Next</a></div>
Back ◀</div>
<ul>
<div id="feed">
</div>
</ul>

まるとん

Blogger Tips のページに戻る

0 件のコメント:

コメントを投稿