2017.01.19 Thu

「Google Feed API」が廃止、、、PHPでの代替案のご紹介!

Business concept, businessman working laptop.  Worldwide connection technology interface. Global Strategy Virtual Icon.Innovation Graphs Interface.

皆さん、こんにちは。前田です。
公開されているwebサイトで「Google Feed API」を利用して外部サイトの記事を呼び出しているサイトは多々あります。そんな中、2016年9月29日に「Google Feed API」のサービスが終了いたしました。弊社でも「Google Feed API」を利用をしているサイトが存在しましたので代替案を調査致しましたのでこちらに記していこうと思います。

1.PHPファイルを用意する


最初の手順としては外部ドメインの記事を取得するためにの元となるPHPファイルを用意します。下記のコードをphpファイルに記述をしてください。

一行目で読み込む記事のURLを取得しています。ここでは「https://www.genius-web.co.jp/blog/feed」になっていますが、こちらは該当のサイトのURLに変更をしてください。
※URLの末尾に「feed」と記入して表示がされるのは記事のあるページが対象なので記事があるページを指定するようにしてください。

$url = "https://www.genius-web.co.jp/blog/feed";
$xml = file_get_contents($url);
header("Content-type: application/xml; charset=UTF-8");
print $xml;

2.javascriptのファイルを用意する


次の手段としては、XMLの情報を処理するスクリプトファイルを用意をします。

基本的には下記のソースをそのまま使えば動きますが二点修正が必要な点があります、コメントアウトでphpファイル名とある部分を自分の作成したファイル名に変更をします。phpの存在するパスが違う場合は該当のパスに変更します。「var output」で「#rss」と記述がある箇所ではHTMLでフィードの情報を表示させる要素を指定します。呼び出すIDが違う場合はこちらのID名を変更しましょう。

$(function() {
	$.ajax({
		url: 'rss.php', //phpファイル名
		xmlType: 'xml',
		success: function(xml) {
			var maxPost = 4; // 記事の表示件数
            		var j = 0;
            		var row = 0;
            		var data = [];
            		var nodeName;
			var output = $('#rss'); //呼び出すID名
// 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('
    '); for (i in data) { if (j < maxPost) { output.find('ul').append('
  • ' + data[i].title.text + '' + '
  • '); // console.log (data[i]); } j++; } } }); });

    3.処理の実行をするHTMLを用意する


    最後の手順はHTMLファイル内で読み込む手順があります。
    head内で『jQuery本体』と共に『rss.js』を設置。
    body内のフィードを表示したい場所に下記を指定します。

    4.サーバーにアップロード


    1.2.3の手順が全て完了したら、各ファイルの準備ができたらサーバーにアップロードします。
    上記の方法のやり方ですと全て同ディレクトリに表示することになりますが、こちらのファイル構成は自分の環境に合わせて指定しましょう。

    まとめ


    今回は「Google Feed API」の代替え案をご紹介いたしました。「Google Feed API」が急に廃止になったので読み込んでいたページが表示されなくなってしまって困っている方がいらっしゃると思いますので、今回ご紹介した方法をぜひ試してみてください。

    WRITERこの記事を書いた人

    前田 文哉

    Web業界に入って3年になります前田です。 ジーニアスウェブのコーディングを主に行っております。

    Web業界に入って3年になります前田です。 ジーニアスウェブのコーディングを主に行っております。

    CATEGORY

    Genius Web in Japan コーポレートサイト

    FREE DOWNLOAD

    顧客獲得に成功した24社の成功事例を1冊にまとめました。
    顧客獲得にお困りの方も、そうでない方も、一度お読みいただくことをお勧めします。

    MORE VIEW

    CATEGORY