ニコニコ動画のRSSをjavascriptで読み込んで表示させる

公開日: : 最終更新日:2014/08/14 JavaScript/jQuery, RSS, ニコニコ動画

スポンサーリンク

ニコニコ動画のランキングRSSをjQueryで読み込んで表示するプログラムを作成しました。RSSの読み込みにはGoogleFeedAPIを利用して、取得した情報をもとにjQueryで多少成形して要素に追加していきます。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
</script>
<script type="text/javascript">
var readFeed = function(feedurl,selector,maxlength){
	function initialize(){
		var feed = new google.feeds.Feed(feedurl);
		feed.setNumEntries(maxlength);
		feed.load(function(result) {
			if (!result.error) {
				var dst = $("<div>");
				for (var i = 0; i < result.feed.entries.length; i++) {
					var entry = result.feed.entries[i];
					var title = entry.title;
					var link = entry.link;
					var content = entry.content;
					//正規表現でタイトル修正(ランキングの場合冒頭に「第○位」が出るのでそれを消す)
					var m2 = title.match(/第[0-9]+位:(.+)/i);
					if(m2!=null){
						title = m2[1];
					}
					//正規表現で画像取得(拡張子が付いていないので注意)
					var m = content.match(/\<img([^\>]*)src=\"?([\-_\.\!\~\*\'\(\)a-z0-9\;\/\?\:@&=\+\$\,\
																   %\#]+)\"?(.+)\>/i);
																   var imgsrc = '<a href="'+ link +'" target="_blank">'+m[0]+'</a><span
					class="title"><a href="'+ link +'" target="_blank">'+title+'</a></span>';
						//画像を置換して別々に分ける
						var contents0 = content.replace(m[0],"");
					//整形して要素に入れる
					var buf = $("<div>").addClass("nicowrap").addClass("clearfix");
					var msg = $("<div>").append(contents0);
					var desc = msg.find("p:eq(1)").addClass("nicomsg");	//投稿者コメント
					var thumb = $("<div>").addClass("nicothumb").append(imgsrc);
					buf.append(thumb).append(desc);
					dst.append(buf);
				}
				$(selector).append(dst);
			}
		});
	}
	google.setOnLoadCallback(initialize);
}
readFeed("http://www.nicovideo.jp/ranking/fav/daily/all?rss=2.0&lang=ja-jp","#feedtest",20);

CSSについて

化物語 壁紙

スポンサーリンク
Amazon
  • このエントリーをはてなブックマークに追加

関連記事

consoledirimg

【javascript/jQuery】JSON形式のデータの表示確認をする

PHPであれば「var_dump」や「print_r」などでJSON形式のデータの中身が思い通りの者

記事を読む

nc23924

ニコニコ動画の外部プレイヤーを動的に設置する【javascript/jQuery】

ニコニコ動画の外部プレイヤーはページのはじめの読み込みのときにしか表示されず、javascriptで

記事を読む

Color Picker

【javascript】RGB⇔カラーコード変換ライブラリ

RGBをカラーコードに変換、または、カラーコードをRGBに変換したい場合が出てきたのでどういうも

記事を読む

farbtasticimage

jQueryのカラーピッカーライブラリFarbtastic Color Pickerを使う

.farbtastic .wheel { background: url(http://mem

記事を読む

PAK23_husentomemo20140313500-thumb-500xauto-4376

【javascript】privateのメソッドからpublicなメンバを呼ぶ

javascriptでのクラス定義 javascriptではいわゆる正確なクラスは作れませんが、そ

記事を読む

RSS-Icon-Image

AmazonのランキングRSSから画像リンクを作る

Amazon RSS Amazonでいい感じのRSSが無いかと探していたのですが実は本家に素晴らし

記事を読む

jquery-icon

jQueryで要素にappendとafterを使って追加する

jqueryのappendは要素の末尾に指定要素を追加し、afterは要素の後に指定要素を加えます。

記事を読む

61m2fdbtoTL._AA180_

ニコニコ動画の検索APIについて調べたのでメモ

ニコニコ動画にはAPIがあり、動画の情報(タイトルとか再生数とか)を取得したり、ランキング情報(RS

記事を読む

nc23924

ニコニコ動画のユーザーおよびマイリストのRSSフィード

ニコニコ動画のユーザーページのRSSフィードおよびマイリストのRSSフィードは次のようになっています

記事を読む

aatextimg

【ImgToAA】画像をAA化するツール

指定の画像を読み込ませてAA化するツールです。サンプルはこちら。 (使い方) 画像ファイ

記事を読む

encodingtype
【PHP】headerでContent-Typeを指定したのに効かない場合の対処法

PHPでサイトマップを作ろうと思い、XML形式のファイルを出力しようと

_rtm0919_tp_v
スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。

rssimage
【PHP】特定のURLからそのAtomやRSSのフィードを抽出する方法

特定のURLからRSSやATOMのフィードを抽出する方法をメモ。 流

rssimage
フィード抽出ツール(RSS1.0、RSS2.0、atom)

任意URL サイト名 サイトURL RSS1.0

computer_server
格安プラン限定レンタルサーバー機能比較表(2016年)

はじめに  最近新しい共用サーバーをレンタルしようと思い調査およびそ

school_toshokan_hondana
kindle unlimitedが便利だったのでお勧めの使い方など感想メモ

 kindle unlimitedというサービスが8/3からAmazo

TAKEBE055122558_TP_V
寝る前にスマホを見ると斜視になる可能性とその対策

はじめに  寝る前などスマホを横になりながら見続けると斜視になる可能

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