SlideShare uma empresa Scribd logo
1 de 57
Baixar para ler offline
ダウンロード・
アップロード機能
の実装
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で!

Mais conteúdo relacionado

Mais procurados

JIT のコードを読んでみた
JIT のコードを読んでみたJIT のコードを読んでみた
JIT のコードを読んでみたy-uti
 
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021Hiroshi Tokumaru
 
GoによるWebアプリ開発のキホン
GoによるWebアプリ開発のキホンGoによるWebアプリ開発のキホン
GoによるWebアプリ開発のキホンAkihiko Horiuchi
 
青空文庫と式年遷宮アーキテクチャ: 青空文庫200周年に向けて
青空文庫と式年遷宮アーキテクチャ: 青空文庫200周年に向けて青空文庫と式年遷宮アーキテクチャ: 青空文庫200周年に向けて
青空文庫と式年遷宮アーキテクチャ: 青空文庫200周年に向けてmasayoshi takahashi
 
Webアプリケーション負荷試験実践入門
Webアプリケーション負荷試験実践入門Webアプリケーション負荷試験実践入門
Webアプリケーション負荷試験実践入門樽八 仲川
 
AWS Glueを使った Serverless ETL の実装パターン
AWS Glueを使った Serverless ETL の実装パターンAWS Glueを使った Serverless ETL の実装パターン
AWS Glueを使った Serverless ETL の実装パターンseiichi arai
 
最近のストリーム処理事情振り返り
最近のストリーム処理事情振り返り最近のストリーム処理事情振り返り
最近のストリーム処理事情振り返りSotaro Kimura
 
Fess/Elasticsearchを使った業務で使える?全文検索への道
Fess/Elasticsearchを使った業務で使える?全文検索への道Fess/Elasticsearchを使った業務で使える?全文検索への道
Fess/Elasticsearchを使った業務で使える?全文検索への道Shinsuke Sugaya
 
LastaFluteに移行したFessとElasticsearch+ESFluteによるDBFlute環境
LastaFluteに移行したFessとElasticsearch+ESFluteによるDBFlute環境LastaFluteに移行したFessとElasticsearch+ESFluteによるDBFlute環境
LastaFluteに移行したFessとElasticsearch+ESFluteによるDBFlute環境Shinsuke Sugaya
 
Laravel Blade×vue.js 混在させる場合の注意点
Laravel Blade×vue.js 混在させる場合の注意点Laravel Blade×vue.js 混在させる場合の注意点
Laravel Blade×vue.js 混在させる場合の注意点誠一郎 栗原
 
Cloud Foundryで学ぶ、PaaSのしくみ講座
Cloud Foundryで学ぶ、PaaSのしくみ講座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 Back to Basics: Ingress Controller (Japanese Webinar)
NGINX Back to Basics: Ingress Controller (Japanese Webinar)NGINX, Inc.
 
PHP-FPM の子プロセス制御方法と設定をおさらいしよう
PHP-FPM の子プロセス制御方法と設定をおさらいしようPHP-FPM の子プロセス制御方法と設定をおさらいしよう
PHP-FPM の子プロセス制御方法と設定をおさらいしようShohei Okada
 
Kubernetes introduction
Kubernetes introductionKubernetes introduction
Kubernetes introductionDAEBUM LEE
 
Dockerイメージ管理の内部構造
Dockerイメージ管理の内部構造Dockerイメージ管理の内部構造
Dockerイメージ管理の内部構造Etsuji Nakai
 
Googleのインフラ技術から考える理想のDevOps
Googleのインフラ技術から考える理想のDevOpsGoogleのインフラ技術から考える理想のDevOps
Googleのインフラ技術から考える理想のDevOpsEtsuji Nakai
 
CEDEC2021 ダウンロード時間を大幅減!~大量のアセットをさばく高速な実装と運用事例の共有~
CEDEC2021 ダウンロード時間を大幅減!~大量のアセットをさばく高速な実装と運用事例の共有~ CEDEC2021 ダウンロード時間を大幅減!~大量のアセットをさばく高速な実装と運用事例の共有~
CEDEC2021 ダウンロード時間を大幅減!~大量のアセットをさばく高速な実装と運用事例の共有~ SEGADevTech
 
難読化PowerShell芸入門
難読化PowerShell芸入門難読化PowerShell芸入門
難読化PowerShell芸入門xztaityozx
 
第一次Elasticsearch就上手
第一次Elasticsearch就上手第一次Elasticsearch就上手
第一次Elasticsearch就上手Aaron King
 

Mais procurados (20)

JIT のコードを読んでみた
JIT のコードを読んでみたJIT のコードを読んでみた
JIT のコードを読んでみた
 
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
 
GoによるWebアプリ開発のキホン
GoによるWebアプリ開発のキホンGoによるWebアプリ開発のキホン
GoによるWebアプリ開発のキホン
 
青空文庫と式年遷宮アーキテクチャ: 青空文庫200周年に向けて
青空文庫と式年遷宮アーキテクチャ: 青空文庫200周年に向けて青空文庫と式年遷宮アーキテクチャ: 青空文庫200周年に向けて
青空文庫と式年遷宮アーキテクチャ: 青空文庫200周年に向けて
 
Webアプリケーション負荷試験実践入門
Webアプリケーション負荷試験実践入門Webアプリケーション負荷試験実践入門
Webアプリケーション負荷試験実践入門
 
XSS再入門
XSS再入門XSS再入門
XSS再入門
 
AWS Glueを使った Serverless ETL の実装パターン
AWS Glueを使った Serverless ETL の実装パターンAWS Glueを使った Serverless ETL の実装パターン
AWS Glueを使った Serverless ETL の実装パターン
 
