jQueryを使用してRSSフィードを解析したいのですが。これは標準のjQueryライブラリですぐに実行できますか、それともプラグインを使用する必要がありますか?
jQueryを使用してRSSフィードを解析したいのですが。これは標準のjQueryライブラリですぐに実行できますか、それともプラグインを使用する必要がありますか?
回答:
警告
Google Feed APIは正式に非推奨になり、動作しなくなりました。
プラグイン全体は必要ありません。これは、RSSをJSONオブジェクトとしてコールバック関数に返します。
function parseRSS(url, callback) {
$.ajax({
url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
dataType: 'json',
success: function(data) {
callback(data.responseData.feed);
}
});
}
jFeed -jQuery RSS / Atomプラグインを使用します。ドキュメントによると、それは次のように簡単です:
jQuery.getFeed({
url: 'rss.xml',
success: function(feed) {
alert(feed.title);
}
});
後半の議論に参加する人のために、1.5から始まるjQueryには組み込みのXML解析機能があり、プラグインやサードパーティのサービスなしでこれを簡単に行うことができます。parseXml関数があり、$。get関数を使用するとxmlを自動解析します。例えば:
$.get(rssurl, function(data) {
var $xml = $(data);
$xml.find("item").each(function() {
var $this = $(this),
item = {
title: $this.find("title").text(),
link: $this.find("link").text(),
description: $this.find("description").text(),
pubDate: $this.find("pubDate").text(),
author: $this.find("author").text()
}
//Do something with item here...
});
});
$this.find("link").text()
常に空の文字列 ''を返すのですか?
アップデート(2019年10月15日)
コアロジックをjquery-rssから、Vanilla RSSと呼ばれる新しいライブラリに抽出しました。これは、フェッチAPIを使用しており、追加の依存関係なしで機能します。
const RSS = require('vanilla-rss');
const rss = new RSS(
document.querySelector("#your-div"),
"http://www.recruiter.com/feed/career.xml",
{
// options go here
}
);
rss.render().then(() => {
console.log('Everything is loaded and rendered');
});
元の
役職:
jquery-rssを使用することもできます。これには、優れたテンプレートが付属しており、非常に使いやすくなっています。
$("#your-div").rss("http://www.recruiter.com/feed/career.xml", {
limit: 3,
layoutTemplate: '<ul class="inline">{entries}</ul>',
entryTemplate: '<li><a href="{url}">[{author}@{date}] {title}</a><br/>{shortBodyPlain}</li>'
})
利回り(2013年9月18日現在):
<div id="your-div">
<ul class="inline">
<entries></entries>
</ul>
<ul class="inline">
<li><a href="http://www.recruiter.com/i/when-to-go-over-a-recruiter%e2%80%99s-head/">[@Tue, 10 Sep 2013 22:23:51 -0700] When to Go Over a Recruiter's Head</a><br>Job seekers tend to have a certain "fear" of recruiters and hiring managers, and I mean fear in the reverence and respect ...</li>
<li><a href="http://www.recruiter.com/i/the-perfect-job/">[@Tue, 10 Sep 2013 14:52:40 -0700] The Perfect Job</a><br>Having long ago dealt with the "perfect resume" namely God's, in a previous article of mine, it makes sense to consider the ...</li>
<li><a href="http://www.recruiter.com/i/unemployment-benefits-applications-remain-near-5-year-low-decline-again/">[@Mon, 09 Sep 2013 12:49:17 -0700] Unemployment Benefits Applications Remain Near 5-Year Low, Decline Again</a><br>As reported by the U.S. Department of Labor, the number of workers seeking unemployment benefits continued to sit near ...</li>
</ul>
</div>
実際の例については、http://jsfiddle.net/sdepold/ozq2dn9e/1/を参照してください。
moment.js
function getFeed(sender, uri) {
jQuery.getFeed({
url: 'proxy.php?url=' + uri,
success: function(feed) {
jQuery(sender).append('<h2>'
+ '<a href="'
+ feed.link
+ '">'
+ feed.title
+ '</a>'
+ '</h2>');
var html = '';
for(var i = 0; i < feed.items.length && i < 5; i++) {
var item = feed.items[i];
html += '<h3>'
+ '<a href="'
+ item.link
+ '">'
+ item.title
+ '</a>'
+ '</h3>';
html += '<div class="updated">'
+ item.updated
+ '</div>';
html += '<div>'
+ item.description
+ '</div>';
}
jQuery(sender).append(html);
}
});
}
<div id="getanewbrowser">
<script type="text/javascript">
getFeed($("#getanewbrowser"), 'http://feeds.feedburner.com/getanewbrowser')
</script>
</div>
RSSデータが非公開でない限り、Google AJAX Feed APIを使用してください。もちろん高速です。
UPDATE [ 2016年4月25日 ] GitHub.jQRSSでホストされるオプションと機能が追加された、より適切に記述され完全にサポートされたバージョン
Nathan StrutzによるSelected Answerを見ましたが、jQueryプラグインページのリンクはまだダウンしており、そのサイトのホームページはロードされていないようです。私は他のいくつかの解決策を試しましたが、それらのほとんどが古くなっているだけでなく、簡単であることがわかりました!したがって、私はそこに帽子を投げて自分のプラグインを作成しました。ここにデッドリンクがあり、これは回答を送信するのに最適な場所のようです。2012年(まもなくb 2013年)にこの回答を探している場合、私が行ったように、リンク切れや古いアドバイスの欲求不満に気付くでしょう。以下は私のモダンなプラグインの例へのリンクとプラグインのコードです!他のプラグインと同じように、コードをJSファイルにコピーしてヘッダーにリンクするだけです。使用は非常にEZです!
プラグインコード2
/9/2015-console
コマンドを送信する前にチェックするために長い期限切れの更新を行いました!古いIEの問題に役立つはずです。
(function($) {
if (!$.jQRSS) {
$.extend({
jQRSS: function(rss, options, func) {
if (arguments.length <= 0) return false;
var str, obj, fun;
for (i=0;i<arguments.length;i++) {
switch(typeof arguments[i]) {
case "string":
str = arguments[i];
break;
case "object":
obj = arguments[i];
break;
case "function":
fun = arguments[i];
break;
}
}
if (str == null || str == "") {
if (!obj['rss']) return false;
if (obj.rss == null || obj.rss == "") return false;
}
var o = $.extend(true, {}, $.jQRSS.defaults);
if (typeof obj == "object") {
if ($.jQRSS.methods.getObjLength(obj) > 0) {
o = $.extend(true, o, obj);
}
}
if (str != "" && !o.rss) o.rss = str;
o.rss = escape(o.rss);
var gURL = $.jQRSS.props.gURL
+ $.jQRSS.props.type
+ "?v=" + $.jQRSS.props.ver
+ "&q=" + o.rss
+ "&callback=" + $.jQRSS.props.callback;
var ajaxData = {
num: o.count,
output: o.output,
};
if (o.historical) ajaxData.scoring = $.jQRSS.props.scoring;
if (o.userip != null) ajaxData.scoring = o.userip;
$.ajax({
url: gURL,
beforeSend: function (jqXHR, settings) { if (window['console']) { console.log(new Array(30).join('-'), "REQUESTING RSS XML", new Array(30).join('-')); console.log({ ajaxData: ajaxData, ajaxRequest: settings.url, jqXHR: jqXHR, settings: settings, options: o }); console.log(new Array(80).join('-')); } },
dataType: o.output != "xml" ? "json" : "xml",
data: ajaxData,
type: "GET",
xhrFields: { withCredentials: true },
error: function (jqXHR, textStatus, errorThrown) { return new Array("ERROR", { jqXHR: jqXHR, textStatus: textStatus, errorThrown: errorThrown } ); },
success: function (data, textStatus, jqXHR) {
var f = data['responseData'] ? data.responseData['feed'] ? data.responseData.feed : null : null,
e = data['responseData'] ? data.responseData['feed'] ? data.responseData.feed['entries'] ? data.responseData.feed.entries : null : null : null
if (window['console']) {
console.log(new Array(30).join('-'), "SUCCESS", new Array(30).join('-'));
console.log({ data: data, textStatus: textStatus, jqXHR: jqXHR, feed: f, entries: e });
console.log(new Array(70).join('-'));
}
if (fun) {
return fun.call(this, data['responseData'] ? data.responseData['feed'] ? data.responseData.feed : data.responseData : null);
}
else {
return { data: data, textStatus: textStatus, jqXHR: jqXHR, feed: f, entries: e };
}
}
});
}
});
$.jQRSS.props = {
callback: "?",
gURL: "http://ajax.googleapis.com/ajax/services/feed/",
scoring: "h",
type: "load",
ver: "1.0"
};
$.jQRSS.methods = {
getObjLength: function(obj) {
if (typeof obj != "object") return -1;
var objLength = 0;
$.each(obj, function(k, v) { objLength++; })
return objLength;
}
};
$.jQRSS.defaults = {
count: "10", // max 100, -1 defaults 100
historical: false,
output: "json", // json, json_xml, xml
rss: null, // url OR search term like "Official Google Blog"
userip: null
};
}
})(jQuery);
使用する
// Param ORDER does not matter, however, you must have a link and a callback function
// link can be passed as "rss" in options
// $.jQRSS(linkORsearchString, callbackFunction, { options })
$.jQRSS('someUrl.xml', function(feed) { /* do work */ })
$.jQRSS(function(feed) { /* do work */ }, 'someUrl.xml', { count: 20 })
$.jQRSS('someUrl.xml', function(feed) { /* do work */ }, { count: 20 })
$.jQRSS({ count: 20, rss: 'someLink.xml' }, function(feed) { /* do work */ })
$ .jQRSS( 'リンクの代わりにここで単語を検索する'、function(feed){/ * do work * /})
// TODO:修正が必要
オプション
{
count: // default is 10; max is 100. Setting to -1 defaults to 100
historical: // default is false; a value of true instructs the system to return any additional historical entries that it might have in its cache.
output: // default is "json"; "json_xml" retuns json object with xmlString / "xml" returns the XML as String
rss: // simply an alternate place to put news feed link or search terms
userip: // as this uses Google API, I'll simply insert there comment on this:
/* Reference: https://developers.google.com/feed/v1/jsondevguide
This argument supplies the IP address of the end-user on
whose behalf the request is being made. Google is less
likely to mistake requests for abuse when they include
userip. In choosing to utilize this parameter, please be
sure that you're in compliance with any local laws,
including any laws relating to disclosure of personal
information being sent.
*/
}
(function(url, callback) {
jQuery.ajax({
url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
dataType: 'json',
success: function(data) {
callback(data.responseData.feed);
}
});
})('http://news.hitb.org/rss.xml', function(feed){ // Change to desired URL
var entries = feed.entries, feedList = '';
for (var i = 0; i < entries.length; i++) {
feedList +='<li><a href="' + entries[i].link + '">' + entries[i].title + '</a></li>';
}
jQuery('.feed > ul').append(feedList);
});
<div class="feed">
<h4>Hacker News</h4>
<ul></ul>
</div>
@Andrewに同意します。Googleを使用することは、XMLの代わりにJSONを取得するという大きな利点を備えた、確実で再利用可能な方法です。Googleをプロキシとして使用することの追加の利点は、データへの直接アクセスをブロックする可能性のあるサービスがGoogleを停止する可能性が低いことです。スキーレポートと状態データを使用した例を次に示します。これには、すべての一般的な実世界のアプリケーションがあります。1)サードパーティのRSS / XML 2)JSONP 3)希望どおりにデータを取得できない場合に配列への文字列と文字列をクリーニングする4)ロード時に要素を追加するDOM。これが一部の人々に役立つことを願っています!
<!-- Load RSS Through Google as JSON using jQuery -->
<script type="text/javascript">
function displaySkiReport (feedResponse) {
// Get ski report content strings
var itemString = feedResponse.entries[0].content;
var publishedDate = feedResponse.entries[0].publishedDate;
// Clean up strings manually as needed
itemString = itemString.replace("Primary: N/A", "Early Season Conditions");
publishedDate = publishedDate.substring(0,17);
// Parse ski report data from string
var itemsArray = itemString.split("/");
//Build Unordered List
var html = '<h2>' + feedResponse.entries[0].title + '</h2>';
html += '<ul>';
html += '<li>Skiing Status: ' + itemsArray[0] + '</li>';
// Last 48 Hours
html += '<li>' + itemsArray[1] + '</li>';
// Snow condition
html += '<li>' + itemsArray[2] + '</li>';
// Base depth
html += '<li>' + itemsArray[3] + '</li>';
html += '<li>Ski Report Date: ' + publishedDate + '</li>';
html += '</ul>';
$('body').append(html);
}
function parseRSS(url, callback) {
$.ajax({
url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
dataType: 'json',
success: function(data) {
callback(data.responseData.feed);
}
});
}
$(document).ready(function() {
// Ski report
parseRSS("http://www.onthesnow.com/michigan/boyne-highlands/snow.rss", displaySkiReport);
});
</script>
jFeedはやや時代遅れで、古いバージョンのjQueryでのみ機能します。更新してから2年になります。
zRSSFeedはおそらく柔軟性が少し劣りますが、使いやすく、現在のバージョンのjQuery(現在は1.4)で動作します。http://www.zazar.net/developers/zrssfeed/
以下は、zRSSFeedドキュメントの簡単な例です。
<div id="test"><div>
<script type="text/javascript">
$(document).ready(function () {
$('#test').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', {
limit: 5
});
});
</script>
私はフィードにyqlでjqueryを使用しています。yqlでtwitter、rss、buzzを取得できます。私はhttp://tutorialzine.com/2010/02/feed-widget-jquery-css-yql/から読みました。それは私にとって非常に便利です。
FeedEkを使用することをお勧めします。Google Feed APIが正式に廃止された後、ほとんどのプラグインは機能しません。しかしFeedEkはまだ機能しています。それは非常に使いやすく、カスタマイズする多くのオプションがあります。
$('#divRss').FeedEk({
FeedUrl:'http://jquery-plugins.net/rss'
});
オプション付き
$('#divRss').FeedEk({
FeedUrl:'http://jquery-plugins.net/rss',
MaxCount : 5,
ShowDesc : true,
ShowPubDate:true,
DescCharacterLimit:100,
TitleLinkTarget:'_blank',
DateFormat: 'MM/DD/YYYY',
DateFormatLang:'en'
});
<script type="text/javascript" src="./js/jquery/jquery.js"></script>
<script type="text/javascript" src="./js/jFeed/build/dist/jquery.jfeed.pack.js"></script>
<script type="text/javascript">
function loadFeed(){
$.getFeed({
url: 'url=http://sports.espn.go.com/espn/rss/news/',
success: function(feed) {
//Title
$('#result').append('<h2><a href="' + feed.link + '">' + feed.title + '</a>' + '</h2>');
//Unordered List
var html = '<ul>';
$(feed.items).each(function(){
var $item = $(this);
//trace( $item.attr("link") );
html += '<li>' +
'<h3><a href ="' + $item.attr("link") + '" target="_new">' +
$item.attr("title") + '</a></h3> ' +
'<p>' + $item.attr("description") + '</p>' +
// '<p>' + $item.attr("c:date") + '</p>' +
'</li>';
});
html += '</ul>';
$('#result').append(html);
}
});
}
</script>
グーグルによってキャッシュされたグーグルAjax APIとあなたが望むどんな出力フォーマットも使用してください。
コードサンプル。 http://code.google.com/apis/ajax/playground/#load_feed
<script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>
<script type="text/javascript">
/*
* How to load a feed via the Feeds API.
*/
google.load("feeds", "1");
// Our callback function, for when a feed is loaded.
function feedLoaded(result) {
if (!result.error) {
// Grab the container we will put the results into
var container = document.getElementById("content");
container.innerHTML = '';
// Loop through the feeds, putting the titles onto the page.
// Check out the result object for a list of properties returned in each entry.
// http://code.google.com/apis/ajaxfeeds/documentation/reference.html#JSON
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);
}
}
}
function OnLoad() {
// Create a feed instance that will grab Digg's feed.
var feed = new google.feeds.Feed("http://www.digg.com/rss/index.xml");
// Calling load sends the request off. It requires a callback function.
feed.load(feedLoaded);
}
google.setOnLoadCallback(OnLoad);
</script>
jQuery-rssプロジェクトはかなり軽量で、特定のスタイルを課しません。
構文は次のように単純にすることができます
$("#rss-feeds").rss("http://www.recruiter.com/feed/career.xml")
jQuery Feedsは優れたオプションであり、テンプレートシステムが組み込まれており、Google Feed APIを使用しているため、クロスドメインサポートがあります。
Superfeedrには、それをうまく行うjqueryプラグインがあります。クロスオリジンポリシーの問題は発生せず、更新はリアルタイムで伝播されます。
jFeedは簡単で、テストするための例があります。ただし、別のサーバーからのフィードを解析する場合は、フィードのサーバーでCross Origin Resource Sharing(CORS)を許可する必要があります。また、ブラウザのサポートも確認する必要があります。
サンプルをアップロードしましたが、例のURLをhttpプロトコルを介してexample.com/feed.rssのようなものに変更した場合、どのバージョンでもIEからサポートを受けられませんでした。CORSはIE 8以降でサポートされているはずですが、jFeedの例ではフィードがレンダリングされませんでした。
あなたの最善の策は、GoogleのAPIを使用することです:https :
//developers.google.com/feed/v1/devguide
参照:
https : //github.com/jfhovinne/jFeed
http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
http://en.wikipedia.org/wiki/Same_origin_policy
http://caniuse.com/cors