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枚しか読まれない問題は読み込み時のコードに不具合があったからでした。この話題についてはまた別の投稿で掘り下げたい。