第9回rest勉強会ダウンロード・アップロード編

ダウンロード・アップロード機能

の実装AWS上で構築するRESTfulアプリ勉強会～Web開発ワークショップ～【第9回】

概要

概要

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


〜以下略〜



空行

ステータスコード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


〜以下略〜



空行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


〜以下略〜


空行

レスポンスヘッダ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


〜以下略〜


空行

レスポンスに関する付加情報 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


〜以下略〜


空行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


〜以下略〜


これより下がレスポンスボディです！

レスポンスボディ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


〜以下略〜

ご所望のデータです！

レスポンスボディ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


〜以下略〜

ファイルをダウンロードする時も、ファイルコンテンツはここに入ってくる

…表示 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


〜以下略〜


空行

レスポンスヘッダを見よう！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


〜以下略〜


空行ブラウザ：「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


〜以下略〜


空行

レスポンスヘッダを見よう！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


〜以下略〜


空行ブラウザ：「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


〜以下略〜


空行ブラウザ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


〜以下略〜


空行ブラウザ：「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


todolist2.txtからアップロードしたTODO1 todolist2.txtからアップロードしたTODO2

-----------------------------1395431092341454357747073315--

メソッド、URI

リクエストヘッダ

リクエストボディ

空行

メソッド、URIPOST /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--



空行

メソッド、URIPOST /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--



空行メソッドは「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--


空行

リクエストヘッダ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--


空行

リクエストに関する付加情報 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--


空行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--


これより下がリクエストボディです！

リクエストボディ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--

リクエストボディ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--

これを送ります！

multipart/form-dataPOST /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--

ボディの中にまたヘッダとボディが？






-----------------------------1395431092341454357747073315--

todolist1.txtの情報






-----------------------------1395431092341454357747073315--



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




-----------------------------1395431092341454357747073315--

multipart/form-data-----------------------------1395431092341454357747073315 Content-Disposition: form-data; name="0"; filename="todolist1.txt" Content-Type: text/plain




-----------------------------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で！

第9回rest勉強会ダウンロード・アップロード編

Software

Transcript of 第9回rest勉強会ダウンロード・アップロード編

第9回rest勉強会 ダウンロード・アップロード編

Software

Transcript of 第9回rest勉強会 ダウンロード・アップロード編

第9回rest勉強会ダウンロード・アップロード編

Transcript of 第9回rest勉強会ダウンロード・アップロード編