JSONP + リクルートWebサービス : 検索アプリのサンプルコード公開
研究員の石橋利真です。こんにちは。
先日8/1にリクルートWebサービスとして公開されたAPIはすべてJSONP形式のレスポンスに対応しています。JSONP形式は、別途自前のサーバサイドCGIスクリプトを用意せずとも、javascriptのみで手軽にAPIを利用したサービスが作れる事が最大の魅力です。
今回は "JSONP" について、なんとなく理解はしているものの、実際どうやって利用すれば良いのか判らない方のためにサンプルアプリをソースごと公開してみます。ご自身のサービス開発のとっかかりになったり、その利便性を実感してもらえれば幸いです。
[目次]
1. 基本
JSONPを利用するには、別途有志が公開してくれているjavascriptの専用ライブラリを駆使するのがもっともスマートな方法ですが、まずはそれらライブラリを一切使わない基本的な書き方をご紹介。以下のデモアプリを触ってみた上で、javascriptソースコードを読んでみてください。コメントを参考にしつつ読み進めれば、JSONPの概要がつかめると思います。
plain javascript な JSONP サンプルアプリを開く
[ 利用規約に同意の上ソースコードをダウンロード ]
AB-ROAD Webサービスを利用して、任意のキーワードを入れると該当する海外旅行ツアーが一覧で表示される、というごく基本的なサービスのサンプルです。JSONP形式を利用しているので、サーバサイドのCGIスクリプトは一切不要で、この程度の javascript コードのみで完結しています。この手軽さが良いですね。
2. より簡単に
javascriptでJSONPを扱う為のライブラリの1つに、Jason Levitt氏が2005年12月(JSONPが話題になった当初)に下記の記事と共に公開してくれた jsr_class.js というのがあります。
JSON and the Dynamic Script Tag: Easy, XML-less Web Services for JavaScript
純粋にJSONPを扱うことのみに特化した簡潔なライブラリで、以下の特徴があります:
- script タグを生成/追加する... といった面倒な処理を引き受けてくれる
- APIを呼ぶたびにどんどん追加されていく不要な script タグを除去してくれる (メモリ節約・動作安定の効果)
前述のサンプルアプリを、この jsr_class.js を使って実装すると以下のようになります。
jsr_class.js 版 JSONP サンプルアプリを開く
[ 利用規約に同意の上ソースコードをダウンロード ]
3. さらに簡潔・スマートに
javascriptでアプリを開発する際、とても便利で、かつコード量を劇的に削減する事ができる素敵なライブラリ - jQuery - というのがあります。この jQuery と、さらにプラグインとして有志が公開してくれている2つの拡張機能を駆使すると、JSONPアプリがさらに簡潔に、判りやすく書けるようになります。
これらライブラリを使ったサンプルアプリは以下のようになります。
[ 利用規約に同意の上ソースコードをダウンロード ]
「でも別途 jQuery の使い方を覚えないと駄目ですよね...」とお嘆きの方。確かにjQueryを学習する事で応用コードが書けるようになり、結果より高機能なアプリが作れるようになりますが、そこまでいかずとも上記サンプルコードをそのままコピー＆ペーストでご自身のアプリに組み込むだけでも十分機能すると思います。検索結果をどこにどう表示するか、辺りのコード改修だけでOKです。
4. ページング機能をつけたサンプル
前章で紹介したjQuery版のサンプルに、検索アプリを作るなら必須となる「次の/前の検索結果を表示する - ページング機能」を追加実装するとこうなります。
[ 利用規約に同意の上ソースコードをダウンロード ]
ページング機能までつけてこの程度のコード量で収まっているのは、jQueryを駆使しているからこそだと思います。検索アプリを作ろうと思っている方はぜひ参考にしてみてください。
おわりに
以上これらのサンプルコードが、リクルート Webサービスを使ったサイトの開発をする際、何かしら助けになれば幸いです。コードの間違いや、動作不良・バグなどありましたら、気軽に下記ブログコメント欄に一言投稿してくださいませ。
コメント (4)
別のjsonpに応用させていただこうかと思ったのですが、以下のjavascriptのエラーが出ます。
---
エラー: callback is not defined
ソースファイル: http://中略.cgi?callback=_jsonp_1245891219222_3&q=libr
行: 1
---
使いたいjsonpは、以下のような形なので、見た目はab-roadのjsonopと変わらないと思うのですが。
---
callback( {"item":{"publisher":"1986","link":"http://....",以下略
---
なにか、お気づきの点があれば、ご教示ください。
石橋さま
早速のご回答ありがとうございます。
なるほど、$.getJSONP() で、replace してましたね。
となると、jquery.jsonp.js をこのまま使うとするとここは固定文字列になるわけですね。
最近の JavaScript は奥が深すぎて、付いていくのが大変だぁ。C/C++, Java が本当に簡単に思えてきます。
> おやじプログラマさん
コメントありがとうございます。
> ここでは、CallBack関数として、別の関数を
> 呼ぶことはないとは思うのですが
いえ、$.getJSONP() メソッドの第二引数に渡す function (){ ... } そのものが、CallBack関数になるんですよー。
> {callback}には、一体何があてはあまることに
> なるのでしょう
ソースコードの通り、そこにはただの文字列として 'callback={callback}' として $.getJSONP() に渡す事になります。
そうする事で、$.getJSONP() メソッドの中で、自動的に第二引数で渡された無名関数にテンポラリな名前を割り当てたうえで、そのテンポラリ名称を '{callback}' 文字列と差し替えた上で API リクエストしています。
大変参考になりました。
そのなかで、3の例について1つ質問があります。
// リクエスト先 API URL 生成
var url = 'http://webservice.recruit.co.jp/ab-road/tour/v1/'
+ '?format=jsonp&callback={callback}&'
+ $( 'form' ).formSerialize();
というところの、{callback}には、一体何があてはあまることになるのでしょう。
ここでは、CallBack関数として、別の関数を呼ぶことはないとは思うのですが、空のままで大丈夫？。
あと、jsonp_request (mode) の定義の mode ってここでは使ってないですよね。