静的なhtmlページに, ブログの新着記事一覧を表示させたい! そのためには RSS を使ったらよさそう! でもどうやって表示させるのかな？＞＜ まともにやったらサーバサイドで色々やらなきゃいけないらしいのですが, Google Feed API を使ったら数行の JavaScript 書くだけで済みました(((o(*ﾟ▽ﾟ*)o))) デモサイトはこちらです.
目次
- RSSとは
- Google Feed API
- まずはDeveloper’s Guide
- 拾える要素一覧
- 書いたコード (HTML/JavaScript)
- 余談. ブログトップページに記事全文列挙スタイル良くないって話
RSSとは
実物を見るのが早いと思います! 私のブログの RSS フィードはこちらです!
Google Chromeでご覧のかたは, こちらから実物が見られます!
http://chomado.com/feed/
(他のブラウザからも見られるかもしれませんが, Safariではダメでした＞＜)
このブログに関することが上の方に,
そしてそれに続いて最新記事に関する情報がいち記事ごとに ＜item＞＜/item＞ 内に書いてありますね!(((o(*ﾟ▽ﾟ*)o)))
記事タイトル, 記事リンク, コメントページへのリンク, 書かれた日付, 誰が書いたか, カテゴリーは何か,(カテゴリ全列挙), GUID(記事を特定するID), 記事抜粋, など.
( ゴール: この中から,
記事日付, タイトル, リンク
の3項目だけ取得して, ページに表示させたい! )
それで.
RSSとは.
Webサイトの見出しや要約などのメタデータを構造化して記述するXMLベースのフォーマット。主にサイトの更新情報を公開するのに使われている。
RSSで記述された文書には、Webサイトの各ページのタイトル、アドレス、見出し、要約、更新時刻などを記述することができる。RSS文書を用いることで、多数のWebサイトの更新情報を統一的な方法で効率的に把握することができる。
引用元: e-Words
なるほど!φ(*ﾟ▽ﾟ*)oﾒﾓﾒﾓ
まあ, つまり, これ(RSS)をうまく取得してうまく表示させたら楽しそうです(((o(*ﾟ▽ﾟ*)o)))
表示させてみたい!(((o(*ﾟ▽ﾟ*)o)))
Google Feed API
Google Feed APIを使ったら良さそう!(((o(*ﾟ▽ﾟ*)o)))
Google様はすごいなあ
たくさんAPI無償で提供しててほんとすごい!(((o(*ﾟ▽ﾟ*)o)))あとGoogle様の社員食堂ってバイキングなんですって!(((o(*ﾟ▽ﾟ*)o)))うらやましい!(((o(*ﾟ▽ﾟ*)o)))ケーキとかスイーツも食べ放題なのかな!?(((o(*ﾟ▽ﾟ*)o)))いいなあ～(((o(*ﾟ▽ﾟ*)o)))いいなあ～
まずはDeveloper’s Guide
まずは Developer’s Guide を読みます(((o(*ﾟ▽ﾟ*)o)))
とくに Result objects を見て, 引き抜ける要素を抑えておくのも重要ですね! どういう名前で拾えるのかなって
拾える要素一覧
Result objects の節を見ます!
この記事の部分のものだけまとめると
| title | 記事タイトル |
| link | 記事個別ページへのリンクURL |
| content | 記事本文 (トップページに載ってるのが抜粋だったら抜粋文) |
| contentSnippet | ↑上に書いたcontent の 120字未満(htmlタグ分もカウントして120)版. 短い抜粋文 |
| publishedDate | 記事を書いた日時. “13 Apr 2007 12:40:07 -0700” みたいな表記のものが取得できる. |
| categories[] | カテゴリやタグのリスト |
こうなりますね!
この中から, 表示させたいものだけ選んで表示させます(((o(*ﾟ▽ﾟ*)o)))
コード書くぞ〜!(((o(*ﾟ▽ﾟ*)o)))
書いたコード. (html/JavaScript)
デモサンプルはこちら. (再掲)
rss.html
まずはhtml. 今回は本当に表示させるだけなので, JS読み込むのと表示させる領域確保しかしてない.
<!DOCTYPE html> <html> <head> <title>RSS html</title> <meta charset="utf-8" /> <!-- Google Feed API --> <script src="https://www.google.com/jsapi"></script> <script src="rss.js"></script> <!-- /Google Feed API --> </head> <body> <div id="feed"></div> </body> </html>
7行目でAPIを読み込んでいます.
rss.js
JavaScript です.
記事日付, タイトル, リンク
の3項目だけ取得して, ページに表示させるhtml文を生成します.
日付のフォーマットも日本語に整える
google.load("feeds", "1");
// メイン
function main()
{
var feed = new google.feeds.Feed("http://chomado.com/feed/");
feed.load(function(result)
{
if (!result.error)
{
var html = '';
// それぞれの記事ひとつひとつに対して getRssHtml して, そこで得られた文字列コードをどんどんくっつけていってる
result.feed.entries.forEach(function (entry) { html += getRssHtml(entry); });
document.getElementById("feed").innerHTML = html;
}
});
}
// getRssHtml :: Entry -> String
// ひとつの entry(ブログ1記事) を受け取って, htmlコードを返す関数
function getRssHtml(entry)
{
var date = new Date(entry.publishedDate);
return '<archive>'
+ date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日'
+ '<h2><a href="' + entry.link + '">' + entry.title + '</a></h2>'
+ '<p>' + entry.content + '</p>'
+ '<p style="text-align:right"><a href="' + entry.link + '">もっと読む</a></p>'
+ '</archive>';
}
google.setOnLoadCallback(main);
13行目の
result.feed.entries
これは, トップページにある記事(entry)の配列です. 4つかな?
そのそれぞれの要素に対して forEach しています.
forEachに, このそれぞれの要素に対して行いたい処理を,
function (entry) { html += getRssHtml(entry); }
ってラムダ式を渡しています.
for (var i = 0; i < result.feed.entries.length; i++) {
html += getRssHtml(result.feed.entries[i]);
}
ってfor文で回しても同じことです(((o(*ﾟ▽ﾟ*)o)))でもネストが深くなるの好きじゃない＞＜
それで, 24行目以降の,
return '<archive>'
+ date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日'
+ '<h2><a href="' + entry.link + '">' + entry.title + '</a></h2>'
+ '<p>' + entry.content + '</p>'
+ '<p style="text-align:right"><a href="' + entry.link + '">もっと読む</a></p>'
+ '</archive>';
ここで, html文整形と, 要素を取ってきたりしています.
たとえば,
entry.title
で, 記事のタイトルが取得できます.
(entryは引数で渡ってきた, 1 entry のオブジェクト)
あと, entry.publishedDate は, 前述の通り, そのまま書くと “13 Apr 2007 12:40:07 +0900” みたいな書式になってしまうので, 一度 new Date(entry.publishedDate); してから書式を調整しています.
余談. ブログトップページに記事全文列挙スタイル良くないって話
余談ですが,
よくブログサイトで記事全文がトップページに並んでいるものがありますが,
そうするとRSSの内容も記事全文が全部拾えてしまうことになるので,
簡単にコピーサイトが作れてしまいます. 良くないですね.
だからブログのトップページには not 記事全文 but 記事抜粋(summary)が良いみたいです.
さらに, トップページに記事全文が表示されていて, かつ, 記事タイトルのリンクをクリックしたら, その記事の個別ページに飛ぶわけですが, そこにも同じ記事全文が表示されています.
そうすると SEO的にも良くないです. Googleなどの検索エンジンのクローラー(ページ情報を収集するプログラム)が「これはコピーコンテンツだ」と判断してしまいます.
クローラーは, 検索エンジン最適化のために, コピーコンテンツは収集するのを避ける傾向があります.
だって, 私たちが何かを検索した時, 似たようなやつとか同じ内容のものが2つも3つも検索結果に並んでいたら「同じじゃないか」と嫌になりますよね.
SEOのこのコピーコンテンツあたりの話は先月書いた記事『[.htaccess][canonical] ドメイン取得後のリダイレクトなど』でも少し書いたので興味のあるかたはぜひ(((o(*ﾟ▽ﾟ*)o)))
あまり関係無いのですが、
実はinnerHTMLを直接いじるのはあまり行儀が良くない事で、
このようなDOM操作をしたい場合は少々記述が長くなってしまいますが、（続く）
document.createElement(); で要素にしたあと、document.evaluateの第二引数に入れてxpathとして評価してDOM操作をする
・・・と勝手に続きを予想してみる。
[…] いやり方 http://chomado.com/programming/javascript/google-feed-api-javascript-%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AErss%E3%83%95%E3%82%A3%E3%83%BC%E3%83%89%E3%82%92%E5%8F%96%E5%BE%97%E3%81%97%E3%81%A6html%E3%81%A7%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B/ […]