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

指揮者だって人間だ

晴れた日には洗濯を。

「あわせてよみたい」ウィジェットに記事内の画像を表示するようにしてみた

iPhone ネット PC テクノロジー

ブログの下部に過去記事を載せたいんだけどいいの無いかなあ…と探していたところ、 id:bulldra さんがこんなすごいものを作っているのを見つけました。

【スマホ対応】【はてなブログ用】ぼくのかんがえたさいきょうの「あわせて読みたい」ウィジットを作ってみた - 情報学の情緒的な私試論β


めちゃくちゃ強力な「あわせてよみたい」ウィジェットです。
導入されているブログも多いようで、本ブログでも早速導入。
ほぼやりたいことができていたのですが、画像を記事全体のキャプチャ画像ではなく、記事内の画像にしたいなあと思いちょっと改良したのでコードとかを公開して見ます。

(2014/01/22 23:55 追記:スマホでずれていたのでcss部分を修正しました)

ちなみに私のブログではこんな感じで表示されます。

f:id:nyokkicond:20140121090305j:plain

オリジナル版と違うところは主に以下の3つです。

  • 記事内の最初の画像をアイコンとして表示(画像がない場合は記事全体のキャプチャ)
  • Tweet数を表示
  • cssでデザインを微調整

下二つに関してはこちらを参考にさせていただきました。

ブログに「あわせて読みたい」を実装した - exfreeterのブログ


まずjavascriptの方から。
これをはてなブログ管理画面のデザイン→カスタマイズ→記事→記事下のhtmlコードを書くところにコピーします。
サイトのURLは自サイトのものに変更ください。
スマートフォンにも対応する」チェックボックスをオンにするのも忘れずに。

<style>
.entry-list #new-entries-title {
background: #000;
color: #fff;
padding: 10px 10px 10px 10px;
margin: 15px 0 10px 0;
position: relative;
font-size: 14px;
font-weight: bold;
}

.entry-list .intro-article-wrapper a {
text-decoration: none;
color: #0085cd;
margin: 0 5px 12px 0;
position: relative;
font-weight: bold;
font-size: 14px;
}
</style>

<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://shikisha.hatenablog.com";
var blogTITLE = "指揮者だって人間だ"; 
var maxNUM = 6;

/* コピーライトっぽいの */
var copyRIGHT = '<p style="text-align:right; font-size:60%;">(Powerd by '
              + '<a href="http://bulldra.hatenablog.com/entry/2013/11/09/081719"  rel="nofollow" style="font-size:110%">id:bulldra</a>)</p>';


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 , '')
    
    /* 記事の画像を取得 */
    var img = entry.content.match(/(\"http:)[\S]+((\.jpg)|(\.JPG)|(\.jpeg)|(\.JPEG)|(\.png)|(\.PNG))\"/);
	
    /* HTML生成 */
    var html = '<div class="intro-article-wrapper" style="width: 95%; overflow:hidden; margin-left:10px;" margin-bottom:10px;>'
	             + '<a class="intro-article-img" href="' + entry.link + '" style="float:left;" rel="nofollow">';
    
    /* 最初の画像を貼り付け */
    if(img)
    {
      html += '<img src=' + img[0] 
      	            + ' align="left" width="120" height="90" alt=">'
                    + entryTitle  + '">';
    }
    /* 画像がない場合はページをキャプチャ */
    else
    {
      html += '<img src="http://capture.heartrails.com/150x130/shadow?' + entry.link 
    	           + '" align="left" width="120" height="90" alt="' 
		   + entryTitle  + '">';
    }
         
    html += '<div class="title"><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;"> '
                 + '<a href="http://tweetbuzz.jp/redirect?url=' + entry.link + '"><img src="http://tools.tweetbuzz.jp/imgcount?url=' + entry.link + '"/></a></div></div>';
    resultHtml += html;
  }	
  
  /* コンテナに反映 */
  var container = document.getElementById("new_entriee");
  container.innerHTML = '<br><h3>あわせて読みたい</h3>' + resultHtml + copyRIGHT;
}

google.setOnLoadCallback(initialize);

</script>


次にデザイン→カスタマイズ→cssのコード欄にこれを貼り付けます。

/* <system section="theme" selected="alpha2"> */
@import "/css/theme/alpha2/alpha2.css";
/* </system> */

/* <system section="background" selected="default"> */
/* default */
/* </system> */

/* あわせて読みたい */
#new-entries-title {
color: #000;
font-size: 160%;
font-weight: bold;
margin: 20px 0 10px 0;
padding:0 0 0 15px;
height: 39px;
border-left: solid 14px #000;
border-bottom: solid 1px #000;
}

.intro-article-wrapper a {
text-decoration: none;
color: #0085cd;
font-weight: bold;
font-size: 120%;
margin: 0 0 15px 0;
}

div.title {
top: 5px;
left: 10px;
position: relative;
}


記事の「記事をプレビュー」をオンにすると反映されているかどうかが確認できます。

私のブログはこんな感じになりました。

f:id:nyokkicond:20140121083844j:plain

スマホでもちゃんと表示できてます。

f:id:nyokkicond:20140121090131j:plain

利用、改変、ご自由に。

広告を非表示にする