APIは素晴らしいです。
デザインができなくても、アイデアさえあればサクッと面白い（？）サイトを作れます。
先日こんなブログ記事が掲載されていたのでインスパイアされて僕も挑戦してみました。
まだまだ駆け出しJavaScriptコーダーでjQueryが無ければ何もできないひよっこの僕ですが、仕事で嫌々JSを触っていたおかげで少しずつ理解が深まっていき、JavaScriptと様々なAPIを使ってページを作って遊ぶのが楽しくなってきました。
今回僕が作ったのは、Foursquare APIをGoogle Maps APIをマッシュアップしたページで、今まで僕がどんな店に行ったことがあるのか丸わかりの個人情報ダダ洩れページです。
最初はサクッとページを作ることに主眼を当てていたので、FoursquareのAPIページで見つけたPhotos APIを使ってFoursquareにアップロードした画像一覧を取得するスクリプトを書いてみました。
そのAPIで取得したJSONがこちら。長いのでリンク先で確認。
そのJSONをあれやこれやして画像を表示させるコードがこれだ！！！
fs.photo = function() {
$.ajax({
type: "GET",
cache: true,
url: "APIで取得したJSONのURL",
dataType: "jsonp",
beforeSend: function() {
$('body').prepend('<div id="text">foursquareと通信中…</div>');
},
success: function(json) {
if (json.response.photos) {
var items = json.response.photos.items;
$('#text').hide();
$('#foursquare').css('overflow-y','scroll').html('<ul></ul>');
$(items).each(function(i) {
var obj = items[i].sizes.items[1];
var url = items[i].url;
var images =obj.url;
var width = obj.width;
var height = obj.height;
$('#foursquare ul').append('<li><a href="'+url+'"><img src="'+images+'" width="'+width+'" height="'+height+'" /></a></li>');
});
$("#foursquare li a").fancybox();
}
},
error: function() {
$('body').html('<p>JSONの読み込みに失敗しました。</p>');
}
})
};
上記コードの処理の流れは他に何もAjax通信が発生していない状態でAjax通信が行われる前に「foursquareと通信中」という一文を表示し、通信が成功したらまずは通信中に表示させていた文言を隠して、div#foursquareのCSSにoverflow: scroll;を追加して、その中にul要素を置くようになっています。
そして画像の数でループさせて、先ほど作った空のul要素にリンクと画像のデータを持ったli要素を追加しています。
最後にリンクをクリックした際にfancyboxのモーダルウインドウを表示させるために、実行させています。
以上のコードはスタンドアロンの画像表示ページ用に書いたJSなんですけど、2コンテンツを追加した際に無駄なコードが出来てしまいました。
大体ここまで作るのに1時間程度。
そこからアイデアが湧いて現在の方になりました。が、飽きっぽい性格なのでもっと色々と自動化してクオリティを上げようと思っていたのですが、ランチの店決め担当者を決めるWebアプリを作ってみようと思って最近そっちに気がいってしまってて結局このfoursquare遊びはこれで終わりそうです。
ランチの店決めアプリはまだモックアップ段階ですが、突き詰めていけばローカルストレージであれやこれやしたり、jQuery Mobileを使いそうなのでワクワクしています。
こうやって遊びながら勉強できるというのが面白いな～と感じています。
一人でやってても虚しいので、僕が書いたコードに対してアドバイスなり批判なり、さらにアイデアをいただけると物凄くありがたいのでよろしくお願いします。