[み]Google Feed APIでアンテナサイトを5分で作る方法

[み]Ingressが楽しすぎて、Wikiにつづいてアンテナサイトも作ったで紹介したアンテナサイト「Ingressアンテナ」は、Google Feed APIを使って5分で作ることができます!
Ingressアンテナ

今回はその作り方を紹介します。コードをコピペすれば、誰でも5分でアンテナサイトが作れますので、ぜひ作ってみてください。

基本のコード

こちらがコピペするコードです。Ingressアンテナには、AdSenseやらTwitterウィジェットやら余計なものがくっついていますので、それを省いたコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
//<![CDATA[
var getRssFeeds = function (_id, _urls, _maxLength) {
   if(!_id || !_urls || (!(_urls instanceof Array)))   return;
   var entryNum = 5;//各RSSの読み込みエントリー数
   var maxLength = (_maxLength)?   _maxLength : 0 ;
   //総エントリー表示数(0はすべて表示)
   //変数定義
   var entriesArray = new Array();
   var complete = 0;
   //初期化
   var init = function () {
       for(var i=0 ; i < _urls.length ; i++){
           //RSS読み込み
           var feed = new google.feeds.Feed(_urls[i]);
           feed.setNumEntries(entryNum);
           feed.load(function(result) {
               if (!result.error) {
                   for (var i = 0; i < result.feed.entries.length; i++) {
                       var entry = result.feed.entries[i];
                       entriesArray.push(entry);
                       var pdate = new Date(entry.publishedDate);
                       var arr = entriesArray[(entriesArray.length-1)];
                       arr.sortDate = pdate.getTime();
                       arr.siteTitle = result.feed.title;
                       arr.siteUrl = result.feed.link;
                   }
               }
               complete++;
               if(_urls.length == complete)    echo();
           });
       }
   };
   //表示
   var echo = function () {
       entriesArray.sort (function (b1, b2) { return b1.sortDate < b2.sortDate ? 1 : -1; } );//降順にソート
       var feedLength = (_maxLength)? _maxLength : entriesArray.length;
       var container = document.getElementById(_id);
       var html='<ul>';
       for (var i = 0; i < feedLength; i++) {
           var entry = entriesArray[i];
           var pdate = new Date(entry.publishedDate);
           var Y = pdate.getFullYear();
           var m = pdate.getMonth() + 1;
           m = (m < 10)? "0" + m:m;//月数字を2桁で表示
           var d = pdate.getDate();
           d = (d < 10)? "0" + d:d;//日数字を2桁で表示
           var date = Y + "年" + m + "月" + d + "日";
           html += '<li>';
           html += '<a href="' + entry.link + '">' + entry.title + '</a>';
           html += date + entry.siteTitle;
       }
       html += '</ul>';
       container.innerHTML += html;
   };
   google.setOnLoadCallback(init);
};
getRssFeeds("feeds", [ //ここに読み込みたいRSSを記述
   "http://ingressjp.blogspot.com/feeds/posts/default",
   "http://ingresswiki.wiki.fc2.com/index.rdf",
   "http://ingress.gamerch.com/rss/Atom",
   "http://ingress.wiki.fc2.com/index.rdf",
   "http://ingress.miha5.com/index.php?cmd=rss&ver=1.0",
   "http://rssc.dokoda.jp/r/30a614b87587278d9a2b59e82b17fd50/http/b.hatena.ne.jp/search/tag?q=Ingress"
]);
//]]>
</script>
</head>
<body>
<div id="feeds"></div>
</body>
</html>

これで、各RSSから5件ずつエントリーを拾ってきて表示できます。
→ Google Feed APIのデモ

あとは、class とかつけて CSS で見た目を整えればOKです。

投稿された時間まで表示したいとき

↑のコードでは、投稿日のみ表示して時間は表示しないようになっています。時間も表示したい場合は、次のコードを

var date = Y + "年" + m + "月" + d + "日";

と入れ替えてください。

hour = (hour < 10)? "0" + hour:hour;
var minute = pdate.getMinutes();
minute = (minute < 10)? "0" + minute:minute;
var date = Y + "年" + m + "月" + d + "日" + hour + ":" + minute;

