簡単！RSS（XML）を取得&表示させる方法 – jQuery + Google Feed APIを使用してFeedを表示させる方法
この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。
どうもこんばんは！Toshikuraです。今回のtipsは【簡単！RSSを取得&表示させる方法 – jQuery + Google Feed APIを使用してFeedを表示させる方法】です。最近ちょくちょく使ったのでメモしておこうかと思いました。
RSSの取得&表示について
一例ですがこの「RSSの取得&表示」は、書いているブログと異なったサイトに記事一覧を表示させる際に便利な方法です。通常ですとクロスドメインの制限で記事一覧を表示させるのは若干手間ですが【Google Feed API】を使う事で簡単にこの問題を回避できます。
RSS（XML）を取得&表示させる方法
前置きが長くなりましたがコード例は以下になります。
・JS
<script src="js/jquery-1.X.X.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feedurl = "https://zxcvbnmnbvcxz.com/feed/";
var feed = new google.feeds.Feed(feedurl);
feed.setNumEntries(10);
feed.load(function (result){
if (!result.error){
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var title = ‘<li><h3><a href="’ + entry.link + ‘">’ + entry.title + ‘</a></h3></li>’;
var conte = ‘<li>’ + entry.contentSnippet + ‘</li>’;
var dates = ‘<li>’ + entry.publishedDate + ‘</li>’;
$(‘#feed’).append(‘<li class="post"><ul>’ + title + conte + dates + ‘</ul></li>’);
}
}
});
}
google.setOnLoadCallback(initialize);
</script>
・HTML
<ul id="feed"></ul>
概要
分割して概要を説明していきたいと思います。まず下の画像のように投稿数やフィードのURLを指定する事で人気の記事一覧が取得可能です。取得できる内容にもいくつか種類があります。
取得できる情報について
取得できる情報の詳細に関してはGoogle Feed APIをご参照ください。
| プロパティ | 概要 |
| title | タイトル |
| link | URL |
| content | 本文 |
| contentSnippet | 概要 |
| publishedDate | 日付 |
| categories[] | カテゴリー |
投稿日時のフォーマット変更に関して
以上でフィードの取得と表示は可能ですが、このままですと投稿日時が【Thu, 10 Jan 2013 04:24:31 +0000】の用なフォーマットになる場合があります。これを任意のフォーマットに変更するには以下の記述で可能です。
<script src="js/jquery-1.X.X.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feedurl = "https://zxcvbnmnbvcxz.com/feed/";
var feed = new google.feeds.Feed(feedurl);
feed.setNumEntries(10);
feed.load(function (result){
if (!result.error){
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var title = ‘<li><h3><a href="’ + entry.link + ‘">’ + entry.title + ‘</a></h3></li>’;
var conte = ‘<li>’ + entry.contentSnippet + ‘</li>’;
var Dates = new Date(entry.publishedDate);
var Dday = Dates.getDate();
var Dmonth = Dates.getMonth() + 1;
var Dyear = Dates.getFullYear();
var Ddates = ‘<li>’ + Dyear +’.’+ Dday +’.’+ Dmonth + ‘</li>’;
$(‘#feed’).append(‘<li class="post"><ul>’ + title + conte + Ddates + ‘</ul></li>’);
}
}
});
}
google.setOnLoadCallback(initialize);
</script>
例では【2012.11.11】というフォーマットにしていますが、'<li>’ + Dyear +’.’+ Dday +’.’+ Dmonth + ‘</li>’;を変更していただければ任意のフォーマットへの指定が可能です。
以上になります。