Retoucher.jp » AJAX http://retoucher.jp 主にPC関連の備忘録と映画の感想を書いています。 Fri, 04 Nov 2011 07:34:34 +0000 ja hourly 1 http://wordpress.org/?v=3.2.1 Google AJAX Feed APIを導入 http://retoucher.jp/archives/36 http://retoucher.jp/archives/36#comments Fri, 11 May 2007 07:15:41 +0000 taiyo http://omegared.sakura.ne.jp/test/archives/36 WEB言語初心者の自分としてはAJAX自体チンプンカンプンで、相当苦労しています。
AJAXとRSSリーダーのコトを調べているうちに「Google AJAX Feed API」を導入する事にしてみました。

Google AJAX Feed APIサイト

使用するにはAPIキーが必要となりますが、上記サイトから簡単に取得する事ができます。


サンプルでは・・・・

<html>
<head>
<script type=”text/javascript” src=”http://www.google.com/jsapi?key=YOUR_KEY_HERE”></script>
<script type=”text/javascript”>

google.load(“feeds”, “1″);

function initialize() {
var feed = new google.feeds.Feed(“http://www.digg.com/rss/index.xml”);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById(“feed”);
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement(“div”);
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);

</script>
</head>
<body>
<div id=”feed”></div>
</body>
</html>

となっています。

ですが、私は複数のRSSを読み込みたかったので、調べているうちに『The FeedControl』を見つけました。
そのサンプルが下記です。

<html>
<head>
<script type=”text/javascript” src=”http://www.google.com/jsapi?key=”YOUR-KEY”></script>
<script type=”text/javascript”>

google.load(“feeds”, “1″);

function initialize() {
var feedControl = new google.feeds.FeedControl();
feedControl.addFeed(“http://www.digg.com/rss/index.xml”, “Digg”);
feedControl.addFeed(“http://feeds.feedburner.com/Techcrunch”, “TechCrunch”);
feedControl.draw(document.getElementById(“feedControl”));
}
google.setOnLoadCallback(initialize);

</script>
</head>

<body>
<div id=”feedControl”>Loading</div>
</body>
</html>

備忘録で記載しているだけなので、細かくは書きませんが、
「addFeed(“RSS”,”タイトル”)」を複数書く事で追加するコトができ、id=”feedControl”にその結果が表示されると言うもの。
この状態だと、サイトが二つ縦に並ぶだけなのですが・・・・

feedControl.draw(document.getElementById(“feedControl”));
}
google.setOnLoadCallback(initialize);
</script>
</head>

この部分を

feedControl.draw(document.getElementById(“feedControl”),
{
drawMode : google.feeds.FeedControl.DRAW_MODE_TABBED //タブモード
});
}
google.setOnLoadCallback(initialize);
</script>
</head>

こうする事でタブモードに切り替わり、かなり見栄えが変わります。
※デフォルトはDRAW_MODE_LINEAR

勿論、RSSの件数もリンクのターゲットも変えることができます。

feedControl.draw(document.getElementById(“feedControl”);
feedControl.setNumEntries(5); //エントリーの総数
feedControl.setLinkTarget(google.feeds.LINK_TARGET_BLANK);　//リンクのターゲット

CSSでイロイロ制御が出来るみたいなのですが、それは次回。

]]> http://retoucher.jp/archives/36/feed 0