JSONPを利用したTwitter Search

JSONPを利用したTwitter Searchを作ってみました。モノを見たほうが早いかも。

(追記:2007/05/03 08:00) Twitter.fmが落ちていることがたびたびあるようです。そのときは検索できません。。

(追記:2007/05/16 03:30) script要素が無限に増殖するのを防ぐために、要素数を1に抑える処理を加えました。

Twitter Search

- powered by Twitter.FM



検索ボックスで適当な単語を入れると非同期通信で検索結果が表示されます。最後にも書いていますが、今のところ日本語は通りません。英単語のみです。(2007.05.16 日本語が通るのも確認しました)あと複数クエリもちょっと怪しいです。とりあえず「hungry」「Twitter」とかで検索かけてみると雰囲気が分かります。

元ネタはつい最近できたTwitter検索サイトのTwitter.FM。ここが検索APIであるTwitter.FM APIを提供してくれているので、これを利用させていただきました。(利用規約とか無かったので勝手に使っちゃったけどマズいかな。。)

APIが提供されてある、、といってもXML/RSSフォーマットしかないので、これをそのまま使うことはできません。JSONP対応してくれていると非常に助かる、、あとJSONフォーマットも対応してくれれば、、と、あれこれ思ったので、思うより動けで次のようなアプローチを。

  1. PHPでJSONP Proxyを作成
  2. callbackで渡されるXMLをちょっと手直し
  3. XMLオブジェクトをJSONオブジェクトに変換
  4. ゴニョゴニョして表示

では、ざっくり解説をば。

まず1.ですが、要するにAPIは提供してくれているけど、JSONPには対応していない、なサービスに対して、「オレオレJSONP対応」をするために作成しました。発想のネタ元はこちら。本当はこれをそのまま拝借しよう、と思っていたのですが、Twitter.FM APIの場合、リクエストに対して返ってくるものがJSONではなくXML/RSSとなります。なので、

callback(xmlObj)

ではなく

callback('xmlObj')

と、シングルクオートで囲ってあげて、その後でXML解析を必要があります。うーん、微妙。 でも、これをやらないと無理(な、はず)。と、いうわけで即席でProxyを作りました。一応URLをば。

http://lab.katsuma.tv/api/jsonp_proxy.php?callback=[callback関数名]&url=[URLEncodeされたURL]&sq=[on|off]

な書式にしてます。上記の例みたいにしたかったけどとりあえず即席。urlで与えられた内容を「callback+(+'」と「'+)」で囲ってあげるものです。シングルクオートの有無もオプション(sq=on|off)で付けられるように。セキュリティだけ気をつければ(*)そんなに難しいものではないので、さっくりできるはず。
(*)今回作成したものは、urlで与えられるものは「http://~」の書式のものだけに限定してます。url=/etc/passwd とか無しで。

このProxy自体は作ることは簡単なのですが、JSONPにまじめに対応させようとすると罠がありました。。。2で書いていますが、XMLが返ってくる際に改行文字入りのXMLが返ってきたら

hoge('<?xml version="1.0" encoding="UTF-8"?>

で、止まってしまい、ここでエラーが起きちゃうんですね。要するに文字列としてなんかおかしいぞ、と。callback関数に渡すXMLは1行で渡さないとダメ。あと、当然ながら渡される文字列にシングルクオートが生で入っていればあらかじめエスケープさせておく必要があります。このあたりもろもろを考慮してProxyを作る必要があります。

3のXML→JSONはXML2JSONなサービスもあるんですけど、今回は自前で。ちょうどJSANから「XML.ObjTree - XML~JavaScriptオブジェクト変換クラス」なライブラリがあったので、それを利用しました。これ相当便利すぎるので必見。使い方はこんな感じ。

var xotree = new XML.ObjTree();
var xml = '<?xml version="1.0"?><root><node>Hello, World!</node></root>';
var tree = xotree.parseXML( xml );       	// source to tree
document.write( "message: "+tree.root.node );

ここまでくると、あとは4で表示だけ。今回はplainなリスト形式で書き出しています。

TODOとして、検索クエリに日本語が通りません。英語のみです。これはTwitter.FM API側で対応を願うのみ、、になっちゃうんですが、利用側でいい回避策はないかなぁ、と考え中です。(URLエンコードのクエリを投げてもどうもダメのようで) ただ、実際のサイトの検索ボックスでは日本語が通っているので、内部的にはOKなのでしょう。APIとして公開した場合に、まだ問題があるのかな。

あと、この検索+結果をうまく整形して使い勝手がいいものにまとめなおしたいです。今のままだと、単純に「APIで遊んだだけ」で終わってしまうので。まずはいろいろおざなりになってるガジェット化かなぁ。

関連広告

Trackbacks:0

TrackBack URL for this entry
http://blog.katsuma.tv/mt-tb.cgi/53
Listed below are links to weblogs that reference
JSONPを利用したTwitter Search from blog.katsuma.tv

Home > Javascript > JSONPを利用したTwitter Search

Search
Feeds

Return to page top