昨日 Google Feed API が停止した事件があり、ウェブ制作者の方々はその対応に追われ、各地で阿鼻叫喚と大混乱が起きていました。

一夜明けて、現時点で Google Feed API が復旧しているようですね。
しかしまたいつ廃止されるかもわからない状況なので、今のうちに対策をしておいたほうが安心です。

……というワケで。
昨日の記事の続きです。

外部ドメインのRSSをjQueryで読込／出力するには？

昨日紹介したやり方ではクロスドメイン問題を解決していないため別ドメインのRSSは読み込み不可能でした。

そもそもクロスドメインとは？

「クロスドメイン」とは、一般的には『異なるドメインを跨いで通信すること』を指します。

セキュリティの関係で ajax では同一ドメインのファイルとしか通信できない制限があります。

この制限のことを「クロスドメイン問題」や「クロスドメイン制約」と呼びます。
ブラウザ側で実装されている機能なので、サーバー側（制作者サイド）では越えられない壁です。

もちろんクロスドメイン問題を迂回してajax通信を行う『JSONP』などの手法もありますが、やはりセキュリティの問題があるので初心者には敷居が高め。

他にjQueryライブラリの［jquery.xdomainajax.js］というプラグインもあります。
しかしこちらは内部のプログラムが Yahoo API のサービスに依存しているため、やはり今回は使いたくありません。

そこで、一度受け皿としてPHPでRSSを取得して、その後で jQuery を使って情報を扱う、という手法を用いることにしました。

「外部ドメインのRSSが読み込めないなら内部ドメインのRSSとして処理してしまえ！」という単純な発想かつ強行突破的な解決策です。

クロスドメイン対応版：外部RSSを読込／表示する方法

以下、外部サイトのRSS情報を「PHPで取得」して「jQueryで表示」させる方法を紹介します。

PHPファイルを用意する

まずは外部ドメインのRSSを取得するための、受け皿となるPHPファイルを用意します。

ここでは適当に『rss.php』と名付けましょう。

記述するコードは次のとおりです。

<?php
$url = "http://example.com/feed";
$xml = file_get_contents($url);
header("Content-type: application/xml; charset=UTF-8");
print $xml;
?>

最初の行で取得したいRSSのURLを指定しています。
ここでは「http://example.com/feed」とありますが、任意のURLに書き換えてください。

XMLの情報を処理するスクリプトファイルを用意する

次にJavaScriptのファイルを用意します。
こちらは『rss.js』と名付けます。

中身のコードは昨日紹介したものとほとんど同じです。

$(function() {
	$.ajax({
		url: 'rss.php',
		xmlType: 'xml',
		success: function(xml) {
			var row = 0;
			var data = [];
			var nodeName;
			var output = $('#rss');
// start item 成形
			$(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++;
			});
// end item 成形
			output.wrapInner('<ul></ul>');
			for (i in data) {			
				output.find('ul').append('<li><a href="' + data[i].link.text + '">' + data[i].title.text + '</a>' + data[i].description.text + '</li>');
				// console.log (data[i]);
			}
        }
    });
});

書き換えが必要な箇所は２点。
コードの最初の方で「url」を指定します。上記では『rss.php』と記述されている箇所で、前項で作ったPHPファイルのパスを指定してください。
変数「var output」で『#rss』と記述がある箇所ではHTML側でフィードの情報を表示させる要素を指定します。

なお取得するXMLの書式によってプログラムを書き換える必要があります。
ちなみによく問題になるのが「content:encoded」の取得方法ですが、これは上記コード内では(data[i]["content:encoded"]).textで取得可能です。

表示させるHTMLファイルを用意する

最後にHTML側で上記スクリプトを読み込めば準備完了です。

head内で『jQuery本体』と共に『rss.js』を設置。

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script src='rss.js'>

body内、フィードを表示させたい箇所には、前述のとおりid="rss"を指定します。

<body>
<h1>RSSフィード表示サンプル</h1>
<div id="rss"></div>
</body>

各ファイルの準備ができたらサーバーにアップロードします。
なお上記のパスの指定の場合、各ファイルは同一ディレクトリ内に配置することになりますね。

http://example.com
	├ index.php
	├ rss.php
	├ rss.js

これでHTMLの <div id="rss"></div> の箇所に外部サイトのRSS情報が表示されるようになります。

まとめ

これまで過去に紹介したRSS読込／表示の方法をまとめました。
合わせてご覧ください。

以上。
ウェブ制作者の皆様のお役に立てれば幸いです。