FrontPage | 一覧 | 検索 | 更新履歴(RSS) | 新規作成
はてなブックマークに追加 はてなブックマークを表示

Tumblr - Tumblr は面白い

差分表示


Tumblr は面白い

ご意見、ご感想は、[[♪掲示板 http://kimux.org/index.cgi?talk]] にて。
* API

[[tumblr API http://www.tumblr.com/api]]を使ってみよう。

** JSON output

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

** tumblr_api_read の軽い使用例

[[ウクレレ日記 http://kimux.org/ukulele/]] の頭の数行。

** 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) の部分は自分のユーザ名に書き換えてください。
ただし、最新版は [[ウクレレ日記 http://kimux.org/ukulele/]] のソースを直接ご覧下され。

(2010-01-24 quote に長文が引用されてしまう問題があるので、長い文字列は一律20文字カットとした。)
(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