■星占いを表示するブログパーツを作る(ライブドア編)
レンタルブログやレンタルホームページといった、PerlやPHP等のプログラムが使えないサイトの中に、外部にある他のサイト(他ドメイン)で公開されているRSSを、Javascriptのみを使って掲載する方法。
通常Javascriptでは別ドメインのファイル(RSS)を取得すること(クロスドメイン処理)は難しいので、Googleが提供しているGoogle AJAX Feed APIを使う。
Google AJAX Feed
http://code.google.com/apis/ajaxfeeds/
■例:ライブドア(http://fortune.livedoor.com/)の星占いを表示するブログパーツ
ライブドアの星占いでは、その日の全星座の運勢をRSSで配信している。
そこで、それぞれのRSSからデータを取得成型して表示させることにする。
そのまま使えるサンプルコードはこれ
<script type=”text/javascript”>
google.load(“feeds”, “1”);
function initialize(){
var feed = new google.feeds.Feed(“http://fortune.livedoor.com/xml/astro12.rdf”);
feed.setNumEntries(12);
feed.load(function(result){
if(!result.error){
var container = document.getElementById(“feed”);
var useFeed = “”;
for(var i = 0; i < result.feed.entries.length; i++){
var entry = result.feed.entries[i];
useFeed += ‘<a href=”‘ + entry.link + ‘”>’ + entry.title + ‘</a><br>’;
useFeed += entry.contentSnippet + ‘<br>’;
}
container.innerHTML = ‘<div class=”horoscope”>’ + useFeed + ‘</div>’;
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id=”feed”></div>
</body>
</html>
上記コードを記載したページにアクセスすると、以下のように表示されるはず。
星座名部分には、詳細結果が記載されているページにリンクされている。
(各結果はその日によって変わる)
牡羊座
人間関係は、万事順調となりそうです。あなたの人柄がものをいう日でしょう。友人の家に招待されたとき、親
牡牛座
周囲の注目を浴びそうな日ですので、言動がうまくいけば大きな幸運がもたらされる反面、失敗すれば大きなダ
双子座
小さな事件が、トラブルへと発展しそうな運気のようです。ただし、その原因は弱気なあなたにあるようです。
蟹座
トラブルのために、人間関係にひびが生じる予感があります。欲を表に出しすぎると、あなたのその欲張りさに
獅子座
このところしっくりいかなかった友人と仲直りをするチャンスです。素直な気持ちであなたのほうから声をかけ
乙女座
周囲からの期待が、あなたにとって重圧となることがありそうな日です。その重圧が大きな負担になり、途中で
天秤座
あなたの優しい思いやりの言動で、周囲の人たちとの関係が、さらに展開する幸運期を迎えています。心を穏や
蠍座
あなたに対する評価がよくなっていく幸運な日です。少々の無理難題でも、自分のことより相手の身になって対
射手座
周囲と対立してしまいそうな日です。無理矢理、自分の考えを押しつけたり、自己中心的な態度をとっていると
山羊座
人間関係が活発な日でしょう。周囲の人との交際から、有益な情報を得ることができたり、何か手助けをしても
水瓶座
調和が幸運のカギになる日です。単独で進んでいったり、あなた自身が前面に出てリーダーシップを取って物事
魚座
親しい友人との関係が、一時的にうまくいかなくなる予感があります。その友人とあなたの間に第三者が割りこ
あとはCSSを使ったりinnerHTMLを修正・変更して試してもらいたい。