↑このコードは時間も分も必ず2桁で表示するようにしています。でないと、たとえば1時6分が「1:6」のように何時だかわかりにくい表示になってしまいます。

はてブ数・ツイート数も表示したいとき

タイトルだけじゃ味気ないし、はてブ数とかツイート数とか表示したらもっとアンテナサイトっぽくなるよね!という方は、次のコードを追加してください。

<img src="http://b.hatena.ne.jp/entry/image/large/' + entry.link + '"> <img src="http://tools.tweetbuzz.jp/imgcount?url=' + entry.link + '">

時間まで表示して、はてブ数・ツイート数も表示するコード

基本のコードに加え、投稿された時間も表示し、はてブ数・ツイート数も表示するコードがこちらです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
//<![CDATA[
var getRssFeeds = function (_id, _urls, _maxLength) {
   if(!_id || !_urls || (!(_urls instanceof Array)))   return;
   var entryNum = 6;//各RSSの読み込みエントリー数
   var maxLength = (_maxLength)?   _maxLength : 0 ;
   //総エントリー表示数(0はすべて表示)
   //変数定義
   var entriesArray = new Array();
   var complete = 0;
   //初期化
   var init = function () {
       for(var i=0 ; i < _urls.length ; i++){
           //RSS読み込み
           var feed = new google.feeds.Feed(_urls[i]);
           feed.setNumEntries(entryNum);
           feed.load(function(result) {
               if (!result.error) {
                   for (var i = 0; i < result.feed.entries.length; i++) {
                       var entry = result.feed.entries[i];
                       entriesArray.push(entry);
                       var pdate = new Date(entry.publishedDate);
                       var arr = entriesArray[(entriesArray.length-1)];
                       arr.sortDate = pdate.getTime();
                       arr.siteTitle = result.feed.title;
                       arr.siteUrl = result.feed.link;
                   }
               }
               complete++;
               if(_urls.length == complete)    echo();
           });
       }
   };
   //表示
   var echo = function () {
       entriesArray.sort (function (b1, b2) { return b1.sortDate < b2.sortDate ? 1 : -1; } );//降順にソート
       //this.entriesArray.sort (function (b1, b2) { return b1.sortDate > b2.sortDate ? 1 : -1; } );//昇順にソート
       var feedLength = (_maxLength)? _maxLength : entriesArray.length;
       var container = document.getElementById(_id);
       var html='<ul>';
       for (var i = 0; i < feedLength; i++) {
           var entry = entriesArray[i];
           var pdate = new Date(entry.publishedDate);
           var Y = pdate.getFullYear();
           var m = pdate.getMonth() + 1;
           m = (m < 10)? "0" + m:m;//月数字を2桁で表示
           var d = pdate.getDate();
           d = (d < 10)? "0" + d:d;//日数字を2桁で表示
           var hour = pdate.getHours();
           hour = (hour < 10)? "0" + hour:hour;
           var minute = pdate.getMinutes();
           minute = (minute < 10)? "0" + minute:minute;
           var date = Y + "年" + m + "月" + d + "日" + hour + ":" + minute;
           html += '<li>';
           html += '<a href="' + entry.link + '">' + entry.title + '</a> <img src="http://b.hatena.ne.jp/entry/image/large/' + entry.link + '"> <img src="http://tools.tweetbuzz.jp/imgcount?url=' + entry.link + '">';
           html += date + entry.siteTitle;
       }
       html += '</ul>';
       container.innerHTML += html;
   };
   google.setOnLoadCallback(init);
};
getRssFeeds("feeds", [ //ここに読み込みたいRSSを記述
   "http://ingressjp.blogspot.com/feeds/posts/default",
   "http://ingresswiki.wiki.fc2.com/index.rdf",
   "http://ingress.gamerch.com/rss/Atom",
   "http://ingress.wiki.fc2.com/index.rdf",
   "http://ingress.miha5.com/index.php?cmd=rss&ver=1.0",
   "http://rssc.dokoda.jp/r/30a614b87587278d9a2b59e82b17fd50/http/b.hatena.ne.jp/search/tag?q=Ingress"
]);
//]]>
</script>
</head>
<body>
<div id="feeds"></div>
</body>
</html>

こんなカンジになります。
→ Google Feed APIのデモ その2

サイトごとに表示したい場合

