太陽がまぶしかったから

C'etait a cause du soleil.

僕の考えた最強の「あわせて読みたい」はてなブログパーツ


本スクリプトは利用不可となります

 最新版はこちら

ぼくのかんがえたさいきょうの「あわせて読みたい」

 「はてなブックマークウィジット」をエントリ下に表示させることにより、スマホ利用時において別エントリへの導線を作う方法を考えたのですが、スマホ表示の場合は外部CSSが基本的には適用できないため、既存ウィジットの残念な外見を表示する必要があり、またタイトルの文字数が少ないという問題について苦々しく思っていたりとかがあったので自分で作ってみみました。

特徴

  • 自身のブログのRSSからランダムで取得したエントリを指定個数分エントリ下に表示します*1
  • RSSの取得元は最新エントリと人気エントリの両方であるため人気のも新しいのもでてきます
  • 昔のエントリ→最新エントリの導線のため、最新エントリを一番最初に表示します
  • 現在表示している記事は基本的に表示されません
  • 表示する際にはサムネイルとはてなブックマーク数も表示されます。
  • スマートフォン表示に対応しており、横スクロールにもなりません→LinkWithinのひと!
  • はてなブックマークウィジットを複数表示したり、Zenbackよりは高速な気がする

スクリプト配置

 スマートフォン表示をする場合には当該チェックボックスをONにしておきます。

f:id:bulldra:20131108060151p:plain

 以下のスクリプトをデザイン画面におけるエントリ下の部分に配置します。CSSクラスとブログのURL等については各自変更をお願いします。

変更履歴(2013/11/09 )

  • (一部環境で)スクロールバーが出るというご指摘があっためdivのovarflowを「auto」に変更
  • コピーライトのリンク先を本ページのURLに変更
<span id="new_entriee" class="hatena-module-foot">Now Loading...</span>

<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

/* この辺を自分のブログに合わせて変更 */
var blogURL = "";
var blogTITLE = ""; 
var maxNUM = 4;

/* コピーライトっぽいの(現在は削除) */
var copyRIGHT = '';


google.load("feeds", "1");
var entries = new Array();

/* 配列にシャッフル機能を追加 */
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;
}
  
function initialize() {  
  /* feed群の生成 */
  var feeds = new Array();
  /* 最新エントリ */
  feeds.push(new google.feeds.Feed( blogURL+ "/rss"));
  /* ブクマ順エントリ */
  feeds.push(new google.feeds.Feed( "http://b.hatena.ne.jp/entrylist?sort=count&mode=rss&url=" +blogURL));
  
  /* feed読み取り処理 */
  var c = 0;
  for(var i = 0; i < feeds.length; i++) {
    feeds[i].setNumEntries(10);
    feeds[i].load(function(result) {
        /* 読み込めないなら終了 */
        if (result.error) {
          ;
        } else if(result.feed.entries.length == 0) {
          ;
        } else {
		  /* 条件に合致した場合のみ結果配列に追加 */
          entries = entries.concat(result.feed.entries);
	    }
		
		/* 全部のfeedが読み終わったら処理を実施 */
		if(++c == feeds.length){
		  createHtml();
		}
	  });
  }  
}  
  
function createHtml() {
  /* 1件もないなら終了 */
  if (entries.length == 0) {
    return;
  }
  
  
  var resultEntries = new Array();
  /* 最新エントリを必ず表示(既にブラウザで表示している場合は次のエントリ) */
  for(var x = 0; x < entries.length; x++) {
    if(entries[x].title.lastIndexOf('- ' + blogTITLE) === -1 && document.location.href.lastIndexOf(entries[x].link, 0) != 0) {
      resultEntries.push(entries[x]);
	  break;
	} 
  }
  
  /* シャッフル */
  entries = entries.shuffle();  
  for(var x = 0; x < entries.length && resultEntries.length < maxNUM; x++) {
      /* ブラウザで対象エントリを表示している場合はスキップ */
	  if(document.location.href.lastIndexOf(entries[x].link, 0) === 0) {
	    continue;
      }
	  
	  /* 既に結果リストに含まれていたらスキップ */
	  var flg = false;
      for(var y = 0; y < resultEntries.length; y++) {
	    if(resultEntries[y].link.lastIndexOf(entries[x].link, 0) === 0) {
		  flg = true;
		}
      }
	  if(!flg) {
	  	  resultEntries.push(entries[x]);
	  }	  
  }
  
  /* 指定数のHTMLを生成 */ 
  var resultHtml = "";
  for(var x = 0; x < resultEntries.length; x++) {	
    var entry = resultEntries[x];
	var entryTitle = entry.title.replace('- '+blogTITLE , '') 
    
	
	
	/* HTML生成 */
  	var html = '<div class="intro-article-wrapper" style="width: 100%; overflow:auto; margin-bottom:10px;">'
	     + '<a class="intro-article-img" href="' + entry.link + '" style="float:left;" rel="nofollow">'
         + '<img src="http://capture.heartrails.com/150x130/shadow?' + entry.link 
		 + '" align="left" width="150" height="130" alt="' 
		 + entryTitle  + '">'
         + '<a class="intro-article-title" href="' + entry.link + '" rel="nofollow">'
         +  entryTitle 
		 + '</a> <img src="http://b.hatena.ne.jp/entry/image/' + entry.link + '"style="opacity:0.8;"></div>'
	resultHtml += html;
  }	
  
  /* コンテナに反映 */
  var container = document.getElementById("new_entriee");
  container.innerHTML = '<h3>あわせて読みたい</h3>' + resultHtml + copyRIGHT;
}

google.setOnLoadCallback(initialize);

</script>

今後の展望とかサポートとか

 RSSのマージをpipesにやらせればとか色々あるんですが、メンテナンスが面倒なのでサーバーサイドに手を加えない方針でいきたいです。タイル型のデザインにしたりとか色々あるのでしょうが、スマホとの両立を考えるとこんな感じかなと。

 現在は『はてなブログの記事下に関連記事を表示する「あわせて読みたいG」 - 太陽がまぶしかったから』を配布していますので、自己責任でご利用下さい。設置サポートや表示スタイル/アルゴリズムのカスタマイズ等のご依頼がありましたらサポートライセンスの購入をお願いいたします。

関連記事

*1:実際のアルゴリズムはランダムですが関連記事っぽく振る舞います