ニュースappメモ (Google Feed APIを使用してRSSを読み込む)

2014年10月11日

ニュースappメモ (Google Feed APIを使用してRSSを読み込む) 比較

ニュースappメモ (Google Feed APIを使用してRSSを読み込む)

国際( Japan World on Huffington Post Japan )
の「http://www.huffingtonpost.jp/news/japan-world/feed/」を使った「2つの表現」です。

(1) 表現
(2) プログラム(スクリプト)の確認
どっちが 好みかな?

参考 サイト
上の技術

下の技術
///// Feed表示

/////
国際
Japan World on Huffington Post Japan
Powered by RSSリスティング

/////
上の例
/////
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load("feeds", "1");
 
function initialize() {
    var feedurl = "http://www.huffingtonpost.jp/news/japan-world/feed/";  // FeedのURL
    var feed = new google.feeds.Feed(feedurl);
    feed.setNumEntries(10);                  //表示させる件数
    feed.load(function (result){
 
        if (result.error){
            alert(result.error.code + ":" + result.error.message);
            return;
        }
 
        htmlstr = "";
        htmlstr += '<h1><a href="' + result.feed.link + '">' + result.feed.title + '</a></h1>';
        htmlstr += '<p>説明 :' + result.feed.description + '</p>';
        htmlstr += '<p>作成者 :' + result.feed.author + '</p>';
 
        for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
 
            htmlstr += '<h2><a href="' + entry.link + '">' + entry.title + '</a></h2>';
            htmlstr += '<p>' + entry.contentSnippet + '</p>';
            htmlstr += '<p>日付 :' + entry.publishedDate + '</p>';
            htmlstr += '<p>カテゴリ :';
            for (var j = 0; j < entry.categories.length; j++) {
                htmlstr += '[' + entry.categories[j] + ']';
            }
            htmlstr += '</p>';
        }
 
            document.getElementById("feed").innerHTML = htmlstr;
    });
}
google.setOnLoadCallback(initialize);
</script>
Feed表示
<hr>
<div  id="feed"></div>
<hr>
//////
下の例
////// 
国際
Japan World on Huffington Post Japan
<script type="text/javascript" src="http://rss.tc/feed/RssReader.aspx?url=http%3a%2f%2fwww.huffingtonpost.jp%2fnews%2fjapan-world%2ffeed%2f&displayRow=15&dispTitle=1&dispTime=0&id=20140913164236&target=_top&sbm=0&skin=Green"></script><div style="font-size: 75%; text-align: right; line-height:200%;">Powered by <a href="http://rss.tc/" target="_top"><img src="http://rss.tc/images/rsstcicon.gif" alt="RSSリスティング" style="border:0; width:80px; height:15px;vertical-align: middle;" /></a></div>

////// 
参考 サイト
上の技術

下の技術
//////
上の2つ以外の「シンプル」形式 例

最近の「気になる国際ニュース」
//////
Google Feed API +画像 の可能性
/////
画像入りのRSSの例
/////
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load("feeds", "1");

function initialize() {
    //フィードの取得
    var feed = new google.feeds.Feed("http://rss.allabout.co.jp/aa/latest/ch/mobile/");

    //エントリの表示数の設定
    feed.setNumEntries(10);

    //関数の定義
    feed.load(function(result) {
        if (!result.error) {
            //読み込みが成功したときの処理
            var container = document.getElementById("feed");
            var htmlstr = "";
            for (var i = 0; i < result.feed.entries.length; i++) {

                var entry = result.feed.entries[i];

                //日付の取得
                var pdate = new Date(entry.publishedDate); //Dateクラス
                var pyear = pdate.getFullYear();   //年
                var pmonth = pdate.getMonth() + 1; //月
                var pday = pdate.getDate();        //日

                //日付を2桁表示に変更
                if (pyear < 2000) pyear += 1900;
                if (pmonth < 10) {pmonth = "0" + pmonth;}
                if (pday < 10) {pday = "0" + pday;}

                var date = pyear + "." + pmonth + "." + pday + " ";

                //画像の取得
                imgsrc = entry.content.match(/src="(.*?)"/igm);

                //html生成
                htmlstr += '<li><a href="' + entry.link + '">';
                htmlstr += '<div class="thum"><img ' + imgsrc + ' width="95" height="75"></div>';
                htmlstr += '<p class="info">' + date + '| ' + entry.categories[0] + '</p>';
                htmlstr += '<p class="tit">' + entry.title + '</p></a></li>';
            }
            container.innerHTML = htmlstr;
        } else {
            //読み込みが失敗したときの処理
            alert(result.error.code + ":" + result.error.message);
        }
    });
}
google.setOnLoadCallback(initialize);
</script>



Feed表示
<hr>
<div  id="feed"></div>
<hr>


rikezyo00sumaho at 07:07|PermalinkComments(0)