ここまで紹介したものは、複数サイトのフィードを読み込んで時間順に並べて表示するコードでしたが、「すしぱくのアンテナサイト|ぱくんな」のようにサイトごとに表示したい場合はこちらのコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<!--[if lt IE 9]>
<script src="/html5shiv-printshiv.min.js"></script>
<![endif]-->
<meta charset="utf-8">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
//<![CDATA[
var getRssFeeds = function (_id, _urls, _maxLength) {
   if(!_id || !_urls || (!(_urls instanceof Array)))   return;
   var entryNum = 5;//各RSSの読み込みエントリー数
   var maxLength = (_maxLength)?   _maxLength : 0 ;
   //総エントリー表示数(0はすべて表示)
   //変数定義
   var entriesArray = new Array();
   var complete = 0;
   //初期化
   var init = function () {
       for(var i=0 ; i < _urls.length ; i++){
           //RSS読み込み
           var feed = new google.feeds.Feed(_urls[i]);
           feed.setNumEntries(entryNum);
           feed.load(function(result) {
               if (!result.error) {
                   for (var i = 0; i < result.feed.entries.length; i++) {
                       var entry = result.feed.entries[i];
                       entriesArray.push(entry);
                       var pdate = new Date(entry.publishedDate);
                       var arr = entriesArray[(entriesArray.length-1)];
                       arr.sortDate = pdate.getTime();
                       arr.siteTitle = result.feed.title;
                       arr.siteUrl = result.feed.link;
                   }
               }
               complete++;
               if(_urls.length == complete)    echo();
           });
       }
   };
   //表示
   var echo = function () {
       entriesArray.sort (function (b1, b2) { return b1.sortDate < b2.sortDate ? 1 : -1; } );//降順にソート
       //this.entriesArray.sort (function (b1, b2) { return b1.sortDate > b2.sortDate ? 1 : -1; } );//昇順にソート
       var feedLength = (_maxLength)? _maxLength : entriesArray.length;
       var container = document.getElementById(_id);
       var html='<ul>';
       for (var i = 0; i < feedLength; i++) {
           var entry = entriesArray[i];
           var pdate = new Date(entry.publishedDate);
           var Y = pdate.getFullYear();
           var m = pdate.getMonth() + 1;
           m = (m < 10)? "0" + m:m;//月数字を2桁で表示
           var d = pdate.getDate();
           d = (d < 10)? "0" + d:d;//日数字を2桁で表示
           var hour = pdate.getHours();
           hour = (hour < 10)? "0" + hour:hour;
           var minute = pdate.getMinutes();
           minute = (minute < 10)? "0" + minute:minute;
           var date = Y + "年" + m + "月" + d + "日" + hour + ":" + minute;
           html += '<li>';
           html += '<a href="' + entry.link + '" target="_blank">' + entry.title + '</a>';
           html += date + entry.siteTitle;
       }
       html += '</ul>';
       container.innerHTML += html;
   };
   google.setOnLoadCallback(init);
};

getRssFeeds("feeds1", [
   "http://ingress.miha5.com/index.php?cmd=rss&ver=1.0"
]);
getRssFeeds("feeds2", [
   "http://rssc.dokoda.jp/r/30a614b87587278d9a2b59e82b17fd50/http/b.hatena.ne.jp/search/tag?q=Ingress"
]);
getRssFeeds("feeds3", [
   "http://ingressjp.blogspot.com/feeds/posts/default"
]);
getRssFeeds("feeds4", [
   "http://ingresswiki.wiki.fc2.com/index.rdf"
]);
getRssFeeds("feeds5", [
   "http://ingress.gamerch.com/rss/Atom"
]);
getRssFeeds("feeds6", [
   "http://ingress.wiki.fc2.com/index.rdf"
]);
//]]>
</script>
</head>
<body>
    <div id="feeds1"></div>
    <div id="feeds2"></div>
    <div id="feeds3"></div>
    <div id="feeds4"></div>
    <div id="feeds5"></div>
    <div id="feeds6"></div>
</body>
</html>

このコードで、こんなカンジになります。
→ Google Feed APIのデモ その3

全部のせのコード

ラーメンのトッピングみたいですね。嗚呼ラーメン食べたい。

