

現在HTML,JavaScriptを用いてニュースサイトのRSSから新着記事の情報を取得し、それらの記事のサムネイルをd3.jsを用いてforceレイアウトで表示し、ノードに記事へのリンクを付けるプログラムを開発しようとしています。

現在個別に２つのRSSから新着記事を５つずつ取得し、表示するプログラムをネットの情報を参考に作りました。

[code]

    <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>
[/code]

このプログラムを実行すると記事が表示されるのですが、これをforceモデルを用いて表現したいと考えています。  
それに当たり何点か問題に直面し現在非常に困っている状態です。

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

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


CC BY-SA 3.0
2015-11-08T04:02:13.103
18537
2015-11-08T12:41:22.110
2015-11-08T11:04:08.657
7290
13172
question
javascript json
RSSから取得した記事情報をd3.jsで表示したい


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

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

[code]

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

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

[code]

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

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

[code]

    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"; 
    }
    
[/code]

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

って書きましたけど、JavaScript には [HTTP access control
(CORS)](https://developer.mozilla.org/en-US/docs/Web/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 などを用意する必要があるのではないかと思います。


CC BY-SA 3.0
2015-11-08T08:06:15.867
18542
2015-11-08T12:41:22.110
2015-11-08T12:41:22.110
18537
answer