楽天のAPIが思った以上にカンタンに使えたのでサンプルを紹介してくださっている方がたくさんいたので、InstagramのAPIもカンタンだろうとなめてかかったんです。そしたら、それはそれはとても痛い目にあいました。惨敗です。それでも、サンプルを紹介してくださっている方が何人かいらっしゃったので、なんとかポピュラーは取得して表示することができました。
InstagramのAPIでポピュラーを取得する方法
まずは、InstagramのクライアントID（CLIENT ID）が必要なので、開発者登録をして取得してください。
そしたら、あとはこんなコードです。いろんなかたのコードをコピペして弄って、コピペしていじってるので、かなりの確率でもっとキレイにできるんだと思います。でも、ちゃんと動きます。
JavaScript
[cc lang=”JavaScript”] $(function() {$(“#images”).text(“読み込み中…”);
$.ajax({
url: “https://api.instagram.com/v1/media/popular”,
data: { client_id: “ココにクライアントID” },
dataType: “jsonp”,
error: function(jqXHR, textStatus, errorThrown) {
$(“#images”).text(textStatus);
},
success: function(data, textStatus, jqXHR) {
$(“#images”).text(“”);
for (var i = 0, length = data.data.length; i length; i++) {
var d = data.data[i];
$(“#images”).append(
$(“
.append($(““).attr(“href”, d.link).attr(“target”, “_blank”)
.append($(““).attr(“src”, d.images.thumbnail.url)))
);
}
}
});
});
[/cc]
HTML
[cc lang=”html”]CSS
ご自由にどうぞ。
やりたかったこと
本当は、ポピュラーを取得したかったわけではないんです。場所を指定して、その近辺から投稿された写真を取得して表示したかったんです。そこまでの道のりはまだまだ長いようですね。でも、まずはAPIをつかってポピュラーを取得・表示できただけよしとします：）
jQueryを勉強しましょう
htmlとかCSSとかはなんとなくわかってきたんだけど、jQueryって聞くとなかなか手がでない… そんな方はきっとたくさんいますよねｗ でも、jQueryって、実はカンタンなんです。
でも、jQuery 日本語リファレンスとか見ても、これをどう使ったらいいのかいまいちピンとこない… ええ、たしかにそうですよね。ある程度わかってくると、リファレンス見ても理解できるんですが、最初のとっかかりとしては、なかなか難しいと思います。
なので、そんな方には、本をおススメします。KindleとかKoboとか電子書籍がこれだけ世の中に広まったというのに、紙の本をおススメします！
実際にWebサイトでの使用例が載っているので、jQueryってこんなことできるんだ！という感想を持ちます。それで、もちろんコードも載っているので、自分のサイトにも応用できちゃうわけですね。
