JQueryを使用したRSS取得方法
どうもWEBデザイナーのあさみです！
サイト制作でRSSを用いた構成をした際に忘れてしまっていたので復習と覚書の為に…
以前はGoogle Feed APIを使用して構成する事が多かったのですが、Google Feed APIが2015年4月20日にサポート終了で廃止になりました。
そこで、JQUERYを使用してRSSを取得する方法に変更
下記サイトに分かりやすく記載されています。
jQuery + PHP】クロスドメイン対応版：Google Feed API の代替案を紹介します
RSSでも日付取得にはRSS1.0のdc:dateとRSS2.0のpubDateがあります。
まずは、pubDateのコードから
記事日付取得【pubDate】
$(function() {
$.ajax({
url: '../rss.php',
xmlType: 'xml',
success: function(xml) {
var row = 0;
var data = [];
var nodeName;
var output = $('#rss');
// start item 成形
$(xml).find('item').each(function() {
data[row] = {};
$(this).children().each(function() { // 子要素を取得
nodeName = $(this)[0].nodeName; // 要素名
data[row][nodeName] = {}; // 初期化
attributes = $(this)[0].attributes;
for (var i in attributes) {
data[row][nodeName][attributes[i].name] = attributes[i].value; // 属性名 = 値
}
data[row][nodeName]['text'] = $(this).text();
});
row++;
});
// end item 成形
output.wrapInner('
');
for (i in data) {
output.find('dl').append('
' + data[i].pubDate.text + '
' + data[i].title.text + '
');
// console.log (data[i]);
}
}
});
});
記事日付取得【dc:date】
$(function() {
$.ajax({
url: '../rss.php',
xmlType: 'xml',
timeout: 5000,
cache: false,
success: function(xml) {
var row = 0;
var data = [];
var nodeName;
var setNum = 5; //表示件数
var output = $('#rss');
// start item 成形
$(xml).find('item').each(function() {
data[row] = {};
$(this).children().each(function() {
nodeName = $(this)[0].nodeName;
data[row][nodeName] = {};
attributes = $(this)[0].attributes;
for (var i in attributes) {
data[row][nodeName][attributes[i].name] = attributes[i].value;
}
data[row][nodeName]['text'] = $(this).text();
$(this).find('date, dc\\:date').each(function() {
var pubtime = $(this).text();
pubtime = new Date(pubtime);
data[row].pubDate = date.replace(/(\d+-\d+-\d+)T(\d+:\d+).+/,function(a,b,c) {
return b.replace(/-/g, '/') + ' ' + c;
});// 2017/01/11 13:51 のフォーマットにする
});
});
row++;
});
// end item 成形
output.wrapInner('
');
for (i in data) {
output.find('div').append('
- ' + data[i].pubDate + '
- ' + data[i].title.text + '
');
// console.log (data[i]);
}
}
});
});
あるサイト制作では、dc:date取得にかなり手子摺りました。
御存知の通り、他のJSプラグイン等の相性があります。
ERRORを吐き出すので試行錯誤して色々なコードを試しました。
ここに記載しているコードも参考程度に…
どんだけサイト制作をしていてもJSの相性があるので日々勉強です。
人間ですから、使わなかったら忘れますよね…（笑）
私はかなり忘れますｗ
正直、Javascriptは苦手です^^;
制作してるのに…って感じですよね(・・;)
すみません＞＜
pubDateのように
data[i].pubDate.textと記載したら
.textでERRORがでました。
data[i].pubDateに書き換えるためには下記コード
$(this).find('date, dc\\:date').each(function() {
var pubtime = $(this).text();
pubtime = new Date(pubtime);
data[row].pubDate = date.replace(/(\d+-\d+-\d+)T(\d+:\d+).+/,function(a,b,c) {
return b.replace(/-/g, '/') + ' ' + c;
});// 2017/01/11 13:51 のフォーマットにする
});
それではまた(^_^)/~
