Submit Search
Upload
クロスドメインアクセスを理解してWeb APIを楽しく使おう
•
23 likes
•
36,103 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
Micrometer/Prometheusによる大規模システムモニタリング #jsug #sf_26
Micrometer/Prometheusによる大規模システムモニタリング #jsug #sf_26
Yahoo!デベロッパーネットワーク
Swagger ではない OpenAPI Specification 3.0 による API サーバー開発
Swagger ではない OpenAPI Specification 3.0 による API サーバー開発
Yahoo!デベロッパーネットワーク
AWSのログ管理ベストプラクティス
AWSのログ管理ベストプラクティス
Akihiro Kuwano
忙しい人のための Rocky Linux 入門〜Rocky LinuxはCentOSの後継者たり得るか?〜
忙しい人のための Rocky Linux 入門〜Rocky LinuxはCentOSの後継者たり得るか?〜
Masahito Zembutsu
Dockerを社内で使うために
Dockerを社内で使うために
エンジニア勉強会 エスキュービズム
分散トレーシング技術について(Open tracingやjaeger)
分散トレーシング技術について(Open tracingやjaeger)
NTT Communications Technology Development
Rest ful api設計入門
Rest ful api設計入門
Monstar Lab Inc.
ソフトウェア開発における『知の高速道路』
ソフトウェア開発における『知の高速道路』
Yoshitaka Kawashima
Recommended
Micrometer/Prometheusによる大規模システムモニタリング #jsug #sf_26
Micrometer/Prometheusによる大規模システムモニタリング #jsug #sf_26
Yahoo!デベロッパーネットワーク
Swagger ではない OpenAPI Specification 3.0 による API サーバー開発
Swagger ではない OpenAPI Specification 3.0 による API サーバー開発
Yahoo!デベロッパーネットワーク
AWSのログ管理ベストプラクティス
AWSのログ管理ベストプラクティス
Akihiro Kuwano
忙しい人のための Rocky Linux 入門〜Rocky LinuxはCentOSの後継者たり得るか?〜
忙しい人のための Rocky Linux 入門〜Rocky LinuxはCentOSの後継者たり得るか?〜
Masahito Zembutsu
Dockerを社内で使うために
Dockerを社内で使うために
エンジニア勉強会 エスキュービズム
分散トレーシング技術について(Open tracingやjaeger)
分散トレーシング技術について(Open tracingやjaeger)
NTT Communications Technology Development
Rest ful api設計入門
Rest ful api設計入門
Monstar Lab Inc.
ソフトウェア開発における『知の高速道路』
ソフトウェア開発における『知の高速道路』
Yoshitaka Kawashima
脱RESTful API設計の提案
脱RESTful API設計の提案
樽八 仲川
kubernetes初心者がKnative Lambda Runtime触ってみた(Kubernetes Novice Tokyo #13 発表資料)
kubernetes初心者がKnative Lambda Runtime触ってみた(Kubernetes Novice Tokyo #13 発表資料)
NTT DATA Technology & Innovation
マルチテナントのアプリケーション実装〜実践編〜
マルチテナントのアプリケーション実装〜実践編〜
Yoshiki Nakagawa
フロー効率性とリソース効率性について #xpjug
フロー効率性とリソース効率性について #xpjug
Itsuki Kuroda
シリコンバレーの「何が」凄いのか
シリコンバレーの「何が」凄いのか
Atsushi Nakada
忙しい人の5分で分かるDocker 2017年春Ver
忙しい人の5分で分かるDocker 2017年春Ver
Masahito Zembutsu
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
PHPからgoへの移行で分かったこと
PHPからgoへの移行で分かったこと
gree_tech
20210127 今日から始めるイベントドリブンアーキテクチャ AWS Expert Online #13
20210127 今日から始めるイベントドリブンアーキテクチャ AWS Expert Online #13
Amazon Web Services Japan
メルカリ・ソウゾウでは どうGoを活用しているのか?
メルカリ・ソウゾウでは どうGoを活用しているのか?
Takuya Ueda
40歳過ぎてもエンジニアでいるためにやっていること
40歳過ぎてもエンジニアでいるためにやっていること
onozaty
技術選択とアーキテクトの役割
技術選択とアーキテクトの役割
Toru Yamaguchi
第1回JUnit勉強会ハンズオン
第1回JUnit勉強会ハンズオン
equj65
Twitterのsnowflakeについて
Twitterのsnowflakeについて
moai kids
DevOps with Database on AWS
DevOps with Database on AWS
Amazon Web Services Japan
マイクロサービス化デザインパターン - #AWSDevDay Tokyo 2018
マイクロサービス化デザインパターン - #AWSDevDay Tokyo 2018
Yusuke Suzuki
WebSocketでカメラの映像を共有してみた
WebSocketでカメラの映像を共有してみた
onozaty
AWSとオンプレミスを繋ぐときに知っておきたいルーティングの基礎知識(CCSI監修!)
AWSとオンプレミスを繋ぐときに知っておきたいルーティングの基礎知識(CCSI監修!)
Trainocate Japan, Ltd.
ZOZOTOWNのマルチクラウドへの挑戦と挫折、そして未来
ZOZOTOWNのマルチクラウドへの挑戦と挫折、そして未来
Hiromasa Oka
MLOps Yearning ~ 実運用システムを構築する前にデータサイエンティストが考えておきたいこと
MLOps Yearning ~ 実運用システムを構築する前にデータサイエンティストが考えておきたいこと
Rakuten Group, Inc.
API Academy:マイクロサービス化へのファーストステップ
API Academy:マイクロサービス化へのファーストステップ
CA Technologies
ゆるべん Webアプリ開発概要 20130127
ゆるべん Webアプリ開発概要 20130127
Y
More Related Content
What's hot
脱RESTful API設計の提案
脱RESTful API設計の提案
樽八 仲川
kubernetes初心者がKnative Lambda Runtime触ってみた(Kubernetes Novice Tokyo #13 発表資料)
kubernetes初心者がKnative Lambda Runtime触ってみた(Kubernetes Novice Tokyo #13 発表資料)
NTT DATA Technology & Innovation
マルチテナントのアプリケーション実装〜実践編〜
マルチテナントのアプリケーション実装〜実践編〜
Yoshiki Nakagawa
フロー効率性とリソース効率性について #xpjug
フロー効率性とリソース効率性について #xpjug
Itsuki Kuroda
シリコンバレーの「何が」凄いのか
シリコンバレーの「何が」凄いのか
Atsushi Nakada
忙しい人の5分で分かるDocker 2017年春Ver
忙しい人の5分で分かるDocker 2017年春Ver
Masahito Zembutsu
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
PHPからgoへの移行で分かったこと
PHPからgoへの移行で分かったこと
gree_tech
20210127 今日から始めるイベントドリブンアーキテクチャ AWS Expert Online #13
20210127 今日から始めるイベントドリブンアーキテクチャ AWS Expert Online #13
Amazon Web Services Japan
メルカリ・ソウゾウでは どうGoを活用しているのか?
メルカリ・ソウゾウでは どうGoを活用しているのか?
Takuya Ueda
40歳過ぎてもエンジニアでいるためにやっていること
40歳過ぎてもエンジニアでいるためにやっていること
onozaty
技術選択とアーキテクトの役割
技術選択とアーキテクトの役割
Toru Yamaguchi
第1回JUnit勉強会ハンズオン
第1回JUnit勉強会ハンズオン
equj65
Twitterのsnowflakeについて
Twitterのsnowflakeについて
moai kids
DevOps with Database on AWS
DevOps with Database on AWS
Amazon Web Services Japan
マイクロサービス化デザインパターン - #AWSDevDay Tokyo 2018
マイクロサービス化デザインパターン - #AWSDevDay Tokyo 2018
Yusuke Suzuki
WebSocketでカメラの映像を共有してみた
WebSocketでカメラの映像を共有してみた
onozaty
AWSとオンプレミスを繋ぐときに知っておきたいルーティングの基礎知識(CCSI監修!)
AWSとオンプレミスを繋ぐときに知っておきたいルーティングの基礎知識(CCSI監修!)
Trainocate Japan, Ltd.
ZOZOTOWNのマルチクラウドへの挑戦と挫折、そして未来
ZOZOTOWNのマルチクラウドへの挑戦と挫折、そして未来
Hiromasa Oka
MLOps Yearning ~ 実運用システムを構築する前にデータサイエンティストが考えておきたいこと
MLOps Yearning ~ 実運用システムを構築する前にデータサイエンティストが考えておきたいこと
Rakuten Group, Inc.
What's hot
(20)
脱RESTful API設計の提案
脱RESTful API設計の提案
kubernetes初心者がKnative Lambda Runtime触ってみた(Kubernetes Novice Tokyo #13 発表資料)
kubernetes初心者がKnative Lambda Runtime触ってみた(Kubernetes Novice Tokyo #13 発表資料)
マルチテナントのアプリケーション実装〜実践編〜
マルチテナントのアプリケーション実装〜実践編〜
フロー効率性とリソース効率性について #xpjug
フロー効率性とリソース効率性について #xpjug
シリコンバレーの「何が」凄いのか
シリコンバレーの「何が」凄いのか
忙しい人の5分で分かるDocker 2017年春Ver
忙しい人の5分で分かるDocker 2017年春Ver
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
PHPからgoへの移行で分かったこと
PHPからgoへの移行で分かったこと
20210127 今日から始めるイベントドリブンアーキテクチャ AWS Expert Online #13
20210127 今日から始めるイベントドリブンアーキテクチャ AWS Expert Online #13
メルカリ・ソウゾウでは どうGoを活用しているのか?
メルカリ・ソウゾウでは どうGoを活用しているのか?
40歳過ぎてもエンジニアでいるためにやっていること
40歳過ぎてもエンジニアでいるためにやっていること
技術選択とアーキテクトの役割
技術選択とアーキテクトの役割
第1回JUnit勉強会ハンズオン
第1回JUnit勉強会ハンズオン
Twitterのsnowflakeについて
Twitterのsnowflakeについて
DevOps with Database on AWS
DevOps with Database on AWS
マイクロサービス化デザインパターン - #AWSDevDay Tokyo 2018
マイクロサービス化デザインパターン - #AWSDevDay Tokyo 2018
WebSocketでカメラの映像を共有してみた
WebSocketでカメラの映像を共有してみた
AWSとオンプレミスを繋ぐときに知っておきたいルーティングの基礎知識(CCSI監修!)
AWSとオンプレミスを繋ぐときに知っておきたいルーティングの基礎知識(CCSI監修!)
ZOZOTOWNのマルチクラウドへの挑戦と挫折、そして未来
ZOZOTOWNのマルチクラウドへの挑戦と挫折、そして未来
MLOps Yearning ~ 実運用システムを構築する前にデータサイエンティストが考えておきたいこと
MLOps Yearning ~ 実運用システムを構築する前にデータサイエンティストが考えておきたいこと
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
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
danielhu54
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
osamut
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
Atomu Hidaka
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdf
furutsuka
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
Shota Ito
Recently uploaded
(9)
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdf
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
クロスドメインアクセスを理解して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