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

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

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

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

PHPファイルの用意

まずは、フィードURLを指定するための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とします。

$(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ファイルを用意します。

<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それぞれが同階層に保存されている場合を想定していますので、保存場所を変えたい場合は、パスを指定している箇所を変更するようにしてください。