最近のストリーム処理事情振り返り
最近のストリーム処理事情振り返り最近のストリーム処理事情振り返り
最近のストリーム処理事情振り返り
 
Fess/Elasticsearchを使った業務で使える?全文検索への道
Fess/Elasticsearchを使った業務で使える?全文検索への道Fess/Elasticsearchを使った業務で使える?全文検索への道
Fess/Elasticsearchを使った業務で使える?全文検索への道
 
LastaFluteに移行したFessとElasticsearch+ESFluteによるDBFlute環境
LastaFluteに移行したFessとElasticsearch+ESFluteによるDBFlute環境LastaFluteに移行したFessとElasticsearch+ESFluteによるDBFlute環境
LastaFluteに移行したFessとElasticsearch+ESFluteによるDBFlute環境
 
Laravel Blade×vue.js 混在させる場合の注意点
Laravel Blade×vue.js 混在させる場合の注意点Laravel Blade×vue.js 混在させる場合の注意点
Laravel Blade×vue.js 混在させる場合の注意点
 
Cloud Foundryで学ぶ、PaaSのしくみ講座
Cloud Foundryで学ぶ、PaaSのしくみ講座Cloud Foundryで学ぶ、PaaSのしくみ講座
Cloud Foundryで学ぶ、PaaSのしくみ講座
 
NGINX Back to Basics: Ingress Controller (Japanese Webinar)
NGINX Back to Basics: Ingress Controller (Japanese Webinar)NGINX Back to Basics: Ingress Controller (Japanese Webinar)
NGINX Back to Basics: Ingress Controller (Japanese Webinar)
 
PHP-FPM の子プロセス制御方法と設定をおさらいしよう
PHP-FPM の子プロセス制御方法と設定をおさらいしようPHP-FPM の子プロセス制御方法と設定をおさらいしよう
PHP-FPM の子プロセス制御方法と設定をおさらいしよう
 
Kubernetes introduction
Kubernetes introductionKubernetes introduction
Kubernetes introduction
 
Dockerイメージ管理の内部構造
Dockerイメージ管理の内部構造Dockerイメージ管理の内部構造
Dockerイメージ管理の内部構造
 
Googleのインフラ技術から考える理想のDevOps
Googleのインフラ技術から考える理想のDevOpsGoogleのインフラ技術から考える理想のDevOps
Googleのインフラ技術から考える理想のDevOps
 
CEDEC2021 ダウンロード時間を大幅減!~大量のアセットをさばく高速な実装と運用事例の共有~
CEDEC2021 ダウンロード時間を大幅減!~大量のアセットをさばく高速な実装と運用事例の共有~ CEDEC2021 ダウンロード時間を大幅減!~大量のアセットをさばく高速な実装と運用事例の共有~
CEDEC2021 ダウンロード時間を大幅減!~大量のアセットをさばく高速な実装と運用事例の共有~
 
難読化PowerShell芸入門
難読化PowerShell芸入門難読化PowerShell芸入門
難読化PowerShell芸入門
 
第一次Elasticsearch就上手
第一次Elasticsearch就上手第一次Elasticsearch就上手
第一次Elasticsearch就上手
 

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

HTTP 2.0のヘッダ圧縮(HPACK)
HTTP 2.0のヘッダ圧縮(HPACK)HTTP 2.0のヘッダ圧縮(HPACK)
HTTP 2.0のヘッダ圧縮(HPACK)Jun Fujisawa
 
WebSocket Protocol と Plack::Middleware::WebSocket
WebSocket Protocol と Plack::Middleware::WebSocketWebSocket Protocol と Plack::Middleware::WebSocket
WebSocket Protocol と Plack::Middleware::WebSocketYu Nobuoka
 
Firefox5+HTML5×5
Firefox5+HTML5×5Firefox5+HTML5×5
Firefox5+HTML5×5dynamis
 
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...Kousuke Ebihara
 
簡単なHTTPサーバの作成
簡単なHTTPサーバの作成簡単なHTTPサーバの作成
簡単なHTTPサーバの作成Panu Avakul
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップYasuhito Yabe
 
Html5, Web Applications 2
Html5, Web Applications 2Html5, Web Applications 2
Html5, Web Applications 2totty jp
 
第43回HTML5とか勉強会 最新webプロトコル傾向と対策
第43回HTML5とか勉強会 最新webプロトコル傾向と対策第43回HTML5とか勉強会 最新webプロトコル傾向と対策
第43回HTML5とか勉強会 最新webプロトコル傾向と対策Kensaku Komatsu
 
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_studyikeyat
 
再入門、サーバープッシュ技術
再入門、サーバープッシュ技術再入門、サーバープッシュ技術
再入門、サーバープッシュ技術Shin Sekaryo
 
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Sho Ito
 
社内向けTech Talk資料~Fluentdの基本紹介~
社内向けTech Talk資料~Fluentdの基本紹介~ 社内向けTech Talk資料~Fluentdの基本紹介~
社内向けTech Talk資料~Fluentdの基本紹介~ Daisuke Ikeda
 
Hive undocumented feature
Hive undocumented featureHive undocumented feature
Hive undocumented featuretamtam180
 
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)Kimihiko Kitase
 
Webサーバのチューニング
WebサーバのチューニングWebサーバのチューニング
WebサーバのチューニングYu Komiya
 
CategoLJについて
CategoLJについてCategoLJについて
CategoLJについてToshiaki Maki
 

Semelhante a 第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勉強会
 

Mais de ksimoji

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

Mais 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 アップロード