はてなブログの記事下にサムネイル付きの関連記事を出して回遊性をUP！！！(2015 6/10 6/16 6/26 7/6バグ修正版)

※2015 6/16 ブラウザによるcss('background-image')の戻り値の違いを吸収するように修正しました。

※2015 6/26 jQueryを独自に読み込んだ方が早いので、独自に読み込むように修正しました。また、関連記事は後から処理を行っても良いので、3秒たってから読み込む処理を行うよう修正しました。

※2015 7/6 ブラウザによるtoArray()の戻り値の違いを吸収するように修正しました。。

CSSとjavascriptを分離

先日公開したサムネイル付きの関連コンテンツ表示スクリプトですが、やはりコードが長すぎるので、CSSと分離しました。

前回の記事はこちら 

jitenshaya-se.hatenablog.com

一部バグ対応

併せて細かい修正ですが、サムネイルや概要文を記事に設定していない場合、エラーとなってしまう不具合を見つけたので一緒に修正しました。

最初のjqueryの読み込みは不要だった

はてブが下の記事の対応をされていて、jqueryをいきなり使おうとすると読み込みの順番の関係で動かないのですが、こちらの元のコードが良くできていて、jqueryが読み込まれるまで処理を待って処理を始めるコードになっていたのではずしました。

と書きましたが、 独自にjQueryを読み込んだ方が明らかに早いので、独自に読み込むように修正しました。

staff.hatenablog.com

で、完成したのがこれです。

少し要らない行を削って、コメントを入れたりしてみました。

javascirpt

/*jQueryの読み込み*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
 /* 関連コンテンツ */
 setTimeout(function(){
 var defaultConfig = {
 parentSelector: 'article',
 maxEntries: 3, // or -1 for unlimited
 template: [
 '<div class="same-category-entries">',
 '<% _.each(categories, function (category) { %>',
 '<% if (category.entries.length > 0) { %>',
 '<div class="same-category-entries-category">',
 '<h2 class="same-category-entries-category-title"><a class="same-category-entries-category-name" href="/category/<%- category.name %>"><%- category.name %></a>カテゴリの他の記事</h2>',
 '<ul class="same-category-entries-list">',
 '<% _.each(category.entries, function (entry) { %>',
 '<li class="same-category-entries-entry">',
 '<% if (entry.thumnailurl.length > 0) { %>',
 '<a href="<%- entry.url %>"><span class="same-category-entries-entry-thum" ><img src ="<%- entry.thumnailurl %>"></span><span class="same-category-entries-entry-title" ><%- entry.title %>></span><div class="same-category-entries-entry-date"><%- entry.published.getFullYear() %>/<%- entry.published.getMonth() + 1 %>/<%- entry.published.getDate() %></div></a>',
 '<% }else{ %>',
 '<a href="<%- entry.url %>"><span class="same-category-entries-entry-thum" ></span><span class="same-category-entries-entry-title" ><%- entry.title %>></span><div class="same-category-entries-entry-date"><%- entry.published.getFullYear() %>/<%- entry.published.getMonth() + 1 %>/<%- entry.published.getDate() %></div></a>',
 '<% } %>',
 '</li>',
 '<% }) %>',
 '</ul>',
 '</div>',
 '<% } %>',
 '<% }) %>',
 '</div>'
 ].join('')
 };
 var config = $.extend(defaultConfig, window.__hatenablog_show_same_category_entries);

 var origin = location.protocol + '//' + location.host;
 //2015 7/6 ブラウザによるtoArray()の戻り値の違いを吸収するように修正しました。
 var categoryobjs = $('.categories').find('a');
 var categoryobjscount = categoryobjs.length;
 var categorytags = [];
 for(var i=0 ; i < categoryobjscount; i++){
 categorytags.push(categoryobjs.eq(i).text());
 }

 var startFetchCategoryEntries = function (d, categories) {
 d = d || $.Deferred();
 categories = categories || [];
 var categoryTag = categorytags.shift();
 if (!categoryTag) {
 d.resolve(categories);
 return d;
 }
 var category = {
 name: categoryTag,
 entries: []
 };
(function (feed) {
 $.ajax(origin + '/archive/category/' + encodeURIComponent(category.name)).done(function (feed) {
 $(feed).find('section').each(function () {
 var $feedEntry = $(this);

 var entry = $feedEntry.find('h1').find('a');
 var thum = $feedEntry.find('.entry-thumb').css('background-image');
 var thum2 = "";
//※2015 6/16 ブラウザによるcss('background-image')の戻り値の違いを吸収するように修正しました。
// if(thum){
// var thum1 = thum.substr(0,thum.length-1);
// var thum2 = thum1.substr(4);
// }
 if(thum){
 if( thum.match( /^url\(["']?(.*?)["']?\)/i )[1] != null ) {
 thum2 = thum.match( /^url\(["']?(.*?)["']?\)/i )[1];
 }
 }
 var desc = $feedEntry.find('.entry-description');
 var summary = "";
 if(desc.text().length >0){
 var summary = desc.text().substr(0,100)+"...";
 }
 var entry = {
 title: entry.text(),
 url: entry.attr('href'),
 thumnailurl: thum2,
 summary: summary,
 published: new Date($feedEntry.find('time').attr('datetime'))
 };

 if (entry.url === origin + location.pathname) return;
 entry.url = entry.url + "?recommend=" + location.pathname;

 category.entries.push(entry);

 if (category.entries.length >= config.maxEntries && config.maxEntries !== -1) {
 return false;
 }
 });

 categories.push(category);

 startFetchCategoryEntries(d, categories);
 }).fail(function (xhr) {
 (console.error || console.log).call(console, xhr);
 });

 return d;
 };

 startFetchCategoryEntries().done(function (categories) {
 var html = _.template(config.template, { categories: categories });
 var $html = $($.parseHTML(html));
 $entry.before($html);
 });
});
 },3000);
});
</script>

※2015 6/16 ブラウザによるcss('background-image')の戻り値の違いを吸収するように修正しました。

※2015 6/26 jQueryを独自に読み込んだ方が早いので、独自に読み込むように修正しました。また、関連記事は後から処理を行っても良いので、3秒たってから読み込む処理を行うよう修正しました。

※2015 7/6 ブラウザによるtoArray()の戻り値の違いを吸収するように修正しました。。

CSS

.same-category-entries {
 font-size: 90%;
}
.same-category-entry-summary {
 color: #666;
}
a.same-category-entries-category-name, a.same-category-entries-category-name:visited {
 color: inherit;
}
.same-category-entries-category-name:before {
 content: "【";
}
.same-category-entries-category-name:after {
 content: "】";
}
.same-category-entry-meta {
 color: #CCC;
 margin-top: 0.5em;
}
.same-category-entries-category-title{
 border-bottom: 1px solid #000;
 margin-bottom:5px;
}
.same-category-entries-list{
 list-style: outside none none;
 padding-left: 0;
 margin-bottom:0;
}
.same-category-entries-entry {
 border-bottom: 0.1em solid #000;
 padding-left: 0;
 margin: 1em 0em;
}
.same-category-entries-entry-thum{
 float:left;
 margin-right: 10px;
}
.same-category-entries-entry a{
 color: #333333;
 position: relative;
 display: inline-block;
}
.same-category-entries-entry-title{
 margin: 0;
 text-decoration: underline;
}
.same-category-entries-entry-date{
 color: #696969;
}