FrontPage | 一覧 | 検索 | 更新履歴(RSS) | 新規作成
はてなブックマークに追加 はてなブックマークを表示 編集(管理者用) | 差分

Tumblr - Tumblr は面白い

編集(管理者用)

Tumblr は面白い

ご意見、ご感想は、♪掲示板 にて。

API

編集(管理者用)

tumblr APIを使ってみよう。

JSON output

JSON ジェイソン (JavaScript? Object Notation) で Tumblr を取り出そう。

tumblr_api_read の軽い使用例

ウクレレ日記 の頭の数行。

tumblr_api_read の例

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",(以下省略)

tumblr_api_read の読み方

最初にヘッダとして "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 (映像)の場合のキャプション

HTML に乗せて JavaScript? で引用だ!

方針:主要な文字列だけ引っ張ってきて(画像、映像はこのさい無視)、小さい字で改行せずに表示する。種類ごとに色を変える。

下記の (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