cherenkov/demo.html

## demo.html
<html>
<head>
<title>Google+ API test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script language="javascript">
var apiKey = 'ここに自分のGoogle API Keyを入れてください';
var counter;
function getActivity() {
	req('https://www.googleapis.com/plus/v1/people/' + $('#userId').val() + '/activities/public?maxResults=100&key=' + apiKey);
}
function req(url) {
	if (counter === undefined) {
		counter = $('#entryLength').val();
	}
	$.ajax({
		type: 'GET',
		dataType: 'jsonp',
		url: url,
		success: function(msg) {
			callback(msg);
			if (--counter) {
				req(msg.nextLink + '&key=' + apiKey);
			}
		}
	});
}
function callback(msg) {
	$.each(msg.items, function(i, item) {
		var li = $('<li>').append($('<p>').text(item.title));
		if (item.object.attachments) {
			$.each(item.object.attachments, function(ii, obj) {
				if (obj.objectType == 'photo') {
					li.append($('<img>').attr('src', obj.fullImage.url));
				}
			});
		}
		li.append($('<span>').text(item.updated));
		$('#activityList').append(li);
	});
}
$('#entryLength').change(function(e) {
	counter = this.value;
});
</script>
<style>
body {
	font-size: 0.6em;
}
li {
	border: 1px solid black;
}
img {
	width: 50px;
}
</style>
</head>
<body>
<input type="text" id="userId" value="104375100134443203420">
<select id="entryLength">
<option value="1">100</option>
<option value="2">200</option>
<option value="3">300</option>
<option value="4">400</option>
<option value="5">500</option>
</select>
<button onclick="getActivity();">Reload</button>
<ol id="activityList"></ol>
</body>
</html>
	<html>
	<head>
	<title>Google+ API test</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script language="javascript">
	var apiKey = 'ここに自分のGoogle API Keyを入れてください';
	var counter;
	function getActivity() {
	req('https://www.googleapis.com/plus/v1/people/' + $('#userId').val() + '/activities/public?maxResults=100&key=' + apiKey);
	}
	function req(url) {
	if (counter === undefined) {
	counter = $('#entryLength').val();
	}
	$.ajax({
	type: 'GET',
	dataType: 'jsonp',
	url: url,
	success: function(msg) {
	callback(msg);
	if (--counter) {
	req(msg.nextLink + '&key=' + apiKey);
	}
	}
	});
	}
	function callback(msg) {
	$.each(msg.items, function(i, item) {
	var li = $('<li>').append($('<p>').text(item.title));
	if (item.object.attachments) {
	$.each(item.object.attachments, function(ii, obj) {
	if (obj.objectType == 'photo') {
	li.append($('<img>').attr('src', obj.fullImage.url));
	}
	});
	}
	li.append($('<span>').text(item.updated));
	$('#activityList').append(li);
	});
	}
	$('#entryLength').change(function(e) {
	counter = this.value;
	});
	</script>
	<style>
	body {
	font-size: 0.6em;
	}
	li {
	border: 1px solid black;
	}
	img {
	width: 50px;
	}
	</style>
	</head>
	<body>
	<input type="text" id="userId" value="104375100134443203420">
	<select id="entryLength">
	<option value="1">100</option>
	<option value="2">200</option>
	<option value="3">300</option>
	<option value="4">400</option>
	<option value="5">500</option>
	</select>
	<button onclick="getActivity();">Reload</button>
	<ol id="activityList"></ol>
	</body>
	</html>