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プロパティに表示内容をセットしています。