Google AJAX Feed APIを使ってブログパーツを作る(その2)

投稿者: | 2008年9月26日

■星占いを表示するブログパーツを作る(ウーマンエキサイト編)

レンタルブログやレンタルホームページといった、PerlやPHP等のプログラムが使えないサイトの中に、外部にある他のサイト(他ドメイン)で公開されているRSSを、Javascriptのみを使って掲載する方法。

通常Javascriptでは別ドメインのファイル(RSS)を取得すること(クロスドメイン処理)は難しいので、Googleが提供しているGoogle AJAX Feed APIを使う。

Google AJAX Feed
http://code.google.com/apis/ajaxfeeds/

■例:ウーマンエキサイト(http://woman.excite.co.jp/)の星占いを表示するブログパーツ

ウーマンエキサイトの星占いでは、その日の恋愛運、仕事運、金運を各星座ごとのRSSで配信している。
そこで、それぞれのRSSからデータを取得成型して表示させることにする。

そのまま使えるサンプルコードはこれ

<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
<title></title>
<script type=”text/javascript” src=”http://www.google.com/jsapi?key=あなたのAPI Key”>
</script>
<script type=”text/javascript”>
google.load(“feeds”, “1”);
function initialize() {
    var container = document.getElementById(“excite”);
    var ar = new Array(“cp”,”aq”,”pi”,”ar”,”ta”,”ge”,”ca”,”le”,”vi”,”li”,”sc”,”sa”);
    for(var i=0; i<12; i++){
        var url = “http://woman.excite.co.jp/fortune/xml/?f=horoscope&sign=” + ar[i];
        var feed = new google.feeds.Feed(url);
        feed.load(function(result){
                if (!result.error){var entry = result.feed.entries[0];
                    var str=entry.title;
                    var result = str.split(“-“);
                    container.innerHTML += ‘<b>【<a href=”‘ + entry.link + ‘”>’ + result[0] + ‘</a>】</b>’ + result[2] + ‘ ‘ + result[3] + ‘ ‘ + result[4] + ‘<br>’;
                }
        });
    }
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id=”excite”></div>
</body>
</html>

上記コードを記載したページにアクセスすると、以下のように表示されるはず。
星座名部分には、詳細結果が記載されているページにリンクされている。
(各結果の数値はその日によって変わる)

【山羊座】 恋愛運[5] 仕事運[5] 金運[5]
【水瓶座】 恋愛運[4] 仕事運[5] 金運[5]
【牡牛座】 恋愛運[3] 仕事運[2] 金運[2]
【牡羊座】 恋愛運[5] 仕事運[5] 金運[5]
【魚座】 恋愛運[1] 仕事運[3] 金運[3]
【双子座】 恋愛運[2] 仕事運[1] 金運[1]
【蟹座】 恋愛運[3] 仕事運[1] 金運[1]
【天秤座】 恋愛運[5] 仕事運[5] 金運[5]
【乙女座】 恋愛運[2] 仕事運[1] 金運[1]
【獅子座】 恋愛運[4] 仕事運[5] 金運[5]
【蠍座】 恋愛運[5] 仕事運[5] 金運[5]
【射手座】 恋愛運[2] 仕事運[3] 金運[3]

あとはCSSを使ったりinnerHTMLを修正・変更して試してもらいたい。