twitxrのAPIを使ってPublicTimelineに流れる画像をダラダラ眺める何かを作ってみた
結構海外のパブリックタイムラインで流れる写真が面白いのでダラダラと眺めると面白いかなと思い勉強がてら作ってみました
今回初めて使うJQuery Cycle PluginはjQueryのスライドショーを行うPlugin
色々なエフェクトがあるけれど今回は画像が動いたりせずにフェードアウトフェードインで次の画像に切り替わるエフェクトを使用
一回りしたところで最新のデータを取りに行くように作ってみた
今回は動きがあるので画面をで動画でキャプチャしてiMovieで加工（前後の無駄なところと画像サイズ）してYoutubeに書き出してみた
サンプルソース
#!/usr/bin/perl use FindBin::libs; use strict; use warnings; use Readonly; use XML::TreePP; use JSON; use KCatch qw( source ); use CGI; my $q = new CGI; my $obj = { user => [], text => [], pic => [], }; Readonly my $URL => 'http://twitxr.com/api/rest/getPublicTimeline'; Readonly my $NUL => q{}; my $tpp = XML::TreePP->new(); my $tree = $tpp->parsehttp( GET => $URL ); for my $update (@{$tree->{result}->{update}}) { if ($update->{picture} ne $NUL) { push(@{$obj->{user}}, $update->{user }); push(@{$obj->{text}}, $update->{text }); push(@{$obj->{pic }}, $update->{picture}); }; }; print $q->header(-type => 'application/x-javascript; charset=utf-8'); print objToJson($obj);
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> #load { height: 138px; width: 138px; padding: 0; margin: 0; } #load img { padding: 5px; border: 1px solid #ccc; background-color: #eee; } .pic { height: 232px; width: 232px; padding: 0; margin: 0; } .pic img { padding: 5px; border: 1px solid #ccc; background-color: #eee; } </style> <script type="text/javascript" src="./lib/jquery-1.2.3.pack.js"></script> <script type="text/javascript" src="./lib/jquery.cycle.all.pack.js"></script> <script type="text/javascript"> $(function() { var url = "http://natu-n.com/cgi/twitxrget.cgi"; main(); var intervalId = setInterval(main, 50000); function main() { $("#load").show(); $("#p1").empty(); flg = 1; $.getJSON(url, function(data) { $.each(data.pic, function(i, pic) { var div = $("<div />") .append($("<img />").attr({src: pic})) .append($("<p />").text(data.text[i] + " by " + data.user[i])); $("#p1").append(div); } ); $("#load").hide(); $("#p1").show(); $('#p1').cycle({ FX: 'fade', speed: 4000, autostop: 1 }); }); } }); </script> </head> <body> <div id="load"> <img src="http://natu-n.com/img/ajax_activity_indicators_download_animated_indicator_big.gif" /> </div> <div id="p1" class="pic"> </div> </body> </html>
本当は良くないけどスクリプトもCSSも直書き
最初setIntervalの存在を知らなくてどうやって二回目の取得のところを書くか大分考え込んだ
