JSONP Tester (powered by Ext JS & jQuery)

最近コードを晒してなかったので、場つなぎ的に。

大昔に作ったものに、JSON with Padding Tester というJSONPテスト用のツールがあるのですが、これをちょっとExt JS + jQuery(JSONPの呼び出しに利用)で書き直しました。

コードはこの前アカウントを作ったまま放置していたCodeReposに。下記からそのまま実行できます。

http://svn.coderepos.org/share/lang/javascript/jsonptester/trunk/jsonptester.html

よくGoogle Codeでもやってるけれど、静的ファイルのホスティングとしてsvnレポジトリを使うのは、きっと本来の使い方ではないですね。ただ、見方を変えれば、最新版のコードがすぐに実行ができる環境が用意されているというのは、とっても有意義なことではないかと思います。もちろんホスト側に迷惑がかかるほどであればさすがにそれは申し訳ないので考えます。

使い方

上記のURLに(あるいはチェックアウト後に適当なサーバに配置したHTMLファイルに)アクセスし、JSONP Service URLにJSONPのサービス呼び出しのURLを入力します。このとき、コールバック関数を指定する「callback=xxxx」は*取り除いて*入力します。

e.g.
× http://del.icio.us/feeds/json/stomita?count=10&callback=handleCallback
○ http://del.icio.us/feeds/json/stomita?count=10

Optional ParametersにはJSONPサービス呼び出し時の設定を入力します。

Callback Parameter Name
コールバック関数名を指定するパラメータ名。通常ではcallbackが使われるが、サービスによって書き換え可能。
Timeout (msec)
タイムアウト値(ミリ秒)。JSONP呼び出しが正常に完了しない場合、この時間が経つとエラーとなる。
Append No Cache Param
JSONPのクエリ文字列にブラウザのキャッシュを抑止するためのパラメータを付加するか否か

「Request」ボタンを押すとツリーとしてJSONPの結果として得られたオブジェクトが表示されます。
ツリーのノードをクリックすると、そのノードのJSON文字列をダンプ出力できます。

外部サイトから利用する場合

ハッシュ(URLの「#」以降)による値渡しで外部のサイトからフォームのパラメータをプリセットできます。JSONP APIを提供しているサイトで、サンプルの実行結果を可視化して見せたい場合に使えます。ハッシュに設定する値のフォーマットは callbackParameterName:encodedJSONPServiceURL の形になります。

e.g.
del.ico.us posts
Yahoo Pipes
楽天商品検索API