トップページのWhat’s New表示には、Tumblrが最適！

わたくしウェブ制作の仕事をしておりまして、最近流行りのCMS(WordPress)とやらを使う案件が多いのですが、お仕事の中には、「別にCMS構築するほどじゃなくていいんだけど、トップページのWhat’s Newみたいなところくらいは更新したいな！」というご要望をいただくことも少なからずあります。

そんな時にオススメなのがTumblr！
TumblrでWhat’s New部分にあたる部分をブログスタイルで更新して、ウェブサイトのトップページにTumblr APIを使用して表示させる、というテクニックをご紹介いたします。

実装例は、弊社実績の以下のサイト。
JELLY JELLY CAFE / ノマドワーカーのためのカジュアルスペース

↑トップページの「BLOG」と書かれた部分です。

ソースは以下のとおり。

<ul id="blog"> 
<script type="text/javascript" src="http://jelly2cafe.tumblr.com/api/read/json?type=text">
</script> 
<script type="text/javascript" > 
show_number = 5; 
for (i = 0; i < show_number; i++) {
label = tumblr_api_read["posts"][i]["regular-title"];
url = tumblr_api_read["posts"][i]["url"];
date = tumblr_api_read["posts"][i]["date-gmt"];
var d = new Date(), dstr;
dstr = d.getFullYear()+'/'+(d.getMonth()+1)+'/'+d.getDate();
document.write('<li><a href="', url , '"><span>'+dstr+'</span><br />' , label , '</a></li>');
}
</script> 
<!--blog--></ul>

順に説明していきます。

<script type="text/javascript" src="http://jelly2cafe.tumblr.com/api/read/json?type=text">
</script>

↑まず、JSONデータをJavascriptで読み込みます。http://jelly2cafe.tumblr.comの部分にTumblrのURLを入力しておきます。type=textと記述することで、ポストのタイプが「text」のデータのみを読み込んでいます。

show_number = 5;

↑ここでMAXの記事数を取得、この場合5つまで表示するという設定になります。

label = tumblr_api_read["posts"][i]["regular-title"];

↑記事のタイトルをlabelという変数に代入しています。

url = tumblr_api_read["posts"][i]["url"];

↑記事タイトルに対するURLを、変数urlに代入しています。

date = tumblr_api_read["posts"][i]["date-gmt"];
var d = new Date(), dstr;
dstr = d.getFullYear()+’/’+(d.getMonth()+1)+’/’+d.getDate();

↑投稿日時のデータ抜き出しは少々複雑です。
そのままdateを抜き出すと「2011-04-12 00:47:25 GMT」という形式になってしまうので、変換しましょう。
上記の記述で投稿年/投稿月/投稿日というフォーマットに変換することが可能です。

document.write(‘<li><a href="’, url , ‘"><span>’+dstr+'</span><br />’ , label , ‘</a></li>’);

↑最後に、抜き出したデータをhtmlに書き出します。

すると、
<li><a href="記事URL"><span>投稿日時</span><br />記事タイトル</a></li>

↑こんなhtmlソースが、先ほど設定したshow_number = 5回繰り返して表示されます。

上記の記述ですと、aタグで囲んでいるため、クリックでTumblrの記事ページにジャンプいたしますが、状況に応じてaタグを記述しない、投稿日時を記述しない等のアレンジ可能です。

あとは吐き出されたhtmlソースにCSS等で見栄え調整すれば完成！
いかがでしたでしょうか？　簡単ですよね！
お手軽CMS構築としてのTumblr API、かなり使い勝手良いです。
ぜひ、使ってみてくださいね！

おまけ

こちらもTumblr APIを使用したWhat’s New表示の実装例です↓
board game cafe / ボードゲームカフェ
画面右上に最新の1件がニョキっと表示されます。