どうも、yusei です。
今日は大晦日。Macの大掃除をしていて、Macにあっても邪魔だけどほしい時には便利なコードを見つけました。というわけで、ここに貼っておこうと思います。

表題にある通り、静的なウェブサイトで、JSを用いて「新着投稿」フィードを表示する方法です。　

準備するもの

投稿フィードに用いるRSSフィード
RSSフィードを取ってくるためのYQLクエリ
この後にかくJSコード
取得したフィードをそれっぽく見せるためのスタイルシート

コード

大まかな仕組み

(主語は全てブラウザ上のJSコード)

YQLにRSSのXMLをJSON化してもらう
YQLからJSONをもらってくる
JSONをパースしてHTMLのTableの形にする

本体


//Get JSON as text
function getJSONTxt(url){
    var xmlHttp;
    xmlHttp = new XMLHttpRequest();
    xmlHttp.open("GET", url, false);
    xmlHttp.send(null);

return(xmlHttp.responseText);
}

function getrss(queryTxt){


    var url="https://query.yahooapis.com/v1/public/yql?q="+encodeURI(queryTxt)+"&format=json&diagnostics=true&callback=";

    var json=JSON.parse(getJSONTxt(url));
    var srcF="";
    var src="";

    if(json.query.results!=null){

        for(var i=0; i<json.query.results.item.length; i++){

            var item=json.query.results.item[i];
            var date_p=new Date(item.pubDate);
            var WeekStr = [ "Sun.", "Mon.", "Tue.", "Wed.", "Thu.", "Fri.", "Sat." ] ;
            var categories="";

            for(var p=0;p<item.category.length;p++){
                categories+=item.category[p]+',';
            }

            src="<tr>";
            src+='<td>';
            src+='<h4><a href="'+ item.link + '">'+item.title +"</a></h4>";
            src+='<h6>'+ date_p.getFullYear() +' / '+       (date_p.getMonth()+1)+'/'+date_p.getDate()+ '　'+WeekStr[ date_p.getDay()]+'　　|　　'+categories+'</h6>';
            src+='<p>'+ item.description+'</p>';
            src+="</td>";
            src+="</tr>";
            srcF=src+srcF;
    }

        srcF="<table>"+srcF+"</table>";

    }else{
        srcF="<h3>** There are no posts.  : (  **</h3>";
}

return srcF;
}

使い方

YQLでここからクエリ文字列を作る。

(ちょまど氏のサイトを例に使わせていただきます。)

URLを書き換えてください。

select * from rss where url ='http://chomado.com/feed/'

2.getrss関数の第一引数にクエリ文字列を渡す。

var tbl_html= getrss("select * from rss where url ='http://chomado.com/feed/'");

//tbl_htmlにtableが入っている。

3.table文字列(HTMLのコードがstringで入ってます。)を、お好きな<div>のinnerHTMLに代入


var mydiv=document.getElementById("Div_elm");
mydiv.innerHtml= tbl_html

(4. tableには好きなCSSを当ててください。)

終わり。コメント歓迎です。
良いお年をお迎えください。

静的ウェブサイトで新着投稿画面を実装する

準備するもの

コード

大まかな仕組み

本体

使い方