RSSから取得した記事情報をd3.jsで表示したい
現在HTML,JavaScriptを用いてニュースサイトのRSSから新着記事の情報を取得し、それらの記事のサムネイルをd3.jsを用いてforceレイアウトで表示し、ノードに記事へのリンクを付けるプログラムを開発しようとしています。
現在個別に2つのRSSから新着記事を5つずつ取得し、表示するプログラムをネットの情報を参考に作りました。
<head>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("feeds", "1");
var FA = new Array(
"http://rss.dailynews.yahoo.co.jp/fc/rss.xml",
"http://news.google.com/news?hl=ja&ned=us&ie=UTF-8&oe=UTF-8&output=rss&topic=h"
);
function initialize() {
var feedsArr = new Array();
var numEntr = 5;
var container = document.getElementById("feed");
var cnt = FA.length;
for (var k=0; k<FA.length; k++) {
var feed = new google.feeds.Feed(FA[k]);
feed.setNumEntries(numEntr);
feed.setResultFormat(google.feeds.Feed.JSON_FORMAT); //JSONフォーマットに整形
feed.load(function(result) {
if (!result.error) {
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var eimg = "";
var imgCheck = entry.content.match(/(http:){1}[\S_-]+((\.png)|(\.jpg)|(\.JPG)|(\.gif))/);
if(imgCheck){
eimg += imgCheck[5];
} else {
eimg += "http://design-ec.com/d/e_others_50/l_e_others_500.png";
}
var attributes = ["title", "link", "publishedDate", "contentSnippet"];
var ind = feedsArr.length;
feedsArr[ind] = new Array();
feedsArr[ind][0] = Date.parse(entry[attributes[2]]);
feedsArr[ind][1] = entry[attributes[1]]; // link
feedsArr[ind][2] = entry[attributes[2]]; // publishedDate
feedsArr[ind][3] = entry[attributes[3]]; // contentSnippet
feedsArr[ind][4] = entry[attributes[0]]; // title
feedsArr[ind][5] = result.feed.title; // site title
feedsArr[ind][6] = eimg; // thumbnail
}
}
cnt--;
if (cnt == 0) {
feedsArr.sort();
feedsArr.reverse();
for (var j = 0; j < feedsArr.length; j++) {
var aE = document.createElement("A");
var h3 = document.createElement("H3");
var p = document.createElement("P");
var spanD = document.createElement("SPAN");
aE.href=aE.title=feedsArr[j][1];
aE.appendChild(document.createTextNode(feedsArr[j][4]));
h3.appendChild(aE);
spanD.appendChild(document.createTextNode(feedsArr[j][2]));
spanD.appendChild(document.createTextNode(" ("+feedsArr[j][5]+")"));
p.appendChild(document.createTextNode(feedsArr[j][3]));
p.appendChild(spanD);
container.appendChild(h3);
container.appendChild(p);
var img_link = document.createElement("img");
img_link.setAttribute("src", feedsArr[j][6] );
img_link.setAttribute("width", "100" );
container.appendChild(img_link);
}
}
});
}
}
google.setOnLoadCallback(initialize);
</script>
<body>
<div id ="feed"></div>
</body>
</head>
このプログラムを実行すると記事が表示されるのですが、これをforceモデルを用いて表現したいと考えています。
それに当たり何点か問題に直面し現在非常に困っている状態です。
- 上のプログラムで表示している情報をJSON形式のファイルに変換し、d3.jsに読み込むことは可能でしょうか?
- 上記のプログラムではRSS上にある画像情報をサムネイルに設定するようにプログラムされていますが、参照しているRSSにはサムネイル情報がありません。linkに格納されているURLの記事にある画像をサムネイルとして取得するにはどうすればよいでしょうか?
開発環境はEclipseで、HTMLとJavaScriptを利用しようとしています。
私自身このプログラムが初めて1からの作成となるため非常に至らない点が多いと思います。よろしければお力をお貸し下さい。よろしくお願いします。