クロスドメインアクセスを しっかり理解して、

Web APIを楽しく使おう!!

本資料の目的

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

Web APIとは？• ざっくり言うと最近のWebを使ったサービスでは、ブラウザからリクエストを行い、サーバーのデータを取得し、そのデータに基づいてブラウザで表示している内容を変更します。そのサーバー側で提供している、データ提供やりとりの決まりをAPIと言います。

• ブラウザのリクエストの中にはどんなデータが欲しいと指定して送信し、サーバーからはJSONやXMLなどの形式でデータが帰ってくることが多いです。

XMLHttpRequestなど

JSON/XMLなど

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}, ・・・]})

バス停の位置は？

バス停データ

バス停データ

では、なるだけ簡単に Web APIを利用してみよう

• JavaScriptのライブラリjQueryのajax使う

• $.ajax( パラメーター );　で実行する。

jQuery.ajaxパラメーターパラメーター 内容

type POST/GET/PUTなどHTTPのメソッド

data サーバーへの引数。オブジェクトの場合、&key1=val1と自動的に展開

dataType サーバーから返却される値のタイプ

success 通信成功時の処理（関数）

error 通信失敗時の処理（関数）

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!!"); } });

きちんと処理するには、 コールバック関数へ渡される全ての引数を処理しよう。

残念、怒られました！

• 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と異なります。

エラーの理由 同一ドメイン制約

• 昔、ブラウザのXMLHttpRequestからはHTML文書と同じドメインのXMLやテキストファイルにしかアクセスできなかった

xxxx.html

別サイトへのアクセスを発行しない

クロスドメインアクセスを可能にした XMLHttpRequest　Level2

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

xxxx.html

データをください

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

サーバーにも壁があることも• Webサーバー側でも同一ドメイン制約をかけている事も多い。

• それが先ほどのエラー

xxxx.html 別サイトからの アクセスを許さない

サーバーも壁があるなら JSONP

• JavaScriptの読み込みは同一ドメイン制約がないので、それを利用したデータの受け渡しを行う。

• サーバーから渡したいJSON形式データに詰め物（パディング）したJavaScriptを渡すので、JSONPと呼ばれる。

• コールバック関数がポイント。

JSONPの仕組み

①xxxx.htmlを読みこんでいる

②データの入った JavaScriptを要求

コールバック( { data:10 } //返却したいデータ );

③渡したいJSONデータを引数にして、 関数の呼び出しを行うJavaScriptを返却

④JavaScriptを読み込み、処理すると、　予め準備してあるコールバック関数が呼び出される。　コールバック関数では引数として、 　サーバーが返してきたデータ値を取得できる。

まとめ• Web APIを使うにはjQueryの$.ajax()などを使いましょう。便利です。

• ブラウザ側のクロスドメイン制約はXMLHttpRequest Level2にて解消されている。

• ただし、サーバー側で絞っている場合もあるので、JSONPなどで対応する。