Designing Tumblr

Tumblr解説本、Designing Tumblrを献本していただきました。ありがとうございます。僕が関わったKAKATO、梅川良満さんのTumblrも紹介してもらってます。あとthirozumiさんのページで投稿されてるのが僕のTEE PARTYの商品です。

で、KAKATOで使ったURLをランダマイズするスクリプトの掲載部分が中途半端だったので、補足しておきます。urls配列に入れたURLをダウンロードボタンとして使っているa要素(id="downloadURL")にセットするところ。

var urls = ["ダウンロードURL1","ダウンロードURL2","ダウンロードURL3"];
var a = document.getElementById("downloadURL");
a.href = urls[Math.floor(Math.random() * urls.length)];

アップロード先のサーバが混雑してたり落ちてたらURLだけ分散しても意味ないので、実際にこのような目的で使う場合はアップロード先も分散しておいた方がよいと思います。

本当は技術的なレビューとか面白いTumblrのセレクションで参加する予定だったのですが忙し過ぎで何一つできなかったので、代わりにと言うか何と言うか、せっかくなので書籍を参考にTumblrのテーマを作ろうかと思います。

今まではCustomizeのEdit HTMLで編集してた(もしくはローカルのHTMLからコピー&ペースト)んだけどストレス溜まるので、ローカルで開発環境を整えたい。

書籍にはfumblrが紹介されてたんだけど、環境の問題かすんなり動かなかったので深追いせずにThimbleを使うことにした。PHP製なのでXAMPPとかですぐ動かせる。どっちも微妙に古くて新しいタグに対応してなさそう。仕組みとしてはテンプレートタグをパースしてるだけっぽいので、自分で拡張すればよいかも。とりあえずforkしておいた。

TumblrのAPIから画像を取得して表示するサンプルをアップデート

stonewallのexampleとしてTumblrからJSONPで画像URLを取得して表示するコードをgithubにアップしたけど、実際に動いているものもアップした。投稿順ではなく高さをなるべく揃えるように低いところに足していくモード。
http://hysysk.org/work/tumblr

今回のAPI KEYは別に見られても構わないのだけど、複数人でコードを共有する場合などでは望ましいことではないので、バージョン管理下に置くファイルと、動作確認用のファイルを分けている。

こんな感じのpythonスクリプトでtemp.htmlを作ってgitignoreに追加しておくと、いちいちAPI KEYを手で置き換えなくて良いし、間違ってキーが入った状態でコミットしたりしない。通常業務でやると大変です。

import re
input = open('index.html', 'r')
output = open('temp.html', 'w')
for line in input:
    output.write(line.replace("YOUR API KEY","PURkZinJvrZVtis5m8TxmEcAbM4dcgjlfvecnWJyEAIf5BpZVe"))
input.close()
output.close()

一応UglifyJSでミニファイしてサーバに置いてあるんだけど、「API KEYを置き換える→JSをミニファイする→サーバにアップ」まで自動化したいしするべき。

あと、基本的なことだけどAPIを叩いてパースしたり表示を確認するのは、レスポンスデータを保存したデータかAPIドキュメントを元に作成したダミーのデータで試すのがよい(実はTumblrのAPIドキュメントにはフルサイズの画像を取得するoriginal_sizeというキーが抜けていたりする)。

それにしても実際に動いているものを触っていると色々と対応したいことがでてくる。ウィンドウサイズの変化に追従するとか、オートページングとか。クリックでオリジナル画像が表示されるとか。

ちなみに以前の画像が1枚しか読まれない問題は読み込み時のコードに不具合があったからでした。この話題についてはまた別の投稿で掘り下げたい。

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に組み込む方法はまた別の投稿で書こうと思う。