SlideShare une entreprise Scribd logo
1  sur  57
Télécharger pour lire hors ligne
ダウンロード・
アップロード機能
の実装
AWS上で構築するRESTfulアプリ勉強会
~Web開発ワークショップ~【第9回】
概要
概要
1. ダウンロード?
2. アップロード?
概要
1. ダウンロード?
2. アップロード?
ダウンロード
=HTTPレスポンスボ
ディをローカルに保存
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">
〜以下略〜
ステータスコード
レスポンスヘッダ
レスポンスボディ
空行
ステータスコード
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">
〜以下略〜
レスポンスヘッダ
レスポンスボディ
空行
ステータスコード
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, 正常です
レスポンスヘッダ
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">
〜以下略〜
レスポンスボディ
空行
レスポンスヘッダ
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ですよ!
空行
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">
〜以下略〜
レスポンスボディ
空行
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">
〜以下略〜
レスポンスボディ
これより下がレスポンスボディです!
レスポンスボディ
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">
〜以下略〜
ご所望のデータです!
レスポンスボディ
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">
〜以下略〜
ファイルをダウンロードする時も、
ファイルコンテンツはここに入って
くる
…表示 or 保存?
ブラウザ:
「このレスポンスボディ
をどうしようか?」
レスポンスヘッダを見よう!
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">
〜以下略〜
レスポンスボディ
空行
レスポンスヘッダを見よう!
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
とあるから表示だな!」
レスポンスヘッダを見よう!
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">
〜以下略〜
レスポンスボディ
空行
レスポンスヘッダを見よう!
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
は保存だな!」
ブラウザによっては…
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
は表示だな!」
レスポンスヘッダを見よう!
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 で保存だな!」
こうなるようにレスポン
スヘッダを設定します!
やること
概要
1. ダウンロード?
2. アップロード?
アップロード
=HTTPリクエストボ
ディにローカルファイ
ルの内容を乗っける
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
リクエストヘッダ
リクエストボディ
空行
メソッド、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--
リクエストヘッダ
リクエストボディ
空行
メソッド、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で通信
します。
リクエストヘッダ
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 /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バイトですよ!
空行
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 /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 /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 /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--
これを送ります!
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--
ボディの中にまたヘッダとボディが?
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の情報
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の情報
multipart/form-data
じゃない場合は?
e.g.)application/json
{"todo":"TODOを追加ボタンで登録
","status":0,"assignee":"67"}
application/json
{"todo":"TODOを追加ボタンで登録
","status":0,"assignee":"67"}
application/json
シンプルです
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--
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バイト
•各パート毎のヘッダの情報
•その後には空行がある
という情報をもとにファイルを取り出す!
という面倒なところはPHP
とCakePHPがやってくれ
ます!
→テンポラリファイルを作
るまではやってくれる!
•Ajaxでファイルアップロード処
理を行う
•PHPが作ってくれたテンポラリ
ファイルを読み込む
• 取り出したファイルのデータか
らTODOを作成する
やること
ワークショップ
画面はこう
本日のメニュー
1. 事前準備
2. Lesson1 ダウンロード
3. Lesson2 アップロード
事前準備
• gitのブランチを整える
• 前回、前々回不参加の方は
テーブル追加、列追加する
gitのブランチを整える
■masterブランチを前回の内容
を終えた状態にする
■masterブランチを元に、今回
の作業用である、
「vol/09」ブランチを作成する
人によって手順が違い
ます!(重要)
■前回の内容を途中までやった方
■前回の内容を完了した方
■今回から参加の方
gitのブランチを整える
http://
goo.gl/WEHXqX
ジーオーオー.ジーエル/
ダブリューイーエイチエックスキューエックス
ここに詳しく
書いております!
今回のマニュアルにリンクがあります。
※後ほど説明
第5回と第6回に不参加の方は
テーブル追加、列追加をする
各Lessonについては
Qiitaの投稿で詳しく!
ポイントだけ少し!
コード見ながら解説します
マニュアル(Qiita)
http://
goo.gl/hXBzVR
ジーオーオー.ジーエル/
エイチエックスビーゼットブイアール
マニュアル(Qiita)
http://
goo.gl/hXBzVR
ジーオーオー.ジーエル/
エイチエックスビーゼットブイアール
はじめましょう!
ファイル選択をもっ
とリッチに!
🍻飲みDev🍕 テーマ
Drag & Dropで!
ファイル選択をもっ
とリッチに!
🍻飲みDev🍕 テーマ
Drag & Dropで!

Contenu connexe

Tendances

JJUG CCC 2013 Fall「JVMコードリーディング入門-JVMのOS抽象化レイヤーについて-」
JJUG CCC 2013 Fall「JVMコードリーディング入門-JVMのOS抽象化レイヤーについて-」JJUG CCC 2013 Fall「JVMコードリーディング入門-JVMのOS抽象化レイヤーについて-」
JJUG CCC 2013 Fall「JVMコードリーディング入門-JVMのOS抽象化レイヤーについて-」
y torazuka
 

Tendances (20)

JJUG CCC 2013 Fall「JVMコードリーディング入門-JVMのOS抽象化レイヤーについて-」
JJUG CCC 2013 Fall「JVMコードリーディング入門-JVMのOS抽象化レイヤーについて-」JJUG CCC 2013 Fall「JVMコードリーディング入門-JVMのOS抽象化レイヤーについて-」
JJUG CCC 2013 Fall「JVMコードリーディング入門-JVMのOS抽象化レイヤーについて-」
 
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭するCEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
 
20130116 プロスタグランジン関連薬 徹底比較! @緑内障点眼勉強会
20130116 プロスタグランジン関連薬 徹底比較! @緑内障点眼勉強会20130116 プロスタグランジン関連薬 徹底比較! @緑内障点眼勉強会
20130116 プロスタグランジン関連薬 徹底比較! @緑内障点眼勉強会
 
Swaggerで始めるモデルファーストなAPI開発
Swaggerで始めるモデルファーストなAPI開発Swaggerで始めるモデルファーストなAPI開発
Swaggerで始めるモデルファーストなAPI開発
 
実践!OpenTelemetry と OSS を使った Observability 基盤の構築(CloudNative Days Tokyo 2022 発...
実践!OpenTelemetry と OSS を使った Observability 基盤の構築(CloudNative Days Tokyo 2022 発...実践!OpenTelemetry と OSS を使った Observability 基盤の構築(CloudNative Days Tokyo 2022 発...
実践!OpenTelemetry と OSS を使った Observability 基盤の構築(CloudNative Days Tokyo 2022 発...
 
JCBの Payment as a Service 実現にむけたゼロベースの組織変革とテクニカル・イネーブラー(NTTデータ テクノロジーカンファレンス ...
JCBの Payment as a Service 実現にむけたゼロベースの組織変革とテクニカル・イネーブラー(NTTデータ テクノロジーカンファレンス ...JCBの Payment as a Service 実現にむけたゼロベースの組織変革とテクニカル・イネーブラー(NTTデータ テクノロジーカンファレンス ...
JCBの Payment as a Service 実現にむけたゼロベースの組織変革とテクニカル・イネーブラー(NTTデータ テクノロジーカンファレンス ...
 
hooks riverpod + state notifier + freezed でのドメイン駆動設計
hooks riverpod + state notifier + freezed でのドメイン駆動設計hooks riverpod + state notifier + freezed でのドメイン駆動設計
hooks riverpod + state notifier + freezed でのドメイン駆動設計
 
Spring Bootの本当の理解ポイント #jjug
Spring Bootの本当の理解ポイント #jjugSpring Bootの本当の理解ポイント #jjug
Spring Bootの本当の理解ポイント #jjug
 
今から始めるWebClient(JSUG勉強会 2020年その6 LT大会)
今から始めるWebClient(JSUG勉強会 2020年その6 LT大会)今から始めるWebClient(JSUG勉強会 2020年その6 LT大会)
今から始めるWebClient(JSUG勉強会 2020年その6 LT大会)
 
Java 18で入ったJVM関連の(やや細かめな)改善(JJUGナイトセミナー「Java 18 リリース記念イベント」発表資料)
Java 18で入ったJVM関連の(やや細かめな)改善(JJUGナイトセミナー「Java 18 リリース記念イベント」発表資料)Java 18で入ったJVM関連の(やや細かめな)改善(JJUGナイトセミナー「Java 18 リリース記念イベント」発表資料)
Java 18で入ったJVM関連の(やや細かめな)改善(JJUGナイトセミナー「Java 18 リリース記念イベント」発表資料)
 
Dockerfile を書くためのベストプラクティス解説編
Dockerfile を書くためのベストプラクティス解説編Dockerfile を書くためのベストプラクティス解説編
Dockerfile を書くためのベストプラクティス解説編
 
超簡単! JettyをWindowsにインストール
超簡単! JettyをWindowsにインストール超簡単! JettyをWindowsにインストール
超簡単! JettyをWindowsにインストール
 
CircleCIのinfrastructureを支えるTerraformのCI/CDパイプラインの改善
CircleCIのinfrastructureを支えるTerraformのCI/CDパイプラインの改善CircleCIのinfrastructureを支えるTerraformのCI/CDパイプラインの改善
CircleCIのinfrastructureを支えるTerraformのCI/CDパイプラインの改善
 
超便利! Unity Cloud Build の使い方
超便利! Unity Cloud Build の使い方超便利! Unity Cloud Build の使い方
超便利! Unity Cloud Build の使い方
 
Dockerを活用したリクルートグループ開発基盤の構築
Dockerを活用したリクルートグループ開発基盤の構築Dockerを活用したリクルートグループ開発基盤の構築
Dockerを活用したリクルートグループ開発基盤の構築
 
51% 攻撃の原理とシミュレーション
51% 攻撃の原理とシミュレーション51% 攻撃の原理とシミュレーション
51% 攻撃の原理とシミュレーション
 
Jenkinsfileのlintで救える命がある
Jenkinsfileのlintで救える命があるJenkinsfileのlintで救える命がある
Jenkinsfileのlintで救える命がある
 
Azure App Service Overview
Azure App Service OverviewAzure App Service Overview
Azure App Service Overview
 
Docker入門-基礎編 いまから始めるDocker管理【2nd Edition】
Docker入門-基礎編 いまから始めるDocker管理【2nd Edition】Docker入門-基礎編 いまから始めるDocker管理【2nd Edition】
Docker入門-基礎編 いまから始めるDocker管理【2nd Edition】
 
CFの便利機能を他の環境でも。Open Service Broker
CFの便利機能を他の環境でも。Open Service BrokerCFの便利機能を他の環境でも。Open Service Broker
CFの便利機能を他の環境でも。Open Service Broker
 

Similaire à 第9回rest勉強会 ダウンロード・アップロード編

HTTP 2.0のヘッダ圧縮(HPACK)
HTTP 2.0のヘッダ圧縮(HPACK)HTTP 2.0のヘッダ圧縮(HPACK)
HTTP 2.0のヘッダ圧縮(HPACK)
Jun Fujisawa
 
Html5, Web Applications 2
Html5, Web Applications 2Html5, Web Applications 2
Html5, Web Applications 2
totty jp
 
JavaプログラマのためのWebSocket概要
JavaプログラマのためのWebSocket概要JavaプログラマのためのWebSocket概要
JavaプログラマのためのWebSocket概要
Shumpei Shiraishi
 
Beginning Java EE 6 勉強会(7) #bje_study
Beginning Java EE 6 勉強会(7) #bje_studyBeginning Java EE 6 勉強会(7) #bje_study
Beginning Java EE 6 勉強会(7) #bje_study
ikeyat
 
Hive undocumented feature
Hive undocumented featureHive undocumented feature
Hive undocumented feature
tamtam180
 
CategoLJについて
CategoLJについてCategoLJについて
CategoLJについて
Toshiaki Maki
 

Similaire à 第9回rest勉強会 ダウンロード・アップロード編 (20)

HTTP 2.0のヘッダ圧縮(HPACK)
HTTP 2.0のヘッダ圧縮(HPACK)HTTP 2.0のヘッダ圧縮(HPACK)
HTTP 2.0のヘッダ圧縮(HPACK)
 
WebSocket Protocol と Plack::Middleware::WebSocket
WebSocket Protocol と Plack::Middleware::WebSocketWebSocket Protocol と Plack::Middleware::WebSocket
WebSocket Protocol と Plack::Middleware::WebSocket
 
Firefox5+HTML5×5
Firefox5+HTML5×5Firefox5+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...XML と PHP のイケナイ関係 (セキュリティ的な意味で) -Introduction of XXE attack and XML Bomb with...
XML と PHP のイケナイ関係 (セキュリティ的な意味で) -Introduction of XXE attack and XML Bomb with...
 
簡単なHTTPサーバの作成
簡単なHTTPサーバの作成簡単なHTTPサーバの作成
簡単なHTTPサーバの作成
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
 
Html5, Web Applications 2
Html5, Web Applications 2Html5, Web Applications 2
Html5, Web Applications 2
 
第43回HTML5とか勉強会 最新webプロトコル傾向と対策
第43回HTML5とか勉強会 最新webプロトコル傾向と対策第43回HTML5とか勉強会 最新webプロトコル傾向と対策
第43回HTML5とか勉強会 最新webプロトコル傾向と対策
 
JavaプログラマのためのWebSocket概要
JavaプログラマのためのWebSocket概要JavaプログラマのためのWebSocket概要
JavaプログラマのためのWebSocket概要
 
Beginning Java EE 6 勉強会(7) #bje_study
Beginning Java EE 6 勉強会(7) #bje_studyBeginning Java EE 6 勉強会(7) #bje_study
Beginning Java EE 6 勉強会(7) #bje_study
 
再入門、サーバープッシュ技術
再入門、サーバープッシュ技術再入門、サーバープッシュ技術
再入門、サーバープッシュ技術
 
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
 
社内向けTech Talk資料~Fluentdの基本紹介~
社内向けTech Talk資料~Fluentdの基本紹介~ 社内向けTech Talk資料~Fluentdの基本紹介~
社内向けTech Talk資料~Fluentdの基本紹介~
 
HTML5 on ASP.NET
HTML5 on ASP.NETHTML5 on ASP.NET
HTML5 on ASP.NET
 
Cms on SELinux
Cms on SELinuxCms on SELinux
Cms on SELinux
 
Hive undocumented feature
Hive undocumented featureHive undocumented feature
Hive undocumented feature
 
The road of Apache CloudStack Contributor (Translation and Patch)
The road of Apache CloudStack Contributor (Translation and Patch)The road of Apache CloudStack Contributor (Translation and Patch)
The road of Apache CloudStack Contributor (Translation and Patch)
 
Webサーバのチューニング
WebサーバのチューニングWebサーバのチューニング
Webサーバのチューニング
 
CategoLJについて
CategoLJについてCategoLJについて
CategoLJについて
 
20120423 hbase勉強会
20120423 hbase勉強会20120423 hbase勉強会
20120423 hbase勉強会
 

Plus de ksimoji

Plus de ksimoji (11)

PHPでWebSocketを実装してみてわかったこと
PHPでWebSocketを実装してみてわかったことPHPでWebSocketを実装してみてわかったこと
PHPでWebSocketを実装してみてわかったこと
 
第12回rest勉強会 これまでの補足・展望編
第12回rest勉強会 これまでの補足・展望編第12回rest勉強会 これまでの補足・展望編
第12回rest勉強会 これまでの補足・展望編
 
第11回rest勉強会 リファクタリング(クライアント編)
第11回rest勉強会 リファクタリング(クライアント編)第11回rest勉強会 リファクタリング(クライアント編)
第11回rest勉強会 リファクタリング(クライアント編)
 
第10回rest勉強会 リファクタリング(サーバ編)編
第10回rest勉強会 リファクタリング(サーバ編)編第10回rest勉強会 リファクタリング(サーバ編)編
第10回rest勉強会 リファクタリング(サーバ編)編
 
第8回rest勉強会 bootstrap編
第8回rest勉強会 bootstrap編第8回rest勉強会 bootstrap編
第8回rest勉強会 bootstrap編
 
第7回rest勉強会 バリデーション編
第7回rest勉強会 バリデーション編第7回rest勉強会 バリデーション編
第7回rest勉強会 バリデーション編
 
第6回rest勉強会 アソシエーション編
第6回rest勉強会 アソシエーション編第6回rest勉強会 アソシエーション編
第6回rest勉強会 アソシエーション編
 
第5回rest勉強会 ログイン編
第5回rest勉強会 ログイン編第5回rest勉強会 ログイン編
第5回rest勉強会 ログイン編
 
第4回REST勉強会 RequireJS編
第4回REST勉強会 RequireJS編第4回REST勉強会 RequireJS編
第4回REST勉強会 RequireJS編
 
第3回Rest勉強会 marionette編
第3回Rest勉強会 marionette編第3回Rest勉強会 marionette編
第3回Rest勉強会 marionette編
 
第一回Rest勉強会 ワークショップ
第一回Rest勉強会 ワークショップ第一回Rest勉強会 ワークショップ
第一回Rest勉強会 ワークショップ
 

第9回rest勉強会 ダウンロード・アップロード編

  • 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"> 〜以下略〜 ファイルをダウンロードする時も、 ファイルコンテンツはここに入って くる
  • 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 で保存だな!」
  • 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の情報
  • 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バイト •各パート毎のヘッダの情報 •その後には空行がある という情報をもとにファイルを取り出す!
  • 46. 本日のメニュー 1. 事前準備 2. Lesson1 ダウンロード 3. Lesson2 アップロード