GNJYOブログ .

RSSを簡単に取得してゴニョゴニョ出来るGoogle AJAX Feed APIの使い方をメモ。
いつも忘れてしまって、毎回googleで検索しているので。

Google AJAX Feed APIを使うために以下からAPIキーを取得します。
http://code.google.com/intl/ja/apis/loader/signup.html
自分のWebサイトのアドレスを入力して、生成するだけで取得出来ます。

使うための準備
以下の記述をヘッダーにする。
APIキーの部分は先程取得したキーと置き換える。

<script type="text/javascript" src="http://www.google.com/jsapi?key=APIキー"></script> 
<script type="text/javascript">
google.load("feeds", "1");
</script>

実際にRSSを読み込んでfeed情報を表示はこんな感じ。

<script type="text/javascript">
google.setOnLoadCallback(initialize);
function initialize() {
  // 読み込んだ情報を表示する場所のエレメント
  var resu =  $( '#result' ).empty();
  // 読み込みたいfeedのurl
  var feed = new google.feeds.Feed(url);
  // 読み込む記事の最大数
  feed.setNumEntries(10);
  // ここで読み込み
  feed.load(function(result) {
    // エラーが無いか確認（エラーとfeedが1件も無いは違うので注意）
    if (!result.error) {
      var items = result.feed.entries;
      // フィード全体の情報（サイトのタイトル等）を出力
      $(items).each(function() {
        // 個々の記事の情報を出力
        
        // 記事の画像を取得する
        var ig = this.content.match("<img.*jpg.*?>");
        // 取得した画像でリンク、タイトルを生成
        htmlstr = '<a href="' + this.link + '" target="_blank">'+ ig + '</a> '
                    + '<a href="' + this.link + '" target="_blank">'+ this.title + '</a> '
        resu.append( htmlstr );
        resu.show
      });
    }
  });
}
</script>

よくfeed情報に画像が表示されていることがあるけど、画像という項目はないのでcontentの中から適当に探してやる必要があります。

サイト情報
result.feed.title：サイトのタイトル
esult.feed.link：サイトのアドレス
result.feed.description：サイトの概要
result.feed.author：サイトの著者

記事情報
result.feed.entries[ n ].title：記事のタイトル
result.feed.entries[ n ].link：記事のアドレス
result.feed.entries[ n ].content：記事の内容（HTMLのタグも含む）
result.feed.entries[ n ].contentSnippet：記事の概要（HTMLのタグは含まない）
result.feed.entries[ n ].publishedDate：記事が公開された日付
result.feed.entries[ n ].categories[]：記事のカテゴリやタグ

記事情報はresult.feed.entriesで配列になっているので適当にクルクルすると取得できます。

より詳しい使い方はGoogle AJAX Feed APIのページを確認してください。

google map api が課金されることになったし、GAEの価格も変わったので、こっちも心配ですが、影響が及ばないことを願って。