[Google API] Google AJAX Feed APIによるRSSフィードの新着情報の表示

  CSS, HTML, javascript, WordPress , , ,

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
google feed api 新着情報 RSS

静的HTMLサイトにWordPressなどのRSSフィードを「Google AJAX Feed API」を用いて新着情報を表示させることで、記事を投稿するだけで新着情報に反映させることができます。そこで今回、静的HTMLであるチュートリアルサイトに、WordPressによる当ブログの新着情報を表示させる方法をご紹介したいと思います。

Google AJAX Feed APIによる静的HTMLへのRSSフィードの表示

google feed api 新着情報 RSS 実行結果
上の画像のように投稿日付とタイトルを静的HTMLに表示させたいと思います。まずRSSフィードによる新着情報を表示させたい場所に下記を記述してください。

<div id="feed">
	<p>フィードのロード中</p>
</div>

pタグ内のテキストはRSSフィールドを読み込んでいる最中に表示されるものです。

次に、下記にGoogle AJAX Feed APIを読み込み、動作のjavascriptの記述を示したいと思います。外部ファイルにして参照させてください。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// JavaScript Document
google.load("feeds", "1");

function initialize() {//initialize関数の定義
  var feedurl = 'http://buburinweb.wp.xdomain.jp/feed/';//RSSフィードのURLの定義

  var feed = new google.feeds.Feed("feedurl");
  feed.setNumEntries(5);//RSSフィードの表示数
  feed.load(dispfeed);

  function dispfeed(result){
    if (!result.error){
      var container = document.getElementById('feed');//divタグ内のid名と対応
      var htmlstr = '';//空の入れ物を用意

      htmlstr += '<ul>';//上書きではなく、入れ物に追加
      for (var i = 0; i < result.feed.entries.length; i++) {//RSSフィードの数だけ繰り返す
        var entry = result.feed.entries[i];//配列の定義
        var text = entry.contentSnippet.substr(0,100);
        htmlstr += '<li class=\"blog_list\">';//liタグへのクラスの設定
        htmlstr +=  createDateString(entry.publishedDate);//日付の追加
        htmlstr += '<a href=\"' + entry.link + '\">' + entry.title + '</a> ';//entry内のリンクとタイトルによるリンクの追加
        htmlstr += '</li>';
      }
      htmlstr += '</ul>';
      container.innerHTML = htmlstr;
    }else{//エラーの場合の処理
       alert(result.error.code + ':' + result.error.message);
    }
  }
}

//日付表記を変換、月と日の2桁表示
function createDateString(publishedDate){//publishedDateを受け取ったcreateDateString関数の定義
  var pdate = new Date(publishedDate);
  var pday = pdate.getDate();
	if (pday < 10) {pday = "0" + pday;}
  var pmonth = pdate.getMonth() + 1;
	if (pmonth < 10) {pmonth = "0" + pmonth;}
  var pyear = pdate.getFullYear();
  var strdate = pyear + "年" + pmonth + "月" + pday + "日" ;
  return strdate;
}
google.setOnLoadCallback(initialize);
</script>

次に、簡単なCSSによるデザインを記述します。

#feed {
	margin-bottom: 20px;
}
#feed li {/*文字列の省略*/
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis; /* Safari */
	-o-text-overflow: ellipsis; /* Opera */
	white-space: nowrap;
}
#feed li:last-child{
	border: none;
}
.blog_list {
	list-style: none;
	padding: 5px 10px;
	color: #000000;
        border-bottom: #000000 1px dashed;
}
.blog_list a {
	margin-left: 10px;
	text-decoration:none;
}
.blog_list a:hover{
	color:red;
}

新着情報へのNEWマークの表示

google feed api 新着情報 RSS NEWマーク 点滅表示
HTMLについては同様のものを用います。CSSにおいてanimationを用いてNEWマークの点滅表示させる記述を下記に示したいと思います。

#feed {
	margin-bottom: 20px;
}
#feed li {
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis; /* Safari */
	-o-text-overflow: ellipsis; /* Opera */
	white-space: nowrap;
}
#feed li:last-child {
	border: none;
}
.blog_list, .blog_list_old {/**/
	list-style: none;
	padding: 5px 10px;
	color: #000000;
	border-bottom: #000000 1px dashed;
}
.blog_list_old {/*NEWマークがないものを先頭揃え*/
	padding-left: 50px;
}
.blog_list a, .blog_list_old a {
	margin-left: 10px;
	text-decoration: none;
}
.blog_list a:hover, .blog_list_old a:hover {
	color: red;
}
.new-feed {/*NEWマークの点滅表示*/
	color: red;
	margin-right: 10px;
	-webkit-animation: switchtext 0.5s infinite alternate;
	-moz-animation: switchtext 0.5s infinite alternate;
	animation: switchtext 0.5s infinite alternate;
}
@-webkit-keyframes switchtext {
 from {
	opacity: 1.0;
}
to {
	opacity: 0;
}
}
@-moz-keyframes switchtext {
 from {
	opacity: 1.0;
}
to {
	opacity: 0;
}
}
@keyframes switchtext {
 from {
	opacity: 1.0;
}
to {
	opacity: 0;
}
}

