2012/11/22『HTML5実力テスト』答え合わせ勉強会！ の発表資料です http://atnd.org/event/jsdoit1122

1. 2012-11-22『HTML5実力テスト』答え合わせ勉強会！
XHR2 WONDERLAND
@ykhs
12年11月22日木曜日

2. WHO?
• 山田 順久 (Yukihisa YAMADA)
• Front-End Engineer @PixelGrid Inc.
12年11月22日木曜日

3. OUTLINE
• About XHR2
• CORS (Cross Origin Resource Sharing)
• Events
• Binary Data
12年11月22日木曜日

4. XHR...
• 異なるドメイン間の通信 → NG
•進 などの細かいイベント → NG
• バイナリデータの扱い → NG
12年11月22日木曜日

5. CROSS ORIGIN (XHR)
• Proxy
同じドメイン下のサーバーサイド言語に
取ってきてもらう
• JSONP
JSON データを引数にしたコールバック関数の
呼び出しが記述された外部スクリプトを読み込む
12年11月22日木曜日

6. EVENT (XHR)
!!! onreadystatechange !!!
12年11月22日木曜日

7. BINARY DATA (XHR)
Nothing...
12年11月22日木曜日

8. XHR2!!!
• 異なるドメイン間の通信 → OK
•進 などの細かいイベント → OK
• バイナリデータの扱い → OK
12年11月22日木曜日

9. CROSS ORIGIN (XHR2)
• CORS (Cross Origin Resource Sharing)
• Access-Control-Allow-Origin
任意のリクエスト元のサイトに対して
クロスドメイン通信を許可
• Access-Control-Allow-Methods
任意のリクエスト元のサイトに対して
HTTP メソッドの使用を許可
12年11月22日木曜日

10. ACCESS-CONTROL-ALLOW-ORIGIN
• Access-Control-Allow-Origin:
http://example.com
• http://example.com/
のサイトからの
クロスドメイン通信を許可
12年11月22日木曜日

11. ACCESS-CONTROL-ALLOW-METHODS
• Access-Control-Allow-Methods:
POST, GET, OPTIONS
• POST, GET メソッドのみを許可
12年11月22日木曜日

12. EVENTS (XHR2)
• onloadstart • ontimeout
• onprogress • onloadend
• onabort
• onerror
• onload
12年11月22日木曜日

13. EVENTS (XHR2)
• onloadstart • ontimeout
• onprogress • onloadend
• onabort
• onerror
開始イベ ントが取れる
• onload
12年11月22日木曜日

14. EVENTS (XHR2)
• onloadstart • ontimeout
• onprogress • onloadend
• onabort
• onerror
完了イベ ントが取れる
• onload
12年11月22日木曜日

15. EVENTS (XHR2)
• onloadstart • ontimeout
• onprogress • onloadend
• onabort
• onerror
ー系イベン トが取れる
中止・エラ
• onload
12年11月22日木曜日

16. EVENTS (XHR2)
• onloadstart • ontimeout
• onprogress • onloadend
• onabort
• onerror
進 イベ ントが取れる
• onload
12年11月22日木曜日

17. PROGRESS EVENT
progress = document.getElementById('progress');
xhr.onprogress = function(e) {
if (e.lengthComputable) {
progress.value = (e.loaded / e.total) * 100;
}
};
12年11月22日木曜日

18. PROGRESS EVENT
progress = document.getElementById('progress');
xhr.onprogress = function(e) { 全体量わかった
if (e.lengthComputable) {
progress.value = (e.loaded / e.total) * 100;
}
};
これだけ終わった 全部でこれだけ
12年11月22日木曜日

19. BINARY DATA (XHR2)
• バイナリデータの受信と送信が可能
• フォームの内容を非同期送信
• File API で取得したローカルファイルも扱える
12年11月22日木曜日

20. DOWNLOAD
xhr.open('GET', 'http://path.to/image.png', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
var blob, img;
if (xhr.status === 200) {
blob = xhr.response;
img = document.createElement('img');
img.onload = function(e) {
window.URL.revokeObjectURL(img.src);
};
img.src = window.URL.createObjectURL(blob);
document.body.appendChild(img);
}
};
12年11月22日木曜日

21. DOWNLOAD
xhr.open('GET', 'http://path.to/image.png', true);
xhr.responseType = 'blob';
xhr.onload = function(e) { ※ Blob = 生のバイナリデータ
var blob, img;
if (xhr.status === 200) {
blob = xhr.response;
img = document.createElement('img');
img.onload = function(e) {
window.URL.revokeObjectURL(img.src);
};
img.src = window.URL.createObjectURL(blob);
document.body.appendChild(img);
}
};
12年11月22日木曜日

22. DOWNLOAD
xhr.open('GET', 'http://path.to/image.png', true);
xhr.responseType = 'blob';
xhr.onload = function(e) { ※ URL.createObjectURL
var blob, img; メモリ上の Blob
if (xhr.status === 200) { データの参照を取得
blob = xhr.response;
img = document.createElement('img');
img.onload = function(e) {
window.URL.revokeObjectURL(img.src);
};
img.src = window.URL.createObjectURL(blob);
document.body.appendChild(img);
}
};
12年11月22日木曜日

23. UPLOAD
var formData, xhr;
formData = new FormData();
formData.append('upload_file', file);
xhr = new XMLHttpRequest;
xhr.open('POST', '/api', true);
xhr.onload = function() {
if (xhr.status === 200) {
console.log('upload success: ' +
file.name);
}
};
xhr.send(formData);
12年11月22日木曜日

24. UPLOAD
var formData, xhr;
formData = new FormData();
formData.append('upload_file', file);
xhr = new XMLHttpRequest;
xhr.open('POST', '/api', true);
xhr.onload = function() {
if (xhr.status === 200) {
console.log('upload success: ' +
file.name);
}
};
xhr.send(formData);
12年11月22日木曜日

25. FILE API
• ローカルのファイルを JavaScript で扱うには
File API を利用
• input 要素、drop イベントなどから
File オブジェクトを取得
12年11月22日木曜日

26. FORMDATA
• HTML の <form> を JavaScript 上で作成
• XMLHttpRequest.send(FormData) で
multipart/form-data リクエストを生成
• FormData.append(name, value)
name - フィールド名
value - フィールド値 (Blob, File, String)
• new FormData(HTMLFormElement) というのもアリ
12年11月22日木曜日

27. こういうことが
できるのでは
12年11月22日木曜日

28. FORMDATA
• Drag & Drop UI • HTML Form UI
• FormData.append( • new FormData(
name, value HTMLFormElement
); );
どっちでもいけるぜ！
XMLHttpRequest.send(FormData)
12年11月22日木曜日

29. どっちでもいけるぜ！
EXAMPLE - 500PX.COM
12年11月22日木曜日

30. まとめ
• ハックに支えられていた感のある XHR が便利に進化
• 無理矢理じゃないドメイン間通信ができる
• 充実化したイベントやデータ形式をどう使っていくか
12年11月22日木曜日

31. LINK
• XMLHttpRequest2 に関する新しいヒント - HTML5 Rocks
http://www.html5rocks.com/ja/tutorials/file/xhr2/
• XMLHttpRequest
http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html
• Cross-Origin Resource Sharing
http://www.w3.org/TR/cors/
• File API
http://www.w3.org/TR/file-upload/
• File API: Directories and System
http://dev.w3.org/2009/dap/file-system/pub/FileSystem/
12年11月22日木曜日

32. THANK YOU
@ykhs
12年11月22日木曜日