2016/08に公開
クロスドメインのhtmlファイルなどを抽出できるjquery.xdomainajax.jsを使ってRSS Feedを埋め込む方法をご紹介します。
ここでは割愛しますが、このようなプラグインを使わずにphpなどを使って実現する方法もありますので、興味がありましたら調べてみてください。
jquery.xdomainajax.jsはjqueryのプラグインなので、jQueryライブラリが読み込まれていることが前提です。
ちなみに以前はGoogle Feed APIを紹介しておりましたが、 2016/09/29に終了するそうです(参考:Google Feed API 提供終了のお知らせ - Google Developers Japan)。
2016/08現在は表示されていると思いますが、いずれ表示されなくなると思われますので早めの対処をお勧めします。
サンプルとしてITmedia「ねとらぼ」のフィードを表示しています。
<ul id="rss"></ul>
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
RSSフィードを表示させる親タグをhtmlに設置します。タグはulに限りません。適当なid名やclass名をつけておくと処理しやすいと思います。
cssについては、適宜設定してください。
$(document).ready(function(){
$.ajax({
url: 'RSSフィードのURL',
dataType: 'xml',
type: 'GET',
success: function(res) {
var xmlText = res['responseText'];
var xmlDoc = $.parseXML(xmlText);
console.log(res);
var listdata='';
var c = 0;
$(xmlDoc).find('item').each(function(){
var text=$(this).text();
var url=$(this).attr('about');
var date=$(this).find('date').text();
text=text.substring(0,text.indexOf('http'));
listdata+='※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。