ほぼコピペでOK!PHPとjQueryを使って外部サイトのRSSフィードを取得・表示する方法

ほぼコピペでOK!PHPとjQueryを使って外部サイトのRSSフィードを取得・表示する方法

ほぼコピペでOK!PHPとjQueryを使って外部サイトのRSSフィードを取得・表示する方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

  • 広告主様募集中
    ワンコインで広告掲載してみませんか?
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

PHPとjQueryを使って、外部サイトのRSSフィードを取得・表示する方法をご紹介いたします。RSSフィードのURL以外は、コピペで実装することができます。

スポンサードリンク

PHPとjQueryを使って外部サイトのRSSフィードを取得・表示する方法

下記の内容は、ONZEさんの記事で紹介されていた方法を参考にしています。ONZEさんの記事では、フィードのタイトルのみを表示していましたが、当記事では日付も取得して表示する方法をご紹介いたします。

PHPファイルの用意

まずは、フィードURLを指定するためのPHPファイルを用意します。ファイル名はrss.phpとします。

rss.php
<?php
$url = "https://techmemo.biz/feed/";
$xml = file_get_contents($url);
header("Content-type: application/xml; charset=UTF-8");
print $xml;
?>

「https://techmemo.biz/feed/」の部分が、取得するRSSフィードのURLになりますので、適宜変更してください。

JSファイルの用意

続いて、スクリプトファイルを用意します。ファイル名はrss.jsとします。

rss.js
$(function() {
$.ajax({
url: 'rss.php',
xmlType: 'xml',
success: function(xml) {
var row = 0;
var data = [];
var nodeName;
var output = $('#rss');
$(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++;
});
output.wrapInner('<ul></ul>');
for (i in data) {
var date = new Date(data[i].pubDate.text);
var strdate = date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日';
output.find('ul').append('<li><span class="rss-date">' + strdate + '</span><a href="' + data[i].link.text + '">' + data[i].title.text + '</a>' + '</li>');
//console.log (data[i]);
}
}
});
});

rss.jsの内容は、コピペでOKです。

rss.phpとrss.jsは、同じ階層に保存します。

HTMLファイルの用意

最後に、RSSを表示するためのHTMLファイルを用意します。

index.html
<div id="rss"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="rss.js"></script>

HTML内で、jQuery本体とrss.jsを呼び出します。

「<div id=”rss”></div>」を記述している箇所にRSSが表示されます。

あとがき

上記では、rss.php・rss.js・index.htmlそれぞれが同階層に保存されている場合を想定していますので、保存場所を変えたい場合は、パスを指定している箇所を変更するようにしてください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。