tumblrAPIを使って画像、動画、リンク、投稿を一覧表示する方法 – How to use tumblr api with jQuery.

この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんにちは。Toshikuraです。今回のTipsは【tumblrAPIを使って画像、動画、リンク、投稿を一覧表示する方法】です。知らぬ間にtumblrAPIが使い易くなっていたのでメモです。ここでは自分がリブログ、もしくは投稿した画像や動画等を一覧で表示させる方法をメモしておきます。

はじめに

今回の実装を行う上で以下の2つの情報が必要になります。
・tumblrアカウント
・apiキー

apiキーの取得
1.アプリの登録

まずはアプリの登録を行います(リンク)。今回は一覧の取得表示だけですのでこれだけでキーが取得できます。

2.入力

アプリ登録にはとりあえずApplication name(アプリ名)、Administrative contact email(メールアドレス)、Default callback URL(設置先のURL)を記入すればOKです。

3.キー取得

以上でキーが取得できました。次はこのキーと自分のタンブラーを使って使って画像や動画を取得します。

画像、動画、リンク、投稿の一覧表示

キーを使い、投稿をJSON形式で取得する事ができます。以下ではjQueryのgetJSONを使って表示してみます。JSONに関しては公式DOCに詳しい説明がありますのでそちらをご参照ください。

JSONの取得

JSONの取得はhttp://api.tumblr.com/v2/blog/[ここにタンブラーのホスト]/posts?api_key=[取得したキー]&jsonp=?で行う事ができます。取得できる件数は1-20件ですが、この時点でタグで絞ったJSONの取得や投稿の種類で絞ったJSONの取得もできますので目的に併せてミニマムな情報を抜き出す事が可能です。
 

api.tumblr.com/v2/blog/[ここにタンブラーのホスト]/posts[/投稿タイプ]?api_key=[取得したキー]&[オプション]

一覧表示

大分前置きが長くなってしまいましたが、デモで使っているJSのサンプルを置いておきます。基本的にはObjectとArrayの入れ子構造ですので$.each(array/objectを活用して出力しています。例は画像、動画、リンク、投稿等、主要な投稿タイプを全てカバーしたかったので結構ごりごりですのでご参考程度にお考えください。
 

HTML
<div id="gifBd"></div>
JS
$(function(){
url ="keta111.tumblr.com";
key ="eubACGpthKejSVvxXn2TwAuGaM7NPf4XGe9KDtxQfTNIn9w4LB";
$.getJSON(
"http://api.tumblr.com/v2/blog/"+url+"/posts?api_key="+key+"&jsonp=?",
function(data){
$.each(data, function(index, val) {
$.each(val, function(k_post, v_post) {
if(k_post == 'posts'){
for(var kp in v_post){
var
data = v_post[kp].date,
link = v_post[kp].post_url,
type = v_post[kp].type;
if(type == 'text'){
// ブログ
var
title = v_post[kp].title,
content = v_post[kp].body;
$('#gifBd').append('<div class="post-'+type+'"><h1>'+title+'</h1>'+content+'</div>')
}else if(type == 'link'){
// リンク
var
link_ol = v_post[kp].url,
title = v_post[kp].title;
$('#gifBd').append('<div class="post-'+type+'"><a href="'+link_ol+'">'+title+'</a></div>')
}else if(type == 'photo'){
// 画像
$.each(v_post[kp].photos, function(k_photo, v_photo) {
$.each(v_photo, function(k,v) {
if(k == 'original_size'){
for(var n in v){
if(n == 'url'){
var image = v[n];
$('#gifBd').append('<div class="post-'+type+'"<ul><li>'+data+'</li><li><a href="'+link+'">link</a></li></ul><img src="'+image+'"></div>');
}
}
}
});
});
}else if(type == 'video'){
// 動画
var caption = v_post[kp].caption;
$.each(v_post[kp].player, function(k_play, v_play) {
// 動画のサイズ(0:幅250px 1:幅400px 2:幅500px )
if(k_play == 1){
$.each(v_play, function(k,v) {
if(k == 'embed_code'){
$('#gifBd').append('<div class="post-'+type+'">'+v+'<ul><li><a href="'+link+'">link</a></li><li>'+caption+'</li></ul></div>');
}
});
}
});
}
}
}
});
});
});});

これで下記の様な猫gifページができました。今回の例ではこちらの個人的なタンブラーから新着20件の情報を取得しています。
 

以上になります。

参照:Stainless Note|Tumblr APIを使うためにAPIkeyを取得する
  :Tumblr API