次に、下記に投稿の日付によって判断させて、新着情報に一定の期間だけNEWマークを表示させるjavascriptの記述を示したいと思います。同様に外部ファイルにして参照させてください。

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript">
// JavaScript Document
google.load("feeds", "1");

function initialize() {
  var feedurl = 'http://buburinweb.wp.xdomain.jp/feed/';
  var feed = new google.feeds.Feed(feedurl);
  feed.setNumEntries(5);
  feed.load(dispfeed);

  function dispfeed(result){
    if (!result.error){
      var container = document.getElementById('feed');
      var htmlstr = '';
      var pastDay = 5;//何日数前までnewマークをつけるか指定
      var now = (new Date()).getTime();//現在の時間
      var pastTime = pastDay * 24 * 60 * 60 * 1000;//newマークをつける期間の時間

      htmlstr += '<ul>';
      for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];
        var text = entry.contentSnippet.substr(0,100);
        var entryTime = new Date(entry.publishedDate).getTime();//エントリーの時間
		//指定日数以内の場合
		if(now >= entryTime && now <= (entryTime + pastTime)){
			//newマークの追加
			htmlstr += '<li class=\"blog_list\"><span class="new-feed">new!</span>';
		}else{
			htmlstr += '<li class=\"blog_list_old\">';
		}
				
        htmlstr +=  createDateString(entry.publishedDate);
        htmlstr += '<a href=\"' + entry.link + '\">' + entry.title + '</a> ';
        htmlstr += '</li>';
      }
      htmlstr += '</ul>';

      container.innerHTML = htmlstr;
    }else{
       alert(result.error.code + ':' + result.error.message);
    }
  }
}

//日付表記を変換
function createDateString(publishedDate){
  var pdate = new Date(publishedDate);

  var pday = pdate.getDate();
	if (pday < 10) {pday = "0" + pday;}
  var pmonth = pdate.getMonth() + 1;
	if (pmonth < 10) {pmonth = "0" + pmonth;}
  var pyear = pdate.getFullYear();
  var strdate = pyear + "年" + pmonth + "月" + pday + "日" ;

  return strdate;
}
google.setOnLoadCallback(initialize);
</script>

NEWマークがついているものとついていないものをliタグのクラスを「blog_list・blog_list_old」というように別にして、先頭をそろえるようにしています。
実装の際には表示幅とタイトル量の関係で、表示の組み合わせを変えているため、「blog_list」クラスのみで記述を行いました。

google feed api 新着情報 RSS NEWマーク 点滅表示 静的サイト
実際に実装した静的HTMLであるぶぶりんのチュートリアルサイトをご覧ください。

GoogleにキャッシュさせずにRSSフィードを表示する方法

上記で述べてきた方法だけで記述すると、RSSフィード自体は取得することができる。しかし、Google Ajax Feed APIではキャッシュを用いているので表示速度を早く保つ代わりに更新が遅く、新着情報を表示するには支障をきたす。そこでGoogleにキャッシュさせず、常に新しい情報を取得する方法を下記に示したいと思います。

var feedurl = 'http://buburinweb.wp.xdomain.jp/feed/';
var feedurl = 'http://buburinweb.wp.xdomain.jp/feed/' + '?' + (new Date()).getTime();

取得するRSSフィードのURLにダミークエリを追加して強制的にキャッシュを更新させることで、ページを読み込む際に毎回RSSフィードを取得します。
これにより常に最新のRSSフィードを取得できるが、表示速度に影響を与える。しかし、ページ全体の表示速度ではなく、RSSフィード取得部分だけであるのでユーザーにとってのストレスはあまりないと考えていいのではないでしょうか。
気になる方であれば、ダミークエリの部分を時間単位や分単位にすればより表示速度への影響を軽減することができるのではないでしょうか。

参考サイト

参考にさせていただいたサイトを下記に示したいと思います。

SNSでもご購読できます。

コメントを残す

*