| BBS | COMMENT | TRACKBACK | CATEGORY | LINKS | ARCHIVE | GALLERY |
TOTAL PV
jQueryを利用した同一カテゴリーリスト表示
あとで読むはてなブックマーク - jQueryを利用した同一カテゴリーリスト表示 | 2016年06月29日(水) | 0 | 0 | 記事編集
今まで当ブログでは
Serene Bachのプラグイン
「同一カテゴリーエントリー出力プラグイン」を利用して
プラグイン表示
同一カテゴリーの最新記事を表示させていました。
参考リンク
同一カテゴリーエントリー出力プラグイン(Serene Bach用) - The blog of H.Fujimoto

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



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

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

カテゴリー別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が導入済みの前提です。。


あとは表示させたい位置に
<div id="rss"></div>
と書いてあげればOKです。。


んで、どんな風に表示されたかというと。。


jQueryで表示
おお♪

まさしく理想通りの形です(^▽^


表示もストレスない速さなんで…非常に満足です♪



っつ〜事で、これで心置きなくプラグインを他で活用出来そうです(^▽^

2016/08/05追記

このリストに
はてなブックマークの被ブックマーク数を表示させてみました。
参考リンク
「○○users」を表示する(Serene Bach用) | ひいろんBLOG
2016年06月29日(水) 19:13 | ネット > 改造メモ | 0 | 0 | 記事編集
  • 0

  • 0

  • 0

  • 0

  • 0
  • 0
  • コメント[0]
  • Facebookコメント[]
  • はてブコメント[]
  • Twitter[]

まだこの記事へのコメントはありません。

コメントする

icons:

 
トラックバック

まだこの記事へのトラックバックはありません。

ランキング参加中:応援(クリック)よろしくお願いします
  ブログランキング・にほんブログ村へ ブログ王ランキングに参加中! .*:゚(・ω・人)゚:*.
【ネット > 改造メモ】の最新記事
FaceBookページ応援よろしくおねがいします〜(^▽^
  • SEOブログパーツ
ひいろん
  • 【ひいろん】
  • 性別:おっさん
  • 住所:静岡県
  • 愛車:RX-8