■星占いを表示するブログパーツを作る(ウーマンエキサイト編)
レンタルブログやレンタルホームページといった、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を修正・変更して試してもらいたい。