読者です 読者をやめる 読者になる 読者になる

Web言語のお勉強~ど素人が往く~

かつてVB6を1年くらい触った事があるだけのど素人がWeb言語に挑戦します。勉強結果を随時発表します。

本家版「あわせて読みたいウィジット」の実験


昨日までにアップしていた「あわせて読みたい」ウィジットは派生版でしたが、本日載せて見るのは

本家版 あわせて読みたいウィジット

です。

さてさてどうなりますか?

派生版よりも本家版の方が軽いんだとは思うのですが。



Now Loading...


コードも掲載。
開発元は「http://bulldra.hatenablog.com/entry/2013/11/09/081719」。

<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 = "http://weblanguagestudy.hatenablog.com/";
var blogTITLE = "Web言語のお勉強~ど素人が往く~"; 
var maxNUM = 5;

/* コピーライトっぽいの */
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>

追記

作者様からのご依頼により、コピーライト部分のコードは削除しました。