クロスドメインアクセスを理解してWeb APIを楽しく使おう
-
Upload
kitfactory -
Category
Technology
-
view
6.428 -
download
3
description
Transcript of クロスドメインアクセスを理解してWeb APIを楽しく使おう
![Page 1: クロスドメインアクセスを理解してWeb APIを楽しく使おう](https://reader035.fdocuments.net/reader035/viewer/2022062220/558dec2b1a28ab37668b457a/html5/thumbnails/1.jpg)
クロスドメインアクセスを しっかり理解して、
Web APIを楽しく使おう!!
![Page 2: クロスドメインアクセスを理解してWeb APIを楽しく使おう](https://reader035.fdocuments.net/reader035/viewer/2022062220/558dec2b1a28ab37668b457a/html5/thumbnails/2.jpg)
本資料の目的
• サーバーからデータを取得するWeb APIを使ったプログラミングを行うため、Web APIの仕組みを予めきちんと知っておき、 楽しく、きれいなプログラミングをしましょう。
![Page 3: クロスドメインアクセスを理解してWeb APIを楽しく使おう](https://reader035.fdocuments.net/reader035/viewer/2022062220/558dec2b1a28ab37668b457a/html5/thumbnails/3.jpg)
Web APIとは?• ざっくり言うと最近のWebを使ったサービスでは、ブラウザからリクエストを行い、サーバーのデータを取得し、そのデータに基づいてブラウザで表示している内容を変更します。そのサーバー側で提供している、データ提供やりとりの決まりをAPIと言います。
• ブラウザのリクエストの中にはどんなデータが欲しいと指定して送信し、サーバーからはJSONやXMLなどの形式でデータが帰ってくることが多いです。
XMLHttpRequestなど
JSON/XMLなど
![Page 4: クロスドメインアクセスを理解してWeb APIを楽しく使おう](https://reader035.fdocuments.net/reader035/viewer/2022062220/558dec2b1a28ab37668b457a/html5/thumbnails/4.jpg)
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鯖江駅(1番のりば)", "latitude":35.943302,"longitude":136.188187}, {“id":"2", “name":"本町1丁目(東", "latitude":35.944408,"longitude":136.185257}, ・・・]})
バス停の位置は?
バス停データ
バス停データ
![Page 5: クロスドメインアクセスを理解してWeb APIを楽しく使おう](https://reader035.fdocuments.net/reader035/viewer/2022062220/558dec2b1a28ab37668b457a/html5/thumbnails/5.jpg)
では、なるだけ簡単に Web APIを利用してみよう
• JavaScriptのライブラリjQueryのajax使う
• $.ajax( パラメーター ); で実行する。
![Page 6: クロスドメインアクセスを理解してWeb APIを楽しく使おう](https://reader035.fdocuments.net/reader035/viewer/2022062220/558dec2b1a28ab37668b457a/html5/thumbnails/6.jpg)
jQuery.ajaxパラメーターパラメーター 内容
type POST/GET/PUTなどHTTPのメソッド
data サーバーへの引数。オブジェクトの場合、&key1=val1と自動的に展開
dataType サーバーから返却される値のタイプ
success 通信成功時の処理(関数)
error 通信失敗時の処理(関数)
![Page 7: クロスドメインアクセスを理解してWeb APIを楽しく使おう](https://reader035.fdocuments.net/reader035/viewer/2022062220/558dec2b1a28ab37668b457a/html5/thumbnails/7.jpg)
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!!"); } });
きちんと処理するには、 コールバック関数へ渡される全ての引数を処理しよう。
![Page 8: クロスドメインアクセスを理解してWeb APIを楽しく使おう](https://reader035.fdocuments.net/reader035/viewer/2022062220/558dec2b1a28ab37668b457a/html5/thumbnails/8.jpg)
残念、怒られました!
• 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と異なります。
![Page 9: クロスドメインアクセスを理解してWeb APIを楽しく使おう](https://reader035.fdocuments.net/reader035/viewer/2022062220/558dec2b1a28ab37668b457a/html5/thumbnails/9.jpg)
エラーの理由 同一ドメイン制約
• 昔、ブラウザのXMLHttpRequestからはHTML文書と同じドメインのXMLやテキストファイルにしかアクセスできなかった
xxxx.html
別サイトへのアクセスを発行しない
![Page 10: クロスドメインアクセスを理解してWeb APIを楽しく使おう](https://reader035.fdocuments.net/reader035/viewer/2022062220/558dec2b1a28ab37668b457a/html5/thumbnails/10.jpg)
クロスドメインアクセスを可能にした XMLHttpRequest Level2
• ただし時代は変わり、ブラウザのXMLHttpRequestからはHTML文書と同じドメインでないXMLやテキストファイルにもアクセスできるようになった!!(先ほどのnullオリジンでも)
xxxx.html
データをください
![Page 11: クロスドメインアクセスを理解してWeb APIを楽しく使おう](https://reader035.fdocuments.net/reader035/viewer/2022062220/558dec2b1a28ab37668b457a/html5/thumbnails/11.jpg)
あれ? それなら先ほどのクロスドメインは 正しくアクセスできるのでは? 先ほどのエラーがでないのでは?
![Page 12: クロスドメインアクセスを理解してWeb APIを楽しく使おう](https://reader035.fdocuments.net/reader035/viewer/2022062220/558dec2b1a28ab37668b457a/html5/thumbnails/12.jpg)
サーバーにも壁があることも• Webサーバー側でも同一ドメイン制約をかけている事も多い。
• それが先ほどのエラー
xxxx.html 別サイトからの アクセスを許さない
![Page 13: クロスドメインアクセスを理解してWeb APIを楽しく使おう](https://reader035.fdocuments.net/reader035/viewer/2022062220/558dec2b1a28ab37668b457a/html5/thumbnails/13.jpg)
サーバーも壁があるなら JSONP
• JavaScriptの読み込みは同一ドメイン制約がないので、それを利用したデータの受け渡しを行う。
• サーバーから渡したいJSON形式データに詰め物(パディング)したJavaScriptを渡すので、JSONPと呼ばれる。
• コールバック関数がポイント。
![Page 14: クロスドメインアクセスを理解してWeb APIを楽しく使おう](https://reader035.fdocuments.net/reader035/viewer/2022062220/558dec2b1a28ab37668b457a/html5/thumbnails/14.jpg)
JSONPの仕組み
①xxxx.htmlを読みこんでいる
②データの入った JavaScriptを要求
コールバック( { data:10 } //返却したいデータ );
③渡したいJSONデータを引数にして、 関数の呼び出しを行うJavaScriptを返却
④JavaScriptを読み込み、処理すると、 予め準備してあるコールバック関数が呼び出される。 コールバック関数では引数として、 サーバーが返してきたデータ値を取得できる。
![Page 15: クロスドメインアクセスを理解してWeb APIを楽しく使おう](https://reader035.fdocuments.net/reader035/viewer/2022062220/558dec2b1a28ab37668b457a/html5/thumbnails/15.jpg)
まとめ• Web APIを使うにはjQueryの$.ajax()などを使いましょう。便利です。
• ブラウザ側のクロスドメイン制約はXMLHttpRequest Level2にて解消されている。
• ただし、サーバー側で絞っている場合もあるので、JSONPなどで対応する。