Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,893 views

Published on

2015/9/25に行われたAWS上で構築するRESTfulアプリ勉強会~Web開発ワークショップ~【第9回】で使用した資料です。

Published in: Software
  • Be the first to comment

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

  1. 1. ダウンロード・ アップロード機能 の実装 AWS上で構築するRESTfulアプリ勉強会 ~Web開発ワークショップ~【第9回】
  2. 2. 概要
  3. 3. 概要 1. ダウンロード? 2. アップロード?
  4. 4. 概要 1. ダウンロード? 2. アップロード?
  5. 5. ダウンロード =HTTPレスポンスボ ディをローカルに保存
  6. 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. 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. 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. 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. 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. 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. 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. 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. 14. レスポンスボディ HTTP/1.1 200 OK Server: nginx Date: Thu, 24 Sep 2015 09:11:53 GMT Content-Type: text/html; charset=UTF-8 Transfer-Encoding: chunked 〜略〜 /openid20/www.yahoo.co.jp/xrds Vary: Accept-Encoding X-Frame-Options: SAMEORIGIN <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> 〜以下略〜 ファイルをダウンロードする時も、 ファイルコンテンツはここに入って くる
  15. 15. …表示 or 保存? ブラウザ: 「このレスポンスボディ をどうしようか?」
  16. 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. 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. 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. 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. 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. 21. レスポンスヘッダを見よう! HTTP/1.1 200 OK Server: nginx Date: Thu, 24 Sep 2015 09:11:53 GMT Content-Type: text/csv; charset=UTF-8 Content-Disposition: attachment; filename="todo.csv" Transfer-Encoding: chunked 〜略〜 /openid20/www.yahoo.co.jp/xrds Vary: Accept-Encoding X-Frame-Options: SAMEORIGIN <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> 〜以下略〜 レスポンスボディ 空行 ブラウザ: 「Content-Disposition: attachment; filename= todo.csv だか ら、 todo.csv で保存だな!」
  22. 22. こうなるようにレスポン スヘッダを設定します! やること
  23. 23. 概要 1. ダウンロード? 2. アップロード?
  24. 24. アップロード =HTTPリクエストボ ディにローカルファイ ルの内容を乗っける
  25. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 36. multipart/form-data POST /rest-study/todo_lists/upload.json HTTP/1.1 Host: 10.0.1.206 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:42.0) Gecko/20100101 Firefox/42.0 〜略〜 Content-Length: 779 Content-Type: multipart/form-data; boundary=---------------------------1395431092341454357747073315 〜略〜 Cache-Control: no-cache -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="0"; filename="todolist1.txt" Content-Type: text/plain todolist1.txtからアップロードしたTODO1 〜略〜 todolist1.txtからアップロードしたTODO5 -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="1"; filename="todolist2.txt" Content-Type: text/plain todolist2.txtからアップロードしたTODO1 todolist2.txtからアップロードしたTODO2 -----------------------------1395431092341454357747073315-- todolist1.txtの情報 todolist2.txtの情報
  37. 37. multipart/form-data じゃない場合は? e.g.)application/json
  38. 38. {"todo":"TODOを追加ボタンで登録 ","status":0,"assignee":"67"} application/json
  39. 39. {"todo":"TODOを追加ボタンで登録 ","status":0,"assignee":"67"} application/json シンプルです
  40. 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. 41. multipart/form-data -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="0"; filename="todolist1.txt" Content-Type: text/plain todolist1.txtからアップロードしたTODO1 〜略〜 todolist1.txtからアップロードしたTODO5 -----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="1"; filename="todolist2.txt" Content-Type: text/plain todolist2.txtからアップロードしたTODO1 todolist2.txtからアップロードしたTODO2 -----------------------------1395431092341454357747073315-- •Content-Length: 779  →全体サイズは779バイト •各パート毎のヘッダの情報 •その後には空行がある という情報をもとにファイルを取り出す!
  42. 42. という面倒なところはPHP とCakePHPがやってくれ ます! →テンポラリファイルを作 るまではやってくれる!
  43. 43. •Ajaxでファイルアップロード処 理を行う •PHPが作ってくれたテンポラリ ファイルを読み込む • 取り出したファイルのデータか らTODOを作成する やること
  44. 44. ワークショップ
  45. 45. 画面はこう
  46. 46. 本日のメニュー 1. 事前準備 2. Lesson1 ダウンロード 3. Lesson2 アップロード
  47. 47. 事前準備 • gitのブランチを整える • 前回、前々回不参加の方は テーブル追加、列追加する
  48. 48. gitのブランチを整える ■masterブランチを前回の内容 を終えた状態にする ■masterブランチを元に、今回 の作業用である、 「vol/09」ブランチを作成する
  49. 49. 人によって手順が違い ます!(重要) ■前回の内容を途中までやった方 ■前回の内容を完了した方 ■今回から参加の方 gitのブランチを整える
  50. 50. http:// goo.gl/WEHXqX ジーオーオー.ジーエル/ ダブリューイーエイチエックスキューエックス ここに詳しく 書いております!
  51. 51. 今回のマニュアルにリンクがあります。 ※後ほど説明 第5回と第6回に不参加の方は テーブル追加、列追加をする
  52. 52. 各Lessonについては Qiitaの投稿で詳しく!
  53. 53. ポイントだけ少し! コード見ながら解説します
  54. 54. マニュアル(Qiita) http:// goo.gl/hXBzVR ジーオーオー.ジーエル/ エイチエックスビーゼットブイアール
  55. 55. マニュアル(Qiita) http:// goo.gl/hXBzVR ジーオーオー.ジーエル/ エイチエックスビーゼットブイアール はじめましょう!
  56. 56. ファイル選択をもっ とリッチに! 🍻飲みDev🍕 テーマ Drag & Dropで!
  57. 57. ファイル選択をもっ とリッチに! 🍻飲みDev🍕 テーマ Drag & Dropで!

×