ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、Yahoo!地図の開発を担当しています前田博敏です。 今回は、JavaScriptから外部サイトのWeb APIを直接呼び出すことができる、JSONPという手法について紹介させていださきます。 JSONPとは JSONPとは、JavaScriptの外部ファイル読み込み（「script」タグとその「src」指定）を利用して、ドメインの異なる外部サイトのデータを読み込む手法のことを言います。 JSONPを利用するには、呼び出される側のWeb APIがJSONP形式に対応している必要があります。 Yahoo!デベロッパーネットワークでは、現在のところローカルサーチAPIとショッピングAPIが、JSONP形式に対応しています。
JSONP で、いちいちコールバック関数に名前つけて書くのが面倒なので、 var url = 'http://s.hatena.ne.jp/blog.json/http://d.hatena.ne.jp/hatenastar/?callback={callback}'; JSONP.request(url, function(json) { alert(json.star_count); }); みたいに JSONP.request(URL, コールバック関数); だけで、JSONP できる JSONP オブジェクトを作りました。 URL のコールバック関数名部には {callback} と入れてください。 jQuery のソースとかを参考にして、一応ガベコレも実装してます。 jQuery ではすでにこんな感じのことができるので、単独で使う場合などにどうぞ。 既出だったら、ちょっと悲しい。
Google AJAX Search APIは、動的にGoogle検索結果を自分のページに挿入することができるAPI(あまり使っているサイトを見ないけど)。Ajaxっつっても内部はJSONP(みたいなもの)だったりするので、普通にGwebSearchクラスのsetSiteRestriction()メソッドを使うのではなく、JSONPを直接叩いてサイト内検索を実装することもできる。もちろんサイト内検索に限った話ではないけど。 Google AJAX Search APIのGwebSearchクラスによる検索は、 http://www.google.com/uds/GwebSearch?callback={コールバック関数名}&context=0&lstkp=0&hl=ja&q={検索文字列}&key={Google AJAX Search API key}&v=0.1 というURLへリクエス
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
