Enviar pesquisa
Carregar
第9回rest勉強会 ダウンロード・アップロード編
•
3 gostaram
•
3,953 visualizações
K
ksimoji
Seguir
2015/9/25に行われたAWS上で構築するRESTfulアプリ勉強会~Web開発ワークショップ~【第9回】で使用した資料です。
Leia menos
Leia mais
Software
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 57
Baixar agora
Baixar para ler offline
Recomendados
Docker composeで開発環境をメンバに配布せよ
Docker composeで開発環境をメンバに配布せよ
Yusuke Kon
ClassLoader Leak Patterns
ClassLoader Leak Patterns
nekop
Dockerで始める Java EE アプリケーション開発 for JJUG CCC 2017
Dockerで始める Java EE アプリケーション開発 for JJUG CCC 2017
Kohei Saito
JavaScriptでSQLを唱えたいだけの人生だった
JavaScriptでSQLを唱えたいだけの人生だった
iPride Co., Ltd.
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること
日本マイクロソフト株式会社
bashでWebブラウザ(Selenium WebDriver)を動かした話
bashでWebブラウザ(Selenium WebDriver)を動かした話
洋史 東平
3層アーキテクチャとMVCモデル -LaravelにおけるMVCモデルの流れ-
3層アーキテクチャとMVCモデル -LaravelにおけるMVCモデルの流れ-
yoshitaro yoyo
開発環境をVagrantからdockerに移行してみた
開発環境をVagrantからdockerに移行してみた
pyar6329
Recomendados
Docker composeで開発環境をメンバに配布せよ
Docker composeで開発環境をメンバに配布せよ
Yusuke Kon
ClassLoader Leak Patterns
ClassLoader Leak Patterns
nekop
Dockerで始める Java EE アプリケーション開発 for JJUG CCC 2017
Dockerで始める Java EE アプリケーション開発 for JJUG CCC 2017
Kohei Saito
JavaScriptでSQLを唱えたいだけの人生だった
JavaScriptでSQLを唱えたいだけの人生だった
iPride Co., Ltd.
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること
日本マイクロソフト株式会社
bashでWebブラウザ(Selenium WebDriver)を動かした話
bashでWebブラウザ(Selenium WebDriver)を動かした話
洋史 東平
3層アーキテクチャとMVCモデル -LaravelにおけるMVCモデルの流れ-
3層アーキテクチャとMVCモデル -LaravelにおけるMVCモデルの流れ-
yoshitaro yoyo
開発環境をVagrantからdockerに移行してみた
開発環境をVagrantからdockerに移行してみた
pyar6329
JIT のコードを読んでみた
JIT のコードを読んでみた
y-uti
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
Hiroshi Tokumaru
GoによるWebアプリ開発のキホン
GoによるWebアプリ開発のキホン
Akihiko Horiuchi
青空文庫と式年遷宮アーキテクチャ: 青空文庫200周年に向けて
青空文庫と式年遷宮アーキテクチャ: 青空文庫200周年に向けて
masayoshi takahashi
Webアプリケーション負荷試験実践入門
Webアプリケーション負荷試験実践入門
樽八 仲川
XSS再入門
XSS再入門
Hiroshi Tokumaru
AWS Glueを使った Serverless ETL の実装パターン
AWS Glueを使った Serverless ETL の実装パターン
seiichi arai
最近のストリーム処理事情振り返り
最近のストリーム処理事情振り返り
Sotaro Kimura
Fess/Elasticsearchを使った業務で使える?全文検索への道
Fess/Elasticsearchを使った業務で使える?全文検索への道
Shinsuke Sugaya
LastaFluteに移行したFessとElasticsearch+ESFluteによるDBFlute環境
LastaFluteに移行したFessとElasticsearch+ESFluteによるDBFlute環境
Shinsuke Sugaya
Laravel Blade×vue.js 混在させる場合の注意点
Laravel Blade×vue.js 混在させる場合の注意点
誠一郎 栗原
Cloud Foundryで学ぶ、PaaSのしくみ講座
Cloud Foundryで学ぶ、PaaSのしくみ講座
Kazuto Kusama
NGINX Back to Basics: Ingress Controller (Japanese Webinar)
NGINX Back to Basics: Ingress Controller (Japanese Webinar)
NGINX, Inc.
PHP-FPM の子プロセス制御方法と設定をおさらいしよう
PHP-FPM の子プロセス制御方法と設定をおさらいしよう
Shohei Okada
Kubernetes introduction
Kubernetes introduction
DAEBUM LEE
Dockerイメージ管理の内部構造
Dockerイメージ管理の内部構造
Etsuji Nakai
Googleのインフラ技術から考える理想のDevOps
Googleのインフラ技術から考える理想のDevOps
Etsuji Nakai
CEDEC2021 ダウンロード時間を大幅減!~大量のアセットをさばく高速な実装と運用事例の共有~
CEDEC2021 ダウンロード時間を大幅減!~大量のアセットをさばく高速な実装と運用事例の共有~
SEGADevTech
難読化PowerShell芸入門
難読化PowerShell芸入門
xztaityozx
第一次Elasticsearch就上手
第一次Elasticsearch就上手
Aaron King
HTTP 2.0のヘッダ圧縮(HPACK)
HTTP 2.0のヘッダ圧縮(HPACK)
Jun Fujisawa
WebSocket Protocol と Plack::Middleware::WebSocket
WebSocket Protocol と Plack::Middleware::WebSocket
Yu Nobuoka
Mais conteúdo relacionado
Mais procurados
JIT のコードを読んでみた
JIT のコードを読んでみた
y-uti
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
Hiroshi Tokumaru
GoによるWebアプリ開発のキホン
GoによるWebアプリ開発のキホン
Akihiko Horiuchi
青空文庫と式年遷宮アーキテクチャ: 青空文庫200周年に向けて
青空文庫と式年遷宮アーキテクチャ: 青空文庫200周年に向けて
masayoshi takahashi
Webアプリケーション負荷試験実践入門
Webアプリケーション負荷試験実践入門
樽八 仲川
XSS再入門
XSS再入門
Hiroshi Tokumaru
AWS Glueを使った Serverless ETL の実装パターン
AWS Glueを使った Serverless ETL の実装パターン
seiichi arai
最近のストリーム処理事情振り返り
最近のストリーム処理事情振り返り
Sotaro Kimura
Fess/Elasticsearchを使った業務で使える?全文検索への道
Fess/Elasticsearchを使った業務で使える?全文検索への道
Shinsuke Sugaya
LastaFluteに移行したFessとElasticsearch+ESFluteによるDBFlute環境
LastaFluteに移行したFessとElasticsearch+ESFluteによるDBFlute環境
Shinsuke Sugaya
Laravel Blade×vue.js 混在させる場合の注意点
Laravel Blade×vue.js 混在させる場合の注意点
誠一郎 栗原
Cloud Foundryで学ぶ、PaaSのしくみ講座
Cloud Foundryで学ぶ、PaaSのしくみ講座
Kazuto Kusama
NGINX Back to Basics: Ingress Controller (Japanese Webinar)
NGINX Back to Basics: Ingress Controller (Japanese Webinar)
NGINX, Inc.
PHP-FPM の子プロセス制御方法と設定をおさらいしよう
PHP-FPM の子プロセス制御方法と設定をおさらいしよう
Shohei Okada
Kubernetes introduction
Kubernetes introduction
DAEBUM LEE
Dockerイメージ管理の内部構造
Dockerイメージ管理の内部構造
Etsuji Nakai
Googleのインフラ技術から考える理想のDevOps
Googleのインフラ技術から考える理想のDevOps
Etsuji Nakai
CEDEC2021 ダウンロード時間を大幅減!~大量のアセットをさばく高速な実装と運用事例の共有~
CEDEC2021 ダウンロード時間を大幅減!~大量のアセットをさばく高速な実装と運用事例の共有~
SEGADevTech
難読化PowerShell芸入門
難読化PowerShell芸入門
xztaityozx
第一次Elasticsearch就上手
第一次Elasticsearch就上手
Aaron King
Mais procurados
(20)
JIT のコードを読んでみた
JIT のコードを読んでみた
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
GoによるWebアプリ開発のキホン
GoによるWebアプリ開発のキホン
青空文庫と式年遷宮アーキテクチャ: 青空文庫200周年に向けて
青空文庫と式年遷宮アーキテクチャ: 青空文庫200周年に向けて
Webアプリケーション負荷試験実践入門
Webアプリケーション負荷試験実践入門
XSS再入門
XSS再入門
AWS Glueを使った Serverless ETL の実装パターン
AWS Glueを使った Serverless ETL の実装パターン
最近のストリーム処理事情振り返り
最近のストリーム処理事情振り返り
Fess/Elasticsearchを使った業務で使える?全文検索への道
Fess/Elasticsearchを使った業務で使える?全文検索への道
LastaFluteに移行したFessとElasticsearch+ESFluteによるDBFlute環境
LastaFluteに移行したFessとElasticsearch+ESFluteによるDBFlute環境
Laravel Blade×vue.js 混在させる場合の注意点
Laravel Blade×vue.js 混在させる場合の注意点
Cloud Foundryで学ぶ、PaaSのしくみ講座
Cloud Foundryで学ぶ、PaaSのしくみ講座
NGINX Back to Basics: Ingress Controller (Japanese Webinar)
NGINX Back to Basics: Ingress Controller (Japanese Webinar)
PHP-FPM の子プロセス制御方法と設定をおさらいしよう
PHP-FPM の子プロセス制御方法と設定をおさらいしよう
Kubernetes introduction
Kubernetes introduction
Dockerイメージ管理の内部構造
Dockerイメージ管理の内部構造
Googleのインフラ技術から考える理想のDevOps
Googleのインフラ技術から考える理想のDevOps
CEDEC2021 ダウンロード時間を大幅減!~大量のアセットをさばく高速な実装と運用事例の共有~
CEDEC2021 ダウンロード時間を大幅減!~大量のアセットをさばく高速な実装と運用事例の共有~
難読化PowerShell芸入門
難読化PowerShell芸入門
第一次Elasticsearch就上手
第一次Elasticsearch就上手
Semelhante a 第9回rest勉強会 ダウンロード・アップロード編
HTTP 2.0のヘッダ圧縮(HPACK)
HTTP 2.0のヘッダ圧縮(HPACK)
Jun Fujisawa
WebSocket Protocol と Plack::Middleware::WebSocket
WebSocket Protocol と Plack::Middleware::WebSocket
Yu Nobuoka
Firefox5+HTML5×5
Firefox5+HTML5×5
dynamis
XML と PHP のイケナイ関係 (セキュリティ的な意味で) -Introduction of XXE attack and XML Bomb with...
XML と PHP のイケナイ関係 (セキュリティ的な意味で) -Introduction of XXE attack and XML Bomb with...
Kousuke Ebihara
簡単なHTTPサーバの作成
簡単なHTTPサーバの作成
Panu Avakul
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
Html5, Web Applications 2
Html5, Web Applications 2
totty jp
第43回HTML5とか勉強会 最新webプロトコル傾向と対策
第43回HTML5とか勉強会 最新webプロトコル傾向と対策
Kensaku Komatsu
JavaプログラマのためのWebSocket概要
JavaプログラマのためのWebSocket概要
Shumpei Shiraishi
Beginning Java EE 6 勉強会(7) #bje_study
Beginning Java EE 6 勉強会(7) #bje_study
ikeyat
再入門、サーバープッシュ技術
再入門、サーバープッシュ技術
Shin Sekaryo
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
Sho Ito
社内向けTech Talk資料~Fluentdの基本紹介~
社内向けTech Talk資料~Fluentdの基本紹介~
Daisuke Ikeda
HTML5 on ASP.NET
HTML5 on ASP.NET
Fujio Kojima
Cms on SELinux
Cms on SELinux
Hiroki Ishikawa
Hive undocumented feature
Hive undocumented feature
tamtam180
The road of Apache CloudStack Contributor (Translation and Patch)
The road of Apache CloudStack Contributor (Translation and Patch)
Kimihiko Kitase
Webサーバのチューニング
Webサーバのチューニング
Yu Komiya
CategoLJについて
CategoLJについて
Toshiaki Maki
20120423 hbase勉強会
20120423 hbase勉強会
Toshiaki Toyama
Semelhante a 第9回rest勉強会 ダウンロード・アップロード編
(20)
HTTP 2.0のヘッダ圧縮(HPACK)
HTTP 2.0のヘッダ圧縮(HPACK)
WebSocket Protocol と Plack::Middleware::WebSocket
WebSocket Protocol と Plack::Middleware::WebSocket
Firefox5+HTML5×5
Firefox5+HTML5×5
XML と PHP のイケナイ関係 (セキュリティ的な意味で) -Introduction of XXE attack and XML Bomb with...
XML と PHP のイケナイ関係 (セキュリティ的な意味で) -Introduction of XXE attack and XML Bomb with...
簡単なHTTPサーバの作成
簡単なHTTPサーバの作成
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Html5, Web Applications 2
Html5, Web Applications 2
第43回HTML5とか勉強会 最新webプロトコル傾向と対策
第43回HTML5とか勉強会 最新webプロトコル傾向と対策
JavaプログラマのためのWebSocket概要
JavaプログラマのためのWebSocket概要
Beginning Java EE 6 勉強会(7) #bje_study
Beginning Java EE 6 勉強会(7) #bje_study
再入門、サーバープッシュ技術
再入門、サーバープッシュ技術
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
社内向けTech Talk資料~Fluentdの基本紹介~
社内向けTech Talk資料~Fluentdの基本紹介~
HTML5 on ASP.NET
HTML5 on ASP.NET
Cms on SELinux
Cms on SELinux
Hive undocumented feature
Hive undocumented feature
The road of Apache CloudStack Contributor (Translation and Patch)
The road of Apache CloudStack Contributor (Translation and Patch)
Webサーバのチューニング
Webサーバのチューニング
CategoLJについて
CategoLJについて
20120423 hbase勉強会
20120423 hbase勉強会
Mais de ksimoji
PHPでWebSocketを実装してみてわかったこと
PHPでWebSocketを実装してみてわかったこと
ksimoji
第12回rest勉強会 これまでの補足・展望編
第12回rest勉強会 これまでの補足・展望編
ksimoji
第11回rest勉強会 リファクタリング(クライアント編)
第11回rest勉強会 リファクタリング(クライアント編)
ksimoji
第10回rest勉強会 リファクタリング(サーバ編)編
第10回rest勉強会 リファクタリング(サーバ編)編
ksimoji
第8回rest勉強会 bootstrap編
第8回rest勉強会 bootstrap編
ksimoji
第7回rest勉強会 バリデーション編
第7回rest勉強会 バリデーション編
ksimoji
第6回rest勉強会 アソシエーション編
第6回rest勉強会 アソシエーション編
ksimoji
第5回rest勉強会 ログイン編
第5回rest勉強会 ログイン編
ksimoji
第4回REST勉強会 RequireJS編
第4回REST勉強会 RequireJS編
ksimoji
第3回Rest勉強会 marionette編
第3回Rest勉強会 marionette編
ksimoji
第一回Rest勉強会 ワークショップ
第一回Rest勉強会 ワークショップ
ksimoji
Mais de ksimoji
(11)
PHPでWebSocketを実装してみてわかったこと
PHPでWebSocketを実装してみてわかったこと
第12回rest勉強会 これまでの補足・展望編
第12回rest勉強会 これまでの補足・展望編
第11回rest勉強会 リファクタリング(クライアント編)
第11回rest勉強会 リファクタリング(クライアント編)
第10回rest勉強会 リファクタリング(サーバ編)編
第10回rest勉強会 リファクタリング(サーバ編)編
第8回rest勉強会 bootstrap編
第8回rest勉強会 bootstrap編
第7回rest勉強会 バリデーション編
第7回rest勉強会 バリデーション編
第6回rest勉強会 アソシエーション編
第6回rest勉強会 アソシエーション編
第5回rest勉強会 ログイン編
第5回rest勉強会 ログイン編
第4回REST勉強会 RequireJS編
第4回REST勉強会 RequireJS編
第3回Rest勉強会 marionette編
第3回Rest勉強会 marionette編
第一回Rest勉強会 ワークショップ
第一回Rest勉強会 ワークショップ
第9回rest勉強会 ダウンロード・アップロード編
1.
ダウンロード・ アップロード機能 の実装 AWS上で構築するRESTfulアプリ勉強会 ~Web開発ワークショップ~【第9回】
2.
概要
3.
概要 1. ダウンロード? 2. アップロード?
4.
概要 1. ダウンロード? 2. アップロード?
5.
ダウンロード =HTTPレスポンスボ ディをローカルに保存
6.
HTTPレスポンス HTTP/1.1 200 OK Server:
nginx Date: Thu, 24 Sep 2015 09:11:53 GMT Content-Type: text/html; charset=UTF-8 Transfer-Encoding: chunked 〜略〜 /openid20/www.yahoo.co.jp/xrds Vary: Accept-Encoding X-Frame-Options: SAMEORIGIN <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> 〜以下略〜 ステータスコード レスポンスヘッダ レスポンスボディ 空行
7.
ステータスコード HTTP/1.1 200 OK Server:
nginx Date: Thu, 24 Sep 2015 09:11:53 GMT Content-Type: text/html; charset=UTF-8 Transfer-Encoding: chunked 〜略〜 /openid20/www.yahoo.co.jp/xrds Vary: Accept-Encoding X-Frame-Options: SAMEORIGIN <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> 〜以下略〜 レスポンスヘッダ レスポンスボディ 空行
8.
ステータスコード HTTP/1.1 200 OK Server:
nginx Date: Thu, 24 Sep 2015 09:11:53 GMT Content-Type: text/html; charset=UTF-8 Transfer-Encoding: chunked 〜略〜 /openid20/www.yahoo.co.jp/xrds Vary: Accept-Encoding X-Frame-Options: SAMEORIGIN <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> 〜以下略〜 レスポンスヘッダ レスポンスボディ 空行HTTP1.1で通信しました。 ステータスコードは200, 正常です
9.
レスポンスヘッダ HTTP/1.1 200 OK Server:
nginx Date: Thu, 24 Sep 2015 09:11:53 GMT Content-Type: text/html; charset=UTF-8 Transfer-Encoding: chunked 〜略〜 /openid20/www.yahoo.co.jp/xrds Vary: Accept-Encoding X-Frame-Options: SAMEORIGIN <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> 〜以下略〜 レスポンスボディ 空行
10.
レスポンスヘッダ HTTP/1.1 200 OK Server:
nginx Date: Thu, 24 Sep 2015 09:11:53 GMT Content-Type: text/html; charset=UTF-8 Transfer-Encoding: chunked 〜略〜 /openid20/www.yahoo.co.jp/xrds Vary: Accept-Encoding X-Frame-Options: SAMEORIGIN <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> 〜以下略〜 レスポンスボディ 空行 レスポンスに関する付加情報 e.g) Content-Type: text/html; charset=UTF-8 レスポンスボディはhtmlですよ、エンコードはUTF-8ですよ!
11.
空行 HTTP/1.1 200 OK Server:
nginx Date: Thu, 24 Sep 2015 09:11:53 GMT Content-Type: text/html; charset=UTF-8 Transfer-Encoding: chunked 〜略〜 /openid20/www.yahoo.co.jp/xrds Vary: Accept-Encoding X-Frame-Options: SAMEORIGIN <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> 〜以下略〜 レスポンスボディ
12.
空行 HTTP/1.1 200 OK Server:
nginx Date: Thu, 24 Sep 2015 09:11:53 GMT Content-Type: text/html; charset=UTF-8 Transfer-Encoding: chunked 〜略〜 /openid20/www.yahoo.co.jp/xrds Vary: Accept-Encoding X-Frame-Options: SAMEORIGIN <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> 〜以下略〜 レスポンスボディ これより下がレスポンスボディです!
13.
レスポンスボディ HTTP/1.1 200 OK Server:
nginx Date: Thu, 24 Sep 2015 09:11:53 GMT Content-Type: text/html; charset=UTF-8 Transfer-Encoding: chunked 〜略〜 /openid20/www.yahoo.co.jp/xrds Vary: Accept-Encoding X-Frame-Options: SAMEORIGIN <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> 〜以下略〜 ご所望のデータです!
14.
レスポンスボディ HTTP/1.1 200 OK Server:
nginx Date: Thu, 24 Sep 2015 09:11:53 GMT Content-Type: text/html; charset=UTF-8 Transfer-Encoding: chunked 〜略〜 /openid20/www.yahoo.co.jp/xrds Vary: Accept-Encoding X-Frame-Options: SAMEORIGIN <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> 〜以下略〜 ファイルをダウンロードする時も、 ファイルコンテンツはここに入って くる
15.
…表示 or 保存? ブラウザ: 「このレスポンスボディ をどうしようか?」
16.
レスポンスヘッダを見よう! HTTP/1.1 200 OK Server:
nginx Date: Thu, 24 Sep 2015 09:11:53 GMT Content-Type: text/html; charset=UTF-8 Transfer-Encoding: chunked 〜略〜 /openid20/www.yahoo.co.jp/xrds Vary: Accept-Encoding X-Frame-Options: SAMEORIGIN <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> 〜以下略〜 レスポンスボディ 空行
17.
レスポンスヘッダを見よう! HTTP/1.1 200 OK Server:
nginx Date: Thu, 24 Sep 2015 09:11:53 GMT Content-Type: text/html; charset=UTF-8 Transfer-Encoding: chunked 〜略〜 /openid20/www.yahoo.co.jp/xrds Vary: Accept-Encoding X-Frame-Options: SAMEORIGIN <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> 〜以下略〜 レスポンスボディ 空行 ブラウザ: 「Content-Type: text/html とあるから表示だな!」
18.
レスポンスヘッダを見よう! HTTP/1.1 200 OK Server:
nginx Date: Thu, 24 Sep 2015 09:11:53 GMT Content-Type: text/csv; charset=UTF-8 Transfer-Encoding: chunked 〜略〜 /openid20/www.yahoo.co.jp/xrds Vary: Accept-Encoding X-Frame-Options: SAMEORIGIN <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> 〜以下略〜 レスポンスボディ 空行
19.
レスポンスヘッダを見よう! HTTP/1.1 200 OK Server:
nginx Date: Thu, 24 Sep 2015 09:11:53 GMT Content-Type: text/csv; charset=UTF-8 Transfer-Encoding: chunked 〜略〜 /openid20/www.yahoo.co.jp/xrds Vary: Accept-Encoding X-Frame-Options: SAMEORIGIN <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> 〜以下略〜 レスポンスボディ 空行 ブラウザ: 「Content-Type: text/csv は保存だな!」
20.
ブラウザによっては… HTTP/1.1 200 OK Server:
nginx Date: Thu, 24 Sep 2015 09:11:53 GMT Content-Type: text/csv; charset=UTF-8 Transfer-Encoding: chunked 〜略〜 /openid20/www.yahoo.co.jp/xrds Vary: Accept-Encoding X-Frame-Options: SAMEORIGIN <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> 〜以下略〜 レスポンスボディ 空行 ブラウザX: 「Content-Type: text/csv は表示だな!」
21.
レスポンスヘッダを見よう! HTTP/1.1 200 OK Server:
nginx Date: Thu, 24 Sep 2015 09:11:53 GMT Content-Type: text/csv; charset=UTF-8 Content-Disposition: attachment; filename="todo.csv" Transfer-Encoding: chunked 〜略〜 /openid20/www.yahoo.co.jp/xrds Vary: Accept-Encoding X-Frame-Options: SAMEORIGIN <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> 〜以下略〜 レスポンスボディ 空行 ブラウザ: 「Content-Disposition: attachment; filename= todo.csv だか ら、 todo.csv で保存だな!」
22.
こうなるようにレスポン スヘッダを設定します! やること
23.
概要 1. ダウンロード? 2. アップロード?
24.
アップロード =HTTPリクエストボ ディにローカルファイ ルの内容を乗っける
25.
HTTPリクエスト POST /rest-study/todo_lists/upload.json HTTP/1.1 Host:
10.0.1.206 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:42.0) Gecko/20100101 Firefox/42.0 〜略〜 Content-Length: 779 Content-Type: multipart/form-data; boundary=---------------------------1395431092341454357747073315 〜略〜 Cache-Control: no-cache -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="0"; filename="todolist1.txt" Content-Type: text/plain todolist1.txtからアップロードしたTODO1 〜略〜 todolist1.txtからアップロードしたTODO5 -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="1"; filename="todolist2.txt" Content-Type: text/plain todolist2.txtからアップロードしたTODO1 todolist2.txtからアップロードしたTODO2 -----------------------------1395431092341454357747073315-- メソッド、URI リクエストヘッダ リクエストボディ 空行
26.
メソッド、URI POST /rest-study/todo_lists/upload.json HTTP/1.1 Host:
10.0.1.206 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:42.0) Gecko/20100101 Firefox/42.0 〜略〜 Content-Length: 779 Content-Type: multipart/form-data; boundary=---------------------------1395431092341454357747073315 〜略〜 Cache-Control: no-cache -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="0"; filename="todolist1.txt" Content-Type: text/plain todolist1.txtからアップロードしたTODO1 〜略〜 todolist1.txtからアップロードしたTODO5 -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="1"; filename="todolist2.txt" Content-Type: text/plain todolist2.txtからアップロードしたTODO1 todolist2.txtからアップロードしたTODO2 -----------------------------1395431092341454357747073315-- リクエストヘッダ リクエストボディ 空行
27.
メソッド、URI POST /rest-study/todo_lists/upload.json HTTP/1.1 Host:
10.0.1.206 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:42.0) Gecko/20100101 Firefox/42.0 〜略〜 Content-Length: 779 Content-Type: multipart/form-data; boundary=---------------------------1395431092341454357747073315 〜略〜 Cache-Control: no-cache -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="0"; filename="todolist1.txt" Content-Type: text/plain todolist1.txtからアップロードしたTODO1 〜略〜 todolist1.txtからアップロードしたTODO5 -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="1"; filename="todolist2.txt" Content-Type: text/plain todolist2.txtからアップロードしたTODO1 todolist2.txtからアップロードしたTODO2 -----------------------------1395431092341454357747073315-- リクエストヘッダ リクエストボディ 空行メソッドは「POST」、 URL「/rest-study/todo_lists/ upload.json」にHTTP1.1で通信 します。
28.
リクエストヘッダ POST /rest-study/todo_lists/upload.json HTTP/1.1 Host:
10.0.1.206 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:42.0) Gecko/20100101 Firefox/42.0 〜略〜 Content-Length: 779 Content-Type: multipart/form-data; boundary=---------------------------1395431092341454357747073315 〜略〜 Cache-Control: no-cache -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="0"; filename="todolist1.txt" Content-Type: text/plain todolist1.txtからアップロードしたTODO1 〜略〜 todolist1.txtからアップロードしたTODO5 -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="1"; filename="todolist2.txt" Content-Type: text/plain todolist2.txtからアップロードしたTODO1 todolist2.txtからアップロードしたTODO2 -----------------------------1395431092341454357747073315-- リクエストボディ 空行
29.
リクエストヘッダ POST /rest-study/todo_lists/upload.json HTTP/1.1 Host:
10.0.1.206 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:42.0) Gecko/20100101 Firefox/42.0 〜略〜 Content-Length: 779 Content-Type: multipart/form-data; boundary=---------------------------1395431092341454357747073315 〜略〜 Cache-Control: no-cache -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="0"; filename="todolist1.txt" Content-Type: text/plain todolist1.txtからアップロードしたTODO1 〜略〜 todolist1.txtからアップロードしたTODO5 -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="1"; filename="todolist2.txt" Content-Type: text/plain todolist2.txtからアップロードしたTODO1 todolist2.txtからアップロードしたTODO2 -----------------------------1395431092341454357747073315-- リクエストボディ 空行 リクエストに関する付加情報 e.g) Content-Length: 779 リクエストボディのサイ ズは779バイトですよ!
30.
空行 POST /rest-study/todo_lists/upload.json HTTP/1.1 Host:
10.0.1.206 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:42.0) Gecko/20100101 Firefox/42.0 〜略〜 Content-Length: 779 Content-Type: multipart/form-data; boundary=---------------------------1395431092341454357747073315 〜略〜 Cache-Control: no-cache -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="0"; filename="todolist1.txt" Content-Type: text/plain todolist1.txtからアップロードしたTODO1 〜略〜 todolist1.txtからアップロードしたTODO5 -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="1"; filename="todolist2.txt" Content-Type: text/plain todolist2.txtからアップロードしたTODO1 todolist2.txtからアップロードしたTODO2 -----------------------------1395431092341454357747073315-- リクエストボディ
31.
空行 POST /rest-study/todo_lists/upload.json HTTP/1.1 Host:
10.0.1.206 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:42.0) Gecko/20100101 Firefox/42.0 〜略〜 Content-Length: 779 Content-Type: multipart/form-data; boundary=---------------------------1395431092341454357747073315 〜略〜 Cache-Control: no-cache -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="0"; filename="todolist1.txt" Content-Type: text/plain todolist1.txtからアップロードしたTODO1 〜略〜 todolist1.txtからアップロードしたTODO5 -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="1"; filename="todolist2.txt" Content-Type: text/plain todolist2.txtからアップロードしたTODO1 todolist2.txtからアップロードしたTODO2 -----------------------------1395431092341454357747073315-- リクエストボディ これより下がリクエストボディです!
32.
リクエストボディ POST /rest-study/todo_lists/upload.json HTTP/1.1 Host:
10.0.1.206 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:42.0) Gecko/20100101 Firefox/42.0 〜略〜 Content-Length: 779 Content-Type: multipart/form-data; boundary=---------------------------1395431092341454357747073315 〜略〜 Cache-Control: no-cache -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="0"; filename="todolist1.txt" Content-Type: text/plain todolist1.txtからアップロードしたTODO1 〜略〜 todolist1.txtからアップロードしたTODO5 -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="1"; filename="todolist2.txt" Content-Type: text/plain todolist2.txtからアップロードしたTODO1 todolist2.txtからアップロードしたTODO2 -----------------------------1395431092341454357747073315--
33.
リクエストボディ POST /rest-study/todo_lists/upload.json HTTP/1.1 Host:
10.0.1.206 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:42.0) Gecko/20100101 Firefox/42.0 〜略〜 Content-Length: 779 Content-Type: multipart/form-data; boundary=---------------------------1395431092341454357747073315 〜略〜 Cache-Control: no-cache -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="0"; filename="todolist1.txt" Content-Type: text/plain todolist1.txtからアップロードしたTODO1 〜略〜 todolist1.txtからアップロードしたTODO5 -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="1"; filename="todolist2.txt" Content-Type: text/plain todolist2.txtからアップロードしたTODO1 todolist2.txtからアップロードしたTODO2 -----------------------------1395431092341454357747073315-- これを送ります!
34.
multipart/form-data POST /rest-study/todo_lists/upload.json HTTP/1.1 Host:
10.0.1.206 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:42.0) Gecko/20100101 Firefox/42.0 〜略〜 Content-Length: 779 Content-Type: multipart/form-data; boundary=---------------------------1395431092341454357747073315 〜略〜 Cache-Control: no-cache -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="0"; filename="todolist1.txt" Content-Type: text/plain todolist1.txtからアップロードしたTODO1 〜略〜 todolist1.txtからアップロードしたTODO5 -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="1"; filename="todolist2.txt" Content-Type: text/plain todolist2.txtからアップロードしたTODO1 todolist2.txtからアップロードしたTODO2 -----------------------------1395431092341454357747073315-- ボディの中にまたヘッダとボディが?
35.
multipart/form-data POST /rest-study/todo_lists/upload.json HTTP/1.1 Host:
10.0.1.206 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:42.0) Gecko/20100101 Firefox/42.0 〜略〜 Content-Length: 779 Content-Type: multipart/form-data; boundary=---------------------------1395431092341454357747073315 〜略〜 Cache-Control: no-cache -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="0"; filename="todolist1.txt" Content-Type: text/plain todolist1.txtからアップロードしたTODO1 〜略〜 todolist1.txtからアップロードしたTODO5 -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="1"; filename="todolist2.txt" Content-Type: text/plain todolist2.txtからアップロードしたTODO1 todolist2.txtからアップロードしたTODO2 -----------------------------1395431092341454357747073315-- todolist1.txtの情報
36.
multipart/form-data POST /rest-study/todo_lists/upload.json HTTP/1.1 Host:
10.0.1.206 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:42.0) Gecko/20100101 Firefox/42.0 〜略〜 Content-Length: 779 Content-Type: multipart/form-data; boundary=---------------------------1395431092341454357747073315 〜略〜 Cache-Control: no-cache -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="0"; filename="todolist1.txt" Content-Type: text/plain todolist1.txtからアップロードしたTODO1 〜略〜 todolist1.txtからアップロードしたTODO5 -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="1"; filename="todolist2.txt" Content-Type: text/plain todolist2.txtからアップロードしたTODO1 todolist2.txtからアップロードしたTODO2 -----------------------------1395431092341454357747073315-- todolist1.txtの情報 todolist2.txtの情報
37.
multipart/form-data じゃない場合は? e.g.)application/json
38.
{"todo":"TODOを追加ボタンで登録 ","status":0,"assignee":"67"} application/json
39.
{"todo":"TODOを追加ボタンで登録 ","status":0,"assignee":"67"} application/json シンプルです
40.
multipart/form-data -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="0";
filename="todolist1.txt" Content-Type: text/plain todolist1.txtからアップロードしたTODO1 〜略〜 todolist1.txtからアップロードしたTODO5 -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="1"; filename="todolist2.txt" Content-Type: text/plain todolist2.txtからアップロードしたTODO1 todolist2.txtからアップロードしたTODO2 -----------------------------1395431092341454357747073315--
41.
multipart/form-data -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="0";
filename="todolist1.txt" Content-Type: text/plain todolist1.txtからアップロードしたTODO1 〜略〜 todolist1.txtからアップロードしたTODO5 -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="1"; filename="todolist2.txt" Content-Type: text/plain todolist2.txtからアップロードしたTODO1 todolist2.txtからアップロードしたTODO2 -----------------------------1395431092341454357747073315-- •Content-Length: 779 →全体サイズは779バイト •各パート毎のヘッダの情報 •その後には空行がある という情報をもとにファイルを取り出す!
42.
という面倒なところはPHP とCakePHPがやってくれ ます! →テンポラリファイルを作 るまではやってくれる!
43.
•Ajaxでファイルアップロード処 理を行う •PHPが作ってくれたテンポラリ ファイルを読み込む • 取り出したファイルのデータか らTODOを作成する やること
44.
ワークショップ
45.
画面はこう
46.
本日のメニュー 1. 事前準備 2. Lesson1
ダウンロード 3. Lesson2 アップロード
47.
事前準備 • gitのブランチを整える • 前回、前々回不参加の方は テーブル追加、列追加する
48.
gitのブランチを整える ■masterブランチを前回の内容 を終えた状態にする ■masterブランチを元に、今回 の作業用である、 「vol/09」ブランチを作成する
49.
人によって手順が違い ます!(重要) ■前回の内容を途中までやった方 ■前回の内容を完了した方 ■今回から参加の方 gitのブランチを整える
50.
http:// goo.gl/WEHXqX ジーオーオー.ジーエル/ ダブリューイーエイチエックスキューエックス ここに詳しく 書いております!
51.
今回のマニュアルにリンクがあります。 ※後ほど説明 第5回と第6回に不参加の方は テーブル追加、列追加をする
52.
各Lessonについては Qiitaの投稿で詳しく!
53.
ポイントだけ少し! コード見ながら解説します
54.
マニュアル(Qiita) http:// goo.gl/hXBzVR ジーオーオー.ジーエル/ エイチエックスビーゼットブイアール
55.
マニュアル(Qiita) http:// goo.gl/hXBzVR ジーオーオー.ジーエル/ エイチエックスビーゼットブイアール はじめましょう!
56.
ファイル選択をもっ とリッチに! 🍻飲みDev🍕 テーマ Drag &
Dropで!
57.
ファイル選択をもっ とリッチに! 🍻飲みDev🍕 テーマ Drag &
Dropで!
Baixar agora