GoogleAPIを使ってJavaScriptでRSSフィードを簡単にサイトに組み込む方法

JavaScriptを使ってRSSやXMLなどのフィードをWebサイト上に表示したい時にオススメ。
Google Code Playground で公開されているAjaxコードを使えば簡単に実装可能です。

たとえば、アメブロの最新記事を別のWebサイトに表示する場合、
ドメインが違う（サーバーが違う）ので、プログラミングにちょっと苦労するのが通例。
ところがGoogleが提供しているjsコードを取得することで、シンプルに実現させることができます。

Google　Code Playground にアクセスする
GoogleCodePlayground

英語だらけで、一瞬怯みますｗ

左側のメニューにある「Pick An API」枠の中から、
Feeds → Feed Control を選びます。
すると、右側の「Edit Code」枠に以下のJavaScriptコードが表示されます。
「Output」枠には、実際に表示されるフィードのプレビューが表示されています。
それではコードの解説です。

/*
* How to use the Feed Control to grab, parse and display feeds.
*/

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

function OnLoad() {
// Create a feed control
var feedControl = new google.feeds.FeedControl();

// Add two feeds.
feedControl.addFeed("http://www.digg.com/rss/index.xml", "Digg");
feedControl.addFeed("http://feeds.feedburner.com/Techcrunch", "TechCrunch");

// Draw it.
feedControl.draw(document.getElementById("content"));
}

google.setOnLoadCallback(OnLoad);

赤文字は、取得するRSSなどのURLを絶対パスで記述します。
例）　http://rssblog.ameba.jp/naoyutan/rss20.xml　※このブログのRSSURL

青文字には、フィードのタイトルなど任意の文字を入れます。※ブログ名など

試しに、ご自分のブログなどのRSSURLをコピー＆ペーストして、右下の「Run Code」を押してみてください。
フィードが表示されるか確認することができます。

緑文字には、後でHTML内に記述するID名です。
「content」というID名は、ほとんどのWebサイトで既に使われる可能性がありますので、ここを「feeds」などに変えておきましょう。

このコードでは、一度に2つのフィードを表示させることが出来るようですが、
フィードは1つで良いよって場合は、片方削除しても大丈夫です。

右上にある「Edit HTML」のボタンを押すと、枠の中が切り替わり、HTMLコードが出現します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google AJAX Search API Sample</title>
    <script src="http://www.google.com/jsapi?key=●取得したAPIキーが表示される●" type="text/javascript"></script>
    <script type="text/javascript">
    /*
    * How to use the Feed Control to grab, parse and display feeds.
    */

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

    function OnLoad() {
      // Create a feed control
      var feedControl = new google.feeds.FeedControl();

      // Add two feeds.
      feedControl.addFeed("●RSSURL●", "●任意のタイトル●");


      // Draw it.
      feedControl.draw(document.getElementById("feeds"));
    }

    google.setOnLoadCallback(OnLoad);
    </script>
</head>
<body style="font-family: Arial;border: 0 none;">
    <div id="content">Loading...</div>
</body>
</html>

先程入力したRSSURLとタイトル、フィードを表示するIDが入力されたHTMLソースが出てきます。
<div id="content">Loading...</div>となっている行は、<div id="feeds">Loading...</div>と修正します。

このソースをテキストエディタにコピペして、適当な名前でHTMLで保存するだけ。
RSSフィードを取得したWebページの完成です。
FTPでアップして、表示確認してみてください。（ローカルでも動きます）

<div id="feeds">Loading...</div>の部分にフィードが表示されるので、CSSでデザインを調整することも可能ですね。

既存のページに外部スクリプトとして組み込む＜上級編＞

最初に編集したjsコードをテキストエディタにコピペして、ファイル名を任意のjsファイルで保存します。
ここでは「gafeeds.js」にしておきます。
保存したjsファイルは、フィードを表示したいWebサイトのFTPにアップしておきます。
ディレクトリはどこでも好きな場所でOK

HTMLファイルの編集

表示させたいHTMLにスクリプトを読み込ませます。
以下のコードを<head>～</head>内に追加します。

適当な場所に以下のソースをコピペ。

追記（3/10）　scriptタグの記述の順番を、google.comのほうを上にしないと正常動作しませんでした。

<div id="feeds">Loading...</div>

これだけで設置完了です。

うぇぶとかのなんとか

Web屋のクリエイティブメモとかノウハウの覚え書き。

GoogleAPIを使ってJavaScriptでRSSフィードを簡単にサイトに組み込む方法