Pick Up Tumblr

最新記事
Recent Tweets @suzkaz
Tumblr API で投稿データを取得する方法

こちら「Tumblr API（公式）」と、 こちら「Tumblr API v2 日本語訳」 を見ながら、
Tumblr APIを使った投稿データの取得にチャレンジしてみます。

まず、マニュアルを確認してみましょう。

投稿データを取得

書式

api.tumblr.com/v2/blog/{base-hostname}/posts[/type]?api_key={key}&[optional-params=]

HTTP Method：GET
認証：APIkey

リクエストパラメータ

  • base-hostname（文字列）
    スタンダード/カスタムブログホスト名
    必須：YES
  • api_key（文字列）
    あなたのAPIkey
    （APIkeyの取得方法はこちらから。）
    必須：YES
  • type（文字列）
    取得する投稿データ種別。次のうち1つを指定します:
    text, quote, link, answer, video, audio, photo
    必須：NO
    デフォルト値：None（すべての種類を取得します）
  • id（数値）
    投稿データID。 単一の投稿データを取得します。
    IDで指定されるデータがない場合は404エラーが返ります。
    必須：NO
    デフォルト値：None
  • tag（文字列）
    取得データを絞り込むタグ
    必須：NO
    デフォルト値：None
  • limit（数値）
    取得する投稿データの数。
    1から20までの数値で指定してください。
    必須：NO
    デフォルト値：20
  • offset（数値）
    取得開始位置
    必須：NO
    デフォルト値：0 (最新の投稿データ)
  • reblog_info（真偽値）
    reblog情報を返すかどうかを指定します (true か falseで指定)。
    true を指定すると、いろいろな reblogged_ フィールドが返ります。
    必須：NO
    デフォルト値：false
  • notes_info（真偽値）
    notes情報を返すかどうかを指定します (true か falseで指定)。
    true を指定すると、note数とnoteデータが返ります。
    必須：NO
    デフォルト値：false
  • format（文字列）
    投稿データの形式を指定します。
    HTML以外では次のものがあります:
    • text – プレーンテキスト。HTMLなし。
    • raw – ユーザーが入力したまま(後処理なし)。
      もし、ユーザーがMarkdownで入力していた場合は、
      HTMLではなくMarkdownが返されます。
    必須：NO
    デフォルト値：None (HTML)

このサイトの{base-hostname}は、「stainless-note.tumblr.com」で、
APIkeyが、「xxXxxxXxxxxXxxxxxXxxxxxxX」だったとして、
必須のパラメータは、この２つなので、とりあえず・・・

api.tumblr.com/v2/blog/stainless-note.tumblr.com/posts?api_key=xxXxxxXxxxxXxxxxxXxxxxxxX

このURLで取得できるはずです。

PHPの場合

PHPのコードなら、こんな感じ・・・

<?php
$domain = "stainless-note.tumblr.com";
$api_key = "xxXxxxXxxxxXxxxxxXxxxxxxX";
$responses = file_get_contents("http://api.tumblr.com/v2/blog/$domain/posts?api_key=$api_key");
$responses = json_decode($responses);
print_r($responses);
?>

取得データはJSON形式なので、json_decode();でデコードします。
すると・・・

stdClass Object
(
    [meta] => stdClass Object
        (
            [status] => 200
            [msg] => OK
        )

    [response] => stdClass Object
        (
            [blog] => stdClass Object
                (
                    [title] => Stainless Note
                    [posts] => 6
                    [name] => stainless-note
                    [url] => http://stainless-note.tumblr.com/
                    [updated] => 1356040980
                    [description] => 
                    [ask] => 1
                    [ask_anon] => 
                    [share_likes] => 
                )

            [posts] => Array
                (
                    [0] => stdClass Object
                        (
                            [blog_name] => stainless-note
                            [id] => 38410914368
                            [post_url] => http://stainless-note.tumblr.com/post/38410914368/tumblr-html
                            [slug] => tumblr-html
                            [type] => text
                            [date] => 2012-12-20 22:03:00 GMT
                            [timestamp] => 1356040980
                            [state] => published
                            [format] => html
                            [reblog_key] => 6u81K3mQ
                            [tags] => Array
                                (
                                    [0] => Tumblr
                                    [1] => HTML
                                    [2] => Javascript
                                )

                            [short_url] => http://tmblr.co/ZLNsbtZnU0f0
                            [highlighted] => Array
                                (
                                )

                            [note_count] => 0
                            [title] => Tumblrには投稿できないHTMLタグ
                            [body] => <p>前回、「<a href="http://stainless-note.tumblr.com/post/38310076940/tumblr-api">Tumblr API を使ってアイコン画像を取得する方法</a>」という記事を書いていて、
（以下略）

取得できたみたいです！

Javascriptの場合

次は、Javascript。jQueryを使って取得してみます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

jQueryの読み込みもお忘れなく。

$(function(){
    domain ="stainless-note.tumblr.com";
    api_key ="xxXxxxXxxxxXxxxxxXxxxxxxX";
    $.getJSON(
        "http://api.tumblr.com/v2/blog/"+domain+"/posts?api_key="+api_key+"&jsonp=?",
        function(data){
            console.log(data);
        }
    );
});

ポイントは最後につけた「&jsonp=?」これがないと取得できません。
取得したdataオブジェクトをコンソールに出力しています。

Google Chrome だと、
メニューの「表示」＞「開発/管理」＞「JavaScriptコンソール」で確認できます。

image

取得できてますね！

記事一覧を表示する

では、記事一覧として表示してみます。

<ul id="post_list">
</ul>

HTML側をこうして

$(function(){
    domain ="stainless-note.tumblr.com";
    api_key ="xxXxxxXxxxxXxxxxxXxxxxxxX";
    $.getJSON(
        "http://api.tumblr.com/v2/blog/"+domain+"/posts?api_key="+api_key+"&limit=5&jsonp=?",
        function(data){
            if( data['meta']['status']!=200){
                return;//取得失敗なので終了。
            }
            
            $.each(data['response']['posts'],function(){
                $("#post_list").append('<li>'+ this['title'] +'</li>');
            });
        }
    );
});

このJavascriptコードを実行すると・・・

<ul id="post_list">
    <li>Tumblrには投稿できないHTMLタグ</li>
    <li>Tumblr API を使ってアイコン画像を取得する方法</li>
    <li>iMac(2012)の電源ボタンが無い！</li>
    <li>徳丸浩のtumblr: 書式文字列によるSQLインジェクション攻撃例</li>
    <li>Tumblrで「SyntaxHighlighter」を使うときの注意点</li>
</ul>

こうなります。「limit=5」を追加して5件に絞ってます。

「data[‘meta’]['status’]!=200」でステータスを確認します。
200なら成功、それ以外なら失敗です。

data['response’]['posts’]に記事データが配列として格納されてるので、
繰り返し処理を使って#post_listに、投稿タイトルを追加しました。

まとめ

だいぶと、それらしい形ができてきました。
これを応用すれば、何かできそうな気がしますね。

ちなみに、画像投稿の場合、記事タイトルは無いので、undefinedになってしまいます。
ご注意ください。

関連記事

Text
Single A Theme :: Version 1.3.1 :: By Business Bullpen
ステンレスノート