3

現在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モデルを用いて表現したいと考えています。
それに当たり何点か問題に直面し現在非常に困っている状態です。

  1. 上のプログラムで表示している情報をJSON形式のファイルに変換し、d3.jsに読み込むことは可能でしょうか?
  2. 上記のプログラムではRSS上にある画像情報をサムネイルに設定するようにプログラムされていますが、参照しているRSSにはサムネイル情報がありません。linkに格納されているURLの記事にある画像をサムネイルとして取得するにはどうすればよいでしょうか?

開発環境はEclipseで、HTMLとJavaScriptを利用しようとしています。
私自身このプログラムが初めて1からの作成となるため非常に至らない点が多いと思います。よろしければお力をお貸し下さい。よろしくお願いします。

1 件の回答 1

2

2、上記のプログラムではRSS上にある画像情報をサムネイルに設定するようにプログラムされていますが、参照しているRSSにはサムネイル情報がありません。linkに格納されているurlの記事にある画像をサムネイルとして取得するにはどうすればよいでしょうか?

Google News だけに限って言いますと、

http://news.google.com/news?hl=ja&ned=us&ie=UTF-8&oe=UTF-8&output=rss&topic=h

サムネイルは以下の様に埋め込まれています(一部省略)。

<img xmlns="http://www.w3.org/1999/xhtml" width="80" border="1"
     height="80" alt=""
     src="//t3.gstatic.com/images?q=tbn:ANd9GcQ_hY6_-..." />

src 属性に指定されている、スキーマのない URL がサムネイルに相当します。ですので、以下の様にします。

var imgCheck = entry.content.match(/<img.+?src=\"\/\/(.+?\/images\?q=.+?)\"/);
if(imgCheck){
 eimg += "http://" + imgCheck[1];
} else {
 eimg += "http://design-ec.com/d/e_others_50/l_e_others_500.png"; 
}

一方、Yahoo! ニュース・トピックスの RSS にはサムネイルの URL が記録されていません。そのため、個々のトピックスの URL にアクセスして、サムネイルを取得する処理を追加する必要があります。

って書きましたけど、JavaScript には HTTP access control (CORS) がありますので、

For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. For example, XMLHttpRequest follows the same-origin policy. So, a web application using XMLHttpRequest could only make HTTP requests to its own domain. To improve web applications, developers asked browser vendors to allow XMLHttpRequest to make cross-domain requests.

JavaScript のみで対応するのは困難で、例えばサービスサーバ側でサムネイル取得用の CGI などを用意する必要があるのではないかと思います。

1
  • hata様 返信が遅くなってしまい申し訳ありません。ご丁寧な解説ありがとうございました。 さっそく取り入れて作成し直してみようと思います!ありがとうございました!
    – dadada
    2015年11月11日 9:29

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。