全部のせ(投稿時間・はてブ数・ツイート数も表示)のコードがこちら。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
//<![CDATA[
var getRssFeeds = function (_id, _urls, _maxLength) {
   if(!_id || !_urls || (!(_urls instanceof Array)))   return;
   var entryNum = 5;//各RSSの読み込みエントリー数
   var maxLength = (_maxLength)?   _maxLength : 0 ;
   //総エントリー表示数(0はすべて表示)
   //変数定義
   var entriesArray = new Array();
   var complete = 0;
   //初期化
   var init = function () {
       for(var i=0 ; i < _urls.length ; i++){
           //RSS読み込み
           var feed = new google.feeds.Feed(_urls[i]);
           feed.setNumEntries(entryNum);
           feed.load(function(result) {
               if (!result.error) {
                   for (var i = 0; i < result.feed.entries.length; i++) {
                       var entry = result.feed.entries[i];
                       entriesArray.push(entry);
                       var pdate = new Date(entry.publishedDate);
                       var arr = entriesArray[(entriesArray.length-1)];
                       arr.sortDate = pdate.getTime();
                       arr.siteTitle = result.feed.title;
                       arr.siteUrl = result.feed.link;
                   }
               }
               complete++;
               if(_urls.length == complete)    echo();
           });
       }
   };
   //表示
   var echo = function () {
       entriesArray.sort (function (b1, b2) { return b1.sortDate < b2.sortDate ? 1 : -1; } );//降順にソート
       //this.entriesArray.sort (function (b1, b2) { return b1.sortDate > b2.sortDate ? 1 : -1; } );//昇順にソート
       var feedLength = (_maxLength)? _maxLength : entriesArray.length;
       var container = document.getElementById(_id);
       var html='<ul>';
       for (var i = 0; i < feedLength; i++) {
           var entry = entriesArray[i];
           var pdate = new Date(entry.publishedDate);
           var Y = pdate.getFullYear();
           var m = pdate.getMonth() + 1;
           m = (m < 10)? "0" + m:m;//月数字を2桁で表示
           var d = pdate.getDate();
           d = (d < 10)? "0" + d:d;//日数字を2桁で表示
           var hour = pdate.getHours();
           hour = (hour < 10)? "0" + hour:hour;
           var minute = pdate.getMinutes();
           minute = (minute < 10)? "0" + minute:minute;
           var date = Y + "年" + m + "月" + d + "日" + hour + ":" + minute;
           html += '<li>';
           html += '<a href="' + entry.link + '" target="_blank">' + entry.title + '</a> <img src="http://b.hatena.ne.jp/entry/image/large/' + entry.link + '"> <img src="http://tools.tweetbuzz.jp/imgcount?url=' + entry.link + '">';
           html += date + entry.siteTitle;
       }
       html += '</ul>';
       container.innerHTML += html;
   };
   google.setOnLoadCallback(init);
};
getRssFeeds("feeds1", [
   "http://ingress.miha5.com/index.php?cmd=rss&ver=1.0"
]);
getRssFeeds("feeds2", [
   "http://rssc.dokoda.jp/r/30a614b87587278d9a2b59e82b17fd50/http/b.hatena.ne.jp/search/tag?q=Ingress"
]);
getRssFeeds("feeds3", [
   "http://ingressjp.blogspot.com/feeds/posts/default"
]);
getRssFeeds("feeds4", [
   "http://ingresswiki.wiki.fc2.com/index.rdf"
]);
getRssFeeds("feeds5", [
   "http://ingress.gamerch.com/rss/Atom"
]);
getRssFeeds("feeds6", [
   "http://ingress.wiki.fc2.com/index.rdf"
]);
//]]>
</script>
</head>
<body>
    <div id="feeds1"></div>
    <div id="feeds2"></div>
    <div id="feeds3"></div>
    <div id="feeds4"></div>
    <div id="feeds5"></div>
    <div id="feeds6"></div>
</body>
</html>

で、これだとこんなカンジです。
→ Google Feed APIのデモ その4

フィードを吐き出していないサイトのフィードを作る方法

ここまでで、アンテナサイトのフォーマットは完成です。あとは、フィードを追加していくだけです。WordPressやMovableTypeで作られたサイトなら、勝手にフィードを吐き出してくれてますが、中にはフィードがないサイト、あるいは、フィードはあるけどあるカテゴリのみのフィードが欲しいとき、そんな時は、フィードを生成してしまいましょう。

