Submit Search
Upload
クロスドメインアクセスを理解してWeb APIを楽しく使おう
•
23 likes
•
36,115 views
K
kitfactory
Follow
Web API (Ajax/JSONP0の使い方を簡単にまとめてみました。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 15
Download now
Download to read offline
Recommended
WebSocketのキホン
WebSocketのキホン
You_Kinjoh
やってはいけない空振りDelete
やってはいけない空振りDelete
Yu Yamada
フロー効率性とリソース効率性について #xpjug
フロー効率性とリソース効率性について #xpjug
Itsuki Kuroda
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
Recruit Lifestyle Co., Ltd.
Redisの特徴と活用方法について
Redisの特徴と活用方法について
Yuji Otani
目grep入門 +解説
目grep入門 +解説
murachue
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
NTT DATA Technology & Innovation
マイクロサービスバックエンドAPIのためのRESTとgRPC
マイクロサービスバックエンドAPIのためのRESTとgRPC
disc99_
Recommended
WebSocketのキホン
WebSocketのキホン
You_Kinjoh
やってはいけない空振りDelete
やってはいけない空振りDelete
Yu Yamada
フロー効率性とリソース効率性について #xpjug
フロー効率性とリソース効率性について #xpjug
Itsuki Kuroda
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
Recruit Lifestyle Co., Ltd.
Redisの特徴と活用方法について
Redisの特徴と活用方法について
Yuji Otani
目grep入門 +解説
目grep入門 +解説
murachue
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
NTT DATA Technology & Innovation
マイクロサービスバックエンドAPIのためのRESTとgRPC
マイクロサービスバックエンドAPIのためのRESTとgRPC
disc99_
君はyarn.lockをコミットしているか?
君はyarn.lockをコミットしているか?
Teppei Sato
イベント・ソーシングを知る
イベント・ソーシングを知る
Shuhei Fujita
MongoDBが遅いときの切り分け方法
MongoDBが遅いときの切り分け方法
Tetsutaro Watanabe
Where狙いのキー、order by狙いのキー
Where狙いのキー、order by狙いのキー
yoku0825
怖くないSpring Bootのオートコンフィグレーション
怖くないSpring Bootのオートコンフィグレーション
土岐 孝平
テストコードの DRY と DAMP
テストコードの DRY と DAMP
Yusuke Kagata
いつやるの?Git入門 v1.1.0
いつやるの?Git入門 v1.1.0
Masakazu Matsushita
Java でつくる低レイテンシ実装の技巧
Java でつくる低レイテンシ実装の技巧
Ryosuke Yamazaki
イベント駆動プログラミングとI/O多重化
イベント駆動プログラミングとI/O多重化
Gosuke Miyashita
さくっと理解するSpring bootの仕組み
さくっと理解するSpring bootの仕組み
Takeshi Ogawa
PostgreSQL Unconference #5 ICU Collation
PostgreSQL Unconference #5 ICU Collation
Noriyoshi Shinoda
AWSのログ管理ベストプラクティス
AWSのログ管理ベストプラクティス
Akihiro Kuwano
GraphQLのsubscriptionで出来ること
GraphQLのsubscriptionで出来ること
Shingo Fukui
日本語テストメソッドについて
日本語テストメソッドについて
kumake
入社1年目のプログラミング初心者がSpringを学ぶための手引き
入社1年目のプログラミング初心者がSpringを学ぶための手引き
土岐 孝平
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
Hiroshi Tokumaru
Azure Api Management 俺的マニュアル 2020年3月版
Azure Api Management 俺的マニュアル 2020年3月版
貴志 上坂
ゲームアーキテクチャパターン (Aurora Serverless / DynamoDB)
ゲームアーキテクチャパターン (Aurora Serverless / DynamoDB)
Amazon Web Services Japan
systemd 再入門
systemd 再入門
Kazuhiro Nishiyama
ここが変だよ、グローバルスタンダードの脆弱性対策~入力値の考え方~
ここが変だよ、グローバルスタンダードの脆弱性対策~入力値の考え方~
Hiroshi Tokumaru
API Academy:マイクロサービス化へのファーストステップ
API Academy:マイクロサービス化へのファーストステップ
CA Technologies
ゆるべん Webアプリ開発概要 20130127
ゆるべん Webアプリ開発概要 20130127
Y
More Related Content
What's hot
君はyarn.lockをコミットしているか?
君はyarn.lockをコミットしているか?
Teppei Sato
イベント・ソーシングを知る
イベント・ソーシングを知る
Shuhei Fujita
MongoDBが遅いときの切り分け方法
MongoDBが遅いときの切り分け方法
Tetsutaro Watanabe
Where狙いのキー、order by狙いのキー
Where狙いのキー、order by狙いのキー
yoku0825
怖くないSpring Bootのオートコンフィグレーション
怖くないSpring Bootのオートコンフィグレーション
土岐 孝平
テストコードの DRY と DAMP
テストコードの DRY と DAMP
Yusuke Kagata
いつやるの?Git入門 v1.1.0
いつやるの?Git入門 v1.1.0
Masakazu Matsushita
Java でつくる低レイテンシ実装の技巧
Java でつくる低レイテンシ実装の技巧
Ryosuke Yamazaki
イベント駆動プログラミングとI/O多重化
イベント駆動プログラミングとI/O多重化
Gosuke Miyashita
さくっと理解するSpring bootの仕組み
さくっと理解するSpring bootの仕組み
Takeshi Ogawa
PostgreSQL Unconference #5 ICU Collation
PostgreSQL Unconference #5 ICU Collation
Noriyoshi Shinoda
AWSのログ管理ベストプラクティス
AWSのログ管理ベストプラクティス
Akihiro Kuwano
GraphQLのsubscriptionで出来ること
GraphQLのsubscriptionで出来ること
Shingo Fukui
日本語テストメソッドについて
日本語テストメソッドについて
kumake
入社1年目のプログラミング初心者がSpringを学ぶための手引き
入社1年目のプログラミング初心者がSpringを学ぶための手引き
土岐 孝平
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
Hiroshi Tokumaru
Azure Api Management 俺的マニュアル 2020年3月版
Azure Api Management 俺的マニュアル 2020年3月版
貴志 上坂
ゲームアーキテクチャパターン (Aurora Serverless / DynamoDB)
ゲームアーキテクチャパターン (Aurora Serverless / DynamoDB)
Amazon Web Services Japan
systemd 再入門
systemd 再入門
Kazuhiro Nishiyama
ここが変だよ、グローバルスタンダードの脆弱性対策~入力値の考え方~
ここが変だよ、グローバルスタンダードの脆弱性対策~入力値の考え方~
Hiroshi Tokumaru
What's hot
(20)
君はyarn.lockをコミットしているか?
君はyarn.lockをコミットしているか?
イベント・ソーシングを知る
イベント・ソーシングを知る
MongoDBが遅いときの切り分け方法
MongoDBが遅いときの切り分け方法
Where狙いのキー、order by狙いのキー
Where狙いのキー、order by狙いのキー
怖くないSpring Bootのオートコンフィグレーション
怖くないSpring Bootのオートコンフィグレーション
テストコードの DRY と DAMP
テストコードの DRY と DAMP
いつやるの?Git入門 v1.1.0
いつやるの?Git入門 v1.1.0
Java でつくる低レイテンシ実装の技巧
Java でつくる低レイテンシ実装の技巧
イベント駆動プログラミングとI/O多重化
イベント駆動プログラミングとI/O多重化
さくっと理解するSpring bootの仕組み
さくっと理解するSpring bootの仕組み
PostgreSQL Unconference #5 ICU Collation
PostgreSQL Unconference #5 ICU Collation
AWSのログ管理ベストプラクティス
AWSのログ管理ベストプラクティス
GraphQLのsubscriptionで出来ること
GraphQLのsubscriptionで出来ること
日本語テストメソッドについて
日本語テストメソッドについて
入社1年目のプログラミング初心者がSpringを学ぶための手引き
入社1年目のプログラミング初心者がSpringを学ぶための手引き
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
Azure Api Management 俺的マニュアル 2020年3月版
Azure Api Management 俺的マニュアル 2020年3月版
ゲームアーキテクチャパターン (Aurora Serverless / DynamoDB)
ゲームアーキテクチャパターン (Aurora Serverless / DynamoDB)
systemd 再入門
systemd 再入門
ここが変だよ、グローバルスタンダードの脆弱性対策~入力値の考え方~
ここが変だよ、グローバルスタンダードの脆弱性対策~入力値の考え方~
Similar to クロスドメインアクセスを理解してWeb APIを楽しく使おう
API Academy:マイクロサービス化へのファーストステップ
API Academy:マイクロサービス化へのファーストステップ
CA Technologies
ゆるべん Webアプリ開発概要 20130127
ゆるべん Webアプリ開発概要 20130127
Y
勉強会資料①
勉強会資料①
真亮 坂口
WebAppDev勉強会 #1 at cafe? IKAGAWA DO
WebAppDev勉強会 #1 at cafe? IKAGAWA DO
Kohei Noda
ASP.NET Core 概要(2017年3月時点)
ASP.NET Core 概要(2017年3月時点)
Atsushi Yokohama (BEACHSIDE)
AWS Lambdaと AWS API Gatewayを使ったREST API作り
AWS Lambdaと AWS API Gatewayを使ったREST API作り
iPride Co., Ltd.
Webサービス入門
Webサービス入門
H MM
非エンジニアカンファレンス資料の抜粋
非エンジニアカンファレンス資料の抜粋
div Inc
JSON Schema で Web API のスキマを埋めよう
JSON Schema で Web API のスキマを埋めよう
VOYAGE GROUP
Serverless backendformobilegame and_aws-appsync_gamingtechnight-2
Serverless backendformobilegame and_aws-appsync_gamingtechnight-2
Amazon Web Services Japan
非エンジニアでもわかる
非エンジニアでもわかる
ssuser33820e
REST API マスターへの道 - Office 365 パワーユーザー向け
REST API マスターへの道 - Office 365 パワーユーザー向け
Hirofumi Ota
Thin Server Architectureでブログ作った #ikam
Thin Server Architectureでブログ作った #ikam
Toshiaki Maki
WordPressAPI
WordPressAPI
Yuki Okamoto
Cockatoo
Cockatoo
Hiroaki Kubota
とあるCocos2dx入門編
とあるCocos2dx入門編
kumin1030
Lt7 SPA
Lt7 SPA
GIG inc.
Apps for office オンプレミスとクラウド
Apps for office オンプレミスとクラウド
Hirotada Watanabe
Hypermedia: The Missing Element to Building Adaptable Web APIs in Rails (増補日本語版)
Hypermedia: The Missing Element to Building Adaptable Web APIs in Rails (増補日本語版)
Toru Kawamura
Railsの運用について
Railsの運用について
Yuuki Namikawa
Similar to クロスドメインアクセスを理解してWeb APIを楽しく使おう
(20)
API Academy:マイクロサービス化へのファーストステップ
API Academy:マイクロサービス化へのファーストステップ
ゆるべん Webアプリ開発概要 20130127
ゆるべん Webアプリ開発概要 20130127
勉強会資料①
勉強会資料①
WebAppDev勉強会 #1 at cafe? IKAGAWA DO
WebAppDev勉強会 #1 at cafe? IKAGAWA DO
ASP.NET Core 概要(2017年3月時点)
ASP.NET Core 概要(2017年3月時点)
AWS Lambdaと AWS API Gatewayを使ったREST API作り
AWS Lambdaと AWS API Gatewayを使ったREST API作り
Webサービス入門
Webサービス入門
非エンジニアカンファレンス資料の抜粋
非エンジニアカンファレンス資料の抜粋
JSON Schema で Web API のスキマを埋めよう
JSON Schema で Web API のスキマを埋めよう
Serverless backendformobilegame and_aws-appsync_gamingtechnight-2
Serverless backendformobilegame and_aws-appsync_gamingtechnight-2
非エンジニアでもわかる
非エンジニアでもわかる
REST API マスターへの道 - Office 365 パワーユーザー向け
REST API マスターへの道 - Office 365 パワーユーザー向け
Thin Server Architectureでブログ作った #ikam
Thin Server Architectureでブログ作った #ikam
WordPressAPI
WordPressAPI
Cockatoo
Cockatoo
とあるCocos2dx入門編
とあるCocos2dx入門編
Lt7 SPA
Lt7 SPA
Apps for office オンプレミスとクラウド
Apps for office オンプレミスとクラウド
Hypermedia: The Missing Element to Building Adaptable Web APIs in Rails (増補日本語版)
Hypermedia: The Missing Element to Building Adaptable Web APIs in Rails (増補日本語版)
Railsの運用について
Railsの運用について
Recently uploaded
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
danielhu54
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
Recently uploaded
(9)
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
クロスドメインアクセスを理解してWeb APIを楽しく使おう
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鯖江駅(1番のりば)", "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などで対応する。
Download now