stonewall開発日記7 Tumblr APIからJSONPを取得して画像を並べるサンプル

一通りできたので動作確認用にサンプルを作った。こういうグリッドで並べるようなレイアウトはtumblrやってる人ならだいたい好きだと思うからtumblrのAPIを使ってみた。動作確認していく上で細かなバグも見つかり、足りていないテストを追加したりした。JSONPのコールバック関数実行を待ってからレイアウト処理を実行しているからというのもあるけど、実際に使うと割とまだ面倒な感じで、今後どう改善するかを検討したい。

以下はTumblr APIをクライアント側のJavaScriptから利用する方法

Tumblrにアプリケーションを登録してOAuthキーを取得

ここでアプリケーションを登録。Application nameとApplication descriptionは何でもよい(後で変更もできます)。今回はローカルで試すのと、投稿を取得するだけなのでOAuthのConsumer Keyのみを使うのでApplication websiteもDefault callback URLも空でよいです。

TumblrのAPIからJSONPを取得

XMLHttpRequestを使いたいところだけど、異なるドメイン間での通信ができないので、JSONPを使う。JSONPを取得するには、

http://api.tumblr.com/v2/blog/{Tumblrアドレス}/posts[/投稿タイプ]?api_key={OAuth Comsumer Key}&jsonp=[コールバック関数名]

として、動的にスクリプトタグを生成してリクエストを飛ばす。今回は画像のみなので投稿タイプはphotoにする。

JSONPをパースして表示

コールバック関数の仮引数にJSONが入っているので、画像のURLを取り出しImageオブジェクトを生成してDOMに追加。要素の高さを取得するため全てがロードされるのを待ってbuildメソッドを実行している。読み込み部分が悪いのかも知れないけど、たまに全件表示されないのと、表示までに意識しなければならないことが多過ぎるのが課題。

通常のTumblrに組み込む方法はまた別の投稿で書こうと思う。