Ingressアンテナで言えば、「タグ「Ingress」を検索 – はてなブックマーク」っていうのが、生成したフィードから拾ってきているものです。もちろん、はてなブックマークはフィードがありますが、「Ingress」というタグがついたものだけのフィードは流石に準備してくれていません。

フィードの生成はこのサイトで行いました。
RSS Creater

生成したいサイトのURLをいれるだけでOKです。Ingressアンテナのように、ピンポイントのアンテナサイトの時は、フィードを生成するサイトが活躍してくれます

CSSのサンプル

Ingressアンテナのコードそのまんまですが、参考まで。

/*--------------------------------------
  リセット
--------------------------------------*/

* {
    margin: 0;
    padding: 0;
    font-size: 100%;
}
a {
    text-decoration: none;
}
ul, ol {
    list-style: none;
}
img {
    vertical-align: top;
    border: 0;
}
html {
    font-family: "メイリオ", verdana, sans-serif;
    font-size : 100%;
    line-height : 1.5;
    color: #333;
}

/*--------------------------------------
  リンク
--------------------------------------*/

a {
    color: #00aeef;
}
a:hover {
    text-decoration: underline;
}

/*--------------------------------------
  構成
--------------------------------------*/

#contents {
    width: 976px;
    margin: 0 auto;
    clear: both;
}
#main {
    width: 624px;
    display: block;
    float: left;
    background-color: #fff;
}
#sub {
    width: 336px;
    display: block;
    float: right;
}

/*--------------------------------------
  ヘッダ
--------------------------------------*/

header {
    margin-bottom: 16px;
}
h1 {
    color: #00aeef;
    font-size: 52px;
    padding: 24px;
}
.nav {
    width: 100%;
    height: 40px;
    display: block;
    background-color: #75d3f6;
    margin-bottom: 16px;
}
ul#menu {
    width: 976px;
    margin: 0 auto;
}
ul#menu li {
    float: left;
    text-align: center;
    border: none;
    padding: 8px 16px;
    color: #fff;
}
ul#menu li:hover {
    background-color: #00aeef;
}

/*--------------------------------------
  フィード
--------------------------------------*/

#feeds li,#feeds1 li,#feeds2 li,#feeds3 li,#feeds4 li,#feeds5 li,#feeds6 li {
    border-bottom: 4px solid #75d3f6;
    padding: 20px 0 12px;
}
#feeds li:hover,#feeds1 li:hover,#feeds2 li:hover,#feeds3 li:hover,#feeds4 li:hover,#feeds5 li:hover,#feeds6 li:hover {
    background-color: #ECF0F1;
}
h2 {
    font-size: 1.8em;
    color: #666;
    background-color: #ECF0F1;
    border-bottom: 4px solid #7F8C8D;
    padding: 16px;
    margin:48px 0 0;
}
h2.first {
    margin-top: 0;
}
.e_title {
    font-size: 1.4em;
    font-weight: bold;
}
.small {
    font-size: 0.7em;
}
div#main ul li img {
    vertical-align: middle;
}

/*--------------------------------------
  サイド
--------------------------------------*/

.ad1 {
    margin-bottom: 16px;
 }
.ad2 {
    margin-top: 16px;
}

/*--------------------------------------
  下の広告
--------------------------------------*/

.ft_ad {
    text-align: center;
    padding: 8px;
}

/*--------------------------------------
  フッター
--------------------------------------*/

footer {
    background-color: #75d3f6;
}
.copy {
    color: #fff;
    padding: 24px;
}
.copy a {
    color: #fff;
}
.copy a:hover {
    text-decoration: none;
}

これだと、こんなカンジです。
Ingressアンテナ

アンテナに追加してほしい方は、どうぞみはらまでご連絡ください:)

それにしても、アンテナサイトは5分でできるのに、この記事読み終えるのは5分以上かかりそうですねww

Ingressやってる方へ

Ingressやっている方、どうぞWikiを編集してくださいね:)
Ingress Wiki

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

checkboxみはら.comはエックスサーバーです

PAGE TOP arrowup