Google AJAX Feed API を使って Twitpic の画像ギャラリーを非同期で作る

JavaScript を使って非同期で Twitpic の画像を使ってギャラリーを作ります。まずは以下のようにして Google の API を読み込みます。

1

<script type="text/javascript" src="http://www.google.com/jsapi?key=APIKEY"></script>

次に以下のコードを貼り付けます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

google.load("feeds", "1");
function initialize()
{
    var feed = new google.feeds.Feed("http://twitpic.com/photos/hoge/feed.rss");
    feed.setNumEntries(8);
	feed.load(function(result) {
		if (!result.error) {
			var container = document.getElementById("twitpicThumbnail");
			container.innerHTML = '<h2>Photos</h2><ul>';
			for (var i = 0; i < result.feed.entries.length; i++) {
				var entry = result.feed.entries[i];
				if(i%2 == 0) {
					className = ' class="even"';
				} else {
					className = '';
				}
				container.innerHTML += '<li ' + className + '>' + entry.content.match("<a.*?a>") + '</li>';
			}
			container.innerHTML += '</ul>';
		}
	});
}
google.setOnLoadCallback(initialize);

ギャラリーを出力する HTML を配置。

1

<div id="twitpicThumbnail">Loading...</div>

かなり簡単です。外部の XML なりは通常読み込ませんので、それを読み込めるようにしてくれる Google AJAX Feed API は大変便利です。

参考サイト

関連記事

コメント

  1. SoftPyramidsさんのコメント

    いつもブログ拝見してます & 参考にさせてもらってます。
    こんな便利なのあるんですね。
    いつも外部のフィード取るときはPHP一択でしたが、今度使ってみます。