ActiveDesktop_05

Last-modified: 2014-08-16 (土) 12:41:50 (2116d)

ActiveDesktop_04

RSSリーダーを作成する

05_01.png

構成

microsoft.XMLDOMオブジェクトを用いてRSSフィードを取得・パースするスクリプトを作成し、include/ フォルダ以下に置きます。

フィードは複数登録し、どれを取得・表示するかはランダムで決定させることとします。

フィードのリストは、今回はスクリプト上部に直接記入(ハードコーディング)することにします(外部ファイルにするのが好ましいですが)。

スクリプトファイルの作成

rss01.js

document.write("<DIV id=\"rss01\"></DIV>\n");

var aryUrl = new Array(
	"http://rss.itmedia.co.jp/rss/1.0/news_bursts.xml",
	"http://rss.itmedia.co.jp/rss/1.0/plusd.xml",
	"http://www.atmarkit.co.jp/rss/rss2dc.xml",
	"http://www.nikkeibp.co.jp/news/flash/index.rdf",
	"http://feed.japan.cnet.com/rss/news/index.rdf",
	"http://www.excite.co.jp/News/xml/rss_excite_news_odd_index_utf_8.dcg"
);

var xmlDom = new ActiveXObject("microsoft.XMLDOM");

function getRss(){
	var strOut = ""; //HTMLソース格納用
	
	var r = Math.floor(Math.random()*aryUrl.length);
	var url = aryUrl[r];
	
	xmlDom.async=false;
	if(!xmlDom.load(url)){
		alert("取得エラー\n"+url);
		return;
	}
	
	try{
		var rdfTitle = xmlDom.documentElement.selectSingleNode('/rdf:RDF/channel/title').text;
		var rdfLink = xmlDom.documentElement.selectSingleNode('/rdf:RDF/channel/link').text;
		strOut += "<H1 id=\"header\"><A href=\""+rdfLink+"\" target=\"_BLANK\">"+rdfTitle+"</A></H1>\n";
		
		var aryItem = xmlDom.documentElement.selectNodes('/rdf:RDF/item');
		
		strOut += "<UL>\n";
		for(i=0;i<aryItem.length;i++){
			if(aryItem[i].selectSingleNode("description")){
				strDescription = aryItem[i].selectSingleNode("description").text;
				strDescription = strDescription.replace(/<a [\s\S]*/gim,"");
				strDescription = strDescription.replace(/<img [\s\S]*/gim,"");
				strDescription = strDescription.replace(/<\/*\w+[\w\d\s\'\"\/\&\:\=_\-\?\r\n\;]*>/gim,""); //*/
				strDescription = strDescription.replace(/</gmi,"&lt;");
				strDescription = strDescription.replace(/>/gmi,"&gt;");
				strDescription = strDescription.replace(/\"/gmi,"\'"); //'
			}else{
				strDescription = "";
			}
			
			strOut += "<LI><A href=\""+aryItem[i].selectSingleNode("link").text+"\" target=\"_BLANK\" "+
			"title=\""+strDescription+"\">"+aryItem[i].selectSingleNode("title").text + "</A></LI>\n";
		}
		strOut += "</UL>\n";
		document.getElementById("rss01").innerHTML=strOut;
	}catch(e){
		alert("RSS解析失敗\n"+url);
	}
	return;
}

getRss();

index.html

<HTML>
<HEAD>
<LINK rel="stylesheet" href="default.css" />
</HEAD>
<BODY>
<SCRIPT src="include/rss01.js"></SCRIPT>
<DIV id="icons">
<IMG src="include/feed.ico.png" onClick="getRss();" title="RSSを更新" />
</DIV>
</BODY>
</HTML>

default.css

/****************************
rss_01
****************************/
#rss01{
	font-size:75%;
	text-align:left;
	}
#rss01 H1{
	font-size:100%;
	margin-bottom:5px;
	}

/****************************
icons
****************************/
#icons{
	position:absolute;
	top:20;
	right:20px;
	}

動作サンプル

動作サンプル

  • IE(Trident)でないと正常表示できません
  • インターネット上で動作させる場合、「アクセスが拒否されました」と表示され適切に動作できないようです。ファイルをローカルハードディスクに保存すれば動作させることができます。