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

関連記事

monacaでWebサイトをアプリ化

monacaを使ってWebサイトをアプリ化するための叩き台としてのメモです。 Webサイトのア

記事を読む

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

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

記事を読む

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

Twitterボタンをブログやサイトに設置するとき読み込みに時間がかかってしまって困るといったことや

記事を読む

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

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

記事を読む

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

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

記事を読む

チェスボード画像自動生成ツール

1マスのサイズ(ピクセル) マスの数× 左上が白 枠をつけるか 枠の色白黒

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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 ↑