太陽がまぶしかったから

C'etait a cause du soleil.

サイドバー表示が終わるまで下にスクロールしたら「おすすめ記事」を追尾させる

「おすすめ記事」を追尾させたい

 長文記事を書くとスクロールしていくうちに、サイドバーががら空きになってしまうので、このスペースを有効利用できないかと考えました。表示機能自体は『はてなブログの「最新記事」サイドバーを魔改造する - 太陽がまぶしかったから』の発展になります。

 おすすめエントリ要素より下にスクロールしている場合はスクロールに追尾して、上側にいる場合はスクロールに追尾しません。表示するエントリははてなブックマークの人気エントリからランダムに4つ選択しています。サイドバーが下側に無限に伸びるイメージ。PC版だけで動作します。

スクリプト設置

 サイドバーの最後に「HTML」モジュールを作成し、以下のスクリプトの変数部分を編集した上でコピペします。スタイルについては『はてなブログの「最新記事」サイドバーを魔改造する - 太陽がまぶしかったから』と同じ構造なのでそちらをご参考にカスタマイズして頂ければ。

<div id="recommend_feed" align="center">Now Loading...</div>
<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1"); 
function initialize() {
  var blogURL = "";
  var blogTITLE = ""; 

  /* shuffle機能を追加 */
  Array.prototype.shuffle = function() {
    var i = this.length;
    while(i){
      var j = Math.floor(Math.random()*i);
          var t = this[--i];
          this[i] = this[j];
          this[j] = t;
      }
      return this;
  }

  var fixpos = -1;
  var node = $(recommend_feed.parentNode.parentNode);
  node.css("top","0px");

  $(window).scroll(function(){
    var top = $(window).scrollTop() ;
    if(fixpos < 0 && top > node.offset().top) {
         node.css("position","fixed");
         fixpos = top;
    }
    
    if(top < fixpos) {
        node.css("position","relative");
        fixpos = -1;
    }
  });

  var feed = new google.feeds.Feed("http://b.hatena.ne.jp/entrylist?mode=rss&sort=count&url=" +blogURL);
  //取得するフィード数
  feed.setNumEntries(20);
  //実際に読む込む
  feed.load(function(result) {
 //読み込めたか判別
  if (!result.error) {
    //変数の初期化
    var useFeed = "";
    //Feedの処理
    result.feed.entries.shuffle();

    for (var i = 0; i < result.feed.entries.length && i < 4; i++) {
     //Feedを一つ抽出
      var entry = result.feed.entries[i];
      //画像がない場合を考慮
      var no_image = 'http://cdn-ak.f.st-hatena.com/images/fotolife/b/bulldra/20131102/20131102193518.png';
      //最初の画像を抽出
      var first_image = entry.content.match(/(http:){1}[\S_-]+\.(?:jpg|gif|png)/);
      //画像サイズを調整
      first_image[0] = (first_image[0] != 'http://b.hatena.ne.jp/images/append.gif')
                   ? first_image[0].replace(/(\.[^.]+$)/ , "_l$1")
                   : no_image;
      //リストに突っ込む
      useFeed += '<div class="htbl_new_entry">'
              +  '<a href="' + entry.link + '">'
              +  '<img class="htbl_new_entry_img" src="' + first_image[0] + '">'
              +  '<div class="htbl_new_entry_text">'
              +  '<span class="entry_title">' + entry.title.replace('- '+blogTITLE , '') + '</span>'
              +  '<span class="entry_hatebu">'
              +  '<img src="http://b.hatena.ne.jp/entry/image/' + entry.link + '">'
              +  '</span>'
              +  '</div>'
              +  '</a>'
              +  '</div>';
    }
    //リストを表示させる
    recommend_feed.innerHTML = '<div class="new_entries">' + useFeed + '</div>';
     }
  });
}
google.setOnLoadCallback(initialize);
</script>

サポートについて

 自己責任でご利用下さい。変更もご自由に。設置サポートや表示スタイル/アルゴリズムのカスタマイズ等のご依頼がありましたら『Amazon.co.jp』のご利用をお願いいたします。

集合知プログラミング

集合知プログラミング