編集(管理者用) |
差分
Tumblr は面白い
ご意見、ご感想は、♪掲示板 にて。
tumblr APIを使ってみよう。
JSON ジェイソン (JavaScript? Object Notation) で Tumblr を取り出そう。
http://kimux.tumblr.com/api/read/json をブラウザで見てみると（これを書いた当時。改行を適宜入れてます）……
var tumblr_api_read = {
"tumblelog":
{"title":"kimux",
"description":"",
"name":"kimux",
"timezone":"Asia\/Tokyo",
"cname":false,
"feeds":[]},
"posts-start":0,
"posts-total":"25",
"posts-type":"all",
"posts":[
{
"id":21234761,
"url":"http:\/\/kimux.tumblr.com\/post\/21234761",
"type":"link",
"date":"Tue, 11 Dec 2007 01:03:09",
"bookmarklet":1,
"mobile":0,
"feed-item":"",
"from-feed-id":0,
"link-text":"kimux（以下省略）
},
{
"id":21186957,
"url":"http:\/\/kimux.tumblr.com\/post\/21186957",
"type":"quote",
"date":"Mon, 10 Dec 2007 08:33:39",（以下省略）
最初にヘッダとして "tumblelog" の説明と記事数についての情報があり、それに続く "posts" の中に複数の記事が入っている。
主なヘッダ情報：
| tumblr_api_read["tumblelog"]["title"]) | タイトル |
| tumblr_api_read["posts-total"] | 全記事数 |
主な記事情報：
| tumblr_api_read["posts"][i]["type"] | i 番目の記事のタイプ（regular/photo/quote/link/chat/audio/video） |
| tumblr_api_read["posts"][i]["regular-title"]] | 記事のタイプが regular （テキスト）の場合のタイトル |
| tumblr_api_read["posts"][i]["photo-caption"] | 記事のタイプが photo （写真）の場合のキャプション |
| tumblr_api_read["posts"][i]["quote-text"] | 記事のタイプが quote （引用）の場合のテキスト |
| tumblr_api_read["posts"][i]["link-text"] | 記事のタイプが link （リンク）の場合のテキスト |
| tumblr_api_read["posts"][i]["（わかりません）"] | 記事のタイプが chat （チャット）の場合の何か |
| tumblr_api_read["posts"][i]["audio-caption"] | 記事のタイプが audio （音声）の場合のキャプション |
| tumblr_api_read["posts"][i]["video-caption"] | 記事のタイプが video （映像）の場合のキャプション |
方針：主要な文字列だけ引っ張ってきて（画像、映像はこのさい無視）、小さい字で改行せずに表示する。種類ごとに色を変える。
下記の (you) の部分は自分のユーザ名に書き換えてください。 ただし、最新版は ウクレレ日記 のソースを直接ご覧下され。
(2010-01-24 例えば quote が長文だと全文引用されてWebページが埋め尽くされてしまう問題があるため、他のカテゴリーも含めて、長い文字列は一律20文字カットとした。）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>tum test</title>
<style type="text/css">
</style>
</head>
<body>
<p>test start</p>
<div style="font-size: small">
<script type="text/javascript" src="http://(you).tumblr.com/api/read/json"
></script>
<script type="text/javascript" >
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"];
col = "background: #ffcccc";
break;
case "photo":
kind = "photo";
label = tumblr_api_read["posts"][i]["photo-caption"];
col = "background: #ccffcc";
break;
case "quote":
kind = "quote";
label = tumblr_api_read["posts"][i]["quote-text"];
col = "background: #ccccff";
break;
case "link":
kind = "link";
label = tumblr_api_read["posts"][i]["link-text"];
col = "background: #ccccff";
break;
case "chat":
kind = "chat";
label = "";
col = "background: #ccccff";
break;
case "audio":
kind = "audio";
label = tumblr_api_read["posts"][i]["audio-caption"];
col = "background: #ccffff";
break;
case "video":
kind = "video";
label = tumblr_api_read["posts"][i]["video-caption"];
col = "background: #ccffff";
break;
}
// HTML タグを全て剥ぎ取る
label = label.replace(/<[^>]*?>/gi,"");
// "(via )" という表記を削除する
label = label.replace("(via )","");
/* 2010-12-24 kimux */
if (label.length > 20) label = label.substring(0,20) + "...";
url = tumblr_api_read["posts"][i]["url"];
document.write(
'<dev style ="', col, '">',
'<a href="', url, '">',
i+1, ' [', kind, '] ' ,
'</a>',
label,
'</dev>',
" | "
);
}
</script>
</div>
<p>
end of script
</p>
| HTMLタグを削除してテキストフレームに読み込む | http://www.openspc2.org/book/InDesignCS2/hard/013/index.html |
| 文字列操作の比較表 | http://0xcc.net/blog/archives/000137.html |
| とほほ | http://www.tohoho-web.com/js/index.htm |
| 新JavaScript?入門 8 文字列 | http://homepage3.nifty.com/aya_js/js2/js208.htm |
