この記事は賞味期限切れです。（更新から1年が経過しています）

この記事の情報は古い為、次の記事をあわせて御覧ください。
» TumblrPosts.jsが新しくなりました

Tumblrを弄る案件に初めて参加させて頂きましたが、
このサービスは他のブログサービスと異なり、
「最新の投稿」「タグ一覧」の出力機能を備えていない様子。
同機能を実現する為にはAPIへのアクセスを（複数回）行わなければならないのですが、
大変不便なので、それを代行するライブラリを書いてみました。

TumblrPosts

mach3’s js-tumblrposts.js at master – GitHub

Tumblrの記事を、API(/api/read/json/）を通して取得するクラスです。

簡単な使い方

ライブラリのロード

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.class.min.js"></script>
<script type="text/javascript" src="tumblrposts.js"></script>

先ず、必要なライブラリをロードします。
jQueryと、jquery.class.jsが必要です。
cf) jQueryでPrototype.js風のクラス定義をしてみる

初期化

var posts = new TumblrPost({
    domain:"example.tumblr.com",
    maxNum:300
});

初期化します。
引数のオブジェクトリテラルには、domain（対象となるTumblrのドメイン）と
maxNum（取得する最大記事数）を渡す事が出来ます。
両方共省略しても大抵問題は生じません。詳しくは後述。

イベント

次にイベントハンドラを設定します。

posts.bind( posts.EVENT_COMPLETE, function(e){
    var s = this;
    // getPosts() で投稿リストを取得
    // getTitleByPost() で投稿タイトルを取得
    $.each( this.getPosts(), function( i, post ){
        var title = s.getTitleByPost(post, 100),
            html = '<li><a href="{{url}}">{{title}}</a></li>'
            .replace( /{{url}}/, post.url )
            .replace( /{{title}}/, title );
        $(html).appendTo( $("ul#updated") );
    });
    // getTags() でタグリストを取得
    $.each( this.getTags(), function( i, tag ){
        var html = '<li><a href="/tagged/{{url}}">{{tagname}} ({{count}})</a></li>'
            .replace( /{{tagname}}/, tag.name )
            .replace( /{{count}}/, tag.count );
        $(html).appendTo( $("ul#tags") );
    });
});

記事のロードが完了すると“complete”（EVENT_COMPLETE）イベントが着火されます。
イベントハンドラ内でgetPosts()やgetTags()を呼ぶと、投稿/タグのリストを取得する事が出来ます。

posts.bind( posts.EVENT_PROGRESS, function(e){
    console.log( this.getLoadedRate() + "% Loaded" );
});

こちらは使う事は少ないかもしれませんが、
記事のロードが進むごとに“progress”(EVENT_PROGRESS)イベントが着火されます。
getLoadedRate()で進捗をパーセントで取得する事が出来ます。

ロードスタート

posts.run();

run()メソッドをコールすると、APIへのアクセスが開始されます。

APIとか

TumblrPost( config )

コンストラクタ。引数に設定用のオブジェクトを渡せます。
config
– domain (String) : Tumblrのドメイン。外部Tumblrにアクセスする時に指定。
– maxNum (Number) : 読み込む最大記事数。投稿数が多い場合はこれを指定する事で負荷を軽減出来ます。
（maxNumを指定した場合、タグの取得はあまり正確でなくなります）

run() : void

APIへのアクセスを開始します。
全ての投稿をロードするか、config.maxNumに達するまでアクセスを繰り返し行ないます。

getTags() : Array

タグリストを取得します。返されるArrayの子要素はシンプルなオブジェクトです。
Array
– name (String) : タグの名前
– count (Number) : ポスト数

getPosts( offset, count ) : Array

記事リストを取得します。
– offset (Number) : 開始位置
– count (Number) : 取得する記事数 返されるArrayの子要素はTumblrAPIのpostオブジェクトです
c) API | Tumblr

getTitleByPost( post ) : String

postオブジェクトから記事タイトルを抽出します。（試験的に実装）

getLoadedRate() : Number

ロードの進捗をパーセントで返します。

まとめ

仕方がないとは言え、
この手法は場合によっては複数回JSONPのアクセスを繰り返すことになり、
パフォーマンスが正直あまりよろしくない為、必要がなければ避けるべきでしょう。
（一度に取得できるポストの最大数が50なので…）

最新の投稿の取得は、はっきり言ってオマケでつけています。
タグ抽出時にどうせ投稿情報取得するので、ついでに格納しとけ～的な。
新規投稿だけならJSONPのコールバックで直接処理したほうが明らかに効率がいいので、
タグリストに用がないならそうすべきですね。

そんなわけで、
TumblrのAPIがタグの抽出に対応してくれれば不要なライブラリです。
まとめ書きながらなんかへこんできました…