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

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

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

基本のコード

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

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

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

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

↑のコードでは、投稿日のみ表示して時間は表示しないようになっています。時間も表示したい場合は、次のコードをvar date = Y + "年" + m + "月" + d + "日";と入れ替えてください。
[cc lang=”JavaScript”] hour = (hour 10)? “0” + hour:hour;
var minute = pdate.getMinutes();
minute = (minute 10)? “0” + minute:minute;
var date = Y + “年” + m + “月” + d + “日” + hour + “:” + minute;
[/cc] ↑このコードは時間も分も必ず2桁で表示するようにしています。でないと、たとえば1時6分が「1:6」のように何時だかわかりにくい表示になってしまいます。

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

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

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

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

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

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

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

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

全部のせのコード

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

全部のせ（投稿時間・はてブ数・ツイート数も表示）のコードがこちら。
[cc lang=”html”]

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

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

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

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

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

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

CSSのサンプル

Ingressアンテナのコードそのまんまですが、参考まで。
[cc lang=”css”] /*————————————–
リセット
————————————–*/
* {
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;
}
[/cc] これだと、こんなカンジです。
Ingressアンテナ