第3回Webkit/HTML5勉強会 - File APIと加速度センサー
3 likes1,522 views
第3回Webkit/HTML5勉強会で発表した「File APIと加速度センサー」のプレゼン資料。 ※プレゼン資料だけで理解出来るように一部修正有り。
![Drop時の処理
function drop(e) {
var dt = e.dataTransfer;
var files = dt.files;
if (files.length > 0) {
var binaryReader = new FileReader();
binaryReader.onloadend = function() {
var file = files[0];
(ここでファイルに対する処理を実行)
}
binaryReader.readAsBinaryString(files[0]);
}
}](https://image.slidesharecdn.com/3webkithtml5web-100217094121-phpapp02/85/3-Webkit-HTML5-File-API-7-320.jpg)
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
- 1. 第3回 Webkit/HTML5勉強会 File APIと加速度センサー nakamura001 2010/02/17
- 2. File API
- 3. Firefox 3.6で 使えます
- 5. イベントリスナーの登録 dropbox = document.getElementById("dropbox"); dropbox.addEventListener("dragover", dragover, true); dropbox.addEventListener("drop", drop, true);
- 6. Drag Over時の処理 dropbox.addEventListener("dragover", dragover, true); function dragover(e) { // イベントのさらなる伝播を止める e.stopPropagation(); // ブラウザのアクションを動作させない e.preventDefault(); }
- 7. Drop時の処理 function drop(e) { var dt = e.dataTransfer; var files = dt.files; if (files.length > 0) { var binaryReader = new FileReader(); binaryReader.onloadend = function() { var file = files[0]; (ここでファイルに対する処理を実行) } binaryReader.readAsBinaryString(files[0]); } }
- 8. ファイルに対する処理 var binaryReader = new FileReader(); binaryReader.onloadend = function() { info_msg = info_msg + "size : " + file.size + "n"; info_msg = info_msg + "type : " + file.type + "n" pos = 0; var c = binaryReader.result.charCodeAt(pos); }
- 9. ファイルに対する処理 var binaryReader = new FileReader(); binaryReader.onloadend = function() { info_msg = info_msg + "size : " + file.size + "n"; info_msg = info_msg + "type : " + file.type + "n" ファイルのどの位置からデータを取得するかを指定 pos = 0; var c = binaryReader.result.charCodeAt(pos); }
- 10. 少々、面倒な事が…
- 11. １Byteずつしか 読めない
- 13. サンプルは どうしてる？
- 14. JPEGファイルから Exif情報を読み込む サンプル http://demos.hacks.mozilla.org/openweb/FileAPI/
- 16. exif.js
- 17. パクっ活用させて貰おう
- 18. ライセンスはMPL
- 19. 素晴らしい!!
- 20. 取得できるデータ 関数名 データ getByteAt Byte(符号無し) getShortAt Signed Short(符号有りの16bit) getSLongAt Signed Long(符号有りの32bit) getLongAt Unsigned Long(符号無し32bit) getStringAt 文字列データ
- 21. テキストファイルのとき text = file.getAsText("utf-8"); 【参考サイト】Firefox3.6βで利用できるFile APIの可能性について：マピオンラボ(Javascript) http://labs.mapion.co.jp/blog/javascript/firefox36file_api.php
- 22. テキストファイルのとき 文字のエンコードを指定 text = file.getAsText("utf-8"); 【参考サイト】Firefox3.6βで利用できるFile APIの可能性について：マピオンラボ(Javascript) http://labs.mapion.co.jp/blog/javascript/firefox36file_api.php
- 23. 加速度センサー
- 24. すみません、 これも現在は Firefox 3.6だけが対応
- 27. 使い方は至って簡単
- 28. 使い方 function handleOrientation(orientData) { var x = orientData.x; var y = orientData.y; var z = orientData.z; } window.addEventListener("MozOrientation", handleOrientation, true); ・addEventListenerで追加するだけ ・X,Y,Zの3つの軸の加速度が取得可能
- 29. 1つだけ注意!!
- 30. ノイズが出る事が 有るみたい
- 32. 対策
- 33. ローパスフィルタ
- 34. ローパスフィルタ function handleOrientation(orientData) { var accel_scale = 500.0; var filter_val = 0.1; pos_x = (orientData.x*accel_scale * filter_val) + (pos_x * (1.0 - filter_val)); pos_y = (orientData.y*accel_scale * filter_val) + (pos_y * (1.0 - filter_val)); この処理により、加速度の値は徐々に反映され るようになり急激な変化の値が直接反映されな くなる。
- 35. ローパスフィルタ function handleOrientation(orientData) { var accel_scale = 500.0; var filter_val = 0.1; pos_x = (orientData.x*accel_scale * filter_val) + (pos_x * (1.0 - filter_val)); pos_y = (orientData.y*accel_scale * filter_val) + (pos_y * (1.0 - filter_val)); とりあえず、 この処理により、加速度の値は徐々に反映され るようになり急激な変化の値が直接反映されな この式を挟んでおけばOK くなる。