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

どうも、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;
}


使い方


  1. 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を当ててください。)

終わり。コメント歓迎です。

良いお年をお迎えください。