JavaScript標準機能でRSSを解析する

2024-04-07

jQueryを使ってRSSを解析する

RSSは、ブログやニュースサイトなどの更新情報を配信するためのフォーマットです。jQueryを使ってRSSを解析することで、サイトの最新情報を取得して、Webページに表示することができます。

必要なもの

jQueryライブラリ
RSSフィードのURL

手順

jQueryライブラリを読み込みます。
$.get()メソッドを使って、RSSフィードを取得します。
取得したデータを変換して、必要な情報を抽出します。
抽出した情報をHTMLに表示します。

// jQueryライブラリの読み込み
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

// RSSフィードのURL
var feedUrl = "https://example.com/rss.xml";

// RSSフィードの取得
$.get(feedUrl, function(data) {

  // XMLデータの解析
  var xml = $(data);

  // アイテムのループ処理
  xml.find("item").each(function() {

    // タイトルの取得
    var title = $(this).find("title").text();

    // リンクの取得
    var link = $(this).find("link").text();

    // 公開日の取得
    var pubDate = $(this).find("pubDate").text();

    // HTMLの出力
    $("#rss-list").append(
      "<li><a href='" + link + "'>" + title + "</a> (" + pubDate + ")</li>"
    );
  });
});

解説

$.get()メソッドは、サーバーからデータを取得するためのメソッドです。
xml変数には、取得したXMLデータが格納されます。
find()メソッドは、XMLデータから指定の要素を検索するためのメソッドです。
each()メソッドは、要素をループ処理するためのメソッドです。

応用

複数のRSSフィードをまとめて表示する
特定のキーワードを含む記事のみを表示する
記事のサムネイル画像を表示する

注意

RSSフィードのフォーマットはサイトによって異なる場合があります。
取得したデータは安全に処理する必要があります。

// jQueryライブラリの読み込み
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

// RSSフィードのURL
var feedUrl = "https://example.com/rss.xml";

// RSSフィードの取得
$.get(feedUrl, function(data) {

  // XMLデータの解析
  var xml = $(data);

  // アイテムのループ処理
  xml.find("item").each(function() {

    // タイトルの取得
    var title = $(this).find("title").text();

    // リンクの取得
    var link = $(this).find("link").text();

    // 公開日の取得
    var pubDate = $(this).find("pubDate").text();

    // HTMLの出力
    $("#rss-list").append(
      "<li><a href='" + link + "'>" + title + "</a> (" + pubDate + ")</li>"
    );
  });
});

このコードを実行するには、以下の準備が必要です。

HTMLファイル

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>RSSリーダー</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <ul id="rss-list"></ul>
</body>
</html>

実行方法

HTMLファイルをブラウザで開きます。
コンソールを開きます。
サンプルコードをコンソールに貼り付けます。
Enterキーを押します。

結果

RSSフィードのタイトル、リンク、公開日がリスト形式で表示されます。

jQuery以外でRSSを解析する方法

JavaScript標準機能を使って、RSSを解析することができます。

// XMLHttpRequestオブジェクトの作成
var xhr = new XMLHttpRequest();

// リクエストの設定
xhr.open("GET", feedUrl);
xhr.setRequestHeader("Content-Type", "application/xml");

// リクエストの送信
xhr.send();

// リクエストの完了時
xhr.onload = function() {

  // XMLデータの解析
  var xml = xhr.responseXML;

  // アイテムのループ処理
  for (var i = 0; i < xml.getElementsByTagName("item").length; i++) {

    // タイトルの取得
    var title = xml.getElementsByTagName("title")[i].textContent;

    // リンクの取得
    var link = xml.getElementsByTagName("link")[i].textContent;

    // 公開日の取得
    var pubDate = xml.getElementsByTagName("pubDate")[i].textContent;

    // ...

  }
};

ライブラリ

RSSを解析するためのライブラリもいくつかあります。

これらのライブラリを使うと、より簡単にRSSを解析することができます。

PHPを使って、RSSを解析することもできます。

<?php

// RSSフィードのURL
$feedUrl = "https://example.com/rss.xml";

// SimpleXMLオブジェクトの作成
$xml = simplexml_load_file($feedUrl);

// アイテムのループ処理
foreach ($xml->channel->item as $item) {

  // タイトルの取得
  $title = $item->title;

  // リンクの取得
  $link = $item->link;

  // 公開日の取得
  $pubDate = $item->pubDate;

  // ...

}

?>