【jQuery】緊急案件：Google Feed API が廃止になっているので代替案を紹介します。
Ads by Google
昨日、2015年12月2日未明より Google Feed API が403エラーを返すようになり、特にニュースサイトを中心とした各方面で混乱が発生しています。けっこう大変な事態のようですね。
未だ公式サイトでもアナウンスが無く、廃止になったのか否かもわからない状況です。
弊社のクライアント様でも『外部サイトのRSSフィードを読込→表示』しているサイトがいくつかありますが、もともと Google Feed API は使用せず、すべてPHPベースでプログラムを組んでいるので被害は皆無。
しかし困っている方々が大勢いらっしゃるようなので、ここで Google Feed API の代替となるテクニックを紹介していきます。
解決策はいたってシンプル。単にjQueryを利用してRSSの情報を取得して、任意のテンプレートに整形して出力させるだけ。
つまり基本的には Google Feed API のときとまったく同じ方法です。
以下、スクリプトのコードです。
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script>
$.ajax({
url: 'http://on-ze.com/feed',
type: 'get',
dataType: 'xml',
timeout: 5000,
success: function(xml, status) {
if (status === 'success') {
var row = 0;
var data = [];
var nodeName;
$(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++;
});
$('#rss').wrapInner('<ul></ul>');
for (i in data) {
$('#rss').find('ul').append('<li><a href="' + data[i].link.text + '">' + data[i].title.text + '</a></li>');
}
}
}
});
</script>
上記のコードをHTMLの適当な箇所で読み込みます。
出力される箇所は <div id="rss"></div> になっています。
こちらは <body> 要素内の任意の箇所に記述してください。
<body> <div id="rss"></div> </body>
実際に出力されているかどうか確認してみましょう。
下記リンク先にサンプルを用意しました。
jQuery RSS Feed : http://on-ze.com/demo/jquery-rss/
「jQueryではなくPHPを使った方法も知りたいよ〜！」という方は以下をご覧ください。
PHP版：コチラです。
さらにさらに。サイトを WordPress で構築しているならば、もっと簡単な方法もあります。
WordPress版：外部サイトのRSS情報を取得して表示させる方法。
今回は「jQuery版」の他に、「PHP版」と「WordPress版」の３つの解決策を紹介しました。
ぜひ参考にしてください。
こちらの記事もいかがですか？
アナタにオススメ！
同じカテゴリーの他の記事です。
- 【jQuery】壮大な宇宙をウェブページの背景に描く［Starfield］の使い方。
- 【jQuery】画像がスムーズに拡大縮小する動きが気持ちイイ［zoom.js］の使い方
- 【jQuery】iPhone や Android の反応速度向上のために「タッチイベント」を活用する方法。
- 【jQuery】ウィンドウ内に要素が表示されたときに処理を行う［jquery.inview］プラグイン。
- 【jQuery】超高機能ギャラリー［MixItUp］の使い方。
Ads by Google