ZAPAnet総合情報局 > ZAPAブログ2.0 > はじめてのJSONPプログラミング

はじめてのJSONPプログラミング

2007年09月09日 プログラミングTIPS
前回の「ブログの☆の総数を取得できるAPIを組み込みました」では、はじめてJSONPを使ってみました。以下、実際にJSONPを使ってみての覚え書きと、これからJSONPプログラミングをはじめる方へのTIPSです。


ブログの☆の総数を取得できるAPIは、はてなスターに登録されたブログの情報を取得できるJSON形式とJSONP形式で提供されているAPIでした。
JSONとは、JavaScriptにおけるオブジェクトの表記法をほぼそのまま利用したデータフォーマットのことで、JSONPはJSONにちょっと記述を加えて、クロスドメインのJSONデータを非同期で読み込ませて処理するための手法のことです。（詳しい定義については、自分で調べてみてください）

通常、Webブラウザでは他ドメインのJavaScriptのデータを読み込んで実行することはできません。
解決する方法はいくつかありますが、JSONP形式にした場合、JavaScriptのソースコードとしてインクルードさせることができるため、関数呼び出しの形でコールバック関数のように扱うことができます。

「ブログの☆の総数を取得できるAPI」の例で言えば、
https://s.hatena.ne.jp/blog.json/https://d.hatena.ne.jp/hatenastar/?callback=callbackにアクセスすると、
callback({"title":"\u306f\u3066\u306a\u30b9\u30bf\u30fc\u65e5\u8a18","star_count":"72048","uri":"https://d.hatena.ne.jp/hatenastar/"});
このようなJSONP形式の内容が返ってきます。
「?callback=callback」で指定したcallbackという名前で、JSON形式の内容（title,star_count,uriの情報）が囲まれています。これがJSONP形式になります。

このファイルは、HTMLファイルのscriptタグのsrc属性で直接読み込ませることができます。
<script type="text/javascript" src="https://s.hatena.ne.jp/blog.json/https://d.hatena.ne.jp/hatenastar/?callback=callback"></script>

そして、このデータをコールバック関数で処理すれば他ドメインのJavaScriptファイルを利用できます。（下のコードはサンプルで、alertで☆の総数を表示します）
<script type="text/javascript">
<!--
function callback(star){
alert(star.star_count);
}
//-->
</script>

コールバック関数は、JavaScriptのインクルードが完了した時点で自動的に処理されるため、HTML全体の表示処理に影響を与えることなく非同期に処理されます。

はじめてのJSONPプログラミングサンプル

サンプルとして、https://d.hatena.ne.jp/hatenastar/の☆の総数をalertで表示するHTMLファイルを作りました。参考にしてみてください。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset="UTF-8">
<title>はじめてのJSONPプログラミング</title>
<script type="text/javascript">
<!--
function callback(star){
alert(star.star_count);
}
//-->
</script>
</head>
<body>
<p>https://d.hatena.ne.jp/hatenastar/の☆の総数がalertで表示されます。</p>
<script type="text/javascript" src="https://s.hatena.ne.jp/blog.json/https://d.hatena.ne.jp/hatenastar/?callback=callback"></script>
</body>
</html>
実行例は、↓のページになります。
はじめてのJSONPプログラミング-サンプルページ

JSONPのまとめ

JSONPプログラムの流れは、以下のようになります。
他ドメインのJSONP形式のJavaScriptを読み込む
　↓
読み込みが完了したら、自動的にコールバック関数が実行される
　↓
JavaScriptによって、非同期でHTMLが書き換えられる

JSONPの良いところは、
  • クロスドメインのファイルを処理できること
  • 非同期で処理できること
  • サーバー側ではなく、クライアント側で処理できること
などがあげられます。
perl、PHP、Rubyなどのサーバー側のプログラミングの必要さえなく、HTMLファイルにJavaScriptのコードをちょっと書くだけで利用できる手軽さもポイントの一つです。

Google AJAX Feed APIなど、クロスドメイン制約を受けることなくプログラミングすることができるようになるのは、Webサイトの可能性を広げることにも繋がります。（セキュリティにも注意が必要ですが）
YouTubeのAPIなどもJSONP形式に対応していますので、興味のある方はぜひJSONPを試してみて下さい。


追記：JSONPに関するメモと便利そうなページのリンク集

関連リンク

←一つ前の記事へ