最近になってブログのナビゲーション位置に、投稿された記事のサムネイルとタイトルを表示するようなデザインが増えてきました。
この表示方法の利点として、画像で読者の視線を集めることができるので訪問別PVや直帰率の改善になると考えられます。
しかし、残念ながらそのような機能を持つウィジェットは標準で装備されていないので、どうしても外部のサービスに便り勝ちになってしまいます。
ブログパーツ「複眼RSS」
複眼RSSを利用してみた感想としては、動作が少し遅いことと、レイアウトの自由度が低い、という2点の問題があったため採用を取りやめました。
こだわるならやっぱり自作！
幸いにも、Bloggerには記事を取得するためのAPIが公開されているため、プログラムは非常に組みやすいです。
しかも過去に、「かゆい所に手が届くかも！？Blogger用非同期通信ライブラリ｢bsoup.js｣ 追記」のようなライブラリも作ったことがあったので、簡単に作ることができました。
今までに作ってきたライブラリは、jQueryで非同期にJSONデータを取得していましたが、今回はJSONPを利用して作ってみました。
サンプル
動作サンプルです。
Blogger Post Thumbnailer - jsFiddle
仕様
このスクリプトの想定動作環境です。
- Bloger専用です。
- jQueryを使用しています。（version1.6.4以降）
- 画像が使用されていない記事は表示されません。
- フィードから情報を取得しているので非公開ブログでは利用できません。
導入（Javascript）
まず最初にテンプレートを開き、サムネイル表示させたい部分に下記のコードを貼り付けます。
<div id="headline" class="clearfix"/>
<script>//<![CDATA[
(function(window,name,element,offset,max,size){
window[name] = function(d){
var es = d.feed.entry;
var item = 0;
var root = $(element);
for(var i = offset, k = es.length; i < k && item < max; i++){
var e = es[i];
var c = e.content.$t;
var img = $(c).find("img").first();
var src = img.attr("src");
if(src && src.indexOf("https://blogger.googleusercontent.com/tracker/") != -1) continue;
if(src.search(/^(http|https)+\:\/\/lh\d+\.googleusercontent.com\//i) != -1 || src.search(/^(http|https)+\:\/\/\d+\.bp\.blogspot\.com\//i) != -1 || src.search(/^(http|https)+\:\/\/lh\d+\.ggpht.com\//i) != -1){
var a = src.split('/');
if(a.length == 9) a[7] = size;
else if(a.length == 8) a[7] = size + '/' + a[7];
src = a.join('/');
}
var link;
for(var j = 0, l = e.link.length; j < l; j++){
if(e.link[j].rel.indexOf("alternate") != -1){
link = e.link[j].href;
break;
}
}
root.append(
$("<div/>").addClass("outer").append(
$("<div/>").addClass("inner").append(
$("<a/>").attr("href",link).append(
$("<img/>").attr("src",src)
)
),
$("<p/>").addClass("title").append(
$("<a/>").attr("href",link).append(e.title.$t)
)
)
);
item++;
}
};
})(window,"headline","#headline",0,20,400);
//]]></script>
<script src='http://rrvf.blogspot.com/feeds/posts/full?redirect=false&max-results=50&alt=json-in-script&callback=headline'></script>貼り付けが終わったら上記の赤文字の部分を変更していきます。
})(window,"headline","#headline",0,20,400);赤文字の"0"の部分が、投稿された記事の何件目から取得を行うかの設定値です。
青文字の"20"の部分が、何件取得して表示するかの設定値になります。
[2012/08/24 追記] 最後の"400"の部分は、画像サービスがGoogle Picasaの場合のみ有効になるオプションで、画像の横幅を指定する部分です。Picasa以外のサービスを利用している方は、適当な値を指定してかまいません。
なので上記の記述の場合、投稿日の新しい順の0件目から、20件目までを表示するという場合の設定となります。
<script src='http://rrvf.blogspot.com/feeds/posts/full?redirect=false&max-results=50&alt=json-in-script&callback=headline'></script>今度は、上記の赤文字の"rrvf.blogspot.com"の部分を、自分が利用しているBloggerのドメイン（*.blogspot.com）に書き換えます。
青文字の"50"の部分は、データとして取得する記事の最大数を表しています。仕様の項にも書いた通り、画像を含まない記事は読み飛ばすので、ある程度余裕を持った値を表示しておけば問題ないでしょう。
逆に、記事に必ず画像を入れるような投稿スタイルの場合は、表示件数と取得件数を同じにしても問題はありません。
導入（CSS）
上記のスクリプトだけでは見た目に問題があるため、下記のようなCSSをテンプレートに追加する必要があります。
<style>
.clearfix:after{content:'.';display:block;clear:both;height:0;visibility:hidden;}
.clearfix{min-height: 1px;}
* html .clearfix{height: 1px;/*\*//*/height: auto;overflow: hidden;/**/}
#headline .outer{
float:left;
margin:0 0 6px 6px;
text-align:center;
overflow:hidden;
border:1px solid #aaa;
width:230px;
height:120px;
position:relative;
box-shadow:0 0 3px rgba(0,0,0,0.2);
background-color:#fff;
}
#headline .outer p.title{
width:230px;
position:absolute;
left:0;
bottom:0;
background-color:#333;
background-color:rgba(0,0,0,0.75);
}
#headline .outer .title a{
display:block;
padding:1px 5px;
font-size:70%;
color:white;
text-decoration:none;
}
#headline .inner{text-align:center;}
#headline .inner img{height:180px;}
</style>この部分は、見た目に関する部分なので、お好みで設定を変更してください。
赤文字の部分が、表示する画像サイズの設定箇所になります。
最後に
今回作成したスクリプトは、このブログでも使用しています。
バグや、その他要望などありましたら、コメントやTwitterなどで伝えていただけると幸いです。
最後まで読んでいただきありがとうございました。