PHP - AJAX RSS Feed Example

こんにちは、若いプログラマーたち！今日は、PHP、AJAX、そしてRSSフィードの世界に楽しい冒険をすることになります。これらの用語が今はアルファベットスープのように聞こえるかもしれませんが、このチュートリアルの終わりまでには、プロのようにこれらを弄ぶことができるようになるでしょう！さあ、飛び込んでみましょう！

Really Simple Syndication (RSS)

コードを書き始める前に、RSSとは何についているのかを理解しましょう。

RSSは「Really Simple Syndication」の略で、インターネットのニュース配信サービスのようです。あなたがお気に入りのニュースサイトを持っていて、毎日新しい記事をチェックするために訪れるのが面倒臭いとします。その時、RSSが役立ちます！

RSSフィードは、ウェブサイトが最新のコンテンツを標準化された形式で公開するための特別なファイルです。この形式により、他のプログラム（RSSリーダーと呼ばれるもの）が簡単に複数のウェブサイトからの最新の更新を取得して表示することができます。

プロジェクト：RSSフィードリーダーの構築

今日は、PHPとAJAXを使ってシンプルなRSSフィードリーダーを構築します。私たちのプロジェクトには主に2つの部分があります：

フィードを表示し、AJAXコードを含むHTMLページ（index.html）。
RSSフィードを取得しパースするPHPスクリプト（rss.php）。

まずはHTMLページから始めましょう。

Index.html

以下は私たちのindex.htmlファイルのコードです：

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RSS Feed Reader</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#getFeed").click(function(){
$.ajax({
url: "rss.php",
type: "GET",
dataType: "json",
success: function(data){
var html = "<ul>";
$.each(data, function(index, item){
html += "<li><a href='" + item.link + "'>" + item.title + "</a></li>";
});
html += "</ul>";
$("#feedContent").html(html);
},
error: function(){
$("#feedContent").html("フィードの取得中にエラーが発生しました。");
}
});
});
});
</script>
</head>
<body>
<h1>私のRSSフィードリーダー</h1>
<button id="getFeed">最新フィードを取得</button>
<div id="feedContent"></div>
</body>
</html>

これを分解してみましょう：

基本的なHTML構造から始めます。
<head>セクションにjQueryをインクルードし、AJAX呼び出しを簡単にするためのものです。
ドキュメントが準備されたら実行されるスクリプトがあります。それは「最新フィードを取得」ボタンにクリックイベントをアタッチします。
ボタンがクリックされたとき、AJAX呼び出しを行い、PHPスクリプト（rss.php）にリクエストを送信します。
呼び出しが成功した場合、フィードデータからリンクの無秩序リストを作成し、feedContentdivに表示します。
エラーが発生した場合、エラーメッセージを表示します。

rss.php

次に、RSSフィードを取得しパースするためのPHPスクリプトを作成しましょう：

<?php
// クロスオリジンリクエストを許可
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

// RSSフィードのURL
$feedUrl = "http://rss.cnn.com/rss/edition.rss";

// 新しいDOMDocumentオブジェクトを作成
$xmlDoc = new DOMDocument();

// RSSフィードを読み込む
$xmlDoc->load($feedUrl);

// すべての<item>要素を取得
$items = $xmlDoc->getElementsByTagName('item');

$feed = array();

// 各<item>をループ
foreach ($items as $item) {
$title = $item->getElementsByTagName('title')->item(0)->nodeValue;
$link = $item->getElementsByTagName('link')->item(0)->nodeValue;

// このアイテムをフィード配列に追加
$feed[] = array(
'title' => $title,
'link' => $link
);
}

// フィードをJSONとして出力
echo json_encode($feed);
?>

このPHPスクリプトを分解しましょう：

クロスオリジンリクエストを許可するヘッダーを設定し、JSON形式で出力するようにします。
RSSフィードのURLを定義します（ここではCNNのトップストーリー）。
新しいDOMDocumentオブジェクトを作成し、RSSフィードを読み込みます。
<item>要素をすべて取得します（各<item>は1つのストーリーや記事を表します）。
各アイテムをループし、タイトルとリンクを抽出してフィード配列に追加します。
最後に、フィード配列をJSONとしてエンコードし、出力します。

すべてがどのように動作するか

index.htmlをブラウザで開くと、「最新フィードを取得」ボタンが表示されます。このボタンをクリックすると：

index.htmlのJavaScriptがAJAX呼び出しを行い、rss.phpにリクエストを送信します。
rss.phpがRSSフィードを取得し、パースしてJSONデータを返します。
JavaScriptがこのJSONデータを受け取り、ページ上にリンクのリストを作成します。

それで、簡単なRSSフィードリーダーが完成しました！

使用したメソッド

以下は、このプロジェクトで使用した主要なメソッドの表です：

メソッド	説明
$.ajax()	jQueryメソッドでAJAXリクエストを行います
$.each()	jQueryメソッドで配列またはオブジェクトを反復します
DOMDocument::load()	PHPメソッドでXMLをファイルまたはURLから読み込みます
getElementsByTagName()	PHPメソッドでタグ名に基づいて要素を取得します
json_encode()	PHP関数で値をJSON形式にエンコードします

覚えておいてください、プログラミングは練習と実験の積み重ねです。このコードを修正したり、異なるRSSフィードを試してみたり、新しい機能を追加したりする恐れはありません。それを弄ぶことで、どのようにすべてが組み合わさっているかをよりよく理解することができます。

未来のテクニカルウィザードたち、楽しいコーディングを！

Credits: Image by storyset

前のチュートリアル:

PHP - AJAXオートコンプリート検索

次のチュートリアル:

PHP - XMLの紹介