JSONPとFREDDY

JSONPによるクロスドメイン通信

　今回から、静岡大学情報学部で筆者らの研究室が取り組んでいる「FREDDY」という手法の説明に入る。その前に、まずは「第1回：JSONとFREDDY、変貌するWeb技術（http://www.thinkit.co.jp/article/116/1/）」で触れることのできなかったJSONPについて、少し説明しておこうと思う。

　「第1回：JSONとFREDDY、変貌するWeb技術（http://www.thinkit.co.jp/article/116/1/）」の最後でJSONデータをAjaxにより読み込む手法を説明した。しかしながらAjaxにはクロスドメイン制約があり、HTMLファイルを取得したサーバーとしか通信することができない。

　これは「不便」ではあるが「セキュリティー」上の理由で、Webブラウザはそういう実装になっている。ところがDynamic Script Tagを利用したJSONPはこのAjaxの制約を回避することができ、データ通信を考える場合、とても「便利」である。

　しかし裏返すと、「便利」になったということは「セキュリティーホール」になりうるということである。JSONPやFREDDYで重要な情報を扱う場合、Cross Site Request Forgeriesと呼ばれる、第三者への情報漏えいの脆弱（ぜいじゃく）性に注意しなければならない。ただし、この脆弱（ぜいじゃく）性の問題については本特集ではこれ以上の説明は行わないので、興味のある方は各自調べていただきたい。

　「そもそも論」で恐縮だが、インターネットは他人のコンピュータから情報を取ってくる目的で作られたネットワークであり、隠す目的で作られたものではない。あくまで本特集では、WebサーバーからWebブラウザへデータを送信する手法にのみ注目したい。

JSONPでデータを取得する

　さて、JSONPの使い方を実際のWebサービスを使って説明したい。ここでは緯度経度から最寄り駅を算出するWebサービス（HeartRails Express（http://express.heartrails.com/））を利用する。JSONPのフォーマットはJavaScriptの関数コールであり、引数としてJSONデータを格納している。つまり、その関数をWebブラウザ上で用意しておけば、JSONPを読み込んだ時に勝手に関数が呼ばれ、その関数にデータが渡るという仕組みである。

　例えば以下のような関数を定義する。

function hello (world){ /* データ処理ルーティン */ }

　Webサービスの出力データはworldへ格納される。仕組みとしてはworldに格納されるデータの形式は何でも構わないが、基本的にはJSON形式のオブジェクトが利用される。

　上述の最寄り駅検索Webサービスのクエリ・ストリングはサービスの指定（method = getStation）、緯度（y）、経度（x）、コールバック関数名（json）をとる。筆者の大学の所在地は北緯34.724991度、東経137.717595度なので、大学の最寄り駅を求めるWebサービスのURLは以下のようになる。

http://express.heartrails.com/api/json?method=getStations&y=34.724991&x=137.717595&jsonp=hello

　このURLにアクセスすると、与えられた座標に基づき、最寄り駅が得られる。私はバイク通勤のため知らなかったが、遠州鉄道の八幡駅が最寄りらしい（浜松駅からバスの方が便利だが）。ジオコーディング（http://www.geocoding.jp/）を利用すると、住所から緯度経度を算出できるので、皆さんも試してみたらいかがだろうか。

　さて、JSONPのデータをWebブラウザへ読み込み、コールバック関数に通知する手法にはDynamic Script Tagを利用する。この手法は、これから説明するFREDDYでも使われているので、ここでは省略する。