2009/6/24

MovableTypeにTumblr APIを使ってTumblrタブを用意した

Tumblr APIというのがありまして、結構簡単に使える模様。kosukekato.comにも直近10件くらいのhu・mi・dorのクリップが表示されたら便利じゃないかと思いやってみました。まず、APIをヘッダで読み込みます。

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

で、データを取得して整形してあげます。

nmax = 10;
n = tumblr_api_read["posts-total"];
if (n > nmax) n = nmax;
for (i = 0; i < n; i++) {

switch (tumblr_api_read["posts"][i]["type"]) {
case "regular":
kind = "text";
label = tumblr_api_read["posts"][i]["regular-title"];
break;

case "photo":
kind = "photo";
caption = tumblr_api_read["posts"][i]["photo-caption"];
photourl = tumblr_api_read["posts"][i]["photo-url-500"];
label = ‘<p><img src="’ + photourl + ‘" /></p>’ + caption;
break;

case "quote":
kind = "quote";
text = tumblr_api_read["posts"][i]["quote-text"];
source = tumblr_api_read["posts"][i]["quote-source"];
label = ‘<blockquote>’ + text + ‘</blockquote><p>’ + source + ‘</p>’;
break;

case "link":
kind = "link";
text = tumblr_api_read["posts"][i]["link-text"];
source = tumblr_api_read["posts"][i]["link-url"];
label = ‘<p><a href="’ + source + ‘">’ + text + ‘</a></p>’;
break;

case "chat":
kind = "chat";
label = "";
break;

case "audio":
kind = "audio";
caption = tumblr_api_read["posts"][i]["audio-caption"];
player = tumblr_api_read["posts"][i]["audio-player"];
label = player + ‘<p>’ + caption + ‘</p>’;
break;

case "video":
kind = "video";
caption = tumblr_api_read["posts"][i]["video-caption"];
player = tumblr_api_read["posts"][i]["video-player"];
label = player + ‘<p>’ + caption + ‘</p>’;
break;

}

url = tumblr_api_read["posts"][i]["url"];
document.write(
‘<div style="margin-bottom:60px;">’,
label,
‘</div>’
);

}

とりあえず、QuoteとLinkとPhotoは整形しておきました。他は実際どういう風に表示されるか怪しい。こちらの記事を参考にしました。

Tumblr – kimux.org

追記:
AudioとVideoも整形して表示されるようなソースに修正しておきました。

ひとり仕事: フリーランスという働き方
(2012-10-5)
売り上げランキング: 14,705
100円

加藤 康祐 / 企画・設計

1980年1月12日生まれ。1998年よりデザイン会社のパートタイムアシスタントとしてWeb制作を経験。2005年に独立、フリーランスとして、企業、個人、NPO、独立行政法人など、様々な領域でのITやデザインによるサポート業務に携わる。2018年、加藤康祐企画設計を開業。これまでの経験を活かし、より広い視野でクライアントの問題解決に取り組み、クライアントと一緒になって新しい価値創出をし、平静な社会の実現を目指す。

加藤康祐企画設計

是非、フォローしてください!
Twitter / Instagram