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

関連記事

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

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

記事を読む

javascriptにおけるfor文の書き方

1. for文とは ある条件が正しいときに処理を繰り返すというループを記述するための文です。 似

記事を読む

【javascript】RSSを読み込んで表示させる【Google Feed API】

jQueryで簡単にRSSフィードを表示させる方法としてGoogleFeedAPIを利用するというの

記事を読む

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

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

記事を読む

【jQuery UI】タブの初期状態を選択するとエラーがでて失敗する

jQuery UIでタブをプログラム側から選択させるには以下のようなコードを書けばいい…といったこと

記事を読む

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

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

記事を読む

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

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

記事を読む

【javascript】正規表現文字置換簡易ツール

jQueryで作成した正規表現による文字抽出用スクリプトです。 (使い方) 「正規表

記事を読む

スクレイピングをサポートしてくれるAPI【kimono】

kimonoというスクレイピングをAPI化してくれるという素晴らしいサービスがあります。

記事を読む

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

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。 下記2点の設定が必要です。

記事を読む

NVIDIA DIGITSをSupervisorを使って自動起動する

はじめに 先日Ubuntu14.04にDIGITS 5をGPUなしP

【2017年度】GeForce 1080 Ti搭載BTOパソコン比較

はじめに 最近ディープラーニング用にGPUのないPCにDIGITSを

Windows用のシンプルなストップウォッチソフト紹介

Windows(10)でも使える使いやすいKAZAMITimerという

MNISTをDIGITS 5のCPUのみで試す(GPUなし)

はじめに DIGITSを使えばGUI操作で簡単にディープラーニングが

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

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

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

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

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

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

→もっと見る

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