Google AJAX Feed APIで遊んでみた | 三鷹台でひきこもるプログラマの日記

Google AJAX Feed APIで遊んでみたのでメモ。
JavaScriptのセキュリティ上の制限としてSame Origin Policyつーのがあって、要はJavaScriptコードの置いてあるサーバ以外にJavaScript内からアクセスが出来ない。
この制限のため、例えばRSSリーダーを作ろうとすると、いろんなサイトからRSSフィードを取ってきたいけどダメー、という問題にぶちあたってしまうわけです。
この制限を回避するためによくやるのが、JavaScriptコードが置いてあるのと同じサーバにRSSフィード取得するCGIスクリプトでも用意して、JavaScriptからはそのCGIスクリプトにアクセスする方法。
で、こんなものみんながみんなバラバラに書いていても仕方なかろう、ということで天下のぐーぐる様が用意してくれたのがGoogle AJAX Feed APIというわけですな。

使い方は、親切丁寧かつ日本語なドキュメントが用意されているのでそいつを読んでくだされ。

というわけで、みんなの愛するぐーぐる様のblogのAtomフィードを表示するサンプル書いてみた。

sample.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<!-- -*- coding: utf-8 -*- -->
<html lang="ja">
  <head>
    <META http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Google AJAX Feed API のサンプル</title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="./sample.js"></script>
  </head>
  <body>
    <table border="1" id="rss_list_tbl"></table>
  </body>
</html>

sample.js

// -*- coding: utf-8 -*-

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

function initialize() {
    var feed = new google.feeds.Feed( "http://googlejapan.blogspot.com/atom.xml" );
    feed.setNumEntries( 10 );
    feed.setResultFormat( google.feeds.Feed.JSON_FORMAT );

    feed.load( function( result ) {
        if ( result.error ) {
	    return;
	}

        var container = document.getElementById( "rss_list_tbl" );
	
        for ( var i = 0; i < result.feed.entries.length; i++ ) {
	    var entry = result.feed.entries[ i ];

	    var tbl = document.createElement( "tr" );
	    
	    var title = document.createElement( "td" );
	    var titleText = document.createTextNode( entry.title );
	    title.appendChild( titleText );
	    tbl.appendChild( title );
	    
	    var link = document.createElement( "td" );
	    var linkText = document.createTextNode( entry.link );
	    link.appendChild( linkText );
tbl.appendChild( link );
	    
	    var content = document.createElement( "td" );
	    var contentText = document.createTextNode( entry.content );
	    content.appendChild( contentText );
	    tbl.appendChild( content );
	    
	    container.appendChild( tbl );
        }
    } );
}

google.setOnLoadCallback( initialize );

らくちんらくちん。

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル