コピペなしでInstagramの画像を表示するよ!

20140529
$.ajaxと$.eachについて勉強したので、覚えるためにコードをかいてブログもかく!
ということでコピペなしでInstagram APIを使って写真を表示してみたよ。

2014年10月21日追記しました。
以前あらゆさんにJavaScriptだけでAPIを利用する危険性とデータ取得までをPHPで行う方法を教えていただきました。°(°`ω´ °)°。ありがとうございます。°(°`ω´ °)°。
あらゆさんのinstagram APIまとめがすごくわかりやすいです!
Instagram APIでwebサービスを作りたい全ての人に向けて書きました
PHPを追加してこさそそさんに教えていただいたJSも変更してみました!

PHP

<?php
//POSTリクエストの場合のみ受付
if($_SERVER['REQUEST_METHOD'] == 'POST'){
	//アクセストークン
	$access_token = "アクセストークン";
	//JSONデータを取得して出力
	echo @file_get_contents("https://api.instagram.com/v1/users/self/media/recent/?access_token={$access_token}");
	//終了
	exit;
}
?>

JS

$(function(){
	var $container = $(".instagram");
	var html = "";

	$.ajax({
		url: "instagram.php",//PHPファイルのURL
		type:"POST",
		dataType: "json"
	}).done(function(data){
		//通信成功時の処理
		$.each(data.data,function(i,item){
			var imgurl = item.images.low_resolution.url; //低解像度の画像のURLを取得
			var link = item.link; //リンクを取得
			html += "<li><a href='" + link + "' target='_blank'><img src='" + imgurl + "'></a></li>";
		});
	}).fail(function(){
		//通信失敗時の処理
		html = "<li>画像を取得できません。</li>";
	}).always(function(){
		//通信完了時の処理
		$container.html(html);
	});
});

html

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Instagtam API demo</title>
	
	<link href="http://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet" type="text/css">
	<link href="style.css" rel="stylesheet" type="text/css">

	<script src="jquery.min.js"></script>
	<script src="instagram.js"></script>
</head>
<body>
	<h1>Instagtam API demo</h1>
	<ul class="instagram"></ul>
</body>
</html>
どんなオブジェクトを取得できるかはコンソールで確認するとわかりやすい♡
$.each(data.data, function(i, item){
	console.log(item);
});
urlとdataを変更すると取得できるデータを変えられるよ。
User Endpoints

デモ

デモだよ。
Instagram API demo

まとめ

コピペしなかったからレベル2くらいにはなったはず!めざせレベル11△