RandomTumblrを作ってみた
JavaScriptは難しいので全く触ったことが無かったのだけど、ちょっと使う必要があったので練習してみた。
ちょっと練習したあとに
「Tumblrの画像をランダムに表示したいな」
と前から思ってたので実装してみることに。
jQueryというライブラリとjquery.jsonp.jsというプラグインを使用したらあっさり実装できた。
jQueryはなかなかいいですね。
出来上がったものは以下
http://www.ueblog.org/randomtumblr/photo/ueblog/
http://www.ueblog.org/randomtumblr/photo/(Tumblrのユーザー名)/(サイズ 75,100,250,400,500のどれか オプション)/
で８秒後ごとに表示される(Tumblrのアカウントがないと表示されないという話もあるけど良く分らない)。
サーバー側はDjangoだけど特別なことはなにもやってない。パラメータ(ユーザー名、画像サイズ）をテンプレートに反映させてるだけなので省略。
生成されたhtmlはこんな感じ。恥ずかしいがさらすことが大事なので、、、、、、、
最初にjsonでトータル数を取得する必要はないのでそこは後で直す予定。
良い書き方があったら教えてほしいです。JavaScriptそのものも、カッコいいエフェクトのかけかたとかも知りたい。
JavaScriptに慣れたら、サーバー側でXML生成と画像の一時ダウンロードをしてActionScript3.0に挑戦したいと思います。
<html>
<head>
<title>Random Tumblr - ueblog</title>
<script type="text/javascript" src="http://www.ueblog.org/media/javascript/jquery.js"></script>
<script type="text/javascript" src="http://ueblog.tumblr.com/api/read/json?num=1&type=photo"></script>
<script type="text/javascript" src="http://www.ueblog.org/media/javascript/jquery.jsonp.js"></script>
<script type="text/javascript">
function get_total() {
return tumblr_api_read["posts-total"];
}
function get_random() {
return Math.floor(Math.random() * get_total());
}
function tumblr_image_jsonp() {
//この下のueblogはサーバー側で生成
var url = "http://ueblog.tumblr.com/api/read/json?callback=tumblr_image&type=photo&num=1&start=" + get_random();
$.getJSONP(url, tumblr_image);
}
function tumblr_image(json) {
var result = json.posts[0];
var url = result["url"];
//この下のphoto-url-500はサーバー側で生成
var photo_url = result["photo-url-500"];
$("#photo_link").attr("href", url);
$("#photo_link").attr("target", "_blank");
$("#photo_img").fadeOut();
$("#photo_img").attr("src", photo_url);
$("#photo_img").fadeIn();
}
$(document).ready(function () {
tumblr_image_jsonp();
setInterval(tumblr_image_jsonp, 8000);
});
</script>
</head>
<body>
<div id="photo">
<a id="photo_link">
<img id="photo_img">
</a>
</div>
</div>
</body>
</html>
TumblrのAPIでdata=1をパラメーターに渡すと、PHPのprint_r関数の表示結果そのものが出た！！
TumblrはPHP製らしい。
perm link: /blog/entry/randomtumblr/
どぞー。
http://d.hatena.ne.jp/MiCHiLU/20080226/1203955481