ニコニコ動画の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
  • このエントリーをはてなブックマークに追加

関連記事

【jQuery UI】タブをクリックしたときのイベントでselectが使えない

jQuery UIは1.10のバージョンではタブをクリックしたときのイベントの名前が変わっているよう

記事を読む

【3DCG・MMD】カメラレンズによる見え方シミュレータ作成について

カメラのレンズが違うことでどのくらい出来上がる写真に差が出てくるのかを確かめることのできるシミュレー

記事を読む

ニコニコ動画やYoutubeのRSSフィードもサムネ付きで手軽に表示できるブログパーツ

通常サイトのRSSだけでなく、ニコニコ動画やYoutubeの動画サイトのRSSを読み込んでサムネ画像

記事を読む

jThree.jsやThree.jsでcanvasの画面をキャプチャして画像にする方法

WebGLのライブラリであるThree.jsやそのラッパーライブラリのjThree.jsでcanva

記事を読む

【jQuery/javascript】はてなボタンを動的に設置する

はてなブックマークのボタンをページの読み込みが終わった後にjavascript(jQuery)で追加

記事を読む

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

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

記事を読む

【Javascript】1つまたは複数のランダムな値を取得する

#shuffle1btn,#shuffle2btn{ padding: 4px 6px; }

記事を読む

WordPressの記事内でJavaScriptを動かす

WordPressでは厄介なことにJavaScriptが動かない場合があります。この記事では動かない

記事を読む

MMDなどの3Dモデルが閲覧・共有できるニコニ立体が面白い

いよいよニコニ立体のサービスが開始されました。色々な3D作品が既にたくさん投稿されています。

記事を読む

【jQuery】クリックイベントでマウスホイールクリックを検知する

$("a").click(function(){ … }); によりクリックイベントを関連付け

記事を読む

Windowsユーザが初めてMacBookを購入したときの注意点や感想

最近12インチのMacBookを購入しました。今までWindowsしか

Redmine3.2をUbuntu14.04にインストールして躓いた所についてメモ

はじめに Ubuntu14.04 ServerにRedmine3.2

UWSCを使ったソフト自動立ち上げ【SoftEther VPN Server】

やりたいこと 最近SoftEtherという筑波大学発のベンチャー企業

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

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

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

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

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

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

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

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

→もっと見る

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