Your SlideShare is downloading. ×
0
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

7,131

Published on

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

第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,131
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
26
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 第3回 Webkit/HTML5勉強会File APIと加速度センサー nakamura001 2010/02/17
  • 2. File API
  • 3. Firefox 3.6で 使えます
  • 4. デモhttp://tsuyobi.heteml.jp/html/firefox/file_api/bitmap_info/
  • 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. 1Byteずつしか 読めない
  • 12. intやlongなどのデータはどうする?
  • 13. サンプルはどうしてる?
  • 14. JPEGファイルからExif情報を読み込む サンプルhttp://demos.hacks.mozilla.org/openweb/FileAPI/
  • 15. 良い感じのライブラリに なってる事を発見
  • 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だけが対応
  • 25. しかも対応するパソコンは最近のMacのノートと 一部のThink Pad
  • 26. デモhttp://tsuyobi.heteml.jp/html/firefox/orientation_event/index2.html
  • 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. ノイズが出る事が 有るみたい
  • 31. デモhttp://tsuyobi.heteml.jp/html/firefox/orientation_event/index2a.html
  • 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 くなる。
  • 36. その他、関連資料はこちら http://www32.atwiki.jp/nakamura001/pages/82.html

×