きっかけ

制作してから数年，更新が止まっていたウェブサイトがありました。「これじゃもったいない」ということで，ぼくのところに「更新だけしてくれないか」という依頼がありました。年に2回，写真を差し替え，テキストを書き換えるという作業をしてきました。

先日 「もっと手軽に更新したいのでブログを始めた。今回の更新で，ブログへのリンクを入れてほしい」という連絡が来ました。

「リンクを入れるのはすぐできますが，ちょっと手をかければ，ブログの記事をウェブサイトのほうに読み込むこともできますよ」
ぼくは，

• ブログのRSS FeedをGoogle Ajax Feed API経由でウェブサイトのほうに読み込んで表示させる。
• ブログを更新すれば自動的にウェブサイトにも反映される。
• ブログの特定のカテゴリの記事を，ウェブサイトの特定のページに読み込むこともできそう。
• ついでに，Web標準のXHTML+CSSでファイルを作り直したほうがよさそうだ。

というふうなことを思い描きました。

予算やサーバーの環境に制約がある

ブログは，無料で使えるブログサービスで開設したようです。
MovableTypeやWordPressみたいなCMSでサイトを構築するという手も考えたのですが，ここは，上部組織である公共団体のサーバーを間借りしているような状態で，サーバー管理者に問い合わせたところ，データベースやCGI，PHPなどのプログラムは使わないでほしいとのことでした。

最終的に，Web標準準拠でファイルを作り直し，Javascriptでブログと連動できるように，サイトをリニューアルすることで話がまとまりました。

予算やサーバーの環境に制約があるとき，この方法はなかなかいけるな，と思いました。

Google Ajax Feed APIを使ってみる

Google Ajax Feed APIを利用するのはとても簡単です。

1. まず，
   Google AJAX Feed API - Sign Up にアクセスし，RSS FeedのURIを入力，「Generate API Key」をクリックします。
2. KeyとFeedのURI，サンプルのXHTMLソースが表示されますので，XHTMLソース内のスクリプトの部分をコピーして，表示させたいページのXHTMLファイルのhead要素内にペーストします。
   適当なJavascriptのファイルを作り，
   <script type="text/javascript" src="(Javascriptファイルへのパス)"></script>
   として読み込んでもかまいません。
3. XHTMLファイルの表示させたい部分に
   <div id="feed"></div>
   を入れます。

これで，とりあえずRSS Feedからタイトルを表示させることができます。

Javascriptをいじる

さてここから，少々コードをいじります。今回は次のようにしてみました。
ブログの特定のカテゴリの記事を指定した数だけ表示させることができます。

/* getFeed.js */

google.load("feeds", "1");

function initialize() {
  var feed = new google.feeds.Feed("http://blog.d-spica.com/atom.xml");  //FeedのURI
  feed.setNumEntries(15);  //読み込み数
  feed.load(function(result) {
    if (!result.error) {
      var container = document.getElementById("feed");
      var count = 0;
      for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];
        var cate = entry.categories[0];
        if (cate == "css") {  //カテゴリ名
          var h3 = document.createElement("h3");
          var a = document.createElement("a");
          var div = document.createElement("div");
          var entryLink = entry.link;
          h3.appendChild(a);
          h3.getElementsByTagName("a")[0].setAttribute("href", entryLink);
          h3.getElementsByTagName("a")[0].appendChild(document.createTextNode(entry.title));
          container.appendChild(h3);
          container.appendChild(div);
          count++;
        }
        if (count == 3) { break; }  //表示数
      }
    }
  });
}

google.setOnLoadCallback(initialize);

記事のカテゴリはcategories[]の配列として受け渡されているようです。今回は記事が複数のカテゴリを持たないという前提で，配列に収められた最初で唯一の値をcategories[0]で取り出しています。

これが指定した「css」と一致すれば，XHTMLに書き出す処理を行います。カテゴリが「css」の記事を3つ書き出したところで，ループを抜けます。

書き出されたXHTMLは次のようになります。

<div id="feed">
  <h3><a href="......">記事タイトル</a></h3>
  <div>記事本文</div>
  <h3><a href="......">記事タイトル</a></h3>
  <div>記事本文</div>
  <h3><a href="......">記事タイトル</a></h3>
  <div>記事本文</div>
</div>

記事本文は，FeedのXMLファイルの
<![CDATA[
]]>
の中にXHTMLソースの形で書かれたものがそのまま書き出されますので，この中の要素にもCSSを充てることができます。

参考

• Google AJAX Feed API - Developer Guide
• Google AJAX Feed API - Class Reference - JSON Result Format
• FICC LABS | Google AJAX Feed API（１）

参考にさせていただきました。

• Javascript - Google Ajax Feed APIを使ってみる | Try | d-spica

このブログのCSS関連の記事を読み込むサンプルをご覧いただけます。