jQueryを利用した同一カテゴリーリスト表示

jQueryを利用した同一カテゴリーリスト表示

| 2016年06月29日(水) |

0 |

今まで当ブログでは
Serene Bachのプラグイン
「同一カテゴリーエントリー出力プラグイン」を利用して
プラグイン表示

同一カテゴリーの最新記事を表示させていました。

参考リンク
同一カテゴリーエントリー出力プラグイン(Serene Bach用) - The blog of H.Fujimoto

これはこれで統一感もあって気に入っていたんですけど…

このプラグインは別の用途で使いたいと思いまして。。
（成功したら記事にします。。）
別の方法で同一カテゴリー表示を実現させるべく模索してみました。。

まず白羽の矢が立ったのが
Google AJAX Feed APIを使用してRSSフィードを表示させる方法です。。

カテゴリー別ＲＳＳを使用する事で最新リストが表示させる事が可能になるのでは？？
っつ～事で、

参考リンク
Google AJAX Feed APIでRSSフィードを表示｜Webpark

こちらのサイトさんを参考にして表示させてみました。。

リスト自体は無事に表示されましたが…

Google AJAX Feed APIで表示

う～ん。。なんともイマイチな感じです。。

css使ってカスタマイズ出来るかな？
と試みましたが…
どうにもうまくいかず。。

しかも表示が重いというか遅いんで
今までのプラグインと比べちゃうと
頑張ってカスタマイズしてまで取付けるまでもないかな？？

と、途方に暮れていたところに。。

jQueryを利用したRSS表示が可能だという事で

参考リンク
【jQuery】緊急案件：Google Feed API が廃止になっているので代替案を紹介します。 - ONZE

こちらのサイトさんを参考に…

こんなスクリプトコードを書き込んでみました。。

<script>
$.ajax({
	url: '{site_top}sb.cgi?feed=rss&cid={category_id}',
	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>

赤文字の部分に表示させたいカテゴリー別RSSのURLを記入します。。
※Serene Bachの独自タグ{site_top}（サイトトップURL）と
{category_id}(カテゴリーID)を使用しています。
※既にjQueryが導入済みの前提です。。

あとは表示させたい位置に