Google Ajax Feed API で RSS READER（StarWas）を直す

2009 年 2月 25 日
kosuke

サーバー移転とWordPress化に伴い、「STAR WARS RSS READER」が動きません。
自分ところのBlogで動けばいいって、勢いとノリで作ったのに、自分のところのBlogで動かなくなるとは思ってもいなかった。遠近文字もFlash10なら余裕だし、もういいかって感じですが、なるべく移行させるの原則のもと手を入れてみる。

そもそもなぜ動かないか。
WordPressやブログシステムに詳しくないので、曖昧なところもあるのだけれど、原因はMTのRSSが、http://2px.cc/2blog/rss.xmlだったのに対し、WPのRSSがfeed://blog.nipx.jp/rssとプロトコルからして違う。このfeedプロトコルがflashで読み込めないっぽい。
さらに今回は問題ないですが存知のとおり自分のところのRSSでなければ、クロスドメインの問題もあるわけです。

ではどうやって解決するのか。見つけたのは、

BONKURA BLOGさんのようにプロキシになるCGIを作る方法
・http://blog.bonkura.jp/2008/06/flash-rss.html
これはご存知プロキシをたてる方法。CGIを作れるなら自由自在に作れる方法だよね。

5ive.blogさんのWordPressで専用ページを作る方法
・http://www.5ive.info/blog/archives/280
汎用のRSSリーダーにする場合クロスドメインの問題はあるけど、これは面白い。
WordPressに変更した理由の一つに商用で自由に提案できることがあります。
使いこなせれば、開発コストや定型的な作業をぐっと圧縮できるだろうし、運用上の使い勝手をWordPressにまかせて、デザイナーらしい提案というか、（僕的に）面白い（と思う）ところに、より注力した提案ができるんじゃないかと思うわけです。それに繋がる作り方だと思う。

で、煽っておきながら今回はどちらもPHPを使うということがNO-。個人的にサーバーサイドのプログラムはヤダって理由で回避…。さらに別の方法を探してGoogle Ajax Feed APIを使うことにしました。
Google Ajax Feed APIは、Googleが提供する数々のAPIの一つでさまざまなfeed情報をロードできるAPI。
WordPressとGoogle APIをマッシュアップしてFlashでRSSリーダーにするって、なんだかその響きだけでドキドキする。

ドキュメントとクラスリファレンスを参考に早速とりかかります。
Ajaxのサンプルを読み進めながら試しているとExternalInterfaceを経由させてFlashに持ってくるなんかも面白そうですが、Flashで利用するならRESTfulインターフェースを使います。

とりあえず、Flashからloadして、URLLoaderに値が入ってくるか試します。
リクエストで渡す引数は以下で試します。10件戻ってこればOK。

q = feedのURL（エスケープする必要があります）
v = 1.0
hl = jp
num = 10
key = アプリケーションキー

package {
 
	import fl.controls.UIScrollBar;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.text.TextField;
 
	public class Google_Ajax_Feed_API extends Sprite{
 
		public function Google_Ajax_Feed_API(){
			var q:String	= "q=http://blog.nipx.jp/feed";
			var num:String	= "&amp;num=2";
			var v:String	= "&amp;v=1.0";
			var hl:String	= "&amp;hl=jp";
			var key:String	= "&amp;key=******************************************************";
 
			var request:URLRequest	= new URLRequest( "http://ajax.googleapis.com/ajax/services/feed/load?" + encodeURI( q + v + num + hl + key )  );
			var loader:URLLoader	= new URLLoader( request );
				loader.addEventListener( Event.COMPLETE, this.completeHandler, false, 0, true );
		}
 
		public var tField:TextField;
		public var scrollbar:UIScrollBar;
 
		public function completeHandler(e:Event):void{
			var result:String = e.target.data as String;
 
			this.tField.text = result;
			this.scrollbar.scrollTarget = this.tField;
		}
 
	}
}

書き出したswfをサンプル1として、http://nipx.jp/blog/wp-content/uploads/2009/02/google_ajax_feed_api_sample0.swfで表示した場合、feedとはクロスドメインが発生するはずですが値が入ってくるか確認します。

サンプル1

いい感じ。値のJSONテキストをデコードします。デコードには、
as3corelib
を使う。

JSONについて、ヒカツカドットコムさんが解りやすく書かれています。
http://1ka2ka.com/archives/200808/19_135907.html

デコードしたら必要な値を取ります。JSONだとデコード後の扱いが楽です。
再びAPIのリファレンスを参照して、STARWARS RSS READERで使う値は、エントリー毎のタイトルとリンク、本文なのでresponseData.feed.entriesを参照、これを入ってるエントリー分（10エントリー）サンプル2で表示して確認してみます。

public function completeHandler(e:Event):void{
	var result:String = e.target.data as String;
	var json:Object	= JSON.decode( result );
	var entorys:Array	= json.responseData.feed.entries as Array;
 
	var out:String = "";
	var count:uint = 0;
	for each( var i:Object in entorys ){
 
		out += "( " + count + " )";
		out += "\n";
 
		out += i.title;
		out += decodeURI(i.link);
		out += i.contentSnippet;
 
		out += "\n";
		out += "-------------------------";
		out += "\n";
 
		count++;
	}
 
	this.tField.text = out;
	this.scrollbar.scrollTarget = this.tField;
}

サンプル2

無事デコードできました。とってもラクチン。
これをSTARWARS RSS READERに組み込めば元通り表示できるようになる。

STARWARS RSS READER

前回のようにRSSのXMLをごにょごにょする必要もなく（かつそのごにょごにょは、前回までのブログにしか対応できてなかった訳で）短時間でより確実な仕組みを構築できた。これぞAPIマッシュアップの醍醐味だと思う。STARWARSのRSSリーダーが作りたいのであってRSS読み込むのが目的じゃないものね。

API, Flash

2BLOG