Mach3.laBlog

Tumblrでタグリスト/新規投稿リストを出力してみる

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

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

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

Tumblrでタグリスト/新規投稿リストを出力してみる

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がタグの抽出に対応してくれれば不要なライブラリです。
まとめ書きながらなんかへこんできました…

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

mach32ac00a19d261ed2dfb9c3434899a1ce9
<p>ご報告ありがとうございます。お役に立てたようで、なによりです!</p>
Tom017e92db5b3d069b09c7f43754c5bb95
<p>はじめまして。</p>

<p>2日ほど前にTumblrをはじめたのですが、一般的なブログのように「最新の投稿」や「タグ」といった項目をサイドバーに表示させたいと思っていました。</p>

<p>こちらのスクリプトをお借りして実現できました。
本当にありがとうございます。</p>

<p>現在、メイン http://tom3suteki.tumblr.com/ と
サブ http://reblog-world.tumblr.com/ で実用させていただいています。</p>