大井宏友です。
最近のWEBサービスAPIではXMLだけでなく、JSONやJSONPもサポートするものが増えてきました。手前味噌ですが、8月1日に公開開始したリクルートWEBサービスの4つのサイト(赤すぐnet・リクルート進学ネット・エイビーロード・ホットペッパーbeauty)のWEBサービスでもサポートしています。
ただ実際の認知度・普及度というとまだまだなのかなという感じもありますので、リクルートWEBサービスを例にとってJSONPの簡単なサンプルを紹介したいと思います。
メニューを作る。
今回はプルダウンメニューを作ってみようと思います。 リクルートWEBサービスには検索条件を絞り込む用としてマスタAPIを提供していますが、これらマスタAPIの用途として多いのがプルダウンメニュー作成だと思います。
例として、赤すぐWEBサービスの対象月齢マスタAPIを利用して、月齢のプルダウンメニューを作ってみます。本APIは他のマスタAPIと連携がなかったり、絞り込み条件がないという超シンプルなものになるかと思います。
ソース
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>赤すぐnet WebサービスをJSONPで実装するサンプル</title>
<script language="JavaScript" type="text/javascript" src="jsr_class.js"></script>
<script language="javascript" type="text/javascript">
//APIを実行する
var oJsr = new JSONscriptRequest('http://webservice.recruit.co.jp/akasugu/age/v1/?key=[あなたのAPIキー]&format=jsonp&callback=ageMenu');
oJsr.buildScriptTag();
oJsr.addScriptTag();
//callback関数を定義
function ageMenu(data){
//ループをまわして、プルダウンメニューを作る
for (var i = 0, age; age = data.results.age[i]; i++){
//optionタグを生成
var opt = document.createElement('option');
opt.setAttribute('value', age.code);
opt.appendChild(document.createTextNode(age.name));
//selectタグ内にoptionタグを追加
document.getElementById('agemenu').appendChild(opt);
}
oJsr.removeScriptTag();
}
</script>
</head>
<body>
<form id="form1" name="form1">
月齢<select name="select" id="agemenu"></select>
</form>
</body>
</html>
解説
JSONPを実行するためのライブラリとして以下のサイトの「jsr_class.js」を利用してみました。
このライブラリではXMLHttpRequestのような感じで使えるJSONscriptRequestというクラスを定義していて、 これを利用することで簡単にJSONPのAPIを扱えるようになります。
上記サイトからjsr_class.jsをダウンロードして、htmlファイルと同階層において呼び出します（６行目）。
APIの実行は、JSONscriptRequestをnewして（９行目）、scriptタグを生成して（10行目）、 それをHTML内に追加（11行目）、以上３行。これによって、APIが実行されて結果が返ってくると、 14行目から定義したcallback関数が実行されます。
callback関数内では、APIから返ってきたJSONをどう処理するかを記述しています。 今回はプルダウンメニューを作る処理を書いていて、 結果が入っているageというnodeは配列状態になっていますからそれをループでまわしてメニューのoptionタグを生成しています。
最後にもうメニューを作っちゃったので不要になったscriptタグ（11行目で追加したやつ）を消去しています(24行目）。
勝手にメニューが更新される。
マスタAPIは、検索条件を絞り込むためのメニューやらチェックボックス等のUIをつくるときに利用することが多いわけですが、 APIになっているということは「たまに」内容が変わります。情報系のAPIであれば検索ごとに結果が変わりますが、マスタの場合の 「たまに」を常にウォッチするのはちょっと大変です。
マスタAPIがJSONP対応していて、 JavaScriptで画面読み込み時にメニューが作られるようにしておけば常に正しい状態でメニューが表示されますし、 そのための手間も上記ソースのようにたいしたプログラミングをしなくてもクライアント側のJavascriptだけで完結しますから、 マスタAPIとJSONPはかなり相性がいいといえるのではないかなと思います。僕自身これが新たな発見でした。
JavaScriptだけでもFlashだけでもMashUp可能！
リクルートWEBサービス（http://webservice.recruit.co.jp/で始まるもの)は全APIがXML/JSON/JSONPに対応し、 crossdomain.xmlもありますのでFlashだけでもJavaScriptだけでも、サーバサイドプログラム （PHPとかperlとか）を覚えなくても利用することができます。ぜひ、 普段クライアントサイドしか経験のないクリエータの皆さんにも使っていただきたいなと思っています。
