第3回 Web APIって何？ その他２

JSONPを知る

　はてなブックマークはソーシャルブックマークサービスの1つですが、「"http://b.hatena.ne.jp/entry/json/?url= 調べたい URL&callback= コールバック関数名 "」というGETリクエストを送信することでブックマーク数やブックマークしているユーザの情報をJSONPとして取得することができます。

　例えば、「http://b.hatena.ne.jp/entry/json/?url=http%3A%2F%2Fwww.hatena.ne.jp%2F&callback=func」にWebブラウザでアクセスすると、以下のようなJSONPが返却されるはずです（URLやコールバック関数名はURLエンコードが必要な点に注意してください）。

　func({"count":"1608","url":"http://www.hatena.ne.jp/", ...})

　見ての通り、JSONデータを引数にcallbackパラメータで指定した関数を呼び出すJavaScriptコードが返却されていることがわかります。

　実際のアプリケーションでは<script>要素のsrc属性にJSONPのURLを指定することで、上記のようなJavaScriptをインポートします。すると、JavaScriptがインポートされたタイミングでコールバック関数が呼び出されます。Web APIの利用者はコールバック関数（この場合はfunc関数）を実装することで、JSONPで取得したJSONデータを処理することができるわけです。

はてなブックマークのWeb APIを使ってみよう

　それでは実際に、はてなブックマークWeb APIを使用したサンプルを作成してみます。まずは、はてなブックマークのWeb APIで取得できるJSONデータの構造を確認しておきましょう（図2）。

　コールバック関数には、この構造のオブジェクトが引数として渡されます。今回のサンプルではこれらのデータを使用して、ブックマーク数とスクリーンショットを画面上に表示します。

　サンプルのソースコード（リスト1）と実行結果は、図2のようになります。HTMLにはあらかじめ<span>要素や<div>要素で情報の表示位置を決めておき、JSONPのコールバック関数でこれらの要素のinnerHTMLプロパティに表示内容をセットしています。