第3回Webkit/HTML5勉強会 - File APIと加速度センサー

7,563 views

Published on

第3回Webkit/HTML5勉強会で発表した「File APIと加速度センサー」のプレゼン資料。

※プレゼン資料だけで理解出来るように一部修正有り。

Published in: Education, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,563
On SlideShare
0
From Embeds
0
Number of Embeds
810
Actions
Shares
0
Downloads
27
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

第3回Webkit/HTML5勉強会 - File APIと加速度センサー

  1. 1. 第3回 Webkit/HTML5勉強会File APIと加速度センサー nakamura001 2010/02/17
  2. 2. File API
  3. 3. Firefox 3.6で 使えます
  4. 4. デモhttp://tsuyobi.heteml.jp/html/firefox/file_api/bitmap_info/
  5. 5. イベントリスナーの登録dropbox = document.getElementById("dropbox");dropbox.addEventListener("dragover", dragover, true);dropbox.addEventListener("drop", drop, true);
  6. 6. Drag Over時の処理dropbox.addEventListener("dragover", dragover, true);function dragover(e) { // イベントのさらなる伝播を止める e.stopPropagation(); // ブラウザのアクションを動作させない e.preventDefault();}
  7. 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. 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. 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. 10. 少々、面倒な事が…
  11. 11. 1Byteずつしか 読めない
  12. 12. intやlongなどのデータはどうする?
  13. 13. サンプルはどうしてる?
  14. 14. JPEGファイルからExif情報を読み込む サンプルhttp://demos.hacks.mozilla.org/openweb/FileAPI/
  15. 15. 良い感じのライブラリに なってる事を発見
  16. 16. exif.js
  17. 17. パクっ活用させて貰おう
  18. 18. ライセンスはMPL
  19. 19. 素晴らしい!!
  20. 20. 取得できるデータ 関数名 データgetByteAt Byte(符号無し)getShortAt Signed Short(符号有りの16bit)getSLongAt Signed Long(符号有りの32bit)getLongAt Unsigned Long(符号無し32bit)getStringAt 文字列データ
  21. 21. テキストファイルのとき text = file.getAsText("utf-8");【参考サイト】Firefox3.6βで利用できるFile APIの可能性について:マピオンラボ(Javascript)http://labs.mapion.co.jp/blog/javascript/firefox36file_api.php
  22. 22. テキストファイルのとき 文字のエンコードを指定 text = file.getAsText("utf-8");【参考サイト】Firefox3.6βで利用できるFile APIの可能性について:マピオンラボ(Javascript)http://labs.mapion.co.jp/blog/javascript/firefox36file_api.php
  23. 23. 加速度センサー
  24. 24. すみません、 これも現在はFirefox 3.6だけが対応
  25. 25. しかも対応するパソコンは最近のMacのノートと 一部のThink Pad
  26. 26. デモhttp://tsuyobi.heteml.jp/html/firefox/orientation_event/index2.html
  27. 27. 使い方は至って簡単
  28. 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. 29. 1つだけ注意!!
  30. 30. ノイズが出る事が 有るみたい
  31. 31. デモhttp://tsuyobi.heteml.jp/html/firefox/orientation_event/index2a.html
  32. 32. 対策
  33. 33. ローパスフィルタ
  34. 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. 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 くなる。
  36. 36. その他、関連資料はこちら http://www32.atwiki.jp/nakamura001/pages/82.html

×