- ホーム
- ＞ javascript
- ＞ javascriptを使って外部RSSを表示させる
javascriptを使って外部RSSを表示させる
ホームページにブログのRSSを表示させる必要があったのでその覚え書きです。
WordPressを使っている場合はPHPを使って実現できるのですが、今回依頼があったクライアントさんはhtmlで運用しているサイト。
そこでphpではなくてjavasrctiptで表示させる方法を検討しました。
いくつか調べましたがGoogleが提供している「Google AJAX feed API」を使うのが一番効率が良さそうに感じたので、これを使うことに。
手順は次の通り
１．GoogleでAPIキーを所得
まずはGoogleからAPIキーを所得するページへ行きます。
http://code.google.com/intl/ja/apis/loader/signup.html
Googleアカウントを所得していない場合はまずそちらを所得してくださいね。
上記ページでRSSを表示させたいサイトのURLを入力して「Generate API key」をクリック。
そうすると下図のようにAPIキーを所得できます。暗号みたいなヤツです。
このキーを使うことで指定したドメイン内でのみAPIを使うことができるようになります。もし複数のドメインで使う場合は、各ドメイン毎にキーを所得する必要があります。
２．RSSを所得するコードを実装する
javasrcipt初心者なのでソースコードは下記のサイトのものを参考、というかほぼそのまま流用させていただきました。
JavascriptのみでRSSを表示するby“Google AJAX Feed API”｜ぞえぞえねっと
ただし、javascriptは外部に置きたかったので<head>〜</head>タグ内に
[html]<script src="https://www.google.com/jsapi?key=所得したkey" type="text/javascript"></script>
<script type="text/javascript" src="外部jsファイルへのパス">[/html]
を忘れずにいれておき、外部jsファイルは次のソースを使用。
[html]// JavaScript Document
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("http://ezyri-fumiyu.blog.ocn.ne.jp/toshi/atom.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 dd = new Date(entry.publishedDate); // now
var yearNum = dd.getYear();
if (yearNum < 2000) yearNum += 1900;
var date = ‘<li>’ + yearNum + "年"+(dd.getMonth()+1)+"月"+dd.getDate()+"日 ";
container.innerHTML += " " + date +"<br /><a href=’" + entry.link + "’ title=’" + entry.title + "’>" + entry.title + "</a></li>";
}
}
});
}
google.setOnLoadCallback(initialize);[/html]
最後に<body>〜</body>内の外部RSSを表示させたい場所に
[html]<ul id="feed">
</ul>[/html]
と記入すればOKです。
これで、日付と記事タイトルが4つ表示されるようになります。お試しあれ！
コメント
この記事へのコメントはありません。
コメントをどうぞ