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