Web API (Ajax/JSONP0の使い方を簡単にまとめてみました。

1. クロスドメインアクセスを
しっかり理解して、
Web APIを楽しく使おう!!

2. 本資料の目的
• サーバーからデータを取得するWeb APIを
使ったプログラミングを行うため、
Web APIの仕組みを予めきちんと知っておき、
楽しく、きれいなプログラミングをしましょう。

3. Web APIとは？
• ざっくり言うと最近のWebを使ったサービスでは、ブラウザから
リクエストを行い、サーバーのデータを取得し、そのデータに基
づいてブラウザで表示している内容を変更します。そのサーバー側
で提供している、データ提供やりとりの決まりをAPIと言います。
• ブラウザのリクエストの中にはどんなデータが欲しいと指定して
送信し、サーバーからはJSONやXMLなどの形式でデータが帰っ
てくることが多いです。
XMLHttpRequestなど
JSON/XMLなど

4. Web APIの実際の
HTTPの中身を覗いてみる
• Web APIを使う時はHTTPないしはHTTPSと呼
ばれる通信が行われます。その内容を見ると、
次のようになります。
http://www.city.sabae.fukui.jp/users/tutujibus/_src/sc2539/WEB-API-manual5Bfix25D.pdf
jsonp_callback(
{ busstop :[
{ id : 1 ,
"name":"JR鯖江駅（１番のりば)",
"latitude":35.943302,"longitude":136.188187},
{ id":"2",
name":"本町1丁目（東",
"latitude":35.944408,"longitude":136.185257},
・・・]})
バス停の位置は？
バス停データ
バス停データ

5. では、なるだけ簡単に
Web APIを利用してみよう
• JavaScriptのライブラリjQueryのajax使う
• $.ajax( パラメーター ); で実行する。

6. jQuery.ajaxパラメーター
パラメーター 内容
type POST/GET/PUTなどHTTPのメソッド
data
サーバーへの引数。オブジェクトの場合、
&key1=val1と自動的に展開
dataType サーバーから返却される値のタイプ
success 通信成功時の処理（関数）
error 通信失敗時の処理（関数）

7. jQuery.ajax()がわかったところで、
SimpleAPIを相手にWeb API利用に挑戦
• ローカルで作ったHTMLファイルから、
Simple APIで富士山のWikipedia記事データを取得
$.ajax({
url: "http://wikipedia.simpleapi.net/api",
type: "GET",
data: {keyword:"富士山"},
success: function(data){
console.log("success!!");
},
error: function(){
console.log("error!!");
}
});
きちんと処理するには、
コールバック関数へ渡される
全ての引数を処理しよう。

8. 残念、怒られました！
• XMLHttpRequest cannot load http://
wikipedia.simpleapi.net/api?keyword=%E5%AF
%8C%E5%A3%AB%E5%B1%B1. No 'Access-
Control-Allow-Origin' header is present on the
requested resource. Origin 'null' is therefore
not allowed access. index.html:1 オリジンとなるドメインは
ローカルファイルを
使ったのでnullとなり、
simple.netと異なります。

9. エラーの理由
同一ドメイン制約
• 昔、ブラウザのXMLHttpRequestからはHTML文
書と同じドメインのXMLやテキストファイルにしか
アクセスできなかった
xxxx.html
別サイトへのアクセスを発行しない

10. クロスドメインアクセスを可能にした
XMLHttpRequest Level2
• ただし時代は変わり、ブラウザの
XMLHttpRequestからはHTML文書と同じドメイ
ンでないXMLやテキストファイルにもアクセスで
きるようになった！！(先ほどのnullオリジンでも)
xxxx.html
データをください

11. あれ？
それなら先ほどのクロスドメインは
正しくアクセスできるのでは？
先ほどのエラーがでないのでは？

12. サーバーにも壁があることも
• Webサーバー側でも同一ドメイン制約をかけている
事も多い。
• それが先ほどのエラー
xxxx.html 別サイトからの
アクセスを許さない

13. サーバーも壁があるなら
JSONP
• JavaScriptの読み込みは同一ドメイン制約がない
ので、それを利用したデータの受け渡しを行う。
• サーバーから渡したいJSON形式データに詰め物（パ
ディング）したJavaScriptを渡すので、JSONPと
呼ばれる。
• コールバック関数がポイント。

14. JSONPの仕組み
①xxxx.htmlを読みこんでいる
②データの入った
JavaScriptを要求
コールバック(
{ data:10 } //返却したいデータ
);
③渡したいJSONデータを引数にして、
関数の呼び出しを行うJavaScriptを返却
④JavaScriptを読み込み、処理すると、
予め準備してあるコールバック関数が呼び出される。
コールバック関数では引数として、
サーバーが返してきたデータ値を取得できる。

15. まとめ
• Web APIを使うにはjQueryの$.ajax()などを使い
ましょう。便利です。
• ブラウザ側のクロスドメイン制約は
XMLHttpRequest Level2にて解消されている。
• ただし、サーバー側で絞っている場合もあるので、
JSONPなどで対応する。